@lupinum/ginko-docs 0.2.2

package/app/components/content/PageMarkdownCopy.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts">
+import { Button } from "#ginko-docs/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "#ginko-docs/components/ui/dropdown-menu";
+import { computed } from "vue";
+import { useI18n } from "#imports";
+import { usePageMarkdownActions } from "#ginko-docs/composables/usePageMarkdownActions";
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    copiedLabel?: string;
+  }>(),
+  {},
+);
+
+const { t } = useI18n();
+const { actions, chatGptUrl, claudeUrl, copyMarkdown, copyValue, mcpUrl, rawPath, rawUrl, result } =
+  usePageMarkdownActions();
+const label = computed(() => props.label ?? t("docs.copyMarkdown"));
+const copiedLabel = computed(() => props.copiedLabel ?? t("docs.copied"));
+const markdownSucceeded = computed(
+  () => result.value?.action === "markdown" && result.value.status === "success",
+);
+const actionSucceeded = (action: "link" | "mcp") =>
+  result.value?.action === action && result.value.status === "success";
+const statusMessage = computed(() => {
+  if (!result.value) return "";
+  return result.value.status === "success" ? copiedLabel.value : t("docs.copyFailed");
+});
+</script>
+
+<template>
+  <div class="inline-flex shrink-0 items-center">
+    <Button
+      type="button"
+      variant="outline"
+      size="sm"
+      class="h-9 gap-1.5 rounded-r-none border-r-0 px-2.5 text-xs has-[>svg]:px-2.5"
+      :aria-label="markdownSucceeded ? copiedLabel : label"
+      @click="copyMarkdown"
+    >
+      <Icon
+        :name="markdownSucceeded ? 'lucide:check' : 'lucide:copy'"
+        class="size-3.5"
+        aria-hidden="true"
+      />
+      <span class="hidden sm:inline">{{ markdownSucceeded ? copiedLabel : label }}</span>
+    </Button>
+
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <Button
+          type="button"
+          variant="outline"
+          size="icon"
+          class="h-9 w-8 rounded-l-none px-0"
+          :aria-label="t('docs.moreActions')"
+        >
+          <Icon name="lucide:chevron-down" class="size-3.5" aria-hidden="true" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" class="w-56">
+        <DropdownMenuItem @select="copyValue(rawUrl, 'link')">
+          <Icon :name="actionSucceeded('link') ? 'lucide:check' : 'lucide:link'" />
+          {{ actionSucceeded("link") ? t("docs.copied") : t("docs.copyLink") }}
+        </DropdownMenuItem>
+        <DropdownMenuItem as-child>
+          <a :href="rawPath" target="_blank" rel="noopener noreferrer">
+            <Icon name="lucide:file-code-2" />
+            {{ t("docs.viewMarkdown") }}
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="actions.claude" as-child>
+          <a :href="claudeUrl" target="_blank" rel="noopener noreferrer">
+            <Icon name="lucide:sparkles" />
+            {{ t("docs.askClaude") }}
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem v-if="actions.chatGpt" as-child>
+          <a :href="chatGptUrl" target="_blank" rel="noopener noreferrer">
+            <Icon name="lucide:message-circle" />
+            {{ t("docs.askChatGpt") }}
+          </a>
+        </DropdownMenuItem>
+        <template v-if="actions.mcp">
+          <DropdownMenuSeparator />
+          <DropdownMenuItem @select="copyValue(mcpUrl, 'mcp')">
+            <Icon :name="actionSucceeded('mcp') ? 'lucide:check' : 'lucide:plug'" />
+            {{ actionSucceeded("mcp") ? t("docs.copied") : t("docs.copyMcpUrl") }}
+          </DropdownMenuItem>
+        </template>
+      </DropdownMenuContent>
+    </DropdownMenu>
+    <span class="sr-only" role="status" aria-live="polite">{{ statusMessage }}</span>
+  </div>
+</template>

package/app/components/mdc/MdcAccordion.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { AccordionRoot } from "reka-ui";
+import { cn } from "../../utils";
+
+const props = withDefaults(
+  defineProps<{
+    type?: "single" | "multiple";
+    collapsible?: boolean;
+    defaultValue?: string | string[];
+    class?: string;
+  }>(),
+  {
+    type: "single",
+    collapsible: true,
+  },
+);
+
+const root = ref<HTMLElement | null>(null);
+const value = ref<string | string[]>(
+  props.type === "multiple"
+    ? ((props.defaultValue as string[]) ?? [])
+    : ((props.defaultValue as string) ?? ""),
+);
+
+function applyHash(hash: string) {
+  if (!hash || !root.value) return;
+  const target = root.value.querySelector<HTMLElement>(`#${CSS.escape(hash)}`);
+  if (!target) return;
+
+  const accordionValue =
+    target.dataset.accordionValue ??
+    target.closest("[data-accordion-value]")?.getAttribute("data-accordion-value");
+  if (!accordionValue) return;
+
+  if (props.type === "multiple") {
+    const current = Array.isArray(value.value) ? value.value : [];
+    value.value = current.includes(accordionValue) ? current : [accordionValue, ...current];
+    return;
+  }
+
+  value.value = accordionValue;
+}
+
+onMounted(() => {
+  applyHash(window.location.hash.slice(1));
+});
+</script>
+
+<template>
+  <div ref="root">
+    <AccordionRoot
+      v-model="value"
+      :type="props.type"
+      :collapsible="props.collapsible"
+      data-slot="accordion"
+      :class="
+        cn('not-prose my-4 w-full divide-y overflow-hidden rounded-lg border bg-card', props.class)
+      "
+    >
+      <slot />
+    </AccordionRoot>
+  </div>
+</template>

package/app/components/mdc/MdcAccordionItem.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useId } from "vue";
+import { AccordionContent, AccordionHeader, AccordionItem, AccordionTrigger } from "reka-ui";
+
+const props = defineProps<{
+  value?: string;
+  title?: string;
+  content?: string;
+}>();
+
+const autoValue = useId();
+</script>
+
+<template>
+  <AccordionItem
+    :value="props.value || autoValue"
+    :data-accordion-value="props.value || autoValue"
+    class="border-b last:border-b-0"
+  >
+    <AccordionHeader class="flex">
+      <AccordionTrigger
+        class="flex flex-1 items-start justify-between gap-4 rounded-md px-4 py-3 text-left text-sm font-medium transition-all outline-none hover:no-underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180"
+      >
+        <slot name="title">
+          {{ title }}
+        </slot>
+        <Icon
+          name="lucide:chevron-down"
+          class="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200"
+          aria-hidden="true"
+        />
+      </AccordionTrigger>
+    </AccordionHeader>
+    <AccordionContent
+      data-slot="accordion-content"
+      class="accordion-content overflow-hidden text-sm"
+    >
+      <slot name="content">
+        <div v-if="content" class="text-muted-foreground">
+          {{ content }}
+        </div>
+      </slot>
+      <div
+        v-if="$slots.default"
+        class="content-prose content-prose-trim px-4 pb-2 text-muted-foreground"
+      >
+        <slot unwrap="p" />
+      </div>
+    </AccordionContent>
+  </AccordionItem>
+</template>

package/app/components/mdc/MdcAlert.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import MdcCallout from "./MdcCallout.vue";
+
+type AlertType = "default" | "info" | "warning" | "success" | "danger" | "secondary";
+type CalloutType = "info" | "warning" | "error" | "success" | "idea";
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    icon?: string;
+    type?: AlertType;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    type: "warning",
+  },
+);
+
+const calloutType = computed<CalloutType>(() => {
+  if (props.type === "danger") return "error";
+  if (props.type === "success") return "success";
+  if (props.type === "info" || props.type === "secondary") return "info";
+
+  return "warning";
+});
+</script>
+
+<template>
+  <MdcCallout :title="title" :icon="icon" :type="calloutType" :class="props.class">
+    <slot />
+  </MdcCallout>
+</template>

package/app/components/mdc/MdcAside.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  label?: string;
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <aside
+    :class="
+      cn(
+        'not-prose my-4 rounded-lg border-l-2 border-muted-foreground/20 bg-muted/20 px-4 py-3',
+        props.class,
+      )
+    "
+  >
+    <p v-if="label" class="mb-2 text-xs font-medium tracking-wider text-muted-foreground uppercase">
+      {{ label }}
+    </p>
+    <div :class="cn('content-prose content-prose-trim text-muted-foreground')">
+      <slot />
+    </div>
+  </aside>
+</template>

package/app/components/mdc/MdcCallout.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed } from "vue";
+import { cn } from "../../utils";
+import { resolveIconifyIcon } from "./icons";
+
+type CalloutType = "note" | "alert" | "info" | "warn" | "warning" | "error" | "success" | "idea";
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    type?: CalloutType;
+    icon?: string;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    type: "info",
+  },
+);
+
+const normalizedType = computed(() => {
+  if (props.type === "warn" || props.type === "alert") return "warning";
+
+  return props.type;
+});
+
+const iconName = computed(() => {
+  if (props.icon) return resolveIconifyIcon(props.icon) ?? props.icon;
+
+  return (
+    {
+      note: "lucide:file-text",
+      info: "lucide:info",
+      warning: "lucide:triangle-alert",
+      error: "lucide:circle-x",
+      success: "lucide:circle-check",
+      idea: "lucide:lightbulb",
+    }[normalizedType.value] ?? "lucide:info"
+  );
+});
+</script>
+
+<template>
+  <div
+    data-slot="alert"
+    role="alert"
+    :class="cn('content-callout not-prose my-4', `content-callout-${normalizedType}`, props.class)"
+  >
+    <span class="content-callout-bar" aria-hidden="true" />
+    <span data-slot="alert-icon" class="content-callout-icon" aria-hidden="true">
+      <Icon :name="iconName" class="mt-1 size-5" />
+    </span>
+    <div class="content-callout-body">
+      <div v-if="title" data-slot="alert-title" class="content-alert-title">
+        {{ title }}
+      </div>
+      <div data-slot="alert-description" class="content-prose content-prose-trim">
+        <slot unwrap="p" />
+      </div>
+    </div>
+  </div>
+</template>

package/app/components/mdc/MdcCard.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { NuxtLink } from "#components";
+import { computed, inject, useSlots, type CSSProperties, type HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+import { isExternalLink, resolveIconifyIcon } from "./icons";
+
+type CardIconColor =
+  | "muted"
+  | "foreground"
+  | "primary"
+  | "info"
+  | "success"
+  | "warning"
+  | "destructive";
+
+const props = withDefaults(
+  defineProps<{
+    title?: string;
+    description?: string;
+    footer?: string;
+    to?: string;
+    target?: string;
+    icon?: string;
+    iconColor?: CardIconColor;
+    img?: string;
+    showLinkIcon?: boolean;
+    horizontal?: boolean;
+    inStack?: boolean;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    showLinkIcon: true,
+    horizontal: false,
+    inStack: false,
+  },
+);
+
+const slots = useSlots();
+const inGroup = inject("contentCardInGroup", false);
+
+const wrapperTag = computed(() => (props.to ? (isExternalLink(props.to) ? "a" : NuxtLink) : "div"));
+
+const linkProps = computed(() => {
+  if (!props.to) return null;
+  if (isExternalLink(props.to)) {
+    return {
+      href: props.to,
+      target: props.target,
+      rel: "noreferrer noopener",
+    };
+  }
+  return {
+    to: props.to,
+    target: props.target,
+  };
+});
+
+const iconName = computed(() => resolveIconifyIcon(props.icon));
+
+const hasHeader = computed(() =>
+  Boolean(props.title || props.description || slots.title || slots.description || props.icon),
+);
+
+const hasFooter = computed(() => Boolean(props.footer || slots.footer));
+
+const hasBody = computed(() => Boolean(slots.default));
+
+const showOutgoingLinkIcon = computed(
+  () => props.showLinkIcon && Boolean(props.to && isExternalLink(props.to)),
+);
+
+const cardIconColor = computed(() => {
+  if (!props.iconColor || props.iconColor === "muted") return undefined;
+
+  return {
+    foreground: "var(--foreground)",
+    primary: "var(--primary)",
+    info: "var(--info)",
+    success: "var(--success)",
+    warning: "var(--warning)",
+    destructive: "var(--destructive)",
+  }[props.iconColor];
+});
+
+const cardIconStyle = computed<CSSProperties | undefined>(() =>
+  cardIconColor.value
+    ? ({ "--content-card-icon-color": cardIconColor.value } as CSSProperties)
+    : undefined,
+);
+</script>
+
+<template>
+  <component
+    :is="wrapperTag"
+    v-bind="linkProps || {}"
+    :class="
+      cn(
+        'content-card group not-prose relative block h-auto',
+        !inStack && !inGroup && 'my-4',
+        to &&
+          'rounded-xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none',
+        props.class,
+      )
+    "
+  >
+    <div
+      data-slot="card"
+      :class="
+        cn(
+          'content-card-surface relative overflow-hidden rounded-xl border bg-card text-card-foreground shadow-xs transition-colors',
+          hasBody || hasFooter ? 'p-0' : 'p-0',
+          to && 'cursor-pointer hover:bg-accent/50',
+          showOutgoingLinkIcon && (hasBody || hasFooter ? '' : 'pr-10'),
+          inStack &&
+            'rounded-none border-x-0 shadow-none first:rounded-t-xl first:border-t last:rounded-b-xl last:border-b',
+        )
+      "
+    >
+      <img v-if="img" :src="img" alt="" class="w-full border-b border-border object-cover" />
+
+      <div
+        v-if="hasHeader"
+        :class="
+          cn(
+            hasBody || hasFooter ? 'p-4 pb-0' : 'p-4',
+            showOutgoingLinkIcon && 'pr-10',
+            horizontal && 'flex items-start gap-3',
+          )
+        "
+      >
+        <div
+          v-if="iconName"
+          :style="cardIconStyle"
+          :class="
+            cn(
+              'content-card-icon flex size-10 shrink-0 items-center justify-center rounded-lg border bg-muted shadow-xs [&_.iconify]:size-5',
+              horizontal ? '' : 'mb-2',
+            )
+          "
+        >
+          <Icon :name="iconName" aria-hidden="true" />
+        </div>
+
+        <div :class="cn('min-w-0', horizontal ? 'flex-1 space-y-1' : 'space-y-1')">
+          <div
+            v-if="title || $slots.title"
+            data-slot="card-title"
+            :class="cn('text-sm font-medium', !horizontal && 'mb-0')"
+          >
+            <slot name="title">{{ title }}</slot>
+          </div>
+          <div
+            v-if="description || $slots.description"
+            data-slot="card-description"
+            class="text-sm leading-snug text-pretty"
+          >
+            <slot name="description">{{ description }}</slot>
+          </div>
+        </div>
+      </div>
+
+      <div
+        v-if="hasBody"
+        data-slot="card-content"
+        class="content-prose content-prose-trim p-4 pt-2 text-muted-foreground"
+      >
+        <slot unwrap="p" />
+      </div>
+
+      <div
+        v-if="hasFooter"
+        data-slot="card-footer"
+        class="flex flex-col items-stretch border-t px-4 py-3 text-xs text-muted-foreground [&_p]:my-0 [&_p]:leading-normal"
+      >
+        <slot name="footer">{{ footer }}</slot>
+      </div>
+
+      <Icon
+        v-if="showOutgoingLinkIcon"
+        name="lucide:arrow-up-right"
+        class="pointer-events-none absolute top-4 right-4 size-4 text-muted-foreground/50 transition-colors group-hover:text-foreground"
+        aria-hidden="true"
+      />
+    </div>
+  </component>
+</template>

package/app/components/mdc/MdcCardGroup.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed, provide, type HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = withDefaults(
+  defineProps<{
+    cols?: 1 | 2 | 3 | 4 | 5 | 6 | "1" | "2" | "3" | "4" | "5" | "6";
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    cols: 2,
+  },
+);
+
+provide("contentCardInGroup", true);
+
+const colsClass = {
+  1: "sm:grid-cols-1",
+  2: "sm:grid-cols-2",
+  3: "sm:grid-cols-3",
+  4: "sm:grid-cols-4",
+  5: "sm:grid-cols-5",
+  6: "sm:grid-cols-6",
+} as const;
+
+const normalizedCols = computed<keyof typeof colsClass>(() => {
+  const cols = Number(props.cols);
+
+  return cols === 1 || cols === 2 || cols === 3 || cols === 4 || cols === 5 || cols === 6
+    ? cols
+    : 2;
+});
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'content-card-group not-prose my-4 grid grid-cols-1 items-start gap-2',
+        colsClass[normalizedCols],
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

package/app/components/mdc/MdcCenter.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import { computed, type HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+type ValueProp<T extends string> = T | { value?: T | string };
+type CenterSize = "sm" | "md" | "lg";
+type CenterType = "default" | "card" | "border" | "border-dashed" | "outline" | "outline-dashed";
+
+const props = withDefaults(
+  defineProps<{
+    size?: ValueProp<CenterSize>;
+    max?: CenterSize;
+    type?: ValueProp<CenterType>;
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    size: "md",
+    type: "default",
+  },
+);
+
+const centerTypeValue = computed<CenterType>(() => {
+  if (typeof props.type === "string") return props.type;
+  return (props.type?.value as CenterType | undefined) ?? "default";
+});
+
+const sizeValue = computed<CenterSize>(() => {
+  if (props.max) return props.max;
+  if (typeof props.size === "string") return props.size;
+  return (props.size?.value as CenterSize | undefined) ?? "md";
+});
+
+const centerSizeClass = {
+  sm: "max-w-sm",
+  md: "max-w-md",
+  lg: "max-w-lg",
+} as const;
+</script>
+
+<template>
+  <div :class="cn('mx-auto flex justify-center p-2', props.class)">
+    <div
+      v-if="centerTypeValue === 'card'"
+      :class="
+        cn(
+          'mx-auto w-full rounded-lg border bg-card p-6 text-center shadow-xs',
+          centerSizeClass[sizeValue],
+        )
+      "
+    >
+      <slot />
+    </div>
+    <div
+      v-else
+      :class="
+        cn(
+          'mx-auto w-full text-center',
+          centerSizeClass[sizeValue],
+          centerTypeValue !== 'default' && 'rounded-lg p-4',
+          centerTypeValue === 'border' && 'border border-border',
+          centerTypeValue === 'border-dashed' && 'border border-dashed border-border',
+          centerTypeValue === 'outline' && 'outline outline-1 outline-offset-2 outline-border',
+          centerTypeValue === 'outline-dashed' &&
+            'outline-1 outline-offset-2 outline-border outline-dashed',
+        )
+      "
+    >
+      <slot />
+    </div>
+  </div>
+</template>