feat(ui): /noodles archive page

.gitignore

@@ -41,6 +41,7 @@ test-results/
 shared/types/lexicons
 file-tree-sprite.svg
 public/blog/avatar
+public/noodle-avatar
 
 **/__screenshots__/**
 

app/components/AppFooter.vue

@@ -87,6 +87,10 @@ const footerSections = computed<Array<{ label: string; links: FooterLink[] }>>((
         name: t('pds.title'),
         href: '/pds',
       },
+      {
+        name: t('noodles.title'),
+        href: '/noodles',
+      },
       {
         name: t('footer.docs'),
         href: NPMX_DOCS_SITE,

app/components/AppHeader.vue

@@ -100,6 +100,14 @@ const mobileLinks = computed<NavigationConfigWithGroups>(() => [
         external: false,
         iconClass: 'i-lucide:palette',
       },
+      {
+        name: 'Noodles',
+        label: $t('noodles.title'),
+        to: { name: 'noodles' },
+        type: 'link',
+        external: false,
+        iconClass: 'i-lucide:sparkles',
+      },
     ],
   },
   {

app/components/Landing/IntroHeader.vue

@@ -1,60 +1,31 @@
 <script setup lang="ts">
-import { ACTIVE_NOODLES, PERMANENT_NOODLES, type Noodle } from '../Noodle'
+import { NOODLES, type Noodle } from '../Noodle'
 
 const { env } = useAppConfig().buildInfo
 
-const activeNoodlesData = ACTIVE_NOODLES.map(noodle => ({
+const noodlesData = NOODLES.map(noodle => ({
   key: noodle.key,
   date: noodle.date,
   dateTo: noodle.dateTo,
   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
+  let noodles: Noodle[]
   try {
-    activeNoodles = JSON.parse(el.dataset.activeNoodles as string) as Noodle[]
+    noodles = JSON.parse(el.dataset.noodles as string) as Noodle[]
   } catch {
     return
   }
 
-  const currentActiveNoodles = activeNoodles.filter(noodle => {
+  // A noodle is active iff today falls inside its date window.
+  const currentNoodles = noodles.filter(noodle => {
     const todayDate = new Date()
     const todayDateRaw = new Intl.DateTimeFormat('en-US', {
       timeZone: noodle.timezone === 'auto' ? undefined : noodle.timezone,
@@ -63,7 +34,7 @@ onPrehydrate(el => {
       year: 'numeric',
     }).format(todayDate)
 
-    const noodleDateFrom = new Date(noodle.date!)
+    const noodleDateFrom = new Date(noodle.date)
     if (!noodle.dateTo) {
       const noodleDateFromRaw = new Intl.DateTimeFormat('en-US', {
         timeZone: noodle.timezone === 'auto' ? undefined : noodle.timezone,
@@ -73,20 +44,18 @@ onPrehydrate(el => {
       }).format(noodleDateFrom)
       return todayDateRaw === noodleDateFromRaw
     }
-    const noodleDateTo = new Date(noodle.dateTo!)
+    const noodleDateTo = new Date(noodle.dateTo)
     return todayDate >= noodleDateFrom && todayDate <= noodleDateTo
   })
 
-  if (!currentActiveNoodles.length) return
-
-  const roll = Math.floor(Math.random() * currentActiveNoodles.length)
-  const selectedNoodle = currentActiveNoodles[roll]
+  if (!currentNoodles.length) return
 
+  const roll = Math.floor(Math.random() * currentNoodles.length)
+  const selectedNoodle = currentNoodles[roll]
   if (!selectedNoodle) return
 
   const noodleLogo = el.querySelector<HTMLElement>(`#intro-header-noodle-${selectedNoodle.key}`)
-
-  if (!defaultLogo || !noodleLogo || !tagline) return
+  if (!noodleLogo) return
 
   defaultLogo.style.display = 'none'
   noodleLogo.style.display = 'block'
@@ -97,10 +66,7 @@ onPrehydrate(el => {
 </script>
 
 <template>
-  <div
-    :data-active-noodles="JSON.stringify(activeNoodlesData)"
-    :data-permanent-noodles="JSON.stringify(permanentNoodlesData)"
-  >
+  <div :data-noodles="JSON.stringify(noodlesData)">
     <h1 class="sr-only">
       {{ $t('alt_logo') }}
     </h1>
@@ -118,15 +84,7 @@ onPrehydrate(el => {
       </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"
+      v-for="noodle in NOODLES"
       :key="noodle.key"
       :id="`intro-header-noodle-${noodle.key}`"
       class="hidden"

app/components/Noodle/Artemis/Logo.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="relative w-80 sm:w-100 max-w-full">
+    <ColorSchemeImg
+      width="400"
+      class="motion-safe:animate-fade-in motion-safe:animate-scale-in relative z-10 w-full"
+      dark-src="/extra/npmx-dark-artemis.svg"
+      light-src="/extra/npmx-light-artemis.svg"
+      :alt="$t('alt_logo')"
+    />
+    <ColorSchemeImg
+      width="1440"
+      height="455"
+      class="absolute -bottom-4 inset-is-0 w-full h-auto mix-blend-lighten light:mix-blend-darken motion-safe:animate-fade-in pointer-events-none select-none"
+      dark-src="/extra/moon-dark.png"
+      light-src="/extra/moon-light.png"
+      alt=""
+    />
+  </div>
+</template>

app/components/Noodle/Kawaii/Logo.vue

@@ -1,7 +1,7 @@
 <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"
+    class="motion-safe:animate-fade-in motion-safe:animate-scale-in w-80 sm:w-100"
     src="/extra/npmx-cute.svg"
     :alt="$t('alt_logo_kawaii')"
   />

app/components/Noodle/KawaiiPride/Logo.vue

@@ -0,0 +1,8 @@
+<template>
+  <img
+    width="400"
+    class="motion-safe:animate-fade-in motion-safe:animate-scale-in w-80 sm:w-100"
+    src="/extra/npmx-cute-transgender.svg"
+    :alt="$t('alt_logo_kawaii')"
+  />
+</template>

app/components/Noodle/ListCard.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { Noodle } from '#shared/schemas/noodle'
+import { resolveNoodleLogo } from '../Noodle'
+
+const props = defineProps<{
+  noodle: Noodle
+}>()
+
+const logo = computed(() => resolveNoodleLogo(props.noodle.key))
+</script>
+
+<template>
+  <NuxtLink
+    :to="`/noodles/${noodle.slug}`"
+    class="group relative block rounded-xl border border-border bg-bg-elevated overflow-hidden transition-colors hover:border-border-hover decoration-none"
+  >
+    <span class="sr-only">{{ noodle.title }}</span>
+    <div class="aspect-[4/3] flex items-center justify-center bg-bg p-8 overflow-hidden">
+      <component :is="logo" v-if="logo" class="max-w-full max-h-full" />
+      <span v-else class="i-lucide:sparkles w-12 h-12 text-fg-subtle" aria-hidden="true" />
+    </div>
+    <div class="absolute top-3 inset-ie-3 text-fg-subtle group-hover:text-fg transition-colors">
+      <span class="i-lucide:arrow-up-right rtl-flip w-4 h-4" aria-hidden="true" />
+    </div>
+    <div
+      class="border-t border-border px-4 py-3 flex items-center gap-2 text-xs text-fg-muted font-mono"
+    >
+      <span class="text-fg-subtle">//</span>
+      <DateTime :datetime="noodle.date" year="numeric" month="2-digit" day="2-digit" />
+      <template v-if="noodle.dateTo">
+        <span class="text-fg-subtle">—</span>
+        <DateTime :datetime="noodle.dateTo" year="numeric" month="2-digit" day="2-digit" />
+      </template>
+    </div>
+  </NuxtLink>
+</template>

app/components/Noodle/Press/Logo.vue

@@ -1,19 +1,9 @@
 <template>
-  <TooltipApp interactive position="top">
-    <template #content>
-      <p class="text-sm font-medium text-fg mb-1">
-        A free press makes openness possible for everyone.
-        <LinkBase to="https://en.wikipedia.org/wiki/World_Press_Freedom_Day"
-          >Read more about Press Freedom Day</LinkBase
-        >
-      </p>
-    </template>
-    <ColorSchemeImg
-      width="320"
-      class="mb-16 w-80 sm:w-140 max-w-full"
-      dark-src="/extra/npmx-dark-press.png"
-      light-src="/extra/npmx-light-press.png"
-      :alt="$t('alt_logo')"
-    />
-  </TooltipApp>
+  <ColorSchemeImg
+    width="320"
+    class="motion-safe:animate-fade-in motion-safe:animate-scale-in w-80 sm:w-140 max-w-full"
+    dark-src="/extra/npmx-dark-press.png"
+    light-src="/extra/npmx-light-press.png"
+    :alt="$t('alt_logo')"
+  />
 </template>

app/components/Noodle/index.ts

@@ -1,38 +1,44 @@
+import type { Component } from 'vue'
+import { noodles } from '~/noodles'
+import NoodleArtemisLogo from './Artemis/Logo.vue'
 import NoodleKawaiiLogo from './Kawaii/Logo.vue'
+import NoodleKawaiiPrideLogo from './KawaiiPride/Logo.vue'
 import NoodlePressLogo from './Press/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
-  // `Date to` for the noodle
+  date: string
   dateTo?: 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
 }
 
-// Permanent noodles - always shown on specific query param (e.g. ?kawaii)
-export const PERMANENT_NOODLES: Noodle[] = [
-  {
-    key: 'kawaii',
-    logo: NoodleKawaiiLogo,
-    tagline: false,
-  },
-]
+// Keyed by the entry's `key` in app/noodles.ts.
+const NOODLE_LOGOS: Record<string, Component> = {
+  'press': NoodlePressLogo,
+  'kawaii': NoodleKawaiiLogo,
+  'kawaii-pride': NoodleKawaiiPrideLogo,
+  'artemis': NoodleArtemisLogo,
+}
+
+export function resolveNoodleLogo(key: string): Component | undefined {
+  return NOODLE_LOGOS[key]
+}
 
-// Active noodles - shown based on date and timezone
-export const ACTIVE_NOODLES: Noodle[] = [
-  {
-    key: 'press',
-    logo: NoodlePressLogo,
-    date: '2026-05-01',
-    dateTo: '2026-05-04',
-    timezone: 'auto',
-    tagline: false,
-  },
-]
+export const NOODLES: Noodle[] = noodles.map(entry => {
+  const logo = NOODLE_LOGOS[entry.key]
+  if (!logo) {
+    throw new Error(
+      `Missing logo registration for noodle key "${entry.key}". Add it to NOODLE_LOGOS in app/components/Noodle/index.ts.`,
+    )
+  }
+  return {
+    key: entry.key,
+    logo,
+    date: entry.date,
+    dateTo: entry.dateTo,
+    timezone: entry.timezone,
+    tagline: entry.tagline,
+  }
+})