@lupinum/ginko-docs 0.2.2

package/app/components/mdc/MdcCodeGroup.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import type { VNode } from "vue";
+import { Comment, cloneVNode, computed, h, ref, resolveComponent, useSlots } from "vue";
+import { useClipboard } from "@vueuse/core";
+import { useI18n } from "#imports";
+import { cn } from "../../utils";
+
+type CodeBlockProps = {
+  code?: string;
+  filename?: string | null;
+  language?: string | null;
+  meta?: string | null;
+};
+
+type CodeGroupItem = {
+  code: string;
+  icon?: string;
+  label: string;
+  node: VNode;
+  value: string;
+};
+
+const slots = useSlots();
+const activeValue = ref("");
+const { copy, copied } = useClipboard();
+const { t } = useI18n();
+
+const PACKAGE_ICONS: Record<string, string> = {
+  bun: "logos:bun",
+  npm: "logos:npm-icon",
+  pnpm: "logos:pnpm",
+  yarn: "logos:yarn",
+};
+
+function isRenderableNode(node: VNode) {
+  return node.type !== Comment;
+}
+
+function textFromNode(input: unknown): string {
+  if (typeof input === "string") return input;
+  if (Array.isArray(input)) return input.map(textFromNode).join("");
+  if (input && typeof input === "object" && "children" in input) {
+    return textFromNode((input as VNode).children);
+  }
+
+  return "";
+}
+
+function cleanLabel(input: string | null | undefined): string {
+  return (
+    input
+      ?.trim()
+      .replace(/^\[(.*)]$/, "$1")
+      .trim() || ""
+  );
+}
+
+function labelFromMeta(meta: string | null | undefined): string {
+  const match = meta?.match(/\[([^\]]+)]/);
+  return cleanLabel(match?.[1]);
+}
+
+function nodeProps(node: VNode): CodeBlockProps {
+  return (node.props || {}) as CodeBlockProps;
+}
+
+function nodeLabel(node: VNode, index: number): string {
+  const props = nodeProps(node);
+
+  return (
+    cleanLabel(props.filename) ||
+    labelFromMeta(props.meta) ||
+    cleanLabel(props.language) ||
+    `Code ${index + 1}`
+  );
+}
+
+const items = computed<CodeGroupItem[]>(() =>
+  (slots.default?.() || []).filter(isRenderableNode).map((node, index) => {
+    const label = nodeLabel(node, index);
+    const value = `${label}-${index}`;
+    const normalizedLabel = label.toLowerCase();
+    const props = nodeProps(node);
+
+    return {
+      code: props.code || textFromNode(node.children),
+      icon: PACKAGE_ICONS[normalizedLabel],
+      label,
+      node,
+      value,
+    };
+  }),
+);
+
+const activeItem = computed(() => {
+  const current = items.value.find((item) => item.value === activeValue.value);
+  return current || items.value[0];
+});
+
+function selectItem(value: string) {
+  activeValue.value = value;
+}
+
+async function copyActiveCode() {
+  await copy(activeItem.value?.code || "");
+}
+
+function renderCodeGroup() {
+  if (!items.value.length) return null;
+  const Icon = resolveComponent("Icon");
+
+  return h(
+    "div",
+    {
+      class: "content-codegroup not-prose group",
+    },
+    [
+      h("div", { class: "content-codegroup-header" }, [
+        h(
+          "div",
+          {
+            class: "content-codegroup-tabs",
+            role: "tablist",
+          },
+          items.value.map((item) =>
+            h(
+              "button",
+              {
+                key: item.value,
+                type: "button",
+                role: "tab",
+                "aria-selected": activeItem.value?.value === item.value ? "true" : "false",
+                class: cn(
+                  "content-codegroup-tab",
+                  activeItem.value?.value === item.value && "content-codegroup-tab-active",
+                ),
+                onClick: () => selectItem(item.value),
+              },
+              [
+                item.icon
+                  ? h(Icon, {
+                      name: item.icon,
+                      class: "content-codegroup-tab-icon",
+                      "aria-hidden": "true",
+                    })
+                  : null,
+                item.label,
+              ],
+            ),
+          ),
+        ),
+        h(
+          "button",
+          {
+            type: "button",
+            class: "content-codeblock-copy-button content-codegroup-copy-button",
+            "aria-label": copied.value ? t("docs.copiedText") : t("docs.copyText"),
+            onClick: copyActiveCode,
+          },
+          [
+            h(Icon, {
+              name: copied.value ? "lucide:check" : "lucide:clipboard",
+              class: "size-3.5",
+              "aria-hidden": "true",
+            }),
+          ],
+        ),
+      ]),
+      h(
+        "div",
+        {
+          class: "content-codegroup-panels",
+        },
+        items.value.map((item) =>
+          h(
+            "div",
+            {
+              key: item.value,
+              role: "tabpanel",
+              style: activeItem.value?.value === item.value ? undefined : { display: "none" },
+            },
+            [cloneVNode(item.node, { inGroup: true })],
+          ),
+        ),
+      ),
+    ],
+  );
+}
+</script>
+
+<template>
+  <component :is="renderCodeGroup" />
+</template>

package/app/components/mdc/MdcColumn.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { computed, inject, nextTick, onMounted, ref, type HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+type ValueProp<T extends string> = T | { value?: T | string };
+type ColumnSize = "sm" | "md" | "lg";
+
+const props = withDefaults(
+  defineProps<{
+    size?: ValueProp<ColumnSize>;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    size: "md",
+  },
+);
+
+const parentLayoutType = inject(
+  "mdc-layout-type",
+  computed(() => "default"),
+);
+
+const sizeValue = computed<ColumnSize>(() => {
+  if (typeof props.size === "string") return props.size;
+  return (props.size?.value as ColumnSize | undefined) ?? "md";
+});
+
+const columnSizeClass = {
+  sm: "content-layout-column-sm",
+  md: "content-layout-column-md",
+  lg: "content-layout-column-lg",
+} as const;
+
+const isLastColumn = ref(false);
+const columnRef = ref<HTMLElement | null>(null);
+
+onMounted(() => {
+  nextTick(() => {
+    if (columnRef.value?.parentElement) {
+      const siblings = Array.from(columnRef.value.parentElement.children);
+      isLastColumn.value = siblings.indexOf(columnRef.value) === siblings.length - 1;
+    }
+  });
+});
+
+const showDivider = computed(
+  () => !isLastColumn.value && ["border", "border-dashed"].includes(parentLayoutType.value),
+);
+</script>
+
+<template>
+  <div
+    ref="columnRef"
+    :class="
+      cn(
+        'content-layout-column',
+        columnSizeClass[sizeValue],
+        showDivider && 'content-layout-column-divider',
+        showDivider &&
+          parentLayoutType === 'border-dashed' &&
+          'content-layout-column-divider-dashed',
+        props.class,
+      )
+    "
+  >
+    <div class="content-layout-column-inner">
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/mdc/MdcDocImg.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { computed } from "vue";
+
+/**
+ * Wrap standalone `![alt](url)` lines in markdown with this block so Comark can
+ * keep the image outside paragraph wrappers.
+ * Avoids invalid `<p><figure>...</figure></p>` and hydration mismatches.
+ *
+ * @example
+ * ::doc-img
+ * ![Alt text](https://shadcn-starter.ginko-content.dev/images/example.jpg)
+ * ::
+ */
+const props = withDefaults(defineProps<{ bleed?: boolean | string }>(), { bleed: undefined });
+
+const shouldBleed = computed(
+  () => props.bleed === true || props.bleed === "true" || props.bleed === "outside",
+);
+</script>
+
+<template>
+  <div class="content-doc-img" :data-bleed="shouldBleed ? 'true' : undefined">
+    <slot unwrap="p" />
+  </div>
+</template>

package/app/components/mdc/MdcDropcap.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, type CSSProperties } from "vue";
+import { cn } from "../../utils";
+import type { HTMLAttributes } from "vue";
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Drop cap spans this many line boxes (`initial-letter` size / sink).
+     * Markdown props may arrive as strings.
+     */
+    lines?: number | string;
+    class?: HTMLAttributes["class"];
+  }>(),
+  { lines: 2 },
+);
+
+const lineCount = computed(() => {
+  const n = Math.round(Number(props.lines));
+  if (Number.isFinite(n) && n >= 2 && n <= 4) return n;
+  return 2;
+});
+
+const dropcapStyle = computed(
+  (): CSSProperties => ({
+    "--mdc-dropcap-lines": String(lineCount.value),
+  }),
+);
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'mdc-dropcap content-prose content-prose-trim not-prose my-6 text-pretty [&>p]:text-muted-foreground',
+        '[&>p:not(:first-of-type)]:mt-4',
+        '[&>p:first-of-type]:flow-root',
+        props.class,
+      )
+    "
+    :style="dropcapStyle"
+  >
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.mdc-dropcap {
+  --mdc-dropcap-lines: 2;
+}
+
+.mdc-dropcap :deep(p:first-of-type)::first-letter {
+  font-weight: 600;
+  color: var(--foreground);
+  margin-inline-end: 0.15em;
+}
+
+/* CSS Inline Layout 3: typographic alignment vs float hacks (Chrome 110+, Safari + webkit prefix). */
+@supports (-webkit-initial-letter: 2) or (initial-letter: 1 1) {
+  .mdc-dropcap :deep(p:first-of-type)::first-letter {
+    -webkit-initial-letter: var(--mdc-dropcap-lines);
+    initial-letter: var(--mdc-dropcap-lines);
+  }
+}
+
+/* Firefox and legacy: float plus glyph height approximates N line boxes (`lh` ties to paragraph leading). */
+@supports (not ((-webkit-initial-letter: 2) or (initial-letter: 1 1))) {
+  .mdc-dropcap :deep(p:first-of-type)::first-letter {
+    float: left;
+    line-height: 1;
+    margin-top: 0.08em;
+    margin-bottom: -0.06em;
+    font-size: calc(var(--mdc-dropcap-lines) * 1.325em);
+  }
+
+  @supports (font-size: 1lh) {
+    .mdc-dropcap :deep(p:first-of-type)::first-letter {
+      font-size: calc(var(--mdc-dropcap-lines) * 1lh);
+      margin-top: 0.05em;
+      margin-bottom: -0.06em;
+    }
+  }
+}
+</style>

package/app/components/mdc/MdcError.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import MdcCallout from "./MdcCallout.vue";
+
+const props = defineProps<{
+  title?: string;
+  icon?: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <MdcCallout :title="title" :icon="icon" type="error" :class="props.class">
+    <slot />
+  </MdcCallout>
+</template>

package/app/components/mdc/MdcField.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { inject } from "vue";
+
+const MDC_FIELD_GROUP = Symbol.for("mdc.fieldGroup");
+const inFieldGroup = inject(MDC_FIELD_GROUP, false);
+
+defineProps<{
+  name: string;
+  type?: string;
+  required?: boolean;
+  description?: string;
+  defaultValue?: string;
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      inFieldGroup
+        ? 'not-prose flex flex-col gap-0 rounded-none border-0 bg-transparent py-0 text-card-foreground shadow-none ring-0 outline-none'
+        : 'not-prose my-4 flex flex-col gap-0 rounded-xl border bg-card py-0 text-card-foreground shadow-xs'
+    "
+  >
+    <div data-slot="card-content" class="space-y-4 px-6 py-6">
+      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
+        <div class="flex flex-wrap items-center gap-2">
+          <code class="relative rounded-md bg-muted px-1 font-sans font-normal text-foreground">
+            {{ name }}
+          </code>
+
+          <span
+            v-if="required"
+            class="inline-flex items-center rounded-full border border-transparent bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground"
+          >
+            Required
+          </span>
+        </div>
+
+        <span v-if="type" class="font-mono text-sm text-muted-foreground sm:ml-auto">
+          {{ type }}
+        </span>
+      </div>
+
+      <div class="content-prose content-prose-trim text-muted-foreground">
+        <slot v-if="$slots.default" unwrap="p" />
+        <span v-else-if="description">{{ description }}</span>
+      </div>
+    </div>
+
+    <div
+      v-if="defaultValue"
+      data-slot="card-footer"
+      class="flex flex-wrap items-center gap-2 border-t border-border pb-6 text-sm"
+    >
+      <span class="font-medium text-foreground">Default:</span>
+      <code class="relative rounded-md bg-muted px-1 font-sans font-normal text-muted-foreground">
+        {{ defaultValue }}
+      </code>
+    </div>
+  </div>
+</template>

package/app/components/mdc/MdcFieldGroup.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { provide } from "vue";
+
+const MDC_FIELD_GROUP = Symbol.for("mdc.fieldGroup");
+
+provide(MDC_FIELD_GROUP, true);
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    class="not-prose my-4 flex flex-col gap-0 overflow-hidden rounded-xl border bg-card py-0 text-card-foreground shadow-xs"
+  >
+    <div class="flex flex-col divide-y divide-border">
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/mdc/MdcFigure.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  src?: string;
+  alt?: string;
+  caption?: string;
+  width?: string | number;
+  height?: string | number;
+  bleed?: boolean | string;
+  aspect?: "auto" | "video" | "wide" | "square" | "portrait";
+  fit?: "cover" | "contain";
+  class?: HTMLAttributes["class"];
+}>();
+
+const shouldBleed = computed(
+  () => props.bleed === true || props.bleed === "true" || props.bleed === "outside",
+);
+
+const aspectClass = computed(() => {
+  return {
+    auto: "",
+    video: "aspect-video",
+    wide: "aspect-[21/9]",
+    square: "aspect-square",
+    portrait: "aspect-[4/5]",
+  }[props.aspect ?? "auto"];
+});
+</script>
+
+<template>
+  <figure
+    :class="cn('content-media not-prose', props.class)"
+    :data-bleed="shouldBleed ? 'true' : undefined"
+  >
+    <img
+      v-if="src"
+      :src="src"
+      :alt="alt"
+      :width="width"
+      :height="height"
+      :class="cn('w-full', aspectClass, fit === 'contain' ? 'object-contain' : 'object-cover')"
+    />
+    <slot />
+    <figcaption v-if="caption || alt" class="text-center">
+      {{ caption || alt }}
+    </figcaption>
+  </figure>
+</template>

package/app/components/mdc/MdcIdea.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import MdcCallout from "./MdcCallout.vue";
+
+const props = defineProps<{
+  title?: string;
+  icon?: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <MdcCallout :title="title" :icon="icon" type="idea" :class="props.class">
+    <slot />
+  </MdcCallout>
+</template>

package/app/components/mdc/MdcInfo.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import MdcCallout from "./MdcCallout.vue";
+
+const props = defineProps<{
+  title?: string;
+  icon?: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <MdcCallout :title="title" :icon="icon" type="info" :class="props.class">
+    <slot />
+  </MdcCallout>
+</template>

package/app/components/mdc/MdcLayout.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed, provide, type HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+type ValueProp<T extends string> = T | { value?: T | string };
+type LayoutType = "default" | "card" | "border" | "border-dashed" | "outline" | "outline-dashed";
+
+const props = withDefaults(
+  defineProps<{
+    type?: ValueProp<LayoutType>;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    type: "default",
+  },
+);
+
+const layoutTypeValue = computed<LayoutType>(() => {
+  if (typeof props.type === "string") return props.type;
+  return (props.type?.value as LayoutType | undefined) ?? "default";
+});
+
+const layoutRowClass = "content-layout-row";
+
+provide(
+  "mdc-layout-type",
+  computed(() => layoutTypeValue.value),
+);
+provide("mdc-inside-layout", true);
+</script>
+
+<template>
+  <div :class="cn('content-layout h-full', props.class)">
+    <div v-if="layoutTypeValue === 'card'" class="w-full">
+      <div class="h-full">
+        <div :class="layoutRowClass">
+          <slot />
+        </div>
+      </div>
+    </div>
+    <div
+      v-else
+      :class="
+        cn(
+          layoutRowClass,
+          'h-full',
+          layoutTypeValue === 'border' && 'content-layout-row-border',
+          layoutTypeValue === 'border-dashed' && 'content-layout-row-border-dashed',
+          layoutTypeValue === 'outline' && 'content-layout-row-outline',
+          layoutTypeValue === 'outline-dashed' && 'content-layout-row-outline-dashed',
+        )
+      "
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/app/components/mdc/MdcNote.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import MdcCallout from "./MdcCallout.vue";
+
+const props = defineProps<{
+  title?: string;
+  icon?: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <MdcCallout :title="title" :icon="icon" type="note" :class="props.class">
+    <slot />
+  </MdcCallout>
+</template>

package/app/components/mdc/MdcPassage.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  /** Short label above the block (e.g. excerpt, chapter). */
+  label?: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <aside class="not-prose my-4">
+    <div
+      data-slot="card"
+      :class="
+        cn(
+          'content-prose content-prose-trim gap-0 rounded-xl border border-border bg-muted/40 px-4 py-3 text-muted-foreground shadow-xs',
+          props.class,
+        )
+      "
+    >
+      <p
+        v-if="label"
+        class="mb-3 text-xs font-medium tracking-wider text-muted-foreground uppercase"
+      >
+        {{ label }}
+      </p>
+      <slot />
+    </div>
+  </aside>
+</template>