@baybreezy/docd 0.0.1

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

@@ -0,0 +1,181 @@
+<template>
+  <div data-slot="prose-pre-wrapper" :class="styles().wrapper({ class: $attrs?.class as any })">
+    <template v-if="hasFileName">
+      <div data-slot="prose-pre-file-name-wrapper" :class="styles().fileNameWrapper()">
+        <prose-smart-icon v-if="iconFromMeta" :name="iconFromMeta" class="size-4 shrink-0" />
+        <img
+          v-else-if="language || filename"
+          :src="getMaterialFileIcon(language! || filename!)"
+          :alt="language || filename"
+          class="size-4 shrink-0"
+        />
+
+        <p data-slot="prose-pre-file-name" :class="styles().fileName()">{{ fileNameEdited }}</p>
+      </div>
+    </template>
+    <div
+      v-if="!hideCopyButton"
+      class="absolute right-3.5 flex items-center justify-center"
+      :class="[hasFileName ? 'top-2.75' : 'top-3']"
+    >
+      <prose-code-copy :code @code-copied="onCopy" />
+    </div>
+    <ProseMermaid v-if="isMermaid" :code="code" @mermaid-error="onMermaidError">
+      <slot />
+    </ProseMermaid>
+    <pre v-else :class="[$attrs?.class, 'shadow-xs ring-1 ring-border/60']"><slot /></pre>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { getMaterialFileIcon } from "@baybreezy/file-extension-icon";
+  import { startCase } from "lodash-es";
+
+  const { page } = await useDocPage();
+  const route = useRoute();
+
+  const props = defineProps<{
+    /**
+     * The code content to display
+     */
+    code?: string;
+    /**
+     * The programming language of the code block
+     */
+    language?: string;
+    /**
+     * The filename to display in the header (if any)
+     */
+    filename?: string;
+    /**
+     * An array of line numbers to highlight
+     */
+    highlights?: Array<number>;
+    /**
+     * Additional meta information for the code block
+     */
+    meta?: string;
+    /**
+     * Optional icon name to display next to the filename
+     */
+    icon?: string;
+  }>();
+
+  /**
+   * Parse meta string and create a lowercase key map for easy checking
+   * Example: "noFormat hideHeader icon='lucide:code'" => Map { 'noformat' => true, 'hideheader' => true, 'icon' => 'lucide:code' }
+   */
+  const metaMap = computed(() => {
+    const map = new Map<string, string | boolean>();
+    if (!props.meta) return map;
+
+    // Split by spaces but preserve quoted values
+    const parts = props.meta.match(/(?:[^\s"']+|"[^"]*"|'[^']*')+/g) || [];
+
+    parts.forEach((part) => {
+      // Check if it's a key=value pair
+      const keyValueMatch = part.match(/^([^=]+)=(.+)$/);
+      if (keyValueMatch) {
+        const key = keyValueMatch[1]!.toLowerCase();
+        // Remove quotes from value if present
+        const value = keyValueMatch[2]!.replace(/^["']|["']$/g, "");
+        map.set(key, value);
+      } else {
+        // It's just a flag (boolean)
+        map.set(part.toLowerCase(), true);
+      }
+    });
+
+    return map;
+  });
+
+  const hideCopyButton = ref(false);
+  const noFormatMeta = computed(() => metaMap.value.has("noformat"));
+  const hideHeaderMeta = computed(
+    () => metaMap.value.has("hideheader") || metaMap.value.has("noheader")
+  );
+  const hasLinesInMeta = computed(() => metaMap.value.has("lines"));
+  const metaHasMermaid = computed(() => metaMap.value.has("mermaid"));
+
+  const iconFromMeta = computed(() => {
+    // First check if icon is passed as a direct prop
+    if (props.icon) return props.icon;
+    // Then check metaMap for icon key
+    const icon = metaMap.value.get("icon");
+    return typeof icon === "string" ? icon : undefined;
+  });
+
+  const fileNameEdited = computed(() => {
+    if (!props.filename) return;
+    if (noFormatMeta.value) return props.filename;
+
+    let processedName = props.filename;
+
+    // Check if it looks like a filename (ends with .[anything])
+    const hasFileExtension = /\.[^.]+$/.test(processedName);
+
+    if (hasFileExtension) {
+      // It's a filename - remove the extension
+      processedName = processedName.split(".").slice(0, -1).join(".");
+      // if we have something like .env or .gitignore, we might end up with an empty string
+      if (!processedName) {
+        processedName = props.filename;
+      }
+    }
+
+    // Clean up any extra spaces and apply startCase
+    return startCase(processedName.trim());
+  });
+
+  const hasFileName = computed(() => !!props.filename && !hideHeaderMeta.value);
+  const isMermaid = computed(() => props.language === "mermaid" || metaHasMermaid.value);
+
+  const onMermaidError = (errorMessage?: string) => {
+    if (errorMessage) {
+      hideCopyButton.value = true;
+    } else {
+      hideCopyButton.value = false;
+    }
+  };
+
+  const onCopy = () => {
+    // Track copied code event
+    useTrackEvent("copy_code", {
+      code_source: "inline",
+      code_language: props.language,
+      file_name: props.filename,
+      block_path: "N/A",
+      component: props.filename,
+      page_title: page.value?.title || "unknown",
+      page_path: route.path,
+      page_location: window.location.href,
+    });
+  };
+
+  const styles = tv({
+    slots: {
+      wrapper: [
+        "relative mt-3 rounded-lg border bg-muted/60 p-1.5 dark:bg-muted/10",
+        hasLinesInMeta.value && "show-line-number",
+      ],
+      fileNameWrapper: "not-prose flex items-center gap-2 p-2 pb-4",
+      fileName: "truncate text-sm font-medium text-ellipsis",
+    },
+  });
+</script>
+
+<style>
+  .show-line-number .line::before {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+    width: calc(var(--spacing) * 5);
+    display: inline-block;
+    text-align: center;
+    margin-right: calc(var(--spacing) * 4);
+    color: var(--muted-foreground);
+  }
+
+  .show-line-number .line:not(.diff)::before {
+    content: attr(line);
+  }
+</style>

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

@@ -0,0 +1,56 @@
+<template>
+  <TabsRoot v-model="tab">
+    <TabsList class="relative inline-flex items-center">
+      <UiTabsTrigger aria-label="Preview" :pill="false" value="preview"> Preview </UiTabsTrigger>
+      <UiTabsTrigger aria-label="Code" :pill="false" value="code"> Code </UiTabsTrigger>
+      <UiTabsIndicator class="px-3" />
+    </TabsList>
+    <LayoutGroup>
+      <AnimatePresence mode="wait">
+        <Motion
+          v-if="tab == 'preview'"
+          layout="position"
+          :initial="false"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :transition="{ duration: 0.2 }"
+        >
+          <TabsContent force-mount value="preview">
+            <div
+              class="mt-4 flex min-h-75 items-center justify-center rounded-lg border p-3 lg:p-10"
+              :class="[isDashed ? 'border-dashed' : '']"
+            >
+              <div class="mx-auto w-full" :class="[!props.prose ? 'not-prose' : '']">
+                <slot />
+              </div>
+            </div>
+          </TabsContent>
+        </Motion>
+        <Motion
+          v-else
+          layout="position"
+          :initial="{ opacity: 0 }"
+          :animate="{ opacity: 1 }"
+          :exit="{ opacity: 0 }"
+          :transition="{ duration: 0.2 }"
+        >
+          <TabsContent force-mount value="code">
+            <slot name="code" mdc-unwrap="p" />
+          </TabsContent>
+        </Motion>
+      </AnimatePresence>
+    </LayoutGroup>
+  </TabsRoot>
+</template>
+
+<script lang="ts" setup>
+  import { TabsContent, TabsList, TabsRoot } from "reka-ui";
+
+  const tab = ref("preview");
+
+  const props = defineProps<{
+    prose?: boolean;
+  }>();
+
+  const { isDashed } = useDocd();
+</script>

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

@@ -0,0 +1,54 @@
+<template>
+  <!-- Iconify Icons -->
+  <Icon v-if="checkIcon(name)" :name :size />
+  <!-- Emojis -->
+  <span
+    v-else-if="
+      /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(
+        name
+      )
+    "
+    :style="`font-size: ${size}px;`"
+    aria-hidden="true"
+    >{{ name }}</span
+  >
+  <!-- Link -->
+  <NuxtImg
+    v-else
+    :src="name"
+    :style="`width: ${size}px; height: ${size}px;`"
+    :class="['not-prose inline', $attrs.class]"
+  />
+</template>
+
+<script lang="ts">
+  import { stringToIcon, validateIconName } from "@iconify/utils";
+
+  export type SmartIconProps = {
+    /**
+     * This can be on of the following:
+     *
+     * - An [Iconify](https://icon-sets.iconify.design/) icon name, e.g. `mdi:home`
+     * - An emoji, e.g. `😀`
+     * - A link to an image, e.g. `https://example.com/icon.png`
+     */
+    name: string;
+    /**
+     * Size of the icon in pixels (default: 16)
+     * @default 16
+     */
+    size?: number;
+  };
+</script>
+
+<script setup lang="ts">
+  const { size = 16 } = defineProps<SmartIconProps>();
+
+  /**
+   * Check if the provided name is a valid Iconify icon name
+   */
+  function checkIcon(name: string): boolean {
+    if (name.includes("http") || name.startsWith("data:image/")) return false;
+    return validateIconName(stringToIcon(name));
+  }
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+  <div :class="styles({ class: normalizeClass(props.class) || undefined })">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { normalizeClass } from "vue";
+  import type { HtmlHTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<{
+      /** Additional CSS classes to apply to the step item */
+      class?: HtmlHTMLAttributes["class"];
+    }>(),
+    {}
+  );
+
+  const styles = tv({
+    base: "before:absolute before:-left-4 before:z-10 before:flex before:h-8 before:w-8 before:items-center before:justify-center before:rounded-full before:bg-secondary before:text-sm before:text-secondary-foreground before:content-[counter(step)] before:[counter-increment:step]",
+  });
+</script>

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

@@ -0,0 +1,22 @@
+<template>
+  <div :class="styles({ class: normalizeClass(props.class) || undefined })">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { normalizeClass } from "vue";
+  import type { HtmlHTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<{
+      /** Additional CSS classes to apply to the steps container */
+      class?: HtmlHTMLAttributes["class"];
+    }>(),
+    {}
+  );
+
+  const styles = tv({
+    base: "relative ml-4 border-l pl-7 [counter-reset:step]",
+  });
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <strong
+    data-slot="prose-strong"
+    :class="proseStrongStyles({ class: normalizeClass(_class) || undefined })"
+  >
+    <slot />
+  </strong>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseStrongProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseStrongStyles = tv({
+    base: "font-semibold text-inherit",
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseStrongProps>();
+</script>
+
+<style>
+  [data-slot="prose-strong"] + [data-slot="prose-strong"] {
+    margin-inline-start: 0.25em;
+  }
+</style>

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

@@ -0,0 +1,34 @@
+<template>
+  <div :class="proseTableStyles({ class: normalizeClass(_class) || undefined, isDashed })">
+    <table class="relative mt-0 mb-0 w-full overflow-hidden border-none" data-slot="prose-table">
+      <slot />
+    </table>
+  </div>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export type ProseTableProps = {
+    /**
+     * Additional classes for the parent element
+     */
+    class?: HTMLAttributes["class"];
+  };
+
+  export const proseTableStyles = tv({
+    base: "w-full overflow-y-auto rounded-md border not-last:mb-6",
+    variants: {
+      isDashed: {
+        true: "border-dashed",
+        false: "",
+      },
+    },
+  });
+</script>
+
+<script setup lang="ts">
+  const { class: _class } = defineProps<ProseTableProps>();
+  const { isDashed } = useDocd();
+</script>

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

@@ -0,0 +1,104 @@
+<template>
+  <render />
+</template>
+
+<script lang="ts">
+  import type { HTMLAttributes } from "vue";
+
+  import { ProseTabsInner } from "#components";
+
+  export type ProseTabsProps = {
+    /**
+     * The variant of the tabs
+     * @default 'separate'
+     */
+    variant?: "separate" | "card" | "line" | "combobox";
+    /**
+     * Whether to add padding around the tabs
+     * @default true
+     */
+    padded?: boolean;
+    /**
+     * Whether the tabs are in a stack (e.g. accordion)
+     * @default false
+     */
+    inStack?: boolean;
+    /**
+     * Disable the search functionality
+     * @default false
+     */
+    disableSearch?: boolean;
+    /**
+     * Placeholder text for the search input
+     * @default 'Search Tab...'
+     */
+    searchPlaceholder?: string;
+    /**
+     * Text to display when no tab is found
+     * @default 'No tab found.'
+     */
+    searchEmpty?: string;
+    /**
+     * Whether the combobox should take the full width of the container
+     * @default false
+     */
+    comboBoxFullWidth?: boolean;
+    /**
+     * A scope to sync the active tab state with other tab groups
+     */
+    sync?: string;
+    /**
+     * Additional classes to add to the wrapper div
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+
+<script setup lang="ts">
+  const {
+    variant = "separate",
+    padded = true,
+    inStack = false,
+    disableSearch = false,
+    searchPlaceholder = "Search Tab...",
+    searchEmpty = "No tab found.",
+    ...rest
+  } = defineProps<ProseTabsProps>();
+
+  const _slots = useSlots();
+  const { items: slotItems } = useDefaultSlotItems({
+    slots: _slots,
+    mapMeta: ({ props, index }) => ({
+      label: props.label ?? props.filename ?? `Tab ${index + 1}`,
+      icon: props?.icon,
+    }),
+  });
+
+  const slotsData = computed(() =>
+    slotItems.value.map(({ index, meta, props }) => ({
+      index,
+      label: meta.label,
+      icon: props.icon || meta.icon,
+    }))
+  );
+
+  /**
+   * Render function to pass slots as props to ProseTabsInner
+   */
+  function render() {
+    return h(
+      ProseTabsInner,
+      {
+        variant,
+        padded,
+        inStack,
+        disableSearch,
+        searchEmpty,
+        searchPlaceholder,
+        slotsData: slotsData.value,
+        ...rest,
+      },
+      () => slotItems.value.map(({ vnode }) => vnode)
+    );
+  }
+</script>