feat: enhance documentation and feature flags

- Added a new task to serve documentation on port 1234 for easier access during development.
- Updated project.json to include assets from the documentation source directory.
- Changed image paths in FeaturesSectionComponent to point to the new demo assets.
- Updated links in the hero section to direct users to the changelog instead of release notes.
- Introduced new feature flags in the FeatureFlagsService for task management capabilities.
- Adjusted the size of the feature flags tool component for improved UI consistency.

.vscode/tasks.json

@@ -132,6 +132,20 @@
       },
       "isBackground": true
     },
+    {
+      "label": "▶️ [Docs] Serve",
+      "type": "shell",
+      "command": "nx",
+      "args": ["serve", "documentation", "--port=1234"],
+      "problemMatcher": ["$tsc-watch"],
+      "presentation": {
+        "reveal": "always",
+        "panel": "dedicated",
+        "group": "demo-tasks",
+        "close": false
+      },
+      "isBackground": true
+    },
     {
       "label": "🔄 Affected Tasks",
       "type": "shell",

apps/documentation/project.json

@@ -20,6 +20,11 @@
           {
             "glob": "**/*",
             "input": "apps/documentation/public"
+          },
+          {
+            "glob": "**/*",
+            "input": "apps/documentation/src/assets",
+            "output": "assets"
           }
         ],
         "styles": ["apps/documentation/src/styles.scss"],

apps/documentation/src/app/pages/landing/features-section/features-section.component.ts

@@ -21,13 +21,13 @@ interface Feature {
 export class FeaturesSectionComponent implements OnInit {
   expandedFeature = signal('featureFlags');
   currentImage = signal<DemoImage>({
-    src: 'assets/demo.gif',
+    src: 'assets/demos/feature-flags-demo.gif',
     alt: 'Dev Toolbar Demo',
   });
 
   readonly demoImages: Record<string, DemoImage> = {
     featureFlags: {
-      src: 'assets/feature-flags-demo.gif',
+      src: 'assets/demos/feature-flags-demo.gif',
       alt: 'Feature Flags Demo',
     },
     languageSwitcher: {

apps/documentation/src/app/pages/landing/hero/hero-section.component.html

@@ -73,19 +73,17 @@
             class="inline-flex items-center text-sm/6 font-medium text-gray-300"
           >
             <a
-              href="https://github.com/alfredoperez/ngx-dev-toolbar/releases"
+              href="https://github.com/alfredoperez/ngx-dev-toolbar/blob/main/CHANGELOG.md"
               target="_blank"
               class="hover:text-indigo-400"
             >
-              Release Notes <span aria-hidden="true">→</span>
+              Changelog <span aria-hidden="true">→</span>
             </a>
           </span>
         </div>
       </div>
       <div class="mt-8">
-        <p class="text-lg font-medium text-indigo-400">
-          Angular Development Tools
-        </p>
+        <p class="text-lg font-medium text-indigo-400">Angular Dev Toolbar</p>
         <h1
           class="mt-3 text-pretty text-5xl font-semibold tracking-tight text-white sm:text-7xl"
         >
@@ -94,10 +92,9 @@
         <p
           class="mt-6 text-pretty text-lg font-medium text-gray-400 sm:text-xl/8"
         >
-          Build, test, and customize your Angular apps faster with instant
-          feature toggles, real-time language switching, and powerful
-          development tools - all without leaving your browser or touching
-          production code.
+          Build Angular apps faster with instant feature toggles, real-time
+          language switching, and powerful development tools - all without
+          leaving your current page or touching production code.
         </p>
       </div>
       <div class="mt-10 flex items-center gap-x-6">
@@ -109,12 +106,12 @@
         >
           View on GitHub <span aria-hidden="true">→</span>
         </a>
-        <a
+        <!-- <a
           href="#"
           class="text-sm/6 font-semibold text-indigo-400 hover:text-indigo-300"
         >
           Try Live Demo <span aria-hidden="true">→</span>
-        </a>
+        </a> -->
       </div>
     </div>
     <div

apps/ngx-dev-toolbar-demo/src/app/services/feature-flags.service.ts

@@ -25,6 +25,31 @@ export class FeatureFlagsService {
       enabled: true,
       description: 'Enables experimental features across the application',
     },
+    {
+      name: 'taskBoardView',
+      enabled: false,
+      description: 'Enables Kanban board view for tasks',
+    },
+    {
+      name: 'taskCategories',
+      enabled: false,
+      description: 'Enables categorization and filtering of tasks',
+    },
+    {
+      name: 'taskReminders',
+      enabled: false,
+      description: 'Enables notification reminders for task deadlines',
+    },
+    {
+      name: 'taskCollaboration',
+      enabled: false,
+      description: 'Enables task sharing and collaboration features',
+    },
+    {
+      name: 'taskAnalytics',
+      enabled: false,
+      description: 'Enables task completion analytics and reporting',
+    },
   ];
 
   private flagsSubject = new BehaviorSubject<FeatureFlag[]>(this.featureFlags);

libs/ngx-dev-toolbar/src/tools/feature-flags-tool/feature-flags-tool.component.ts

@@ -210,7 +210,7 @@ export class DevToolbarFeatureFlagsToolComponent {
     title: 'Feature Flags',
     description: 'Manage the feature flags for your current session',
     isClosable: true,
-    size: 'tall' as WindowSize,
+    size: 'medium' as WindowSize,
     id: 'ndt-feature-flags',
     isBeta: true,
   };