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

package/app/assets/css/theme-presets.css

@@ -1,141 +0,0 @@
-/* Complete visual systems. Presets intentionally override palette selection;
-   use the default preset when neutral and primary must be configured alone. */
-
-html[data-theme-preset="nuxt"] {
-  /* Official Nuxt green scale. */
-  --nuxt-green-50: #effdf5;
-  --nuxt-green-100: #d9fbe8;
-  --nuxt-green-200: #b3f5d1;
-  --nuxt-green-300: #75edae;
-  --nuxt-green-400: #00dc82;
-  --nuxt-green-500: #00c16a;
-  --nuxt-green-600: #00a155;
-  --nuxt-green-700: #007f45;
-  --nuxt-green-800: #016538;
-  --nuxt-green-900: #0a5331;
-  --nuxt-green-950: #052e16;
-
-  /* Nuxt uses Slate for neutral surfaces. */
-  --theme-neutral-50: var(--color-slate-50);
-  --theme-neutral-100: var(--color-slate-100);
-  --theme-neutral-200: var(--color-slate-200);
-  --theme-neutral-300: var(--color-slate-300);
-  --theme-neutral-400: var(--color-slate-400);
-  --theme-neutral-500: var(--color-slate-500);
-  --theme-neutral-600: var(--color-slate-600);
-  --theme-neutral-700: var(--color-slate-700);
-  --theme-neutral-800: var(--color-slate-800);
-  --theme-neutral-900: var(--color-slate-900);
-  --theme-neutral-950: var(--color-slate-950);
-
-  /* Nuxt uses one recognizable brand green across interactive surfaces. */
-  --theme-primary-light: var(--nuxt-green-400);
-  --theme-primary-light-foreground: #020420;
-  --theme-primary-light-ring: var(--nuxt-green-400);
-  --theme-primary-dark: var(--nuxt-green-400);
-  --theme-primary-dark-foreground: var(--nuxt-green-950);
-  --theme-primary-dark-ring: var(--nuxt-green-400);
-
-  /* Brand surfaces can use Nuxt green with its high-contrast navy foreground. */
-  --brand: var(--nuxt-green-400);
-  --brand-foreground: #020420;
-
-  --background: #ffffff;
-  --foreground: var(--color-slate-900);
-  --card: #ffffff;
-  --card-foreground: var(--color-slate-900);
-  --popover: #ffffff;
-  --popover-foreground: var(--color-slate-900);
-  --primary: var(--theme-primary-light);
-  --primary-foreground: var(--theme-primary-light-foreground);
-  --secondary: var(--color-slate-50);
-  --secondary-foreground: var(--color-slate-900);
-  --muted: var(--color-slate-50);
-  --muted-foreground: var(--color-slate-500);
-  --accent: var(--color-slate-100);
-  --accent-foreground: var(--color-slate-900);
-  --border: var(--color-slate-200);
-  --input: var(--color-slate-200);
-  --ring: var(--nuxt-green-600);
-  --code: var(--color-slate-50);
-  --code-foreground: var(--color-slate-900);
-  --code-border: var(--color-slate-200);
-
-  --hero-bg: #ffffff;
-  --hero-bg-muted: var(--color-slate-50);
-  --hero-blue: var(--nuxt-green-400);
-  --hero-blue-light: var(--nuxt-green-300);
-  --hero-blue-dark: var(--nuxt-green-700);
-  --hero-blue-muted: var(--nuxt-green-50);
-  --hero-mint: var(--nuxt-green-400);
-  --hero-mint-dark: var(--nuxt-green-700);
-  --hero-mint-muted: var(--nuxt-green-50);
-  --hero-mint-text: var(--nuxt-green-700);
-  --hero-yellow: var(--nuxt-green-400);
-  --hero-yellow-hover: var(--nuxt-green-500);
-  --hero-yellow-dark: var(--nuxt-green-700);
-  --hero-yellow-muted: var(--nuxt-green-50);
-  --hero-coral: var(--nuxt-green-400);
-  --hero-coral-light: var(--nuxt-green-300);
-  --hero-coral-dark: var(--nuxt-green-700);
-  --hero-coral-muted: var(--nuxt-green-50);
-  --hero-coral-text: var(--nuxt-green-700);
-  --hero-check: var(--nuxt-green-400);
-  --hero-white: #ffffff;
-
-  --agent-background: var(--color-slate-950);
-  --agent-foreground: var(--color-slate-100);
-  --agent-muted: var(--color-slate-400);
-
-  /* Nuxt UI-compatible aliases for consumer-owned examples. */
-  --ui-bg: var(--background);
-  --ui-bg-muted: var(--muted);
-  --ui-bg-elevated: var(--card);
-  --ui-bg-accented: var(--accent);
-  --ui-border: var(--border);
-  --ui-border-muted: var(--border);
-  --ui-border-accented: var(--border);
-  --ui-text: var(--foreground);
-  --ui-text-default: var(--foreground);
-  --ui-text-highlighted: var(--foreground);
-  --ui-text-muted: var(--muted-foreground);
-  --ui-text-dimmed: var(--muted-foreground);
-  --ui-text-toned: var(--muted-foreground);
-  --ui-primary: var(--primary);
-}
-
-html.dark[data-theme-preset="nuxt"] {
-  --background: var(--color-slate-950);
-  --foreground: var(--color-slate-50);
-  --card: var(--color-slate-900);
-  --card-foreground: var(--color-slate-50);
-  --popover: var(--color-slate-900);
-  --popover-foreground: var(--color-slate-50);
-  --primary: var(--nuxt-green-400);
-  --primary-foreground: var(--nuxt-green-950);
-  --secondary: var(--color-slate-900);
-  --secondary-foreground: var(--color-slate-50);
-  --muted: var(--color-slate-900);
-  --muted-foreground: var(--color-slate-400);
-  --accent: var(--color-slate-800);
-  --accent-foreground: var(--color-slate-50);
-  --border: var(--color-slate-800);
-  --input: var(--color-slate-700);
-  --ring: var(--nuxt-green-400);
-  --code: var(--color-slate-900);
-  --code-foreground: var(--color-slate-50);
-  --code-border: var(--color-slate-800);
-
-  --hero-bg: var(--color-slate-950);
-  --hero-bg-muted: var(--color-slate-900);
-  --hero-blue-dark: var(--nuxt-green-400);
-  --hero-mint-dark: var(--nuxt-green-400);
-  --hero-yellow-dark: var(--nuxt-green-400);
-  --hero-coral-dark: var(--nuxt-green-400);
-  --hero-blue-muted: color-mix(in oklab, var(--nuxt-green-400) 12%, var(--color-slate-900));
-  --hero-mint-muted: var(--hero-blue-muted);
-  --hero-yellow-muted: var(--hero-blue-muted);
-  --hero-coral-muted: var(--hero-blue-muted);
-  --hero-mint-text: var(--nuxt-green-300);
-  --hero-coral-text: var(--nuxt-green-300);
-}

package/app/components/OgImage/GinkoDocs.satori.vue

@@ -1,238 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { useAppConfig } from "#imports";
-import type { GinkoDocsAppConfig } from "../../../shared/types/app-config";
-import { getLocalizedSiteText } from "../../config/site.utils";
-
-const props = withDefaults(
-  defineProps<{
-    title?: string;
-    description?: string;
-    siteName?: string;
-    logo?: string;
-    locale?: string;
-    colorBg?: string;
-    colorFg?: string;
-    colorMuted?: string;
-    colorAccent?: string;
-  }>(),
-  {
-    title: "",
-    description: "",
-    siteName: undefined,
-    logo: undefined,
-    locale: "en",
-  },
-);
-
-const config = useAppConfig().ginkoDocs as GinkoDocsAppConfig;
-const isNuxtPreset = computed(() => config.theme.preset === "nuxt");
-
-const resolvedSiteName = computed(
-  () => props.siteName ?? getLocalizedSiteText(config.site.name, props.locale),
-);
-const resolvedLogo = computed(() => props.logo ?? config.site.logo?.light);
-const resolvedNuxtIcon = computed(() => props.logo ?? "/favicon-96x96.png");
-const resolvedWordmark = computed(() =>
-  isNuxtPreset.value ? config.site.logo?.dark : config.site.logo?.light,
-);
-const resolvedColorBg = computed(
-  () => props.colorBg ?? (isNuxtPreset.value ? "#07111f" : "#ffffff"),
-);
-const resolvedColorFg = computed(
-  () => props.colorFg ?? (isNuxtPreset.value ? "#ffffff" : "#0f172a"),
-);
-const resolvedColorMuted = computed(
-  () => props.colorMuted ?? (isNuxtPreset.value ? "#aab8ca" : "#64748b"),
-);
-const resolvedColorAccent = computed(
-  () => props.colorAccent ?? (isNuxtPreset.value ? "#00dc82" : "#2563eb"),
-);
-const displayTitle = computed(() => (props.title || resolvedSiteName.value).slice(0, 120));
-const displayDescription = computed(() => (props.description ?? "").slice(0, 180));
-</script>
-
-<template>
-  <div
-    v-if="isNuxtPreset"
-    :style="{
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      backgroundColor: resolvedColorBg,
-      fontFamily: 'Public Sans',
-      overflow: 'hidden',
-      position: 'relative',
-    }"
-  >
-    <div
-      :style="{
-        position: 'absolute',
-        top: '-360px',
-        right: '-80px',
-        width: '800px',
-        height: '800px',
-        borderRadius: '9999px',
-        backgroundImage:
-          'radial-gradient(circle, rgba(0, 220, 130, 0.58) 0%, rgba(0, 220, 130, 0.08) 48%, rgba(0, 220, 130, 0) 72%)',
-      }"
-    />
-
-    <div
-      :style="{
-        display: 'flex',
-        alignItems: 'center',
-        height: '72px',
-        margin: '72px 96px 0',
-      }"
-    >
-      <img :src="resolvedNuxtIcon" :width="72" :height="72" alt="" />
-      <div
-        :style="{
-          display: 'flex',
-          alignItems: 'center',
-          height: '72px',
-          marginLeft: '20px',
-          color: resolvedColorFg,
-          fontSize: '30px',
-          fontWeight: 700,
-          letterSpacing: '-0.03em',
-        }"
-      >
-        {{ resolvedSiteName }}
-      </div>
-    </div>
-
-    <div
-      :style="{
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'flex-end',
-        flex: 1,
-        margin: '32px 96px 0',
-      }"
-    >
-      <div
-        :style="{
-          display: 'flex',
-          maxWidth: '980px',
-          marginBottom: displayDescription ? '22px' : 0,
-          fontSize: displayTitle.length > 50 ? '54px' : '72px',
-          fontWeight: 700,
-          lineHeight: 1.02,
-          color: resolvedColorFg,
-          letterSpacing: '-0.05em',
-        }"
-      >
-        {{ displayTitle }}
-      </div>
-      <div
-        v-if="displayDescription"
-        :style="{
-          display: 'flex',
-          maxWidth: '900px',
-          fontSize: '27px',
-          lineHeight: 1.4,
-          color: resolvedColorMuted,
-        }"
-      >
-        {{ displayDescription }}
-      </div>
-    </div>
-
-    <div
-      :style="{
-        display: 'flex',
-        alignItems: 'center',
-        height: '74px',
-        margin: '24px 96px 56px',
-      }"
-    >
-      <img
-        v-if="resolvedWordmark"
-        :src="resolvedWordmark"
-        :width="240"
-        :height="52"
-        alt=""
-        :style="{ objectFit: 'contain', objectPosition: 'left center' }"
-      />
-    </div>
-  </div>
-
-  <div
-    v-else
-    :style="{
-      width: '100%',
-      height: '100%',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'space-between',
-      padding: '72px 80px',
-      backgroundColor: resolvedColorBg,
-      fontFamily: 'Public Sans',
-    }"
-  >
-    <div :style="{ display: 'flex', alignItems: 'center', gap: '20px' }">
-      <img v-if="resolvedLogo" :src="resolvedLogo" :width="48" :height="48" alt="" />
-      <div
-        :style="{
-          display: 'flex',
-          fontSize: '30px',
-          fontWeight: 700,
-          color: resolvedColorFg,
-        }"
-      >
-        {{ resolvedSiteName }}
-      </div>
-    </div>
-
-    <div :style="{ display: 'flex', flexDirection: 'column', gap: '24px' }">
-      <div
-        :style="{
-          display: 'flex',
-          fontSize: displayTitle.length > 50 ? '56px' : '68px',
-          fontWeight: 700,
-          lineHeight: 1.15,
-          color: resolvedColorFg,
-          letterSpacing: '-0.02em',
-        }"
-      >
-        {{ displayTitle }}
-      </div>
-      <div
-        v-if="displayDescription"
-        :style="{
-          display: 'flex',
-          fontSize: '30px',
-          lineHeight: 1.4,
-          color: resolvedColorMuted,
-        }"
-      >
-        {{ displayDescription }}
-      </div>
-    </div>
-
-    <div :style="{ display: 'flex', alignItems: 'center', gap: '16px' }">
-      <div
-        :style="{
-          display: 'flex',
-          width: '56px',
-          height: '8px',
-          borderRadius: '9999px',
-          backgroundColor: resolvedColorAccent,
-        }"
-      />
-      <div
-        :style="{
-          display: 'flex',
-          width: '20px',
-          height: '8px',
-          borderRadius: '9999px',
-          backgroundColor: resolvedColorMuted,
-          opacity: 0.4,
-        }"
-      />
-    </div>
-  </div>
-</template>

package/app/components/content/DocumentPageShell.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import type { FlatTocItem } from "#ginko-docs/utils/content";
-import { useI18n } from "#imports";
-
-const props = withDefaults(
-  defineProps<{
-    /** Server-provided table of contents from content metadata. */
-    tocItems?: FlatTocItem[];
-    tocTitle?: string;
-    /** Inner wrapper (e.g. imprint: `max-w-2xl mx-auto w-full`). Default: full width of column. */
-    contentClass?: string;
-    /** Horizontal page gutter; set false when the parent layout already pads (e.g. blog). */
-    padded?: boolean;
-  }>(),
-  {
-    tocItems: () => [],
-    contentClass: "w-full",
-    padded: true,
-  },
-);
-
-const { t } = useI18n();
-</script>
-
-<template>
-  <div class="mx-auto w-full max-w-3xl" :class="padded ? 'px-4 md:px-6' : undefined">
-    <div class="pt-8 pb-12 md:pt-10 md:pb-16 lg:pb-20">
-      <div :class="contentClass">
-        <nav
-          v-if="tocItems.length > 0"
-          :aria-label="tocTitle ?? t('docs.toc')"
-          class="not-prose mb-8 border-b border-border pb-8"
-        >
-          <p class="mb-3 text-xs font-medium tracking-wider text-muted-foreground uppercase">
-            {{ tocTitle ?? t("docs.toc") }}
-          </p>
-          <ul class="grid grid-cols-1 gap-x-6 gap-y-1.5 sm:grid-cols-2" role="list">
-            <li v-for="item in tocItems" :key="item.id">
-              <a
-                :href="`#${item.id}`"
-                class="text-sm leading-snug text-foreground/80 transition-colors hover:text-foreground"
-              >
-                {{ item.label }}
-              </a>
-            </li>
-          </ul>
-        </nav>
-
-        <article class="[&_h2[id]]:scroll-mt-[var(--content-scroll-margin)]">
-          <slot />
-        </article>
-      </div>
-    </div>
-  </div>
-</template>

package/app/components/content/Feedback.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import { Button } from "#ginko-docs/components/ui/button";
-import { computed, ref, watch } from "vue";
-import { useI18n, useRouter } from "#imports";
-import { useGinkoAnalytics } from "#ginko-docs/composables/useGinkoAnalytics";
-import { useGinkoDocsConfig } from "#ginko-docs/composables/useGinkoDocsConfig";
-import { buildRepoIssueUrl } from "#ginko-docs/utils/repository";
-
-withDefaults(
-  defineProps<{
-    label?: string;
-  }>(),
-  {
-    label: undefined,
-  },
-);
-const { t, locale } = useI18n();
-const router = useRouter();
-
-const config = useGinkoDocsConfig();
-const analytics = useGinkoAnalytics();
-const enabled = config.feedback.enabled && analytics.enabled;
-
-type Sentiment = "positive" | "negative";
-
-const sentiment = ref<Sentiment | null>(null);
-const routePath = computed(() => router.currentRoute.value.path);
-watch(routePath, () => {
-  sentiment.value = null;
-});
-
-const issueUrl = computed(() => {
-  const repository = config.repository;
-  if (!repository) return null;
-  return buildRepoIssueUrl(repository, {
-    title: t("feedback.issueTitle", { path: routePath.value }),
-    body: t("docs.issueBody", { path: routePath.value }),
-  });
-});
-
-function selectSentiment(s: Sentiment) {
-  if (sentiment.value !== null) return;
-  analytics.track("docs-feedback", {
-    path: routePath.value,
-    helpful: s === "positive" ? "yes" : "no",
-    locale: locale.value,
-  });
-  sentiment.value = s;
-}
-</script>
-
-<template>
-  <div v-if="enabled">
-    <Transition
-      enter-active-class="transition-opacity duration-200"
-      enter-from-class="opacity-0"
-      enter-to-class="opacity-100"
-    >
-      <div v-if="sentiment !== null" class="flex flex-wrap items-center gap-x-3 gap-y-1 py-1">
-        <p class="text-sm text-muted-foreground">
-          {{ t("feedback.thanks") }}
-        </p>
-        <a
-          v-if="sentiment === 'negative' && issueUrl"
-          :href="issueUrl"
-          target="_blank"
-          rel="noopener noreferrer"
-          class="inline-flex items-center gap-1.5 text-sm font-medium text-foreground underline underline-offset-2 transition-colors hover:text-muted-foreground focus-visible:rounded-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none"
-        >
-          <Icon name="lucide:circle-alert" class="size-4" aria-hidden="true" />
-          {{ t("docs.reportIssue") }}
-        </a>
-      </div>
-    </Transition>
-
-    <div v-if="sentiment === null" class="flex flex-wrap items-center gap-3">
-      <p class="text-sm font-semibold text-foreground">{{ label ?? t("feedback.label") }}</p>
-
-      <div class="flex items-center gap-2">
-        <Button
-          variant="outline"
-          size="sm"
-          class="h-9 min-w-20 rounded-full px-4 text-muted-foreground shadow-sm"
-          @click="selectSentiment('positive')"
-        >
-          <Icon name="lucide:thumbs-up" class="shrink-0" aria-hidden="true" />
-          {{ t("feedback.yes") }}
-        </Button>
-
-        <Button
-          variant="outline"
-          size="sm"
-          class="h-9 min-w-20 rounded-full px-4 text-muted-foreground shadow-sm"
-          @click="selectSentiment('negative')"
-        >
-          <Icon name="lucide:thumbs-down" class="shrink-0" aria-hidden="true" />
-          {{ t("feedback.no") }}
-        </Button>
-      </div>
-    </div>
-  </div>
-</template>

package/app/components/content/ImageZoomDialog.vue

@@ -1,84 +0,0 @@
-<script setup lang="ts">
-import { AnimatePresence, Motion } from "motion-v";
-import { ref, useId } from "vue";
-import {
-  DialogContent,
-  DialogDescription,
-  DialogPortal,
-  DialogRoot,
-  DialogTitle,
-  DialogTrigger,
-} from "reka-ui";
-import { useI18n } from "#imports";
-import { useImageZoomMotion } from "./imageZoom";
-
-defineProps<{
-  src?: string;
-  alt?: string;
-  /** Accessible dialog title; falls back to alt, then the zoom label. */
-  label?: string;
-  description?: string;
-}>();
-
-const { t } = useI18n();
-const open = ref(false);
-const layoutId = `ginko-image-${useId()}`;
-const { imageTransition, fadeTransition } = useImageZoomMotion();
-</script>
-
-<template>
-  <DialogRoot v-model:open="open" :modal="false">
-    <DialogTrigger as-child>
-      <slot name="trigger" :layout-id="layoutId" :transition="imageTransition" />
-    </DialogTrigger>
-
-    <DialogPortal>
-      <AnimatePresence>
-        <Motion
-          v-if="open"
-          :initial="{ opacity: 0 }"
-          :animate="{ opacity: 1 }"
-          :exit="{ opacity: 0 }"
-          :transition="fadeTransition"
-          class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm will-change-opacity"
-        />
-
-        <DialogContent
-          v-if="open"
-          class="fixed inset-0 z-50 flex cursor-zoom-out flex-col items-center justify-center gap-4 p-[4vw] focus:outline-none"
-          @click="open = false"
-        >
-          <DialogTitle class="sr-only">{{ label || alt || t("docs.zoomImage") }}</DialogTitle>
-          <DialogDescription class="sr-only">{{
-            description || alt || t("docs.zoomImage")
-          }}</DialogDescription>
-
-          <Motion as-child :layout-id="layoutId" :transition="imageTransition">
-            <img
-              :src="src"
-              :alt="alt"
-              class="max-h-[82dvh] w-auto max-w-[min(94vw,80rem)] rounded-lg object-contain will-change-transform"
-            />
-          </Motion>
-
-          <Motion
-            v-if="label || alt"
-            as-child
-            :initial="{ opacity: 0, y: 8 }"
-            :animate="{ opacity: 1, y: 0 }"
-            :exit="{ opacity: 0, y: -4 }"
-            :transition="fadeTransition"
-          >
-            <p
-              aria-hidden="true"
-              class="max-w-[min(92vw,40rem)] rounded-full border border-border bg-background px-4 py-1.5 text-center text-sm shadow-sm"
-            >
-              {{ label || alt
-              }}<span v-if="description" class="text-muted-foreground"> · {{ description }}</span>
-            </p>
-          </Motion>
-        </DialogContent>
-      </AnimatePresence>
-    </DialogPortal>
-  </DialogRoot>
-</template>