feat: hide Blog under flag

Author: Helias

src/app/app.routes.ts

@@ -1,4 +1,8 @@
-import { Routes } from '@angular/router';
+import { inject } from '@angular/core';
+import { CanMatchFn, Routes } from '@angular/router';
+import { DebugService } from './services/debug.service';
+
+const debugGuard: CanMatchFn = () => inject(DebugService).isEnabled;
 
 export const routes: Routes = [
   {
@@ -7,6 +11,7 @@ export const routes: Routes = [
   },
   {
     path: 'blog',
+    canMatch: [debugGuard],
     loadComponent: () => import('./pages/blog/blog.component').then((module) => module.BlogComponent),
   },
   {
@@ -22,6 +27,7 @@ export const routes: Routes = [
   },
   {
     path: 'blog/:id',
+    canMatch: [debugGuard],
     loadComponent: () =>
       import('./pages/blog/blog-detail/blog-detail.component').then(
         (module) => module.BlogDetailComponent,

src/app/components/header/header.component.html

@@ -94,15 +94,17 @@
                 >{{ 'nav.about' | transloco }}</a
               >
             </li>
-            <li class="block">
-              <a
-                routerLink="/blog"
-                routerLinkActive="text-(--color-primary)"
-                (click)="closeDropdown($event)"
-                class="block rounded-[calc(var(--radius)-2px)] px-3 py-2 text-inherit no-underline hover:bg-(--surface)"
-                >{{ 'nav.blog' | transloco }}</a
-              >
-            </li>
+            @if (debugService.isEnabled) {
+              <li class="block">
+                <a
+                  routerLink="/blog"
+                  routerLinkActive="text-(--color-primary)"
+                  (click)="closeDropdown($event)"
+                  class="block rounded-[calc(var(--radius)-2px)] px-3 py-2 text-inherit no-underline hover:bg-(--surface)"
+                  >{{ 'nav.blog' | transloco }}</a
+                >
+              </li>
+            }
             <li class="block">
               <a
                 routerLink="/events"
@@ -211,14 +213,16 @@
                 >{{ 'nav.about' | transloco }}</a
               >
             </li>
-            <li class="block">
-              <a
-                routerLink="/blog"
-                (click)="closeDropdown($event)"
-                class="block rounded-[calc(var(--radius)-2px)] px-3 py-2 text-inherit no-underline hover:bg-(--surface)"
-                >{{ 'nav.blog' | transloco }}</a
-              >
-            </li>
+            @if (debugService.isEnabled) {
+              <li class="block">
+                <a
+                  routerLink="/blog"
+                  (click)="closeDropdown($event)"
+                  class="block rounded-[calc(var(--radius)-2px)] px-3 py-2 text-inherit no-underline hover:bg-(--surface)"
+                  >{{ 'nav.blog' | transloco }}</a
+                >
+              </li>
+            }
             <li class="block">
               <a
                 routerLink="/events"

src/app/components/header/header.component.ts

@@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, Component, inject, signal } from '@angular/cor
 import { NgOptimizedImage } from '@angular/common';
 import { Router, RouterLink, RouterLinkActive } from '@angular/router';
 import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+import { DebugService } from '../../services/debug.service';
 
 @Component({
   selector: 'app-header',
@@ -12,6 +13,7 @@ import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
 export class HeaderComponent {
   private readonly translocoService = inject(TranslocoService);
   private readonly router = inject(Router);
+  protected readonly debugService = inject(DebugService);
   protected readonly activeLang = signal(this.translocoService.getActiveLang());
 
   protected toggleLanguage(): void {

src/app/services/debug.service.ts

@@ -0,0 +1,10 @@
+import { inject, Injectable } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+@Injectable({ providedIn: 'root' })
+export class DebugService {
+  private readonly document = inject(DOCUMENT);
+
+  readonly isEnabled: boolean =
+    new URLSearchParams(this.document.defaultView?.location.search ?? '').get('debug') === 'true';
+}