Skip to content

feat: add nodejs noodle #2778

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
alexdln wants to merge 5 commits into
base: main
Choose a base branch
from
+100 −28
Open

feat: add nodejs noodle #2778

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
020cde6
feat: add nodejs noodle
alexdln May 21, 2026
3d1419c
feat: ignore color-scheme-img in knip
alexdln May 21, 2026
666fd4a
chore: add rel to noodle link
alexdln May 21, 2026
895753d
fix: improve tooltip attrs logic
alexdln May 21, 2026
394e6f6
feat: update nodejs noodle
alexdln May 22, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 89 additions & 0 deletions app/components/Noodle/Nodejs/Logo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<template>
<TooltipApp interactive :tooltipAttr="{ class: 'w-[calc(100%-2rem)]! max-w-sm!' }">
<template #content>
<p class="text-sm font-medium text-fg mb-1">
<span class="text-fg-subtle">
// 27 May 2009 - nodejs Initial release
<br />
//&nbsp;<a
href="https://github.com/nodejs/node-v0.x-archive/releases/tag/v0.0.1"
target="_blank"
rel="noopener noreferrer"
class="underline"
>github.com/nodejs/node-v0.x-archive/releases/tag/v0.0.1</a
Comment thread
coderabbitai[bot] marked this conversation as resolved.
>
</span>
<br />
<span class="text-badge-yellow">console</span>.<span class="text-badge-blue">log(</span
><span class="text-badge-green">"Happy birthday, nodejs"</span
><span class="text-badge-blue">)</span>
</p>
</template>
<svg
width="962"
height="292"
viewBox="0 0 962 292"
fill="none"
xmlns="http://www.w3.org/2000/svg"
:alt="$t('alt_logo')"
class="mb-8 mx-auto w-72 h-auto sm:w-92 max-w-full"
>
<path
d="M269 198.684V86.2912L329 46.1509L389 86.2912V198.684L353 174.6V106.361L329 90.3053L305 106.361V174.6L269 198.684Z"
fill="currentColor"
stroke="currentColor"
stroke-width="5"
stroke-linejoin="round"
/>
<path
d="M833 194.67V154.53L958 46.1509V86.2912L833 194.67Z"
fill="currentColor"
stroke="currentColor"
stroke-width="5"
stroke-linejoin="round"
/>
<path
d="M958 194.67V154.53L833 46.1509V86.2912L958 194.67Z"
fill="currentColor"
stroke="currentColor"
stroke-width="5"
stroke-linejoin="round"
/>
<path
d="M589 198.684V86.2912L649 46.1509L691 74.2491L733 46.1509L793 86.2912V174.6L757 198.684V106.361L733 90.3053L709 106.361V174.6L673 198.684V174.6V106.361L649 90.3053L625 106.361V174.6L589 198.684Z"
fill="currentColor"
/>
<path
d="M709 174.6H673V106.361L649 90.3053L625 106.361V174.6L589 198.684V86.2912L649 46.1509L709 86.2912V174.6ZM709 174.6L673 198.684V86.2912L733 46.1509L793 86.2912V174.6L757 198.684V106.361L733 90.3053L709 106.361V174.6Z"
stroke="currentColor"
stroke-width="5"
stroke-linejoin="round"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M429 86.2912V150.516V289L465 264.916L465 174.6L489 190.656L513 174.6L549 150.516V86.2912L489 46.1509L429 86.2912ZM513 130.446V106.361L489 90.3053L465 106.361L465 130.446L489 146.502L513 130.446Z"
fill="currentColor"
stroke="currentColor"
stroke-width="5"
stroke-linejoin="round"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M52 158.544V182.628L28 198.684L4 182.628L4 158.544L28 142.488L52 158.544Z"
fill="#689F63"
stroke="#689F63"
stroke-width="5"
stroke-linejoin="round"
/>
<path
d="M187 3H228L113 223.772H72L187 3Z"
fill="#689F63"
stroke="#689F63"
stroke-width="5"
stroke-linejoin="round"
/>
</svg>
</TooltipApp>
</template>
19 changes: 0 additions & 19 deletions app/components/Noodle/Press/Logo.vue
View file
Open in desktop

This file was deleted.

11 changes: 5 additions & 6 deletions app/components/Noodle/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import NoodleKawaiiLogo from './Kawaii/Logo.vue'
import NoodlePressLogo from './Press/Logo.vue'
import NoodleNodejsLogo from './Nodejs/Logo.vue'

export type Noodle = {
// Unique identifier for the noodle
Expand Down Expand Up @@ -28,11 +28,10 @@ export const PERMANENT_NOODLES: Noodle[] = [
// 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',
key: 'nodejs',
logo: NoodleNodejsLogo,
date: '2026-05-21',
dateTo: '2026-05-28',
timezone: 'auto',
tagline: false,
},
]
4 changes: 3 additions & 1 deletion app/components/Tooltip/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ const props = defineProps<{
defer?: boolean
/** Offset distance in pixels (default: 4) */
offset?: number
/** Additional attributes to be applied to the tooltip element */
tooltipAttr?: Record<string, unknown>
Copy link
Copy Markdown
Contributor

@graphieros graphieros May 22, 2026

Choose a reason for hiding this comment

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

I think you can replace this prop by using Vue's attrs inheritance system:

defineOptions({
  inheritAttrs: false,
})

const attrs = useAttrs()

// Then
const tooltipAttrs = computed(() => {
  const mergedAttrs: Record<string, unknown> = {
    role: 'tooltip',
    id: tooltipId,
    ...attrs,
  }

  if (props.interactive) {
    mergedAttrs.onMouseenter = show
    mergedAttrs.onMouseleave = hide
  }

  return mergedAttrs
})

Copy link
Copy Markdown
Member Author

@alexdln alexdln May 22, 2026

Choose a reason for hiding this comment

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

Oof, I can't get this setting [inheritAttrs] to work. As soon as I enable it, props stop passing correctly. And I always see two logos. Either it's broken somehow due to vanillajs logic, or it's just passing incorrectly, or I'm missing something 🫠

}>()

const isVisible = shallowRef(false)
Expand All @@ -38,7 +40,7 @@ function hide() {
}

const tooltipAttrs = computed(() => {
const attrs: Record<string, unknown> = { role: 'tooltip', id: tooltipId }
const attrs: Record<string, unknown> = { role: 'tooltip', id: tooltipId, ...props.tooltipAttr }
Comment thread
alexdln marked this conversation as resolved.
if (props.interactive) {
attrs.onMouseenter = show
attrs.onMouseleave = hide
Expand Down
1 change: 1 addition & 0 deletions knip.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const config: KnipConfig = {
ignoreFiles: [
'app/components/Tooltip/Announce.vue',
'app/components/UserCombobox.vue',
'app/components/ColorScheme/Img.vue',
'**/*.unused.*',
],
},
Expand Down
4 changes: 2 additions & 2 deletions test/nuxt/a11y.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -158,7 +158,7 @@ import {
ButtonBase,
LandingIntroHeader,
NoodleKawaiiLogo,
NoodlePressLogo,
NoodleNodejsLogo,
LinkBase,
CallToAction,
ChangelogCard,
Expand Down Expand Up @@ -374,7 +374,7 @@ describe('component accessibility audits', () => {
})

it('should have no accessibility violations', async () => {
const component = await mountSuspended(NoodlePressLogo)
const component = await mountSuspended(NoodleNodejsLogo)
const results = await runAxe(component)
expect(results.violations).toEqual([])
})
Expand Down
Loading