feat: noodles

app/components/ColorScheme/Img.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const props = defineProps<{
+  lightSrc: string
+  darkSrc: string
+}>()
+</script>
+
+<template>
+  <img
+    :src="props.darkSrc"
+    class="color-mode-img"
+    :style="`--light-src: url('${props.lightSrc}')`"
+  />
+</template>
+
+<style>
+.light .color-mode-img {
+  content: var(--light-src);
+}
+</style>

app/components/Landing/IntroHeader.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+import { ACTIVE_NOODLES, PERMANENT_NOODLES, type Noodle } from '../Noodle'
+
+const { env } = useAppConfig().buildInfo
+
+const activeNoodlesData = ACTIVE_NOODLES.map(noodle => ({
+  key: noodle.key,
+  date: noodle.date,
+  timezone: noodle.timezone,
+  tagline: noodle.tagline,
+}))
+
+const permanentNoodlesData = PERMANENT_NOODLES.map(noodle => ({
+  key: noodle.key,
+  tagline: noodle.tagline,
+}))
+
+onPrehydrate(el => {
+  const tagline = el.querySelector<HTMLElement>('#intro-header-tagline')
+  const defaultLogo = el.querySelector<HTMLElement>('#intro-header-noodle-default')
+
+  if (!tagline || !defaultLogo) return
+
+  let permanentNoodles
+  try {
+    permanentNoodles = JSON.parse(el.dataset.permanentNoodles as string) as Noodle[]
+  } catch {
+    return
+  }
+  const activePermanentNoodle = permanentNoodles?.find(noodle =>
+    new URLSearchParams(window.location.search).has(noodle.key),
+  )
+
+  if (activePermanentNoodle) {
+    const permanentNoodleLogo = el.querySelector<HTMLElement>(
+      `#intro-header-noodle-${activePermanentNoodle.key}`,
+    )
+
+    if (!permanentNoodleLogo) return
+
+    permanentNoodleLogo.style.display = 'block'
+    defaultLogo.style.display = 'none'
+    if (activePermanentNoodle.tagline === false) {
+      tagline.style.display = 'none'
+    }
+    return
+  }
+
+  let activeNoodles
+  try {
+    activeNoodles = JSON.parse(el.dataset.activeNoodles as string) as Noodle[]
+  } catch {
+    return
+  }
+
+  const currentActiveNoodles = activeNoodles.filter(noodle => {
+    const todayDate = new Intl.DateTimeFormat('en-US', {
+      timeZone: noodle.timezone === 'auto' ? undefined : noodle.timezone,
+      month: '2-digit',
+      day: '2-digit',
+      year: 'numeric',
+    }).format(new Date())
+
+    const noodleDate =
+      noodle.date &&
+      new Intl.DateTimeFormat('en-US', {
+        timeZone: noodle.timezone === 'auto' ? undefined : noodle.timezone,
+        month: '2-digit',
+        day: '2-digit',
+        year: 'numeric',
+      }).format(new Date(noodle.date))
+    return todayDate === noodleDate
+  })
+
+  if (!currentActiveNoodles.length) return
+
+  const roll = Math.floor(Math.random() * currentActiveNoodles.length)
+  const selectedNoodle = currentActiveNoodles[roll]
+
+  if (!selectedNoodle) return
+
+  const noodleLogo = el.querySelector<HTMLElement>(`#intro-header-noodle-${selectedNoodle.key}`)
+
+  if (!defaultLogo || !noodleLogo || !tagline) return
+
+  defaultLogo.style.display = 'none'
+  noodleLogo.style.display = 'block'
+  if (selectedNoodle.tagline === false) {
+    tagline.style.display = 'none'
+  }
+})
+</script>
+
+<template>
+  <div
+    :data-active-noodles="JSON.stringify(activeNoodlesData)"
+    :data-permanent-noodles="JSON.stringify(permanentNoodlesData)"
+  >
+    <h1 class="sr-only">
+      {{ $t('alt_logo') }}
+    </h1>
+    <div
+      id="intro-header-noodle-default"
+      class="relative mb-6 w-fit mx-auto motion-safe:animate-fade-in motion-safe:animate-fill-both"
+      aria-hidden="true"
+    >
+      <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"
+        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>
+    </div>
+    <component
+      v-for="noodle in PERMANENT_NOODLES"
+      :key="noodle.key"
+      :id="`intro-header-noodle-${noodle.key}`"
+      class="hidden"
+      aria-hidden="true"
+      :is="noodle.logo"
+    />
+    <component
+      v-for="noodle in ACTIVE_NOODLES"
+      :key="noodle.key"
+      :id="`intro-header-noodle-${noodle.key}`"
+      class="hidden"
+      aria-hidden="true"
+      :is="noodle.logo"
+    />
+    <p
+      id="intro-header-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/components/Noodle/Artemis/Logo.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+    <ColorSchemeImg
+      width="400"
+      class="mb-8 motion-safe:animate-fade-in motion-safe:animate-scale-in w-80 sm:w-100"
+      dark-src="/extra/npmx-dark-artemis.svg"
+      light-src="/extra/npmx-light-artemis.svg"
+      alt=""
+    />
+    <ColorSchemeImg
+      width="1440"
+      height="455"
+      class="absolute bottom-0 inset-is-0 w-full h-auto mix-blend-lighten light:mix-blend-darken motion-safe:animate-fade-in"
+      dark-src="/extra/moon-dark.png"
+      light-src="/extra/moon-light.png"
+      alt=""
+    />
+  </div>
+</template>

app/components/Noodle/Kawaii/Logo.vue

@@ -0,0 +1,8 @@
+<template>
+  <img
+    width="400"
+    class="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')"
+  />
+</template>

app/components/Noodle/index.ts

@@ -0,0 +1,47 @@
+import NoodleKawaiiLogo from './Kawaii/Logo.vue'
+import NoodleArtemisLogo from './Artemis/Logo.vue'
+// import NoodleTkawaiiLogo from './Tkawaii/Logo.vue'
+
+export type Noodle = {
+  // Unique identifier for the noodle
+  key: string
+  // Timezone for the noodle (default is auto, i.e. user's timezone)
+  timezone?: string
+  // Date for the noodle
+  date?: string
+  // Logo for the noodle - could be any component. Relative parent - intro section
+  logo: Component
+  // Show npmx tagline or not (default is true)
+  tagline?: boolean
+}
+
+// Archive noodles - might be shown on special page
+// export const ARCHIVE_NOODLES: Noodle[] = [
+//   {
+//     key: 'tkawaii',
+//     date: '2026-04-08T12:00:00UTC',
+//     timezone: 'auto',
+//     logo: NoodleTkawaiiLogo,
+//     tagline: false,
+//   },
+// ]
+
+// Permanent noodles - always shown on specific query param (e.g. ?kawaii)
+export const PERMANENT_NOODLES: Noodle[] = [
+  {
+    key: 'kawaii',
+    logo: NoodleKawaiiLogo,
+    tagline: false,
+  },
+]
+
+// Active noodles - shown based on date and timezone
+export const ACTIVE_NOODLES: Noodle[] = [
+  {
+    key: 'artemis',
+    logo: NoodleArtemisLogo,
+    date: '2026-04-08T12:00:00Z',
+    timezone: 'America/Los_Angeles',
+    tagline: true,
+  },
+]

app/pages/index.vue

@@ -26,11 +26,11 @@ defineOgImageComponent('Default', {
 
 <template>
   <main>
-    <section class="container min-h-screen flex flex-col">
+    <section class="relative container min-h-screen flex flex-col overflow-hidden">
       <header
         class="flex-1 flex flex-col items-center justify-center text-center pt-20 pb-4 md:pb-8 lg:pb-20"
       >
-        <LandingLogo class="w-42 h-auto sm:w-58 md:w-70" />
+        <LandingIntroHeader />
         <search
           class="w-full max-w-2xl motion-safe:animate-slide-up motion-safe:animate-fill-both"
           style="animation-delay: 0.2s"

test/nuxt/a11y.spec.ts

@@ -160,7 +160,9 @@ import {
   BlueskyPostEmbed,
   BuildEnvironment,
   ButtonBase,
-  LandingLogo,
+  LandingIntroHeader,
+  NoodleKawaiiLogo,
+  NoodleArtemisLogo,
   LinkBase,
   CallToAction,
   CodeDirectoryListing,
@@ -354,9 +356,23 @@ describe('component accessibility audits', () => {
     })
   })
 
-  describe('LandingLogo', () => {
+  describe('LandingIntroHeader', () => {
     it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(LandingLogo)
+      const component = await mountSuspended(LandingIntroHeader)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+  })
+
+  describe('Noodles', () => {
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleKawaiiLogo)
+      const results = await runAxe(component)
+      expect(results.violations).toEqual([])
+    })
+
+    it('should have no accessibility violations', async () => {
+      const component = await mountSuspended(NoodleArtemisLogo)
       const results = await runAxe(component)
       expect(results.violations).toEqual([])
     })