@lupinum/ginko-docs 0.3.0 → 0.4.0-rc.10

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.3.0 @lupinum/ginko-content@0.4.0-rc.2
+pnpm add -D @lupinum/ginko-docs@0.4.0-rc.10 @lupinum/ginko-content@1.0.0-beta.7
 ```
 
 ```ts
@@ -49,7 +49,7 @@ export default defineGinkoDocsConfig({
   site: {
     name: "Example Docs",
     description: "Documentation for Example.",
-    url: "https://docs.example.com",
+    whenToUse: "Use this site to learn and operate Example.",
   },
   locales: ["en"],
   blog: false,
@@ -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

@@ -2,6 +2,7 @@ import type { GinkoDocsAppConfig } from "../shared/types/app-config";
 export default {
   ginkoDocs: {
     theme: {
+      preset: "default",
       neutral: "zinc",
       primary: "neutral",
       codeBlocks: "dark",
@@ -16,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

@@ -7,10 +7,9 @@ import { useCanonicalUrl } from "#ginko-docs/composables/useCanonicalUrl";
 import { useGinkoAnalytics } from "#ginko-docs/composables/useGinkoAnalytics";
 import { useGinkoOgImage } from "#ginko-docs/composables/useGinkoOgImage";
 import { useSchemaJsonLd } from "#ginko-docs/composables/useSchemaJsonLd";
-import { defaultLocale } from "../i18n/locales";
 
 const canonicalUrl = useCanonicalUrl();
-const { locale, locales } = useI18n();
+const { defaultLocale, locale, locales } = useI18n();
 const route = useRoute();
 const { switchPathname } = useLocalizedRouteSwitch();
 const docsConfig = useAppConfig().ginkoDocs;
@@ -18,6 +17,7 @@ const siteUrl = docsConfig.site.url;
 
 useSeoMeta({
   ogSiteName: computed(() => getLocalizedSiteText(docsConfig.site.name, locale.value)),
+  ogType: "website",
   ogUrl: canonicalUrl,
   twitterCard: "summary_large_image",
 });
@@ -35,6 +35,15 @@ useSchemaJsonLd(() => [
     url: siteUrl,
     inLanguage: locale.value,
   },
+  {
+    "@type": "SoftwareApplication",
+    name: getLocalizedSiteText(docsConfig.site.name, locale.value),
+    description: getLocalizedSiteText(docsConfig.site.description, locale.value),
+    url: siteUrl,
+    applicationCategory: "DeveloperApplication",
+    operatingSystem: "Web",
+    ...(docsConfig.social?.github ? { sameAs: [docsConfig.social.github] } : {}),
+  },
 ]);
 
 useHead(() => ({
@@ -42,6 +51,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/tailwind.css

@@ -1,10 +1,28 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 @import "./theme-palettes.css";
+@import "./theme-presets.css";
 @source "../../**/*.{vue,ts}";
 
 @custom-variant dark (&:is(.dark *));
 
+.docs-sidebar-shell,
+.docs-toc-shell {
+  display: none;
+}
+
+@media (min-width: 48rem) {
+  .docs-sidebar-shell {
+    display: block;
+  }
+}
+
+@media (min-width: 80rem) {
+  .docs-toc-shell {
+    display: flex;
+  }
+}
+
 @theme inline {
   --font-sans: var(--font-body);
   --font-serif: var(--font-heading);
@@ -29,6 +47,8 @@
   --color-popover-foreground: var(--popover-foreground);
   --color-primary: var(--primary);
   --color-primary-foreground: var(--primary-foreground);
+  --color-brand: var(--brand);
+  --color-brand-foreground: var(--brand-foreground);
   --color-secondary: var(--secondary);
   --color-secondary-foreground: var(--secondary-foreground);
   --color-muted: var(--muted);
@@ -147,6 +167,8 @@
   --popover-foreground: var(--theme-neutral-950);
   --primary: var(--theme-primary-light);
   --primary-foreground: var(--theme-primary-light-foreground);
+  --brand: var(--primary);
+  --brand-foreground: var(--primary-foreground);
   --secondary: var(--theme-neutral-100);
   --secondary-foreground: var(--theme-neutral-900);
   --muted: var(--theme-neutral-100);
@@ -223,6 +245,8 @@
   --popover-foreground: var(--theme-neutral-50);
   --primary: var(--theme-primary-dark);
   --primary-foreground: var(--theme-primary-dark-foreground);
+  --brand: var(--primary);
+  --brand-foreground: var(--primary-foreground);
   --secondary: var(--theme-neutral-800);
   --secondary-foreground: var(--theme-neutral-50);
   --muted: var(--theme-neutral-800);

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

@@ -0,0 +1,141 @@
+/* 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

@@ -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/SiteBanner.vue

@@ -73,7 +73,7 @@ onBeforeUnmount(() => {
     ref="bannerElement"
     role="region"
     :aria-label="banner.text"
-    class="relative z-30 bg-primary px-10 py-2.5 text-center text-sm leading-5 font-medium text-primary-foreground"
+    class="relative z-30 bg-brand px-10 py-2.5 text-center text-sm leading-5 font-medium text-brand-foreground"
   >
     <span class="mx-auto block max-w-[min(100%,52rem)]">
       {{ banner.text }}
@@ -87,7 +87,7 @@ onBeforeUnmount(() => {
     </span>
     <button
       type="button"
-      class="absolute top-1/2 right-2 flex size-8 -translate-y-1/2 items-center justify-center rounded p-1 opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-primary-foreground/50 focus-visible:outline-none"
+      class="absolute top-1/2 right-2 flex size-8 -translate-y-1/2 items-center justify-center rounded p-1 opacity-70 transition-opacity hover:opacity-100 focus-visible:opacity-100 focus-visible:ring-2 focus-visible:ring-brand-foreground/50 focus-visible:outline-none"
       :aria-label="t('banner.dismiss')"
       @click="dismissed = true"
     >

package/app/components/site/SiteFooter.vue

@@ -22,10 +22,10 @@ const resources = computed(() => [
         <div class="max-w-sm">
           <NuxtLink
             :to="localizedPath('home')"
+            :aria-label="site.name"
             class="flex items-center gap-2 font-semibold text-foreground"
           >
             <SiteLogoMark />
-            <span>{{ site.name }}</span>
           </NuxtLink>
           <p class="mt-3 text-sm leading-relaxed text-muted-foreground">
             {{ site.description }}

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/composables/useLocalizedPath.ts

@@ -3,10 +3,11 @@ import { isLocaleCode, localizedPath } from "../../i18n/locales";
 import type { LocalizedRouteKey } from "../../i18n/routes";
 
 export function useLocalizedPath() {
-  const { locale, t } = useI18n();
+  const { defaultLocale, locale, t } = useI18n();
 
   return (key: LocalizedRouteKey) => {
     const path = t(`routes.${key}`);
-    return isLocaleCode(locale.value) ? localizedPath(locale.value, path) : path;
+    const primaryLocale = isLocaleCode(defaultLocale) ? defaultLocale : undefined;
+    return isLocaleCode(locale.value) ? localizedPath(locale.value, path, primaryLocale) : path;
   };
 }