diff --git a/app/components/Landing/IntroHeader.vue b/app/components/Landing/IntroHeader.vue
index d3c4444004..0b10a2bdd6 100644
--- a/app/components/Landing/IntroHeader.vue
+++ b/app/components/Landing/IntroHeader.vue
@@ -126,7 +126,7 @@ onPrehydrate(el => {
/>
diff --git a/app/components/Noodle/GifDay/GifText.vue b/app/components/Noodle/GifDay/GifText.vue
new file mode 100644
index 0000000000..267cfcc928
--- /dev/null
+++ b/app/components/Noodle/GifDay/GifText.vue
@@ -0,0 +1,30 @@
+
+
+
+
+ {{ text }}
+
+
+
+
diff --git a/app/components/Noodle/GifDay/Logo.vue b/app/components/Noodle/GifDay/Logo.vue
new file mode 100644
index 0000000000..24e2082ee9
--- /dev/null
+++ b/app/components/Noodle/GifDay/Logo.vue
@@ -0,0 +1,58 @@
+
+
+
+
+
+
+
diff --git a/app/components/Noodle/index.ts b/app/components/Noodle/index.ts
index 9e611daf54..2912126f96 100644
--- a/app/components/Noodle/index.ts
+++ b/app/components/Noodle/index.ts
@@ -9,6 +9,7 @@ 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
@@ -72,6 +73,13 @@ export const ACTIVE_NOODLES: Noodle[] = [
dateTo: '2026-07-19',
timezone: 'auto',
},
+ {
+ key: 'gif-day',
+ logo: NoodleGifDayLogo,
+ date: '2026-09-05',
+ dateTo: '2026-09-05',
+ timezone: 'auto',
+ },
]
// Logo registry for the /noodles archive, keyed by the entry's `key` in
@@ -86,6 +94,7 @@ const NOODLE_LOGOS: Record = {
'pride-1': NoodlePride1Logo,
'tetris': NoodleTetrisLogo,
'emoji-day': NoodleEmojiDayLogo,
+ 'gif-day': NoodleGifDayLogo,
}
export function resolveNoodleLogo(key: string): Component | undefined {
diff --git a/app/noodles.ts b/app/noodles.ts
index e759d6f8d4..0655ec1065 100644
--- a/app/noodles.ts
+++ b/app/noodles.ts
@@ -8,6 +8,7 @@ const ALFON = { name: 'Alfon', blueskyHandle: 'alfon.dev' }
const GRAPHIEROS = { name: 'Graphieros', blueskyHandle: 'graphieros.npmx.social' }
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[] = [
{
@@ -151,6 +152,24 @@ const entries: Noodle[] = [
{ label: 'Wikipedia', url: 'https://en.wikipedia.org/wiki/World_Emoji_Day' },
],
},
+
+ {
+ key: 'gif-day',
+ title: 'National GIF Day',
+ slug: 'gif-day',
+ date: '2026-09-5',
+ timezone: 'auto',
+ tagline: false,
+ occasion: 'National GIF day',
+ prUrl: 'https://github.com/npmx-dev/npmx.dev/pull/2778',
+ authors: [MATTEO],
+ references: [
+ {
+ label: 'National GIF day',
+ url: 'https://www.whatnationaldayisit.com/day/Gif/',
+ },
+ ],
+ },
]
export const noodles: Noodle[] = [...entries].sort(
diff --git a/modules/security-headers.ts b/modules/security-headers.ts
index 25b6b2a63d..3835791543 100644
--- a/modules/security-headers.ts
+++ b/modules/security-headers.ts
@@ -36,6 +36,7 @@ export default defineNuxtModule({
'https://cdn.bsky.app',
'https://video.bsky.app',
'https://video.cdn.bsky.app',
+ 'https://media1.tenor.com',
]
const imgSrc = [
"'self'",
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 1c2fbca1fa..43b55b19cf 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -321,6 +321,11 @@ export default defineNuxtConfig({
global: true,
subsets: ['arabic'],
},
+ {
+ name: 'Baloo 2',
+ weights: [800],
+ global: true,
+ },
],
},
diff --git a/test/nuxt/a11y.spec.ts b/test/nuxt/a11y.spec.ts
index d9e4412fde..f7958b9b10 100644
--- a/test/nuxt/a11y.spec.ts
+++ b/test/nuxt/a11y.spec.ts
@@ -171,6 +171,8 @@ import {
NoodleLens,
NoodlePride3Logo,
NoodleTetrisLogo,
+ NoodleGifDayLogo,
+ NoodleGifDayGifText,
LinkBase,
CallToAction,
ChangelogCard,
@@ -463,6 +465,23 @@ describe('component accessibility audits', () => {
const results = await runAxe(component)
expect(results.violations).toEqual([])
})
+
+ it('should have no accessibility violations', async () => {
+ const component = await mountSuspended(NoodleGifDayGifText, {
+ props: {
+ text: 'N',
+ backgroundUrl: 'some_image_here.gif',
+ },
+ })
+ const results = await runAxe(component)
+ expect(results.violations).toEqual([])
+ })
+
+ it('should have no accessibility violations', async () => {
+ const component = await mountSuspended(NoodleGifDayLogo)
+ const results = await runAxe(component)
+ expect(results.violations).toEqual([])
+ })
})
describe('AppFooter', () => {
diff --git a/uno.theme.ts b/uno.theme.ts
index f0325dc810..4479e49758 100644
--- a/uno.theme.ts
+++ b/uno.theme.ts
@@ -5,6 +5,7 @@ export const theme = {
font: {
mono: "'Geist Mono', 'IBM Plex Sans Arabic', monospace",
sans: "'Geist', 'IBM Plex Sans Arabic', system-ui, -apple-system, sans-serif",
+ noodle: "'Baloo 2', sans-serif",
},
text: {
'2xs': { fontSize: '0.6875rem' }, // 11px