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

package/app/features/search/useCommandCenter.ts

@@ -1,292 +0,0 @@
-import { useLocalStorage } from "@vueuse/core";
-import { useContentSearch } from "@lupinum/ginko-content/client";
-import { computed, watch } from "vue";
-import { navigateTo, useI18n, useState } from "#imports";
-import { useLocalizedPath } from "#ginko-docs/composables/useLocalizedPath";
-import { useSiteNavigation } from "#ginko-docs/composables/useSiteNavigation";
-import {
-  getDocsNavigationGroups,
-  type DocsNavigationItem,
-} from "#ginko-docs/features/docs/docs-navigation";
-import { useDocsNavigation } from "#ginko-docs/features/docs/composables/useDocsNavigation";
-import {
-  dedupeCommandCenterItems,
-  groupCommandCenterItems,
-  PAGE_HIGHLIGHT_STORAGE_KEY,
-  rememberRecentItem,
-  resolveRecentItems,
-  type CommandCenterItem,
-  type StoredRecentItem,
-} from "#ginko-docs/features/search/command-center";
-
-const MAX_DEFAULT_PAGE_ITEMS = 6;
-const MAX_DEFAULT_DOC_ITEMS = 3;
-
-export function useCommandCenterState() {
-  const open = useState<boolean>("site-command-center-open", () => false);
-  const query = useState<string>("site-command-center-query", () => "");
-
-  function closeCommandCenter() {
-    open.value = false;
-    query.value = "";
-  }
-
-  function openCommandCenter(initialQuery = "") {
-    query.value = initialQuery;
-    open.value = true;
-  }
-
-  return {
-    open,
-    query,
-    openCommandCenter,
-    closeCommandCenter,
-  };
-}
-
-function flattenNavItems(items: DocsNavigationItem[]): DocsNavigationItem[] {
-  const output: DocsNavigationItem[] = [];
-  for (const item of items) {
-    output.push(item);
-    if (item.children.length > 0) {
-      output.push(...flattenNavItems(item.children));
-    }
-  }
-  return output;
-}
-
-export async function useCommandCenter() {
-  const { locale, t } = useI18n();
-  const localizedPath = useLocalizedPath();
-  const {
-    open,
-    query,
-    openCommandCenter,
-    closeCommandCenter: closeState,
-  } = useCommandCenterState();
-  const recentSelections = useLocalStorage<StoredRecentItem[]>("site-command-center-recent", []);
-
-  const { mainNav, socialLinks } = useSiteNavigation();
-  // Start every context-bound composable before the first await. Calling a
-  // Nuxt/i18n composable after an awaited operation loses the setup context.
-  const docsNavigationResult = useDocsNavigation();
-  const contentSearchResult = useContentSearch({
-    limit: 8,
-    locale: () => locale.value,
-  });
-  const [
-    { sections },
-    {
-      query: searchQuery,
-      results: searchResults,
-      pending: searchPending,
-      error: searchError,
-      isEmpty: searchIsEmpty,
-    },
-  ] = await Promise.all([docsNavigationResult, contentSearchResult]);
-
-  const contentSearchItems = computed<CommandCenterItem[]>(() =>
-    searchResults.value.map((hit) => {
-      const href = hit.anchor ? `${hit.path}#${hit.anchor}` : hit.path;
-
-      return {
-        id: `search-${href}`,
-        title: hit.title,
-        subtitle: hit.excerpt,
-        href,
-        group: "search",
-        icon: hit.collection === "blog" ? "lucide:newspaper" : "lucide:book-open",
-        badge: hit.collection === "blog" ? t("nav.blog") : t("docs.label"),
-      };
-    }),
-  );
-
-  const pageItems = computed<CommandCenterItem[]>(() => {
-    const featured: CommandCenterItem[] = [
-      {
-        id: "page-home",
-        title: t("command.pages.home.title"),
-        subtitle: t("command.pages.home.description"),
-        href: localizedPath("home"),
-        group: "pages",
-        icon: "lucide:home",
-        keywords: ["landing", "overview", "hero"],
-      },
-    ];
-
-    const fromMainNav = mainNav.value.map<CommandCenterItem>((item) => ({
-      id: `page-main-${item.href}`,
-      title: item.label,
-      subtitle: t("command.pages.primary"),
-      href: item.href,
-      group: "pages",
-      icon: item.href === localizedPath("blog") ? "lucide:newspaper" : "lucide:file-text",
-      keywords: ["navigation", item.label],
-    }));
-
-    const fromFooter = [
-      { label: t("nav.documentation"), href: localizedPath("docs") },
-      ...socialLinks.value,
-    ]
-      .filter((item) => !(item as { external?: boolean }).external)
-      .map<CommandCenterItem>((item) => ({
-        id: `page-footer-${item.href}`,
-        title: item.label,
-        subtitle: t("command.pages.secondary"),
-        href: item.href,
-        group: "pages",
-        icon: "lucide:file-text",
-        keywords: ["footer", item.label],
-      }));
-
-    return dedupeCommandCenterItems([...featured, ...fromMainNav, ...fromFooter]);
-  });
-
-  const docsItems = computed<CommandCenterItem[]>(() => {
-    const navigationEntries = sections.value.flatMap((section) =>
-      getDocsNavigationGroups(section).flatMap((group) =>
-        flattenNavItems(group.items)
-          .filter((item) => item.path)
-          .map<CommandCenterItem>((item) => ({
-            id: `doc-${item.path}`,
-            title: item.title,
-            subtitle: group.title ?? section.title ?? t("docs.label"),
-            href: item.path,
-            group: "docs_nav",
-            icon: item.icon ?? "lucide:book-open",
-            keywords: [section.title ?? "", group.title ?? "", item.badge ?? "", item.title],
-            badge: item.badge,
-          })),
-      ),
-    );
-
-    const sectionIndexEntries = sections.value.flatMap<CommandCenterItem>((section) =>
-      section.path && section.title
-        ? [
-            {
-              id: `doc-section-${section.path}`,
-              title: section.title,
-              subtitle: t("command.pages.documentation"),
-              href: section.path,
-              group: "docs_nav",
-              icon: section.icon ?? "lucide:book-open",
-              keywords: [section.title],
-            },
-          ]
-        : [],
-    );
-
-    return dedupeCommandCenterItems([...sectionIndexEntries, ...navigationEntries]);
-  });
-
-  const actionItems = computed<CommandCenterItem[]>(() => {
-    const github = socialLinks.value.find((item) => item.platform === "github");
-    return github
-      ? [
-          {
-            id: "action-github",
-            title: t("command.actions.github.title"),
-            subtitle: t("command.actions.github.description"),
-            href: github.href,
-            external: true,
-            group: "actions" as const,
-            icon: github.icon ?? "ginko-social:github",
-            keywords: ["repo", "source", "code"],
-          },
-        ]
-      : [];
-  });
-
-  const canonicalItems = computed(() =>
-    dedupeCommandCenterItems([...pageItems.value, ...docsItems.value, ...actionItems.value]),
-  );
-
-  const recentItems = computed<CommandCenterItem[]>(() => {
-    if (query.value) return [];
-
-    return resolveRecentItems(recentSelections.value, canonicalItems.value);
-  });
-
-  const defaultItems = computed<CommandCenterItem[]>(() => {
-    const recentSourceIds = new Set(recentItems.value.map((item) => item.sourceId));
-    const docSectionItems = docsItems.value.slice(0, MAX_DEFAULT_DOC_ITEMS);
-
-    return dedupeCommandCenterItems([
-      ...pageItems.value.slice(0, MAX_DEFAULT_PAGE_ITEMS),
-      ...docSectionItems,
-      ...actionItems.value,
-    ]).filter((item) => !recentSourceIds.has(item.id));
-  });
-
-  const groupedItems = computed(() => {
-    if (query.value.trim()) {
-      return contentSearchItems.value.length
-        ? [
-            {
-              id: "search" as const,
-              title: t("command.groups.search"),
-              items: contentSearchItems.value,
-            },
-          ]
-        : [];
-    }
-    return groupCommandCenterItems([...recentItems.value, ...defaultItems.value], (group) =>
-      t(`command.groups.${group}`),
-    );
-  });
-
-  function rememberSelection(item: CommandCenterItem) {
-    const canonicalItem =
-      item.group === "search"
-        ? canonicalItems.value.find((candidate) => candidate.href === item.href)
-        : item;
-    if (canonicalItem) {
-      recentSelections.value = rememberRecentItem(canonicalItem, recentSelections.value);
-    }
-  }
-
-  function closeCommandCenter() {
-    closeState();
-    searchQuery.value = "";
-  }
-
-  async function selectItem(item: CommandCenterItem) {
-    const submittedQuery = query.value.trim();
-    rememberSelection(item);
-    closeCommandCenter();
-
-    if (!item.href) return;
-
-    if (item.external) {
-      if (import.meta.client) {
-        window.open(item.href, "_blank", "noopener,noreferrer");
-      }
-      return;
-    }
-
-    if (submittedQuery && import.meta.client) {
-      sessionStorage.setItem(
-        PAGE_HIGHLIGHT_STORAGE_KEY,
-        JSON.stringify({ href: item.href, query: submittedQuery }),
-      );
-    }
-
-    await navigateTo(item.href);
-  }
-
-  watch(query, (value) => {
-    searchQuery.value = value;
-  });
-
-  return {
-    open,
-    query,
-    groupedItems,
-    searchPending,
-    searchError,
-    searchIsEmpty,
-    openCommandCenter,
-    closeCommandCenter,
-    selectItem,
-  };
-}

package/app/layouts/blog.vue

@@ -1,15 +0,0 @@
-<template>
-  <div class="flex min-h-dvh flex-col bg-background text-foreground selection:bg-primary/15">
-    <SiteSkipLink />
-    <SiteBanner />
-    <SiteHeader />
-    <main
-      id="main-content"
-      class="mx-auto w-full max-w-screen-2xl flex-1 px-4 pt-6 pb-12 md:px-6 md:pt-8 md:pb-16"
-    >
-      <slot />
-    </main>
-    <SiteFooter />
-    <SiteInteractionLayer />
-  </div>
-</template>

package/app/layouts/docs.vue

@@ -1,20 +0,0 @@
-<template>
-  <div class="flex min-h-dvh flex-col bg-background text-foreground selection:bg-primary/15">
-    <SiteSkipLink />
-    <SiteBanner />
-    <SiteHeader />
-
-    <div class="mx-auto flex w-full max-w-screen-2xl min-w-0 flex-1">
-      <div
-        class="pointer-events-none sticky top-[var(--site-header-height)] z-20 hidden h-[calc(100dvh-var(--site-header-height)-var(--site-banner-height,0px))] w-[var(--docs-sidebar-width)] shrink-0 overflow-hidden *:pointer-events-auto md:block"
-      >
-        <DocsSidebar />
-      </div>
-
-      <slot />
-    </div>
-
-    <SiteFooter />
-    <SiteInteractionLayer />
-  </div>
-</template>

package/app/lib/errors.ts

@@ -1,37 +0,0 @@
-export type ErrorKind = "accessDenied" | "notFound" | "server" | "unavailable";
-
-export interface NormalizedAppError {
-  kind: ErrorKind;
-  statusCode: number;
-}
-
-type ErrorLike = {
-  status?: number;
-  statusCode?: number;
-};
-
-function isObject(value: unknown): value is Record<string, unknown> {
-  return Boolean(value && typeof value === "object");
-}
-
-function toErrorLike(error: unknown): ErrorLike {
-  return isObject(error) ? error : {};
-}
-
-function toStatusCode(error: ErrorLike): number {
-  const status = error.statusCode ?? error.status;
-  return typeof status === "number" && Number.isInteger(status) ? status : 500;
-}
-
-function errorKind(statusCode: number): ErrorKind {
-  if (statusCode === 404) return "notFound";
-  if (statusCode === 401 || statusCode === 403) return "accessDenied";
-  if (statusCode >= 500) return "server";
-  return "unavailable";
-}
-
-export function normalizeAppError(error: unknown): NormalizedAppError {
-  const source = toErrorLike(error);
-  const statusCode = toStatusCode(source);
-  return { kind: errorKind(statusCode), statusCode };
-}

package/app/lib/schema-org.ts

@@ -1,38 +0,0 @@
-import type { LocaleCode } from "../../i18n/locales";
-
-function absoluteUrl(path: string, siteUrl: string) {
-  return new URL(path, siteUrl).toString();
-}
-
-export function createBreadcrumbSchema(
-  items: Array<{ name: string; path: string }>,
-  siteUrl: string,
-) {
-  return {
-    "@type": "BreadcrumbList",
-    itemListElement: items.map((item, index) => ({
-      "@type": "ListItem",
-      position: index + 1,
-      name: item.name,
-      item: absoluteUrl(item.path, siteUrl),
-    })),
-  };
-}
-
-export function createArticleSchema(
-  article: { date: string; description: string; title: string },
-  url: string,
-  authorName: string,
-  locale: LocaleCode,
-) {
-  return {
-    "@type": "TechArticle",
-    headline: article.title,
-    description: article.description,
-    datePublished: article.date,
-    dateModified: article.date,
-    url,
-    inLanguage: locale,
-    author: authorName ? { name: authorName } : undefined,
-  };
-}

package/app/pages/blog/[slug].vue

@@ -1,228 +0,0 @@
-<script setup lang="ts">
-import { Badge } from "#ginko-docs/components/ui/badge";
-import ContentFeedback from "#ginko-docs/components/content/Feedback.vue";
-import { Button } from "#ginko-docs/components/ui/button";
-import { createArticleSchema, createBreadcrumbSchema } from "#ginko-docs/lib/schema-org";
-import { getLocalizedSiteText } from "#ginko-docs/config/site.utils";
-import {
-  filterTocByDepth,
-  flattenTocLinks,
-  formatContentDate,
-  getMarkdownTocLinks,
-} from "#ginko-docs/utils/content";
-import { computed, watch } from "vue";
-import {
-  definePageMeta,
-  createError,
-  useAppConfig,
-  useContentPage,
-  useHead,
-  useI18n,
-  useRoute,
-  useSeoMeta,
-} from "#imports";
-import { useLocalizedPath } from "#ginko-docs/composables/useLocalizedPath";
-import { useCanonicalUrl } from "#ginko-docs/composables/useCanonicalUrl";
-import { useGinkoOgImage } from "#ginko-docs/composables/useGinkoOgImage";
-import { useSchemaJsonLd } from "#ginko-docs/composables/useSchemaJsonLd";
-import DocumentPageShell from "#ginko-docs/components/content/DocumentPageShell.vue";
-import PageMarkdownCopy from "#ginko-docs/components/content/PageMarkdownCopy.vue";
-import { useContentRouteAlternates } from "#ginko-docs/composables/useContentRouteAlternates";
-
-definePageMeta({ layout: "blog" });
-
-const { locale, t } = useI18n();
-const config = useAppConfig().ginkoDocs;
-const route = useRoute();
-const localizedPath = useLocalizedPath();
-const canonicalUrl = useCanonicalUrl();
-const { sync: syncContentRouteAlternates } = useContentRouteAlternates();
-const {
-  page: post,
-  previous,
-  next,
-  error,
-} = await useContentPage("blog", {
-  fallback: true,
-  populate: { author: "authors" },
-  surround: true,
-});
-if (error.value) throw error.value;
-if (!post.value) throw createError({ statusCode: 404, statusMessage: "Not Found" });
-syncContentRouteAlternates(post);
-
-const pageTitle = computed(() => post.value?.title ?? t("blog.fallbackTitle"));
-const pageDescription = computed(() => post.value?.description ?? t("blog.fallbackDescription"));
-const tocItems = computed(() =>
-  filterTocByDepth(flattenTocLinks(getMarkdownTocLinks(post.value?.body)), config.toc?.depth ?? 3),
-);
-const formattedDate = computed(() => formatContentDate(post.value?.date, locale.value));
-const siteName = computed(() => getLocalizedSiteText(config.site.name, locale.value));
-const articleAuthor = computed(() => post.value?.author?.name ?? siteName.value);
-const suggestions = computed(() => [previous.value, next.value].filter((entry) => entry !== null));
-
-useSeoMeta({
-  title: computed(() => `${pageTitle.value} - ${siteName.value}`),
-  description: pageDescription,
-  ogTitle: computed(() => `${pageTitle.value} - ${siteName.value}`),
-  ogDescription: pageDescription,
-  ogUrl: canonicalUrl,
-  twitterCard: "summary_large_image",
-  twitterTitle: computed(() => `${pageTitle.value} - ${siteName.value}`),
-  twitterDescription: pageDescription,
-});
-
-// Social card with the raw post title (no site-name suffix baked in).
-useGinkoOgImage({
-  title: pageTitle.value,
-  description: pageDescription.value,
-  locale: locale.value,
-});
-
-useHead(() => ({
-  link: [
-    { key: "canonical", rel: "canonical", href: canonicalUrl.value },
-    {
-      key: "rss",
-      rel: "alternate",
-      type: "application/rss+xml",
-      title: `${t("blog.title")} - ${siteName.value}`,
-      href: `${localizedPath("blog")}/rss.xml`,
-    },
-  ],
-  meta: [{ property: "og:type", content: "article" }],
-}));
-
-useSchemaJsonLd(() =>
-  post.value
-    ? [
-        createBreadcrumbSchema(
-          [
-            { name: t("blog.title"), path: localizedPath("blog") },
-            { name: post.value.title, path: post.value.route.resolvedPath },
-          ],
-          config.site.url,
-        ),
-        createArticleSchema(
-          {
-            date: post.value.date,
-            description: post.value.description,
-            title: post.value.title,
-          },
-          canonicalUrl.value,
-          articleAuthor.value,
-          locale.value,
-        ),
-      ]
-    : [],
-);
-</script>
-
-<template>
-  <DocumentPageShell :padded="false">
-    <Button as-child variant="ghost" class="mb-8 -ml-2 text-muted-foreground">
-      <NuxtLink :to="localizedPath('blog')">
-        <Icon name="lucide:arrow-left" class="size-4" aria-hidden="true" />
-        {{ t("blog.back") }}
-      </NuxtLink>
-    </Button>
-
-    <div v-if="post" class="mb-12">
-      <div class="mb-8 flex items-center justify-between gap-4">
-        <div class="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-2">
-          <Badge v-if="post.badge" variant="secondary">{{ post.badge }}</Badge>
-          <span class="text-sm text-muted-foreground"
-            >{{ formattedDate
-            }}<template v-if="post.readingTime"> · {{ post.readingTime }}</template></span
-          >
-          <span class="hidden text-sm text-muted-foreground sm:inline" aria-hidden="true"> · </span>
-          <span class="inline-flex items-center gap-2 text-sm text-muted-foreground">
-            <img
-              v-if="post.author?.avatar"
-              :src="post.author.avatar"
-              :alt="articleAuthor"
-              class="size-5 shrink-0 rounded-full border border-border object-cover"
-              loading="lazy"
-            />
-            {{ articleAuthor }}
-          </span>
-        </div>
-        <PageMarkdownCopy />
-      </div>
-      <h1
-        class="font-serif text-3xl leading-tight font-semibold tracking-tight text-foreground sm:text-4xl md:text-5xl"
-      >
-        {{ post.title }}
-      </h1>
-      <p class="mt-6 text-lg leading-8 text-muted-foreground sm:text-xl">{{ post.description }}</p>
-    </div>
-
-    <nav
-      v-if="tocItems.length"
-      :aria-label="t('blog.toc')"
-      class="not-prose mx-auto mb-12 max-w-[44rem] border-y border-border py-7"
-    >
-      <p class="mb-6 text-sm font-semibold text-foreground">{{ t("blog.toc") }}</p>
-      <ol class="grid gap-x-12 gap-y-2 sm:grid-cols-2" role="list">
-        <li v-for="(item, index) in tocItems" :key="item.id">
-          <a
-            :href="`#${item.id}`"
-            class="group grid grid-cols-[2rem_minmax(0,1fr)] gap-3 rounded-md py-1.5 transition-colors hover:bg-accent/45 sm:-mx-2 sm:px-2"
-          >
-            <span
-              class="pt-0.5 font-mono text-xs leading-6 text-muted-foreground tabular-nums transition-colors group-hover:text-foreground/70"
-            >
-              {{ String(index + 1).padStart(2, "0") }}
-            </span>
-            <span
-              class="text-sm leading-6 text-foreground/80 transition-colors group-hover:text-foreground"
-              :class="
-                item.depth === 3
-                  ? 'pl-3 text-muted-foreground'
-                  : (item.depth ?? 2) >= 4
-                    ? 'pl-6 text-muted-foreground'
-                    : ''
-              "
-            >
-              {{ item.label }}
-            </span>
-          </a>
-        </li>
-      </ol>
-    </nav>
-
-    <div v-if="post" class="content-prose mx-auto max-w-[42rem]">
-      <ContentRenderer :value="post" />
-    </div>
-
-    <ContentFeedback
-      class="mt-14 border-y border-border py-5"
-      :label="t('feedback.articleLabel')"
-    />
-
-    <div v-if="suggestions.length" class="mt-14">
-      <h2 class="mb-6 text-sm font-semibold tracking-wider text-muted-foreground uppercase">
-        {{ t("blog.moreArticles") }}
-      </h2>
-      <div class="divide-y divide-border border-y border-border">
-        <NuxtLink
-          v-for="p in suggestions"
-          :key="p.path"
-          :to="p.path"
-          class="group grid grid-cols-[minmax(0,1fr)_1.5rem] items-center gap-4 py-6 transition-colors hover:bg-accent/35 sm:px-2"
-        >
-          <h3
-            class="font-serif text-lg leading-snug font-semibold text-foreground transition-colors group-hover:text-primary"
-          >
-            {{ p.title }}
-          </h3>
-          <Icon
-            name="lucide:arrow-right"
-            class="hidden size-4 self-center text-muted-foreground transition-all group-hover:translate-x-0.5 group-hover:text-primary sm:block"
-            aria-hidden="true"
-          />
-        </NuxtLink>
-      </div>
-    </div>
-  </DocumentPageShell>
-</template>