create-ngmd 0.0.1

package/template/src/app/app.ts

@@ -0,0 +1,260 @@
+import { Component, computed, inject, OnInit, signal } from '@angular/core';
+import { NavigationEnd, Router, RouterLink, RouterOutlet } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { filter, map, startWith } from 'rxjs';
+import {
+  LucideAngularModule,
+  Github,
+  Menu,
+  X,
+  Search,
+  Sun,
+  Moon,
+  SunMoon,
+} from 'lucide-angular';
+import { ThemeService } from './theme';
+import { LayoutMode } from './layout-mode.service';
+import { CommandPalette } from './components/command-palette';
+import { Sidebar } from './components/sidebar';
+import { Breadcrumb } from './components/breadcrumb';
+import { Toc } from './components/toc';
+import { CodeCopy } from './components/code-copy';
+import { ExternalLinks } from './components/external-links';
+import { HeadingAnchors } from './components/heading-anchors';
+import { CodeGroup } from './components/code-group';
+import { PageFooter } from './components/page-footer';
+import { MediaEnhancer } from './components/media-enhancer';
+
+@Component({
+  selector: 'app-root',
+  imports: [
+    RouterLink,
+    RouterOutlet,
+    LucideAngularModule,
+    CommandPalette,
+    Sidebar,
+    Breadcrumb,
+    Toc,
+    CodeCopy,
+    ExternalLinks,
+    HeadingAnchors,
+    CodeGroup,
+    MediaEnhancer,
+    PageFooter,
+  ],
+  template: `
+    <div class="min-h-screen flex flex-col">
+      <header
+        class="sticky top-0 z-30 flex items-center gap-4 border-b border-zinc-200/60 dark:border-zinc-800/60 backdrop-blur-sm px-4 py-3"
+      >
+        @if (showSidebar()) {
+          <button
+            type="button"
+            (click)="drawerOpen.set(!drawerOpen())"
+            class="lg:hidden rounded p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-900"
+            [attr.aria-label]="drawerOpen() ? 'Close menu' : 'Open menu'"
+          >
+            <i-lucide [img]="drawerOpen() ? closeIcon : menuIcon" class="size-5"></i-lucide>
+          </button>
+        }
+
+        <a routerLink="/" class="flex items-center gap-2 text-lg font-bold tracking-tight font-[Geist_Mono,ui-monospace,monospace]">
+          <img
+            src="/logo-mark.svg"
+            alt=""
+            class="size-[34px] text-zinc-900 dark:text-zinc-50"
+            aria-hidden="true"
+          />
+          NgMd
+        </a>
+
+        <nav class="hidden sm:flex items-center gap-1 text-sm">
+          <a
+            routerLink="/welcome"
+            class="rounded px-3 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-900"
+          >
+            Docs
+          </a>
+          <a
+            routerLink="/support"
+            class="rounded px-3 py-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-900"
+          >
+            Support
+          </a>
+        </nav>
+
+        <div class="ml-auto flex items-center gap-2">
+          <button
+            type="button"
+            (click)="palette.toggle()"
+            class="hidden lg:inline-flex items-center gap-2 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 px-3 py-1.5 text-sm text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 min-w-56"
+          >
+            <i-lucide [img]="searchIcon" class="size-4"></i-lucide>
+            <span class="flex-1 text-left">Search documentation...</span>
+            <span class="flex items-center gap-0.5">
+              <kbd
+                class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-950 px-1 text-xs font-medium"
+              >
+                ⌘
+              </kbd>
+              <kbd
+                class="inline-flex h-5 min-w-5 items-center justify-center rounded border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-950 px-1 text-xs font-medium"
+              >
+                K
+              </kbd>
+            </span>
+          </button>
+          <button
+            type="button"
+            (click)="palette.toggle()"
+            class="lg:hidden rounded p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-900"
+            aria-label="Search"
+          >
+            <i-lucide [img]="searchIcon" class="size-5"></i-lucide>
+          </button>
+          <span class="h-4 w-px bg-zinc-300/60 dark:bg-zinc-700/60"></span>
+          <a
+            href="https://github.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="rounded p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-900"
+            aria-label="GitHub"
+          >
+            <i-lucide [img]="githubIcon" class="size-5"></i-lucide>
+          </a>
+          <span class="h-4 w-px bg-zinc-300/60 dark:bg-zinc-700/60"></span>
+          <button
+            type="button"
+            (click)="theme.cycle()"
+            class="rounded p-1.5 hover:bg-zinc-100 dark:hover:bg-zinc-900"
+            [attr.aria-label]="'Theme: ' + theme.mode()"
+            [title]="'Theme: ' + theme.mode()"
+          >
+            <i-lucide
+              [img]="
+                theme.mode() === 'light'
+                  ? sunIcon
+                  : theme.mode() === 'dark'
+                  ? moonIcon
+                  : autoIcon
+              "
+              class="size-5"
+            ></i-lucide>
+          </button>
+        </div>
+      </header>
+
+      <div class="flex flex-1">
+        @if (showSidebar()) {
+          <aside
+            class="hidden lg:flex w-64 shrink-0 flex-col border-r border-zinc-200 dark:border-zinc-800 p-4 overflow-y-auto sticky top-[57px] self-start h-[calc(100vh-57px)]"
+          >
+            <app-sidebar />
+          </aside>
+
+          @if (drawerOpen()) {
+            <div
+              class="lg:hidden fixed inset-0 z-40 bg-black/50"
+              (click)="drawerOpen.set(false)"
+            ></div>
+            <aside
+              class="lg:hidden fixed left-0 top-[57px] bottom-0 z-40 w-64 overflow-y-auto border-r border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4"
+            >
+              <app-sidebar />
+            </aside>
+          }
+        }
+
+        <main class="flex-1 min-w-0">
+          @if (showBreadcrumb()) {
+            <app-breadcrumb />
+          }
+          @if (showToc()) {
+            <details
+              class="xl:hidden mx-4 sm:mx-6 mt-4 rounded-lg border border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 group"
+            >
+              <summary
+                class="flex items-center justify-between cursor-pointer list-none px-4 py-2.5 text-sm font-semibold"
+              >
+                On this page
+                <span class="text-zinc-400 transition-transform group-open:rotate-180">▾</span>
+              </summary>
+              <div class="px-4 pb-4">
+                <app-toc [showActive]="false" />
+              </div>
+            </details>
+          }
+          <router-outlet />
+          @if (showFooter()) {
+            <div class="mx-auto max-w-3xl px-4 sm:px-8">
+              <app-page-footer />
+            </div>
+          }
+        </main>
+
+        @if (showToc()) {
+          <aside
+            class="hidden xl:block w-56 shrink-0 border-l border-zinc-200 dark:border-zinc-800 p-6 sticky top-[57px] self-start max-h-[calc(100vh-57px)] overflow-y-auto"
+          >
+            <p class="mb-3 text-sm font-semibold">On this page</p>
+            <app-toc />
+          </aside>
+        }
+      </div>
+    </div>
+
+    <app-command-palette #palette />
+    <app-code-copy />
+    <app-external-links />
+    <app-heading-anchors />
+    <app-code-group />
+    <app-media-enhancer />
+  `,
+})
+export class App implements OnInit {
+  readonly theme = inject(ThemeService);
+  private readonly router = inject(Router);
+  private readonly layout = inject(LayoutMode);
+
+  readonly menuIcon = Menu;
+  readonly closeIcon = X;
+  readonly searchIcon = Search;
+  readonly githubIcon = Github;
+  readonly sunIcon = Sun;
+  readonly moonIcon = Moon;
+  readonly autoIcon = SunMoon;
+
+  readonly drawerOpen = signal(false);
+
+  private readonly url = toSignal(
+    this.router.events.pipe(
+      filter((e) => e instanceof NavigationEnd),
+      map(() => this.router.url),
+      startWith(this.router.url),
+    ),
+    { initialValue: '/' },
+  );
+
+  private readonly cleanUrl = computed(() => this.url().split('?')[0].split('#')[0]);
+  private readonly isDocsRoute = computed(
+    () =>
+      this.cleanUrl() !== '/' &&
+      this.cleanUrl() !== '' &&
+      !this.layout.chromeHidden(),
+  );
+  readonly showSidebar = this.isDocsRoute;
+  readonly showBreadcrumb = this.isDocsRoute;
+  readonly showToc = this.isDocsRoute;
+  readonly showFooter = this.isDocsRoute;
+
+  ngOnInit(): void {
+    this.theme.initFromStorage();
+    this.router.events.pipe(filter((e) => e instanceof NavigationEnd)).subscribe(() => {
+      this.drawerOpen.set(false);
+      if (typeof window === 'undefined' || window.location.hash) return;
+      setTimeout(() => {
+        window.scrollTo({ top: 0, behavior: 'smooth' });
+      }, 0);
+    });
+  }
+}

package/template/src/app/components/breadcrumb.ts

@@ -0,0 +1,76 @@
+import { Component, computed, inject } from '@angular/core';
+import { Router, NavigationEnd, RouterLink } from '@angular/router';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { filter, map, startWith } from 'rxjs';
+import { LucideAngularModule, ChevronRight, House } from 'lucide-angular';
+
+interface Crumb {
+  label: string;
+  href: string;
+}
+
+const LABELS: Record<string, string> = {
+  '': 'Home',
+  welcome: 'Introduction',
+  'getting-started': 'Getting Started',
+  installation: 'Installation',
+  'quick-start': 'Quick Start',
+  introduction: 'Introduction',
+  about: 'About & Credits',
+  concepts: 'Core Concepts',
+  'markdown-routes': 'Markdown Routes',
+  theming: 'Theming',
+  components: 'Components',
+  support: 'Support',
+};
+
+@Component({
+  selector: 'app-breadcrumb',
+  imports: [RouterLink, LucideAngularModule],
+  template: `
+    @if (crumbs().length > 0) {
+      <nav
+        class="flex items-center gap-1.5 px-6 py-3 text-sm border-b border-zinc-200 dark:border-zinc-800"
+      >
+        <a routerLink="/" class="text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-50">
+          <i-lucide [img]="home" class="size-4"></i-lucide>
+        </a>
+        @for (crumb of crumbs(); track crumb.href; let last = $last) {
+          <i-lucide [img]="chevron" class="size-3.5 text-zinc-400"></i-lucide>
+          @if (last) {
+            <span class="font-medium">{{ crumb.label }}</span>
+          } @else {
+            <span class="text-zinc-500">{{ crumb.label }}</span>
+          }
+        }
+      </nav>
+    }
+  `,
+})
+export class Breadcrumb {
+  private readonly router = inject(Router);
+  readonly home = House;
+  readonly chevron = ChevronRight;
+
+  private readonly url = toSignal(
+    this.router.events.pipe(
+      filter((e) => e instanceof NavigationEnd),
+      map(() => this.router.url),
+      startWith(this.router.url),
+    ),
+    { initialValue: '/' },
+  );
+
+  readonly crumbs = computed<Crumb[]>(() => {
+    const url = this.url().split('?')[0].split('#')[0];
+    const segments = url.split('/').filter((s) => s.length > 0);
+    return segments.map((segment, i) => ({
+      label: LABELS[segment] ?? this.humanize(segment),
+      href: '/' + segments.slice(0, i + 1).join('/'),
+    }));
+  });
+
+  private humanize(segment: string): string {
+    return segment.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
+  }
+}

package/template/src/app/components/code-copy.ts

@@ -0,0 +1,90 @@
+import {
+  AfterViewInit,
+  Component,
+  DestroyRef,
+  inject,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+
+/**
+ * Scans rendered markdown for <pre> code blocks and injects a copy button
+ * into each one. Runs on initial mount and after every route change.
+ */
+@Component({
+  selector: 'app-code-copy',
+  template: '',
+  styles: `
+    :host { display: none; }
+  `,
+})
+export class CodeCopy implements AfterViewInit {
+  private readonly router = inject(Router);
+  private readonly destroyRef = inject(DestroyRef);
+
+  ngAfterViewInit(): void {
+    this.enhanceWithRetry();
+    this.router.events
+      .pipe(
+        filter((e) => e instanceof NavigationEnd),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe(() => this.enhanceWithRetry());
+  }
+
+  private enhanceWithRetry(attempt = 0): void {
+    if (typeof document === 'undefined' || attempt > 20) return;
+    const pres = document.querySelectorAll('main pre:not([data-copy-enhanced])');
+    if (pres.length === 0) {
+      setTimeout(() => this.enhanceWithRetry(attempt + 1), 50);
+      return;
+    }
+    pres.forEach((pre) => this.enhance(pre as HTMLElement));
+  }
+
+  private enhance(pre: HTMLElement): void {
+    pre.setAttribute('data-copy-enhanced', 'true');
+    pre.style.position = 'relative';
+
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.setAttribute('aria-label', 'Copy code');
+    button.className =
+      'absolute top-2 right-2 inline-flex items-center justify-center size-7 rounded-md bg-zinc-800/80 text-zinc-300 hover:bg-zinc-700 hover:text-white opacity-0 transition-opacity focus:opacity-100';
+    button.innerHTML = `
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
+        <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
+      </svg>
+    `;
+
+    pre.addEventListener('mouseenter', () => (button.style.opacity = '1'));
+    pre.addEventListener('mouseleave', () => (button.style.opacity = '0'));
+
+    button.addEventListener('click', async (e) => {
+      e.stopPropagation();
+      const code = pre.querySelector('code')?.textContent ?? pre.textContent ?? '';
+      try {
+        await navigator.clipboard.writeText(code);
+        button.innerHTML = `
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12"/>
+          </svg>
+        `;
+        setTimeout(() => {
+          button.innerHTML = `
+            <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <rect width="14" height="14" x="8" y="8" rx="2" ry="2"/>
+              <path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
+            </svg>
+          `;
+        }, 1500);
+      } catch {
+        // clipboard API not available, fall back silently
+      }
+    });
+
+    pre.appendChild(button);
+  }
+}

package/template/src/app/components/code-group.ts

@@ -0,0 +1,70 @@
+import { AfterViewInit, Component, DestroyRef, inject } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+
+/**
+ * Wires tab-switching for `<div class="ngmd-code-group">` blocks emitted by
+ * the `ngmd-code-group` marked extension. Each tab's `data-target` points at
+ * a sibling panel's `data-id`; clicking flips `data-active` on the pair.
+ *
+ * Same pattern as CodeCopy / ExternalLinks / HeadingAnchors: scan `<main>`
+ * after each route change, idempotent via `data-enhanced` marker.
+ */
+@Component({
+  selector: 'app-code-group',
+  template: '',
+  styles: `:host { display: none; }`,
+})
+export class CodeGroup implements AfterViewInit {
+  private readonly router = inject(Router);
+  private readonly destroyRef = inject(DestroyRef);
+
+  ngAfterViewInit(): void {
+    this.enhanceWithRetry();
+    this.router.events
+      .pipe(
+        filter((e) => e instanceof NavigationEnd),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe(() => this.enhanceWithRetry());
+  }
+
+  private enhanceWithRetry(attempt = 0): void {
+    if (typeof document === 'undefined' || attempt > 20) return;
+    const groups = document.querySelectorAll<HTMLElement>(
+      'main .ngmd-code-group:not([data-enhanced])',
+    );
+    if (groups.length === 0) {
+      setTimeout(() => this.enhanceWithRetry(attempt + 1), 50);
+      return;
+    }
+    groups.forEach((group) => this.enhance(group));
+  }
+
+  private enhance(group: HTMLElement): void {
+    group.setAttribute('data-enhanced', 'true');
+    const tabs = group.querySelectorAll<HTMLButtonElement>(
+      '.ngmd-code-group__tab',
+    );
+    const panels = group.querySelectorAll<HTMLElement>(
+      '.ngmd-code-group__panel',
+    );
+
+    tabs.forEach((tab) => {
+      tab.addEventListener('click', () => {
+        const target = tab.getAttribute('data-target');
+        if (!target) return;
+        tabs.forEach((t) =>
+          t.setAttribute('data-active', t === tab ? 'true' : 'false'),
+        );
+        panels.forEach((p) =>
+          p.setAttribute(
+            'data-active',
+            p.getAttribute('data-id') === target ? 'true' : 'false',
+          ),
+        );
+      });
+    });
+  }
+}