feat: add kawai logo in npmx.dev homepage (#2346)

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Vordgi <sasha2822222@gmail.com>

Author: 4 people

app/components/LandingLogo.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+defineProps<{
+  class?: string
+}>()
+
+const { env } = useAppConfig().buildInfo
+
+onPrehydrate(el => {
+  const isKawaii = new URLSearchParams(window.location.search).has('kawaii')
+  const date = new Intl.DateTimeFormat('en-US', {
+    timeZone: 'America/Los_Angeles',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(new Date())
+  const isAprilFirst = date === '04/01'
+
+  if (!isKawaii && !isAprilFirst) return
+
+  const normalLogo = el.querySelector<HTMLElement>('#npmx-index-h1-logo-normal')
+  const kawaiiLogo = el.querySelector<HTMLElement>('#npmx-index-h1-logo-kawaii')
+  const tkawaiiLogo = el.querySelector<HTMLElement>('#npmx-index-h1-logo-tkawaii')
+  const logoEnv = el.querySelector<HTMLElement>('#npmx-index-h1-logo-env')
+  const logoTagline = el.querySelector<HTMLElement>('#npmx-index-tagline')
+
+  if (!normalLogo || !kawaiiLogo || !tkawaiiLogo || !logoEnv || !logoTagline) return
+
+  if (isAprilFirst) {
+    tkawaiiLogo.style.display = 'block'
+  } else {
+    kawaiiLogo.style.display = 'block'
+  }
+  normalLogo.style.display = 'none'
+  logoEnv.style.display = 'none'
+  logoTagline.style.display = 'none'
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-center justify-center">
+    <h1
+      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"
+    >
+      <img
+        id="npmx-index-h1-logo-kawaii"
+        width="400"
+        class="hidden mb-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')"
+        :class="class"
+      />
+      <img
+        id="npmx-index-h1-logo-tkawaii"
+        width="400"
+        class="hidden mb-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-transgender.svg"
+        :alt="$t('alt_logo_kawaii')"
+        :class="class"
+      />
+      <AppLogo id="npmx-index-h1-logo-normal" :class="class" />
+      <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"
+      >
+        {{ env === 'release' ? 'alpha' : env }}
+      </span>
+    </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 delay-100"
+    >
+      {{ $t('tagline') }}
+    </p>
+  </div>
+</template>

app/pages/index.vue

@@ -8,8 +8,6 @@ async function search() {
   startSearch()
 }
 
-const { env } = useAppConfig().buildInfo
-
 useSeoMeta({
   title: () => $t('seo.home.title'),
   ogTitle: () => $t('seo.home.title'),
@@ -32,25 +30,7 @@ defineOgImageComponent('Default', {
       <header
         class="flex-1 flex flex-col items-center justify-center text-center pt-20 pb-4 md:pb-8 lg:pb-20"
       >
-        <h1
-          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" />
-          <span
-            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"
-          >
-            {{ env === 'release' ? 'alpha' : env }}
-          </span>
-        </h1>
-
-        <p
-          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"
-        >
-          {{ $t('tagline') }}
-        </p>
+        <LandingLogo class="w-42 h-auto sm:w-58 md:w-70" />
         <search
           class="w-full max-w-2xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"

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"
     }

public/extra/npmx-cute-transgender.svg

@@ -141,6 +141,7 @@ import {
   BlueskyPostEmbed,
   BuildEnvironment,
   ButtonBase,
+  LandingLogo,
   LinkBase,
   CallToAction,
   ChartPatternSlot,
@@ -331,6 +332,14 @@ describe('component accessibility audits', () => {
     })
   })
 
+  describe('LandingLogo', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(LandingLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
   describe('AppFooter', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(AppFooter)