@baybreezy/docd 0.0.5 → 0.0.7

package/app/assets/css/tailwind.css

@@ -1,6 +1,5 @@
 @import "tailwindcss";
 @import "tw-animate-css";
-@source "../../../../";
 
 @config "../../../tailwind.config.cjs";
 

package/app/components/docs/DocsGithubLink.vue

@@ -1,6 +1,6 @@
 <template>
   <NuxtLink :href="github?.repo" target="_blank" rel="noopener noreferrer">
-    <UiButton class="dark:text-muted-foreground" size="icon-sm" variant="ghost">
+    <UiButton size="icon-sm" variant="ghost">
       <Icon name="simple-icons:github" />
     </UiButton>
   </NuxtLink>

package/app/components/docs/DocsThemeCustomizer.vue

@@ -1,41 +1,48 @@
 <template>
-  <UiPopover v-if="isDesktop">
-    <UiTooltip>
-      <UiTooltipTrigger as-child>
-        <UiPopoverTrigger as-child>
-          <UiButton size="icon-sm" variant="ghost">
-            <Icon name="lucide:palette" />
-          </UiButton>
-        </UiPopoverTrigger>
-      </UiTooltipTrigger>
-      <UiPopoverContent
-        translucent
-        class="w-auto overflow-y-auto p-4"
-        side="right"
-        align="end"
-        :side-offset="8"
-      >
-        <DocsThemeCustomizerCore />
-      </UiPopoverContent>
-      <UiTooltipContent> Customize theme </UiTooltipContent>
-    </UiTooltip>
-  </UiPopover>
-  <UiDrawer v-else>
-    <UiDrawerTrigger as-child>
-      <UiButton size="icon-sm" variant="ghost">
+  <ClientOnly>
+    <template #fallback>
+      <UiButton size="icon-sm" variant="ghost" disabled>
         <Icon name="lucide:palette" />
       </UiButton>
-    </UiDrawerTrigger>
-    <UiDrawerContent class="w-full px-4 pb-6">
-      <UiDrawerHeader>
-        <UiDrawerTitle class="sr-only">Theme Customizer</UiDrawerTitle>
-        <UiDrawerDescription class="sr-only"
-          >Pick a style and color for your components.</UiDrawerDescription
+    </template>
+    <UiPopover v-if="isDesktop">
+      <UiTooltip>
+        <UiTooltipTrigger as-child>
+          <UiPopoverTrigger as-child>
+            <UiButton size="icon-sm" variant="ghost">
+              <Icon name="lucide:palette" />
+            </UiButton>
+          </UiPopoverTrigger>
+        </UiTooltipTrigger>
+        <UiPopoverContent
+          translucent
+          class="w-auto overflow-y-auto p-4"
+          side="right"
+          align="end"
+          :side-offset="8"
         >
-      </UiDrawerHeader>
-      <DocsThemeCustomizerCore />
-    </UiDrawerContent>
-  </UiDrawer>
+          <DocsThemeCustomizerCore />
+        </UiPopoverContent>
+        <UiTooltipContent> Customize theme </UiTooltipContent>
+      </UiTooltip>
+    </UiPopover>
+    <UiDrawer v-else>
+      <UiDrawerTrigger as-child>
+        <UiButton size="icon-sm" variant="ghost">
+          <Icon name="lucide:palette" />
+        </UiButton>
+      </UiDrawerTrigger>
+      <UiDrawerContent class="w-full px-4 pb-6">
+        <UiDrawerHeader>
+          <UiDrawerTitle class="sr-only">Theme Customizer</UiDrawerTitle>
+          <UiDrawerDescription class="sr-only"
+            >Pick a style and color for your components.</UiDrawerDescription
+          >
+        </UiDrawerHeader>
+        <DocsThemeCustomizerCore />
+      </UiDrawerContent>
+    </UiDrawer>
+  </ClientOnly>
 </template>
 
 <script lang="ts" setup>

package/app/components/docs/DocsThemeToggler.vue

@@ -13,7 +13,7 @@
       >
         <ClientOnly>
           <template #fallback>
-            <Icon name="svg-spinners:180-ring-with-bg" />
+            <Icon name="lucide:sun-medium" />
           </template>
           <Icon :name="iconName" />
         </ClientOnly>

package/modules/config.ts

@@ -1,5 +1,5 @@
 import { defineNuxtModule } from "@nuxt/kit";
-import { defaultsDeep } from "lodash-es";
+import { defu } from "defu";
 
 import { getGitBranch, getGitEnv, getLocalGitInfo } from "../utils/git";
 import { getPackageJsonMetadata, inferSiteURL } from "../utils/meta";
@@ -20,17 +20,20 @@ export default defineNuxtModule({
       gitInfo?.name ||
       "";
 
-    nuxt.options.vite.optimizeDeps = defaultsDeep({}, nuxt.options.vite.optimizeDeps, {
+    nuxt.options.vite.optimizeDeps = defu(nuxt.options.vite.optimizeDeps, {
       include: [
         "mermaid",
         "lodash-es",
         "tailwind-variants",
         "@baybreezy/file-extension-icon",
         "@iconify/utils",
+        "vaul-vue",
+        "@vue/devtools-core",
+        "@vue/devtools-kit",
       ],
     });
 
-    nuxt.options.llms = defaultsDeep({}, nuxt.options.llms, {
+    nuxt.options.llms = defu(nuxt.options.llms ?? {}, {
       domain: url,
       title: siteName,
       description: meta.description || "",
@@ -40,24 +43,24 @@ export default defineNuxtModule({
       },
     });
 
-    nuxt.options.app.head = defaultsDeep({}, nuxt.options.app.head, {
+    nuxt.options.app.head = defu(nuxt.options.app.head ?? {}, {
       title: siteName,
       titleTemplate: `%s - ${siteName}`,
-    } as typeof nuxt.options.app.head);
+    }) as typeof nuxt.options.app.head;
 
-    nuxt.options.site = defaultsDeep({}, nuxt.options.site, {
+    nuxt.options.site = defu(nuxt.options.site ?? {}, {
       url: url || "",
       name: siteName,
       debug: false,
     }) as typeof nuxt.options.site;
 
     if (siteName) {
-      nuxt.options.colorMode = defaultsDeep({}, nuxt.options.colorMode, {
+      nuxt.options.colorMode = defu(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, {
+    nuxt.options.appConfig.docd = defu(nuxt.options.appConfig.docd ?? {}, {
       github: {
         repo: gitInfo?.url ?? url ?? "",
         branch: getGitBranch(),
@@ -70,7 +73,7 @@ export default defineNuxtModule({
       },
     });
 
-    nuxt.options.appConfig.seo = defaultsDeep({}, nuxt.options.appConfig.seo, {
+    nuxt.options.appConfig.seo = defu(nuxt.options.appConfig.seo ?? {}, {
       titleTemplate: `%s - ${siteName}`,
       title: siteName,
       description: meta.description || "",
@@ -80,9 +83,9 @@ export default defineNuxtModule({
       nuxt.options.appConfig.docd as { ui?: { colorMode?: string } } | undefined
     )?.ui?.colorMode;
     if (forcedColorMode === "light" || forcedColorMode === "dark") {
-      nuxt.options.colorMode = defaultsDeep(
+      nuxt.options.colorMode = defu(
         { preference: forcedColorMode, fallback: forcedColorMode },
-        nuxt.options.colorMode || {}
+        nuxt.options.colorMode ?? {}
       ) as typeof nuxt.options.colorMode;
     }
   },

package/modules/css.ts

@@ -1,5 +1,6 @@
+import { readFile } from "node:fs/promises";
+
 import { addVitePlugin, createResolver, defineNuxtModule } from "@nuxt/kit";
-import { joinURL } from "ufo";
 
 export default defineNuxtModule({
   meta: {
@@ -8,24 +9,30 @@ export default defineNuxtModule({
   setup(_options, nuxt) {
     const resolver = createResolver(import.meta.url);
 
-    // Absolute path to the layer's tailwind entry — this is the file that owns
-    // `@import "tailwindcss"` and therefore controls Tailwind's scanner.
-    const tailwindCssPath = resolver.resolve("../app/assets/css/tailwind.css");
+    // 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, "/");
 
-    // The consuming app's content directory.  We convert to forward-slashes so
-    // the injected @source glob works on Windows too.
-    const contentDir = joinURL(nuxt.options.rootDir, "content").replace(/\\/g, "/");
+    // Absolute paths that Tailwind needs to scan.
+    const rootDir = nuxt.options.rootDir.replace(/\\/g, "/");
+    const layerAppDir = resolver.resolve("../app").replace(/\\/g, "/");
 
-    // Inject `@source <contentDir>/**/*` into tailwind.css
+    // 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`.
     addVitePlugin({
       name: "docd:inject-tailwind-sources",
       enforce: "pre",
-      transform(code: string, id: string) {
-        if (id.split("?")[0] !== tailwindCssPath) return null;
-        return {
-          code: `${code}\n@source ${JSON.stringify(`${contentDir}/**/*`)};`,
-          map: null,
-        };
+      async load(id) {
+        const cleanId = id?.split("?")?.[0]?.replace(/\\/g, "/");
+        if (cleanId !== tailwindCssPath) return null;
+
+        const code = await readFile(tailwindCssPath, "utf8");
+        return [
+          code,
+          `@source ${JSON.stringify(`${rootDir}/**/*`)};`,
+          `@source ${JSON.stringify(`${layerAppDir}/**/*`)};`,
+        ].join("\n");
       },
     });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baybreezy/docd",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "A Nuxt layer for building documentation sites with UI Thing.",
   "repository": {
     "type": "git",