@baybreezy/docd 0.1.12 → 0.3.0

package/app/app.config.ts

@@ -153,6 +153,14 @@ export type DocdConfig = {
       /** Logo configuration for the header. */
       logo?: DocLogoConfig;
     };
+    body?: {
+      /**
+       * Maximum width for the main content area.
+       *
+       * @default "1280px"
+       */
+      maxWidth?: `${number}px`;
+    };
     footer?: {
       /**
        * Whether to hide the theme customizer in the sidebar

package/app/app.vue

@@ -1,5 +1,6 @@
 <template>
   <ConfigProvider :use-id="useId">
+    <NuxtAnnouncer />
     <NuxtRouteAnnouncer />
     <NuxtLoadingIndicator color="var(--primary)" />
     <NuxtLayout>

package/app/assets/css/shadcn.css

@@ -111,12 +111,18 @@
       --scroll-fade-t: 0px;
     }
     to {
-      --scroll-fade-t: var(--_scroll-fade-size-t, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+      --scroll-fade-t: var(
+        --_scroll-fade-size-t,
+        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+      );
     }
   }
   @keyframes scroll-fade-reveal-b {
     from {
-      --scroll-fade-b: var(--_scroll-fade-size-b, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+      --scroll-fade-b: var(
+        --_scroll-fade-size-b,
+        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+      );
     }
     to {
       --scroll-fade-b: 0px;
@@ -127,12 +133,18 @@
       --scroll-fade-s: 0px;
     }
     to {
-      --scroll-fade-s: var(--_scroll-fade-size-s, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+      --scroll-fade-s: var(
+        --_scroll-fade-size-s,
+        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+      );
     }
   }
   @keyframes scroll-fade-reveal-e {
     from {
-      --scroll-fade-e: var(--_scroll-fade-size-e, var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10))));
+      --scroll-fade-e: var(
+        --_scroll-fade-size-e,
+        var(--scroll-fade-size, min(12%, calc(var(--spacing) * 10)))
+      );
     }
     to {
       --scroll-fade-e: 0px;
@@ -320,10 +332,7 @@
   @supports (animation-timeline: scroll()) {
     animation: scroll-fade-reveal-b 1ms ease-in-out;
     animation-timeline: scroll(self y);
-    animation-range: calc(
-        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
-      )
-      100%;
+    animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
     animation-fill-mode: both;
   }
 
@@ -383,10 +392,7 @@
   @supports (animation-timeline: scroll()) {
     animation: scroll-fade-reveal-e 1ms ease-in-out;
     animation-timeline: scroll(self x);
-    animation-range: calc(
-        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
-      )
-      100%;
+    animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
     animation-fill-mode: both;
   }
 
@@ -462,10 +468,7 @@
   @supports (animation-timeline: scroll()) {
     animation: scroll-fade-reveal-e 1ms ease-in-out;
     animation-timeline: scroll(self inline);
-    animation-range: calc(
-        100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))
-      )
-      100%;
+    animation-range: calc(100% - var(--scroll-fade-reveal, calc(var(--spacing) * 24))) 100%;
     animation-fill-mode: both;
   }
 
@@ -532,21 +535,16 @@
 @utility shimmer {
   --_spread: var(--shimmer-spread, calc(3ch + 40px));
   --_base: currentColor;
-  --_highlight: var(
-    --shimmer-color,
-    oklch(from currentColor l c h / calc(alpha* 0.2))
-  );
+  --_highlight: var(--shimmer-color, oklch(from currentColor l c h / calc(alpha* 0.2)));
 
   background-image: var(
     --shimmer-image,
     linear-gradient(
       calc(90deg + var(--shimmer-angle)),
       var(--_base) calc(50% - var(--_spread)),
-      color-mix(in oklch, var(--_highlight), var(--_base) 50%)
-        calc(50% - var(--_spread) * 0.5),
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% - var(--_spread) * 0.5),
       var(--_highlight) 50%,
-      color-mix(in oklch, var(--_highlight), var(--_base) 50%)
-        calc(50% + var(--_spread) * 0.5),
+      color-mix(in oklch, var(--_highlight), var(--_base) 50%) calc(50% + var(--_spread) * 0.5),
       var(--_base) calc(50% + var(--_spread))
     )
   );
@@ -613,45 +611,103 @@
   }
 }
 
-
 /* Message entrance animations for the MessageScroller demos. */
 @keyframes ms-anim-fade {
-  from { opacity: 0; }
-  to { opacity: 1; }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
 @keyframes ms-anim-slide-up {
-  from { opacity: 0; transform: translateY(10px); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 @keyframes ms-anim-slide-side {
-  from { opacity: 0; transform: translateX(18px); }
-  to { opacity: 1; transform: translateX(0); }
+  from {
+    opacity: 0;
+    transform: translateX(18px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
 }
 @keyframes ms-anim-pop {
-  from { opacity: 0; transform: translateY(6px) scale(0.94); }
-  to { opacity: 1; transform: translateY(0) scale(1); }
+  from {
+    opacity: 0;
+    transform: translateY(6px) scale(0.94);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 @keyframes ms-anim-spring-bounce {
-  0% { opacity: 0; transform: translateY(12px) scale(0.96); }
-  60% { opacity: 1; transform: translateY(-2px) scale(1.01); }
-  100% { opacity: 1; transform: translateY(0) scale(1); }
+  0% {
+    opacity: 0;
+    transform: translateY(12px) scale(0.96);
+  }
+  60% {
+    opacity: 1;
+    transform: translateY(-2px) scale(1.01);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
 }
 @keyframes ms-anim-blur-fade {
-  from { opacity: 0; filter: blur(4px); transform: translateY(6px); }
-  to { opacity: 1; filter: blur(0); transform: translateY(0); }
+  from {
+    opacity: 0;
+    filter: blur(4px);
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateY(0);
+  }
 }
 @keyframes ms-anim-scale-fade {
-  from { opacity: 0; transform: scale(0.98); }
-  to { opacity: 1; transform: scale(1); }
+  from {
+    opacity: 0;
+    transform: scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
 }
 
-.ms-anim-fade { animation: ms-anim-fade 0.26s cubic-bezier(0.16, 1, 0.3, 1) both; }
-.ms-anim-slide-up { animation: ms-anim-slide-up 0.26s cubic-bezier(0.16, 1, 0.3, 1) both; }
-.ms-anim-slide-side { animation: ms-anim-slide-side 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
-.ms-anim-pop { animation: ms-anim-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
-.ms-anim-spring-bounce { animation: ms-anim-spring-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
-.ms-anim-blur-fade { animation: ms-anim-blur-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
-.ms-anim-scale-fade { animation: ms-anim-scale-fade 0.24s cubic-bezier(0.16, 1, 0.3, 1) both; }
+.ms-anim-fade {
+  animation: ms-anim-fade 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.ms-anim-slide-up {
+  animation: ms-anim-slide-up 0.26s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.ms-anim-slide-side {
+  animation: ms-anim-slide-side 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.ms-anim-pop {
+  animation: ms-anim-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+.ms-anim-spring-bounce {
+  animation: ms-anim-spring-bounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
+}
+.ms-anim-blur-fade {
+  animation: ms-anim-blur-fade 0.3s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
+.ms-anim-scale-fade {
+  animation: ms-anim-scale-fade 0.24s cubic-bezier(0.16, 1, 0.3, 1) both;
+}
 
 @media (prefers-reduced-motion: reduce) {
   [class*="ms-anim-"] {

package/app/components/docs/DocsMobileNav.vue

@@ -15,11 +15,9 @@
         </UiDrawerClose>
       </UiDrawerHeader>
 
-      <UiScrollArea
-        class="min-h-0 flex-1 mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)] px-4 py-4"
-      >
+      <div class="min-h-0 flex-1 scroll-fade overflow-y-auto px-4 py-4">
         <DocsNav v-if="navigation" :items="navigation" />
-      </UiScrollArea>
+      </div>
 
       <div
         class="mt-auto flex h-(--header-height) items-center justify-between gap-3 border-t px-2"

package/app/components/docs/DocsPageTransition.vue

@@ -3,9 +3,9 @@
     class="w-full min-w-0 overflow-x-clip"
     :class="[isAnimating && 'pointer-events-none overflow-clip']"
   >
-    <AnimatePresence mode="wait" @exit-complete="isAnimating = false">
+    <AnimatePresence mode="wait">
       <Motion
-        :key="route.path"
+        :key="$router.currentRoute.value.path"
         :initial="preset.initial"
         :animate="animate"
         :exit="preset.exit"
@@ -20,13 +20,15 @@
 
 <script lang="ts" setup>
   const route = useRoute();
+  const activeRoute = computed(() => route.path);
   const { preset, animate, duration, easing } = useDocd();
 
   const isAnimating = ref(false);
-  watch(
-    () => route.path,
-    () => {
-      isAnimating.value = true;
-    }
-  );
+  watch(activeRoute, () => {
+    isAnimating.value = true;
+  });
+
+  useNuxtApp().hook("page:finish", () => {
+    isAnimating.value = false;
+  });
 </script>

package/app/composables/useDocd.ts

@@ -38,6 +38,12 @@ export function useDocd() {
   const headerTitle = computed(() => header.value.title ?? "");
   const hideSearch = computed(() => header.value.hideSearch ?? false);
 
+  /* =====================================
+  =               Body.                  =
+  ===================================== */
+  const body = useUIConfig("body");
+  const maxWidth = computed(() => body.value.maxWidth ?? "1280px");
+
   /* =====================================
   =               Logo                   =
   ===================================== */
@@ -107,5 +113,8 @@ export function useDocd() {
     // footer
     hideThemeCustomizer,
     hideLightDarkToggle,
+    // body
+    body,
+    maxWidth,
   };
 }

package/app/composables/useUIConfig.ts

@@ -6,6 +6,9 @@ interface DocdUIMap {
     hideSearch?: boolean;
     logo?: DocLogoConfig;
   };
+  body: {
+    maxWidth?: `${number}px`;
+  };
   footer?: {
     hideThemeCustomizer?: boolean;
     hideLightDarkToggle?: boolean;
@@ -30,6 +33,7 @@ export function useUIConfig<K extends keyof DocdUIMap>(section: K): ComputedRef<
 
 const defaultValues: DocdUIMap = {
   header: {},
+  body: { maxWidth: "1280px" },
   toc: { title: "On this page", icon: "lucide:list" },
   borderType: "dashed",
   transition: { name: "fade", duration: 0.35, easing: "easeOut" },

package/app/layouts/docs.vue

@@ -13,11 +13,11 @@
           <DocsSearchButton v-if="!hideSearch" />
         </div>
       </div>
-      <UiScrollArea
-        class="h-[calc(100dvh-calc(var(--header-height)*2))] flex-1 mask-[linear-gradient(to_bottom,transparent,white_12px,white_calc(100%-12px),transparent)] px-4"
+      <div
+        class="h-[calc(100dvh-calc(var(--header-height)*2))] flex-1 scroll-fade overflow-y-auto px-4"
       >
         <DocsNav v-if="navigation" :items="navigation" />
-      </UiScrollArea>
+      </div>
       <div
         class="mt-auto flex h-(--header-height) items-center justify-between gap-3 border-t px-2"
         :class="isDashed ? 'border-dashed' : ''"
@@ -60,6 +60,5 @@
 
 <script lang="ts" setup>
   const { navigation } = await useDocPage();
-  const { isDashed, github, hasGithub, hideSearch, hideLightDarkToggle, hideThemeCustomizer } =
-    useDocd();
+  const { isDashed, hasGithub, hideSearch, hideLightDarkToggle, hideThemeCustomizer } = useDocd();
 </script>

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

@@ -9,8 +9,9 @@
   >
     <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="container prose prose-base 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' : '']"
+      :style="{ maxWidth: maxWidth }"
     >
       <PageHeader />
       <ContentRenderer :value="page" />
@@ -28,7 +29,7 @@
   const route = useRoute();
 
   const { page, navigation, headline, breadcrumbs } = await useDocPage();
-  const { isDashed } = useDocd();
+  const { isDashed, maxWidth } = useDocd();
 
   if (!page.value) {
     throw createError({ statusCode: 404, statusMessage: "Page not found", fatal: true });

package/index.d.ts

@@ -1,7 +1,9 @@
+import type { CssModuleOptions } from "./modules/css";
 import type { SkillsModuleOptions } from "./modules/skills";
 
 export interface DocdNuxtConfig {
   skills?: SkillsModuleOptions;
+  css?: CssModuleOptions;
 }
 
 declare module "@nuxt/schema" {

package/modules/css.ts

@@ -1,8 +1,33 @@
+import { existsSync } from "node:fs";
 import { readFile } from "node:fs/promises";
+import { dirname, isAbsolute, relative, resolve as resolvePath } from "node:path";
 
-import { addVitePlugin, createResolver, defineNuxtModule } from "@nuxt/kit";
+import { addVitePlugin, createResolver, defineNuxtModule, logger } from "@nuxt/kit";
+import { defu } from "defu";
 
-export default defineNuxtModule({
+export interface CssModuleOptions {
+  /**
+   * Paths (relative to the consuming app root, or absolute) to CSS files that
+   * should be merged into the layer's Tailwind entry.
+   *
+   * Files that only use `@apply` already work without this — they get
+   * `@reference` injected automatically.
+   *
+   * Use `extend` for anything that needs
+   * more than that (`@theme`, `@utility`, `@custom-variant`, etc.), since those
+   * only take effect when the file is part of the same Tailwind build as the
+   * layer, not a separate one started by its own `@import "tailwindcss"`.
+   */
+  extend?: string[];
+}
+
+const defaults: Required<CssModuleOptions> = {
+  extend: [],
+};
+
+const log = logger.withTag("Docd");
+
+export default defineNuxtModule<CssModuleOptions>({
   meta: {
     name: "docd:css",
   },
@@ -12,11 +37,30 @@ export default defineNuxtModule({
     // Absolute path to the layer's tailwind entry — resolved from this module's
     // location so it stays correct whether docd is local or installed from npm.
     const tailwindCssPath = resolver.resolve("../app/assets/css/tailwind.css").replace(/\\/g, "/");
+    const tailwindCssDir = dirname(tailwindCssPath);
 
     // Absolute paths that Tailwind needs to scan.
     const rootDir = nuxt.options.rootDir.replace(/\\/g, "/");
     const layerAppDir = resolver.resolve("../app").replace(/\\/g, "/");
 
+    const options = defu(
+      (nuxt.options as unknown as { docd?: { css?: CssModuleOptions } }).docd?.css,
+      defaults
+    ) as Required<CssModuleOptions>;
+
+    // Resolve and validate consumer-provided files that opt into being merged
+    // into the layer's single Tailwind build.
+    const extendPaths = options.extend
+      .map((file) =>
+        (isAbsolute(file) ? file : resolvePath(nuxt.options.rootDir, file)).replace(/\\/g, "/")
+      )
+      .filter((file) => {
+        if (existsSync(file)) return true;
+        log.warn(`docd.css.extend: CSS file not found, skipping: ${file}`);
+        return false;
+      });
+    const extendPathSet = new Set(extendPaths);
+
     // Use the `load` hook rather than `transform` so our modified source is
     // visible to @tailwindcss/vite's transform hook (which has enforce:"pre"
     // and is registered earlier). Vite always runs `load` before `transform`.
@@ -28,10 +72,21 @@ export default defineNuxtModule({
         if (cleanId !== tailwindCssPath) return null;
 
         const code = await readFile(tailwindCssPath, "utf8");
+
+        // `@import` each consumer-registered file so it's part of this same
+        // Tailwind compilation (one theme/base/utilities pass) instead of
+        // starting its own via a separate `@import "tailwindcss"`.
+        const extendImports = extendPaths.map((file) => {
+          this.addWatchFile(file);
+          const rel = relative(tailwindCssDir, file).replace(/\\/g, "/");
+          return `@import ${JSON.stringify(rel.startsWith(".") ? rel : `./${rel}`)};`;
+        });
+
         return [
           code,
           `@source ${JSON.stringify(`${rootDir}/**/*`)};`,
           `@source ${JSON.stringify(`${layerAppDir}/**/*`)};`,
+          ...extendImports,
         ].join("\n");
       },
     });
@@ -48,6 +103,10 @@ export default defineNuxtModule({
         if (!cleanId?.endsWith(".css")) return null;
         // Skip the layer's own tailwind entry — it already has @import "tailwindcss".
         if (cleanId === tailwindCssPath) return null;
+        // Skip files merged in via `docd.css.extend` — they're already `@import`ed
+        // into the tailwind entry above, so injecting `@reference` back to that
+        // same entry here would create a circular import.
+        if (extendPathSet.has(cleanId)) return null;
         // Only touch files inside the consuming app root, not node_modules or the layer.
         if (!cleanId.startsWith(`${rootDir}/`)) return null;
         if (cleanId.startsWith(`${layerAppDir}/`)) return null;
@@ -76,11 +135,11 @@ export default defineNuxtModule({
 
     // Suppress noisy Vite warnings produced during Tailwind's build pass.
     nuxt.hook("vite:extendConfig", (config) => {
-      const logger = config.customLogger;
-      if (!logger) return;
+      const viteLogger = config.customLogger;
+      if (!viteLogger) return;
       const ignore = ["@tailwindcss/vite:generate:build", "nuxt:module-preload-polyfill"];
-      const originalWarn = logger.warn.bind(logger);
-      logger.warn = (msg, options) => {
+      const originalWarn = viteLogger.warn.bind(viteLogger);
+      viteLogger.warn = (msg, options) => {
         if (ignore.some((p) => msg.includes(p))) return;
         originalWarn(msg, options);
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baybreezy/docd",
-  "version": "0.1.12",
+  "version": "0.3.0",
   "description": "A Nuxt layer for building documentation sites with UI Thing.",
   "repository": {
     "type": "git",
@@ -31,24 +31,21 @@
   },
   "dependencies": {
     "@baybreezy/file-extension-icon": "^0.0.5",
-    "@iconify-json/lucide": "^1.2.116",
-    "@iconify-json/material-icon-theme": "^1.2.69",
-    "@iconify-json/simple-icons": "^1.2.89",
     "@iconify/utils": "^3.1.4",
     "@morev/vue-transitions": "^3.0.5",
     "@nuxt/content": "3.15.0",
     "@nuxt/fonts": "^0.14.0",
     "@nuxt/icon": "^2.3.1",
     "@nuxt/image": "2.0.0",
-    "@nuxt/kit": "^4.4.8",
+    "@nuxt/kit": "^4.5.0",
     "@nuxtjs/color-mode": "^4.0.1",
-    "@nuxtjs/mcp-toolkit": "^0.17.2",
-    "@nuxtjs/mdc": "^0.22.1",
+    "@nuxtjs/mcp-toolkit": "^0.18.0",
+    "@nuxtjs/mdc": "^0.22.2",
     "@nuxtjs/robots": "^6.1.2",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.20",
-    "@tailwindcss/vite": "^4.3.2",
-    "@takumi-rs/core": "^2.0.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@takumi-rs/core": "^2.3.0",
     "@vueuse/core": "^14.3.0",
     "@vueuse/nuxt": "^14.3.0",
     "better-sqlite3": "^12.11.1",
@@ -57,7 +54,7 @@
     "lodash-es": "^4.18.1",
     "mermaid": "^11.16.0",
     "motion-v": "^2.3.0",
-    "nuxt-component-meta": "^0.17.2",
+    "nuxt-component-meta": "^0.18.0",
     "nuxt-gtag": "4.1.0",
     "nuxt-llms": "^0.2.0",
     "nuxt-og-image": "^6.7.2",
@@ -66,7 +63,7 @@
     "shiki": "^4.3.1",
     "tailwind-merge": "^3.6.0",
     "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.3.2",
+    "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
     "ufo": "^1.6.4",
     "vaul-vue": "^0.4.1",
@@ -76,10 +73,10 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
-    "nuxt": "^4.4.8",
+    "nuxt": "^4.5.0",
     "typescript": "^6.0.3",
     "vue": "latest",
-    "vue-router": "^5.1.0"
+    "vue-router": "^5.2.0"
   },
   "packageManager": "bun@1.3.14",
   "trustedDependencies": [