create-ngmd 0.0.1

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

@@ -0,0 +1,65 @@
+import { Component, signal } from '@angular/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+import { LucideAngularModule, ChevronDown } from 'lucide-angular';
+import config from '../../ngmd.config';
+
+@Component({
+  selector: 'app-sidebar',
+  imports: [RouterLink, RouterLinkActive, LucideAngularModule],
+  template: `
+    <nav class="flex flex-col gap-4 text-sm">
+      @for (section of sections; track section.label) {
+        <div>
+          <button
+            type="button"
+            (click)="toggle(section.label)"
+            class="flex w-full items-center justify-between rounded px-3 py-1.5 text-sm font-bold text-zinc-900 dark:text-zinc-100 hover:text-zinc-700 dark:hover:text-zinc-300"
+            [attr.aria-expanded]="isOpen(section.label)"
+          >
+            {{ section.label }}
+            <i-lucide
+              [img]="chevron"
+              class="size-4 transition-transform"
+              [class.-rotate-90]="!isOpen(section.label)"
+            ></i-lucide>
+          </button>
+          @if (isOpen(section.label)) {
+            <ul class="mt-1 flex flex-col gap-1">
+              @for (item of section.items; track item.href) {
+                <li>
+                  <a
+                    [routerLink]="item.href"
+                    routerLinkActive="bg-fuchsia-500/10! text-fuchsia-700! dark:text-fuchsia-300! font-medium"
+                    class="block rounded-md px-3 py-1.5 text-zinc-700 dark:text-zinc-300 hover:bg-fuchsia-500/10 hover:text-fuchsia-700 dark:hover:text-fuchsia-300 focus:outline-none focus-visible:outline-none"
+                  >
+                    {{ item.label }}
+                  </a>
+                </li>
+              }
+            </ul>
+          }
+        </div>
+      }
+    </nav>
+  `,
+})
+export class Sidebar {
+  readonly sections = config.nav;
+  readonly chevron = ChevronDown;
+  private readonly openSections = signal<Set<string>>(
+    new Set(config.nav.map((s) => s.label)),
+  );
+
+  isOpen(label: string): boolean {
+    return this.openSections().has(label);
+  }
+
+  toggle(label: string): void {
+    this.openSections.update((set) => {
+      const next = new Set(set);
+      if (next.has(label)) next.delete(label);
+      else next.add(label);
+      return next;
+    });
+  }
+}

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

@@ -0,0 +1,131 @@
+import {
+  AfterViewInit,
+  Component,
+  DestroyRef,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { NavigationEnd, Router } from '@angular/router';
+import { filter } from 'rxjs';
+
+interface Heading {
+  id: string;
+  text: string;
+  level: number;
+}
+
+@Component({
+  selector: 'app-toc',
+  template: `
+    @if (headings().length > 0) {
+      <nav class="text-sm">
+        <ul class="flex flex-col gap-2">
+          @for (h of headings(); track h.id) {
+            <li [style.padding-left.rem]="(h.level - 2) * 0.75">
+              <a
+                [href]="'#' + h.id"
+                (click)="scrollToHeading(h.id, $event)"
+                class="block rounded px-2 -mx-2 py-0.5 text-zinc-500 hover:bg-fuchsia-100 dark:hover:bg-fuchsia-500/10 hover:text-fuchsia-700 dark:hover:text-fuchsia-300 focus:outline-none focus-visible:outline-none"
+                [class]="isActive(h.id) ? 'bg-fuchsia-100 dark:bg-fuchsia-500/10 text-fuchsia-700 dark:text-fuchsia-300 font-medium' : ''"
+              >
+                {{ h.text }}
+              </a>
+            </li>
+          }
+        </ul>
+      </nav>
+    }
+  `,
+})
+export class Toc implements AfterViewInit {
+  private readonly router = inject(Router);
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly showActive = input<boolean>(true);
+  readonly headings = signal<Heading[]>([]);
+  readonly active = signal<string>('');
+  private observer?: IntersectionObserver;
+
+  isActive(id: string): boolean {
+    return this.showActive() && this.active() === id;
+  }
+
+  ngAfterViewInit(): void {
+    this.scanWithRetry();
+    this.router.events
+      .pipe(
+        filter((e) => e instanceof NavigationEnd),
+        takeUntilDestroyed(this.destroyRef),
+      )
+      .subscribe(() => {
+        this.headings.set([]);
+        this.scanWithRetry();
+      });
+  }
+
+  scrollToHeading(id: string, event: MouseEvent): void {
+    event.preventDefault();
+    const el = document.getElementById(id);
+    if (el) {
+      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      // index.html has <base href="/">, so a relative `#frag` resolves to
+      // `/#frag` and strips the path. Pass the full path explicitly.
+      history.replaceState(
+        null,
+        '',
+        `${location.pathname}${location.search}#${id}`,
+      );
+    }
+  }
+
+  private scanWithRetry(attempt = 0): void {
+    if (typeof document === 'undefined' || attempt > 20) return;
+    const content =
+      document.querySelector('main analog-markdown') ??
+      document.querySelector('main analog-markdown-route');
+    if (!content || content.querySelectorAll('h2, h3').length === 0) {
+      setTimeout(() => this.scanWithRetry(attempt + 1), 50);
+      return;
+    }
+    this.scan(content);
+  }
+
+  private scan(content: Element): void {
+    const nodes = Array.from(content.querySelectorAll('h2, h3'));
+    const result: Heading[] = nodes.map((node) => {
+      const text = node.textContent?.trim() ?? '';
+      // Always overwrite the id with a clean slug so palette deep-links match.
+      const id = text
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, '-')
+        .replace(/^-|-$/g, '');
+      node.id = id;
+      return {
+        id,
+        text,
+        level: parseInt(node.tagName.substring(1), 10),
+      };
+    });
+    this.headings.set(result);
+    this.setupObserver(nodes as HTMLElement[]);
+  }
+
+  private setupObserver(nodes: HTMLElement[]): void {
+    this.observer?.disconnect();
+    if (nodes.length === 0) return;
+    this.observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            this.active.set(entry.target.id);
+            break;
+          }
+        }
+      },
+      { rootMargin: '0px 0px -70% 0px', threshold: 0 },
+    );
+    nodes.forEach((node) => this.observer!.observe(node));
+  }
+}

package/template/src/app/layout-mode.service.ts

@@ -0,0 +1,10 @@
+import { Injectable, signal } from '@angular/core';
+
+/**
+ * Pages that want to render without the docs chrome (sidebar, breadcrumb, TOC)
+ * can flip this signal in their constructor. The app shell reads it.
+ */
+@Injectable({ providedIn: 'root' })
+export class LayoutMode {
+  readonly chromeHidden = signal(false);
+}

package/template/src/app/pages/[...not-found].page.ts

@@ -0,0 +1,47 @@
+import { Component, inject, OnDestroy, OnInit } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { LayoutMode } from '../layout-mode.service';
+
+@Component({
+  selector: 'app-not-found',
+  imports: [RouterLink],
+  template: `
+    <section class="mx-auto max-w-2xl px-6 py-24 text-center">
+      <p class="text-sm font-medium tracking-[0.2em] text-zinc-400 dark:text-zinc-500">
+        404
+      </p>
+      <h1 class="mt-3 text-4xl sm:text-5xl font-bold tracking-tight">
+        Page not found
+      </h1>
+      <p class="mt-4 text-lg text-zinc-600 dark:text-zinc-400">
+        The page you're looking for doesn't exist or has moved.
+      </p>
+
+      <div class="mt-10 flex flex-wrap items-center justify-center gap-3">
+        <a
+          routerLink="/"
+          class="rounded-md bg-zinc-900 dark:bg-zinc-50 px-5 py-2.5 text-sm font-medium text-zinc-50 dark:text-zinc-900 hover:bg-zinc-700 dark:hover:bg-zinc-200"
+        >
+          Go home
+        </a>
+        <a
+          routerLink="/welcome"
+          class="rounded-md border border-zinc-200 dark:border-zinc-800 px-5 py-2.5 text-sm font-medium hover:bg-zinc-100 dark:hover:bg-zinc-900"
+        >
+          Read the docs
+        </a>
+      </div>
+    </section>
+  `,
+})
+export default class NotFoundPage implements OnInit, OnDestroy {
+  private readonly layout = inject(LayoutMode);
+
+  ngOnInit(): void {
+    this.layout.chromeHidden.set(true);
+  }
+
+  ngOnDestroy(): void {
+    this.layout.chromeHidden.set(false);
+  }
+}

package/template/src/app/pages/index.page.ts

@@ -0,0 +1,28 @@
+import { Component, inject } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { LayoutMode } from '../layout-mode.service';
+
+@Component({
+  selector: 'app-home',
+  imports: [RouterLink],
+  template: `
+    <section class="mx-auto max-w-2xl px-6 py-24 text-center">
+      <h1 class="text-4xl font-bold tracking-tight">Your docs</h1>
+      <p class="mt-4 text-zinc-600 dark:text-zinc-400">
+        Scaffolded with <code>create-ngmd</code>. Edit
+        <code>src/content/welcome.md</code> to make this your own.
+      </p>
+      <a
+        routerLink="/welcome"
+        class="mt-8 inline-flex items-center rounded-md border border-zinc-200 dark:border-zinc-800 px-4 py-2 text-sm font-medium hover:bg-zinc-100 dark:hover:bg-zinc-900"
+      >
+        Read the docs →
+      </a>
+    </section>
+  `,
+})
+export default class HomePage {
+  constructor() {
+    inject(LayoutMode).chromeHidden.set(true);
+  }
+}

package/template/src/app/pages/welcome.page.ts

@@ -0,0 +1,18 @@
+import { AsyncPipe } from '@angular/common';
+import { Component } from '@angular/core';
+import { injectContent, MarkdownComponent } from '@analogjs/content';
+
+@Component({
+  selector: 'app-welcome',
+  imports: [AsyncPipe, MarkdownComponent],
+  template: `
+    @if (content$ | async; as doc) {
+      <article class="max-w-3xl mx-auto p-8">
+        <analog-markdown [content]="doc.content" />
+      </article>
+    }
+  `,
+})
+export default class WelcomePage {
+  readonly content$ = injectContent<{ title: string }>({ customFilename: 'welcome' });
+}

package/template/src/app/theme.ts

@@ -0,0 +1,54 @@
+import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { inject, Injectable, PLATFORM_ID, signal } from '@angular/core';
+
+type Mode = 'light' | 'dark' | 'auto';
+const STORAGE_KEY = 'ngmd-theme';
+
+@Injectable({ providedIn: 'root' })
+export class ThemeService {
+  private readonly document = inject(DOCUMENT);
+  private readonly isBrowser = isPlatformBrowser(inject(PLATFORM_ID));
+
+  readonly mode = signal<Mode>(this.read());
+
+  cycle() {
+    const next: Mode =
+      this.mode() === 'light' ? 'dark' : this.mode() === 'dark' ? 'auto' : 'light';
+    this.mode.set(next);
+    this.apply(next);
+  }
+
+  /** Legacy alias kept so existing callers compile. */
+  toggle() {
+    this.cycle();
+  }
+
+  initFromStorage() {
+    this.apply(this.mode());
+    if (this.isBrowser) {
+      matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+        if (this.mode() === 'auto') this.apply('auto');
+      });
+    }
+  }
+
+  private read(): Mode {
+    if (!this.isBrowser) return 'auto';
+    const stored = localStorage.getItem(STORAGE_KEY) as Mode | null;
+    if (stored === 'light' || stored === 'dark' || stored === 'auto') return stored;
+    return 'auto';
+  }
+
+  private apply(mode: Mode) {
+    if (!this.isBrowser) return;
+    const root = this.document.documentElement;
+    const resolved =
+      mode === 'auto'
+        ? matchMedia('(prefers-color-scheme: dark)').matches
+          ? 'dark'
+          : 'light'
+        : mode;
+    root.classList.toggle('dark', resolved === 'dark');
+    localStorage.setItem(STORAGE_KEY, mode);
+  }
+}

package/template/src/app/title-strategy.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { Title } from '@angular/platform-browser';
+import { TitleStrategy, type RouterStateSnapshot } from '@angular/router';
+import siteConfig, { navLabels } from '../ngmd.config';
+
+/**
+ * Custom title strategy. Every page renders as `NgMd | <Title>`, where
+ * `<Title>` resolves in this order:
+ *
+ *   1. The route's own `title` (set by Analog from markdown frontmatter or
+ *      by a `.page.ts` component via `routeMeta`).
+ *   2. The matching entry in `ngmd.config.ts > navLabels`.
+ *   3. A prettified last URL segment ("markdown-routes" → "Markdown Routes").
+ *   4. `siteConfig.site.tagline` for the homepage (no `|` separator there).
+ *
+ * Replaces Angular's `DefaultTitleStrategy`, which would otherwise overwrite
+ * our format with just the raw frontmatter title.
+ */
+@Injectable({ providedIn: 'root' })
+export class NgmdTitleStrategy extends TitleStrategy {
+  constructor(private readonly title: Title) {
+    super();
+  }
+
+  override updateTitle(snapshot: RouterStateSnapshot): void {
+    const name = siteConfig.site.name;
+    const url = snapshot.url.split('?')[0].split('#')[0];
+
+    // Homepage uses the tagline, no pipe separator.
+    if (url === '/' || url === '') {
+      const tagline = siteConfig.site.tagline;
+      this.title.setTitle(tagline ? `${name} | ${tagline}` : name);
+      return;
+    }
+
+    let pageTitle = this.buildTitle(snapshot);
+    if (!pageTitle) {
+      const last = url.split('/').filter(Boolean).pop() ?? '';
+      pageTitle =
+        navLabels[last] ??
+        last
+          .split('-')
+          .map((w) => (w ? w[0].toUpperCase() + w.slice(1) : w))
+          .join(' ');
+    }
+    this.title.setTitle(pageTitle ? `${name} | ${pageTitle}` : name);
+  }
+}

package/template/src/app/ui/alert.ts

@@ -0,0 +1,46 @@
+import { Component, input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+type AlertSeverity = 'info' | 'warning' | 'critical' | 'helpful' | 'important';
+
+const BOX = 'my-5 px-4 py-3 rounded-r-md border-l-[3px] bg-zinc-50 dark:bg-zinc-900 text-sm text-zinc-700 dark:text-zinc-300 [&>*:first-child]:mt-0 [&>*:last-child]:mb-0';
+
+@Component({
+  selector: 'ngmd-alert',
+  imports: [NgTemplateOutlet],
+  template: `
+    @switch (severity()) {
+      @case ('warning') {
+        <div [class]="box + ' border-l-amber-500'">
+          <ng-container *ngTemplateOutlet="body"></ng-container>
+        </div>
+      }
+      @case ('critical') {
+        <div [class]="box + ' border-l-red-500'">
+          <ng-container *ngTemplateOutlet="body"></ng-container>
+        </div>
+      }
+      @case ('helpful') {
+        <div [class]="box + ' border-l-teal-500'">
+          <ng-container *ngTemplateOutlet="body"></ng-container>
+        </div>
+      }
+      @case ('important') {
+        <div [class]="box + ' border-l-purple-500'">
+          <ng-container *ngTemplateOutlet="body"></ng-container>
+        </div>
+      }
+      @default {
+        <div [class]="box + ' border-l-blue-500'">
+          <ng-container *ngTemplateOutlet="body"></ng-container>
+        </div>
+      }
+    }
+
+    <ng-template #body><ng-content></ng-content></ng-template>
+  `,
+})
+export class NgmdAlert {
+  readonly severity = input<AlertSeverity>('info');
+  protected readonly box = BOX;
+}

package/template/src/app/ui/callout.ts

@@ -0,0 +1,57 @@
+import { Component, input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+
+type CalloutType = 'info' | 'tip' | 'success' | 'warning' | 'danger';
+
+// Per-side borders below: avoids Tailwind's `border-color` shorthand
+// (set by `border + border-zinc-200`) competing with `border-l-*` and
+// wiping the stripe colour under the `dark:` cascade.
+const BOX = 'my-6 px-5 py-4 rounded-lg border-y border-r border-t-zinc-200 border-r-zinc-200 border-b-zinc-200 dark:border-t-zinc-800 dark:border-r-zinc-800 dark:border-b-zinc-800 bg-zinc-50 dark:bg-zinc-900 border-l-[3px]';
+
+@Component({
+  selector: 'ngmd-callout',
+  imports: [NgTemplateOutlet],
+  template: `
+    @switch (type()) {
+      @case ('tip') {
+        <div [class]="box + ' border-l-teal-500'">
+          <ng-container *ngTemplateOutlet="body"></ng-container>
+        </div>
+      }
+      @case ('success') {
+        <div [class]="box + ' border-l-emerald-500'">
+          <ng-container *ngTemplateOutlet="body"></ng-container>
+        </div>
+      }
+      @case ('warning') {
+        <div [class]="box + ' border-l-amber-500'">
+          <ng-container *ngTemplateOutlet="body"></ng-container>
+        </div>
+      }
+      @case ('danger') {
+        <div [class]="box + ' border-l-red-500'">
+          <ng-container *ngTemplateOutlet="body"></ng-container>
+        </div>
+      }
+      @default {
+        <div [class]="box + ' border-l-blue-500'">
+          <ng-container *ngTemplateOutlet="body"></ng-container>
+        </div>
+      }
+    }
+
+    <ng-template #body>
+      @if (title()) {
+        <p class="font-semibold text-sm mb-2 text-zinc-900 dark:text-zinc-100">{{ title() }}</p>
+      }
+      <div class="text-sm text-zinc-700 dark:text-zinc-300 [&>*:last-child]:mb-0 [&>*:first-child]:mt-0">
+        <ng-content></ng-content>
+      </div>
+    </ng-template>
+  `,
+})
+export class NgmdCallout {
+  readonly type = input<CalloutType>('info');
+  readonly title = input<string>('');
+  protected readonly box = BOX;
+}

package/template/src/app/ui/card.ts

@@ -0,0 +1,41 @@
+import { Component, input } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+
+@Component({
+  selector: 'ngmd-card',
+  imports: [NgTemplateOutlet, RouterLink],
+  template: `
+    @if (link()) {
+      <a
+        [routerLink]="link()"
+        class="block rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-5 my-4 text-inherit no-underline transition-colors hover:border-zinc-400 dark:hover:border-zinc-600"
+      >
+        <ng-container *ngTemplateOutlet="body"></ng-container>
+      </a>
+    } @else {
+      <div
+        class="rounded-xl border border-zinc-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-5 my-4"
+      >
+        <ng-container *ngTemplateOutlet="body"></ng-container>
+      </div>
+    }
+
+    <ng-template #body>
+      @if (title()) {
+        <h3 class="text-base font-semibold mb-2 text-zinc-900 dark:text-zinc-100">{{ title() }}</h3>
+      }
+      <div class="text-sm text-zinc-600 dark:text-zinc-400">
+        <ng-content></ng-content>
+      </div>
+      @if (cta()) {
+        <span class="mt-3 inline-block text-sm font-medium text-zinc-500 dark:text-zinc-400">{{ cta() }} →</span>
+      }
+    </ng-template>
+  `,
+})
+export class NgmdCard {
+  readonly title = input<string>('');
+  readonly link = input<string>('');
+  readonly cta = input<string>('');
+}

package/template/src/app/ui/code-block.ts

@@ -0,0 +1,76 @@
+import {
+  Component,
+  DestroyRef,
+  effect,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { DomSanitizer, type SafeHtml } from '@angular/platform-browser';
+
+/**
+ * Code block with a header bar and shiki syntax highlighting at runtime.
+ * Author passes raw `code` + a `language`. Shiki is lazy-loaded on first
+ * render so it does not weigh on the initial bundle.
+ */
+@Component({
+  selector: 'ngmd-code-block',
+  template: `
+    <div class="my-6 rounded-xl border border-zinc-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950">
+      @if (header()) {
+        <div
+          class="px-4 py-2 border-b border-zinc-200 dark:border-zinc-800 bg-zinc-50 dark:bg-zinc-900 font-mono text-xs text-zinc-500 dark:text-zinc-400"
+        >
+          {{ header() }}
+        </div>
+      }
+      @if (highlighted(); as html) {
+        <div
+          class="[&_pre]:m-0 [&_pre]:p-4 [&_pre]:overflow-x-auto [&_pre]:text-sm [&_pre]:leading-relaxed [&_pre]:border-0 [&_pre]:rounded-none"
+          [innerHTML]="html"
+        ></div>
+      } @else {
+        <pre class="m-0 p-4 overflow-x-auto text-sm leading-relaxed bg-transparent border-0 rounded-none"><code [class]="codeClass()">{{ code() }}</code></pre>
+      }
+    </div>
+  `,
+})
+export class NgmdCodeBlock {
+  private readonly sanitizer = inject(DomSanitizer);
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly header = input<string>('');
+  readonly language = input<string>('');
+  readonly code = input<string>('');
+
+  protected readonly highlighted = signal<SafeHtml | null>(null);
+
+  protected readonly codeClass = () =>
+    this.language() ? `language-${this.language()}` : '';
+
+  constructor() {
+    let cancelled = false;
+    this.destroyRef.onDestroy(() => (cancelled = true));
+
+    effect(async () => {
+      const code = this.code();
+      const lang = this.language();
+      if (!code || typeof window === 'undefined') return;
+
+      try {
+        const { codeToHtml } = await import('shiki');
+        if (cancelled) return;
+        const html = await codeToHtml(code, {
+          lang: lang || 'text',
+          themes: { light: 'github-light', dark: 'github-dark' },
+          defaultColor: false,
+        });
+        if (!cancelled) {
+          this.highlighted.set(this.sanitizer.bypassSecurityTrustHtml(html));
+        }
+      } catch {
+        // Lang not bundled or shiki failed: fall through to the unstyled <pre>.
+      }
+    });
+  }
+}

package/template/src/app/ui/hero.ts

@@ -0,0 +1,42 @@
+import { Component, computed, input } from '@angular/core';
+
+@Component({
+  selector: 'ngmd-hero',
+  template: `
+    <header
+      class="my-8 rounded-2xl px-6 py-10 sm:px-10 sm:py-14"
+      [class]="bgClass()"
+    >
+      <h1
+        class="text-3xl sm:text-4xl font-bold tracking-tight m-0 mb-3"
+        [class]="titleClass()"
+      >
+        {{ title() }}
+      </h1>
+      <div
+        class="text-base sm:text-lg leading-relaxed max-w-prose [&>*:first-child]:mt-0 [&>*:last-child]:mb-0"
+        [class]="bodyClass()"
+      >
+        <ng-content></ng-content>
+      </div>
+    </header>
+  `,
+})
+export class NgmdHero {
+  readonly title = input.required<string>();
+  readonly gradient = input(false, { transform: (v: boolean | string) => v === '' || v === true || v === 'true' });
+
+  readonly bgClass = computed(() =>
+    this.gradient()
+      ? 'bg-gradient-to-br from-rose-500/10 via-fuchsia-500/10 to-purple-500/10 border border-zinc-200 dark:border-zinc-800'
+      : 'bg-zinc-50 dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800',
+  );
+
+  readonly titleClass = computed(() =>
+    this.gradient()
+      ? 'bg-gradient-to-r from-rose-500 via-fuchsia-500 to-purple-500 bg-clip-text text-transparent'
+      : 'text-zinc-900 dark:text-zinc-100',
+  );
+
+  readonly bodyClass = computed(() => 'text-zinc-700 dark:text-zinc-300');
+}