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

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="https://raw.githubusercontent.com/lupinum-dev/ginko-docs/main/docs/public/web-app-manifest-512x512.png" width="128" alt="Ginko Docs icon">
+  <img src="https://raw.githubusercontent.com/lupinum-dev/ginko-docs/main/docs/public/favicon.svg" width="128" alt="Ginko Docs icon">
 </p>
 
 <h1 align="center">@lupinum/ginko-docs</h1>
@@ -23,13 +23,13 @@ Use this package when a Nuxt application needs documentation routes, navigation,
 
 - Node.js 22.18, 24.11, or 26 and later maintenance releases
 - Nuxt 4.5.1 or later in the Nuxt 4 line
-- Vue 3.5.35 or later
+- Vue 3.5.40 or later
 - Ginko Content 0.4 prerelease or later in the 0.4 line
 
 ## Installation
 
 ```bash
-pnpm add -D @lupinum/ginko-docs@0.4.0-rc.5 @lupinum/ginko-content@1.0.0-beta.5
+pnpm add -D @lupinum/ginko-docs@0.4.0-rc.9 @lupinum/ginko-content@1.0.0-beta.5
 ```
 
 ```ts
@@ -58,6 +58,14 @@ export default defineGinkoDocsConfig({
 
 Put Markdown files in `content/docs`. Open `/docs` after the Nuxt server starts.
 
+Generate the browser icon set from one square SVG or raster source:
+
+```bash
+pnpm exec ginko-docs-favicons --source public/product-icon.svg --out public
+```
+
+The command writes `favicon.svg`, `favicon-96x96.png`, `apple-touch-icon.png`, and `favicon.ico`. Ginko Docs adds the matching head links and uses the generated 96px PNG in Nuxt-preset social images so every supported source format renders consistently.
+
 ## Exports
 
 - `@lupinum/ginko-docs` is the Nuxt layer entry.

package/app/app.config.ts

@@ -17,6 +17,7 @@ export default {
         de: "Dokumentations-Sites auf Basis von Nuxt und Ginko Content.",
       },
       url: "http://localhost:3000",
+      icon: "/favicon.svg",
       logo: { light: "/logo.svg", dark: "/logo-dark.svg" },
       docsSidebarSwitcher: "tabs",
       lupinumAttribution: true,

package/app/app.vue

@@ -52,6 +52,21 @@ useHead(() => ({
     lang: locale.value,
   },
   link: [
+    {
+      key: "favicon-svg",
+      rel: "icon",
+      type: "image/svg+xml",
+      href: docsConfig.site.icon,
+    },
+    {
+      key: "favicon-png",
+      rel: "icon",
+      type: "image/png",
+      sizes: "96x96",
+      href: "/favicon-96x96.png",
+    },
+    { key: "favicon-ico", rel: "icon", sizes: "any", href: "/favicon.ico" },
+    { key: "apple-touch-icon", rel: "apple-touch-icon", href: "/apple-touch-icon.png" },
     { key: "canonical", rel: "canonical", href: canonicalUrl.value },
     ...locales.value.map((entry) => {
       const code = typeof entry === "string" ? entry : entry.code;

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

@@ -28,10 +28,10 @@ html[data-theme-preset="nuxt"] {
   --theme-neutral-900: var(--color-slate-900);
   --theme-neutral-950: var(--color-slate-950);
 
-  /* Normal-size text needs the darker green in light mode. */
-  --theme-primary-light: var(--nuxt-green-700);
-  --theme-primary-light-foreground: #ffffff;
-  --theme-primary-light-ring: var(--nuxt-green-600);
+  /* 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);

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

@@ -22,25 +22,146 @@ const props = withDefaults(
     siteName: undefined,
     logo: undefined,
     locale: "en",
-    colorBg: "#ffffff",
-    colorFg: "#0f172a",
-    colorMuted: "#64748b",
-    colorAccent: "#2563eb",
   },
 );
 
 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%',
@@ -48,7 +169,7 @@ const displayDescription = computed(() => (props.description ?? "").slice(0, 180
       flexDirection: 'column',
       justifyContent: 'space-between',
       padding: '72px 80px',
-      backgroundColor: colorBg,
+      backgroundColor: resolvedColorBg,
       fontFamily: 'Public Sans',
     }"
   >
@@ -59,7 +180,7 @@ const displayDescription = computed(() => (props.description ?? "").slice(0, 180
           display: 'flex',
           fontSize: '30px',
           fontWeight: 700,
-          color: colorFg,
+          color: resolvedColorFg,
         }"
       >
         {{ resolvedSiteName }}
@@ -73,7 +194,7 @@ const displayDescription = computed(() => (props.description ?? "").slice(0, 180
           fontSize: displayTitle.length > 50 ? '56px' : '68px',
           fontWeight: 700,
           lineHeight: 1.15,
-          color: colorFg,
+          color: resolvedColorFg,
           letterSpacing: '-0.02em',
         }"
       >
@@ -85,7 +206,7 @@ const displayDescription = computed(() => (props.description ?? "").slice(0, 180
           display: 'flex',
           fontSize: '30px',
           lineHeight: 1.4,
-          color: colorMuted,
+          color: resolvedColorMuted,
         }"
       >
         {{ displayDescription }}
@@ -99,7 +220,7 @@ const displayDescription = computed(() => (props.description ?? "").slice(0, 180
           width: '56px',
           height: '8px',
           borderRadius: '9999px',
-          backgroundColor: colorAccent,
+          backgroundColor: resolvedColorAccent,
         }"
       />
       <div
@@ -108,7 +229,7 @@ const displayDescription = computed(() => (props.description ?? "").slice(0, 180
           width: '20px',
           height: '8px',
           borderRadius: '9999px',
-          backgroundColor: colorMuted,
+          backgroundColor: resolvedColorMuted,
           opacity: 0.4,
         }"
       />

package/app/components/site/SiteHeader.vue

@@ -316,7 +316,7 @@ watch(
                           class="flex items-center rounded-md px-2 py-2 text-lg font-semibold transition-colors"
                           :class="
                             link.active
-                              ? 'bg-primary/10 text-primary'
+                              ? 'bg-muted text-foreground'
                               : 'text-foreground hover:bg-muted/60'
                           "
                           :aria-current="link.active ? 'true' : undefined"

package/app/components/site/SiteSocialLinks.vue

@@ -19,7 +19,15 @@ defineEmits<{ navigate: [] }>();
       :class="headerUtilityButtonClass"
       @click="$emit('navigate')"
     >
-      <Icon :name="link.icon ?? 'lucide:link'" class="size-[18px]" aria-hidden="true" />
+      <Icon :name="link.icon ?? 'lucide:link'" class="social-icon" aria-hidden="true" />
     </NuxtLink>
   </div>
 </template>
+
+<style scoped>
+.social-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex: none;
+}
+</style>

package/app/components/ui/badge/index.ts

@@ -8,7 +8,7 @@ export const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        default: "border-transparent bg-brand text-brand-foreground [a&]:hover:bg-brand/90",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
         destructive:

package/app/components/ui/button/index.ts

@@ -8,7 +8,7 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default: "bg-brand text-brand-foreground hover:bg-brand/90",
         destructive:
           "bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
         outline:

package/app/composables/site-navigation.utils.ts

@@ -66,14 +66,10 @@ export function resolveMainNav(
   return items;
 }
 
-/**
- * Brand names are not translated, so the labels are literals. The icons are
- * bundled defaults — Lucide has no Discord mark, so chat is the closest generic
- * stand-in and sites that ship the real one override `icon` per entry.
- */
+/** Brand names are not translated, so the labels are literals. */
 const socialDefaults: Record<GinkoDocsSocialPlatform, { label: string; icon: string }> = {
-  github: { label: "GitHub", icon: "lucide:github" },
-  discord: { label: "Discord", icon: "lucide:message-circle" },
+  github: { label: "GitHub", icon: "ginko-social:github" },
+  discord: { label: "Discord", icon: "ginko-social:discord" },
   linkedin: { label: "LinkedIn", icon: "lucide:linkedin" },
 };
 

package/app/features/docs/components/DocsSidebarItem.vue

@@ -48,13 +48,13 @@ const linkRowClass = computed(() =>
     "group relative flex w-full flex-row items-center gap-2 text-start [overflow-wrap:anywhere] text-muted-foreground transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring",
     "[&_svg]:size-4 [&_svg]:shrink-0",
     "hover:bg-accent/50 hover:text-accent-foreground/80 hover:transition-none",
-    "data-[active=true]:bg-primary/10 data-[active=true]:text-primary data-[active=true]:font-medium data-[active=true]:hover:transition-colors",
+    "data-[active=true]:bg-muted data-[active=true]:text-foreground data-[active=true]:font-medium data-[active=true]:hover:bg-muted data-[active=true]:hover:transition-colors",
     props.depth === 0
       ? "rounded-[7px] px-2 py-[5.5px] text-[13px]"
       : cn(
           "rounded-e-[7px] border-s border-border py-[5px] pe-2 text-[12.5px]",
           "hover:border-s-muted-foreground/40",
-          "data-[active=true]:border-s-primary",
+          "data-[active=true]:border-s-brand",
           paddingClass.value,
         ),
   ),

package/app/features/docs/components/DocsSidebarList.vue

@@ -21,7 +21,7 @@ const emit = defineEmits<{
         class="flex min-h-9 w-full items-center gap-2 rounded-lg px-2 text-start text-sm transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring"
         :class="
           activeId === section.id
-            ? 'bg-accent font-medium text-foreground'
+            ? 'bg-muted font-medium text-foreground'
             : 'text-muted-foreground hover:bg-accent/50 hover:text-foreground'
         "
         :aria-pressed="activeId === section.id"

package/app/features/docs/components/DocsToc.vue

@@ -76,7 +76,7 @@ function scrollToHeading(id: string) {
 
     <div class="relative border-l border-border pl-3">
       <div
-        class="pointer-events-none absolute -left-px w-0.5 rounded-full bg-primary transition-all duration-200 ease-out"
+        class="pointer-events-none absolute -left-px w-0.5 rounded-full bg-brand transition-all duration-200 ease-out"
         :style="indicatorStyle"
       />
 
@@ -91,7 +91,7 @@ function scrollToHeading(id: string) {
               cn(
                 item.depth === 3 ? 'pl-3' : (item.depth ?? 2) >= 4 ? 'pl-6' : '',
                 activeIds.includes(item.id)
-                  ? 'font-medium text-primary'
+                  ? 'font-medium text-foreground'
                   : 'text-muted-foreground hover:text-foreground',
               )
             "

package/app/features/search/command-center.ts

@@ -24,6 +24,39 @@ export interface CommandCenterGroupResult {
 export const MAX_RECENT_ITEMS = 5;
 export const PAGE_HIGHLIGHT_STORAGE_KEY = "site-command-center-page-highlight";
 
+const SEARCH_HIGHLIGHT_STOP_WORDS = new Set([
+  "a",
+  "an",
+  "and",
+  "der",
+  "die",
+  "das",
+  "ein",
+  "eine",
+  "for",
+  "in",
+  "of",
+  "or",
+  "the",
+  "to",
+  "und",
+  "von",
+  "zu",
+]);
+
+export function getSearchHighlightTerms(query: string): string[] {
+  const terms = [...new Set(query.trim().toLocaleLowerCase().split(/\s+/).filter(Boolean))];
+  const meaningfulTerms = terms.filter(
+    (term) => term.length > 1 && !SEARCH_HIGHLIGHT_STOP_WORDS.has(term),
+  );
+
+  return meaningfulTerms.length > 0 ? meaningfulTerms : terms;
+}
+
+export function shouldShowSearchResultBadges(items: CommandCenterItem[]): boolean {
+  return new Set(items.map((item) => item.badge).filter(Boolean)).size > 1;
+}
+
 export function dedupeCommandCenterItems(items: CommandCenterItem[]) {
   const seen = new Set<string>();
   return items.filter((item) => {

package/app/features/search/components/SiteCommandCenter.vue

@@ -2,6 +2,10 @@
 import { computed, nextTick, onMounted, ref, useTemplateRef, watch } from "vue";
 import { useI18n, useRoute } from "#imports";
 import { useCommandCenter } from "#ginko-docs/features/search/useCommandCenter";
+import {
+  getSearchHighlightTerms,
+  shouldShowSearchResultBadges,
+} from "#ginko-docs/features/search/command-center";
 import {
   DialogContent,
   DialogDescription,
@@ -21,10 +25,13 @@ const { open, query, groupedItems, searchPending, searchError, searchIsEmpty, se
 
 const visibleItems = computed(() => groupedItems.value.flatMap((g) => g.items));
 const isSearching = computed(() => query.value.trim().length > 0);
+const showResultBadges = computed(
+  () => !isSearching.value || shouldShowSearchResultBadges(visibleItems.value),
+);
 
 // ── text highlighting ──────────────────────────────────────────────────────
 function highlightTokens(text: string, q: string): { text: string; match: boolean }[] {
-  const terms = q.trim().split(/\s+/).filter(Boolean);
+  const terms = getSearchHighlightTerms(q);
   if (terms.length === 0) return [{ text, match: false }];
   const pattern = terms.map((term) => term.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
   return text
@@ -123,7 +130,7 @@ onMounted(async () => {
         class="fixed inset-0 z-50 bg-overlay backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0"
       />
       <DialogContent
-        class="fixed top-[8vh] left-1/2 z-50 flex max-h-[84vh] w-[min(94vw,46rem)] -translate-x-1/2 flex-col overflow-hidden rounded-xl border border-border bg-background shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:top-[10vh]"
+        class="fixed top-[8vh] left-1/2 z-50 flex max-h-[80vh] w-[min(94vw,44rem)] -translate-x-1/2 flex-col overflow-hidden rounded-xl border border-border bg-background shadow-lg outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:top-[10vh]"
         @keydown="handleListNavigation"
       >
         <VisuallyHidden>
@@ -165,7 +172,9 @@ onMounted(async () => {
         </div>
 
         <!-- Results -->
-        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain py-2">
+        <div
+          class="min-h-0 flex-1 overflow-y-auto overscroll-contain py-2 [scrollbar-color:var(--border)_transparent]"
+        >
           <div
             v-if="isSearching && searchPending"
             class="flex items-center justify-center gap-2 px-6 py-12 text-sm text-muted-foreground"
@@ -190,6 +199,13 @@ onMounted(async () => {
               <div class="flex items-center gap-2 px-2 pt-1.5 pb-1">
                 <span class="text-[11px] font-medium text-muted-foreground">{{ group.title }}</span>
                 <div class="flex-1 border-t border-border/60" />
+                <span
+                  v-if="group.id === 'search'"
+                  class="text-[11px] tabular-nums text-muted-foreground"
+                  aria-live="polite"
+                >
+                  {{ t("command.resultCount", { count: group.items.length }) }}
+                </span>
               </div>
 
               <button
@@ -198,7 +214,7 @@ onMounted(async () => {
                 type="button"
                 :data-item="item.id"
                 :aria-label="itemLabel(item)"
-                class="group flex w-full items-start gap-3 rounded-lg px-2.5 py-2.5 text-left transition-colors outline-none"
+                class="group flex w-full items-start gap-3 rounded-lg px-2.5 py-2 text-left transition-colors outline-none"
                 :class="
                   highlightedId === item.id ? 'bg-accent text-accent-foreground' : 'text-foreground'
                 "
@@ -208,7 +224,7 @@ onMounted(async () => {
               >
                 <!-- Icon -->
                 <div
-                  class="mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted/50 transition-colors"
+                  class="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-md border border-border bg-muted/50 transition-colors"
                   :class="highlightedId === item.id ? 'border-border/80 bg-background' : ''"
                 >
                   <Icon
@@ -235,14 +251,14 @@ onMounted(async () => {
                       >
                         <mark
                           v-if="token.match"
-                          class="rounded-[3px] bg-primary/15 font-medium text-primary not-italic"
+                          class="rounded-[3px] bg-accent-yellow px-0.5 font-medium text-accent-yellow-foreground not-italic"
                           >{{ token.text }}</mark
                         ><template v-else>{{ token.text }}</template>
                       </template>
                     </span>
                     <span
-                      v-if="item.badge"
-                      class="shrink-0 rounded-full bg-primary/10 px-1.5 py-px text-[10px] font-medium text-primary"
+                      v-if="item.badge && showResultBadges"
+                      class="shrink-0 rounded-full bg-muted px-1.5 py-px text-[10px] font-medium text-muted-foreground"
                     >
                       {{ item.badge }}
                     </span>
@@ -263,7 +279,7 @@ onMounted(async () => {
                       >
                         <mark
                           v-if="token.match"
-                          class="rounded-[3px] bg-primary/15 font-medium text-primary not-italic"
+                          class="rounded-[3px] bg-accent-yellow px-0.5 font-medium text-accent-yellow-foreground not-italic"
                           >{{ token.text }}</mark
                         ><template v-else>{{ token.text }}</template>
                       </template>

package/app/features/search/components/SiteSearchPageHighlight.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, watch } from "vue";
 import { useRoute } from "#imports";
+import { getSearchHighlightTerms } from "#ginko-docs/features/search/command-center";
 
 const STORAGE_KEY = "site-command-center-page-highlight";
 const HIGHLIGHT_SELECTOR = "mark[data-search-page-highlight]";
@@ -65,7 +66,8 @@ function highlightPattern(root: Element, pattern: RegExp) {
 
       const mark = document.createElement("mark");
       mark.dataset.searchPageHighlight = "";
-      mark.className = "rounded-[3px] bg-primary/15 px-0.5 text-primary";
+      mark.className =
+        "rounded-[3px] bg-accent-yellow px-0.5 font-medium text-accent-yellow-foreground";
       mark.textContent = value;
       fragment.append(mark);
 
@@ -83,7 +85,7 @@ function escapePattern(value: string) {
 
 function buildPatterns(query: string) {
   const phrase = query.trim().replace(/\s+/g, " ");
-  const tokens = phrase.split(/\s+/).filter((token) => token.length > 2);
+  const tokens = getSearchHighlightTerms(phrase);
   const phrasePattern = phrase.split(/\s+/).map(escapePattern).join("\\s+");
 
   return [

package/app/features/search/useCommandCenter.ts

@@ -71,7 +71,7 @@ export async function useCommandCenter() {
   // Nuxt/i18n composable after an awaited operation loses the setup context.
   const docsNavigationResult = useDocsNavigation();
   const contentSearchResult = useContentSearch({
-    limit: 12,
+    limit: 8,
     locale: () => locale.value,
   });
   const [
@@ -190,7 +190,7 @@ export async function useCommandCenter() {
             href: github.href,
             external: true,
             group: "actions" as const,
-            icon: github.icon ?? "lucide:github",
+            icon: github.icon ?? "ginko-social:github",
             keywords: ["repo", "source", "code"],
           },
         ]

package/app/pages/index.vue

@@ -69,6 +69,11 @@ const heroCodeTabs = computed(() => {
   return [];
 });
 
+const hasWideHeroCode = computed(() => {
+  const media = landing.value.heroMedia;
+  return media?.type !== "image" && media?.layout === "wide";
+});
+
 // Feature icon tiles cycle through the theme-adaptive hero accent pairs.
 const FEATURE_TINTS = [
   { tile: "bg-(--hero-blue-muted)", icon: "text-(--hero-blue-dark)" },
@@ -174,7 +179,11 @@ useSeoMeta({
             width="576"
             loading="lazy"
           />
-          <SiteHeroCode v-else-if="heroCodeTabs.length" :tabs="heroCodeTabs" />
+          <SiteHeroCode
+            v-else-if="heroCodeTabs.length"
+            :tabs="heroCodeTabs"
+            :class="hasWideHeroCode && 'site-hero-code-wide'"
+          />
         </div>
       </div>
     </section>
@@ -257,3 +266,13 @@ useSeoMeta({
     </section>
   </div>
 </template>
+
+<style scoped>
+/* Keep the hero grid intact; only use spare space toward the viewport edge. */
+@media (min-width: 80rem) {
+  .site-hero-code-wide {
+    width: min(48.75rem, calc(50vw - 2rem));
+    max-width: none;
+  }
+}
+</style>

package/i18n/messages/global/command.ts

@@ -23,6 +23,7 @@ export const command = {
     actions: { de: "Aktionen", en: "Actions" },
   },
   loading: { de: "Suche läuft …", en: "Searching…" },
+  resultCount: { de: "{count} Treffer", en: "{count} results" },
   error: {
     de: "Die Suche ist gerade nicht verfügbar. Versuche es erneut.",
     en: "Search is temporarily unavailable. Please try again.",

package/icon-bundle.ts

@@ -3,8 +3,9 @@ import { createRequire } from "node:module";
 export const layerIconNames = [
   "circle-flags:de",
   "circle-flags:us",
+  "ginko-social:discord",
+  "ginko-social:github",
   "logos:bun",
-  "logos:discord-icon",
   "logos:npm-icon",
   "logos:nuxt-icon",
   "logos:pnpm",
@@ -91,6 +92,25 @@ type IconCollection = {
 
 const require = createRequire(import.meta.url);
 
-export const layerIconCollections = ["circle-flags", "logos", "lucide"].map(
-  (prefix) => require(`@iconify-json/${prefix}/icons.json`) as IconCollection,
-);
+const ginkoSocialCollection = {
+  prefix: "ginko-social",
+  width: 24,
+  height: 24,
+  icons: {
+    // Google Material Icons: https://github.com/material-icons/material-icons/blob/master/LICENSE
+    discord: {
+      body: '<path fill="currentColor" d="M19.27 5.33C17.94 4.71 16.5 4.26 15 4a.1.1 0 0 0-.07.03c-.18.33-.39.76-.53 1.09a16.1 16.1 0 0 0-4.8 0c-.14-.34-.35-.76-.54-1.09c-.01-.02-.04-.03-.07-.03c-1.5.26-2.93.71-4.27 1.33c-.01 0-.02.01-.03.02c-2.72 4.07-3.47 8.03-3.1 11.95c0 .02.01.04.03.05c1.8 1.32 3.53 2.12 5.24 2.65c.03.01.06 0 .07-.02c.4-.55.76-1.13 1.07-1.74c.02-.04 0-.08-.04-.09c-.57-.22-1.11-.48-1.64-.78c-.04-.02-.04-.08-.01-.11c.11-.08.22-.17.33-.25c.02-.02.05-.02.07-.01c3.44 1.57 7.15 1.57 10.55 0c.02-.01.05-.01.07.01c.11.09.22.17.33.26c.04.03.04.09-.01.11c-.52.31-1.07.56-1.64.78c-.04.01-.05.06-.04.09c.32.61.68 1.19 1.07 1.74c.03.01.06.02.09.01c1.72-.53 3.45-1.33 5.25-2.65c.02-.01.03-.03.03-.05c.44-4.53-.73-8.46-3.1-11.95c-.01-.01-.02-.02-.04-.02M8.52 14.91c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.84 2.12-1.89 2.12m6.97 0c-1.03 0-1.89-.95-1.89-2.12s.84-2.12 1.89-2.12c1.06 0 1.9.96 1.89 2.12c0 1.17-.83 2.12-1.89 2.12"/>',
+    },
+    // Material Design Icons: https://github.com/Templarian/MaterialDesign/blob/master/LICENSE
+    github: {
+      body: '<path fill="currentColor" d="M12 2A10 10 0 0 0 2 12c0 4.42 2.87 8.17 6.84 9.5c.5.08.66-.23.66-.5v-1.69c-2.77.6-3.36-1.34-3.36-1.34c-.46-1.16-1.11-1.47-1.11-1.47c-.91-.62.07-.6.07-.6c1 .07 1.53 1.03 1.53 1.03c.87 1.52 2.34 1.07 2.91.83c.09-.65.35-1.09.63-1.34c-2.22-.25-4.55-1.11-4.55-4.92c0-1.11.38-2 1.03-2.71c-.1-.25-.45-1.29.1-2.64c0 0 .84-.27 2.75 1.02c.79-.22 1.65-.33 2.5-.33s1.71.11 2.5.33c1.91-1.29 2.75-1.02 2.75-1.02c.55 1.35.2 2.39.1 2.64c.65.71 1.03 1.6 1.03 2.71c0 3.82-2.34 4.66-4.57 4.91c.36.31.69.92.69 1.85V21c0 .27.16.59.67.5C19.14 20.16 22 16.42 22 12A10 10 0 0 0 12 2"/>',
+    },
+  },
+} satisfies IconCollection;
+
+export const layerIconCollections = [
+  ...["circle-flags", "logos", "lucide"].map(
+    (prefix) => require(`@iconify-json/${prefix}/icons.json`) as IconCollection,
+  ),
+  ginkoSocialCollection,
+];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lupinum/ginko-docs",
-  "version": "0.4.0-rc.5",
+  "version": "0.4.0-rc.9",
   "description": "A Nuxt documentation layer powered by Ginko Content.",
   "keywords": [
     "content",
@@ -20,6 +20,9 @@
     "url": "git+https://github.com/lupinum-dev/ginko-docs.git",
     "directory": "layer"
   },
+  "bin": {
+    "ginko-docs-favicons": "./runtime/generate-favicons.mjs"
+  },
   "files": [
     "app",
     "i18n",
@@ -80,6 +83,7 @@
     "nuxt-og-image": "^6.7.8",
     "reka-ui": "^2.10.3",
     "satori": "^0.19.3",
+    "sharp": "^0.35.3",
     "shiki": "^4.4.3",
     "tailwind-merge": "^3.6.0",
     "tailwindcss": "^4.3.3",
@@ -89,7 +93,7 @@
   "peerDependencies": {
     "@lupinum/ginko-content": ">=1.0.0-beta.5 <2.0.0",
     "nuxt": ">=4.5.1 <5",
-    "vue": "^3.5.35",
+    "vue": "^3.5.40",
     "vue-router": "^5.1.0"
   },
   "engines": {

package/runtime/generate-favicons.mjs

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+
+import { mkdir, readFile, writeFile } from "node:fs/promises";
+import { extname, join, resolve } from "node:path";
+import { pathToFileURL } from "node:url";
+import sharp from "sharp";
+
+const ICO_SIZES = [16, 32, 48];
+
+function createIco(images) {
+  const headerSize = 6;
+  const entrySize = 16;
+  const directory = Buffer.alloc(headerSize + entrySize * images.length);
+
+  directory.writeUInt16LE(0, 0);
+  directory.writeUInt16LE(1, 2);
+  directory.writeUInt16LE(images.length, 4);
+
+  let imageOffset = directory.length;
+  images.forEach(({ size, data }, index) => {
+    const entryOffset = headerSize + entrySize * index;
+    directory.writeUInt8(size === 256 ? 0 : size, entryOffset);
+    directory.writeUInt8(size === 256 ? 0 : size, entryOffset + 1);
+    directory.writeUInt8(0, entryOffset + 2);
+    directory.writeUInt8(0, entryOffset + 3);
+    directory.writeUInt16LE(1, entryOffset + 4);
+    directory.writeUInt16LE(32, entryOffset + 6);
+    directory.writeUInt32LE(data.length, entryOffset + 8);
+    directory.writeUInt32LE(imageOffset, entryOffset + 12);
+    imageOffset += data.length;
+  });
+
+  return Buffer.concat([directory, ...images.map(({ data }) => data)]);
+}
+
+async function renderSquare(source, size) {
+  return sharp(source, { density: 512 }).resize(size, size, { fit: "contain" }).png().toBuffer();
+}
+
+function embeddedSvg(png) {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" role="img">
+  <image width="512" height="512" href="data:image/png;base64,${png.toString("base64")}" />
+</svg>
+`;
+}
+
+export async function generateFavicons({ source, outputDirectory }) {
+  const sourcePath = resolve(source);
+  const outputPath = resolve(outputDirectory);
+  const sourceBuffer = await readFile(sourcePath);
+  const metadata = await sharp(sourceBuffer, { density: 512 }).metadata();
+
+  if (!metadata.width || !metadata.height) {
+    throw new Error(`Could not read icon dimensions from ${sourcePath}`);
+  }
+  if (metadata.width !== metadata.height) {
+    throw new Error(
+      `The favicon source must be square. Received ${metadata.width}x${metadata.height}.`,
+    );
+  }
+
+  const [png96, appleTouchIcon, ...icoPngs] = await Promise.all([
+    renderSquare(sourceBuffer, 96),
+    renderSquare(sourceBuffer, 180),
+    ...ICO_SIZES.map(async (size) => ({ size, data: await renderSquare(sourceBuffer, size) })),
+  ]);
+
+  const svg =
+    extname(sourcePath).toLowerCase() === ".svg"
+      ? sourceBuffer
+      : Buffer.from(embeddedSvg(await renderSquare(sourceBuffer, 512)));
+
+  await mkdir(outputPath, { recursive: true });
+  await Promise.all([
+    writeFile(join(outputPath, "favicon.svg"), svg),
+    writeFile(join(outputPath, "favicon-96x96.png"), png96),
+    writeFile(join(outputPath, "apple-touch-icon.png"), appleTouchIcon),
+    writeFile(join(outputPath, "favicon.ico"), createIco(icoPngs)),
+  ]);
+
+  return ["favicon.svg", "favicon-96x96.png", "apple-touch-icon.png", "favicon.ico"];
+}
+
+function parseArguments(arguments_) {
+  const options = {
+    source: "public/favicon.svg",
+    outputDirectory: "public",
+  };
+
+  for (let index = 0; index < arguments_.length; index += 1) {
+    const argument = arguments_[index];
+    if (argument === "--source") options.source = arguments_[++index];
+    else if (argument === "--out") options.outputDirectory = arguments_[++index];
+    else if (argument === "--help" || argument === "-h") return undefined;
+    else throw new Error(`Unknown argument: ${argument}`);
+  }
+
+  if (!options.source || !options.outputDirectory) {
+    throw new Error("Both --source and --out require a path.");
+  }
+  return options;
+}
+
+async function main() {
+  const options = parseArguments(process.argv.slice(2));
+  if (!options) {
+    console.log(`Usage: ginko-docs-favicons [--source <path>] [--out <directory>]
+
+Defaults:
+  --source public/favicon.svg
+  --out public`);
+    return;
+  }
+
+  const files = await generateFavicons(options);
+  console.log(`Generated ${files.join(", ")} in ${resolve(options.outputDirectory)}`);
+}
+
+if (process.argv[1] && pathToFileURL(resolve(process.argv[1])).href === import.meta.url) {
+  main().catch((error) => {
+    console.error(error instanceof Error ? error.message : error);
+    process.exitCode = 1;
+  });
+}

package/shared/types/app-config.ts

@@ -58,8 +58,20 @@ export interface GinkoDocsHeroCodeTab {
 
 export type GinkoDocsHeroMedia =
   | { type: "image"; src: string; alt: string }
-  | { type: "code"; code: string; language?: string; filename?: string }
-  | { type: "code-tabs"; tabs: GinkoDocsHeroCodeTab[] };
+  | {
+      type: "code";
+      code: string;
+      language?: string;
+      filename?: string;
+      /** Let the code panel use otherwise empty viewport space on wide screens. */
+      layout?: "wide";
+    }
+  | {
+      type: "code-tabs";
+      tabs: GinkoDocsHeroCodeTab[];
+      /** Let the code panel use otherwise empty viewport space on wide screens. */
+      layout?: "wide";
+    };
 
 export interface GinkoDocsAppConfig {
   theme: {
@@ -74,6 +86,8 @@ export interface GinkoDocsAppConfig {
     name: GinkoDocsLocalizedText;
     description: GinkoDocsLocalizedText;
     url: string;
+    /** Square product mark used for browser icons and generated social cards. */
+    icon: string;
     logo: { light: string; dark: string };
     docsSidebarSwitcher: "dropdown" | "list" | "tabs";
     lupinumAttribution: boolean;