feat: add kawai logo in npmx.dev homepage

app/pages/index.vue

@@ -24,6 +24,22 @@ defineOgImageComponent('Default', {
   title: 'npmx',
   description: 'a fast, modern browser for the **npm registry**',
 })
+
+// const route = useRoute()
+// const isKawaii = computed(() => route.query.kawaii === 'true')
+onPrehydrate(el => {
+  const isKawaii = new URLSearchParams(window.location.search).has('kawaii')
+  if (!isKawaii) return
+  const normalLogo = el.querySelector<HTMLElement>('#npmx-index-h1-logo-normal')
+  const kawaiiLogo = el.querySelector<HTMLElement>('#npmx-index-h1-logo-kawaii')
+  const logoEnv = el.querySelector<HTMLElement>('#npmx-index-h1-logo-env')
+  const logoTagline = el.querySelector<HTMLElement>('#npmx-index-tagline')
+  if (!normalLogo || !kawaiiLogo || !logoEnv || !logoTagline) return
+  normalLogo.style.display = 'none'
+  kawaiiLogo.style.display = 'block'
+  logoEnv.style.display = 'none'
+  logoTagline.style.display = 'none'
+})
 </script>
 
 <template>
@@ -36,8 +52,16 @@ defineOgImageComponent('Default', {
           dir="ltr"
           class="relative flex items-center justify-center gap-2 header-logo font-mono text-5xl sm:text-7xl md:text-8xl font-medium tracking-tight mb-6 motion-safe:animate-fade-in motion-safe:animate-fill-both"
         >
-          <AppLogo class="w-42 h-auto sm:w-58 md:w-70" />
+          <img
+            id="npmx-index-h1-logo-kawaii"
+            width="400"
+            class="hidden pb-8 motion-safe:animate-fade-in motion-safe:animate-scale-in motion-safe:hover:scale-105 motion-safe:transition w-80 sm:w-100"
+            src="/extra/npmx-cute.svg"
+            :alt="$t('alt_logo_kawaii')"
+          />
+          <AppLogo id="npmx-index-h1-logo-normal" class="w-42 h-auto sm:w-58 md:w-70" />
           <span
+            id="npmx-index-h1-logo-env"
             aria-hidden="true"
             class="text-sm sm:text-base md:text-lg transform-origin-br font-mono tracking-widest text-accent absolute -bottom-4 -inset-ie-1.5"
           >
@@ -46,6 +70,7 @@ defineOgImageComponent('Default', {
         </h1>
 
         <p
+          id="npmx-index-tagline"
           class="text-fg-muted text-lg sm:text-xl max-w-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.1s"
         >

i18n/locales/en.json

@@ -1521,5 +1521,6 @@
       "message": "Accessibility matters to us, and we would love you to follow us in this vision. When using mentioned media, ensure there is enough contrast against the background, and don't go smaller than 24px. If you need any other resources or additional information about the project, feel free to reach us at {link}.",
       "discord_link_text": "chat.npmx.dev"
     }
-  }
+  },
+  "alt_logo_kawaii": "A cute, rounded, and colorful version of the npmx logo."
 }

i18n/schema.json

@@ -4570,6 +4570,9 @@
       },
       "additionalProperties": false
     },
+    "alt_logo_kawaii": {
+      "type": "string"
+    },
     "$schema": {
       "type": "string"
     }