Skip to content

feat: add noodle for national gif day#3067

Open
MatteoGabriele wants to merge 14 commits into
npmx-dev:mainfrom
MatteoGabriele:feat/noodle-gif-day
Open

feat: add noodle for national gif day#3067
MatteoGabriele wants to merge 14 commits into
npmx-dev:mainfrom
MatteoGabriele:feat/noodle-gif-day

Conversation

@MatteoGabriele

@MatteoGabriele MatteoGabriele commented Jul 21, 2026

Copy link
Copy Markdown
Member

🧭 Context

National GIF Day Noodle

📚 Description

I've added a new noodle for GIF Day. The current GIFs can be replaced with anything we like; we could even vote on them, if we find a decent way.

For now, each letter has a GIF that starts with that letter.

N = Nicolas Cage
P = Party
M = Minions
X = X-Men

The "./" symbol is an exception: for now, it's a random cat! (you gotta have a cat)

Screen.Recording.2026-07-21.at.22.24.48.mov

This is the motion-safe version

Screen.Recording.2026-07-22.at.08.59.17.mov

@vercel

vercel Bot commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

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

Project Deployment Actions Updated (UTC)
npmx.dev Ready Ready Preview, Comment Jul 23, 2026 6:55pm
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Jul 23, 2026 6:55pm
npmx-lunaria Ignored Ignored Jul 23, 2026 6:55pm

Request Review

@coderabbitai

coderabbitai Bot commented Jul 21, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: a46d5e42-386b-4208-883a-156ba6d7ae30

📥 Commits

Reviewing files that changed from the base of the PR and between 043b933 and b40b972.

📒 Files selected for processing (1)
  • app/components/Noodle/GifDay/GifText.vue
🚧 Files skipped from review as they are similar to previous changes (1)
  • app/components/Noodle/GifDay/GifText.vue

📝 Walkthrough

Summary by CodeRabbit

  • New Features

    • Added a new GIF Day celebration featuring animated, GIF-backed lettering.
    • Added the GIF Day noodle to the event schedule for 5 September 2026.
    • Added Baloo 2 typography support for the new visual treatment.
  • Improvements

    • Updated the introduction tagline layout for improved presentation.
    • Enabled images from the Tenor media service.
  • Accessibility

    • Added accessibility coverage for the new GIF Day components.

Walkthrough

The PR adds a GIF Day noodle with animated GIF text, 5 September 2026 activation metadata, catalogue information, Baloo 2 typography, Tenor CSP support, adjusted tagline alignment, and accessibility coverage.

Changes

GIF Day noodle

Layer / File(s) Summary
GIF text and logo components
app/components/Noodle/GifDay/*
Adds typed GIF text rendering with image preloading and configurable background positioning and sizing, then composes individual characters into the GIF Day logo.
Noodle registration and metadata
app/components/Noodle/index.ts, app/noodles.ts
Registers gif-day for 5 September 2026 and adds its catalogue metadata, author, description, and reference.
Styling, CSP, and accessibility validation
nuxt.config.ts, uno.theme.ts, modules/security-headers.ts, app/components/Landing/IntroHeader.vue, test/nuxt/a11y.spec.ts
Adds Baloo 2 configuration, permits Tenor media images, removes tagline centring and width utilities, and audits both GIF Day components for accessibility.

Sequence Diagram(s)

sequenceDiagram
  participant NoodleRegistry
  participant NoodleGifDayLogo
  participant NoodleGifDayGifText
  participant Tenor
  NoodleRegistry->>NoodleGifDayLogo: resolve active gif-day logo
  NoodleGifDayLogo->>NoodleGifDayGifText: pass character and GIF metadata
  NoodleGifDayGifText->>Tenor: preload background GIF
  Tenor-->>NoodleGifDayGifText: complete image loading
  NoodleGifDayGifText-->>NoodleGifDayLogo: render GIF-backed character
Loading

Possibly related PRs

Suggested reviewers: danielroe, ghostdevv

🚥 Pre-merge checks | ✅ 4
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly matches the main change: adding a new National GIF Day noodle.
Description check ✅ Passed The description is directly related to the GIF Day noodle and its GIF-backed letters and cat symbol.
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.
✨ 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.

@codecov

codecov Bot commented Jul 21, 2026

Copy link
Copy Markdown

Codecov Report

❌ Patch coverage is 92.30769% with 1 line in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines Patch % Lines
app/noodles.ts 0.00% 1 Missing ⚠️

📢 Thoughts on this report? Let us know!

@MatteoGabriele MatteoGabriele changed the title feat(noodle): gif day feat: add noodle for national gif day Jul 21, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@app/components/Noodle/GifDay/Logo.vue`:
- Around line 8-13: Update the textArray entry for './' in the Logo component to
contain multiple Matrix GIF URLs and select among them with an SSR-safe
randomization approach, ensuring server and client rendering remain consistent
while enabling random Matrix GIF display.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: 17805e8a-8277-4ffb-a8ee-faf62327eda4

📥 Commits

Reviewing files that changed from the base of the PR and between 7c506b5 and e21c5de.

📒 Files selected for processing (9)
  • app/components/Landing/IntroHeader.vue
  • app/components/Noodle/GifDay/GifText.vue
  • app/components/Noodle/GifDay/Logo.vue
  • app/components/Noodle/index.ts
  • app/noodles.ts
  • modules/security-headers.ts
  • nuxt.config.ts
  • test/nuxt/a11y.spec.ts
  • uno.theme.ts

Comment thread app/components/Noodle/GifDay/Logo.vue
@MatteoGabriele
MatteoGabriele marked this pull request as draft July 21, 2026 19:26
@graphieros

graphieros commented Jul 22, 2026

Copy link
Copy Markdown
Member

The cat's eye is genius

@MatteoGabriele
MatteoGabriele marked this pull request as ready for review July 22, 2026 19:19
@ghostdevv

Copy link
Copy Markdown
Member

petition for N to be for nan, as in "you're joking not another one" lady :p

https://giphy.com/gifs/bbc-one-uk-uFiaMyDjtxoE6Q1gCU

@MatteoGabriele

MatteoGabriele commented Jul 22, 2026

Copy link
Copy Markdown
Member Author

ahahah I've never seen that one 🤣
I am not sure it works because it is really much based on lip-reading or knowing it.
What do you think?

Screen.Recording.2026-07-22.at.22.05.16.mov

@ghostdevv

Copy link
Copy Markdown
Member

ahahah I've never seen that one 🤣 I am not sure it works because it is really much based on lip-reading or knowing it. What do you think?
Screen.Recording.2026-07-22.at.22.05.16.mov

I love it too much I'm biased, please overrule me xD

@graphieros graphieros left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Love it!
You've been Zucked! 🌿

@MatteoGabriele

Copy link
Copy Markdown
Member Author

I need to fix some hydration issues. I might use the pre hydrate hook to set the styles. That should fix it

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants