@baybreezy/docd 0.0.1

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

@@ -0,0 +1,113 @@
+<template>
+  <div
+    role="list"
+    data-slot="prose-icon-list"
+    :class="proseIconListStyles().base({ class: normalizeClass(props.class) || undefined })"
+  >
+    <div
+      v-for="item in slottedItems"
+      :key="item.key ?? item.index"
+      role="listitem"
+      :class="proseIconListStyles().item()"
+    >
+      <Icon
+        v-if="item.meta.icon"
+        data-slot="icon"
+        :name="item.meta.icon"
+        :class="proseIconListStyles().icon({ variant: item.meta.variant })"
+      />
+      <component :is="item.vnode" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+  import type { VariantProps } from "tailwind-variants";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseIconListProps = {
+    /**
+     * Additional classes for the list element
+     */
+    class?: HTMLAttributes["class"];
+    /**
+     * Default variant for all list items (can be overridden per item)
+     */
+    variant?: VariantProps<typeof proseIconListStyles>["variant"];
+    /**
+     * Default icon for all list items (can be overridden per item)
+     */
+    icon?: string;
+  };
+
+  type ListItemMeta = {
+    icon: string;
+    variant?: VariantProps<typeof proseIconListStyles>["variant"];
+  };
+
+  export const proseIconListStyles = tv({
+    slots: {
+      base: "ml-4 flex list-none flex-col gap-3",
+      item: "flex items-start gap-2 *:my-0! *:leading-normal **:[[role=list]]:mt-2 **:[[role=list]]:mb-2 [&>svg]:mt-1! has-[>*_code]:[&>svg]:mt-1!",
+      icon: "mt-0.5 inline-block size-4 shrink-0",
+    },
+    variants: {
+      variant: {
+        success: {
+          icon: "text-emerald-500",
+        },
+        error: {
+          icon: "text-destructive",
+        },
+        warning: {
+          icon: "text-yellow-500",
+        },
+        info: {
+          icon: "text-blue-500",
+        },
+        default: {
+          icon: "text-muted-foreground",
+        },
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  });
+</script>
+
+<script setup lang="ts">
+  const props = defineProps<ProseIconListProps>();
+
+  function getDefaultIcon(variant?: ProseIconListProps["variant"]): string {
+    if (props.icon) return props.icon;
+
+    switch (variant ?? props.variant) {
+      case "success":
+        return "lucide:circle-check";
+      case "error":
+        return "lucide:circle-x";
+      case "warning":
+        return "lucide:triangle-alert";
+      case "info":
+        return "lucide:info";
+      default:
+        return "radix-icons:dot-filled";
+    }
+  }
+
+  const { items: slottedItems } = useDefaultSlotItems<ListItemMeta>({
+    slots: useSlots(),
+    mapMeta({ props: itemProps }) {
+      // Each li can have its own icon and variant
+      const itemVariant = (itemProps.variant as ProseIconListProps["variant"]) ?? props.variant;
+      const itemIcon = (itemProps.icon as string) ?? getDefaultIcon(itemVariant);
+
+      return {
+        icon: itemIcon,
+        variant: itemVariant,
+      };
+    },
+  });
+</script>

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

@@ -0,0 +1,119 @@
+<template>
+  <DefineImg>
+    <NuxtImg
+      :src="refinedSrc"
+      :alt
+      :width
+      :height
+      :class="proseImgStyles({ lifted, zoom, class: normalizeClass(props.class) || undefined })"
+    />
+  </DefineImg>
+
+  <DialogRoot v-if="zoom">
+    <DialogTrigger class="block w-full">
+      <ReuseImg />
+    </DialogTrigger>
+    <DialogPortal>
+      <DialogOverlay
+        class="fixed inset-0 z-50 bg-background/80 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
+      />
+      <DialogContent
+        class="fixed top-1/2 left-1/2 z-50 grid -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-0 shadow-lg duration-200 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:rounded-lg"
+      >
+        <DialogTitle class="sr-only">{{ props.alt || "Image Preview" }}</DialogTitle>
+        <DialogDescription class="sr-only">{{ props.alt || "Image Preview" }}</DialogDescription>
+        <DialogClose>
+          <NuxtImg
+            :src="refinedSrc"
+            :alt
+            :width
+            :height
+            class="max-h-svh max-w-svw cursor-zoom-out md:rounded-lg"
+          />
+        </DialogClose>
+      </DialogContent>
+    </DialogPortal>
+  </DialogRoot>
+  <ReuseImg v-else />
+</template>
+
+<script lang="ts">
+  import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    DialogTrigger,
+  } from "reka-ui";
+  import { joinURL, withLeadingSlash, withTrailingSlash } from "ufo";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseImgProps = {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alt text for the image
+     */
+    alt?: string;
+    /**
+     * Width of the image
+     * @default "100%"
+     */
+    width?: string | number;
+    /**
+     * Height of the image
+     */
+    height?: string | number;
+    /**
+     * Whether the image should have a lifted style
+     */
+    lifted?: boolean;
+    /**
+     * Whether the image should have zoom effect on hover
+     * @default true
+     */
+    zoom?: boolean;
+    /**
+     * Additional CSS classes for the image element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseImgStyles = tv({
+    base: "w-full rounded-md object-cover",
+    variants: {
+      lifted: {
+        true: "rounded-lg border bg-card text-card-foreground shadow-xs",
+      },
+      zoom: {
+        true: "cursor-zoom-in",
+      },
+    },
+    defaultVariants: {
+      lifted: false,
+      zoom: true,
+    },
+  });
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<ProseImgProps>(), {
+    lifted: false,
+    zoom: true,
+    width: "100%",
+  });
+
+  const [DefineImg, ReuseImg] = createReusableTemplate();
+
+  const refinedSrc = computed(() => {
+    if (props.src?.startsWith("/") && !props.src.startsWith("//")) {
+      const _base = withLeadingSlash(withTrailingSlash(useRuntimeConfig().app.baseURL));
+      if (_base !== "/" && !props.src.startsWith(_base)) return joinURL(_base, props.src);
+    }
+    return props.src;
+  });
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <p
+    data-slot="prose-lead"
+    :class="proseLeadStyles({ class: normalizeClass(_class) || undefined })"
+  >
+    <slot />
+  </p>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseLeadProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseLeadStyles = tv({
+    base: "text-xl leading-7 text-pretty text-muted-foreground not-first:mt-6",
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseLeadProps>();
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <li data-slot="prose-li" :class="proseLiStyles({ class: normalizeClass(_class) || undefined })">
+    <slot mdc-unwrap="p" />
+  </li>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseListItemProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseLiStyles = tv({
+    base: "text-pretty [&>ol]:mt-2! [&>ul]:mt-2!",
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseListItemProps>();
+</script>

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

@@ -0,0 +1,127 @@
+<template>
+  <ProseCallout v-if="error" variant="error" title="Mermaid Chart Error" :description="error" />
+  <div v-else class="rounded-lg p-4 text-card-foreground not-first:mt-5 not-last:mb-5">
+    <div v-if="loading" class="flex items-center justify-center">
+      <div class="flex flex-col items-center gap-2 p-4">
+        <Icon name="lucide:loader-circle" class="size-6! animate-spin" />
+        <span class="text-sm text-muted-foreground">Rendering Chart</span>
+      </div>
+    </div>
+    <div
+      ref="mermaidContainer"
+      class="flex justify-center overflow-x-auto transition-all"
+      v-html="svgContent"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps<{
+    /** The Mermaid diagram definition code */
+    code?: string;
+  }>();
+
+  const mermaidContainer = useTemplateRef("mermaidContainer");
+  const svgContent = ref<string>("");
+  const error = ref<string | null>(null);
+  const loading = ref(true);
+  const hasRenderedOnce = ref(false);
+  const mermaidDefinition = ref("");
+
+  const colorMode = useColorMode();
+  const { $mermaidInstance, $mermaidInitConfig } = useNuxtApp();
+  const slots = useSlots();
+
+  const mermaidTheme = computed(() => (colorMode.value === "dark" ? "dark" : "default"));
+  // Generate unique IDs
+  const uniqueId = `mermaid-${Math.random().toString(36).substring(2, 9)}`;
+  /**
+   * Renders the Mermaid diagram with the current theme and configuration
+   */
+  async function renderMermaid() {
+    if (!$mermaidInstance) {
+      error.value = "Mermaid instance not initialized";
+      loading.value = false;
+      return;
+    }
+
+    try {
+      loading.value = true;
+      error.value = null;
+
+      // Get diagram definition from props or slot content
+      mermaidDefinition.value =
+        props.code?.trim() ||
+        slots
+          .default?.()
+          .map((vnode) => vnode.children)
+          .join("")
+          .trim() ||
+        "";
+
+      if (!mermaidDefinition.value) {
+        error.value = "No Mermaid definition provided";
+        loading.value = false;
+        return;
+      }
+
+      // Initialize Mermaid with current theme
+      $mermaidInstance.initialize({
+        ...$mermaidInitConfig,
+        theme: mermaidTheme.value,
+      });
+
+      await nextTick();
+
+      // Render the diagram with a unique ID
+      const { svg } = await $mermaidInstance.render(`mermaid-${uniqueId}`, mermaidDefinition.value);
+
+      svgContent.value = svg;
+      hasRenderedOnce.value = true;
+    } catch (e) {
+      console.error("Error rendering Mermaid chart:", e);
+      error.value = (e as any)?.message || String(e);
+    } finally {
+      loading.value = false;
+    }
+  }
+
+  useIntersectionObserver(
+    mermaidContainer,
+    ([entry]) => {
+      if (entry?.isIntersecting && !hasRenderedOnce.value) {
+        renderMermaid();
+      }
+    },
+    { threshold: 0.1 }
+  );
+
+  // Re-render when theme changes (only if already rendered once)
+  watch(mermaidTheme, () => {
+    if (hasRenderedOnce.value) {
+      renderMermaid();
+    }
+  });
+
+  // Re-render when code prop changes (only if already rendered once)
+  watch(
+    () => props.code,
+    () => {
+      if (hasRenderedOnce.value) {
+        renderMermaid();
+      }
+    }
+  );
+
+  const emit = defineEmits<{
+    mermaidError: [payload?: string];
+  }>();
+
+  // Watch error and emit event
+  watch(error, (newError) => {
+    if (newError) {
+      // Emit an event or handle the error as needed
+      emit("mermaidError", newError);
+    }
+  });
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <ol data-slot="prose-ol" :class="proseOlStyles({ class: normalizeClass(_class) || undefined })">
+    <slot mdc-unwrap="p" />
+  </ol>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseOlProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseOlStyles = tv({
+    base: "ml-4 list-decimal not-first:mt-6 not-last:mb-6 [&>li:not(:first-child)]:mt-2",
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseOlProps>();
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <p data-slot="prose-p" :class="prosePStyles({ class: normalizeClass(_class) || undefined })">
+    <slot />
+  </p>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProsePProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const prosePStyles = tv({
+    base: "leading-7 text-pretty not-first:mt-6",
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProsePProps>();
+</script>

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

@@ -0,0 +1,60 @@
+<template>
+  <MDC v-if="md" unwrap="p" :value="md" class="not-first:mt-5" />
+</template>
+
+<script setup lang="ts">
+  const props = withDefaults(
+    defineProps<{
+      /**
+       * Whether to render in a stack layout
+       * @default false
+       */
+      inStack?: boolean;
+      /**
+       * Package name to install
+       */
+      name?: string;
+      /**
+       * Sync identifier for syncing with other code groups
+       * @default "_pm"
+       */
+      sync?: string;
+      /**
+       * Add --save-dev flag for dev dependencies
+       * @default false
+       */
+      saveDev?: boolean;
+      /**
+       * Disable syncing between code groups
+       * @default false
+       */
+      noSync?: boolean;
+    }>(),
+    {
+      inStack: false,
+      sync: "_pm",
+      saveDev: false,
+      noSync: false,
+    }
+  );
+
+  const { packageManagers } = usePm();
+
+  const md = computed(() => {
+    const codeBlocks = packageManagers
+      .map((pm) => {
+        const command = props.name
+          ? `${pm.command}${pm.install}${props.saveDev ? pm.saveDev : ""}${props.name}`
+          : `${pm.command}${pm.installEmpty}`;
+
+        return `\`\`\`bash icon="${pm.icon}" noFormat hideHeader [${pm.name}]\n${command}\n\`\`\``;
+      })
+      .join("\n\n");
+
+    const attributes = [props.inStack && "in-stack", !props.noSync && `sync="${props.sync}"`]
+      .filter(Boolean)
+      .join(" ");
+
+    return `::prose-code-group${attributes ? `{${attributes}}` : ""}\n${codeBlocks}\n::`;
+  });
+</script>

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

@@ -0,0 +1,51 @@
+<template>
+  <MDC v-if="md" unwrap="p" :value="md" class="not-first:mt-5" />
+</template>
+
+<script setup lang="ts">
+  const props = withDefaults(
+    defineProps<{
+      /**
+       * Whether to render in a stack layout
+       * @default false
+       */
+      inStack?: boolean;
+      /**
+       * Script name to run (e.g., "dev", "build", "test")
+       */
+      script: string;
+      /**
+       * Sync identifier for syncing with other code groups
+       * @default "_pm"
+       */
+      sync?: string;
+      /**
+       * Disable syncing between code groups
+       * @default false
+       */
+      noSync?: boolean;
+    }>(),
+    {
+      inStack: false,
+      sync: "_pm",
+      noSync: false,
+    }
+  );
+
+  const { packageManagers } = usePm();
+
+  const md = computed(() => {
+    const codeBlocks = packageManagers
+      .map((pm) => {
+        const command = `${pm.command}${pm.run}${props.script}`;
+        return `\`\`\`bash icon="${pm.icon}" noFormat hideHeader [${pm.name}]\n${command}\n\`\`\``;
+      })
+      .join("\n\n");
+
+    const attributes = [props.inStack && "in-stack", !props.noSync && `sync="${props.sync}"`]
+      .filter(Boolean)
+      .join(" ");
+
+    return `::prose-code-group${attributes ? `{${attributes}}` : ""}\n${codeBlocks}\n::`;
+  });
+</script>

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

@@ -0,0 +1,56 @@
+<template>
+  <MDC unwrap="p" :value="md" class="not-first:mt-5" v-if="md" />
+</template>
+
+<script setup lang="ts">
+  const props = withDefaults(
+    defineProps<{
+      /**
+       * Whether to render in a stack layout
+       * @default false
+       */
+      inStack?: boolean;
+      /**
+       * Command to execute (e.g., "create-vue@latest", "nuxi init")
+       */
+      command: string;
+      /**
+       * Sync identifier for syncing with other code groups
+       * @default "_pm"
+       */
+      sync?: string;
+      /**
+       * Disable syncing between code groups
+       * @default false
+       */
+      noSync?: boolean;
+    }>(),
+    {
+      inStack: false,
+      sync: "_pm",
+      noSync: false,
+    }
+  );
+
+  const { packageManagers } = usePm();
+
+  const md = computed(() => {
+    const codeBlocks = packageManagers
+      .map((pm) => {
+        const command = `${pm.x}${props.command}`;
+        return `\`\`\`bash icon="${pm.icon}" noFormat hideHeader [${pm.name}]\n${command}\n\`\`\``;
+      })
+      .join("\n\n");
+
+    const attributes = [
+      props.inStack && "in-stack",
+      !props.noSync && `sync="${props.sync}"`,
+      `noFormat`,
+      "hideHeaderMeta",
+    ]
+      .filter(Boolean)
+      .join(" ");
+
+    return `::prose-code-group${attributes ? `{${attributes}}` : ""}\n${codeBlocks}\n::`;
+  });
+</script>