From b394b535b3850ee3bc89c995223b379de2697af7 Mon Sep 17 00:00:00 2001
From: "Willow (GHOST)" <git@willow.sh>
Date: Tue, 4 Aug 2026 00:59:49 +0100
Subject: [PATCH] perf: consolodate noodles data and improve perf

---
 CONTRIBUTING.md                           |  83 +++++++-------
 app/components/Landing/IntroHeader.vue    | 118 ++++----------------
 app/components/Noodle/ListCard.vue        |   7 +-
 app/components/Noodle/index.ts            | 102 -----------------
 app/composables/useActiveNoodle.client.ts |   5 +
 app/composables/useActiveNoodle.server.ts |  34 ++++++
 app/noodles.ts                            | 128 +++++++++++++++++++---
 app/noodles/logos.ts                      |  44 ++++++++
 app/pages/noodles/[slug].vue              |   3 +-
 shared/schemas/noodle.ts                  |   2 +-
 test/nuxt/a11y.spec.ts                    |   9 +-
 11 files changed, 268 insertions(+), 267 deletions(-)
 delete mode 100644 app/components/Noodle/index.ts
 create mode 100644 app/composables/useActiveNoodle.client.ts
 create mode 100644 app/composables/useActiveNoodle.server.ts
 create mode 100644 app/noodles/logos.ts

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index e153c57fde..b748c3053b 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1054,7 +1054,7 @@ Global application settings are added to the Storybook toolbar for easy testing
 - the **homepage**, where it temporarily replaces the logo while it is active, and
 - the **`/noodles` archive**, where every past noodle lives on permanently with its own detail page.
 
-The two are wired up independently, so shipping a noodle to the homepage **and** the archive in the same PR keeps things in sync. Do both at once.
+The two are wired up by `key` but live in separate files, so shipping a noodle to the homepage **and** the archive in the same PR keeps things in sync. Do both at once.
 
 ### 1. Add the logo component
 
@@ -1077,79 +1077,82 @@ It's recommended to add a tooltip with event information to each noodle. If the
 </template>
 ```
 
-### 2. Register the logo and show it on the homepage
+### 2. Register the logo and add the archive entry
 
-In `app/components/Noodle/index.ts`:
+Noodles live in two files, split by what reaches the browser. The homepage's active-noodle decision runs server-side and is delivered via the SSR payload, so the client only ever loads the one logo it needs:
 
-- import the component, and
-- add it to the homepage rotation — `ACTIVE_NOODLES` for a date-bound noodle, or `PERMANENT_NOODLES` for one shown only behind a query param (e.g. `?kawaii`), and
-- register it in the `NOODLE_LOGOS` map so the archive can resolve it by `key`.
+1. **`app/noodles/logos.ts`** — register a lazy loader for your `Logo.vue`. Logos are code-split and fetched only when a page actually renders them. This is the only noodle file the homepage client imports.
+2. **`app/noodles.ts`** — everything else: the archive entry (title, slug, dates, occasion, authors, poster, references) plus its homepage rotation fields (`homepage`, `permanent`, `phases`).
 
 ```ts
-import NoodleTetrisLogo from './Tetris/Logo.vue'
-
-export const ACTIVE_NOODLES: Noodle[] = [
-  {
-    key: 'tetris',
-    logo: NoodleTetrisLogo,
-    date: '2026-06-06',
-    dateTo: '2026-06-08',
-    timezone: 'auto', // visitor's local time; or an IANA name like 'America/Los_Angeles'
-    tagline: false, // hide the npmx tagline while active
-  },
-]
-
-const NOODLE_LOGOS: Record<string, Component> = {
-  // …
-  tetris: NoodleTetrisLogo,
-}
+// app/noodles/logos.ts
+const tetris: NoodleLogoLoader = () => import('../components/Noodle/Tetris/Logo.vue')
 ```
 
-> [!IMPORTANT]
-> The `date` and `dateTo` keys are inclusive, meaning they specify the start (at 00:00) and end (at 23:59) dates. If the dates overlap, a noodle will be randomly selected on each visit.
-
-> [!IMPORTANT]
-> The `key` here must exactly match the `key` of the archive entry you add in the next step — that is how the archive looks up the logo.
-
-### 3. Add the archive entry
-
-Append an entry to `app/noodles.ts`. Only `key`, `title`, `slug`, and `date` are required; every other field is optional, and the detail page renders a section only for the fields you fill in. The list is sorted by date automatically.
-
 ```ts
+// app/noodles.ts
 {
   key: 'tetris',
   title: 'World Tetris Day',
   slug: 'tetris', // becomes /noodles/tetris — must be unique
   date: '2026-06-06',
   dateTo: '2026-06-08',
-  timezone: 'auto',
-  tagline: false,
+  timezone: 'UTC', // IANA name, defaults to UTC
+  tagline: false, // hide the npmx tagline while active
   occasion: 'The legendary console turns 42. …',
   prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2855',
   authors: [ALEX], // reuse the author consts at the top of the file
   posterImage: '/extra/tetris.svg', // OG-image hero
   references: [{ label: 'Tetris (1984)', url: 'https://en.wikipedia.org/wiki/Tetris' }],
+  logo: logo('tetris'),
+  homepage: true, // rotate on the homepage during this noodle's date window
 },
 ```
 
-Authors link out to Bluesky via their `blueskyHandle`. Reuse an existing author const (`ALEX`, `ALFON`, …) or add a new one at the top of the file.
+Only `key`, `title`, `slug`, `date`, and `logo` are required; every other field is optional, and the detail page renders a section only for the fields you fill in.
+
+> [!IMPORTANT]
+> The `date` and `dateTo` keys are inclusive, meaning they specify the start (at 00:00) and end (at 23:59) dates. If the dates overlap, a noodle will be randomly selected on each visit.
+
+**Homepage rotation** is opt-in, from the entry's own fields:
 
-#### Grouping a series with `variants`
+- `homepage: true` — rotate during the entry's `date`/`dateTo` window (e.g. `tetris`, `emoji-day`).
+- `permanent: true` — always available behind its query param (e.g. `?kawaii`), never date-gated.
+- `phases` — see below.
 
-When a single occasion ships as several rotating designs (Pride Month, for example, cycles through three logos), add **one** archive entry rather than one per design. Point `posterImage` at the lead artwork and list the others in `variants` — the detail page's lens carousel shows the registered logo first, then each variant image:
+A noodle with none of these stays in the archive but never rotates on the homepage (e.g. `press`, `nodejs`). The `key` must match the loader key in `logos.ts`.
+
+Authors link out to Bluesky via their `blueskyHandle`. Reuse an existing author const (`ALEX`, `ALFON`, …) or add a new one at the top of `app/noodles.ts`.
+
+#### Grouping a series (Pride Month example)
+
+When a single occasion ships as several rotating designs on the homepage timeline, add **one** archive entry and describe each spin as a `phase`. Each phase has its own `key`, dates, and lazy logo. Point `posterImage` at the lead artwork and list the other designs in `variants` — the detail page's lens carousel shows the registered logo first, then each variant image:
 
 ```ts
+// app/noodles.ts — one archive entry, three homepage phases
 {
-  key: 'pride-1', // matches the registered NOODLE_LOGOS key (renders first in the lens)
+  key: 'pride-1',
   title: 'Pride Month',
   slug: 'pride',
+  date: '2026-06-01',
+  dateTo: '2026-07-01', // the archive shows the whole celebration…
   // …
   posterImage: '/extra/pride-1.svg',
   variants: ['/extra/pride-2.svg', '/extra/pride-3.png'],
+  logo: logo('pride-1'),
+  phases: [ // …while the homepage rotates the individual designs
+    { key: 'pride-1', date: '2026-06-01', dateTo: '2026-06-06', timezone: 'UTC' },
+    { key: 'pride-2', date: '2026-06-08', dateTo: '2026-06-20', timezone: 'UTC' },
+    { key: 'pride-3', date: '2026-06-20', dateTo: '2026-07-01', timezone: 'UTC' },
+  ],
 },
 ```
 
-### 4. Verify
+The homepage `phases` only affect the front page rotation; the archive card, detail page, and slug (`/noodles/pride`) all keep using the entry itself.
+
+The homepage slots only affect the front page rotation; the archive card, detail page, and slug (`/noodles/pride`) all keep using the entry itself.
+
+### 3. Verify
 
 ```bash
 pnpm test:types
diff --git a/app/components/Landing/IntroHeader.vue b/app/components/Landing/IntroHeader.vue
index 0b10a2bdd6..df9e22bfce 100644
--- a/app/components/Landing/IntroHeader.vue
+++ b/app/components/Landing/IntroHeader.vue
@@ -1,101 +1,33 @@
 <script setup lang="ts">
-import { ACTIVE_NOODLES, PERMANENT_NOODLES, type Noodle } from '../Noodle'
+import { onMounted, ref, shallowRef } from 'vue'
+import type { Component } from 'vue'
+import { loadNoodleLogo } from '~/noodles/logos'
 
 const { env } = useAppConfig().buildInfo
 
-const activeNoodlesData = ACTIVE_NOODLES.map(noodle => ({
-  key: noodle.key,
-  date: noodle.date,
-  dateTo: noodle.dateTo,
-  timezone: noodle.timezone,
-  tagline: noodle.tagline,
-}))
+// Decided on the server and embedded in the SSR payload; the client only loads
+// the single logo it needs.
+const active = useActiveNoodle()
+const activeLogo = shallowRef<Component | null>(null)
+const hideTagline = ref(false)
 
-const permanentNoodlesData = PERMANENT_NOODLES.map(noodle => ({
-  key: noodle.key,
-  tagline: noodle.tagline,
-}))
+onMounted(async () => {
+  const noodle = active.value
+  if (!noodle) return
 
-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 => {
-    if (!noodle.date) return false
-
-    const today = new Intl.DateTimeFormat('en-CA', {
-      timeZone: noodle.timezone !== 'auto' ? noodle.timezone : undefined,
-      year: 'numeric',
-      month: '2-digit',
-      day: '2-digit',
-    }).format(new Date())
-
-    if (!noodle.dateTo) return today === noodle.date
-    return today >= noodle.date && today <= noodle.dateTo
-  })
-
-  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'
-  }
+  hideTagline.value = noodle.tagline === false
+  const logoComponent = await loadNoodleLogo(noodle.key)
+  if (logoComponent) activeLogo.value = logoComponent
 })
 </script>
 
 <template>
-  <div
-    :data-active-noodles="JSON.stringify(activeNoodlesData)"
-    :data-permanent-noodles="JSON.stringify(permanentNoodlesData)"
-  >
+  <div>
     <h1 class="sr-only">
       {{ $t('alt_logo') }}
     </h1>
     <div
+      v-show="!activeLogo"
       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"
@@ -109,23 +41,15 @@ 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"
-      :key="noodle.key"
-      :id="`intro-header-noodle-${noodle.key}`"
-      class="hidden"
+      :is="activeLogo"
+      v-if="activeLogo"
+      id="intro-header-noodle-active"
+      class="mb-6 w-fit mx-auto motion-safe:animate-fade-in motion-safe:animate-fill-both"
       aria-hidden="true"
-      :is="noodle.logo"
     />
     <p
       id="intro-header-tagline"
+      v-show="!hideTagline"
       class="text-fg-muted text-lg sm:text-xl mb-12 lg:mb-14 motion-safe:animate-slide-up motion-safe:animate-fill-both delay-100"
     >
       {{ $t('tagline') }}
diff --git a/app/components/Noodle/ListCard.vue b/app/components/Noodle/ListCard.vue
index 7ba63add50..1c75bb63a6 100644
--- a/app/components/Noodle/ListCard.vue
+++ b/app/components/Noodle/ListCard.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import type { Noodle } from '#shared/schemas/noodle'
-import { resolveNoodleLogo } from '../Noodle'
+import type { ArchiveNoodle } from '~/noodles'
 
 const props = defineProps<{
-  noodle: Noodle
+  noodle: ArchiveNoodle
 }>()
 
-const logo = computed(() => resolveNoodleLogo(props.noodle.key))
+const logo = computed(() => props.noodle.logo)
 </script>
 
 <template>
diff --git a/app/components/Noodle/index.ts b/app/components/Noodle/index.ts
deleted file mode 100644
index a73644a0a4..0000000000
--- a/app/components/Noodle/index.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-import type { Component } from 'vue'
-import NoodleArtemisLogo from './Artemis/Logo.vue'
-import NoodleKawaiiLogo from './Kawaii/Logo.vue'
-import NoodleNodejsLogo from './Nodejs/Logo.vue'
-import NoodlePressLogo from './Press/Logo.vue'
-import NoodlePride1Logo from './Pride1/Logo.vue'
-import NoodleTransgenderVisibilityLogo from './TransgenderVisibility/Logo.vue'
-import NoodlePride2Logo from './Pride2/Logo.vue'
-import NoodlePride3Logo from './Pride3/Logo.vue'
-import NoodleTetrisLogo from './Tetris/Logo.vue'
-import NoodleEmojiDayLogo from './EmojiDay/Logo.vue'
-import NoodleGifDayLogo from './GifDay/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 (YYYY-MM-DD)
-  date?: `${number}-${number}-${number}`
-  // `Date to` for the noodle (YYYY-MM-DD)
-  dateTo?: `${number}-${number}-${number}`
-  // 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,
-  },
-]
-
-// Active noodles - shown based on date and timezone
-export const ACTIVE_NOODLES: Noodle[] = [
-  {
-    key: 'pride-1',
-    logo: NoodlePride1Logo,
-    date: '2026-06-01',
-    dateTo: '2026-06-06',
-    timezone: 'auto',
-  },
-  {
-    key: 'tetris',
-    logo: NoodleTetrisLogo,
-    date: '2026-06-06',
-    dateTo: '2026-06-08',
-    timezone: 'auto',
-    tagline: false,
-  },
-  {
-    key: 'pride-2',
-    logo: NoodlePride2Logo,
-    date: '2026-06-08',
-    dateTo: '2026-06-20',
-    timezone: 'auto',
-  },
-  {
-    key: 'pride-3',
-    logo: NoodlePride3Logo,
-    date: '2026-06-20',
-    dateTo: '2026-07-01',
-    timezone: 'auto',
-  },
-  {
-    key: 'emoji-day',
-    logo: NoodleEmojiDayLogo,
-    date: '2026-07-17',
-    dateTo: '2026-07-19',
-    timezone: 'auto',
-  },
-  {
-    key: 'gif-day',
-    logo: NoodleGifDayLogo,
-    date: '2026-09-05',
-    dateTo: '2026-09-08',
-    timezone: 'auto',
-  },
-]
-
-// Logo registry for the /noodles archive, keyed by the entry's `key` in
-// app/noodles.ts. The homepage only renders PERMANENT_NOODLES + ACTIVE_NOODLES
-// above; the archive resolves any past noodle's logo through this map.
-const NOODLE_LOGOS: Record<string, Component> = {
-  'press': NoodlePressLogo,
-  'kawaii': NoodleKawaiiLogo,
-  'transgender-visibility-day': NoodleTransgenderVisibilityLogo,
-  'artemis': NoodleArtemisLogo,
-  'nodejs': NoodleNodejsLogo,
-  'pride-1': NoodlePride1Logo,
-  'tetris': NoodleTetrisLogo,
-  'emoji-day': NoodleEmojiDayLogo,
-  'gif-day': NoodleGifDayLogo,
-}
-
-export function resolveNoodleLogo(key: string): Component | undefined {
-  return NOODLE_LOGOS[key]
-}
diff --git a/app/composables/useActiveNoodle.client.ts b/app/composables/useActiveNoodle.client.ts
new file mode 100644
index 0000000000..c1bf92ac2d
--- /dev/null
+++ b/app/composables/useActiveNoodle.client.ts
@@ -0,0 +1,5 @@
+import type { ActiveNoodle } from '~/noodles'
+
+// Client-only: read the `ActiveNoodle` the server composable computed and
+// embedded in the SSR payload. No noodle data is shipped to the client.
+export const useActiveNoodle = () => useState<ActiveNoodle | undefined>('activeNoodle')
diff --git a/app/composables/useActiveNoodle.server.ts b/app/composables/useActiveNoodle.server.ts
new file mode 100644
index 0000000000..d215016298
--- /dev/null
+++ b/app/composables/useActiveNoodle.server.ts
@@ -0,0 +1,34 @@
+import { activeNoodles, permanentNoodles, type ActiveNoodle } from '~/noodles'
+
+function todayIn(timezone?: string): string {
+  return new Intl.DateTimeFormat('en-CA', {
+    timeZone: timezone ?? 'UTC',
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+  }).format(new Date())
+}
+
+// Server-only: pick the noodle to show on the homepage when it's SSR'd, so
+// `useRoute` is available. Computes against the (server-side) noodle data and
+// stores just the result in Nuxt's payload for the client to read.
+function computeActiveNoodle(): ActiveNoodle | undefined {
+  const route = useRoute()
+
+  // Permanent noodles are only requested via their query param (?kawaii).
+  const permanent = permanentNoodles.find(slot => route.query[slot.key] !== undefined)
+  if (permanent) return { key: permanent.key, tagline: permanent.tagline }
+
+  const current = activeNoodles.filter(slot => {
+    const today = todayIn(slot.timezone)
+    if (!slot.dateTo) return today === slot.date
+    return today >= slot.date && today <= slot.dateTo
+  })
+  if (!current.length) return undefined
+
+  const picked = current[Math.floor(Math.random() * current.length)]!
+  return { key: picked.key, tagline: picked.tagline }
+}
+
+export const useActiveNoodle = () =>
+  useState<ActiveNoodle | undefined>('activeNoodle', computeActiveNoodle)
diff --git a/app/noodles.ts b/app/noodles.ts
index 0655ec1065..137a3e834d 100644
--- a/app/noodles.ts
+++ b/app/noodles.ts
@@ -1,7 +1,54 @@
+import { defineAsyncComponent, type Component } from 'vue'
 import type { Noodle } from '#shared/schemas/noodle'
+import { noodleLogoLoaders, type NoodleLogoKey } from './noodles/logos'
 
 // To add a noodle: drop a Logo.vue under app/components/Noodle/<Name>/,
-// register the key in app/components/Noodle/index.ts, then append an entry below.
+// register a lazy loader in app/noodles/logos.ts, then append an entry below
+// (add `homepage`/`permanent`/`phases` to put it in the homepage rotation).
+
+// Primary logo, loaded on demand. The archive / detail page only fetches the
+// chunks for the noodles it actually renders.
+const logo = (key: NoodleLogoKey): Component => {
+  const loader = noodleLogoLoaders[key]
+  return defineAsyncComponent(() => loader().then(m => m.default))
+}
+
+// A homepage rotation window: which logo, when, and with which tagline.
+export type NoodlePhase = {
+  key: NoodleLogoKey
+  // Date for the noodle (YYYY-MM-DD)
+  date: string
+  // `Date to` for the noodle (YYYY-MM-DD)
+  dateTo?: string
+  // IANA timezone for the noodle (defaults to UTC when omitted)
+  timezone?: string
+  // Show npmx tagline or not (default is true)
+  tagline?: boolean
+}
+
+// The server-decided active noodle, embedded into the SSR payload via
+// `useState('activeNoodle')` so the client only ever loads the one logo it needs.
+export type ActiveNoodle = {
+  key: NoodleLogoKey
+  tagline?: boolean
+}
+
+// A canonical noodle: the archive data plus its (lazy) visual and homepage
+// rotation fields.
+export type ArchiveNoodle = Noodle & {
+  logo: Component
+  // Always available behind its query param (e.g. ?kawaii), never date-gated.
+  permanent?: boolean
+  // Rotate on the homepage during this noodle's own date window.
+  homepage?: boolean
+  // Override the homepage rotation with one window per design (pride month).
+  // Implies the noodle rotates on the homepage.
+  phases?: NoodlePhase[]
+}
+
+// The entry `key` is the noodle's stable id; enforce that it always has a
+// matching registered logo loader so the two can't drift apart.
+type NoodleEntry = ArchiveNoodle & { key: NoodleLogoKey }
 
 const ALEX = { name: 'Alex Savelyev', blueskyHandle: 'alexdln.com' }
 const ALFON = { name: 'Alfon', blueskyHandle: 'alfon.dev' }
@@ -10,14 +57,14 @@ const FELIX = { name: 'Felix Schneider', blueskyHandle: 'felixs.dev' }
 const JVIIDE = { name: 'Joachim Viide', blueskyHandle: 'jviide.iki.fi' }
 const MATTEO = { name: 'Matteo Gabriele', blueskyHandle: 'matteogabriele.bsky.social' }
 
-const entries: Noodle[] = [
+const entries: NoodleEntry[] = [
   {
     key: 'tetris',
     title: 'World Tetris Day',
     slug: 'tetris',
     date: '2026-06-06',
     dateTo: '2026-06-08',
-    timezone: 'auto',
+    timezone: 'UTC',
     tagline: false,
     occasion:
       'The legendary console turns 42. Yes, you matched the blocks correctly — but polyominoes are cool too!',
@@ -30,6 +77,8 @@ const entries: Noodle[] = [
         url: 'https://en.wikipedia.org/wiki/Tetris',
       },
     ],
+    logo: logo('tetris'),
+    homepage: true,
   },
   {
     key: 'pride-1',
@@ -37,7 +86,7 @@ const entries: Noodle[] = [
     slug: 'pride',
     date: '2026-06-01',
     dateTo: '2026-07-01',
-    timezone: 'auto',
+    timezone: 'UTC',
     occasion: 'We stand together. Always, everywhere, for all of us. Happy Pride Month! 🏳️‍🌈',
     prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2826',
     authors: [ALEX, ALFON],
@@ -49,6 +98,27 @@ const entries: Noodle[] = [
         url: 'https://en.wikipedia.org/wiki/Pride_Month',
       },
     ],
+    logo: logo('pride-1'),
+    phases: [
+      {
+        key: 'pride-1',
+        date: '2026-06-01',
+        dateTo: '2026-06-06',
+        timezone: 'UTC',
+      },
+      {
+        key: 'pride-2',
+        date: '2026-06-08',
+        dateTo: '2026-06-20',
+        timezone: 'UTC',
+      },
+      {
+        key: 'pride-3',
+        date: '2026-06-20',
+        dateTo: '2026-07-01',
+        timezone: 'UTC',
+      },
+    ],
   },
   {
     key: 'press',
@@ -56,7 +126,7 @@ const entries: Noodle[] = [
     slug: 'press',
     date: '2026-05-01',
     dateTo: '2026-05-04',
-    timezone: 'auto',
+    timezone: 'UTC',
     tagline: false,
     occasion:
       'We build open source to keep our work open. A free press keeps the entire world open.',
@@ -69,25 +139,28 @@ const entries: Noodle[] = [
         url: 'https://en.wikipedia.org/wiki/World_Press_Freedom_Day',
       },
     ],
+    logo: logo('press'),
   },
   {
     key: 'kawaii',
     title: 'Kawaii',
     slug: 'kawaii',
     date: '2026-03-31',
-    timezone: 'auto',
+    timezone: 'UTC',
     tagline: false,
     occasion: "Our first noodle, and of course, in kawaii style. It's all about fun and joy.",
     prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2346',
     authors: [ALFON],
     posterImage: '/extra/npmx-cute.svg',
+    logo: logo('kawaii'),
+    permanent: true,
   },
   {
     key: 'transgender-visibility-day',
     title: 'Transgender Visibility Day',
     slug: 'transgender-visibility-day',
     date: '2026-03-31',
-    timezone: 'auto',
+    timezone: 'UTC',
     tagline: false,
     occasion: 'Today and always ./🏳️‍⚧️',
     prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2349',
@@ -99,6 +172,7 @@ const entries: Noodle[] = [
         url: 'https://en.wikipedia.org/wiki/International_Transgender_Day_of_Visibility',
       },
     ],
+    logo: logo('transgender-visibility-day'),
   },
   {
     key: 'artemis',
@@ -119,13 +193,14 @@ const entries: Noodle[] = [
         url: 'https://en.wikipedia.org/wiki/Artemis_II',
       },
     ],
+    logo: logo('artemis'),
   },
   {
     key: 'nodejs',
     title: 'Node.js Initial Release',
     slug: 'nodejs',
     date: '2026-05-27',
-    timezone: 'auto',
+    timezone: 'UTC',
     occasion: 'console.log("happy birthday, nodejs")',
     prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2778',
     authors: [ALEX, ALFON, GRAPHIEROS],
@@ -135,6 +210,7 @@ const entries: Noodle[] = [
         url: 'https://github.com/nodejs/node-v0.x-archive/releases/tag/v0.0.1',
       },
     ],
+    logo: logo('nodejs'),
   },
   {
     key: 'emoji-day',
@@ -142,7 +218,7 @@ const entries: Noodle[] = [
     slug: 'emoji-day',
     date: '2026-07-17',
     dateTo: '2026-07-19',
-    timezone: 'auto',
+    timezone: 'UTC',
     tagline: false,
     occasion: '📅🌍🚀💬🥳✨',
     prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/3038',
@@ -151,14 +227,16 @@ const entries: Noodle[] = [
       { label: 'World Emoji Day Website', url: 'https://worldemojiday.com/' },
       { label: 'Wikipedia', url: 'https://en.wikipedia.org/wiki/World_Emoji_Day' },
     ],
+    logo: logo('emoji-day'),
+    homepage: true,
   },
-
   {
     key: 'gif-day',
     title: 'National GIF Day',
     slug: 'gif-day',
-    date: '2026-09-5',
-    timezone: 'auto',
+    date: '2026-09-05',
+    dateTo: '2026-09-08',
+    timezone: 'UTC',
     tagline: false,
     occasion: 'National GIF day',
     prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2778',
@@ -169,13 +247,35 @@ const entries: Noodle[] = [
         url: 'https://www.whatnationaldayisit.com/day/Gif/',
       },
     ],
+    logo: logo('gif-day'),
+    homepage: true,
   },
 ]
 
-export const noodles: Noodle[] = [...entries].sort(
+export const noodles: ArchiveNoodle[] = [...entries].sort(
   (a, b) => Date.parse(b.date) - Date.parse(a.date),
 )
 
-export function findNoodle(slug: string): Noodle | undefined {
+export function findNoodle(slug: string): ArchiveNoodle | undefined {
   return noodles.find(n => n.slug === slug)
 }
+
+// The homepage rotation, derived from the entries so the archive data and the
+// homepage schedule can never drift apart. Consumed server-side only.
+export const activeNoodles: NoodlePhase[] = entries.flatMap(noodle => {
+  if (noodle.phases?.length) return noodle.phases
+  if (!noodle.homepage) return []
+  return [
+    {
+      key: noodle.key,
+      date: noodle.date,
+      dateTo: noodle.dateTo,
+      timezone: noodle.timezone,
+      tagline: noodle.tagline,
+    },
+  ]
+})
+
+export const permanentNoodles: ActiveNoodle[] = entries
+  .filter(noodle => noodle.permanent)
+  .map(noodle => ({ key: noodle.key, tagline: noodle.tagline }))
diff --git a/app/noodles/logos.ts b/app/noodles/logos.ts
new file mode 100644
index 0000000000..dae854bc92
--- /dev/null
+++ b/app/noodles/logos.ts
@@ -0,0 +1,44 @@
+import type { Component } from 'vue'
+
+// One lazy chunk per noodle logo. Nothing here is loaded until `loadNoodleLogo`
+// (or a `defineAsyncComponent` built on it) is actually invoked, so a page only
+// fetches the logo(s) it renders.
+export type NoodleLogoLoader = () => Promise<{ default: Component }>
+
+const artemis: NoodleLogoLoader = () => import('../components/Noodle/Artemis/Logo.vue')
+const emojiDay: NoodleLogoLoader = () => import('../components/Noodle/EmojiDay/Logo.vue')
+const gifDay: NoodleLogoLoader = () => import('../components/Noodle/GifDay/Logo.vue')
+const kawaii: NoodleLogoLoader = () => import('../components/Noodle/Kawaii/Logo.vue')
+const nodejs: NoodleLogoLoader = () => import('../components/Noodle/Nodejs/Logo.vue')
+const press: NoodleLogoLoader = () => import('../components/Noodle/Press/Logo.vue')
+const pride1: NoodleLogoLoader = () => import('../components/Noodle/Pride1/Logo.vue')
+const pride2: NoodleLogoLoader = () => import('../components/Noodle/Pride2/Logo.vue')
+const pride3: NoodleLogoLoader = () => import('../components/Noodle/Pride3/Logo.vue')
+const tetris: NoodleLogoLoader = () => import('../components/Noodle/Tetris/Logo.vue')
+const transgenderVisibility: NoodleLogoLoader = () =>
+  import('../components/Noodle/TransgenderVisibility/Logo.vue')
+
+export const noodleLogoLoaders = {
+  'artemis': artemis,
+  'emoji-day': emojiDay,
+  'gif-day': gifDay,
+  'kawaii': kawaii,
+  'nodejs': nodejs,
+  'press': press,
+  'pride-1': pride1,
+  'pride-2': pride2,
+  'pride-3': pride3,
+  'tetris': tetris,
+  'transgender-visibility-day': transgenderVisibility,
+} satisfies Record<string, NoodleLogoLoader>
+
+// The union of every registered logo key, derived from the map so callers can't
+// reference a logo that doesn't exist (e.g. `logo('tretris')` is a type error).
+export type NoodleLogoKey = keyof typeof noodleLogoLoaders
+
+export async function loadNoodleLogo(key: NoodleLogoKey): Promise<Component | undefined> {
+  const loader = noodleLogoLoaders[key]
+  if (!loader) return
+  const mod = await loader()
+  return mod.default
+}
diff --git a/app/pages/noodles/[slug].vue b/app/pages/noodles/[slug].vue
index eb3341c890..d74fe2123c 100644
--- a/app/pages/noodles/[slug].vue
+++ b/app/pages/noodles/[slug].vue
@@ -1,13 +1,12 @@
 <script setup lang="ts">
 import type { AtIdentifierString } from '@atproto/lex'
 import { findNoodle } from '~/noodles'
-import { resolveNoodleLogo } from '~/components/Noodle'
 
 const route = useRoute()
 const slug = computed(() => String(route.params.slug ?? ''))
 
 const noodle = computed(() => findNoodle(slug.value))
-const logo = computed(() => (noodle.value ? resolveNoodleLogo(noodle.value.key) : undefined))
+const logo = computed(() => noodle.value?.logo)
 
 const enrichedAuthors = computed(() =>
   (noodle.value?.authors ?? []).map(a => ({
diff --git a/shared/schemas/noodle.ts b/shared/schemas/noodle.ts
index 7d8a45af07..37124c4c61 100644
--- a/shared/schemas/noodle.ts
+++ b/shared/schemas/noodle.ts
@@ -18,7 +18,7 @@ const NoodleSchema = v.object({
   slug: v.string(),
   date: v.string(),
   dateTo: v.optional(v.string()),
-  // IANA timezone name, or "auto" for the visitor's local time.
+  // IANA timezone name, defaults to UTC when omitted.
   timezone: v.optional(v.string()),
   // When true, the npmx tagline is hidden while this noodle is active.
   tagline: v.optional(v.boolean()),
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index 2834583d4c..89b90f9e54 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -286,6 +286,7 @@ import {
 // The #components import automatically provides the client variant
 import LogoNuxt from '~/assets/logos/oss-partners/nuxt.svg'
 import CommandPaletteComponent from '~/components/CommandPalette.client.vue'
+import { noodles } from '~/noodles'
 import HeaderAccountMenuServer from '~/components/Header/AccountMenu.server.vue'
 import ToggleServer from '~/components/Settings/Toggle.server.vue'
 import SearchProviderToggleServer from '~/components/SearchProviderToggle.server.vue'
@@ -3171,13 +3172,7 @@ describe('component accessibility audits', () => {
     it('should have no accessibility violations', async () => {
       const component = await mountSuspended(NoodleListCard, {
         props: {
-          noodle: {
-            key: 'press',
-            slug: 'press',
-            title: 'Press',
-            date: '2026-05-01',
-            dateTo: '2026-05-04',
-          },
+          noodle: noodles.find(noodle => noodle.key === 'press')!,
         },
       })
       const results = await runAxe(component)