From a3030e866d24aa6c8789b0100592bc65d1938d27 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 8 Jul 2025 17:43:56 +0200 Subject: [PATCH 01/12] feat: icons with versions --- apps/site/next.mdx.use.mjs | 4 ++++ apps/site/pages/en/index.mdx | 16 ++++++++++++++++ .../ui-components/src/Common/Badge/index.tsx | 3 ++- .../src/Common/BadgeGroup/index.module.css | 9 ++++++--- .../src/Common/BadgeGroup/index.stories.tsx | 10 ++++++++++ .../src/Common/BadgeGroup/index.tsx | 10 ++++++---- turbo.json | 1 + 7 files changed, 45 insertions(+), 8 deletions(-) diff --git a/apps/site/next.mdx.use.mjs b/apps/site/next.mdx.use.mjs index 537872c020e64..f8a429047ee8f 100644 --- a/apps/site/next.mdx.use.mjs +++ b/apps/site/next.mdx.use.mjs @@ -1,5 +1,7 @@ 'use strict'; +import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup'; + import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable'; import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings'; import WithBadgeGroup from './components/withBadgeGroup'; @@ -21,4 +23,6 @@ export const mdxComponents = { WithBadgeGroup: WithBadgeGroup, // Renders an container for Upcoming Node.js Meetings UpcomingMeetings: UpcomingMeetings, + // Standalone Badge Group + BadgeGroup: BadgeGroup, }; diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index cde8da1dc141d..cc4700f2d651c 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -26,6 +26,22 @@ layout: home
for Node.js 18 and below + +
+ + {({ release }) => + + Node.js Current + } + + + + {({ release }) => + + Node.js LTS + } + +
diff --git a/packages/ui-components/src/Common/Badge/index.tsx b/packages/ui-components/src/Common/Badge/index.tsx index 5b9730368e35d..747dadc5af6e9 100644 --- a/packages/ui-components/src/Common/Badge/index.tsx +++ b/packages/ui-components/src/Common/Badge/index.tsx @@ -4,9 +4,10 @@ import type { FC, HTMLAttributes, PropsWithChildren } from 'react'; import styles from './index.module.css'; type BadgeKind = 'default' | 'warning' | 'error'; +type BadgeSize = 'small' | 'medium'; type BadgeProps = HTMLAttributes & { - size?: 'small' | 'medium'; + size?: BadgeSize; kind?: BadgeKind; }; diff --git a/packages/ui-components/src/Common/BadgeGroup/index.module.css b/packages/ui-components/src/Common/BadgeGroup/index.module.css index 754356aa6012c..bd1daa0eb442e 100644 --- a/packages/ui-components/src/Common/BadgeGroup/index.module.css +++ b/packages/ui-components/src/Common/BadgeGroup/index.module.css @@ -35,7 +35,8 @@ dark:text-green-300; } - .message { + .message, + .message a:not(:hover) { @apply text-green-700 dark:text-green-300; } @@ -52,7 +53,8 @@ dark:text-danger-300; } - .message { + .message, + .message a:not(:hover) { @apply text-danger-700 dark:text-danger-300; } @@ -69,7 +71,8 @@ dark:text-warning-300; } - .message { + .message, + .message a:not(:hover) { @apply text-warning-700 dark:text-warning-300; } diff --git a/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx b/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx index ae100c07c653a..605e21ef5093d 100644 --- a/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx +++ b/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx @@ -14,6 +14,16 @@ export const Default: Story = { }, }; +export const SmallDefault: Story = { + args: { + href: '/', + children: 'OpenJS Foundation Certification 2023', + kind: 'default', + badgeText: 'New', + size: 'small', + }, +}; + export const Error: Story = { args: { href: '/', diff --git a/packages/ui-components/src/Common/BadgeGroup/index.tsx b/packages/ui-components/src/Common/BadgeGroup/index.tsx index 2975fc8fe3f9b..dbbadebab464f 100644 --- a/packages/ui-components/src/Common/BadgeGroup/index.tsx +++ b/packages/ui-components/src/Common/BadgeGroup/index.tsx @@ -6,16 +6,16 @@ import type { LinkLike } from '#ui/types'; import styles from './index.module.css'; -type BadgeGroupKind = 'default' | 'warning' | 'error'; - type BadgeGroupProps = { - kind?: BadgeGroupKind; + kind?: ComponentProps['kind']; + size?: ComponentProps['size']; badgeText?: string; as: LinkLike; } & ComponentProps; const BadgeGroup: FC> = ({ kind = 'default', + size = 'medium', badgeText, children, as: Component = 'a', @@ -23,11 +23,13 @@ const BadgeGroup: FC> = ({ }) => ( {badgeText && ( - + {badgeText} )} + {children} + {args.href && } ); diff --git a/turbo.json b/turbo.json index cc50ef4e1c4e8..323a7ab79eef0 100644 --- a/turbo.json +++ b/turbo.json @@ -1,6 +1,7 @@ { "$schema": "https://turbo.build/schema.json", "dangerouslyDisablePackageManagerCheck": true, + "ui": "tui", "tasks": { "//#prettier": { "outputs": [".prettiercache"] From da44924e1f10c917b19bc7679642fdb493e2ed35 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 8 Jul 2025 17:49:04 +0200 Subject: [PATCH 02/12] chore: no margin on mobile --- apps/site/pages/en/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index cc4700f2d651c..163bde6467f0b 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -27,7 +27,7 @@ layout: home for Node.js 18 and below -
+
{({ release }) => From cd2e0748b463800af94ec134de1394d8dab87b79 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 8 Jul 2025 18:14:37 +0200 Subject: [PATCH 03/12] chore: lts explanation --- apps/site/pages/en/index.mdx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index 163bde6467f0b..708bc74f5e6d3 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -17,9 +17,9 @@ layout: home
- + - +
+ + + "LTS" stands for the long-term support version of Node.js. + Learn more about Node.js releases here. +
From ced0ab44a0b0ff599c9d5c334996b12dc4d6e9e1 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 8 Jul 2025 18:16:48 +0200 Subject: [PATCH 04/12] fix: css hover for links on dark color not so different --- packages/ui-components/src/styles/markdown.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ui-components/src/styles/markdown.css b/packages/ui-components/src/styles/markdown.css index efdfa4c9a328b..b4f9a2cc73cde 100644 --- a/packages/ui-components/src/styles/markdown.css +++ b/packages/ui-components/src/styles/markdown.css @@ -80,7 +80,7 @@ main { &:hover { @apply text-green-900 - dark:text-green-300; + dark:text-green-200; } &[role='button'] { From e4b2be7f176e5877245d795457510702a2bab7d3 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 8 Jul 2025 18:22:59 +0200 Subject: [PATCH 05/12] chore: just tiny copyright --- apps/site/pages/en/index.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index 708bc74f5e6d3..0e47bc344a3ec 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -17,9 +17,9 @@ layout: home
- + - +
From 608f38829ad5a1cff81c98a40b1b07344688f322 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 8 Jul 2025 21:43:26 +0200 Subject: [PATCH 08/12] Apply suggestion from @avivkeller Co-authored-by: Aviv Keller Signed-off-by: Claudio Wunder --- apps/site/pages/en/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index c0de00ba65cb6..4d4dbc8a2b1d4 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -17,7 +17,7 @@ layout: home
- + From e6d9425632281f89958c99ea9f4fea531765d65f Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 8 Jul 2025 22:01:20 +0200 Subject: [PATCH 09/12] chore: code review changes --- .../Downloads/DownloadReleasesTable/index.tsx | 23 ++++++-- .../Downloads/ReleaseModal/index.tsx | 56 ++++++++++--------- apps/site/pages/en/index.mdx | 12 ++-- .../src/Common/AlertBox/index.module.css | 8 +++ .../src/Common/AlertBox/index.stories.tsx | 10 ++++ .../src/Common/AlertBox/index.tsx | 2 +- .../src/Common/Badge/index.module.css | 12 ++++ .../src/Common/Badge/index.stories.tsx | 12 ++++ .../ui-components/src/Common/Badge/index.tsx | 2 +- .../src/Common/BadgeGroup/index.module.css | 36 ++++++++++++ .../src/Common/BadgeGroup/index.stories.tsx | 18 ++++++ turbo.json | 1 - 12 files changed, 151 insertions(+), 41 deletions(-) diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx index fa2180f5f7fbe..462221477b8e3 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx @@ -6,6 +6,22 @@ import FormattedTime from '#site/components/Common/FormattedTime'; import DetailsButton from '#site/components/Downloads/DownloadReleasesTable/DetailsButton'; import getReleaseData from '#site/next-data/releaseData'; +const BADGE_KIND_MAP = { + 'End-of-life': 'warning', + Maintenance: 'neutral', + LTS: 'info', + Current: 'default', + Pending: 'default', +} as const; + +const BADGE_TEXT_MAP = { + 'End-of-life': 'End-of-Life (EOL)', + Maintenance: 'Maintenance LTS', + LTS: 'Active LTS', + Current: 'Current', + Pending: 'Pending', +} as const; + const DownloadReleasesTable: FC = async () => { const releaseData = await getReleaseData(); @@ -35,11 +51,8 @@ const DownloadReleasesTable: FC = async () => { - - {release.status} + + {BADGE_TEXT_MAP[release.status]} diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx index 3f0bf31f71edb..8abb1aa952d7e 100644 --- a/apps/site/components/Downloads/ReleaseModal/index.tsx +++ b/apps/site/components/Downloads/ReleaseModal/index.tsx @@ -34,34 +34,38 @@ const ReleaseModal: FC = ({ return ( {release.status === 'End-of-life' && ( - - {t.rich('components.releaseModal.unsupportedVersionWarning', { - link: text => ( - - {text} - - ), - })} - +
+ + {t.rich('components.releaseModal.unsupportedVersionWarning', { + link: text => ( + + {text} + + ), + })} + +
)} {release.status === 'LTS' && ( - - {t.rich('components.releaseModal.ltsVersionFeaturesNotice', { - link: text => {text}, - })} - +
+ + {t.rich('components.releaseModal.ltsVersionFeaturesNotice', { + link: text => {text}, + })} + +
)} {modalHeading} @@ -73,8 +77,6 @@ const ReleaseModal: FC = ({ )} -
{t('components.releaseModal.overview')}
-
{t('components.releaseModal.minorVersions')}
diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index 4d4dbc8a2b1d4..3b83124e90c25 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -28,17 +28,17 @@ layout: home
- + {({ release }) => - - Node.js Current + + Node.js LTS } - + {({ release }) => - - Node.js LTS + + Node.js Current }
diff --git a/packages/ui-components/src/Common/AlertBox/index.module.css b/packages/ui-components/src/Common/AlertBox/index.module.css index 6aa272d8ff19b..58e8101f89fbf 100644 --- a/packages/ui-components/src/Common/AlertBox/index.module.css +++ b/packages/ui-components/src/Common/AlertBox/index.module.css @@ -74,6 +74,14 @@ } } + &.neutral { + @apply bg-neutral-600; + + .title { + @apply bg-neutral-700; + } + } + code { /* Ignore the styles from `markdown.css` */ all: unset; diff --git a/packages/ui-components/src/Common/AlertBox/index.stories.tsx b/packages/ui-components/src/Common/AlertBox/index.stories.tsx index d900597de6e2f..12dfbeee31506 100644 --- a/packages/ui-components/src/Common/AlertBox/index.stories.tsx +++ b/packages/ui-components/src/Common/AlertBox/index.stories.tsx @@ -52,6 +52,16 @@ export const Danger: Story = { }, }; +export const Neutral: Story = { + args: { + level: 'neutral', + title: 'Note', + children: + "This is a neutral informational message that doesn't fit into the other alert categories.", + size: 'default', + }, +}; + export const InMarkdown: Story = { args: { level: 'danger', diff --git a/packages/ui-components/src/Common/AlertBox/index.tsx b/packages/ui-components/src/Common/AlertBox/index.tsx index 346c8fb07e999..de4b1d3a5d634 100644 --- a/packages/ui-components/src/Common/AlertBox/index.tsx +++ b/packages/ui-components/src/Common/AlertBox/index.tsx @@ -4,7 +4,7 @@ import type { FC, PropsWithChildren } from 'react'; import styles from './index.module.css'; type AlertBoxProps = PropsWithChildren<{ - level: 'info' | 'success' | 'warning' | 'danger'; + level: 'info' | 'success' | 'warning' | 'danger' | 'neutral'; title: string; size?: 'default' | 'small'; }>; diff --git a/packages/ui-components/src/Common/Badge/index.module.css b/packages/ui-components/src/Common/Badge/index.module.css index 19bdba865743c..944bd2b39af77 100644 --- a/packages/ui-components/src/Common/Badge/index.module.css +++ b/packages/ui-components/src/Common/Badge/index.module.css @@ -35,4 +35,16 @@ bg-warning-600 dark:border-warning-600; } + + &.info { + @apply border-info-200 + bg-info-600 + dark:border-info-800; + } + + &.neutral { + @apply border-neutral-200 + bg-neutral-600 + dark:border-neutral-800; + } } diff --git a/packages/ui-components/src/Common/Badge/index.stories.tsx b/packages/ui-components/src/Common/Badge/index.stories.tsx index 86df07062de4d..b5be7b849a75c 100644 --- a/packages/ui-components/src/Common/Badge/index.stories.tsx +++ b/packages/ui-components/src/Common/Badge/index.stories.tsx @@ -23,6 +23,18 @@ export const Warning: Story = { }, }; +export const Info: Story = { + args: { + kind: 'info', + }, +}; + +export const Neutral: Story = { + args: { + kind: 'neutral', + }, +}; + export const Small: Story = { args: { size: 'small', diff --git a/packages/ui-components/src/Common/Badge/index.tsx b/packages/ui-components/src/Common/Badge/index.tsx index 747dadc5af6e9..1a6dc8efa6cc2 100644 --- a/packages/ui-components/src/Common/Badge/index.tsx +++ b/packages/ui-components/src/Common/Badge/index.tsx @@ -3,7 +3,7 @@ import type { FC, HTMLAttributes, PropsWithChildren } from 'react'; import styles from './index.module.css'; -type BadgeKind = 'default' | 'warning' | 'error'; +type BadgeKind = 'default' | 'warning' | 'error' | 'info' | 'neutral'; type BadgeSize = 'small' | 'medium'; type BadgeProps = HTMLAttributes & { diff --git a/packages/ui-components/src/Common/BadgeGroup/index.module.css b/packages/ui-components/src/Common/BadgeGroup/index.module.css index bd1daa0eb442e..e29c6c9cb9aab 100644 --- a/packages/ui-components/src/Common/BadgeGroup/index.module.css +++ b/packages/ui-components/src/Common/BadgeGroup/index.module.css @@ -77,4 +77,40 @@ dark:text-warning-300; } } + + &.info { + @apply border-info-200 + bg-info-100 + dark:border-info-700 + dark:bg-neutral-900; + + .icon { + @apply text-info-500 + dark:text-info-300; + } + + .message, + .message a:not(:hover) { + @apply text-info-700 + dark:text-info-300; + } + } + + &.neutral { + @apply border-neutral-200 + bg-neutral-100 + dark:border-neutral-700 + dark:bg-neutral-900; + + .icon { + @apply text-neutral-500 + dark:text-neutral-300; + } + + .message, + .message a:not(:hover) { + @apply text-neutral-700 + dark:text-neutral-300; + } + } } diff --git a/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx b/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx index 605e21ef5093d..b3e746ca14cfc 100644 --- a/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx +++ b/packages/ui-components/src/Common/BadgeGroup/index.stories.tsx @@ -42,4 +42,22 @@ export const Warning: Story = { }, }; +export const Info: Story = { + args: { + href: '/', + children: 'OpenJS Foundation Certification 2023', + kind: 'info', + badgeText: 'New', + }, +}; + +export const Neutral: Story = { + args: { + href: '/', + children: 'OpenJS Foundation Certification 2023', + kind: 'neutral', + badgeText: 'New', + }, +}; + export default { component: BadgeGroup } as Meta; diff --git a/turbo.json b/turbo.json index 323a7ab79eef0..cc50ef4e1c4e8 100644 --- a/turbo.json +++ b/turbo.json @@ -1,7 +1,6 @@ { "$schema": "https://turbo.build/schema.json", "dangerouslyDisablePackageManagerCheck": true, - "ui": "tui", "tasks": { "//#prettier": { "outputs": [".prettiercache"] From cec5345fd8bcf08d9dc07a51ce48cc6d248791c5 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 8 Jul 2025 23:27:31 +0200 Subject: [PATCH 10/12] chore: tiny text update --- apps/site/pages/en/index.mdx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index 3b83124e90c25..09de53a6a6fbc 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -43,10 +43,7 @@ layout: home
- - "LTS" stands for the long-term support version of Node.js. - Learn more about Node.js releases. - + "LTS" refers to the long-term support version of Node.js. Learn more about Node.js releases.
From 8e00850961b086ac60f829c9749a7a1594f8b938 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Tue, 8 Jul 2025 23:32:46 +0200 Subject: [PATCH 11/12] chore: by the honour of grayskull --- apps/site/pages/en/index.mdx | 2 +- .../ui-components/src/Common/BadgeGroup/index.module.css | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index 09de53a6a6fbc..262d369a43c39 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -27,7 +27,7 @@ layout: home for Node.js 18 and below -
+
{({ release }) => diff --git a/packages/ui-components/src/Common/BadgeGroup/index.module.css b/packages/ui-components/src/Common/BadgeGroup/index.module.css index e29c6c9cb9aab..7f53505bd92a4 100644 --- a/packages/ui-components/src/Common/BadgeGroup/index.module.css +++ b/packages/ui-components/src/Common/BadgeGroup/index.module.css @@ -1,8 +1,9 @@ @reference "../../styles/index.css"; .wrapper { - @apply flex - w-fit + @apply xs:w-fit + flex + w-full items-center rounded-full border From 0ed8ef69f1686b1b3e7f01cac6f30c725c714b35 Mon Sep 17 00:00:00 2001 From: Claudio Wunder Date: Wed, 9 Jul 2025 15:34:48 +0200 Subject: [PATCH 12/12] Update apps/site/pages/en/index.mdx Co-authored-by: Caner Akdas Signed-off-by: Claudio Wunder --- apps/site/pages/en/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index 262d369a43c39..c08fc9c9bc2ab 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -43,7 +43,7 @@ layout: home
- "LTS" refers to the long-term support version of Node.js. Learn more about Node.js releases. + "LTS" refers to the long-term support version of Node.js. Learn more about Node.js releases.