@lupinum/ginko-docs 0.2.2 → 0.2.5

package/app/components/site/SiteHeader.vue

@@ -1,79 +1,126 @@
 <script setup lang="ts">
-import { useScrollLock, onKeyStroke } from "@vueuse/core";
 import { Button } from "#ginko-docs/components/ui/button";
 import { Kbd } from "#ginko-docs/components/ui/kbd";
 import { Separator } from "#ginko-docs/components/ui/separator";
-import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+  SheetTrigger,
+} from "#ginko-docs/components/ui/sheet";
+import { computed, nextTick, ref, watch } from "vue";
+import {
+  findFirstNavigationPage,
+  navigationItemContainsPath,
+  normalizeNavigationPath,
+} from "@lupinum/ginko-content/navigation";
 import { useI18n, useRoute } from "#imports";
 import { useLocalizedPath } from "#ginko-docs/composables/useLocalizedPath";
 import { useSiteNavigation } from "#ginko-docs/composables/useSiteNavigation";
 import { useCommandCenterState } from "#ginko-docs/features/search/useCommandCenter";
+import { useMetaKey } from "#ginko-docs/composables/useMetaKey";
+import { useDocsNavigationData } from "#ginko-docs/features/docs/composables/useDocsNavigationData";
+import {
+  getDocsNavigationSections,
+  normalizeDocsNavigationItem,
+} from "#ginko-docs/features/docs/docs-navigation";
 import ModeToggle from "#ginko-docs/components/site/ModeToggle.vue";
+import { useGinkoDocsConfig } from "#ginko-docs/composables/useGinkoDocsConfig";
 
-const { mainNav } = useSiteNavigation();
+const { mainNav, socialLinks } = useSiteNavigation();
 const { openCommandCenter } = useCommandCenterState();
+const config = useGinkoDocsConfig();
 const { t } = useI18n();
 const route = useRoute();
 const isMobileMenuOpen = ref(false);
-const headerElement = ref<HTMLElement | null>(null);
-const mobileMenuTop = ref("var(--site-header-height)");
 const localizedPath = useLocalizedPath();
 
 const isActive = (href: string) => route.path === href || route.path.startsWith(href + "/");
 
-function mobileNavIcon(href: string) {
-  if (href.includes("blog")) return "lucide:file-text";
-  if (href.includes("dok") || href.includes("doc")) return "lucide:book-open";
-  return "lucide:circle";
-}
+const metaKey = useMetaKey();
+const searchShortcut = computed(() => (metaKey.value === "⌘" ? "⌘K" : "Ctrl K"));
+const homePath = computed(() => localizedPath("home"));
+const docsPath = computed(() => localizedPath("docs"));
+
+// The mobile menu has two levels: the root nav in hero-scale type, and a docs
+// level with the section entry links. The docs nav link drills in; every other
+// link navigates directly.
+const { data: docsNavData } = useDocsNavigationData();
+const docsSections = computed(() =>
+  getDocsNavigationSections(
+    (docsNavData.value ?? []).map((item, index) => normalizeDocsNavigationItem(item, index)),
+  ),
+);
+const docsMenuSections = computed(() => {
+  const currentPath = normalizeNavigationPath(route.path);
+
+  return docsSections.value
+    .map((section) => ({
+      id: section.id,
+      title: section.title,
+      links: section.items
+        .map((item) => ({
+          id: item.id,
+          label: item.title,
+          href: item.path ?? findFirstNavigationPage(item.children)?.path,
+          active: navigationItemContainsPath(item, currentPath),
+        }))
+        .filter((link): link is typeof link & { href: string } => Boolean(link.href)),
+    }))
+    .filter((section) => section.links.length > 0);
+});
+const hasDocsLevel = computed(() => docsMenuSections.value.length > 0);
 
-const mobileNavItems = computed(() =>
+const rootNavItems = computed(() =>
   mainNav.value.map((item) => ({
-    label: item.label,
-    href: item.href,
-    icon: mobileNavIcon(item.href),
-    children: [] as { label: string; href: string }[],
+    ...item,
+    drill: hasDocsLevel.value && item.href === docsPath.value,
   })),
 );
-const homePath = computed(() => localizedPath("home"));
+const docsLevelTitle = computed(
+  () => rootNavItems.value.find((item) => item.drill)?.label ?? t("nav.documentation"),
+);
 
-// Scroll lock when menu is open
-const scrollLock = useScrollLock(import.meta.client ? document.body : null);
+type MenuLevel = "root" | "docs";
+const menuLevel = ref<MenuLevel>("root");
+const docsDrillButton = ref<HTMLButtonElement | null>(null);
+const docsBackButton = ref<HTMLButtonElement | null>(null);
 
-watch(isMobileMenuOpen, (open) => {
-  scrollLock.value = open;
-  if (open) {
-    void nextTick(updateMobileMenuTop);
-  }
-});
+function setDrillButtonRef(el: unknown) {
+  docsDrillButton.value = el instanceof HTMLButtonElement ? el : null;
+}
 
-function updateMobileMenuTop() {
-  if (!import.meta.client || !headerElement.value) return;
-  mobileMenuTop.value = `${Math.max(0, headerElement.value.getBoundingClientRect().bottom)}px`;
+async function drillIntoDocs() {
+  menuLevel.value = "docs";
+  await nextTick();
+  docsBackButton.value?.focus({ preventScroll: true });
 }
 
-function handleResize() {
-  if (isMobileMenuOpen.value) {
-    updateMobileMenuTop();
-  }
+async function backToRoot() {
+  menuLevel.value = "root";
+  await nextTick();
+  docsDrillButton.value?.focus({ preventScroll: true });
 }
 
-onMounted(() => window.addEventListener("resize", handleResize));
-onBeforeUnmount(() => window.removeEventListener("resize", handleResize));
+function closeMenu() {
+  isMobileMenuOpen.value = false;
+}
 
+// Scroll lock, Escape handling, and focus trapping come from the Sheet
+// (reka-ui Dialog); only route-driven closing is ours.
 function openSearch() {
   isMobileMenuOpen.value = false;
   openCommandCenter();
 }
 
-// Close on Escape
-onKeyStroke("Escape", () => {
-  if (isMobileMenuOpen.value) {
-    isMobileMenuOpen.value = false;
+watch(isMobileMenuOpen, (open) => {
+  if (open) {
+    // Context-aware entry: docs readers land on their section links first.
+    menuLevel.value = hasDocsLevel.value && isActive(docsPath.value) ? "docs" : "root";
   }
 });
 
-// Close menu on navigation
 watch(
   () => route.path,
   () => {
@@ -84,7 +131,6 @@ watch(
 
 <template>
   <header
-    ref="headerElement"
     class="sticky top-0 z-50 flex h-14 w-full shrink-0 items-center border-b border-border bg-background/90 backdrop-blur-md"
   >
     <div class="mx-auto flex w-full max-w-screen-2xl flex-1 items-center gap-4 px-4 md:px-6">
@@ -120,7 +166,7 @@ watch(
         >
           <Icon name="lucide:search" class="size-4 shrink-0" aria-hidden="true" />
           <span class="flex-1 text-left">{{ t("nav.search") }}...</span>
-          <Kbd class="h-5 bg-background text-[10px]">⌘K</Kbd>
+          <Kbd class="h-5 bg-background text-[10px]">{{ searchShortcut }}</Kbd>
         </Button>
         <Button
           variant="ghost"
@@ -148,103 +194,191 @@ watch(
           </template>
         </ClientOnly>
 
+        <div v-if="config.nav.socialIcons" class="hidden md:block">
+          <SiteSocialLinks />
+        </div>
+
         <SiteLocaleSwitcher class="hidden md:flex" />
-        <Button
-          variant="ghost"
-          size="icon"
-          class="md:hidden"
-          :aria-label="isMobileMenuOpen ? t('nav.closeMenu') : t('nav.openMenu')"
-          :aria-expanded="isMobileMenuOpen"
-          type="button"
-          @click="isMobileMenuOpen = !isMobileMenuOpen"
-        >
-          <Icon
-            :name="isMobileMenuOpen ? 'lucide:x' : 'lucide:menu'"
-            class="size-5"
-            aria-hidden="true"
-          />
-        </Button>
-      </div>
-    </div>
-  </header>
-  <Transition
-    enter-active-class="transition-all duration-200 ease-out"
-    enter-from-class="-translate-y-4 opacity-0"
-    enter-to-class="translate-y-0 opacity-100"
-    leave-active-class="transition-all duration-200 ease-in"
-    leave-from-class="translate-y-0 opacity-100"
-    leave-to-class="-translate-y-4 opacity-0"
-  >
-    <div
-      v-if="isMobileMenuOpen"
-      class="fixed inset-x-0 bottom-0 z-40 [scrollbar-width:none] overflow-y-auto bg-background/95 backdrop-blur-md md:hidden [&::-webkit-scrollbar]:hidden"
-      :style="{ top: mobileMenuTop }"
-    >
-      <div class="px-5 pt-9 pb-12">
-        <nav v-if="mobileNavItems.length" class="space-y-4" :aria-label="t('nav.mobile')">
-          <p class="px-3 text-xs font-bold tracking-[0.16em] text-muted-foreground uppercase">
-            {{ t("nav.navigationSection") }}
-          </p>
-          <div class="overflow-hidden rounded-xl border border-border bg-background shadow-xs">
-            <NuxtLink
-              v-for="(group, index) in mobileNavItems"
-              :key="group.href"
-              :to="group.href"
-              class="flex h-[4.25rem] items-center gap-4 px-5 text-base font-semibold transition-colors hover:bg-muted/50"
-              :class="[
-                isActive(group.href) ? 'text-primary' : 'text-foreground',
-                index > 0 && 'border-t border-border',
-              ]"
-              @click="isMobileMenuOpen = false"
-            >
-              <span
-                class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-foreground"
-              >
-                <Icon :name="group.icon" class="size-5" aria-hidden="true" />
-              </span>
-              <span class="min-w-0 flex-1 truncate">{{ group.label }}</span>
-              <Icon
-                name="lucide:chevron-right"
-                class="size-5 shrink-0 text-muted-foreground"
-                aria-hidden="true"
-              />
-            </NuxtLink>
-          </div>
-        </nav>
-
-        <div class="space-y-4" :class="mobileNavItems.length ? 'mt-9' : ''">
-          <p class="px-3 text-xs font-bold tracking-[0.16em] text-muted-foreground uppercase">
-            {{ t("nav.settingsHelp") }}
-          </p>
-          <div class="overflow-hidden rounded-xl border border-border bg-background shadow-xs">
-            <button
+        <Sheet v-model:open="isMobileMenuOpen">
+          <SheetTrigger as-child>
+            <Button
+              variant="ghost"
+              size="icon"
+              class="md:hidden"
+              :aria-label="t('nav.openMenu')"
               type="button"
-              class="flex h-[4.25rem] w-full items-center gap-4 px-5 text-start text-base font-semibold transition-colors hover:bg-muted/50"
-              @click="openSearch"
             >
-              <span
-                class="flex size-11 shrink-0 items-center justify-center rounded-lg bg-muted/60 text-foreground"
+              <Icon name="lucide:menu" class="size-5" aria-hidden="true" />
+            </Button>
+          </SheetTrigger>
+          <SheetContent
+            side="top"
+            class="inset-0 h-dvh gap-0 overflow-hidden border-b-0 bg-background/95 p-0 backdrop-blur-md md:hidden"
+          >
+            <SheetTitle class="sr-only">{{ t("nav.mobile") }}</SheetTitle>
+            <SheetDescription class="sr-only">{{ t("nav.main") }}</SheetDescription>
+            <div class="flex h-full min-h-0 flex-col pt-16">
+              <div
+                class="flex min-h-0 w-[200%] flex-1 transition-transform duration-300 ease-[cubic-bezier(0.32,0.72,0,1)] motion-reduce:transition-none"
+                :class="menuLevel === 'docs' ? '-translate-x-1/2' : ''"
               >
-                <Icon name="lucide:search" class="size-5" aria-hidden="true" />
-              </span>
-              <span class="min-w-0 flex-1 truncate">{{ t("nav.search") }}</span>
-              <Icon
-                name="lucide:chevron-right"
-                class="size-5 shrink-0 text-muted-foreground"
-                aria-hidden="true"
-              />
-            </button>
-            <div class="grid grid-cols-2 border-t border-border">
-              <ModeToggle variant="menu-tile" class="border-r border-border" />
-              <SiteLocaleSwitcher
-                variant="menu-tile"
-                class="flex"
-                @navigate="isMobileMenuOpen = false"
-              />
+                <nav
+                  class="flex min-h-0 w-1/2 flex-col overflow-x-hidden overflow-y-auto px-6"
+                  :aria-label="t('nav.mobile')"
+                  :inert="menuLevel !== 'root'"
+                >
+                  <div class="m-auto w-full space-y-8 py-6">
+                    <template v-for="item in rootNavItems" :key="item.href">
+                      <button
+                        v-if="item.drill"
+                        :ref="setDrillButtonRef"
+                        type="button"
+                        class="group block w-full text-start"
+                        @click="drillIntoDocs"
+                      >
+                        <span
+                          class="flex items-center gap-2.5 text-[2.5rem] leading-[1.05] font-semibold tracking-[-0.03em] text-balance"
+                          :class="
+                            isActive(item.href)
+                              ? 'text-foreground'
+                              : 'text-foreground/70 transition-colors group-hover:text-foreground'
+                          "
+                        >
+                          {{ item.label }}
+                          <Icon
+                            name="lucide:chevron-right"
+                            class="size-6 shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5"
+                            aria-hidden="true"
+                          />
+                        </span>
+                        <span
+                          v-if="item.description"
+                          class="mt-1.5 block text-sm text-muted-foreground"
+                        >
+                          {{ item.description }}
+                        </span>
+                      </button>
+                      <NuxtLink v-else :to="item.href" class="group block" @click="closeMenu">
+                        <span
+                          class="block text-[2.5rem] leading-[1.05] font-semibold tracking-[-0.03em] text-balance"
+                          :class="
+                            isActive(item.href)
+                              ? 'text-foreground'
+                              : 'text-foreground/70 transition-colors group-hover:text-foreground'
+                          "
+                        >
+                          {{ item.label }}
+                        </span>
+                        <span
+                          v-if="item.description"
+                          class="mt-1.5 block text-sm text-muted-foreground"
+                        >
+                          {{ item.description }}
+                        </span>
+                      </NuxtLink>
+                    </template>
+                  </div>
+                </nav>
+
+                <nav
+                  v-if="hasDocsLevel"
+                  class="flex min-h-0 w-1/2 flex-col px-6"
+                  :aria-label="docsLevelTitle"
+                  :inert="menuLevel !== 'docs'"
+                >
+                  <button
+                    ref="docsBackButton"
+                    type="button"
+                    class="flex items-center gap-1 self-start py-2 text-sm font-semibold text-muted-foreground transition-colors hover:text-foreground"
+                    @click="backToRoot"
+                  >
+                    <Icon name="lucide:chevron-left" class="size-4" aria-hidden="true" />
+                    {{ t("nav.menu") }}
+                  </button>
+                  <p
+                    class="mt-1 text-[2rem] leading-[1.1] font-semibold tracking-[-0.03em] text-foreground"
+                  >
+                    {{ docsLevelTitle }}
+                  </p>
+                  <div class="-mx-2 mt-3 min-h-0 flex-1 overflow-x-hidden overflow-y-auto pb-4">
+                    <template v-for="section in docsMenuSections" :key="section.id">
+                      <p
+                        v-if="section.title"
+                        class="mt-6 mb-1 px-2 text-xs font-semibold tracking-[0.08em] text-muted-foreground uppercase first:mt-2"
+                      >
+                        {{ section.title }}
+                      </p>
+                      <NuxtLink
+                        v-for="link in section.links"
+                        :key="link.id"
+                        :to="link.href"
+                        class="flex items-center rounded-md px-2 py-2 text-lg font-semibold transition-colors"
+                        :class="
+                          link.active
+                            ? 'bg-primary/10 text-primary'
+                            : 'text-foreground hover:bg-muted/60'
+                        "
+                        :aria-current="link.active ? 'true' : undefined"
+                        @click="closeMenu"
+                      >
+                        {{ link.label }}
+                        <span
+                          v-if="link.active"
+                          class="mr-1 ml-auto size-1.5 rounded-full bg-primary"
+                          aria-hidden="true"
+                        />
+                      </NuxtLink>
+                    </template>
+                  </div>
+                </nav>
+              </div>
+
+              <div class="shrink-0 space-y-3.5 px-6 pt-4 pb-8">
+                <button
+                  type="button"
+                  class="flex h-11 w-full items-center gap-2.5 rounded-md border border-border bg-muted/40 px-4 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted"
+                  @click="openSearch"
+                >
+                  <Icon name="lucide:search" class="size-4" aria-hidden="true" />
+                  {{ t("nav.search") }}...
+                  <Kbd class="ml-auto h-5 bg-background text-[10px]">{{ searchShortcut }}</Kbd>
+                </button>
+                <div class="flex flex-wrap items-center gap-2">
+                  <ClientOnly>
+                    <ModeToggle variant="pill" />
+                    <template #fallback>
+                      <span
+                        class="h-9 w-24 rounded-full border border-border bg-background"
+                        aria-hidden="true"
+                      />
+                    </template>
+                  </ClientOnly>
+                  <SiteLocaleSwitcher variant="pill" class="flex" @navigate="closeMenu" />
+                  <SiteSocialLinks
+                    v-if="config.nav.socialIcons"
+                    class="ml-auto"
+                    @navigate="closeMenu"
+                  />
+                  <span v-else-if="socialLinks.length" class="ml-auto flex items-center gap-2">
+                    <NuxtLink
+                      v-for="link in socialLinks"
+                      :key="link.href"
+                      :to="link.href"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="inline-flex h-9 items-center gap-2 rounded-full border border-border px-4 text-sm font-semibold text-foreground transition-colors hover:bg-muted"
+                      @click="closeMenu"
+                    >
+                      <Icon v-if="link.icon" :name="link.icon" class="size-4" aria-hidden="true" />
+                      {{ link.label }}
+                    </NuxtLink>
+                  </span>
+                </div>
+              </div>
             </div>
-          </div>
-        </div>
+          </SheetContent>
+        </Sheet>
       </div>
     </div>
-  </Transition>
+  </header>
 </template>

package/app/components/site/SiteHeroCode.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import { computed, ref, useId } from "vue";
+import { useAsyncData, useI18n } from "#imports";
+import { cn } from "../../utils";
+import { filenameExtension, resolveFileIcon } from "../../utils/file-icons";
+
+export type SiteHeroCodeTab = {
+  label: string;
+  icon?: string;
+  filename?: string;
+  language?: string;
+  code: string;
+};
+
+const props = defineProps<{ tabs: SiteHeroCodeTab[] }>();
+
+const { t } = useI18n();
+const regionId = useId();
+const activeIndex = ref(0);
+
+const activeTab = computed(() => props.tabs[activeIndex.value] ?? props.tabs[0]);
+
+function tabIcon(tab: SiteHeroCodeTab): string {
+  return tab.icon ?? resolveFileIcon(tab.filename);
+}
+
+const HTML_ESCAPES: Record<string, string> = { "&": "&amp;", "<": "&lt;", ">": "&gt;" };
+
+function escapeHtml(input: string): string {
+  return input.replace(/[&<>]/g, (char) => HTML_ESCAPES[char] ?? char);
+}
+
+function plainLines(code: string): string {
+  return code
+    .split("\n")
+    .map((line) => `<span class="line">${escapeHtml(line)}</span>`)
+    .join("");
+}
+
+// Config code arrives as raw strings, so it skips the build-time content
+// pipeline; highlight here with the same Shiki themes the docs use.
+const { data: highlighted } = await useAsyncData(`site-hero-code-${regionId}`, async () => {
+  const { codeToHast, hastToHtml } = await import("shiki");
+
+  return Promise.all(
+    props.tabs.map(async (tab) => {
+      const lang = tab.language ?? filenameExtension(tab.filename) ?? "text";
+
+      try {
+        const root = await codeToHast(tab.code, {
+          lang,
+          themes: { light: "light-plus", dark: "dark-plus" },
+        });
+        const pre = root.children.find((node) => node.type === "element");
+        const code = pre?.children.find((node) => node.type === "element");
+        if (!code) return plainLines(tab.code);
+
+        return hastToHtml({ type: "root" as const, children: code.children });
+      } catch {
+        return plainLines(tab.code);
+      }
+    }),
+  );
+});
+</script>
+
+<template>
+  <div class="site-hero-code content-codegroup not-prose group my-0 shadow-md">
+    <div class="content-codegroup-header">
+      <div v-if="tabs.length > 1" class="content-codegroup-tabs" role="tablist">
+        <button
+          v-for="(tab, index) in tabs"
+          :key="tab.label"
+          type="button"
+          role="tab"
+          :aria-selected="activeIndex === index ? 'true' : 'false'"
+          :class="
+            cn('content-codegroup-tab', activeIndex === index && 'content-codegroup-tab-active')
+          "
+          @click="activeIndex = index"
+        >
+          <Icon :name="tabIcon(tab)" class="content-codegroup-tab-icon" aria-hidden="true" />
+          {{ tab.label }}
+        </button>
+      </div>
+      <div
+        v-else-if="activeTab"
+        class="flex min-w-0 items-center gap-2 text-sm font-medium text-muted-foreground"
+      >
+        <Icon :name="tabIcon(activeTab)" class="content-codegroup-tab-icon" aria-hidden="true" />
+        <span class="truncate">{{ activeTab.label }}</span>
+      </div>
+    </div>
+    <div class="content-codegroup-panels grid">
+      <div
+        v-for="(tab, index) in tabs"
+        :key="tab.label"
+        role="tabpanel"
+        class="col-start-1 row-start-1 min-w-0"
+        :class="activeIndex === index ? '' : 'invisible'"
+        :inert="activeIndex !== index"
+      >
+        <figure
+          dir="ltr"
+          data-fd-codeblock
+          class="content-codeblock group shiki not-prose content-codeblock-in-group relative"
+        >
+          <div
+            role="region"
+            tabindex="0"
+            :aria-label="`${t('docs.codeSample')}: ${tab.label} (${regionId}-${index})`"
+            class="fd-scroll-container max-h-[600px] overflow-auto focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-inset"
+          >
+            <!-- Shiki output over site-owner config code, never end-user input. -->
+            <!-- eslint-disable vue/no-v-html -->
+            <pre
+              class="w-max min-w-full"
+            ><code v-html="highlighted?.[index] ?? plainLines(tab.code)" /></pre>
+            <!-- eslint-enable vue/no-v-html -->
+          </div>
+        </figure>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Hero scale: same chrome as docs code groups, one step larger. */
+.site-hero-code {
+  padding: 0.25rem 0.375rem 0.375rem;
+}
+
+.site-hero-code .content-codegroup-header {
+  padding: 0.375rem 0.375rem 0.25rem 0.625rem;
+}
+
+.site-hero-code .content-codegroup-tabs {
+  gap: 0.375rem;
+}
+
+.site-hero-code .content-codegroup-tab {
+  height: 2.125rem;
+  gap: 0.5rem;
+  padding: 0 0.625rem 0.4375rem;
+  font-size: 0.9375rem;
+}
+
+.site-hero-code .content-codegroup-tab-icon {
+  width: 1rem;
+  height: 1rem;
+}
+
+.site-hero-code .content-codeblock pre {
+  padding-top: 1.125rem;
+  padding-bottom: 1.125rem;
+  font-size: 0.875rem;
+  line-height: 1.75;
+}
+
+.site-hero-code :deep([data-fd-codeblock] pre code .line) {
+  padding-right: 1.5rem;
+  padding-left: 1.5rem;
+}
+</style>