@lupinum/ginko-docs 0.2.2

package/app/components/prose/ProseLi.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <li :class="cn(props.class)">
+    <slot />
+  </li>
+</template>

package/app/components/prose/ProseOl.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <ol :class="cn(props.class)">
+    <slot />
+  </ol>
+</template>

package/app/components/prose/ProseP.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <p :class="cn(props.class)">
+    <slot />
+  </p>
+</template>

package/app/components/prose/ProsePre.vue

@@ -0,0 +1,217 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { computed, ref, useId } from "vue";
+import { useClipboard } from "@vueuse/core";
+import { useI18n } from "#imports";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  code?: string;
+  language?: string | null;
+  filename?: string | null;
+  highlights?: number[];
+  meta?: string | null;
+  icon?: string | null;
+  inGroup?: boolean;
+  class?: HTMLAttributes["class"];
+}>();
+
+const { copy, copied } = useClipboard();
+const { t } = useI18n();
+const codeElement = ref<HTMLElement | null>(null);
+// Landmarks with role="region" need unique accessible names; the same
+// filename can appear in several code blocks on one page.
+const regionId = useId();
+
+const HIDDEN_LANGUAGES = new Set(["text", "plaintext", "txt", "plain"]);
+const FALLBACK_FILE_ICON = "lucide:file";
+
+const FILENAME_ICONS: Record<string, string> = {
+  ".env": "lucide:file-key",
+  ".env.example": "lucide:file-key",
+  ".gitignore": "lucide:git-branch",
+  "components.json": "lucide:blocks",
+  "eslint.config.cjs": "lucide:badge-check",
+  "eslint.config.js": "lucide:badge-check",
+  "eslint.config.mjs": "lucide:badge-check",
+  "nuxt.config.js": "logos:nuxt-icon",
+  "nuxt.config.ts": "logos:nuxt-icon",
+  "package.json": "lucide:package",
+  "pnpm-lock.yaml": "lucide:package",
+  "pnpm-workspace.yaml": "lucide:package",
+  "tailwind.config.js": "lucide:palette",
+  "tailwind.config.ts": "lucide:palette",
+  "tsconfig.json": "lucide:file-cog",
+  "vite.config.js": "lucide:zap",
+  "vite.config.ts": "lucide:zap",
+};
+
+const EXTENSION_ICONS: Record<string, string> = {
+  bash: "lucide:terminal",
+  cjs: "lucide:file-json",
+  css: "lucide:braces",
+  csv: "lucide:table",
+  htm: "lucide:code-xml",
+  html: "lucide:code-xml",
+  js: "lucide:file-json",
+  json: "lucide:braces",
+  jsx: "lucide:atom",
+  md: "lucide:file-text",
+  mdc: "lucide:file-text",
+  mjs: "lucide:file-json",
+  mts: "lucide:file-code",
+  scss: "lucide:braces",
+  sh: "lucide:terminal",
+  ts: "logos:typescript-icon",
+  tsx: "lucide:atom",
+  txt: "lucide:file-text",
+  vue: "logos:vue",
+  yaml: "lucide:file-cog",
+  yml: "lucide:file-cog",
+};
+
+const LANGUAGE_ICONS: Record<string, string> = {
+  bash: "lucide:terminal",
+  css: "lucide:braces",
+  html: "lucide:code-xml",
+  javascript: "lucide:file-json",
+  js: "lucide:file-json",
+  json: "lucide:braces",
+  jsx: "lucide:atom",
+  markdown: "lucide:file-text",
+  mdc: "lucide:file-text",
+  shell: "lucide:terminal",
+  sh: "lucide:terminal",
+  ts: "logos:typescript-icon",
+  tsx: "lucide:atom",
+  typescript: "logos:typescript-icon",
+  vue: "logos:vue",
+  "vue-html": "logos:vue",
+  yaml: "lucide:file-cog",
+  yml: "lucide:file-cog",
+};
+
+function parseIconFromMeta(meta: string | null | undefined): string | null {
+  if (!meta) return null;
+  const match = meta.match(/(?:^|\s)icon=(\S+)/);
+  return match?.[1] ?? null;
+}
+
+function normalizedFilename(filename: string | null | undefined): string | null {
+  return filename?.trim().replace(/^\.\//, "").toLowerCase() || null;
+}
+
+function filenameExtension(filename: string | null | undefined): string | null {
+  const normalized = normalizedFilename(filename);
+  const basename = normalized?.split("/").pop();
+  const index = basename?.lastIndexOf(".") ?? -1;
+
+  if (!basename || index < 0 || index === basename.length - 1) return null;
+  return basename.slice(index + 1);
+}
+
+function normalizedLanguage(language: string | null | undefined): string | null {
+  return language?.trim().toLowerCase() || null;
+}
+
+const label = computed(() => {
+  if (props.filename) return props.filename;
+
+  const language = normalizedLanguage(props.language);
+  if (language && !HIDDEN_LANGUAGES.has(language)) return props.language;
+
+  return "";
+});
+
+const iconName = computed(() => {
+  const explicitIcon = props.icon || parseIconFromMeta(props.meta);
+  if (explicitIcon) return explicitIcon;
+
+  const filename = normalizedFilename(props.filename);
+  if (filename && FILENAME_ICONS[filename]) return FILENAME_ICONS[filename];
+
+  const extension = filenameExtension(props.filename);
+  if (extension && EXTENSION_ICONS[extension]) return EXTENSION_ICONS[extension];
+
+  const language = normalizedLanguage(props.language);
+  if (language && LANGUAGE_ICONS[language]) return LANGUAGE_ICONS[language];
+
+  return FALLBACK_FILE_ICON;
+});
+
+async function copyCode() {
+  await copy(props.code || codeElement.value?.innerText || "");
+}
+</script>
+
+<template>
+  <figure
+    dir="ltr"
+    data-fd-codeblock
+    tabindex="-1"
+    :class="
+      cn(
+        'content-codeblock group shiki not-prose relative',
+        props.inGroup
+          ? 'content-codeblock-in-group'
+          : label
+            ? 'content-codeblock-with-caption'
+            : 'content-codeblock-plain',
+      )
+    "
+  >
+    <figcaption v-if="label && !props.inGroup" data-fd-caption>
+      <Icon :name="iconName" mode="svg" class="content-codeblock-caption-icon" aria-hidden="true" />
+      <span class="flex-1 truncate">{{ label }}</span>
+      <button
+        type="button"
+        class="content-codeblock-copy-button ml-auto"
+        :aria-label="copied ? t('docs.copiedText') : t('docs.copyText')"
+        @click="copyCode"
+      >
+        <Icon
+          :name="copied ? 'lucide:check' : 'lucide:clipboard'"
+          mode="svg"
+          class="size-3.5"
+          aria-hidden="true"
+        />
+      </button>
+    </figcaption>
+
+    <div v-if="!label && !props.inGroup" class="absolute top-2 right-2 z-10" data-fd-copy-float>
+      <button
+        type="button"
+        class="content-codeblock-copy-button content-codeblock-copy-button-floating"
+        :aria-label="copied ? t('docs.copiedText') : t('docs.copyText')"
+        @click="copyCode"
+      >
+        <Icon
+          :name="copied ? 'lucide:check' : 'lucide:clipboard'"
+          mode="svg"
+          class="size-3.5"
+          aria-hidden="true"
+        />
+      </button>
+    </div>
+
+    <div
+      role="region"
+      tabindex="0"
+      :aria-label="
+        (label ? `${t('docs.codeSample')}: ${label}` : t('docs.codeSample')) + ` (${regionId})`
+      "
+      :class="
+        cn(
+          'fd-scroll-container max-h-[600px] overflow-auto focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset',
+          !label && !props.inGroup && 'content-codeblock-inline-copy',
+        )
+      "
+    >
+      <pre
+        ref="codeElement"
+        :class="cn('w-max min-w-full', props.class)"
+        v-bind="$attrs"
+      ><slot /></pre>
+    </div>
+  </figure>
+</template>

package/app/components/prose/ProseStrong.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <strong :class="cn(props.class)">
+    <slot />
+  </strong>
+</template>

package/app/components/prose/ProseTable.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div :class="cn('content-table', props.class)">
+    <table>
+      <slot />
+    </table>
+  </div>
+</template>

package/app/components/prose/ProseTbody.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <tbody :class="cn(props.class)">
+    <slot />
+  </tbody>
+</template>

package/app/components/prose/ProseTd.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <td :class="cn(props.class)">
+    <slot />
+  </td>
+</template>

package/app/components/prose/ProseTh.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <th :class="cn(props.class)">
+    <slot />
+  </th>
+</template>

package/app/components/prose/ProseThead.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <thead :class="cn(props.class)">
+    <slot />
+  </thead>
+</template>

package/app/components/prose/ProseTr.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <tr :class="cn(props.class)">
+    <slot />
+  </tr>
+</template>

package/app/components/prose/ProseUl.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "../../utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <ul :class="cn(props.class)">
+    <slot />
+  </ul>
+</template>

package/app/components/site/ModeToggle.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { Button } from "#ginko-docs/components/ui/button";
+import { computed } from "vue";
+import { useColorMode, useI18n } from "#imports";
+import { cn } from "#ginko-docs/lib/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+} from "#ginko-docs/components/ui/dropdown-menu";
+
+const props = withDefaults(
+  defineProps<{
+    variant?: "icon" | "menu-row" | "menu-tile";
+    class?: HTMLAttributes["class"];
+  }>(),
+  {
+    variant: "icon",
+  },
+);
+
+const colorMode = useColorMode();
+const { t } = useI18n();
+
+const colorModeOptions = [
+  { value: "light", labelKey: "theme.light", icon: "lucide:sun" },
+  { value: "dark", labelKey: "theme.dark", icon: "lucide:moon" },
+  { value: "system", labelKey: "theme.system", icon: "lucide:monitor" },
+] as const;
+
+type ColorModePreference = (typeof colorModeOptions)[number]["value"];
+
+const selectedColorModeOption = computed(
+  () =>
+    colorModeOptions.find((option) => option.value === colorMode.preference) ??
+    colorModeOptions.find((option) => option.value === "system")!,
+);
+const triggerIcon = computed(() => selectedColorModeOption.value.icon);
+const nextExplicitColorModeIcon = computed(() =>
+  colorMode.value === "dark" ? "lucide:sun" : "lucide:moon",
+);
+const triggerLabel = computed(() => t(selectedColorModeOption.value.labelKey));
+
+function isColorModePreference(value: string): value is ColorModePreference {
+  return colorModeOptions.some((option) => option.value === value);
+}
+
+function setColorModePreference(value: unknown) {
+  if (typeof value === "string" && isColorModePreference(value)) {
+    colorMode.preference = value;
+  }
+}
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button
+        v-if="variant === 'menu-row' || variant === 'menu-tile'"
+        variant="ghost"
+        :class="
+          cn(
+            variant === 'menu-tile'
+              ? 'h-14 w-full justify-between rounded-none px-3.5 text-sm font-semibold hover:bg-muted/40'
+              : 'h-[4.25rem] w-full justify-between rounded-none px-5 text-base font-semibold hover:bg-transparent',
+            props.class,
+          )
+        "
+      >
+        <span
+          class="flex min-w-0 items-center"
+          :class="variant === 'menu-tile' ? 'gap-3' : 'gap-4'"
+        >
+          <span
+            class="flex shrink-0 items-center justify-center rounded-lg bg-muted/60 text-foreground"
+            :class="variant === 'menu-tile' ? 'size-8' : 'size-11'"
+          >
+            <Icon
+              :name="triggerIcon"
+              :class="variant === 'menu-tile' ? 'size-4' : 'size-5'"
+              aria-hidden="true"
+            />
+          </span>
+          <span class="truncate">{{
+            variant === "menu-tile" ? triggerLabel : t("theme.label")
+          }}</span>
+        </span>
+        <Icon
+          :name="variant === 'menu-tile' ? 'lucide:chevron-down' : 'lucide:chevron-right'"
+          :class="variant === 'menu-tile' ? 'size-4' : 'size-5'"
+          class="text-muted-foreground"
+          aria-hidden="true"
+        />
+      </Button>
+      <Button v-else variant="outline" size="icon" :class="cn('relative shrink-0', props.class)">
+        <Icon :name="nextExplicitColorModeIcon" class="size-[1.2rem]" aria-hidden="true" />
+        <span class="sr-only">{{ t("theme.toggle") }}</span>
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent align="end" class="w-44">
+      <DropdownMenuRadioGroup
+        :model-value="colorMode.preference"
+        @update:model-value="setColorModePreference"
+      >
+        <DropdownMenuRadioItem
+          v-for="option in colorModeOptions"
+          :key="option.value"
+          :value="option.value"
+          class="gap-3"
+        >
+          <template #indicator-icon>
+            <Icon name="lucide:check" class="size-4" aria-hidden="true" />
+          </template>
+          <Icon :name="option.icon" class="size-4" aria-hidden="true" />
+          <span>{{ t(option.labelKey) }}</span>
+        </DropdownMenuRadioItem>
+      </DropdownMenuRadioGroup>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

package/app/components/site/SiteBanner.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { useLocalStorage } from "@vueuse/core";
+import { computed, ref, onMounted } from "vue";
+import { useI18n } from "#imports";
+import { useGinkoDocsConfig } from "#ginko-docs/composables/useGinkoDocsConfig";
+import { useSiteNavigation } from "#ginko-docs/composables/useSiteNavigation";
+
+const props = defineProps<{
+  landing?: boolean;
+}>();
+
+const { banner } = useSiteNavigation();
+const { t } = useI18n();
+const config = useGinkoDocsConfig();
+
+const dismissed = useLocalStorage(banner.value.storageKey, false);
+// Avoid a hydration mismatch: localStorage is client-only, so reveal after mount.
+const hydrated = ref(false);
+onMounted(() => {
+  hydrated.value = true;
+});
+const visible = computed(
+  () =>
+    banner.value.show &&
+    (!props.landing || config.banner.showOnLanding) &&
+    (!hydrated.value ? true : !dismissed.value),
+);
+</script>
+
+<template>
+  <div
+    v-if="visible"
+    role="region"
+    :aria-label="banner.text"
+    class="relative z-30 bg-primary px-10 py-2.5 text-center text-sm leading-5 font-medium text-primary-foreground"
+  >
+    <span class="mx-auto block max-w-[min(100%,52rem)]">
+      {{ banner.text }}
+      <NuxtLink
+        v-if="banner.linkHref"
+        :to="banner.linkHref"
+        class="ml-1.5 inline-block underline underline-offset-2 opacity-90 transition-opacity hover:opacity-100"
+      >
+        {{ banner.linkLabel }}
+      </NuxtLink>
+    </span>
+    <button
+      type="button"
+      class="absolute top-1/2 right-2 flex size-8 -translate-y-1/2 items-center justify-center rounded p-1 opacity-70 transition-opacity hover:opacity-100"
+      :aria-label="t('banner.dismiss')"
+      @click="dismissed = true"
+    >
+      <Icon name="lucide:x" class="size-3.5" aria-hidden="true" />
+    </button>
+  </div>
+</template>

package/app/components/site/SiteFooter.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { useI18n } from "#imports";
+import { useLocalizedPath } from "#ginko-docs/composables/useLocalizedPath";
+import { useSiteNavigation } from "#ginko-docs/composables/useSiteNavigation";
+import { useDocsEntryPath } from "#ginko-docs/features/docs/composables/useDocsEntryPath";
+
+const { site, footerNav } = useSiteNavigation();
+const { t } = useI18n();
+const localizedPath = useLocalizedPath();
+const docsEntryPath = await useDocsEntryPath();
+
+const currentYearDate = new Date();
+const resources = computed(() => [
+  { label: t("nav.documentation"), href: docsEntryPath.value, external: false },
+  ...footerNav.value.resources,
+]);
+</script>
+
+<template>
+  <footer class="border-t border-border bg-muted/30" :aria-label="t('nav.company')">
+    <div class="mx-auto max-w-5xl px-4 py-12 md:px-6 md:py-16">
+      <div class="flex flex-col gap-8 md:flex-row md:items-start md:justify-between">
+        <div class="max-w-sm">
+          <NuxtLink
+            :to="localizedPath('home')"
+            class="flex items-center gap-2 font-semibold text-foreground"
+          >
+            <SiteLogoMark />
+            <span>{{ site.name }}</span>
+          </NuxtLink>
+          <p class="mt-3 text-sm leading-relaxed text-muted-foreground">
+            {{ site.description }}
+          </p>
+        </div>
+        <div>
+          <h3 class="mb-3 text-sm font-semibold text-foreground">{{ t("nav.resources") }}</h3>
+          <ul class="space-y-2.5">
+            <li v-for="item in resources" :key="item.href">
+              <NuxtLink
+                :to="item.href"
+                :target="item.external ? '_blank' : undefined"
+                :rel="item.external ? 'noopener noreferrer' : undefined"
+                class="inline-flex items-center gap-1 text-sm text-muted-foreground transition-colors hover:text-foreground"
+              >
+                {{ item.label }}
+                <Icon
+                  v-if="item.external"
+                  name="lucide:arrow-up-right"
+                  class="size-3 opacity-60"
+                  aria-hidden="true"
+                />
+              </NuxtLink>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <div
+        class="mt-10 flex flex-col items-center justify-between gap-3 border-t border-border pt-6 text-sm text-muted-foreground sm:flex-row"
+      >
+        <p>
+          © <NuxtTime :datetime="currentYearDate" year="numeric" /> {{ site.name }}.
+          {{ t("site.footer") }}
+        </p>
+        <p v-if="site.lupinumAttribution">
+          {{ t("site.openSourceBy") }}
+          <a
+            href="https://lupinum.com"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="font-medium text-foreground underline decoration-border underline-offset-4 transition-colors hover:decoration-foreground"
+          >
+            Lupinum<span class="sr-only"> ({{ t("nav.externalLink") }})</span> </a
+          >.
+        </p>
+      </div>
+    </div>
+  </footer>
+</template>