feat(ui): /noodles archive page by Adebesin-Cell · Pull Request #2779 · npmx-dev/npmx.dev

Adebesin-Cell · 2026-05-22T00:49:50Z

A place to look back at noodles we've shipped — a little museum for past npmx logos.

/noodles is the archive grid. Each card opens a detail page with the full-size logo, the day/event it ran for, dates, the PR it shipped in, and credits.

The detail page is intentionally light: only the basics are required (title, slug, date, a one-line occasion). Longer write-ups and process images are optional, so adding a noodle never gets blocked on having a story written for it.

Highlights

/noodles archive grid, latest 10 shown with a load-more button.
Per-noodle detail page (/noodles/:slug) with a friendly bowl 404 for unknown slugs.
Hand-edited registry in app/noodles.ts — drop a logo, register it, add an entry.
Credits use the same AuthorList the blog does; avatars resolved at build time via a small modules/noodles.ts.
Seeded with the four noodles we've shipped so far: Kawaii, Kawaii (Pride), Artemis, Press Freedom Day.

Screenshots

Landing — /noodles archive

Screen.Recording.2026-05-22.at.16.33.17.mov

Discussion at: https://discord.com/channels/1464542801676206113/1506604678782124083

Introduces a public archive for every noodle (seasonal/event logo variants) shown on npmx, plus a contributor-friendly layout for adding new ones. What's new - /noodles lists every entry as a card (logo preview + date range or "always available" badge for permanent noodles). - /noodles/[slug] renders a per-noodle markdown page with hero logo, story body, authors, and an image gallery with click-to-lightbox. - modules/noodles.ts scans app/pages/noodles/*.md, validates frontmatter with valibot, resolves Bluesky avatars at build time, and exposes #noodles/entries. - app/components/Noodle/index.ts now derives ACTIVE/PERMANENT noodle arrays from #noodles/entries, so contributors only edit the .md file and the logo registry. - New NoodleGallery + NoodleLightbox (custom dialog-based, no external lib) and NoodleListCard for the archive grid. - Dedicated NoodlePostWrapper registered by the noodles module with a scoped include pattern, so blog and noodle markdown files don't share a wrapper. Blog module's include narrowed to pages/blog/. Other touches - Footer "Other" section now links to /noodles. - canonical-redirects.global.ts allowlist gains /noodles so the server middleware doesn't shortcut it to /package/noodles. - a11y test coverage for the four new components. - i18n keys under noodles.* (English only; CI syncs other locales). Seed Two stub .md files (press, kawaii) marked draft: true ship with this commit so the archive has content immediately. Gallery images should live under public/noodle-gallery/[key]/ — keeping them out of public/noodles/ avoids shadowing the /noodles route in dev.

@handle

- Landing /noodles hero: solid filled "bowl" (thick theme-aware border, inner + outer shadow), npmx sticker overlapping, thicker dark stripe background with wider gaps. Headings bumped to mono text-xl semibold uppercase per the Figma spec. - Individual noodle pages: restructured into an agency-style case study — full-bleed hero with the bowl, credits row (avatar + name + @handle, N authors), tombstone strip (dates · status), prose body, editorial numbered Figures section, footer back link. - New Noodle/Figures.vue: numbered Fig.NN editorial figure list with lightbox, replaces the 4-tile gallery on individual noodle pages. - New Noodle/BuildLog.vue: scroll-snap drafts → shipped strip, ready to wire once noodles get an authored drafts schema. - ListCard icon: maximize-2 → arrow-up-right (clearer "navigate to"). - Kawaii noodle: gave it active dates (no more "always available"), removed the /?kawaii parenthetical from the body stub. - Press noodle: populated with multi-author credits, real excerpt, 4-section body (brief · decisions · process · cuts), and a 4-image gallery so the case-study layout has something to render. - i18n (en): added noodles.credits, status, status_draft, status_shipped, figures. - Gitignore public/noodle-avatar/ (Bluesky avatars are fetched at build time, mirrors the existing public/blog/avatar pattern).

vercel · 2026-05-22T00:49:55Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Jun 6, 2026 1:50am

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Jun 6, 2026 1:50am
npmx-lunaria	Ignored		Jun 6, 2026 1:50am

coderabbitai · 2026-05-22T00:49:57Z

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

@coderabbitai resume to resume automatic reviews.
@coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

▶️ Resume reviews
🔍 Trigger review

📝 Walkthrough

Walkthrough

Adds a noodle archive and Valibot schema, new logo components and a central resolver, list/detail Nuxt pages with pagination and SEO, a carousel and list card UI, a Nuxt module to cache Bluesky avatars to public/noodle-avatar, and app integration including header/footer links, i18n and accessibility tests.

Changes

Noodles Feature — Logo Doodles Archive

Layer / File(s)	Summary
Data schema and archive `shared/schemas/noodle.ts`, `app/noodles.ts`	Adds `NoodleSchema` and `Noodle` type; introduces archive `entries`, exports sorted `noodles` and `findNoodle(slug)` helper.
Avatar caching Nuxt module `modules/noodles.ts`, `.gitignore`	Nuxt module parses registry handles, fetches Bluesky profiles, hashes avatar URLs to deterministic PNGs under `public/noodle-avatar`, emits `noodles/avatars.ts` resolver and registers `#noodles/avatars`; public/noodle-avatar added to `.gitignore`.
Logo components and resolution `app/components/Noodle/index.ts`, `app/components/Noodle/Artemis/Logo.vue`, `app/components/Noodle/KawaiiPride/Logo.vue`, `app/components/Noodle/Press/Logo.vue`, `app/components/Noodle/ListCard.vue`	Introduces `NOODLE_LOGOS` map and `resolveNoodleLogo`; adds Artemis and KawaiiPride logo components; simplifies Press logo to direct `ColorSchemeImg`; adds `NoodleListCard` linking to `/noodles/:slug` with date display.
Noodles pages and routing `app/pages/noodles/index.vue`, `app/pages/noodles/[slug].vue`	Archive index with client-side pagination/load-more and hero; detail page resolves noodle, logo and enriched authors (avatars/Bluesky URLs), sets SEO/OpenGraph, shows metadata, description and process images, and handles 404 with back-to-archive links.
Carousel and image UI `app/components/Noodle/Carousel.vue`	Adds a snap-scrolling carousel component with prev/next and dot navigation, eager-first image loading, ARIA labels and active-index tracking; used for noodle process images.
App integration, i18n and tests `app/components/Landing/IntroHeader.vue`, `app/components/AppFooter.vue`, `app/components/AppHeader.vue`, `server/middleware/canonical-redirects.global.ts`, `modules/blog.ts`, `i18n/locales/en.json`, `i18n/schema.json`, `test/nuxt/a11y.spec.ts`	IntroHeader refactor to use unified `NOODLES` dataset and date-range logic; AppHeader/AppFooter add `/noodles` links; canonical allowlist adds `/noodles`; blog Markdown include narrowed; new `noodles` i18n keys and schema; accessibility tests extended to new logos and `NoodleListCard`.

Possibly related PRs

npmx-dev/npmx.dev#2666: Related updates to noodle logo components and app/components/Noodle/index.ts wiring.
npmx-dev/npmx.dev#2614: Overlapping changes to AppFooter.vue footer link structure.

Suggested reviewers

graphieros
alexdln
patak-cat

🚥 Pre-merge checks | ✅ 4

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main addition: a new /noodles archive page feature, which aligns with the substantial changes across multiple files implementing this archive grid and detail pages.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The pull request description clearly outlines the feature: a noodles archive at /noodles with grid and detail pages for past npmx logos, including registry structure, credits, and seeded content.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2026-05-22T00:50:34Z

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

File	Note
i18n/locales/en.json	Source changed, localizations will be marked as outdated.

Warnings reference

Icon	Description
🔄️	The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

codecov · 2026-05-22T00:50:51Z

Codecov Report

❌ Patch coverage is 31.91489% with 64 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Noodle/Lens.vue	21.95%	48 Missing and 16 partials ⚠️

📢 Thoughts on this report? Let us know!

- Add a11y tests for Noodle/Figures and Noodle/BuildLog. - Remove unused Noodle/Gallery (replaced by Noodle/Figures). - Drop unused i18n keys noodles.credits and noodles.gallery.

…log handling

Team feedback: noodle write-ups would become a blocker, and the current detail content is placeholder anyway. Strip the case-study scaffolding — keep the /noodles archive landing page only. - Delete NoodlePostWrapper, BuildLog, Figures, Lightbox. - Delete press.md and kawaii.md (and the markdown vite plugin that turned them into routes). - Replace the noodles Nuxt module with a hand-edited TS registry at app/noodles.ts. Adding a noodle is now: drop a logo, register it in Noodle/index.ts, append an entry. No frontmatter required. - Slim shared/schemas/noodle.ts to a single Noodle type — only key, title, slug are required; date/dateTo/timezone/tagline/prUrl/draft optional. - ListCard: when prUrl is set the card becomes an external link to the shipping PR; otherwise it's a non-interactive tile (no broken link to a detail page). - Drop unused i18n keys (status, figures, lightbox, gallery, etc.). - Drop a11y tests for the removed components. - Revert storybook .md ignore + .gitignore noodle-avatar entries.

Team feedback: per-noodle write-ups would become a blocker, and the existing detail content was placeholder anyway. Strip the case-study scaffolding — keep the /noodles archive landing page only. - Delete NoodlePostWrapper, BuildLog, Figures, Lightbox. - Delete press.md and kawaii.md (and the markdown vite plugin that turned them into routes). - Replace the noodles Nuxt module with a hand-edited TS registry at app/noodles.ts. Adding a noodle is now: drop a logo, register it in Noodle/index.ts, append an entry. No frontmatter required. - Slim shared/schemas/noodle.ts to a single Noodle type — key, title, slug, date required; dateTo/timezone/tagline/prUrl optional. - Drop the "permanent noodle" concept entirely — all noodles are historical (have a date). Query param ?<key> still triggers any noodle regardless of date; otherwise activation falls back to the noodle's date range. - ListCard: when prUrl is set the card becomes an external link to the shipping PR; otherwise it's a non-interactive tile. - Drop unused i18n keys (status, figures, lightbox, gallery, etc.). - Drop a11y tests for the removed components. - Revert storybook .md ignore + .gitignore noodle-avatar entries.

…on blend - Restore the artemis noodle from npmx PR npmx-dev#2421/npmx-dev#2424. The light/dark SVGs were already in public/extra/; the SFC was removed when press was added. Registered in Noodle/index.ts and app/noodles.ts with the original April 2026 date range. - Drop the `?<key>` query-param branch from IntroHeader — all noodles are historical now, so activation is purely date-based. - Match Kawaii's hover/scale animation on Press, so all three noodles feel consistent on the homepage. - Remove the press-day tooltip — it leaks into the /noodles archive card on hover. - Bowl moon image was showing its black/white rectangle background in the bowl on /noodles. Add `mix-blend-lighten light:mix-blend-darken` so it dissolves into the bowl bg in both themes (same trick the artemis logo uses). - Stamp prUrl on press + artemis so their cards link to the shipping PR.

Per Alex's note: detail page always exists, but content is non-blocking. - New dynamic route app/pages/noodles/[slug].vue. Required content: hero bowl + title + occasion one-liner + dates. Optional sections only render when the registry entry has them filled in (description, processImages). - Schema gains optional `occasion`, `description`, `processImages`. Each existing entry now ships with an `occasion` line; the rest is blank and can be added per-noodle later. - Archive ListCard links back to the detail page (instead of jumping straight to the PR). The PR link moves to the detail page tombstone. - Cool "empty bowl" 404 — when /noodles/<unknown> is hit, the page still renders the bowl shape and a "this noodle never made it out of the bowl" message with a path back to /noodles. Server returns a 404 status to crawlers; humans see the friendly UI. Note on the missing "pride" noodle: no standalone pride PR exists. The cute-transgender variant in public/extra/ is a revision of the kawaii noodle (PR npmx-dev#2349), not a separate noodle. Surfaced in the kawaii entry's `occasion` line.

…wl content - Add Noodle/KawaiiPride/Logo.vue using npmx-cute-transgender.svg. - Original Kawaii reverts to npmx-cute.svg (pink/peach), tied to PR npmx-dev#2346 — the same-day pride revision (PR npmx-dev#2349) now lives as a distinct registry entry so both ship in the archive as history. - Detail-page bowl gains `flex items-center justify-center` so the logo / 404 ? glyph centers properly inside the circle.

@handle

…nsive pass - Restore the "what is noodles" section on /noodles landing — Alex flagged it had gone missing during the slim-down. Body simplified to a single paragraph (the previous copy was repeated 5x). - Authors field on noodles. Default duo Alex (alexdln.com) + Alfon (alfon.dev) credited on all four current noodles since they paired on both design and shipping PRs. - Credits column on the detail-page tombstone — name + linked @handle, flex-wrap so multiple authors stay tidy. - Load-more pagination on /noodles. Default shows the latest 10, a "Load N more" button reveals the next page. Renders nothing when the archive fits in one screen. - Responsive tweaks: smaller bowl (w-60 → w-96), thinner bowl border (10px → 14px), smaller hero title (text-3xl → text-6xl) and sticker (w-20 → w-40) on mobile; detail-page header/title scale down too. Tombstone goes one column on mobile, three on sm+. - Drop the duplicate what_is/what_is_body i18n keys. - max-w-prose removed from the what-is paragraph per request.

@handle

- Replace `container` on noodle main with plain px-4 sm:px-6 — the container utility was disturbing the bowl hero layout. Padding is what we actually needed. - Credits now render via the shared AuthorList expanded variant (same component the blog uses) — avatar + name + @handle, flex-wrap. Authors registry entries stay minimal: { name, blueskyHandle }. Avatars fall back to initials when not resolved. - Drop the manual credits column from the tombstone; tombstone is back to two columns (dates · shipped in). - Default duo Alex (alexdln.com) + Alfon (alfon.dev) credited on all four noodles per the team — they pair on design + shipping.

Per feedback, credits don't belong above the title — they live in the metadata row alongside dates / shipped-in. Switched to the compact AuthorList variant so the row stays tight (stacked avatars + names), tombstone is now three columns on sm+, one on mobile. Also drop the px-4 sm:px-6 from main: padding belongs on the content article, so the hero spans full bleed without negative margins.

- Tombstone is two columns again (dates · shipped in). Credits sits on its own row below with col-span-full, so multi-author noodles no longer crowd the dates/PR columns. Switch back to the expanded AuthorList variant since we have the horizontal room. - Add px-4 sm:px-6 to /noodles landing article so cards + headings don't hug the viewport edge on mobile. - Remove the px-4 sm:px-6 I left on the [slug].vue main; padding lives on content blocks now (consistent with landing), hero stays full-bleed.

alexdln · 2026-06-03T09:14:48Z

@ghostdevv I simplified the logic and fixed a few issues. Overall, it looks good to me now. Please take another look 🙃

trueberryless · 2026-06-03T18:17:14Z

This PR will also close #2780, could you link it in the PR description with the following Markdown please?

- Closes #2780

Adebesin-Cell · 2026-06-03T18:20:07Z

This PR will also close #2780, could you link it in the PR description with the following Markdown please?
- Closes #2780 

No, it doesn't close it. We have to discuss #2780 after this ships.

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Vordgi <sasha2822222@gmail.com> Co-authored-by: Alex Savelyev <91429106+alexdln@users.noreply.github.com> Co-authored-by: Willow (GHOST) <git@willow.sh>

Adebesin-Cell added 2 commits May 20, 2026 16:08

vercelBotdeployed to Preview – npmx.dev May 22, 2026 00:52 View deployment

Adebesin-Cell changed the title ~~feat(noodles): case-study layout for individual noodle pages~~feat(noodles): /noodles archive with per-noodle case studiesMay 22, 2026

Adebesin-Cell changed the title ~~feat(noodles): /noodles archive with per-noodle case studies~~feat(ui): /noodles archive with per-noodle case studiesMay 22, 2026

Adebesin-Cell added 2 commits May 22, 2026 02:09

fix(noodles): address CI failures
b8a9c76
- Add a11y tests for Noodle/Figures and Noodle/BuildLog. - Remove unused Noodle/Gallery (replaced by Noodle/Figures). - Drop unused i18n keys noodles.credits and noodles.gallery.

fix(storybook): ignore noodle .md files in storybook build, mirrors b…
df1bc25
…log handling

vercelBotdeployed to Preview – npmx.dev May 22, 2026 01:12 View deployment

Adebesin-Cell added 2 commits May 22, 2026 10:02

Adebesin-Cell changed the title ~~feat(ui): /noodles archive with per-noodle case studies~~feat(ui): /noodles archive pageMay 22, 2026

vercelBotdeployed to Preview – npmx.dev May 22, 2026 09:09 View deployment

trueberryless mentioned this pull request May 22, 2026
Noodle theming #2780
Open
3 tasks

vercelBothad a problem deploying to Preview – npmx.dev May 22, 2026 09:36 Failure

vercelBotdeployed to Preview – npmx.dev May 22, 2026 09:46 View deployment

vercelBotdeployed to Preview – npmx.dev May 22, 2026 09:53 View deployment

vercelBotdeployed to Preview – npmx.dev May 22, 2026 10:01 View deployment

Adebesin-Cell added 2 commits May 22, 2026 11:03

vercelBotdeployed to Preview – npmx.dev May 22, 2026 10:07 View deployment

vercelBotdeployed to Preview – npmx.dev May 22, 2026 10:10 View deployment

vercelBotdeployed to Preview – npmx.dev June 3, 2026 08:53 View deployment

test: add a11y test for noodle-lens
bcbefbd

vercelBotdeployed to Preview – npmx.dev June 3, 2026 09:00 View deployment

alexdlnand others added 2 commits June 3, 2026 10:08

chore: fix duplicated classes
8bb083b

Merge branch 'main' into feat/noodles-archive
80fb372

vercelBotdeployed to Preview – docs.npmx.dev June 3, 2026 09:11 View deployment

vercelBotdeployed to Preview – npmx.dev June 3, 2026 09:12 View deployment

alexdln approved these changes Jun 3, 2026
View reviewed changes

ghostdevv added 2 commits June 6, 2026 02:39

chore: consistent valibot usage
1cd6cf0

Merge remote-tracking branch 'origin/main' into feat/noodles-archive
305f97f

vercelBotdeployed to Preview – docs.npmx.dev June 6, 2026 01:43 View deployment

vercelBotdeployed to Preview – npmx.dev June 6, 2026 01:44 View deployment

tests(fix): bad merge
7ab4525

vercelBotdeployed to Preview – npmx.dev June 6, 2026 01:50 View deployment

ghostdevv approved these changes Jun 6, 2026
View reviewed changes

ghostdevv enabled auto-merge June 6, 2026 01:50

ghostdevv added this pull request to the merge queue Jun 6, 2026

Merged via the queue into npmx-dev:main with commit 396b17fJun 6, 2026
24 checks passed

github-actionsBot mentioned this pull request Jun 6, 2026
chore: release v0.16.0 #2856
Merged

coderabbitaiBot mentioned this pull request Jun 6, 2026
feat: backfill tetris and pride noodles into the archive #2863
Merged

coderabbitaiBot mentioned this pull request Jul 13, 2026
feat: add an interactive World Emoji Day noodle #3038
Merged

coderabbitaiBot mentioned this pull request Jul 23, 2026
feat: add noodle for national gif day #3067
Merged

Navigation Menu

Uh oh!

Uh oh!

feat(ui): /noodles archive page - #2779

feat(ui): /noodles archive page#2779
ghostdevv merged 67 commits into
npmx-dev:mainfrom
Adebesin-Cell:feat/noodles-archive

Adebesin-Cell commented May 22, 2026•
edited
Loading

Uh oh!

vercelBot commented May 22, 2026•
edited
Loading

Uh oh!

coderabbitaiBot commented May 22, 2026•
edited
Loading

Reviews paused

Walkthrough

Changes

Possibly related PRs

Suggested reviewers

Uh oh!

github-actionsBot commented May 22, 2026•
edited
Loading

Uh oh!

codecovBot commented May 22, 2026•
edited
Loading

Uh oh!

alexdln commented Jun 3, 2026

Uh oh!

trueberryless commented Jun 3, 2026

Uh oh!

Adebesin-Cell commented Jun 3, 2026•
edited
Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Uh oh!

Conversation

Adebesin-Cell commented May 22, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Highlights

Screenshots

Uh oh!

vercelBot commented May 22, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitaiBot commented May 22, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Changes

Possibly related PRs

Suggested reviewers

Uh oh!

github-actionsBot commented May 22, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Lunaria Status Overview

Tracked Files

Uh oh!

codecovBot commented May 22, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

alexdln commented Jun 3, 2026

Uh oh!

trueberryless commented Jun 3, 2026

Uh oh!

Adebesin-Cell commented Jun 3, 2026• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Adebesin-Cell commented May 22, 2026•
edited
Loading

vercelBot commented May 22, 2026•
edited
Loading

coderabbitaiBot commented May 22, 2026•
edited
Loading

github-actionsBot commented May 22, 2026•
edited
Loading

codecovBot commented May 22, 2026•
edited
Loading

Adebesin-Cell commented Jun 3, 2026•
edited
Loading