feat: implement pipe preview

Author: mofirojean

apps/docs/project.json

@@ -19,7 +19,9 @@
             "input": "apps/docs/public"
           }
         ],
-        "styles": ["apps/docs/src/styles.css"]
+        "styles": ["apps/docs/src/styles.css"],
+        "allowedCommonJsDependencies": ["prismjs"]
+
       },
       "configurations": {
         "production": {

apps/docs/src/app/app.routes.ts

@@ -1,9 +1,9 @@
 import { Route } from '@angular/router';
 import { Landing } from './pages/landing';
 import { Introduction } from './pages/introduction';
-import { PipesPageComponent } from './pages/pipes';
-import { Count } from './pages/count';
-import { PipesList } from './pages/pipes-list';
+import { PipesPageComponent } from './pages/pipes/pipes';
+import { Count } from './pages/pipes/count';
+import { PipesList } from './pages/pipes/pipes-list';
 
 export const appRoutes: Route[] = [
   {

apps/docs/src/app/pages/count.ts

@@ -1,8 +1,10 @@
 import {Component} from '@angular/core';
+import {Footer} from '../reusables/footer';
 
 @Component({
   selector: 'app-introduction-page',
   standalone: true,
+  imports: [Footer],
   template: `
     <div class="container mx-auto py-10 px-4 md:px-8 max-w-4xl">
       <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-6">Introduction</h1>
@@ -29,6 +31,7 @@ import {Component} from '@angular/core';
       <div class="relative rounded-md bg-muted p-4 font-mono text-sm mt-4">
         npm install &#64;ngx-transforms/core
       </div>
+      <app-footer />
     </div>
   `
 })

apps/docs/src/app/pages/introduction.ts

@@ -0,0 +1,101 @@
+import {Component, signal} from '@angular/core';
+import {CountPipe} from '@ngx-transforms';
+import {NgIconComponent, provideIcons} from '@ng-icons/core';
+import {lucideChevronRight} from '@ng-icons/lucide';
+import {CodePreview} from "../../reusables/code-preview/code-preview";
+import {CommandPreview} from "../../reusables/command-preview/command-preview";
+import {NextPrevNavigationComponent} from "../../reusables/next-prev-navigation/next-prev-navigation";
+
+@Component({
+  selector: 'app-count-pipe-page',
+  standalone: true,
+  imports: [CountPipe, NgIconComponent, CodePreview, CommandPreview, NextPrevNavigationComponent],
+  providers: [provideIcons({lucideChevronRight})],
+  template: `
+    <div class="container mx-auto py-10 px-4 md:px-8 max-w-4xl">
+      <!-- Breadcrumb -->
+      <nav class="flex items-center text-sm text-muted-foreground mb-6">
+        <a href="/docs/pipes" class="hover:text-foreground transition-colors">Pipes</a>
+        <ng-icon name="lucideChevronRight" class="h-4 w-4 mx-2"></ng-icon>
+        <span class="text-foreground font-medium">Count</span>
+      </nav>
+
+      <h1 class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl mb-2">Count Pipe</h1>
+      <p class="text-lg text-muted-foreground mb-8">Returns the length of an array or string.</p>
+
+      <h2 class="text-2xl font-bold my-8">Installation</h2>
+      <app-command-preview command="npm install @ngx-transforms/core"></app-command-preview>
+
+      <h2 class="text-2xl font-bold my-8">Usage</h2>
+
+      <app-code-preview [code]="code" [language]="'typescript'">
+        <div class="space-y-8">
+          <div>
+            <h3 class="text-xl font-semibold mb-4">Array Length</h3>
+            <div class="rounded-md bg-muted p-6 border border-border">
+              <div class="mb-4">
+                <code class="text-sm font-mono bg-background/50 px-2 py-1 rounded">items = [1, 2, 3, 4, 5]</code>
+              </div>
+              <div class="flex items-center gap-4">
+                <div class="text-sm font-mono text-muted-foreground">{{ '{' }}{{ '{' }} items |
+                  count {{ '}' }}{{ '}' }}
+                </div>
+                <div class="h-px flex-1 bg-border"></div>
+                <div class="font-bold text-primary">{{ items | count }}</div>
+              </div>
+            </div>
+          </div>
+
+          <div>
+            <h3 class="text-xl font-semibold mb-4">String Length</h3>
+            <div class="rounded-md bg-muted p-6 border border-border">
+              <div class="mb-4">
+                <code class="text-sm font-mono bg-background/50 px-2 py-1 rounded">text = 'Hello World'</code>
+              </div>
+              <div class="flex items-center gap-4">
+                <div class="text-sm font-mono text-muted-foreground">{{ '{' }}{{ '{' }} text |
+                  count {{ '}' }}{{ '}' }}
+                </div>
+                <div class="h-px flex-1 bg-border"></div>
+                <div class="font-bold text-primary">{{ text | count }}</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </app-code-preview>
+
+      <div class="mt-16 pt-8 border-t border-border flex justify-between items-center text-sm text-muted-foreground">
+        <div>
+          Built by <a href="https://github.com/mofirojean" target="_blank"
+                      class="font-medium underline underline-offset-4 hover:text-foreground">Mofiro Jean</a>
+        </div>
+        <div class="flex gap-4">
+          <app-next-prev-navigation [previous]="{label: 'Pipes', link: '/docs/pipes'}" [next]="{label: 'Debounce', link: '/docs/pipes/debounce'}" />
+        </div>
+      </div>
+    </div>
+  `,
+})
+export class Count {
+  items = [1, 2, 3, 4, 5];
+  text = 'Hello World';
+
+  code = `
+import { Component } from '@angular/core';
+import { CountPipe } from '@ngx-transforms/core';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [CountPipe],
+  template: \`
+    <p>Array Count: {{ items | count }}</p>
+    <p>String Count: {{ text | count }}</p>
+  \`
+})
+export class ExampleComponent {
+  items = [1, 2, 3, 4, 5];
+  text = 'Hello World';
+}
+  `;
+}

apps/docs/src/app/pages/pipes/count.ts

@@ -40,19 +40,19 @@ import {lucideMenu, lucideX} from '@ng-icons/lucide';
               routerLink="/docs/introduction"
               routerLinkActive="font-medium text-primary bg-primary/10"
               (click)="isSidebarOpen.set(false)"
-              class="group flex w-full items-center rounded-md border border-transparent px-2 py-1.5 hover:underline text-muted-foreground hover:text-foreground transition-colors"
+              class="group flex w-full items-center rounded-md border border-transparent px-2 py-1.5 hover:bg-primary/10 text-muted-foreground hover:text-foreground transition-colors"
             >
               Introduction
             </a>
           </div>
 
-          <h4 class="mb-4 text-sm font-semibold leading-none tracking-tight">Pipes</h4>
+          <h4 routerLink="/docs/pipes" class="mb-4 text-sm font-semibold cursor-pointer leading-none tracking-tight">Pipes</h4>
           <div class="grid grid-flow-row auto-rows-max text-sm">
             <a
               routerLink="/docs/pipes/count"
               routerLinkActive="font-medium text-primary bg-primary/10"
               (click)="isSidebarOpen.set(false)"
-              class="group flex w-full items-center rounded-md border border-transparent px-2 py-1.5 hover:underline text-muted-foreground hover:text-foreground transition-colors"
+              class="group flex w-full items-center rounded-md border border-transparent px-2 py-1.5 hover:bg-primary/10 text-muted-foreground hover:text-foreground transition-colors"
             >
               Count
             </a>

apps/docs/src/app/pages/pipes-list.ts …s/docs/src/app/pages/pipes/pipes-list.tsapps/docs/src/app/pages/pipes-list.ts renamed to apps/docs/src/app/pages/pipes/pipes-list.ts apps/docs/src/app/pages/pipes-list.ts renamed to apps/docs/src/app/pages/pipes/pipes-list.ts

@@ -8,7 +8,7 @@ import { Component } from '@angular/core';
     <footer class="border-t border-border/40 bg-background py-6 md:py-0">
       <div class="container mx-auto flex flex-col items-center justify-center gap-4 md:h-24 md:flex-row px-4 md:px-8">
         <p class="text-center text-sm leading-loose text-muted-foreground">
-          Built by <a href="#" class="font-medium underline underline-offset-4">Mofiro Jean</a>.
+          Built by <a href="https://github.com/mofirojean" class="font-medium underline underline-offset-4">Mofiro Jean</a>.
           The source code is available on <a href="https://github.com/mofirojean/ngx-transforms" class="font-medium underline underline-offset-4">GitHub</a>.
         </p>
       </div>

apps/docs/src/app/pages/pipes.ts apps/docs/src/app/pages/pipes/pipes.tsapps/docs/src/app/pages/pipes.ts renamed to apps/docs/src/app/pages/pipes/pipes.ts

@@ -38,11 +38,20 @@
   --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
   --sidebar-border: oklch(0.923 0.003 48.717);
   --sidebar-ring: oklch(0.709 0.01 56.259);
+
+  --token-comment: #999;
+  --token-punctuation: #ccc;
+  --token-tag: #e2777a;
+  --token-function-name: #6196cc;
+  --token-boolean: #f08d49;
+  --token-property: #f8c555;
+  --token-keyword: #cc99cd;
+  --token-string: #7ec699;
+  --token-operator: #67cdcc;
 }
 
 :root.dark {
   color-scheme: dark;
-
   --background: oklch(0.147 0.004 49.25);
   --foreground: oklch(0.985 0.001 106.423);
   --card: oklch(0.216 0.006 56.043);
@@ -75,6 +84,16 @@
   --sidebar-accent-foreground: oklch(0.985 0.001 106.423);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.553 0.013 58.071);
+
+  --token-comment: #6a737d;
+  --token-punctuation: #d1d5da;
+  --token-tag: #ff7b72;
+  --token-function-name: #79b8ff;
+  --token-boolean: #ffab70;
+  --token-property: #ffea7f;
+  --token-keyword: #f97583;
+  --token-string: #9e FFB3;
+  --token-operator: #79b8ff;
 }
 
 @theme {

apps/docs/src/app/reusables/footer.ts

@@ -38,9 +38,11 @@
     "@ng-icons/lucide": ">=32.0.0 <34.0.0",
     "@spartan-ng/brain": "^0.0.1-alpha.586",
     "@spartan-ng/cli": "^0.0.1-alpha.586",
+    "@types/prismjs": "^1.26.5",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "express": "^5.1.0",
+    "prismjs": "^1.30.0",
     "rxjs": "~7.8.0",
     "tailwind-merge": "^3.3.1",
     "tslib": "^2.3.0"