feat: add kawai logo in npmx.dev homepage

app/pages/index.vue

@@ -24,6 +24,28 @@
   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 = window.location.search.includes('kawaii=true') 
+  const normal = el.querySelector('#npmx-index-h1-logo-normal') as HTMLElement
+  const kawaii = el.querySelector('#npmx-index-h1-logo-kawaii') as HTMLElement
+  const env = el.querySelector('#npmx-index-h1-logo-env') as HTMLElement
+  const tagline = el.querySelector('#npmx-index-tagline') as HTMLElement
+  if (!normal || !kawaii || !env || !tagline) return
+  if (isKawaii) {
+    normal.style.display = 'none'
+    kawaii.style.display = 'block'
+    env.style.display = 'none'
+    tagline.style.display = 'none'
+  } else {
+    normal.style.display = 'block'
+    kawaii.style.display = 'none'
+    env.style.display = 'block'
+    tagline.style.display = 'block'
+  }
+})
 </script>
 
 <template>
@@ -36,8 +58,19 @@
           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="npmx kawaii logo"
+          />
+          <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 +79,7 @@
         </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"
         >