@lupinum/ginko-docs 0.4.0-rc.8 → 0.4.0

package/app/components/site/SiteFooter.vue

@@ -1,90 +0,0 @@
-<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";
-
-const { site, socialLinks } = useSiteNavigation();
-const { t } = useI18n();
-const localizedPath = useLocalizedPath();
-
-const currentYearDate = new Date();
-const resources = computed(() => [
-  { label: t("nav.documentation"), href: localizedPath("docs"), external: false },
-  ...socialLinks.value,
-]);
-</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')"
-            :aria-label="site.name"
-            class="flex items-center gap-2 font-semibold text-foreground"
-          >
-            <SiteLogoMark />
-          </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>
-        <div class="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 sm:justify-end">
-          <NuxtLink
-            v-for="link in site.legalLinks"
-            :key="link.href"
-            :to="link.href"
-            :target="link.external ? '_blank' : undefined"
-            :rel="link.external ? 'noopener noreferrer' : undefined"
-            class="underline decoration-border underline-offset-4 transition-colors hover:text-foreground hover:decoration-foreground"
-          >
-            {{ link.label }}
-          </NuxtLink>
-          <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>
-    </div>
-  </footer>
-</template>

package/app/components/site/SiteHeader.vue

@@ -1,371 +0,0 @@
-<script setup lang="ts">
-import { Button } from "#ginko-docs/components/ui/button";
-import { Kbd } from "#ginko-docs/components/ui/kbd";
-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, socialLinks } = useSiteNavigation();
-const { openCommandCenter } = useCommandCenterState();
-const config = useGinkoDocsConfig();
-const { t } = useI18n();
-const route = useRoute();
-const isMobileMenuOpen = ref(false);
-const localizedPath = useLocalizedPath();
-
-const isActive = (href: string) => route.path === href || route.path.startsWith(href + "/");
-
-const metaKey = useMetaKey();
-const searchShortcut = computed(() => (metaKey.value === "⌘" ? "⌘K" : "Ctrl K"));
-const homePath = computed(() => localizedPath("home"));
-const docsPath = computed(() => localizedPath("docs"));
-
-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 rootNavItems = computed(() =>
-  mainNav.value.map((item) => ({
-    ...item,
-    drill: hasDocsLevel.value && item.href === docsPath.value,
-  })),
-);
-const docsLevelTitle = computed(
-  () => rootNavItems.value.find((item) => item.drill)?.label ?? t("nav.documentation"),
-);
-
-type MenuLevel = "root" | "docs";
-const menuLevel = ref<MenuLevel>("root");
-const docsDrillButton = ref<HTMLButtonElement | null>(null);
-const docsBackButton = ref<HTMLButtonElement | null>(null);
-
-function setDrillButtonRef(el: unknown) {
-  docsDrillButton.value = el instanceof HTMLButtonElement ? el : null;
-}
-
-async function drillIntoDocs() {
-  menuLevel.value = "docs";
-  await nextTick();
-  docsBackButton.value?.focus({ preventScroll: true });
-}
-
-async function backToRoot() {
-  menuLevel.value = "root";
-  await nextTick();
-  docsDrillButton.value?.focus({ preventScroll: true });
-}
-
-function closeMenu() {
-  isMobileMenuOpen.value = false;
-}
-
-function openSearch() {
-  isMobileMenuOpen.value = false;
-  openCommandCenter();
-}
-
-watch(isMobileMenuOpen, (open) => {
-  if (open) {
-    menuLevel.value = hasDocsLevel.value && isActive(docsPath.value) ? "docs" : "root";
-  }
-});
-
-watch(
-  () => route.path,
-  () => {
-    isMobileMenuOpen.value = false;
-  },
-);
-</script>
-
-<template>
-  <header
-    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 min-w-0 flex-1 items-center gap-3 px-4 min-[691px]:gap-4 min-[691px]:px-6"
-    >
-      <NuxtLink
-        :to="homePath"
-        class="flex shrink-0 items-center gap-2 font-semibold text-foreground"
-        :aria-label="t('nav.home')"
-      >
-        <SiteLogoMark />
-      </NuxtLink>
-
-      <nav
-        class="ml-1 hidden shrink-0 items-center gap-1 min-[691px]:ml-2 min-[691px]:flex"
-        :aria-label="t('nav.main')"
-      >
-        <NuxtLink
-          v-for="item in mainNav"
-          :key="item.href"
-          :to="item.href"
-          class="rounded-lg px-3 py-1.5 text-sm font-medium transition-colors"
-          :class="
-            isActive(item.href)
-              ? 'bg-muted text-foreground'
-              : 'text-muted-foreground hover:bg-muted hover:text-foreground'
-          "
-        >
-          {{ item.label }}
-        </NuxtLink>
-      </nav>
-
-      <div class="ml-auto flex min-w-0 items-center gap-1 min-[691px]:gap-1.5">
-        <Button
-          variant="outline"
-          class="hidden h-9 w-[22.5rem] min-w-0 max-w-[22.5rem] flex-1 justify-start gap-2 overflow-hidden rounded-lg border-border/70 bg-muted/35 px-3 whitespace-nowrap text-muted-foreground min-[691px]:flex"
-          :aria-label="t('nav.searchDocumentation')"
-          type="button"
-          @click="openSearch"
-        >
-          <Icon name="lucide:search" class="size-4 shrink-0" aria-hidden="true" />
-          <span class="min-w-0 flex-1 truncate text-left" aria-hidden="true">{{
-            t("nav.searchDocumentation")
-          }}</span>
-          <Kbd class="hidden h-5 shrink-0 bg-background text-[10px] min-[900px]:inline-flex">{{
-            searchShortcut
-          }}</Kbd>
-        </Button>
-
-        <div class="flex shrink-0 items-center gap-0.5">
-          <Button
-            variant="ghost"
-            size="icon"
-            class="size-9 rounded-lg min-[691px]:hidden"
-            :aria-label="t('nav.searchDocumentation')"
-            type="button"
-            @click="openSearch"
-          >
-            <Icon name="lucide:search" class="size-[18px]" aria-hidden="true" />
-          </Button>
-
-          <ClientOnly>
-            <ModeToggle class="hidden min-[691px]:inline-flex" />
-
-            <template #fallback>
-              <span
-                class="hidden size-9 shrink-0 rounded-lg min-[691px]:inline-flex"
-                aria-hidden="true"
-              />
-            </template>
-          </ClientOnly>
-
-          <SiteLocaleSwitcher class="hidden min-[691px]:flex" />
-
-          <SiteSocialLinks v-if="config.nav.socialIcons" />
-
-          <Sheet v-model:open="isMobileMenuOpen">
-            <SheetTrigger as-child>
-              <Button
-                variant="ghost"
-                size="icon"
-                class="size-9 rounded-lg min-[691px]:hidden"
-                :aria-label="t('nav.openMenu')"
-                type="button"
-              >
-                <Icon name="lucide:menu" class="size-[18px]" 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 min-[691px]: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' : ''"
-                >
-                  <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-muted text-foreground'
-                              : '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 border-t border-border px-6 pt-4 pb-8">
-                  <ClientOnly>
-                    <ModeToggle variant="menu-row" />
-                    <SiteLocaleSwitcher variant="menu-row" @navigate="closeMenu" />
-
-                    <template #fallback>
-                      <span class="block h-28" aria-hidden="true" />
-                    </template>
-                  </ClientOnly>
-                  <div
-                    v-if="!config.nav.socialIcons && socialLinks.length"
-                    class="flex flex-wrap 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>
-                  </div>
-                </div>
-              </div>
-            </SheetContent>
-          </Sheet>
-        </div>
-      </div>
-    </div>
-  </header>
-</template>

package/app/components/site/SiteHeroCode.vue

@@ -1,173 +0,0 @@
-<script setup lang="ts">
-import { computed, ref, useId } from "vue";
-import { useAsyncData, useI18n, useRuntimeConfig } 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 runtimeConfig = useRuntimeConfig();
-const syntaxThemes = computed(() => {
-  const themes = runtimeConfig.public.ginkoDocs?.syntaxHighlighting?.themes;
-  return {
-    light: themes?.light ?? "light-plus",
-    dark: themes?.dark ?? "dark-plus",
-  };
-});
-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 configured Shiki theme pair.
-const { data: highlighted } = await useAsyncData(`site-hero-code-${regionId}`, async () => {
-  const { codeToHast, hastToHtml } = await import("shiki");
-  const themes = syntaxThemes.value;
-
-  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,
-        });
-        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>

package/app/components/site/SiteInteractionLayer.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { defineAsyncComponent, onBeforeUnmount, onMounted, watch } from "vue";
-import { useRoute } from "#imports";
-import SiteSearchPageHighlight from "#ginko-docs/features/search/components/SiteSearchPageHighlight.vue";
-import { useCommandCenterState } from "#ginko-docs/features/search/useCommandCenter";
-
-const SiteCommandCenter = defineAsyncComponent(
-  () => import("#ginko-docs/features/search/components/SiteCommandCenter.vue"),
-);
-const route = useRoute();
-const { open, openCommandCenter, closeCommandCenter } = useCommandCenterState();
-
-watch(
-  () => route.fullPath,
-  () => closeCommandCenter(),
-);
-
-function handleGlobalShortcut(event: KeyboardEvent) {
-  const element = event.target as HTMLElement | null;
-  const typing =
-    element instanceof HTMLElement &&
-    (element.isContentEditable || ["INPUT", "TEXTAREA", "SELECT"].includes(element.tagName));
-
-  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") {
-    event.preventDefault();
-    openCommandCenter();
-  } else if (!typing && event.key === "/") {
-    event.preventDefault();
-    openCommandCenter();
-  }
-}
-
-onMounted(() => window.addEventListener("keydown", handleGlobalShortcut));
-onBeforeUnmount(() => window.removeEventListener("keydown", handleGlobalShortcut));
-</script>
-
-<template>
-  <ClientOnly>
-    <SiteCommandCenter v-if="open" />
-    <SiteSearchPageHighlight />
-  </ClientOnly>
-</template>