@baybreezy/docd 0.0.1

package/app/pages/[...slug].vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    :class="[
+      toc && toc.links && toc.links.length && !page?.hideToc
+        ? 'xl:grid-cols-[1fr_var(--nav-width)]'
+        : 'xl:grid-cols-1',
+    ]"
+    class="xl:grid xl:gap-5"
+  >
+    <div
+      v-if="page"
+      class="container prose prose-base max-w-7xl min-w-0 py-5 dark:prose-invert prose-headings:scroll-mt-20 prose-headings:tracking-tight prose-h2:mt-6 prose-h2:border-b prose-h2:pb-3 first:prose-h2:mt-10 prose-a:text-primary prose-a:no-underline prose-a:hover:underline prose-a:hover:underline-offset-2 prose-pre:my-0 prose-pre:rounded-sm prose-pre:p-2 prose-pre:px-0 prose-pre:text-base"
+      :class="[isDashed ? 'prose-headings:border-dashed' : '']"
+    >
+      <PageHeader />
+      <ContentRenderer :value="page" />
+      <PageFooter />
+    </div>
+    <PageToc />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { findPageHeadline } from "@nuxt/content/utils";
+
+  definePageMeta({ middleware: "doc-page-layout" });
+
+  const route = useRoute();
+
+  const { page, navigation, headline, breadcrumbs } = await useDocPage();
+  const { isDashed } = useDocd();
+
+  if (!page.value) {
+    throw createError({ statusCode: 404, statusMessage: "Page not found", fatal: true });
+  }
+
+  const title = page.value?.seo?.title || page.value?.title;
+  const description = page.value?.seo?.description || page.value?.description;
+
+  const publishedAt = computed(() => page.value?.publishedAt || undefined);
+  const modifiedAt = computed(() => page.value?.modifiedAt || undefined);
+
+  useSeo({ title, description, type: "article", publishedAt, modifiedAt, breadcrumbs });
+  watch(
+    () => navigation?.value,
+    () => {
+      headline.value = findPageHeadline(navigation?.value, page.value?.path) || headline.value;
+    }
+  );
+  // Add the page path to the prerender list
+  addPrerenderPath(`/raw${route.path}.md`);
+
+  defineOgImage("Docs.takumi", {
+    title: title?.slice(0, 60),
+    description: formatOgDescription(title, description),
+    headline: headline.value,
+  });
+
+  const toc = computed(() => {
+    if (!page.value) return;
+    return page.value?.body?.toc;
+  });
+</script>

package/app/plugins/mermaid.client.ts

@@ -0,0 +1,35 @@
+import mermaid from "mermaid";
+import type { MermaidConfig } from "mermaid";
+
+export default defineNuxtPlugin(() => {
+  /**
+   * Mermaid initialization configuration
+   */
+  const mermaidInitConfig = {
+    startOnLoad: false,
+    themeVariables: {
+      fontFamily: "var(--font-sans)",
+      fontSize: "13px",
+    },
+    flowchart: {
+      curve: "basis",
+      useMaxWidth: true,
+    },
+    sequence: {
+      actorMargin: 50,
+      showSequenceNumbers: false,
+    },
+    suppressErrorRendering: true,
+  } as MermaidConfig;
+  /**
+   * Initialize Mermaid with the specified configuration
+   */
+  mermaid.initialize(mermaidInitConfig);
+
+  return {
+    provide: {
+      mermaidInstance: mermaid,
+      mermaidInitConfig,
+    },
+  };
+});

package/app/plugins/navigation-direction.client.ts

@@ -0,0 +1,15 @@
+export default defineNuxtPlugin(() => {
+  const router = useRouter();
+  const direction = useState<"forward" | "back">("nav-direction", () => "forward");
+
+  let currentPosition = window?.history?.state?.position ?? 0;
+
+  router.beforeEach(() => {
+    const nextPosition = window?.history?.state?.position ?? 0;
+    direction.value = nextPosition < currentPosition ? "back" : "forward";
+  });
+
+  router.afterEach(() => {
+    currentPosition = window?.history?.state?.position ?? 0;
+  });
+});

package/app/plugins/theme-restore.client.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin(() => {
+  const theme = localStorage.getItem("docs-color-theme");
+  const radius = localStorage.getItem("docs-radius");
+
+  if (theme) document.documentElement.classList.add(theme);
+  if (radius) document.documentElement.style.setProperty("--radius", radius);
+});

package/app/templates/landing.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  interface LandingPage {
+    title?: string;
+    description?: string;
+    layout?: string;
+    seo?: {
+      title?: string;
+      description?: string;
+    };
+  }
+
+  definePageMeta({ middleware: "landing-page-layout" });
+
+  const route = useRoute();
+
+  const { data: page } = await useAsyncData<LandingPage | null>("landing", () =>
+    queryCollection("landing" as never)
+      .path(route.path)
+      .first()
+      .then((r) => r ?? null)
+  );
+
+  if (!page.value) {
+    throw createError({ statusCode: 404, statusMessage: "Page not found", fatal: true });
+  }
+
+  const title = page.value?.seo?.title || page.value?.title;
+  const description = page.value?.seo?.description || page.value?.description;
+
+  useSeo({ title, description, type: "website" });
+
+  defineOgImage("Landing", {
+    title: title?.slice(0, 60),
+    description: formatOgDescription(title, description),
+  });
+</script>
+
+<template>
+  <ContentRenderer v-if="page" :value="page" />
+</template>

package/app/transitions/presets.ts

@@ -0,0 +1,71 @@
+export type DocdTransitionName =
+  | "fade"
+  | "rightToLeft"
+  | "leftToRight"
+  | "upToDown"
+  | "downToUp"
+  | "rightToLeftWithFade"
+  | "leftToRightWithFade"
+  | "zoom"
+  | "zoomOut"
+  | "cupertino"
+  | "cupertinoDialog"
+  | "none";
+
+export interface TransitionStates {
+  initial: Record<string, string | number>;
+  exit: Record<string, string | number>;
+}
+
+export const transitionPresets: Record<DocdTransitionName, TransitionStates> = {
+  fade: {
+    initial: { opacity: 0 },
+    exit: { opacity: 0 },
+  },
+  rightToLeft: {
+    initial: { x: "100%", opacity: 0 },
+    exit: { x: "-30%", opacity: 0 },
+  },
+  leftToRight: {
+    initial: { x: "-100%", opacity: 0 },
+    exit: { x: "30%", opacity: 0 },
+  },
+  upToDown: {
+    initial: { y: "-100%", opacity: 0 },
+    exit: { y: "30%", opacity: 0 },
+  },
+  downToUp: {
+    initial: { y: "100%", opacity: 0 },
+    exit: { y: "-30%", opacity: 0 },
+  },
+  rightToLeftWithFade: {
+    initial: { x: "60%", opacity: 0 },
+    exit: { x: "-60%", opacity: 0 },
+  },
+  leftToRightWithFade: {
+    initial: { x: "-60%", opacity: 0 },
+    exit: { x: "60%", opacity: 0 },
+  },
+  zoom: {
+    initial: { scale: 0.85, opacity: 0 },
+    exit: { scale: 1.1, opacity: 0 },
+  },
+  zoomOut: {
+    initial: { scale: 1.15, opacity: 0 },
+    exit: { scale: 0.85, opacity: 0 },
+  },
+  cupertino: {
+    initial: { x: "2%", opacity: 0 },
+    exit: { x: "-2%", opacity: 0 },
+  },
+  cupertinoDialog: {
+    initial: { y: "2%", scale: 0.95, opacity: 0 },
+    exit: { y: "2%", opacity: 0 },
+  },
+  none: {
+    initial: {},
+    exit: {},
+  },
+};
+
+export const ANIMATE_IDENTITY = { x: 0, y: 0, scale: 1, opacity: 1 } as const;

package/app/types/prose-component-meta.d.ts

@@ -0,0 +1,4 @@
+declare module "#build/docd/prose-component-meta" {
+  const manifest: import("../../utils/generate-prose-component-meta").ProseComponentMetaManifest;
+  export default manifest;
+}

package/app/utils/og.ts

@@ -0,0 +1,26 @@
+// nuxt-og-image caps the encoded URL segment at 200 chars.
+// Fixed overhead (component name, param keys, path encoding) is ~50 chars,
+// leaving a ~150-char budget for title + description combined.
+const OG_BUDGET = 150;
+
+/**
+ * Trims description to fit within the nuxt-og-image 200-char URL segment limit,
+ * accounting for the title length and trying to cut at the last sentence boundary.
+ */
+export function formatOgDescription(
+  title: string | undefined,
+  description: string | undefined
+): string | undefined {
+  if (!description) return undefined;
+
+  const titleLen = Math.min(title?.length ?? 0, 60);
+  const maxLen = OG_BUDGET - titleLen;
+  if (maxLen <= 0) return undefined;
+
+  const cleaned = description.replace(/,/g, "");
+  if (cleaned.length <= maxLen) return cleaned;
+
+  const truncated = cleaned.slice(0, maxLen);
+  const lastDot = truncated.lastIndexOf(".");
+  return lastDot > 0 ? truncated.slice(0, lastDot + 1) : truncated;
+}

package/app/utils/prerender.ts

@@ -0,0 +1,9 @@
+export const addPrerenderPath = (path: string) => {
+  const event = useRequestEvent();
+  if (event) {
+    event.node.res.setHeader(
+      "x-nitro-prerender",
+      [event.node.res.getHeader("x-nitro-prerender"), path].filter(Boolean).join(",")
+    );
+  }
+};

package/app/utils/translucent.ts

@@ -0,0 +1,56 @@
+export type FloatingSurfaceTone = "background" | "popover";
+export type FloatingArrowShape = "square" | "svg";
+
+export function getTranslucentFloatingPanelClasses(tone: FloatingSurfaceTone) {
+  if (tone === "background") {
+    return [
+      "bg-background/68",
+      "supports-backdrop-filter:bg-background/42",
+      "supports-backdrop-filter:backdrop-blur-2xl",
+      "supports-backdrop-filter:backdrop-saturate-150",
+      "supports-backdrop-filter:backdrop-brightness-110",
+      "border-border/50",
+      "shadow-2xl shadow-black/14 dark:shadow-black/42",
+    ].join(" ");
+  }
+
+  return [
+    "bg-popover/68",
+    "supports-backdrop-filter:bg-popover/40",
+    "supports-backdrop-filter:backdrop-blur-2xl",
+    "supports-backdrop-filter:backdrop-saturate-150",
+    "supports-backdrop-filter:backdrop-brightness-110",
+    "border-border/50",
+    "shadow-xl shadow-black/12 dark:shadow-black/36",
+  ].join(" ");
+}
+
+export function getTranslucentFloatingArrowClasses(
+  tone: FloatingSurfaceTone,
+  shape: FloatingArrowShape = "svg"
+) {
+  const fillClass = tone === "background" ? "fill-background" : "fill-popover";
+
+  if (shape === "square") {
+    return [
+      tone === "background" ? "bg-background/68" : "bg-popover/68",
+      tone === "background"
+        ? "supports-backdrop-filter:bg-background/42"
+        : "supports-backdrop-filter:bg-popover/40",
+      "supports-backdrop-filter:backdrop-blur-2xl",
+      "supports-backdrop-filter:backdrop-saturate-150",
+      "supports-backdrop-filter:backdrop-brightness-110",
+      "border-border/50",
+      "shadow-lg shadow-black/12 dark:shadow-black/36",
+    ].join(" ");
+  }
+
+  return [
+    `${fillClass}/68`,
+    tone === "background"
+      ? "supports-backdrop-filter:fill-background/42"
+      : "supports-backdrop-filter:fill-popover/40",
+    "stroke-border/50 [stroke-width:1px]",
+    "drop-shadow-[0_10px_22px_rgb(0_0_0/0.16)] dark:drop-shadow-[0_12px_24px_rgb(0_0_0/0.4)]",
+  ].join(" ");
+}

package/app/utils/tw-helper.ts

@@ -0,0 +1,4 @@
+/**
+ * Utility function to return Tailwind CSS classes.
+ */
+export const tw = <T extends TemplateStringsArray | string>(tailwindClasses: T) => tailwindClasses;

package/content.config.ts

@@ -0,0 +1,81 @@
+import {
+  defineCollection,
+  defineContentConfig,
+  type DefinedCollection,
+  property,
+} from "@nuxt/content";
+import { useNuxt, createResolver } from "@nuxt/kit";
+import { joinURL } from "ufo";
+import { z } from "zod";
+
+import { componentApiSchema } from "./utils/component-api-schema";
+import { landingPageExists, docsFolderExists } from "./utils/pages";
+
+const resolver = createResolver(import.meta.url);
+
+const { options } = useNuxt();
+const cwd = joinURL(options.rootDir, "content");
+const hasLandingPage = landingPageExists(options.rootDir);
+const hasDocsFolder = docsFolderExists(options.rootDir);
+
+let collections: Record<string, DefinedCollection> = {};
+
+const baseSchema = z.object({
+  links: z
+    .array(
+      z.object({
+        title: z.string(),
+        href: z.string(),
+        icon: z.string().optional(),
+      })
+    )
+    .optional(),
+  fancyIcon: property(z.object({})).inherit(resolver.resolve("./app/components/Ui/FancyIcon.vue")),
+  hideToc: z.boolean().optional().default(false),
+  navigation: z
+    .union([
+      z.boolean(),
+      z.object({
+        title: z.string().optional(),
+        description: z.string().optional(),
+        icon: z.string().optional(),
+      }),
+    ])
+    .default(true),
+  publishedAt: z.iso.date().optional(),
+  modifiedAt: z.iso.date().optional(),
+  layout: z.string().optional(),
+  componentApi: componentApiSchema,
+});
+
+const docsSchema = baseSchema.extend({
+  layout: z.string().default("docs").optional(),
+});
+
+collections = {
+  docs: defineCollection({
+    // Specify the type of content in this collection
+    type: "page",
+    // Load every file inside the `content` directory
+    source: {
+      cwd,
+      include: hasDocsFolder ? "docs/**" : "**",
+      prefix: hasDocsFolder ? "/docs" : "/",
+      exclude: ["index.md"],
+    },
+    schema: docsSchema,
+  }),
+};
+
+if (!hasLandingPage) {
+  collections.landing = defineCollection({
+    type: "page",
+    source: {
+      cwd,
+      include: "index.md",
+    },
+    schema: baseSchema,
+  });
+}
+
+export default defineContentConfig({ collections });

package/index.d.ts

@@ -0,0 +1,25 @@
+import type { SkillsModuleOptions } from "./modules/skills";
+
+export interface DocdNuxtConfig {
+  skills?: SkillsModuleOptions;
+}
+
+declare module "@nuxt/schema" {
+  interface NuxtConfig {
+    docd?: DocdNuxtConfig;
+  }
+
+  interface NuxtOptions {
+    docd?: DocdNuxtConfig;
+  }
+}
+
+declare module "nuxt/schema" {
+  interface NuxtConfig {
+    docd?: DocdNuxtConfig;
+  }
+
+  interface NuxtOptions {
+    docd?: DocdNuxtConfig;
+  }
+}

package/modules/config.ts

@@ -0,0 +1,89 @@
+import { defineNuxtModule } from "@nuxt/kit";
+import { defaultsDeep } from "lodash-es";
+
+import { getGitBranch, getGitEnv, getLocalGitInfo } from "../utils/git";
+import { getPackageJsonMetadata, inferSiteURL } from "../utils/meta";
+
+export default defineNuxtModule({
+  meta: {
+    name: "docd:config",
+  },
+
+  async setup(_options, nuxt) {
+    const dir = nuxt.options.rootDir;
+    const url = inferSiteURL();
+    const meta = await getPackageJsonMetadata(dir);
+    const gitInfo = (await getLocalGitInfo(dir)) || getGitEnv();
+    const siteName =
+      (typeof nuxt.options.site === "object" && nuxt.options.site?.name) ||
+      meta.name ||
+      gitInfo?.name ||
+      "";
+
+    nuxt.options.vite.optimizeDeps = defaultsDeep({}, nuxt.options.vite.optimizeDeps, {
+      include: [
+        "mermaid",
+        "lodash-es",
+        "tailwind-variants",
+        "@baybreezy/file-extension-icon",
+        "@iconify/utils",
+      ],
+    });
+
+    nuxt.options.llms = defaultsDeep({}, nuxt.options.llms, {
+      domain: url,
+      title: siteName,
+      description: meta.description || "",
+      full: {
+        title: siteName,
+        description: meta.description || "",
+      },
+    });
+
+    nuxt.options.app.head = defaultsDeep({}, nuxt.options.app.head, {
+      title: siteName,
+      titleTemplate: `%s - ${siteName}`,
+    } as typeof nuxt.options.app.head);
+
+    nuxt.options.site = defaultsDeep({}, nuxt.options.site, {
+      url: url || "",
+      name: siteName,
+      debug: false,
+    }) as typeof nuxt.options.site;
+
+    if (siteName) {
+      nuxt.options.colorMode = defaultsDeep({}, nuxt.options.colorMode, {
+        storageKey: `${siteName.toLocaleLowerCase().replace(/\s+/g, "-")}-color-mode`,
+      }) as typeof nuxt.options.colorMode;
+    }
+
+    nuxt.options.appConfig.docd = defaultsDeep({}, nuxt.options.appConfig.docd, {
+      github: {
+        repo: gitInfo?.url ?? url ?? "",
+        branch: getGitBranch(),
+        contentDir: "content",
+      },
+      ui: {
+        header: {
+          title: siteName,
+        },
+      },
+    });
+
+    nuxt.options.appConfig.seo = defaultsDeep({}, nuxt.options.appConfig.seo, {
+      titleTemplate: `%s - ${siteName}`,
+      title: siteName,
+      description: meta.description || "",
+    });
+
+    const forcedColorMode = (
+      nuxt.options.appConfig.docd as { ui?: { colorMode?: string } } | undefined
+    )?.ui?.colorMode;
+    if (forcedColorMode === "light" || forcedColorMode === "dark") {
+      nuxt.options.colorMode = defaultsDeep(
+        { preference: forcedColorMode, fallback: forcedColorMode },
+        nuxt.options.colorMode || {}
+      ) as typeof nuxt.options.colorMode;
+    }
+  },
+});

package/modules/custom-icons.ts

@@ -0,0 +1,17 @@
+import { createResolver, defineNuxtModule } from "@nuxt/kit";
+
+export default defineNuxtModule({
+  meta: {
+    name: "docd:custom-icons",
+  },
+  setup(_options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+
+    nuxt.options.icon ||= {};
+    nuxt.options.icon.customCollections ||= [];
+    nuxt.options.icon.customCollections.push({
+      prefix: "custom",
+      dir: resolve(nuxt.options.srcDir, "assets/icons"),
+    });
+  },
+});

package/modules/markdown-rewrite.ts

@@ -0,0 +1,96 @@
+import { readFile, writeFile } from "node:fs/promises";
+import { resolve } from "node:path";
+
+import { defineNuxtModule, logger } from "@nuxt/kit";
+
+const log = logger.withTag("Docd");
+
+export default defineNuxtModule({
+  meta: {
+    name: "docd:markdown-rewrite",
+  },
+  setup(_options, nuxt) {
+    nuxt.hooks.hook("nitro:init", (nitro) => {
+      if (nitro.options.dev || !nitro.options.preset.includes("vercel")) {
+        return;
+      }
+
+      nitro.hooks.hook("compiled", async () => {
+        const vcJSON = resolve(nitro.options.output.dir, "config.json");
+        const vcConfig = JSON.parse(await readFile(vcJSON, "utf8"));
+
+        // Check if llms.txt exists before setting up any routes
+        let llmsTxt: string;
+        const llmsTxtPath = resolve(nitro.options.output.publicDir, "llms.txt");
+        try {
+          llmsTxt = await readFile(llmsTxtPath, "utf-8");
+        } catch {
+          log.warn("llms.txt not found, skipping markdown redirect routes");
+          return;
+        }
+
+        // Always redirect / to /llms.txt and ensure plain text content type
+        const markdownHeaders = {
+          "content-type": "text/markdown; charset=utf-8",
+        };
+
+        const routes = [
+          {
+            src: "^/$",
+            dest: "/llms.txt",
+            headers: markdownHeaders,
+            has: [{ type: "header", key: "accept", value: "(.*)text/markdown(.*)" }],
+          },
+          {
+            src: "^/$",
+            dest: "/llms.txt",
+            headers: markdownHeaders,
+            has: [{ type: "header", key: "user-agent", value: "curl/.*" }],
+          },
+        ];
+
+        // Parse llms.txt to get all documentation page URLs
+        const urlRegex = /\[([^\]]+)\]\((https?:\/\/[^)]+)\)/g;
+        const matches = [...llmsTxt.matchAll(urlRegex)];
+
+        for (const match of matches) {
+          const url = match[2];
+          if (!url) continue;
+
+          try {
+            const urlObj = new URL(url);
+            const rawPath = urlObj.pathname;
+
+            if (rawPath === "/") continue;
+            if (!rawPath.startsWith("/raw/")) continue;
+
+            // Convert /raw/getting-started/installation.md → /getting-started/installation
+            const pagePath = rawPath.replace("/raw", "").replace(/\.md$/, "");
+
+            routes.push(
+              {
+                src: `^${pagePath}$`,
+                dest: rawPath,
+                headers: markdownHeaders,
+                has: [{ type: "header", key: "accept", value: "(.*)text/markdown(.*)" }],
+              },
+              {
+                src: `^${pagePath}$`,
+                dest: rawPath,
+                headers: markdownHeaders,
+                has: [{ type: "header", key: "user-agent", value: "curl/.*" }],
+              }
+            );
+          } catch {
+            // Skip invalid URLs
+          }
+        }
+
+        vcConfig.routes.unshift(...routes);
+
+        await writeFile(vcJSON, JSON.stringify(vcConfig, null, 2), "utf8");
+        log.info(`Wrote ${routes.length} markdown redirect routes for AI agents`);
+      });
+    });
+  },
+});