@lupinum/ginko-docs 0.2.2 → 0.2.5

package/app/components/{ui/kbd/KbdGroup.vue → prose/ProseH5.vue}

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "../../utils";
 
 const props = defineProps<{
+  id?: string;
   class?: HTMLAttributes["class"];
 }>();
 </script>
 
 <template>
-  <kbd data-slot="kbd-group" :class="cn('inline-flex items-center gap-1', props.class)">
+  <h5 :id="id" :class="cn('scroll-mt-[var(--content-scroll-margin)]', props.class)">
     <slot />
-  </kbd>
+  </h5>
 </template>

package/app/components/{ui/card/CardTitle.vue → prose/ProseH6.vue}

@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
+import { cn } from "../../utils";
 
 const props = defineProps<{
+  id?: string;
   class?: HTMLAttributes["class"];
 }>();
 </script>
 
 <template>
-  <h3 data-slot="card-title" :class="cn('leading-none font-semibold', props.class)">
+  <h6 :id="id" :class="cn('scroll-mt-[var(--content-scroll-margin)]', props.class)">
     <slot />
-  </h3>
+  </h6>
 </template>

package/app/components/prose/ProseImg.vue

@@ -1,120 +1,55 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue";
-import { computed, ref } from "vue";
+import { computed, resolveComponent } from "vue";
+import { Motion } from "motion-v";
 import { useI18n } from "#imports";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogTitle,
-} from "#ginko-docs/components/ui/dialog";
+import ImageZoomDialog from "#ginko-docs/components/content/ImageZoomDialog.vue";
 import { useGinkoDocsConfig } from "#ginko-docs/composables/useGinkoDocsConfig";
 import { cn } from "../../utils";
 
-const props = withDefaults(
-  defineProps<{
-    src?: string;
-    alt?: string;
-    title?: string;
-    caption?: string;
-    description?: string;
-    width?: string | number;
-    height?: string | number;
-    bleed?: boolean | string;
-    aspect?: "auto" | "video" | "wide" | "square" | "portrait";
-    fit?: "cover" | "contain";
-    align?: "left" | "center" | "right";
-    class?: HTMLAttributes["class"];
-  }>(),
-  {
-    aspect: "auto",
-    fit: "cover",
-    align: "center",
-  },
-);
+const props = defineProps<{
+  src?: string;
+  alt?: string;
+  title?: string;
+  width?: string | number;
+  height?: string | number;
+  class?: HTMLAttributes["class"];
+}>();
 
 const { t } = useI18n();
 const config = useGinkoDocsConfig();
 const zoomEnabled = computed(() => config.images?.zoom !== false);
-const zoomOpen = ref(false);
 
-const shouldBleed = computed(() => props.bleed === true || props.bleed === "true");
-
-const aspectClass = computed(() => {
-  return {
-    auto: "",
-    video: "aspect-video",
-    wide: "aspect-[21/9]",
-    square: "aspect-square",
-    portrait: "aspect-[4/5]",
-  }[props.aspect];
-});
-
-const imageClass = computed(() =>
-  cn("w-full", aspectClass.value, props.fit === "contain" ? "object-contain" : "object-cover"),
-);
+// External images skip NuxtImg; the layer ships no ipx domain allowlist.
+const isLocalAsset = computed(() => Boolean(props.src?.startsWith("/")));
+const imageComponent = computed(() => (isLocalAsset.value ? resolveComponent("NuxtImg") : "img"));
+const imageAttrs = computed(() => ({
+  src: props.src,
+  alt: props.alt ?? "",
+  title: props.title,
+  width: props.width,
+  height: props.height,
+  loading: "lazy" as const,
+  decoding: "async" as const,
+  class: cn("content-prose-image", props.class),
+  ...(isLocalAsset.value ? { sizes: "100vw md:704px" } : {}),
+}));
 </script>
 
 <template>
-  <figure
-    :class="cn('content-media not-prose', props.class)"
-    :data-bleed="shouldBleed ? 'true' : undefined"
-  >
-    <template v-if="src">
+  <ImageZoomDialog v-if="src && zoomEnabled" :src="src" :alt="alt" :label="title">
+    <template #trigger="{ layoutId, transition }">
+      <!-- A button is phrasing content, so a bare markdown image stays valid inside its paragraph. -->
       <button
-        v-if="zoomEnabled"
         type="button"
-        class="block w-full cursor-zoom-in rounded-[inherit] focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
+        class="block max-w-full cursor-zoom-in rounded-[var(--radius)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
         :aria-label="`${t('docs.zoomImage')}: ${alt ?? ''}`"
-        @click="zoomOpen = true"
       >
-        <NuxtImg
-          :src="src"
-          :alt="alt"
-          :width="width"
-          :height="height"
-          sizes="100vw md:768px"
-          loading="lazy"
-          :class="imageClass"
-        />
+        <Motion as-child :layout-id="layoutId" :transition="transition">
+          <component :is="imageComponent" v-bind="imageAttrs" />
+        </Motion>
       </button>
-      <NuxtImg
-        v-else
-        :src="src"
-        :alt="alt"
-        :width="width"
-        :height="height"
-        sizes="100vw md:768px"
-        loading="lazy"
-        :class="imageClass"
-      />
     </template>
-    <figcaption
-      v-if="caption || title || alt || description"
-      :class="
-        cn(
-          align === 'left' && 'text-left',
-          align === 'center' && 'text-center',
-          align === 'right' && 'text-right',
-        )
-      "
-    >
-      <span>{{ caption || title || alt }}</span>
-      <span v-if="description" class="content-media-description">
-        {{ description }}
-      </span>
-    </figcaption>
-
-    <Dialog v-if="zoomEnabled" v-model:open="zoomOpen">
-      <DialogContent
-        class="max-h-[90dvh] w-auto max-w-[min(96vw,80rem)] overflow-auto border-none bg-transparent p-0 shadow-none"
-      >
-        <DialogTitle class="sr-only">{{
-          caption || title || alt || t("docs.zoomImage")
-        }}</DialogTitle>
-        <DialogDescription v-if="description" class="sr-only">{{ description }}</DialogDescription>
-        <img :src="src" :alt="alt" class="max-h-[88dvh] w-auto rounded-lg object-contain" />
-      </DialogContent>
-    </Dialog>
-  </figure>
+  </ImageZoomDialog>
+  <component :is="imageComponent" v-else-if="src" v-bind="imageAttrs" />
 </template>

package/app/components/prose/ProsePre.vue

@@ -1,9 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { computed, ref, useId } from "vue";
-import { useClipboard } from "@vueuse/core";
+import type { ComputedRef, HTMLAttributes } from "vue";
+import { computed, inject, onMounted, ref, useId } from "vue";
+import { useClipboard, useEventListener, useResizeObserver } from "@vueuse/core";
 import { useI18n } from "#imports";
 import { cn } from "../../utils";
+import { useProseAppearance } from "../../composables/useProseAppearance";
+import {
+  EXTENSION_ICONS,
+  FALLBACK_FILE_ICON,
+  FILENAME_ICONS,
+  LANGUAGE_ICONS,
+  filenameExtension,
+  normalizedFilename,
+} from "../../utils/file-icons";
 
 const props = defineProps<{
   code?: string;
@@ -14,7 +23,14 @@ const props = defineProps<{
   icon?: string | null;
   inGroup?: boolean;
   class?: HTMLAttributes["class"];
+  appearance?: "quiet" | "tint";
 }>();
+// Instance prop wins, then a surrounding ::collapse wrapper, then config.
+const wrapperAppearance = inject<ComputedRef<"quiet" | "tint"> | null>(
+  "contentCodeAppearance",
+  null,
+);
+const appearance = useProseAppearance("code", () => props.appearance ?? wrapperAppearance?.value);
 
 const { copy, copied } = useClipboard();
 const { t } = useI18n();
@@ -24,72 +40,6 @@ const codeElement = ref<HTMLElement | null>(null);
 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;
@@ -97,19 +47,6 @@ function parseIconFromMeta(meta: string | null | undefined): string | null {
   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;
 }
@@ -142,12 +79,29 @@ const iconName = computed(() => {
 async function copyCode() {
   await copy(props.code || codeElement.value?.innerText || "");
 }
+
+// A right-edge fade signals horizontally clipped code; it disappears once the
+// reader reaches the end of the line.
+const scrollElement = ref<HTMLElement | null>(null);
+const canScrollRight = ref(false);
+
+function measureOverflow() {
+  const el = scrollElement.value;
+  if (!el) return;
+  canScrollRight.value =
+    el.scrollWidth - el.clientWidth > 2 && el.scrollLeft + el.clientWidth < el.scrollWidth - 2;
+}
+
+onMounted(measureOverflow);
+useEventListener(scrollElement, "scroll", measureOverflow, { passive: true });
+useResizeObserver(scrollElement, measureOverflow);
 </script>
 
 <template>
   <figure
     dir="ltr"
     data-fd-codeblock
+    :data-appearance="appearance"
     tabindex="-1"
     :class="
       cn(
@@ -194,24 +148,33 @@ async function copyCode() {
       </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 class="content-codeblock-scroll-wrap">
+      <div
+        ref="scrollElement"
+        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>
+
+      <div
+        class="content-codeblock-overflow-fade"
+        :data-hidden="!canScrollRight"
+        aria-hidden="true"
+      />
     </div>
   </figure>
 </template>

package/app/components/prose/ProseTable.vue

@@ -9,8 +9,10 @@ const props = defineProps<{
 
 <template>
   <div :class="cn('content-table', props.class)">
-    <table>
-      <slot />
-    </table>
+    <div class="content-table-scroll">
+      <table>
+        <slot />
+      </table>
+    </div>
   </div>
 </template>

package/app/components/site/ModeToggle.vue

@@ -3,7 +3,7 @@ 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 { cn } from "#ginko-docs/utils";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,7 +14,7 @@ import {
 
 const props = withDefaults(
   defineProps<{
-    variant?: "icon" | "menu-row" | "menu-tile";
+    variant?: "icon" | "menu-row" | "menu-tile" | "pill";
     class?: HTMLAttributes["class"];
   }>(),
   {
@@ -95,12 +95,21 @@ function setColorModePreference(value: unknown) {
           aria-hidden="true"
         />
       </Button>
+      <Button
+        v-else-if="variant === 'pill'"
+        variant="outline"
+        :class="cn('h-9 gap-2 rounded-full px-4 text-sm font-semibold', props.class)"
+      >
+        <Icon :name="triggerIcon" class="size-4" aria-hidden="true" />
+        <span>{{ triggerLabel }}</span>
+        <span class="sr-only">{{ t("theme.toggle") }}</span>
+      </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">
+    <DropdownMenuContent align="end" class="w-44" :portal-disabled="variant !== 'icon'">
       <DropdownMenuRadioGroup
         :model-value="colorMode.preference"
         @update:model-value="setColorModePreference"

package/app/components/site/SiteBanner.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useLocalStorage } from "@vueuse/core";
-import { computed, ref, onMounted } from "vue";
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useI18n } from "#imports";
 import { useGinkoDocsConfig } from "#ginko-docs/composables/useGinkoDocsConfig";
 import { useSiteNavigation } from "#ginko-docs/composables/useSiteNavigation";
@@ -25,11 +25,52 @@ const visible = computed(
     (!props.landing || config.banner.showOnLanding) &&
     (!hydrated.value ? true : !dismissed.value),
 );
+
+// The banner scrolls away above the sticky header, so sticky consumers
+// (docs sidebar/TOC heights, mobile menu top) need its *currently visible*
+// height. This component is the single writer of --site-banner-height.
+const bannerElement = ref<HTMLElement | null>(null);
+let rafId: number | null = null;
+let lastHeight = -1;
+
+function updateBannerHeightVar() {
+  rafId = null;
+  const element = bannerElement.value;
+  const height = element
+    ? Math.max(0, Math.min(element.getBoundingClientRect().bottom, element.offsetHeight))
+    : 0;
+  if (height === lastHeight) return;
+  lastHeight = height;
+  document.documentElement.style.setProperty("--site-banner-height", `${height}px`);
+}
+
+function scheduleBannerHeightVar() {
+  if (rafId !== null) return;
+  rafId = requestAnimationFrame(updateBannerHeightVar);
+}
+
+watch(visible, () => {
+  void nextTick(scheduleBannerHeightVar);
+});
+
+onMounted(() => {
+  window.addEventListener("scroll", scheduleBannerHeightVar, { passive: true });
+  window.addEventListener("resize", scheduleBannerHeightVar, { passive: true });
+  scheduleBannerHeightVar();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", scheduleBannerHeightVar);
+  window.removeEventListener("resize", scheduleBannerHeightVar);
+  if (rafId !== null) cancelAnimationFrame(rafId);
+  document.documentElement.style.setProperty("--site-banner-height", "0px");
+});
 </script>
 
 <template>
   <div
     v-if="visible"
+    ref="bannerElement"
     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"
@@ -46,7 +87,7 @@ const visible = computed(
     </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"
+      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 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-primary-foreground/50 focus-visible:outline-none"
       :aria-label="t('banner.dismiss')"
       @click="dismissed = true"
     >

package/app/components/site/SiteFooter.vue

@@ -3,17 +3,15 @@ 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 { site, socialLinks } = 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,
+  { label: t("nav.documentation"), href: localizedPath("docs"), external: false },
+  ...socialLinks.value,
 ]);
 </script>