@baybreezy/docd 0.3.1 → 0.3.3

package/app/components/Ui/Button.vue

@@ -46,7 +46,7 @@
   import { normalizeClass } from "vue";
   import type { HtmlHTMLAttributes } from "vue";
 
-  import type { NuxtLinkProps } from "#app/components";
+  import type { NuxtLinkProps } from "#app";
 
   /** Exported button styles that can be used by other components. */
   export const buttonStyles = tv({
@@ -146,6 +146,12 @@
     loadingIcon: "line-md:loading-loop",
     iconPlacement: "left",
     loading: false,
+    noRel: undefined,
+    prefetch: undefined,
+    noPrefetch: undefined,
+    replace: undefined,
+    external: undefined,
+    custom: undefined,
   });
 
   const elementType = computed(() => {

package/app/components/content/prose/ProseA.global.vue

@@ -2,13 +2,14 @@
   <NuxtLink
     data-slot="prose-a"
     v-bind="rest"
-    :class="proseAStyles({ class: normalizeClass(_class) || undefined })"
+    :class="proseAStyles({ class: normalizeClass(props.class) || undefined })"
   >
     <slot />
   </NuxtLink>
 </template>
 
 <script lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
   import { normalizeClass } from "vue";
   import type { HTMLAttributes } from "vue";
 
@@ -27,5 +28,20 @@
 </script>
 
 <script setup lang="ts">
-  const { class: _class, ...rest } = defineProps<ProseAProps>();
+  const props = withDefaults(
+    defineProps<
+      ProseAProps & {
+        custom?: true | undefined;
+      }
+    >(),
+    {
+      noRel: undefined,
+      prefetch: undefined,
+      noPrefetch: undefined,
+      replace: undefined,
+      external: undefined,
+      custom: undefined,
+    }
+  );
+  const rest = reactiveOmit(props, "class");
 </script>

package/app/components/content/prose/ProseCard.global.vue

@@ -69,7 +69,14 @@
 </script>
 
 <script lang="ts" setup>
-  const props = withDefaults(defineProps<ProseCardProps>(), {});
+  const props = withDefaults(defineProps<ProseCardProps>(), {
+    noRel: undefined,
+    prefetch: undefined,
+    noPrefetch: undefined,
+    replace: undefined,
+    external: undefined,
+    custom: undefined,
+  });
 
   defineSlots<{
     /**

package/app/components/content/prose/ProsePmInstall.global.vue

@@ -1,5 +1,12 @@
 <template>
-  <MDC v-if="md" unwrap="p" :value="md" class="not-first:mt-5" />
+  <MDC
+    v-if="md"
+    :key="mdCacheKey"
+    :cache-key="mdCacheKey"
+    unwrap="p"
+    :value="md"
+    class="not-first:mt-5"
+  />
 </template>
 
 <script setup lang="ts">
@@ -39,6 +46,7 @@
   );
 
   const { packageManagers } = usePm();
+  const route = useRoute();
 
   const md = computed(() => {
     const codeBlocks = packageManagers
@@ -57,4 +65,6 @@
 
     return `::prose-code-group${attributes ? `{${attributes}}` : ""}\n${codeBlocks}\n::`;
   });
+
+  const mdCacheKey = computed(() => `prose-pm-install:${route.path}:${props.name ?? ""}`);
 </script>

package/app/components/content/prose/ProsePmRun.global.vue

@@ -1,5 +1,12 @@
 <template>
-  <MDC v-if="md" unwrap="p" :value="md" class="not-first:mt-5" />
+  <MDC
+    v-if="md"
+    :key="mdCacheKey"
+    :cache-key="mdCacheKey"
+    unwrap="p"
+    :value="md"
+    class="not-first:mt-5"
+  />
 </template>
 
 <script setup lang="ts">
@@ -33,6 +40,7 @@
   );
 
   const { packageManagers } = usePm();
+  const route = useRoute();
 
   const md = computed(() => {
     const codeBlocks = packageManagers
@@ -48,4 +56,6 @@
 
     return `::prose-code-group${attributes ? `{${attributes}}` : ""}\n${codeBlocks}\n::`;
   });
+
+  const mdCacheKey = computed(() => `prose-pm-run:${route.path}:${props.script}`);
 </script>

package/app/components/content/prose/ProsePmX.global.vue

@@ -1,5 +1,12 @@
 <template>
-  <MDC unwrap="p" :value="md" class="not-first:mt-5" v-if="md" />
+  <MDC
+    v-if="md"
+    :key="mdCacheKey"
+    :cache-key="mdCacheKey"
+    unwrap="p"
+    :value="md"
+    class="not-first:mt-5"
+  />
 </template>
 
 <script setup lang="ts">
@@ -33,6 +40,7 @@
   );
 
   const { packageManagers } = usePm();
+  const route = useRoute();
 
   const md = computed(() => {
     const codeBlocks = packageManagers
@@ -53,4 +61,6 @@
 
     return `::prose-code-group${attributes ? `{${attributes}}` : ""}\n${codeBlocks}\n::`;
   });
+
+  const mdCacheKey = computed(() => `prose-pm-x:${route.path}:${props.command}`);
 </script>

package/modules/config.ts

@@ -30,6 +30,7 @@ export default defineNuxtModule({
         "vaul-vue",
         "@vue/devtools-core",
         "@vue/devtools-kit",
+        "nuxt-studio > slugify",
       ],
     });
 

package/modules/prose-component-meta.ts

@@ -15,6 +15,7 @@ import {
   readGeneratedProseComponentMeta,
   resolveProseComponentPaths,
 } from "../utils/generate-prose-component-meta";
+import { rewritePackageManagerMarkdown } from "../utils/package-manager-markdown";
 
 const log = logger.withTag("Docd");
 
@@ -74,6 +75,12 @@ export default defineNuxtModule({
 
     await regenerate();
 
+    nuxt.hook("content:file:beforeParse", (event) => {
+      if (typeof event.file.body === "string" && event.file.extension === ".md") {
+        event.file.body = rewritePackageManagerMarkdown(event.file.body);
+      }
+    });
+
     nuxt.hook("content:file:afterParse", async (event) => {
       const context = {
         rootDir: nuxt.options.rootDir,

package/nuxt.config.ts

@@ -67,6 +67,7 @@ export default defineNuxtConfig({
       markdown: {
         toc: { depth: 4, searchDepth: 4 },
         highlight: { langs },
+        __docdPackageManagerTransform: 2,
       },
     },
     experimental: { sqliteConnector: "native" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baybreezy/docd",
-  "version": "0.3.1",
+  "version": "0.3.3",
   "description": "A Nuxt layer for building documentation sites with UI Thing.",
   "repository": {
     "type": "git",
@@ -33,36 +33,36 @@
     "@baybreezy/file-extension-icon": "^0.0.5",
     "@iconify/utils": "^3.1.4",
     "@morev/vue-transitions": "^3.0.5",
-    "@nuxt/content": "3.15.0",
+    "@nuxt/content": "3.15.2",
     "@nuxt/fonts": "^0.14.0",
-    "@nuxt/icon": "^2.3.1",
-    "@nuxt/image": "2.0.0",
-    "@nuxt/kit": "^4.5.0",
+    "@nuxt/icon": "^2.5.1",
+    "@nuxt/image": "2.1.0",
+    "@nuxt/kit": "^4.5.2",
     "@nuxtjs/color-mode": "^4.0.1",
-    "@nuxtjs/mcp-toolkit": "^0.18.0",
-    "@nuxtjs/mdc": "^0.22.2",
-    "@nuxtjs/robots": "^6.1.2",
+    "@nuxtjs/mcp-toolkit": "^0.19.0",
+    "@nuxtjs/mdc": "^0.23.1",
+    "@nuxtjs/robots": "^6.2.0",
     "@tailwindcss/forms": "^0.5.11",
     "@tailwindcss/typography": "^0.5.20",
     "@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",
+    "@takumi-rs/core": "^2.12.0",
+    "@vueuse/core": "^14.4.0",
+    "@vueuse/nuxt": "^14.4.0",
+    "better-sqlite3": "^13.0.3",
     "defu": "^6.1.7",
     "git-url-parse": "^16.1.0",
     "lodash-es": "^4.18.1",
-    "mermaid": "^11.16.0",
-    "motion-v": "^2.3.0",
+    "mermaid": "^11.17.1",
+    "motion-v": "^2.4.0",
     "nuxt-component-meta": "^0.18.0",
-    "nuxt-gtag": "4.1.0",
+    "nuxt-gtag": "5.0.0",
     "nuxt-llms": "^0.2.0",
-    "nuxt-og-image": "^6.7.2",
+    "nuxt-og-image": "^6.7.8",
     "pkg-types": "^2.3.1",
-    "reka-ui": "^2.10.1",
-    "shiki": "^4.3.1",
+    "reka-ui": "^2.10.3",
+    "shiki": "^4.4.3",
     "tailwind-merge": "^3.6.0",
-    "tailwind-variants": "^3.2.2",
+    "tailwind-variants": "^3.3.1",
     "tailwindcss": "^4.3.3",
     "tw-animate-css": "^1.4.0",
     "ufo": "^1.6.4",
@@ -73,12 +73,12 @@
   },
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
-    "nuxt": "^4.5.0",
-    "typescript": "^6.0.3",
+    "nuxt": "^4.5.2",
+    "typescript": "6.0.3",
     "vue": "latest",
     "vue-router": "^5.2.0"
   },
-  "packageManager": "bun@1.3.14",
+  "packageManager": "bun@1.4.0",
   "trustedDependencies": [
     "@morev/vue-transitions",
     "@parcel/watcher",

package/utils/package-manager-markdown.ts

@@ -0,0 +1,226 @@
+type PackageManagerTag = "prose-pm-install" | "prose-pm-run" | "prose-pm-x";
+
+type PackageManagerProps = Record<string, string | boolean>;
+
+const PACKAGE_MANAGERS = [
+  {
+    name: "npm",
+    command: "npm ",
+    install: "i ",
+    installEmpty: "install",
+    run: "run ",
+    x: "npx ",
+    saveDev: "-D ",
+    icon: "material-icon-theme:npm",
+  },
+  {
+    name: "pnpm",
+    command: "pnpm ",
+    install: "i ",
+    installEmpty: "install",
+    run: "run ",
+    x: "pnpm dlx ",
+    saveDev: "-D ",
+    icon: "material-icon-theme:pnpm",
+  },
+  {
+    name: "bun",
+    command: "bun ",
+    install: "add ",
+    installEmpty: "install",
+    run: "run ",
+    x: "bun x ",
+    saveDev: "-d ",
+    icon: "material-icon-theme:bun",
+  },
+  {
+    name: "yarn",
+    command: "yarn ",
+    install: "add ",
+    installEmpty: "install",
+    run: "run ",
+    x: "yarn dlx ",
+    saveDev: "-D ",
+    icon: "material-icon-theme:yarn",
+  },
+] as const;
+
+const PACKAGE_MANAGER_LINE_RE = /^(\s*)(:{1,})(prose-pm-(?:install|run|x))(?:\{([^}]*)\})?\s*$/;
+const FENCE_RE = /^\s*(`{3,}|~{3,})/;
+const ATTRIBUTE_RE = /(?::?[\w-]+)(?:=(?:"[^"]*"|'[^']*'|[^\s}]+))?/g;
+
+function escapeMdcAttribute(value: string) {
+  return value.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+}
+
+function normalizePropName(name: string) {
+  return name.replace(/^:/, "").replace(/-([a-z])/g, (_, char: string) => char.toUpperCase());
+}
+
+function parseProps(source = "") {
+  const props: PackageManagerProps = {};
+  const attributes = source.match(ATTRIBUTE_RE) || [];
+
+  for (const attribute of attributes) {
+    const [rawName, ...rawValueParts] = attribute.split("=");
+    const name = normalizePropName(rawName);
+    const rawValue = rawValueParts.join("=");
+
+    if (!rawValue) {
+      props[name] = true;
+      continue;
+    }
+
+    props[name] = rawValue.replace(/^["']|["']$/g, "");
+  }
+
+  return props;
+}
+
+function stringProp(props: PackageManagerProps, name: string) {
+  const value = props[name];
+  return typeof value === "string" ? value : undefined;
+}
+
+function booleanProp(props: PackageManagerProps, name: string) {
+  const value = props[name];
+
+  if (typeof value === "boolean") {
+    return value;
+  }
+
+  return value === "" || value === "true";
+}
+
+function buildCodeFence(label: string, icon: string, command: string) {
+  return `\`\`\`bash icon="${icon}" noFormat hideHeader [${label}]\n${command}\n\`\`\``;
+}
+
+function buildCodeGroupSource(tag: PackageManagerTag, props: PackageManagerProps) {
+  const inStack = booleanProp(props, "inStack");
+  const noSync = booleanProp(props, "noSync");
+  const sync = stringProp(props, "sync") || "_pm";
+
+  const codeBlocks = PACKAGE_MANAGERS.map((pm) => {
+    if (tag === "prose-pm-install") {
+      const name = stringProp(props, "name");
+      const saveDev = booleanProp(props, "saveDev");
+      const command = name
+        ? `${pm.command}${pm.install}${saveDev ? pm.saveDev : ""}${name}`
+        : `${pm.command}${pm.installEmpty}`;
+
+      return buildCodeFence(pm.name, pm.icon, command);
+    }
+
+    if (tag === "prose-pm-run") {
+      const script = stringProp(props, "script");
+
+      if (!script) {
+        return undefined;
+      }
+
+      return buildCodeFence(pm.name, pm.icon, `${pm.command}${pm.run}${script}`);
+    }
+
+    const command = stringProp(props, "command");
+
+    if (!command) {
+      return undefined;
+    }
+
+    return buildCodeFence(pm.name, pm.icon, `${pm.x}${command}`);
+  }).filter((block): block is string => Boolean(block));
+
+  if (!codeBlocks.length) {
+    return;
+  }
+
+  const attributes = [
+    inStack && "in-stack",
+    !noSync && `sync="${escapeMdcAttribute(sync)}"`,
+    tag === "prose-pm-x" && "noFormat",
+    tag === "prose-pm-x" && "hideHeaderMeta",
+  ]
+    .filter(Boolean)
+    .join(" ");
+
+  return `::prose-code-group${attributes ? `{${attributes}}` : ""}\n${codeBlocks.join("\n\n")}\n::`;
+}
+
+function indentBlock(block: string, indent: string) {
+  return block
+    .split("\n")
+    .map((line) => (line ? `${indent}${line}` : line))
+    .join("\n");
+}
+
+function nextNonEmptyLineIndex(lines: string[], start: number) {
+  for (let index = start; index < lines.length; index += 1) {
+    if (lines[index].trim()) {
+      return index;
+    }
+  }
+}
+
+export function rewritePackageManagerMarkdown(markdown: string) {
+  const lines = markdown.split("\n");
+  const output: string[] = [];
+  const skipLines = new Set<number>();
+  let activeFence: string | undefined;
+  let changed = false;
+
+  for (let index = 0; index < lines.length; index += 1) {
+    const line = lines[index];
+
+    if (skipLines.has(index)) {
+      changed = true;
+      continue;
+    }
+
+    const fence = line.match(FENCE_RE)?.[1];
+    if (fence && (!activeFence || fence[0] === activeFence[0])) {
+      activeFence = activeFence ? undefined : fence;
+      output.push(line);
+      continue;
+    }
+
+    if (activeFence) {
+      output.push(line);
+      continue;
+    }
+
+    const match = line.match(PACKAGE_MANAGER_LINE_RE);
+
+    if (!match) {
+      output.push(line);
+      continue;
+    }
+
+    const [, indent, marker, tag, propsSource] = match as [
+      string,
+      string,
+      string,
+      PackageManagerTag,
+      string | undefined,
+    ];
+    const source = buildCodeGroupSource(tag, parseProps(propsSource));
+
+    if (!source) {
+      output.push(line);
+      continue;
+    }
+
+    output.push(indentBlock(source, indent));
+    changed = true;
+
+    if (marker.length > 1) {
+      const closeIndex = nextNonEmptyLineIndex(lines, index + 1);
+
+      if (closeIndex !== undefined && lines[closeIndex].trim() === marker) {
+        skipLines.add(closeIndex);
+      }
+    }
+  }
+
+  return changed ? output.join("\n") : markdown;
+}