From 7e181867013ef8395ee97d7bdc9e0067c4adc970 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Tue, 8 Apr 2025 13:35:45 -0300 Subject: [PATCH 01/36] feat(releaseData): add minorVersions prop --- .../site/next-data/generators/releaseData.mjs | 83 +++++++++++-------- 1 file changed, 47 insertions(+), 36 deletions(-) diff --git a/apps/site/next-data/generators/releaseData.mjs b/apps/site/next-data/generators/releaseData.mjs index d04ced8340e8a..0c1f6e9ab05e8 100644 --- a/apps/site/next-data/generators/releaseData.mjs +++ b/apps/site/next-data/generators/releaseData.mjs @@ -27,47 +27,58 @@ const getNodeReleaseStatus = (now, support) => { * * @returns {Promise>} */ -const generateReleaseData = () => { - return nodevu({ fetch: fetch }).then(nodevuOutput => { - // Filter out those without documented support - // Basically those not in schedule.json - const majors = Object.values(nodevuOutput).filter(major => !!major.support); +const generateReleaseData = async () => { + const nodevuOutput = await nodevu({ fetch: fetch }); - const nodeReleases = majors.map(major => { - const [latestVersion] = Object.values(major.releases); + const majors = Object.entries(nodevuOutput).filter( + ([version, { support }]) => { + // Filter out those without documented support + // Basically those not in schedule.json + if (!support) { + return false; + } - const support = { - currentStart: major.support.phases.dates.start, - ltsStart: major.support.phases.dates.lts, - maintenanceStart: major.support.phases.dates.maintenance, - endOfLife: major.support.phases.dates.end, - }; + // nodevu returns duplicated v0.x versions (v0.12, v0.10, ...). + // This behavior seems intentional as the case is hardcoded in nodevu, + // see https://github.com/cutenode/nodevu/blob/0c8538c70195fb7181e0a4d1eeb6a28e8ed95698/core/index.js#L24. + // This line ignores those duplicated versions and takes the latest + // v0.x version (v0.12.18). It is also consistent with the legacy + // nodejs.org implementation. + if (version.startsWith('v0.') && version !== 'v0.12') { + return false; + } - // Get the major release status based on our Release Schedule - const status = getNodeReleaseStatus(new Date(), support); + return true; + } + ); - return { - ...support, - status, - major: latestVersion.semver.major, - version: latestVersion.semver.raw, - versionWithPrefix: `v${latestVersion.semver.raw}`, - codename: major.support.codename || '', - isLts: status === 'LTS', - npm: latestVersion.dependencies.npm || '', - v8: latestVersion.dependencies.v8 || '', - releaseDate: latestVersion.releaseDate || '', - modules: latestVersion.modules.version || '', - }; - }); + return majors.map(([, major]) => { + const [latestVersion] = Object.values(major.releases); - // nodevu returns duplicated v0.x versions (v0.12, v0.10, ...). - // This behavior seems intentional as the case is hardcoded in nodevu, - // see https://github.com/cutenode/nodevu/blob/0c8538c70195fb7181e0a4d1eeb6a28e8ed95698/core/index.js#L24. - // This line ignores those duplicated versions and takes the latest - // v0.x version (v0.12.18). It is also consistent with the legacy - // nodejs.org implementation. - return nodeReleases.filter(r => r.major !== 0 || r.version === '0.12.18'); + const support = { + currentStart: major.support.phases.dates.start, + ltsStart: major.support.phases.dates.lts, + maintenanceStart: major.support.phases.dates.maintenance, + endOfLife: major.support.phases.dates.end, + }; + + // Get the major release status based on our Release Schedule + const status = getNodeReleaseStatus(new Date(), support); + + return { + ...support, + status, + major: latestVersion.semver.major, + version: latestVersion.semver.raw, + versionWithPrefix: `v${latestVersion.semver.raw}`, + codename: major.support.codename || '', + isLts: status === 'LTS', + npm: latestVersion.dependencies.npm || '', + v8: latestVersion.dependencies.v8 || '', + releaseDate: latestVersion.releaseDate || '', + modules: latestVersion.modules.version || '', + minorVersions: major.releases, + }; }); }; From 7690b450b85419ad4e1bd07c9966796519acced2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Tue, 15 Apr 2025 14:47:16 -0300 Subject: [PATCH 02/36] feat: create draft minor releases table modal --- .../components/Downloads/DetailsButton.tsx | 23 ++++++ .../Downloads/DownloadReleasesTable.tsx | 34 ++++----- .../components/Downloads/ReleaseModal.tsx | 70 +++++++++++++++++++ apps/site/layouts/About.tsx | 5 +- .../site/next-data/generators/releaseData.mjs | 4 +- apps/site/providers/releaseModalProvider.tsx | 45 ++++++++++++ apps/site/types/releases.ts | 1 + 7 files changed, 158 insertions(+), 24 deletions(-) create mode 100644 apps/site/components/Downloads/DetailsButton.tsx create mode 100644 apps/site/components/Downloads/ReleaseModal.tsx create mode 100644 apps/site/providers/releaseModalProvider.tsx diff --git a/apps/site/components/Downloads/DetailsButton.tsx b/apps/site/components/Downloads/DetailsButton.tsx new file mode 100644 index 0000000000000..ef52b017b3145 --- /dev/null +++ b/apps/site/components/Downloads/DetailsButton.tsx @@ -0,0 +1,23 @@ +'use client'; + +import { use, type FC } from 'react'; + +import LinkWithArrow from '@/components/LinkWithArrow'; +import { ReleaseModalContext } from '@/providers/releaseModalProvider'; +import type { NodeRelease } from '@/types'; + +type DetailsButtonProps = { + versionData: NodeRelease; +}; + +const DetailsButton: FC = ({ versionData }) => { + const { openModal } = use(ReleaseModalContext); + + return ( + openModal(versionData)}> + Details + + ); +}; + +export default DetailsButton; diff --git a/apps/site/components/Downloads/DownloadReleasesTable.tsx b/apps/site/components/Downloads/DownloadReleasesTable.tsx index 0c0acff74e59c..ee8fc3de00b1f 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable.tsx @@ -1,10 +1,9 @@ import { getTranslations } from 'next-intl/server'; -import type { FC } from 'react'; +import { type FC } from 'react'; -import LinkWithArrow from '@/components/LinkWithArrow'; import getReleaseData from '@/next-data/releaseData'; -import { BASE_CHANGELOG_URL } from '@/next.constants.mjs'; -import { getNodeApiLink } from '@/util/getNodeApiLink'; + +import DetailsButton from './DetailsButton'; // This is a React Async Server Component // Note that Hooks cannot be used in a RSC async component @@ -21,35 +20,28 @@ const DownloadReleasesTable: FC = async () => { {t('components.downloadReleasesTable.version')} {t('components.downloadReleasesTable.nApiVersion')} {t('components.downloadReleasesTable.codename')} - {t('components.downloadReleasesTable.releaseDate')} - {t('components.downloadReleasesTable.npmVersion')} + First released + Latest Update + Status {releaseData.map(release => ( - v{release.version} + v{release.major} v{release.modules} {release.codename || '-'} + + + - v{release.npm} + {/* v{release.npm} */} + {release.status} - - {t('components.downloadReleasesTable.actions.releases')} - - - - {t('components.downloadReleasesTable.actions.changelog')} - - - - {t('components.downloadReleasesTable.actions.docs')} - + ))} diff --git a/apps/site/components/Downloads/ReleaseModal.tsx b/apps/site/components/Downloads/ReleaseModal.tsx new file mode 100644 index 0000000000000..87056d436bd98 --- /dev/null +++ b/apps/site/components/Downloads/ReleaseModal.tsx @@ -0,0 +1,70 @@ +import Modal from '@node-core/ui-components/Common/Modal'; +import type { FC } from 'react'; + +import LinkWithArrow from '@/components/LinkWithArrow'; +import type { NodeRelease } from '@/types'; + +type ReleaseModalProps = { + isOpen: boolean; + closeModal: () => void; + release: NodeRelease; +}; + +const ReleaseModal: FC = ({ + isOpen, + closeModal, + release, +}) => { + return ( + + {release.status !== 'Current' && ( + + Release Announcement + + )} + + + API Docs + + +

Minor

+ + + + + + + + + + {release.minorVersions.map(release => ( + + + + + ))} + +
Version
{release} + + View Release + + + API Docs + +
+ + ); +}; + +export default ReleaseModal; diff --git a/apps/site/layouts/About.tsx b/apps/site/layouts/About.tsx index 5599ecbccfda3..7deab417f4fae 100644 --- a/apps/site/layouts/About.tsx +++ b/apps/site/layouts/About.tsx @@ -6,9 +6,10 @@ import WithMetaBar from '@/components/withMetaBar'; import WithNavBar from '@/components/withNavBar'; import WithSidebar from '@/components/withSidebar'; import ArticleLayout from '@/layouts/Article'; +import { ReleaseModalProvider } from '@/providers/releaseModalProvider'; const AboutLayout: FC = ({ children }) => ( - <> + @@ -24,7 +25,7 @@ const AboutLayout: FC = ({ children }) => ( - + ); export default AboutLayout; diff --git a/apps/site/next-data/generators/releaseData.mjs b/apps/site/next-data/generators/releaseData.mjs index 0c1f6e9ab05e8..18cdfe9ce8be4 100644 --- a/apps/site/next-data/generators/releaseData.mjs +++ b/apps/site/next-data/generators/releaseData.mjs @@ -77,7 +77,9 @@ const generateReleaseData = async () => { v8: latestVersion.dependencies.v8 || '', releaseDate: latestVersion.releaseDate || '', modules: latestVersion.modules.version || '', - minorVersions: major.releases, + minorVersions: Object.entries(major.releases).map( + ([, release]) => release.semver.raw + ), }; }); }; diff --git a/apps/site/providers/releaseModalProvider.tsx b/apps/site/providers/releaseModalProvider.tsx new file mode 100644 index 0000000000000..acbcb17cc8e5c --- /dev/null +++ b/apps/site/providers/releaseModalProvider.tsx @@ -0,0 +1,45 @@ +'use client'; + +import { createContext, useState } from 'react'; +import type { FC, PropsWithChildren } from 'react'; + +import ReleaseModal from '@/components/Downloads/ReleaseModal'; +import type { NodeRelease } from '@/types'; + +type ReleaseModalContextType = { + activeRelease: NodeRelease | null; + openModal: (activeRelease: NodeRelease) => void; + closeModal: () => void; +}; + +export const ReleaseModalContext = createContext({ + activeRelease: null, + openModal: () => {}, + closeModal: () => {}, +}); + +export const ReleaseModalProvider: FC = ({ children }) => { + const [activeRelease, setValue] = useState(null); + + const openModal = (activeRelease: NodeRelease) => { + setValue(activeRelease); + }; + + const closeModal = () => { + setValue(null); + }; + + return ( + + {children} + + {activeRelease && ( + + )} + + ); +}; diff --git a/apps/site/types/releases.ts b/apps/site/types/releases.ts index 2fc4a4f101d54..8f9ad7123bd46 100644 --- a/apps/site/types/releases.ts +++ b/apps/site/types/releases.ts @@ -18,4 +18,5 @@ export interface NodeRelease extends NodeReleaseSource { versionWithPrefix: string; isLts: boolean; status: NodeReleaseStatus; + minorVersions: Array; } From 5d74cf7c35195e72e790dfc62699212c927b244e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Tue, 15 Apr 2025 14:59:28 -0300 Subject: [PATCH 03/36] refactor: initials improvements --- .../DetailsButton.tsx | 5 +- .../index.tsx} | 10 ++-- .../components/Downloads/ReleaseModal.tsx | 47 +++++++------------ .../ReleaseModal/MinorReleasesTable.tsx | 37 +++++++++++++++ packages/i18n/locales/en.json | 9 +++- 5 files changed, 71 insertions(+), 37 deletions(-) rename apps/site/components/Downloads/{ => DownloadReleasesTable}/DetailsButton.tsx (80%) rename apps/site/components/Downloads/{DownloadReleasesTable.tsx => DownloadReleasesTable/index.tsx} (83%) create mode 100644 apps/site/components/Downloads/ReleaseModal/MinorReleasesTable.tsx diff --git a/apps/site/components/Downloads/DetailsButton.tsx b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx similarity index 80% rename from apps/site/components/Downloads/DetailsButton.tsx rename to apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx index ef52b017b3145..66bccff25ae0e 100644 --- a/apps/site/components/Downloads/DetailsButton.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx @@ -1,5 +1,6 @@ 'use client'; +import { useTranslations } from 'next-intl'; import { use, type FC } from 'react'; import LinkWithArrow from '@/components/LinkWithArrow'; @@ -11,11 +12,13 @@ type DetailsButtonProps = { }; const DetailsButton: FC = ({ versionData }) => { + const t = useTranslations('components.downloadReleasesTable'); + const { openModal } = use(ReleaseModalContext); return ( openModal(versionData)}> - Details + {t('details')} ); }; diff --git a/apps/site/components/Downloads/DownloadReleasesTable.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx similarity index 83% rename from apps/site/components/Downloads/DownloadReleasesTable.tsx rename to apps/site/components/Downloads/DownloadReleasesTable/index.tsx index ee8fc3de00b1f..726ed23daafd8 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx @@ -1,10 +1,9 @@ import { getTranslations } from 'next-intl/server'; import { type FC } from 'react'; +import DetailsButton from '@/components/Downloads/DownloadReleasesTable/DetailsButton'; import getReleaseData from '@/next-data/releaseData'; -import DetailsButton from './DetailsButton'; - // This is a React Async Server Component // Note that Hooks cannot be used in a RSC async component // Async Components do not get re-rendered at all. @@ -20,9 +19,9 @@ const DownloadReleasesTable: FC = async () => { {t('components.downloadReleasesTable.version')} {t('components.downloadReleasesTable.nApiVersion')} {t('components.downloadReleasesTable.codename')} - First released - Latest Update - Status + {t('components.downloadReleasesTable.firstReleased')} + {t('components.downloadReleasesTable.lastUpdated')} + {t('components.downloadReleasesTable.status')} @@ -38,7 +37,6 @@ const DownloadReleasesTable: FC = async () => { - {/* v{release.npm} */} {release.status} diff --git a/apps/site/components/Downloads/ReleaseModal.tsx b/apps/site/components/Downloads/ReleaseModal.tsx index 87056d436bd98..0f1bc171ac264 100644 --- a/apps/site/components/Downloads/ReleaseModal.tsx +++ b/apps/site/components/Downloads/ReleaseModal.tsx @@ -1,8 +1,13 @@ import Modal from '@node-core/ui-components/Common/Modal'; +import { useTranslations } from 'next-intl'; import type { FC } from 'react'; import LinkWithArrow from '@/components/LinkWithArrow'; +import { BASE_CHANGELOG_URL } from '@/next.constants.mjs'; import type { NodeRelease } from '@/types'; +import { getNodeApiLink } from '@/util/getNodeApiLink'; + +import { MinorReleasesTable } from './ReleaseModal/MinorReleasesTable'; type ReleaseModalProps = { isOpen: boolean; @@ -15,6 +20,8 @@ const ReleaseModal: FC = ({ closeModal, release, }) => { + const t = useTranslations('components.releaseModal'); + return ( = ({ - Release Announcement + {t('releaseAnnouncement')} )} - API Docs + {t('components.downloadReleasesTable.actions.releases')} -

Minor

+ + {t('components.downloadReleasesTable.actions.changelog')} + + + + {t('components.downloadReleasesTable.actions.docs')} + - - - - - - - - - {release.minorVersions.map(release => ( - - - - - ))} - -
Version
{release} - - View Release - - - API Docs - -
+ ); }; diff --git a/apps/site/components/Downloads/ReleaseModal/MinorReleasesTable.tsx b/apps/site/components/Downloads/ReleaseModal/MinorReleasesTable.tsx new file mode 100644 index 0000000000000..418099eb43b74 --- /dev/null +++ b/apps/site/components/Downloads/ReleaseModal/MinorReleasesTable.tsx @@ -0,0 +1,37 @@ +import type { FC } from 'react'; + +import LinkWithArrow from '@/components/LinkWithArrow'; + +type MinorReleasesTableProps = { + releases: Array; +}; + +export const MinorReleasesTable: FC = ({ + releases, +}) => { + return ( + + + + + + + + + {releases.map(release => ( + + + + + ))} + +
Version
{release} + + View Release + + + API Docs + +
+ ); +}; diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json index ab38e13762342..bd2ff0d713d57 100644 --- a/packages/i18n/locales/en.json +++ b/packages/i18n/locales/en.json @@ -148,15 +148,22 @@ "downloadReleasesTable": { "version": "Node.js", "nApiVersion": "N-API", - "npmVersion": "npm", "codename": "Codename", "releaseDate": "Released at", + "firstReleased": "First released", + "lastUpdated": "Last Updated", + "status": "Status", + "details": "Details", "actions": { "changelog": "Changelog", "releases": "Releases", "docs": "Docs" } }, + "releaseModal": { + "releaseAnnouncement": "Release Announcement", + "apiDocs": "API Docs" + }, "pagination": { "next": "Next", "previous": "Previous" From 7a0bb6174a2de143f549924226a58064fdb2e6bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Tue, 15 Apr 2025 15:00:27 -0300 Subject: [PATCH 04/36] refactor: mv releasemodal component to correct dir --- .../Downloads/{ReleaseModal.tsx => ReleaseModal/index.tsx} | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) rename apps/site/components/Downloads/{ReleaseModal.tsx => ReleaseModal/index.tsx} (95%) diff --git a/apps/site/components/Downloads/ReleaseModal.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx similarity index 95% rename from apps/site/components/Downloads/ReleaseModal.tsx rename to apps/site/components/Downloads/ReleaseModal/index.tsx index 0f1bc171ac264..93f1db46b6ff5 100644 --- a/apps/site/components/Downloads/ReleaseModal.tsx +++ b/apps/site/components/Downloads/ReleaseModal/index.tsx @@ -7,7 +7,7 @@ import { BASE_CHANGELOG_URL } from '@/next.constants.mjs'; import type { NodeRelease } from '@/types'; import { getNodeApiLink } from '@/util/getNodeApiLink'; -import { MinorReleasesTable } from './ReleaseModal/MinorReleasesTable'; +import { MinorReleasesTable } from './MinorReleasesTable'; type ReleaseModalProps = { isOpen: boolean; From 3a884c94905eed023afb734f9280c2107c57d92b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Tue, 15 Apr 2025 15:04:40 -0300 Subject: [PATCH 05/36] fix: release modal translation keys --- packages/i18n/locales/en.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json index bd2ff0d713d57..29fc525f3cef1 100644 --- a/packages/i18n/locales/en.json +++ b/packages/i18n/locales/en.json @@ -153,17 +153,17 @@ "firstReleased": "First released", "lastUpdated": "Last Updated", "status": "Status", - "details": "Details", + "details": "Details" + }, + "releaseModal": { + "releaseAnnouncement": "Release Announcement", + "apiDocs": "API Docs", "actions": { "changelog": "Changelog", "releases": "Releases", "docs": "Docs" } }, - "releaseModal": { - "releaseAnnouncement": "Release Announcement", - "apiDocs": "API Docs" - }, "pagination": { "next": "Next", "previous": "Previous" From eaad760c0d87b9e24f311888d0260f7861de070c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Tue, 15 Apr 2025 15:05:46 -0300 Subject: [PATCH 06/36] feat: align button group --- .../Downloads/ReleaseModal/index.tsx | 34 ++++++++++--------- 1 file changed, 18 insertions(+), 16 deletions(-) diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx index 93f1db46b6ff5..76d1a48d6bbfd 100644 --- a/apps/site/components/Downloads/ReleaseModal/index.tsx +++ b/apps/site/components/Downloads/ReleaseModal/index.tsx @@ -29,27 +29,29 @@ const ReleaseModal: FC = ({ open={isOpen} onOpenChange={closeModal} > - {release.status !== 'Current' && ( +
+ {release.status !== 'Current' && ( + + {t('releaseAnnouncement')} + + )} + - {t('releaseAnnouncement')} + {t('actions.releases')} - )} - - - {t('components.downloadReleasesTable.actions.releases')} - - - {t('components.downloadReleasesTable.actions.changelog')} - + + {t('actions.changelog')} + - - {t('components.downloadReleasesTable.actions.docs')} - + + {t('actions.docs')} + +
From e48060b897c97d9ef467d893fb343cea3171de49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Wed, 16 Apr 2025 20:40:07 -0300 Subject: [PATCH 07/36] chore: rename badge component to badgegroup --- .../components/{withBadge.tsx => withBadgeGroup.tsx} | 10 +++++----- apps/site/next.mdx.use.mjs | 4 ++-- apps/site/pages/en/index.mdx | 2 +- .../Common/{Badge => BadgeGroup}/index.module.css | 0 .../Common/{Badge => BadgeGroup}/index.stories.tsx | 8 ++++---- .../Common/{Badge => BadgeGroup}/index.tsx | 6 +++--- 6 files changed, 15 insertions(+), 15 deletions(-) rename apps/site/components/{withBadge.tsx => withBadgeGroup.tsx} (69%) rename packages/ui-components/Common/{Badge => BadgeGroup}/index.module.css (100%) rename packages/ui-components/Common/{Badge => BadgeGroup}/index.stories.tsx (73%) rename packages/ui-components/Common/{Badge => BadgeGroup}/index.tsx (86%) diff --git a/apps/site/components/withBadge.tsx b/apps/site/components/withBadgeGroup.tsx similarity index 69% rename from apps/site/components/withBadge.tsx rename to apps/site/components/withBadgeGroup.tsx index 7b91c84c373c5..4047f3af8ec1c 100644 --- a/apps/site/components/withBadge.tsx +++ b/apps/site/components/withBadgeGroup.tsx @@ -1,27 +1,27 @@ -import Badge from '@node-core/ui-components/Common/Badge'; +import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup'; import type { FC } from 'react'; import Link from '@/components/Link'; import { siteConfig } from '@/next.json.mjs'; import { dateIsBetween } from '@/util/dateUtils'; -const WithBadge: FC<{ section: string }> = ({ section }) => { +const WithBadgeGroup: FC<{ section: string }> = ({ section }) => { const badge = siteConfig.websiteBadges[section]; if (badge && dateIsBetween(badge.startDate, badge.endDate)) { return ( - {badge.text} - + ); } return null; }; -export default WithBadge; +export default WithBadgeGroup; diff --git a/apps/site/next.mdx.use.mjs b/apps/site/next.mdx.use.mjs index 2f44a0bab6dce..537872c020e64 100644 --- a/apps/site/next.mdx.use.mjs +++ b/apps/site/next.mdx.use.mjs @@ -2,7 +2,7 @@ import DownloadReleasesTable from './components/Downloads/DownloadReleasesTable'; import UpcomingMeetings from './components/MDX/Calendar/UpcomingMeetings'; -import WithBadge from './components/withBadge'; +import WithBadgeGroup from './components/withBadgeGroup'; import WithBanner from './components/withBanner'; import WithNodeRelease from './components/withNodeRelease'; @@ -18,7 +18,7 @@ export const mdxComponents = { // HOC for providing Banner Data WithBanner: WithBanner, // HOC for providing Badge Data - WithBadge: WithBadge, + WithBadgeGroup: WithBadgeGroup, // Renders an container for Upcoming Node.js Meetings UpcomingMeetings: UpcomingMeetings, }; diff --git a/apps/site/pages/en/index.mdx b/apps/site/pages/en/index.mdx index 1558dac0319aa..7b9f1403e3c7b 100644 --- a/apps/site/pages/en/index.mdx +++ b/apps/site/pages/en/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

Run JavaScript Everywhere

diff --git a/packages/ui-components/Common/Badge/index.module.css b/packages/ui-components/Common/BadgeGroup/index.module.css similarity index 100% rename from packages/ui-components/Common/Badge/index.module.css rename to packages/ui-components/Common/BadgeGroup/index.module.css diff --git a/packages/ui-components/Common/Badge/index.stories.tsx b/packages/ui-components/Common/BadgeGroup/index.stories.tsx similarity index 73% rename from packages/ui-components/Common/Badge/index.stories.tsx rename to packages/ui-components/Common/BadgeGroup/index.stories.tsx index b37dfa5b0a621..ac2fe623dfdb5 100644 --- a/packages/ui-components/Common/Badge/index.stories.tsx +++ b/packages/ui-components/Common/BadgeGroup/index.stories.tsx @@ -1,9 +1,9 @@ import type { Meta as MetaObj, StoryObj } from '@storybook/react'; -import Badge from '@node-core/ui-components/Common/Badge'; +import BadgeGroup from '@node-core/ui-components/Common/BadgeGroup'; -type Story = StoryObj; -type Meta = MetaObj; +type Story = StoryObj; +type Meta = MetaObj; export const Default: Story = { args: { @@ -32,4 +32,4 @@ export const Warning: Story = { }, }; -export default { component: Badge } as Meta; +export default { component: BadgeGroup } as Meta; diff --git a/packages/ui-components/Common/Badge/index.tsx b/packages/ui-components/Common/BadgeGroup/index.tsx similarity index 86% rename from packages/ui-components/Common/Badge/index.tsx rename to packages/ui-components/Common/BadgeGroup/index.tsx index 49590ebefe08e..32b2941bf06ea 100644 --- a/packages/ui-components/Common/Badge/index.tsx +++ b/packages/ui-components/Common/BadgeGroup/index.tsx @@ -5,13 +5,13 @@ import type { LinkLike } from '@node-core/ui-components/types'; import styles from './index.module.css'; -type BadgeProps = { +type BadgeGroupProps = { kind?: 'default' | 'warning' | 'error'; badgeText?: string; as: LinkLike; } & ComponentProps; -const Badge: FC> = ({ +const BadgeGroup: FC> = ({ kind = 'default', badgeText, children, @@ -25,4 +25,4 @@ const Badge: FC> = ({ ); -export default Badge; +export default BadgeGroup; From 26179cdb9e65a05d926dafbe28a87f23dc5577c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Wed, 16 Apr 2025 20:57:12 -0300 Subject: [PATCH 08/36] refactor(BadgeGroup): use badge component --- .../Common/Badge/index.module.css | 28 +++++++++++++++++++ .../Common/Badge/index.stories.tsx | 26 +++++++++++++++++ packages/ui-components/Common/Badge/index.tsx | 26 +++++++++++++++++ .../Common/BadgeGroup/index.module.css | 26 +---------------- .../ui-components/Common/BadgeGroup/index.tsx | 7 ++++- 5 files changed, 87 insertions(+), 26 deletions(-) create mode 100644 packages/ui-components/Common/Badge/index.module.css create mode 100644 packages/ui-components/Common/Badge/index.stories.tsx create mode 100644 packages/ui-components/Common/Badge/index.tsx diff --git a/packages/ui-components/Common/Badge/index.module.css b/packages/ui-components/Common/Badge/index.module.css new file mode 100644 index 0000000000000..1a44f920a63b4 --- /dev/null +++ b/packages/ui-components/Common/Badge/index.module.css @@ -0,0 +1,28 @@ +@reference "../../styles/index.css"; + +.badge { + @apply rounded-full + border + px-2.5 + py-0.5 + text-center + text-white; + + &.default { + @apply border-green-200 + bg-green-600 + dark:border-green-600; + } + + &.error { + @apply border-danger-200 + bg-danger-600 + dark:border-danger-600; + } + + &.warning { + @apply border-warning-200 + bg-warning-600 + dark:border-warning-600; + } +} diff --git a/packages/ui-components/Common/Badge/index.stories.tsx b/packages/ui-components/Common/Badge/index.stories.tsx new file mode 100644 index 0000000000000..8125cea0bbb7c --- /dev/null +++ b/packages/ui-components/Common/Badge/index.stories.tsx @@ -0,0 +1,26 @@ +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +import Badge from '@node-core/ui-components/Common/Badge'; + +type Story = StoryObj; +type Meta = MetaObj; + +export const Default: Story = { + args: { + kind: 'default', + }, +}; + +export const Error: Story = { + args: { + kind: 'error', + }, +}; + +export const Warning: Story = { + args: { + kind: 'warning', + }, +}; + +export default { component: Badge, args: { children: 'Badge' } } as Meta; diff --git a/packages/ui-components/Common/Badge/index.tsx b/packages/ui-components/Common/Badge/index.tsx new file mode 100644 index 0000000000000..552d51b495d68 --- /dev/null +++ b/packages/ui-components/Common/Badge/index.tsx @@ -0,0 +1,26 @@ +import classNames from 'classnames'; +import type { FC, HTMLAttributes, PropsWithChildren } from 'react'; + +import styles from './index.module.css'; + +type BadgeProps = HTMLAttributes & { + kind?: 'default' | 'warning' | 'error'; +}; + +const Badge: FC> = ({ + kind = 'default', + className, + children, + ...props +}) => { + return ( + + {children} + + ); +}; + +export default Badge; diff --git a/packages/ui-components/Common/BadgeGroup/index.module.css b/packages/ui-components/Common/BadgeGroup/index.module.css index 9420740a87cf1..754356aa6012c 100644 --- a/packages/ui-components/Common/BadgeGroup/index.module.css +++ b/packages/ui-components/Common/BadgeGroup/index.module.css @@ -17,13 +17,7 @@ } .badge { - @apply mr-2 - rounded-full - border - px-2.5 - py-0.5 - text-center - text-white; + @apply mr-2; } .message { @@ -41,12 +35,6 @@ dark:text-green-300; } - .badge { - @apply border-green-200 - bg-green-600 - dark:border-green-600; - } - .message { @apply text-green-700 dark:text-green-300; @@ -64,12 +52,6 @@ dark:text-danger-300; } - .badge { - @apply border-danger-200 - bg-danger-600 - dark:border-danger-600; - } - .message { @apply text-danger-700 dark:text-danger-300; @@ -87,12 +69,6 @@ dark:text-warning-300; } - .badge { - @apply border-warning-200 - bg-warning-600 - dark:border-warning-600; - } - .message { @apply text-warning-700 dark:text-warning-300; diff --git a/packages/ui-components/Common/BadgeGroup/index.tsx b/packages/ui-components/Common/BadgeGroup/index.tsx index 32b2941bf06ea..f83dc49fbffb3 100644 --- a/packages/ui-components/Common/BadgeGroup/index.tsx +++ b/packages/ui-components/Common/BadgeGroup/index.tsx @@ -1,6 +1,7 @@ import ArrowRightIcon from '@heroicons/react/24/solid/ArrowRightIcon'; import type { ComponentProps, FC, PropsWithChildren } from 'react'; +import Badge from '@node-core/ui-components/Common/Badge'; import type { LinkLike } from '@node-core/ui-components/types'; import styles from './index.module.css'; @@ -19,7 +20,11 @@ const BadgeGroup: FC> = ({ ...args }) => ( - {badgeText && {badgeText}} + {badgeText && ( + + {badgeText} + + )} {children} {args.href && } From e57f06578c5a5f417b9f06bdb71f2a3e05dd8ab1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Wed, 16 Apr 2025 21:05:38 -0300 Subject: [PATCH 09/36] feat(DownloadReleasesTable): add status badge --- .../components/Downloads/DownloadReleasesTable/index.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx index 726ed23daafd8..097c755ae4b06 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx @@ -1,3 +1,4 @@ +import Badge from '@node-core/ui-components/Common/Badge'; import { getTranslations } from 'next-intl/server'; import { type FC } from 'react'; @@ -37,7 +38,13 @@ const DownloadReleasesTable: FC = async () => { - {release.status} + + + {release.status} + + From 5fd05655bc0d935f6ebde312beff435cd9f8393e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Wed, 16 Apr 2025 21:13:22 -0300 Subject: [PATCH 10/36] feat(Modal): make subheader optional --- packages/ui-components/Common/Modal/index.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/ui-components/Common/Modal/index.tsx b/packages/ui-components/Common/Modal/index.tsx index 635ab82a54cfa..787a80e0cb73a 100644 --- a/packages/ui-components/Common/Modal/index.tsx +++ b/packages/ui-components/Common/Modal/index.tsx @@ -8,7 +8,7 @@ import styles from './index.module.css'; type ModalProps = PropsWithChildren<{ heading: string; - subheading: string; + subheading?: string; open?: boolean; onOpenChange?: (open: boolean) => void; }>; @@ -30,9 +30,11 @@ const Modal: FC = ({ {heading} - - {subheading} - + {subheading && ( + + {subheading} + + )}
{children}
From 0617dff9257329364c488c901144b29bd40e71e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Wed, 16 Apr 2025 21:17:31 -0300 Subject: [PATCH 11/36] refactor: create kind types --- packages/ui-components/Common/Badge/index.tsx | 4 +++- packages/ui-components/Common/BadgeGroup/index.tsx | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/Common/Badge/index.tsx b/packages/ui-components/Common/Badge/index.tsx index 552d51b495d68..e92e594312983 100644 --- a/packages/ui-components/Common/Badge/index.tsx +++ b/packages/ui-components/Common/Badge/index.tsx @@ -3,8 +3,10 @@ import type { FC, HTMLAttributes, PropsWithChildren } from 'react'; import styles from './index.module.css'; +type BadgeKind = 'default' | 'warning' | 'error'; + type BadgeProps = HTMLAttributes & { - kind?: 'default' | 'warning' | 'error'; + kind?: BadgeKind; }; const Badge: FC> = ({ diff --git a/packages/ui-components/Common/BadgeGroup/index.tsx b/packages/ui-components/Common/BadgeGroup/index.tsx index f83dc49fbffb3..761ca9e3aaec6 100644 --- a/packages/ui-components/Common/BadgeGroup/index.tsx +++ b/packages/ui-components/Common/BadgeGroup/index.tsx @@ -6,8 +6,10 @@ import type { LinkLike } from '@node-core/ui-components/types'; import styles from './index.module.css'; +type BadgeGroupKind = 'default' | 'warning' | 'error'; + type BadgeGroupProps = { - kind?: 'default' | 'warning' | 'error'; + kind?: BadgeGroupKind; badgeText?: string; as: LinkLike; } & ComponentProps; From 15772afb0b293a28bfe5b0ba8b9da120f26c24fe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Wed, 16 Apr 2025 21:20:58 -0300 Subject: [PATCH 12/36] feat(ui-components): create separator component --- package-lock.json | 80 +++++++++++++++++++ .../Common/Separator/index.module.css | 16 ++++ .../Common/Separator/index.stories.tsx | 20 +++++ .../ui-components/Common/Separator/index.tsx | 29 +++++++ packages/ui-components/package.json | 1 + 5 files changed, 146 insertions(+) create mode 100644 packages/ui-components/Common/Separator/index.module.css create mode 100644 packages/ui-components/Common/Separator/index.stories.tsx create mode 100644 packages/ui-components/Common/Separator/index.tsx diff --git a/package-lock.json b/package-lock.json index f91b24ed5ea71..673133d859364 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4365,6 +4365,85 @@ } } }, + "node_modules/@radix-ui/react-separator": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.3.tgz", + "integrity": "sha512-2omrWKJvxR0U/tkIXezcc1nFMwtLU0+b/rDK40gnzJqTLWQ/TD/D5IYVefp9sC3QWfeQbpSbEA6op9MQKyaALQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-primitive": "2.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-compose-refs": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz", + "integrity": "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-primitive": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.3.tgz", + "integrity": "sha512-Pf/t/GkndH7CQ8wE2hbkXA+WyZ83fhQQn5DDmwDiDo6AwN/fhaH8oqZ0jRjMrO2iaMhDi6P1HRx6AZwyMinY1g==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-slot": "1.2.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-separator/node_modules/@radix-ui/react-slot": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.2.0.tgz", + "integrity": "sha512-ujc+V6r0HNDviYqIK3rW4ffgYiZ8g5DEHrGJVk4x7kTlLXRDILnKX9vAUYeIsLOoDpDJ0ujpqMkjH4w2ofuo6w==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.2" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz", @@ -21241,6 +21320,7 @@ "@radix-ui/react-label": "~2.1.2", "@radix-ui/react-scroll-area": "~1.2.3", "@radix-ui/react-select": "~2.1.6", + "@radix-ui/react-separator": "^1.1.3", "@radix-ui/react-tabs": "~1.1.3", "@radix-ui/react-toast": "~1.2.6", "@radix-ui/react-tooltip": "~1.1.8", diff --git a/packages/ui-components/Common/Separator/index.module.css b/packages/ui-components/Common/Separator/index.module.css new file mode 100644 index 0000000000000..b6e3cb9f9371b --- /dev/null +++ b/packages/ui-components/Common/Separator/index.module.css @@ -0,0 +1,16 @@ +@reference "../../styles/index.css"; + +.root { + @apply shrink-0 + bg-neutral-800; + + &.horizontal { + @apply h-[1px] + w-full; + } + + &.vertical { + @apply h-full + w-[1px]; + } +} diff --git a/packages/ui-components/Common/Separator/index.stories.tsx b/packages/ui-components/Common/Separator/index.stories.tsx new file mode 100644 index 0000000000000..a76a5f271846c --- /dev/null +++ b/packages/ui-components/Common/Separator/index.stories.tsx @@ -0,0 +1,20 @@ +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; + +import Separator from '@node-core/ui-components/Common/Separator'; + +type Story = StoryObj; +type Meta = MetaObj; + +export const Horizontal: Story = { + args: { + orientation: 'horizontal', + }, +}; + +export const Vertical: Story = { + args: { + orientation: 'vertical', + }, +}; + +export default { component: Separator } as Meta; diff --git a/packages/ui-components/Common/Separator/index.tsx b/packages/ui-components/Common/Separator/index.tsx new file mode 100644 index 0000000000000..59722b573e416 --- /dev/null +++ b/packages/ui-components/Common/Separator/index.tsx @@ -0,0 +1,29 @@ +'use client'; + +import * as SeparatorPrimitive from '@radix-ui/react-separator'; +import classNames from 'classnames'; +import type * as React from 'react'; + +import styles from './index.module.css'; + +const Separator: React.FC< + React.ComponentProps +> = ({ + className, + orientation = 'horizontal', + decorative = true, + ...props +}) => ( + +); + +export default Separator; diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index c8631c59943e3..779d838a461e5 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -23,6 +23,7 @@ "@radix-ui/react-label": "~2.1.2", "@radix-ui/react-scroll-area": "~1.2.3", "@radix-ui/react-select": "~2.1.6", + "@radix-ui/react-separator": "^1.1.3", "@radix-ui/react-tabs": "~1.1.3", "@radix-ui/react-toast": "~1.2.6", "@radix-ui/react-tooltip": "~1.1.8", From 58225200086e2c2f39df24b03b9ba6a64b9de130 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Wed, 16 Apr 2025 21:39:32 -0300 Subject: [PATCH 13/36] feat(site): some improvements --- .../DownloadReleasesTable/DetailsButton.tsx | 2 +- .../MinorReleasesTable/index.module.css | 8 +++ .../Downloads/MinorReleasesTable/index.tsx | 57 +++++++++++++++++++ .../ReleaseModal/MinorReleasesTable.tsx | 37 ------------ .../Downloads/ReleaseModal/index.tsx | 42 +++++--------- apps/site/util/getReleaseAnnounceLink.ts | 16 ++++++ packages/i18n/locales/en.json | 11 +++- 7 files changed, 105 insertions(+), 68 deletions(-) create mode 100644 apps/site/components/Downloads/MinorReleasesTable/index.module.css create mode 100644 apps/site/components/Downloads/MinorReleasesTable/index.tsx delete mode 100644 apps/site/components/Downloads/ReleaseModal/MinorReleasesTable.tsx create mode 100644 apps/site/util/getReleaseAnnounceLink.ts diff --git a/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx index 66bccff25ae0e..8f9713f9f36b9 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx @@ -17,7 +17,7 @@ const DetailsButton: FC = ({ versionData }) => { const { openModal } = use(ReleaseModalContext); return ( - openModal(versionData)}> + openModal(versionData)}> {t('details')} ); diff --git a/apps/site/components/Downloads/MinorReleasesTable/index.module.css b/apps/site/components/Downloads/MinorReleasesTable/index.module.css new file mode 100644 index 0000000000000..5740edadd7de7 --- /dev/null +++ b/apps/site/components/Downloads/MinorReleasesTable/index.module.css @@ -0,0 +1,8 @@ +@reference "../../../styles/index.css"; + +.links { + @apply flex + h-4 + items-center + gap-2; +} diff --git a/apps/site/components/Downloads/MinorReleasesTable/index.tsx b/apps/site/components/Downloads/MinorReleasesTable/index.tsx new file mode 100644 index 0000000000000..b454b58f7e38a --- /dev/null +++ b/apps/site/components/Downloads/MinorReleasesTable/index.tsx @@ -0,0 +1,57 @@ +'use client'; + +import Separator from '@node-core/ui-components/Common/Separator'; +import { useTranslations } from 'next-intl'; +import type { FC } from 'react'; + +import Link from '@/components/Link'; +import { BASE_CHANGELOG_URL } from '@/next.constants.mjs'; +import { getNodeApiLink } from '@/util/getNodeApiLink'; + +import styles from './index.module.css'; + +type MinorReleasesTableProps = { + releases: Array; +}; + +export const MinorReleasesTable: FC = ({ + releases, +}) => { + const t = useTranslations('components.minorReleasesTable'); + + return ( + + + + + + + + + {releases.map(release => ( + + + + + ))} + +
{t('version')}{t('links')}
v{release} +
+ + {t('actions.release')} + + + + {t('actions.changelog')} + + + + {t('actions.docs')} + +
+
+ ); +}; diff --git a/apps/site/components/Downloads/ReleaseModal/MinorReleasesTable.tsx b/apps/site/components/Downloads/ReleaseModal/MinorReleasesTable.tsx deleted file mode 100644 index 418099eb43b74..0000000000000 --- a/apps/site/components/Downloads/ReleaseModal/MinorReleasesTable.tsx +++ /dev/null @@ -1,37 +0,0 @@ -import type { FC } from 'react'; - -import LinkWithArrow from '@/components/LinkWithArrow'; - -type MinorReleasesTableProps = { - releases: Array; -}; - -export const MinorReleasesTable: FC = ({ - releases, -}) => { - return ( - - - - - - - - - {releases.map(release => ( - - - - - ))} - -
Version
{release} - - View Release - - - API Docs - -
- ); -}; diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx index 76d1a48d6bbfd..5d33054be8ede 100644 --- a/apps/site/components/Downloads/ReleaseModal/index.tsx +++ b/apps/site/components/Downloads/ReleaseModal/index.tsx @@ -2,12 +2,10 @@ import Modal from '@node-core/ui-components/Common/Modal'; import { useTranslations } from 'next-intl'; import type { FC } from 'react'; +import { MinorReleasesTable } from '@/components/Downloads/MinorReleasesTable'; import LinkWithArrow from '@/components/LinkWithArrow'; -import { BASE_CHANGELOG_URL } from '@/next.constants.mjs'; import type { NodeRelease } from '@/types'; -import { getNodeApiLink } from '@/util/getNodeApiLink'; - -import { MinorReleasesTable } from './MinorReleasesTable'; +import { getReleaseAnnounceLink } from '@/util/getReleaseAnnounceLink'; type ReleaseModalProps = { isOpen: boolean; @@ -22,36 +20,26 @@ const ReleaseModal: FC = ({ }) => { const t = useTranslations('components.releaseModal'); + const modalHeading = t('title', { + version: release.major, + }); + + const releaseAnnounceLink = getReleaseAnnounceLink(release); + return ( -
- {release.status !== 'Current' && ( - - {t('releaseAnnouncement')} - - )} - - - {t('actions.releases')} + {releaseAnnounceLink && ( + + {t('releaseAnnouncement')} + )} - - {t('actions.changelog')} - - - - {t('actions.docs')} - -
+

{t('minorVersions')}

 diff --git a/apps/site/util/getReleaseAnnounceLink.ts b/apps/site/util/getReleaseAnnounceLink.ts new file mode 100644 index 0000000000000..5b86147c7f810 --- /dev/null +++ b/apps/site/util/getReleaseAnnounceLink.ts @@ -0,0 +1,16 @@ +import semVer from 'semver'; + +import type { NodeRelease } from '@/types'; + +export const getReleaseAnnounceLink = (release: NodeRelease) => { + // No release announcement for versions <= 18 + if (semVer.satisfies(release.version, '<=18')) { + return null; + } + + if (release.status === 'Current') { + return null; + } + + return `/blog/announcements/v${release.major}-release-announce`; +}; diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json index 29fc525f3cef1..e175e97ed16cd 100644 --- a/packages/i18n/locales/en.json +++ b/packages/i18n/locales/en.json @@ -156,11 +156,16 @@ "details": "Details" }, "releaseModal": { - "releaseAnnouncement": "Release Announcement", - "apiDocs": "API Docs", + "title": "Node.js v{version} release", + "minorVersions": "Minor versions", + "releaseAnnouncement": "Release Announcement" + }, + "minorReleasesTable": { + "version": "Version", + "links": "Links", "actions": { + "release": "Release", "changelog": "Changelog", - "releases": "Releases", "docs": "Docs" } }, From c801322c17a1f620c18e59129cab56ddbd24544f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Wed, 16 Apr 2025 21:42:16 -0300 Subject: [PATCH 14/36] refactor: nit --- packages/i18n/locales/en.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json index e175e97ed16cd..17f3795cfbdb0 100644 --- a/packages/i18n/locales/en.json +++ b/packages/i18n/locales/en.json @@ -151,7 +151,7 @@ "codename": "Codename", "releaseDate": "Released at", "firstReleased": "First released", - "lastUpdated": "Last Updated", + "lastUpdated": "Last updated", "status": "Status", "details": "Details" }, From 81b57b4b1b013711f10474a999232c8e7180f3ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Wed, 16 Apr 2025 22:03:59 -0300 Subject: [PATCH 15/36] feat(site): add eol alerts --- .../Downloads/DownloadReleasesTable/index.tsx | 2 +- .../Downloads/ReleaseModal/index.tsx | 21 +++++++++++++++---- packages/i18n/locales/en.json | 3 ++- 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx index 097c755ae4b06..44f5115865a76 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx @@ -40,7 +40,7 @@ const DownloadReleasesTable: FC = async () => { {release.status} diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx index 5d33054be8ede..7505dc966ddda 100644 --- a/apps/site/components/Downloads/ReleaseModal/index.tsx +++ b/apps/site/components/Downloads/ReleaseModal/index.tsx @@ -1,3 +1,4 @@ +/* eslint-disable import-x/order */ import Modal from '@node-core/ui-components/Common/Modal'; import { useTranslations } from 'next-intl'; import type { FC } from 'react'; @@ -7,6 +8,8 @@ import LinkWithArrow from '@/components/LinkWithArrow'; import type { NodeRelease } from '@/types'; import { getReleaseAnnounceLink } from '@/util/getReleaseAnnounceLink'; +import AlertBox from '@node-core/ui-components/Common/AlertBox'; + type ReleaseModalProps = { isOpen: boolean; closeModal: () => void; @@ -18,9 +21,9 @@ const ReleaseModal: FC = ({ closeModal, release, }) => { - const t = useTranslations('components.releaseModal'); + const t = useTranslations(); - const modalHeading = t('title', { + const modalHeading = t('components.releaseModal.title', { version: release.major, }); @@ -35,11 +38,21 @@ const ReleaseModal: FC = ({ > {releaseAnnounceLink && ( - {t('releaseAnnouncement')} + {t('components.releaseModal.releaseAnnouncement')} )} -

{t('minorVersions')}

+ {release.status === 'End-of-life' && ( + + {t('components.releaseModal.unsupportedVersionWarning')} + + )} + +

{t('components.releaseModal.minorVersions')}

diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json index 17f3795cfbdb0..cd29ba741d639 100644 --- a/packages/i18n/locales/en.json +++ b/packages/i18n/locales/en.json @@ -158,7 +158,8 @@ "releaseModal": { "title": "Node.js v{version} release", "minorVersions": "Minor versions", - "releaseAnnouncement": "Release Announcement" + "releaseAnnouncement": "Release Announcement", + "unsupportedVersionWarning": "This version is out of maintenance. Please use a currently supported version." }, "minorReleasesTable": { "version": "Version", From 7f6fe4469168c248543e213cabafc9320ce44a52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Wed, 16 Apr 2025 22:06:53 -0300 Subject: [PATCH 16/36] fix: remove incorrect anchor href --- .../Downloads/DownloadReleasesTable/DetailsButton.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx index 8f9713f9f36b9..5a578e3056192 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx @@ -17,7 +17,10 @@ const DetailsButton: FC = ({ versionData }) => { const { openModal } = use(ReleaseModalContext); return ( - openModal(versionData)}> + openModal(versionData)} + > {t('details')} ); From 704dba8e3d1970c5ef7c60ed26a9c4af025cc926 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 17 Apr 2025 10:59:35 -0300 Subject: [PATCH 17/36] feat(ui-components): add smaller badge size --- .../Downloads/DownloadReleasesTable/index.tsx | 1 + .../ui-components/Common/Badge/index.module.css | 14 ++++++++++++-- .../ui-components/Common/Badge/index.stories.tsx | 12 ++++++++++++ packages/ui-components/Common/Badge/index.tsx | 9 ++++++++- 4 files changed, 33 insertions(+), 3 deletions(-) diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx index 44f5115865a76..c0efd7abae7dd 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx @@ -41,6 +41,7 @@ const DownloadReleasesTable: FC = async () => { {release.status} diff --git a/packages/ui-components/Common/Badge/index.module.css b/packages/ui-components/Common/Badge/index.module.css index 1a44f920a63b4..89cf8bfa23860 100644 --- a/packages/ui-components/Common/Badge/index.module.css +++ b/packages/ui-components/Common/Badge/index.module.css @@ -3,11 +3,21 @@ .badge { @apply rounded-full border - px-2.5 - py-0.5 text-center text-white; + &.small { + @apply px-1.5 + py-0.5 + text-xs; + } + + &.medium { + @apply px-2.5 + py-0.5 + text-base; + } + &.default { @apply border-green-200 bg-green-600 diff --git a/packages/ui-components/Common/Badge/index.stories.tsx b/packages/ui-components/Common/Badge/index.stories.tsx index 8125cea0bbb7c..874ec97c26fd9 100644 --- a/packages/ui-components/Common/Badge/index.stories.tsx +++ b/packages/ui-components/Common/Badge/index.stories.tsx @@ -23,4 +23,16 @@ export const Warning: Story = { }, }; +export const Small: Story = { + args: { + size: 'small', + }, +}; + +export const Medium: Story = { + args: { + size: 'medium', + }, +}; + export default { component: Badge, args: { children: 'Badge' } } as Meta; diff --git a/packages/ui-components/Common/Badge/index.tsx b/packages/ui-components/Common/Badge/index.tsx index e92e594312983..5b9730368e35d 100644 --- a/packages/ui-components/Common/Badge/index.tsx +++ b/packages/ui-components/Common/Badge/index.tsx @@ -6,18 +6,25 @@ import styles from './index.module.css'; type BadgeKind = 'default' | 'warning' | 'error'; type BadgeProps = HTMLAttributes & { + size?: 'small' | 'medium'; kind?: BadgeKind; }; const Badge: FC> = ({ kind = 'default', + size = 'medium', className, children, ...props }) => { return ( {children} From 741536f666770b47e6d844f10b47304379dc0293 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 17 Apr 2025 11:15:29 -0300 Subject: [PATCH 18/36] feat(site): add maintenance release status --- apps/site/next-data/generators/releaseData.mjs | 6 +++++- apps/site/types/releases.ts | 7 ++++++- 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/apps/site/next-data/generators/releaseData.mjs b/apps/site/next-data/generators/releaseData.mjs index 18cdfe9ce8be4..59785df3b3615 100644 --- a/apps/site/next-data/generators/releaseData.mjs +++ b/apps/site/next-data/generators/releaseData.mjs @@ -4,12 +4,16 @@ import nodevu from '@nodevu/core'; // Gets the appropriate release status for each major release const getNodeReleaseStatus = (now, support) => { - const { endOfLife, ltsStart, currentStart } = support; + const { endOfLife, maintenanceStart, ltsStart, currentStart } = support; if (endOfLife && now >= new Date(endOfLife)) { return 'End-of-life'; } + if (maintenanceStart && now >= new Date(maintenanceStart)) { + return 'Maintenance'; + } + if (ltsStart && now >= new Date(ltsStart)) { return 'LTS'; } diff --git a/apps/site/types/releases.ts b/apps/site/types/releases.ts index 8f9ad7123bd46..8b6739b7ab97e 100644 --- a/apps/site/types/releases.ts +++ b/apps/site/types/releases.ts @@ -1,4 +1,9 @@ -export type NodeReleaseStatus = 'LTS' | 'Current' | 'End-of-life' | 'Pending'; +export type NodeReleaseStatus = + | 'LTS' + | 'Maintenance' + | 'Current' + | 'End-of-life' + | 'Pending'; export interface NodeReleaseSource { major: number; From 50881df9c0573824678c7cb5769844f74b008c51 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 17 Apr 2025 11:21:17 -0300 Subject: [PATCH 19/36] feat(site): make codename prominent --- .../components/Downloads/ReleaseModal/index.tsx | 14 +++++++------- packages/i18n/locales/en.json | 3 ++- 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx index 7505dc966ddda..2fb1d8988c77b 100644 --- a/apps/site/components/Downloads/ReleaseModal/index.tsx +++ b/apps/site/components/Downloads/ReleaseModal/index.tsx @@ -23,19 +23,19 @@ const ReleaseModal: FC = ({ }) => { const t = useTranslations(); - const modalHeading = t('components.releaseModal.title', { + const modalHeadingKey = release.codename + ? 'components.releaseModal.title' + : 'components.releaseModal.titleWithoutCodename'; + + const modalHeading = t(modalHeadingKey, { version: release.major, + codename: release.codename ?? '', }); const releaseAnnounceLink = getReleaseAnnounceLink(release); return ( - + {releaseAnnounceLink && ( {t('components.releaseModal.releaseAnnouncement')} diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json index cd29ba741d639..97ae5abc93ce6 100644 --- a/packages/i18n/locales/en.json +++ b/packages/i18n/locales/en.json @@ -156,7 +156,8 @@ "details": "Details" }, "releaseModal": { - "title": "Node.js v{version} release", + "title": "Node.js {version} ({codename})", + "titleWithoutCodename": "Node.js {version}", "minorVersions": "Minor versions", "releaseAnnouncement": "Release Announcement", "unsupportedVersionWarning": "This version is out of maintenance. Please use a currently supported version." From e6955a1c2440e78b444fa84fca6c2a74fd92dcd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 17 Apr 2025 14:25:49 -0300 Subject: [PATCH 20/36] chore: fix vertical separator story --- .../Common/Separator/index.stories.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/packages/ui-components/Common/Separator/index.stories.tsx b/packages/ui-components/Common/Separator/index.stories.tsx index a76a5f271846c..4fe7337c8b58c 100644 --- a/packages/ui-components/Common/Separator/index.stories.tsx +++ b/packages/ui-components/Common/Separator/index.stories.tsx @@ -17,4 +17,16 @@ export const Vertical: Story = { }, }; -export default { component: Separator } as Meta; +export default { + component: Separator, + parameters: { + layout: 'centered', + }, + decorators: [ + Story => ( +
+ +
+ ), + ], +} as Meta; From 085107421a3533f4e9d30afca3c9799147a70305 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 17 Apr 2025 14:31:58 -0300 Subject: [PATCH 21/36] refactor: some minor changes --- .../Downloads/DownloadReleasesTable/DetailsButton.tsx | 3 ++- .../site/components/Downloads/DownloadReleasesTable/index.tsx | 2 +- apps/site/components/Downloads/ReleaseModal/index.tsx | 4 +--- packages/ui-components/Common/Separator/index.module.css | 4 ++-- 4 files changed, 6 insertions(+), 7 deletions(-) diff --git a/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx index 5a578e3056192..3c20ba738e4d4 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/DetailsButton.tsx @@ -1,7 +1,8 @@ 'use client'; import { useTranslations } from 'next-intl'; -import { use, type FC } from 'react'; +import type { FC } from 'react'; +import { use } from 'react'; import LinkWithArrow from '@/components/LinkWithArrow'; import { ReleaseModalContext } from '@/providers/releaseModalProvider'; diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx index c0efd7abae7dd..32b846d8fb2e4 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx @@ -1,6 +1,6 @@ import Badge from '@node-core/ui-components/Common/Badge'; import { getTranslations } from 'next-intl/server'; -import { type FC } from 'react'; +import type { FC } from 'react'; import DetailsButton from '@/components/Downloads/DownloadReleasesTable/DetailsButton'; import getReleaseData from '@/next-data/releaseData'; diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx index 2fb1d8988c77b..6d73d8beae538 100644 --- a/apps/site/components/Downloads/ReleaseModal/index.tsx +++ b/apps/site/components/Downloads/ReleaseModal/index.tsx @@ -1,4 +1,4 @@ -/* eslint-disable import-x/order */ +import AlertBox from '@node-core/ui-components/Common/AlertBox'; import Modal from '@node-core/ui-components/Common/Modal'; import { useTranslations } from 'next-intl'; import type { FC } from 'react'; @@ -8,8 +8,6 @@ import LinkWithArrow from '@/components/LinkWithArrow'; import type { NodeRelease } from '@/types'; import { getReleaseAnnounceLink } from '@/util/getReleaseAnnounceLink'; -import AlertBox from '@node-core/ui-components/Common/AlertBox'; - type ReleaseModalProps = { isOpen: boolean; closeModal: () => void; diff --git a/packages/ui-components/Common/Separator/index.module.css b/packages/ui-components/Common/Separator/index.module.css index b6e3cb9f9371b..4110ac8c9eac6 100644 --- a/packages/ui-components/Common/Separator/index.module.css +++ b/packages/ui-components/Common/Separator/index.module.css @@ -5,12 +5,12 @@ bg-neutral-800; &.horizontal { - @apply h-[1px] + @apply h-px w-full; } &.vertical { @apply h-full - w-[1px]; + w-px; } } From 14edfaed1b5815bd34bb4fc05d9cfecd4754a4d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 17 Apr 2025 15:59:07 -0300 Subject: [PATCH 22/36] fix: badgegroup references --- apps/site/pages/es/index.mdx | 2 +- apps/site/pages/fa/index.mdx | 2 +- apps/site/pages/fr/index.mdx | 2 +- apps/site/pages/id/index.mdx | 2 +- apps/site/pages/ja/index.mdx | 2 +- apps/site/pages/ko/index.mdx | 2 +- apps/site/pages/pt/index.mdx | 2 +- apps/site/pages/tr/index.mdx | 2 +- apps/site/pages/uk/index.mdx | 2 +- apps/site/pages/zh-cn/index.mdx | 2 +- apps/site/pages/zh-tw/index.mdx | 2 +- 11 files changed, 11 insertions(+), 11 deletions(-) diff --git a/apps/site/pages/es/index.mdx b/apps/site/pages/es/index.mdx index 72c9f55539fa3..7597663b63680 100644 --- a/apps/site/pages/es/index.mdx +++ b/apps/site/pages/es/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

Ejecuta JavaScript en cualquier parte

diff --git a/apps/site/pages/fa/index.mdx b/apps/site/pages/fa/index.mdx index 10b0356201947..ab1dc8d23fca3 100644 --- a/apps/site/pages/fa/index.mdx +++ b/apps/site/pages/fa/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

اجرا جاوااسکریپت در همه جا

diff --git a/apps/site/pages/fr/index.mdx b/apps/site/pages/fr/index.mdx index 64f3ec059b2da..2cd8a9da0ec2c 100644 --- a/apps/site/pages/fr/index.mdx +++ b/apps/site/pages/fr/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

Exécuter du JavaScript partout

diff --git a/apps/site/pages/id/index.mdx b/apps/site/pages/id/index.mdx index ae92dab406685..f321063c28a4b 100644 --- a/apps/site/pages/id/index.mdx +++ b/apps/site/pages/id/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

Jalankan JavaScript Di Mana Saja

diff --git a/apps/site/pages/ja/index.mdx b/apps/site/pages/ja/index.mdx index dc21ad41a0bb4..f99616a253d6c 100644 --- a/apps/site/pages/ja/index.mdx +++ b/apps/site/pages/ja/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

どこでもJavaScriptを使おう

diff --git a/apps/site/pages/ko/index.mdx b/apps/site/pages/ko/index.mdx index 25f31ed624ab0..f392ffcbcb1bb 100644 --- a/apps/site/pages/ko/index.mdx +++ b/apps/site/pages/ko/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

어디서든 JavaScript를 실행하세요

diff --git a/apps/site/pages/pt/index.mdx b/apps/site/pages/pt/index.mdx index 57261fea5aba2..af90aa6b5727e 100644 --- a/apps/site/pages/pt/index.mdx +++ b/apps/site/pages/pt/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

Executar a JavaScript em Toda Parte

diff --git a/apps/site/pages/tr/index.mdx b/apps/site/pages/tr/index.mdx index 742f803ab7bbc..19d3aa83e7ede 100644 --- a/apps/site/pages/tr/index.mdx +++ b/apps/site/pages/tr/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

Her Yerde JavaScript Çalıştırın

diff --git a/apps/site/pages/uk/index.mdx b/apps/site/pages/uk/index.mdx index 07671833ad3e8..937fe4a2709e1 100644 --- a/apps/site/pages/uk/index.mdx +++ b/apps/site/pages/uk/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

Запускайте JavaScript будь-де

diff --git a/apps/site/pages/zh-cn/index.mdx b/apps/site/pages/zh-cn/index.mdx index 9809abe73cdb7..120fe32b48227 100644 --- a/apps/site/pages/zh-cn/index.mdx +++ b/apps/site/pages/zh-cn/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

在任何地方运行 JavaScript

diff --git a/apps/site/pages/zh-tw/index.mdx b/apps/site/pages/zh-tw/index.mdx index b329dd7ed0112..37766774fd1e3 100644 --- a/apps/site/pages/zh-tw/index.mdx +++ b/apps/site/pages/zh-tw/index.mdx @@ -4,7 +4,7 @@ layout: home ---
- +

隨時隨地執行 JavaScript

From dd3f334e0a43ad73e4bf87315f20f1324ac069a7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 17 Apr 2025 16:02:04 -0300 Subject: [PATCH 23/36] refactor: small nit --- apps/site/util/getReleaseAnnounceLink.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/site/util/getReleaseAnnounceLink.ts b/apps/site/util/getReleaseAnnounceLink.ts index 5b86147c7f810..2671041da7d2c 100644 --- a/apps/site/util/getReleaseAnnounceLink.ts +++ b/apps/site/util/getReleaseAnnounceLink.ts @@ -3,12 +3,11 @@ import semVer from 'semver'; import type { NodeRelease } from '@/types'; export const getReleaseAnnounceLink = (release: NodeRelease) => { - // No release announcement for versions <= 18 - if (semVer.satisfies(release.version, '<=18')) { - return null; - } - - if (release.status === 'Current') { + // No release announcements for the current version or for versions ≤ 18 + if ( + semVer.satisfies(release.version, '<=18') || + release.status === 'Current' + ) { return null; } From fc55af18291e55d950c7c59666ba965386d6acab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 24 Apr 2025 08:33:14 -0300 Subject: [PATCH 24/36] feat: add minor versions release date --- .../components/Downloads/MinorReleasesTable/index.tsx | 7 ++++--- apps/site/next-data/generators/releaseData.mjs | 9 ++++++--- apps/site/types/releases.ts | 7 ++++++- 3 files changed, 16 insertions(+), 7 deletions(-) diff --git a/apps/site/components/Downloads/MinorReleasesTable/index.tsx b/apps/site/components/Downloads/MinorReleasesTable/index.tsx index b454b58f7e38a..5f234ebb1b29c 100644 --- a/apps/site/components/Downloads/MinorReleasesTable/index.tsx +++ b/apps/site/components/Downloads/MinorReleasesTable/index.tsx @@ -6,12 +6,13 @@ import type { FC } from 'react'; import Link from '@/components/Link'; import { BASE_CHANGELOG_URL } from '@/next.constants.mjs'; +import type { MinorVersion } from '@/types'; import { getNodeApiLink } from '@/util/getNodeApiLink'; import styles from './index.module.css'; type MinorReleasesTableProps = { - releases: Array; + releases: Array; }; export const MinorReleasesTable: FC = ({ @@ -29,8 +30,8 @@ export const MinorReleasesTable: FC = ({ {releases.map(release => ( - - v{release} + + v{release.version}
{ // Get the major release status based on our Release Schedule const status = getNodeReleaseStatus(new Date(), support); + const minorVersions = Object.entries(major.releases).map(([, release]) => ({ + version: release.semver.raw, + releaseDate: release.releaseDate, + })); + return { ...support, status, @@ -81,9 +86,7 @@ const generateReleaseData = async () => { v8: latestVersion.dependencies.v8 || '', releaseDate: latestVersion.releaseDate || '', modules: latestVersion.modules.version || '', - minorVersions: Object.entries(major.releases).map( - ([, release]) => release.semver.raw - ), + minorVersions, }; }); }; diff --git a/apps/site/types/releases.ts b/apps/site/types/releases.ts index 8b6739b7ab97e..f7737309f1f44 100644 --- a/apps/site/types/releases.ts +++ b/apps/site/types/releases.ts @@ -19,9 +19,14 @@ export interface NodeReleaseSource { modules?: string; } +export interface MinorVersion { + version: string; + releaseDate: string; +} + export interface NodeRelease extends NodeReleaseSource { versionWithPrefix: string; isLts: boolean; status: NodeReleaseStatus; - minorVersions: Array; + minorVersions: Array; } From 88dd7487cac56ec9d3e7fc78a862f143ce402947 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 24 Apr 2025 09:05:56 -0300 Subject: [PATCH 25/36] feat: smaller minor releases table --- apps/site/components/Downloads/MinorReleasesTable/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/site/components/Downloads/MinorReleasesTable/index.tsx b/apps/site/components/Downloads/MinorReleasesTable/index.tsx index 5f234ebb1b29c..cf4f3b55fe699 100644 --- a/apps/site/components/Downloads/MinorReleasesTable/index.tsx +++ b/apps/site/components/Downloads/MinorReleasesTable/index.tsx @@ -21,7 +21,7 @@ export const MinorReleasesTable: FC = ({ const t = useTranslations('components.minorReleasesTable'); return ( - +
From fe6c2e76a40351203ca4c092f46bcc13509b93e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 24 Apr 2025 09:24:27 -0300 Subject: [PATCH 26/36] fix: oops wrong req --- apps/site/components/Downloads/MinorReleasesTable/index.tsx | 2 +- packages/ui-components/Common/Modal/index.module.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/site/components/Downloads/MinorReleasesTable/index.tsx b/apps/site/components/Downloads/MinorReleasesTable/index.tsx index cf4f3b55fe699..5f234ebb1b29c 100644 --- a/apps/site/components/Downloads/MinorReleasesTable/index.tsx +++ b/apps/site/components/Downloads/MinorReleasesTable/index.tsx @@ -21,7 +21,7 @@ export const MinorReleasesTable: FC = ({ const t = useTranslations('components.minorReleasesTable'); return ( -
{t('version')}
+
diff --git a/packages/ui-components/Common/Modal/index.module.css b/packages/ui-components/Common/Modal/index.module.css index 1495d7e71bf46..5b399767fdf7e 100644 --- a/packages/ui-components/Common/Modal/index.module.css +++ b/packages/ui-components/Common/Modal/index.module.css @@ -15,6 +15,7 @@ m-4 inline-flex w-full + max-w-3xl flex-col overflow-y-auto rounded @@ -24,7 +25,6 @@ p-8 focus:outline-none sm:my-20 - lg:max-w-[900px] xl:p-12 dark:bg-neutral-950; } From 04ae3eab4a93b029928be5277f15b68204c92f33 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 24 Apr 2025 10:43:59 -0300 Subject: [PATCH 27/36] feat: create release overview component --- .../Downloads/DownloadReleasesTable/index.tsx | 2 - .../Downloads/ReleaseModal/index.tsx | 19 +++-- .../ReleaseOverview/index.module.css | 39 +++++++++ .../Downloads/ReleaseOverview/index.tsx | 83 +++++++++++++++++++ packages/i18n/locales/en.json | 9 ++ 5 files changed, 143 insertions(+), 9 deletions(-) create mode 100644 apps/site/components/Downloads/ReleaseOverview/index.module.css create mode 100644 apps/site/components/Downloads/ReleaseOverview/index.tsx diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx index 32b846d8fb2e4..28c1af704031b 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx @@ -18,7 +18,6 @@ const DownloadReleasesTable: FC = async () => { - @@ -30,7 +29,6 @@ const DownloadReleasesTable: FC = async () => { {releaseData.map(release => ( -
{t('version')}
{t('components.downloadReleasesTable.version')}{t('components.downloadReleasesTable.nApiVersion')} {t('components.downloadReleasesTable.codename')} {t('components.downloadReleasesTable.firstReleased')} {t('components.downloadReleasesTable.lastUpdated')}
v{release.major}v{release.modules} {release.codename || '-'} diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx index 6d73d8beae538..7a2d5cc7028c4 100644 --- a/apps/site/components/Downloads/ReleaseModal/index.tsx +++ b/apps/site/components/Downloads/ReleaseModal/index.tsx @@ -4,6 +4,7 @@ import { useTranslations } from 'next-intl'; import type { FC } from 'react'; import { MinorReleasesTable } from '@/components/Downloads/MinorReleasesTable'; +import { ReleaseOverview } from '@/components/Downloads/ReleaseOverview'; import LinkWithArrow from '@/components/LinkWithArrow'; import type { NodeRelease } from '@/types'; import { getReleaseAnnounceLink } from '@/util/getReleaseAnnounceLink'; @@ -34,12 +35,6 @@ const ReleaseModal: FC = ({ return ( - {releaseAnnounceLink && ( - - {t('components.releaseModal.releaseAnnouncement')} - - )} - {release.status === 'End-of-life' && ( = ({ )} -

{t('components.releaseModal.minorVersions')}

+ {releaseAnnounceLink && ( + + {t('components.releaseModal.releaseAnnouncement')} + + )} + +
{t('components.releaseModal.overview')}
+ + + +
{t('components.releaseModal.minorVersions')}
 diff --git a/apps/site/components/Downloads/ReleaseOverview/index.module.css b/apps/site/components/Downloads/ReleaseOverview/index.module.css new file mode 100644 index 0000000000000..6f1667ea6b1d4 --- /dev/null +++ b/apps/site/components/Downloads/ReleaseOverview/index.module.css @@ -0,0 +1,39 @@ +@reference "../../../styles/index.css"; + +.root { + @apply rounded + border + border-neutral-200 + p-4 + text-neutral-900 + dark:border-neutral-800 + dark:text-white; + + .container { + @apply grid + grid-cols-2 + gap-4 + lg:grid-cols-3; + } + + .item { + @apply flex + items-center + gap-2; + + h1 { + @apply text-base + font-semibold; + } + + h2 { + @apply text-xs + font-normal; + } + + svg { + @apply h-4 + w-4; + } + } +} diff --git a/apps/site/components/Downloads/ReleaseOverview/index.tsx b/apps/site/components/Downloads/ReleaseOverview/index.tsx new file mode 100644 index 0000000000000..5c597766ff72f --- /dev/null +++ b/apps/site/components/Downloads/ReleaseOverview/index.tsx @@ -0,0 +1,83 @@ +import { + CalendarIcon, + ClockIcon, + CodeBracketSquareIcon, + Square3Stack3DIcon, +} from '@heroicons/react/24/outline'; +import { useTranslations } from 'next-intl'; +import type { FC, ReactNode } from 'react'; + +import type { NodeRelease } from '@/types'; + +import styles from './index.module.css'; + +type ItemProps = { + icon: React.JSX.Element; + title: ReactNode; + subtitle: ReactNode; +}; + +const Item: FC = ({ icon, title, subtitle }) => { + return ( +
+ {icon} +
+

{subtitle}

+

{title}

+
+
+ ); +}; + +type ReleaseOverviewProps = { + release: NodeRelease; +}; + +export const ReleaseOverview: FC = ({ release }) => { + const t = useTranslations(); + + return ( +
+
+ } + title={release.currentStart} + subtitle={t('components.releaseOverview.firstReleased')} + /> + {release.releaseDate && ( + } + title={release.releaseDate} + subtitle={t('components.releaseOverview.lastUpdated')} + /> + )} + } + title={release.minorVersions.length} + subtitle={t('components.releaseOverview.minorVersions')} + /> + {release.modules && ( + } + title={`v${release.modules}`} + subtitle={t('components.releaseOverview.nApiVersion')} + /> + )} + {release.npm && ( + } + title={`v${release.npm}`} + subtitle={t('components.releaseOverview.npmVersion')} + /> + )} + {release.v8 && ( + } + title={`v${release.v8}`} + subtitle={t('components.releaseOverview.v8Version')} + /> + )} +
+
+ ); +}; diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json index 97ae5abc93ce6..7a0f6b1620cc7 100644 --- a/packages/i18n/locales/en.json +++ b/packages/i18n/locales/en.json @@ -158,6 +158,7 @@ "releaseModal": { "title": "Node.js {version} ({codename})", "titleWithoutCodename": "Node.js {version}", + "overview": "Overview", "minorVersions": "Minor versions", "releaseAnnouncement": "Release Announcement", "unsupportedVersionWarning": "This version is out of maintenance. Please use a currently supported version." @@ -171,6 +172,14 @@ "docs": "Docs" } }, + "releaseOverview": { + "firstReleased": "First released", + "lastUpdated": "Last updated", + "minorVersions": "Minor versions", + "nApiVersion": "N-API version", + "npmVersion": "npm version", + "v8Version": "V8 version" + }, "pagination": { "next": "Next", "previous": "Previous" From 761ddd6df15c664dcdb31257b6b145d6e6953f1d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 24 Apr 2025 10:44:50 -0300 Subject: [PATCH 28/36] fix: minor release links --- .../Downloads/MinorReleasesTable/index.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/apps/site/components/Downloads/MinorReleasesTable/index.tsx b/apps/site/components/Downloads/MinorReleasesTable/index.tsx index 5f234ebb1b29c..0fde534416cbf 100644 --- a/apps/site/components/Downloads/MinorReleasesTable/index.tsx +++ b/apps/site/components/Downloads/MinorReleasesTable/index.tsx @@ -36,16 +36,22 @@ export const MinorReleasesTable: FC = ({
{t('actions.release')} - + {t('actions.changelog')} - + {t('actions.docs')}
From 76665a5bf19c84af0fc1df7da063801b2a8d3a56 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 24 Apr 2025 10:53:35 -0300 Subject: [PATCH 29/36] feat(ui-components): add badge border on dark mode --- packages/ui-components/Common/Badge/index.module.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/ui-components/Common/Badge/index.module.css b/packages/ui-components/Common/Badge/index.module.css index 89cf8bfa23860..19bdba865743c 100644 --- a/packages/ui-components/Common/Badge/index.module.css +++ b/packages/ui-components/Common/Badge/index.module.css @@ -20,19 +20,19 @@ &.default { @apply border-green-200 - bg-green-600 - dark:border-green-600; + bg-green-600 + dark:border-green-800; } &.error { @apply border-danger-200 - bg-danger-600 - dark:border-danger-600; + bg-danger-600 + dark:border-danger-800; } &.warning { @apply border-warning-200 - bg-warning-600 - dark:border-warning-600; + bg-warning-600 + dark:border-warning-600; } } From c71369e473dfe9619b31bc002266deeab9390b5a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 24 Apr 2025 11:06:45 -0300 Subject: [PATCH 30/36] chore: fix stylelint --- packages/ui-components/Common/Separator/index.module.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/ui-components/Common/Separator/index.module.css b/packages/ui-components/Common/Separator/index.module.css index 4110ac8c9eac6..61d7dc140faa0 100644 --- a/packages/ui-components/Common/Separator/index.module.css +++ b/packages/ui-components/Common/Separator/index.module.css @@ -6,11 +6,11 @@ &.horizontal { @apply h-px - w-full; + w-full; } &.vertical { @apply h-full - w-px; + w-px; } } From ed0092f366279353345c0e08c2bb4782171e47d3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 24 Apr 2025 15:33:42 -0300 Subject: [PATCH 31/36] chore: fix dep range --- package-lock.json | 2 +- packages/ui-components/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 673133d859364..bf274d0bd3a97 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21320,7 +21320,7 @@ "@radix-ui/react-label": "~2.1.2", "@radix-ui/react-scroll-area": "~1.2.3", "@radix-ui/react-select": "~2.1.6", - "@radix-ui/react-separator": "^1.1.3", + "@radix-ui/react-separator": "~1.1.3", "@radix-ui/react-tabs": "~1.1.3", "@radix-ui/react-toast": "~1.2.6", "@radix-ui/react-tooltip": "~1.1.8", diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json index 779d838a461e5..9610a025a7e9a 100644 --- a/packages/ui-components/package.json +++ b/packages/ui-components/package.json @@ -23,7 +23,7 @@ "@radix-ui/react-label": "~2.1.2", "@radix-ui/react-scroll-area": "~1.2.3", "@radix-ui/react-select": "~2.1.6", - "@radix-ui/react-separator": "^1.1.3", + "@radix-ui/react-separator": "~1.1.3", "@radix-ui/react-tabs": "~1.1.3", "@radix-ui/react-toast": "~1.2.6", "@radix-ui/react-tooltip": "~1.1.8", From e8c2872fee5877ce38a6cb58e3d5cc692a7bf569 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Thu, 24 Apr 2025 18:01:59 -0300 Subject: [PATCH 32/36] feat: format datetimes --- .../Downloads/DownloadReleasesTable/index.tsx | 5 ++-- .../ReleaseOverview/index.module.css | 2 +- .../Downloads/ReleaseOverview/index.tsx | 27 +++++++++---------- .../site/next-data/generators/releaseData.mjs | 4 +-- apps/site/types/releases.ts | 4 +-- 5 files changed, 20 insertions(+), 22 deletions(-) diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx index 28c1af704031b..4a23c3e70845f 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx @@ -2,6 +2,7 @@ import Badge from '@node-core/ui-components/Common/Badge'; import { getTranslations } from 'next-intl/server'; import type { FC } from 'react'; +import FormattedTime from '@/components/Common/FormattedTime'; import DetailsButton from '@/components/Downloads/DownloadReleasesTable/DetailsButton'; import getReleaseData from '@/next-data/releaseData'; @@ -31,10 +32,10 @@ const DownloadReleasesTable: FC = async () => { 		v{release.major} {release.codename || '-'} - + - + = ({ release }) => {
} - title={release.currentStart} + title={} subtitle={t('components.releaseOverview.firstReleased')} /> - {release.releaseDate && ( - } - title={release.releaseDate} - subtitle={t('components.releaseOverview.lastUpdated')} - /> - )} + } + title={} + subtitle={t('components.releaseOverview.lastUpdated')} + /> } title={release.minorVersions.length} @@ -70,13 +69,11 @@ export const ReleaseOverview: FC = ({ release }) => { subtitle={t('components.releaseOverview.npmVersion')} /> )} - {release.v8 && ( - } - title={`v${release.v8}`} - subtitle={t('components.releaseOverview.v8Version')} - /> - )} + } + title={`v${release.v8}`} + subtitle={t('components.releaseOverview.v8Version')} + />
); diff --git a/apps/site/next-data/generators/releaseData.mjs b/apps/site/next-data/generators/releaseData.mjs index b3b8653b93503..e2d032fd946a3 100644 --- a/apps/site/next-data/generators/releaseData.mjs +++ b/apps/site/next-data/generators/releaseData.mjs @@ -83,8 +83,8 @@ const generateReleaseData = async () => { codename: major.support.codename || '', isLts: status === 'LTS', npm: latestVersion.dependencies.npm || '', - v8: latestVersion.dependencies.v8 || '', - releaseDate: latestVersion.releaseDate || '', + v8: latestVersion.dependencies.v8, + releaseDate: latestVersion.releaseDate, modules: latestVersion.modules.version || '', minorVersions, }; diff --git a/apps/site/types/releases.ts b/apps/site/types/releases.ts index f7737309f1f44..4e59f2b41ab92 100644 --- a/apps/site/types/releases.ts +++ b/apps/site/types/releases.ts @@ -14,8 +14,8 @@ export interface NodeReleaseSource { maintenanceStart?: string; endOfLife: string; npm?: string; - v8?: string; - releaseDate?: string; + v8: string; + releaseDate: string; modules?: string; } From 4927366e691ce264c705970639f4557a47ab4581 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Fri, 25 Apr 2025 11:01:37 -0300 Subject: [PATCH 33/36] refactor: small nits --- .../ReleaseOverview/index.module.css | 3 +-- .../Downloads/ReleaseOverview/index.tsx | 20 +++++++++---------- .../ui-components/Common/Separator/index.tsx | 6 ++---- 3 files changed, 13 insertions(+), 16 deletions(-) diff --git a/apps/site/components/Downloads/ReleaseOverview/index.module.css b/apps/site/components/Downloads/ReleaseOverview/index.module.css index 05936eefbc46c..5043967ac27f1 100644 --- a/apps/site/components/Downloads/ReleaseOverview/index.module.css +++ b/apps/site/components/Downloads/ReleaseOverview/index.module.css @@ -32,8 +32,7 @@ } svg { - @apply h-4 - w-4; + @apply size-4; } } } diff --git a/apps/site/components/Downloads/ReleaseOverview/index.tsx b/apps/site/components/Downloads/ReleaseOverview/index.tsx index d295573dbded5..762945e5e2754 100644 --- a/apps/site/components/Downloads/ReleaseOverview/index.tsx +++ b/apps/site/components/Downloads/ReleaseOverview/index.tsx @@ -5,7 +5,7 @@ import { Square3Stack3DIcon, } from '@heroicons/react/24/outline'; import { useTranslations } from 'next-intl'; -import type { FC, ReactNode } from 'react'; +import type { FC, ReactNode, SVGProps } from 'react'; import FormattedTime from '@/components/Common/FormattedTime'; import type { NodeRelease } from '@/types'; @@ -13,15 +13,15 @@ import type { NodeRelease } from '@/types'; import styles from './index.module.css'; type ItemProps = { - icon: React.JSX.Element; + Icon: FC>; title: ReactNode; subtitle: ReactNode; }; -const Item: FC = ({ icon, title, subtitle }) => { +const Item: FC = ({ Icon, title, subtitle }) => { return (
- {icon} +

{subtitle}

{title}

@@ -41,36 +41,36 @@ export const ReleaseOverview: FC = ({ release }) => {
} + Icon={CalendarIcon} title={} subtitle={t('components.releaseOverview.firstReleased')} /> } + Icon={ClockIcon} title={} subtitle={t('components.releaseOverview.lastUpdated')} /> } + Icon={Square3Stack3DIcon} title={release.minorVersions.length} subtitle={t('components.releaseOverview.minorVersions')} /> {release.modules && ( } + Icon={CodeBracketSquareIcon} title={`v${release.modules}`} subtitle={t('components.releaseOverview.nApiVersion')} /> )} {release.npm && ( } + Icon={CodeBracketSquareIcon} title={`v${release.npm}`} subtitle={t('components.releaseOverview.npmVersion')} /> )} } + Icon={CodeBracketSquareIcon} title={`v${release.v8}`} subtitle={t('components.releaseOverview.v8Version')} /> diff --git a/packages/ui-components/Common/Separator/index.tsx b/packages/ui-components/Common/Separator/index.tsx index 59722b573e416..2a51b8bd41adc 100644 --- a/packages/ui-components/Common/Separator/index.tsx +++ b/packages/ui-components/Common/Separator/index.tsx @@ -2,13 +2,11 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator'; import classNames from 'classnames'; -import type * as React from 'react'; +import type { FC, ComponentProps } from 'react'; import styles from './index.module.css'; -const Separator: React.FC< - React.ComponentProps -> = ({ +const Separator: FC> = ({ className, orientation = 'horizontal', decorative = true, From f550d22ddb0ebff1b38493ffae8dac15df7aee7e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Fri, 25 Apr 2025 12:02:44 -0300 Subject: [PATCH 34/36] fix: release announce links --- .../Downloads/ReleaseModal/index.tsx | 7 ++----- apps/site/next-data/generators/releaseData.mjs | 18 ++++++++++++++++++ apps/site/types/releases.ts | 1 + apps/site/util/getReleaseAnnounceLink.ts | 15 --------------- 4 files changed, 21 insertions(+), 20 deletions(-) delete mode 100644 apps/site/util/getReleaseAnnounceLink.ts diff --git a/apps/site/components/Downloads/ReleaseModal/index.tsx b/apps/site/components/Downloads/ReleaseModal/index.tsx index 7a2d5cc7028c4..23b50e785739d 100644 --- a/apps/site/components/Downloads/ReleaseModal/index.tsx +++ b/apps/site/components/Downloads/ReleaseModal/index.tsx @@ -7,7 +7,6 @@ import { MinorReleasesTable } from '@/components/Downloads/MinorReleasesTable'; import { ReleaseOverview } from '@/components/Downloads/ReleaseOverview'; import LinkWithArrow from '@/components/LinkWithArrow'; import type { NodeRelease } from '@/types'; -import { getReleaseAnnounceLink } from '@/util/getReleaseAnnounceLink'; type ReleaseModalProps = { isOpen: boolean; @@ -31,8 +30,6 @@ const ReleaseModal: FC = ({ codename: release.codename ?? '', }); - const releaseAnnounceLink = getReleaseAnnounceLink(release); - return ( {release.status === 'End-of-life' && ( @@ -45,8 +42,8 @@ const ReleaseModal: FC = ({ )} - {releaseAnnounceLink && ( - + {release.releaseAnnounceLink && ( + {t('components.releaseModal.releaseAnnouncement')} )} diff --git a/apps/site/next-data/generators/releaseData.mjs b/apps/site/next-data/generators/releaseData.mjs index e2d032fd946a3..3db21e4166cf1 100644 --- a/apps/site/next-data/generators/releaseData.mjs +++ b/apps/site/next-data/generators/releaseData.mjs @@ -1,6 +1,7 @@ 'use strict'; import nodevu from '@nodevu/core'; +import { glob } from 'glob'; // Gets the appropriate release status for each major release const getNodeReleaseStatus = (now, support) => { @@ -32,6 +33,14 @@ const getNodeReleaseStatus = (now, support) => { * @returns {Promise>} */ const generateReleaseData = async () => { + const releaseAnnouncements = await glob('**/*-release-announce.md', { + root: process.cwd(), + cwd: 'pages/en/blog/announcements/', + absolute: false, + }); + + console.log('Release Announcement:', process.cwd(), releaseAnnouncements); + const nodevuOutput = await nodevu({ fetch: fetch }); const majors = Object.entries(nodevuOutput).filter( @@ -74,6 +83,14 @@ const generateReleaseData = async () => { releaseDate: release.releaseDate, })); + const majorVersion = latestVersion.semver.major; + + const releaseAnnounceLink = releaseAnnouncements.includes( + `v${majorVersion}-release-announce.md` + ) + ? `/blog/announcements/v${majorVersion}-release-announce` + : undefined; + return { ...support, status, @@ -86,6 +103,7 @@ const generateReleaseData = async () => { v8: latestVersion.dependencies.v8, releaseDate: latestVersion.releaseDate, modules: latestVersion.modules.version || '', + releaseAnnounceLink, minorVersions, }; }); diff --git a/apps/site/types/releases.ts b/apps/site/types/releases.ts index 4e59f2b41ab92..cf71f7bea406d 100644 --- a/apps/site/types/releases.ts +++ b/apps/site/types/releases.ts @@ -28,5 +28,6 @@ export interface NodeRelease extends NodeReleaseSource { versionWithPrefix: string; isLts: boolean; status: NodeReleaseStatus; + releaseAnnounceLink?: string; minorVersions: Array; } diff --git a/apps/site/util/getReleaseAnnounceLink.ts b/apps/site/util/getReleaseAnnounceLink.ts deleted file mode 100644 index 2671041da7d2c..0000000000000 --- a/apps/site/util/getReleaseAnnounceLink.ts +++ /dev/null @@ -1,15 +0,0 @@ -import semVer from 'semver'; - -import type { NodeRelease } from '@/types'; - -export const getReleaseAnnounceLink = (release: NodeRelease) => { - // No release announcements for the current version or for versions ≤ 18 - if ( - semVer.satisfies(release.version, '<=18') || - release.status === 'Current' - ) { - return null; - } - - return `/blog/announcements/v${release.major}-release-announce`; -}; From 737bfa88f470f362e4cf888cce6760d6e18f29bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Fri, 25 Apr 2025 19:39:43 -0300 Subject: [PATCH 35/36] refactor: remove comment --- apps/site/components/Downloads/DownloadReleasesTable/index.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx index 4a23c3e70845f..460e4e29eab2e 100644 --- a/apps/site/components/Downloads/DownloadReleasesTable/index.tsx +++ b/apps/site/components/Downloads/DownloadReleasesTable/index.tsx @@ -6,9 +6,6 @@ import FormattedTime from '@/components/Common/FormattedTime'; import DetailsButton from '@/components/Downloads/DownloadReleasesTable/DetailsButton'; import getReleaseData from '@/next-data/releaseData'; -// This is a React Async Server Component -// Note that Hooks cannot be used in a RSC async component -// Async Components do not get re-rendered at all. const DownloadReleasesTable: FC = async () => { const releaseData = await getReleaseData(); From 9a17e53cd50ba0395fde251b1a443b074de03038 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Ara=C3=BAjo?= Date: Mon, 28 Apr 2025 14:00:35 -0300 Subject: [PATCH 36/36] feat: use npm icon --- apps/site/components/Downloads/ReleaseOverview/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/site/components/Downloads/ReleaseOverview/index.tsx b/apps/site/components/Downloads/ReleaseOverview/index.tsx index 762945e5e2754..c444908c99586 100644 --- a/apps/site/components/Downloads/ReleaseOverview/index.tsx +++ b/apps/site/components/Downloads/ReleaseOverview/index.tsx @@ -4,6 +4,7 @@ import { CodeBracketSquareIcon, Square3Stack3DIcon, } from '@heroicons/react/24/outline'; +import NpmIcon from '@node-core/ui-components/Icons/PackageManager/Npm'; import { useTranslations } from 'next-intl'; import type { FC, ReactNode, SVGProps } from 'react'; @@ -64,7 +65,7 @@ export const ReleaseOverview: FC = ({ release }) => { )} {release.npm && (