diff --git a/apps/site/components/Common/AlertBox/index.tsx b/apps/site/components/Common/AlertBox/index.tsx index 1e0b78844935a..346c8fb07e999 100644 --- a/apps/site/components/Common/AlertBox/index.tsx +++ b/apps/site/components/Common/AlertBox/index.tsx @@ -17,7 +17,7 @@ const AlertBox: FC = ({ }) => (
{title} - {children} + {children}
); diff --git a/apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx b/apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx index d4a4fb31c825c..536707ad2c506 100644 --- a/apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx +++ b/apps/site/components/Downloads/Release/OperatingSystemDropdown.tsx @@ -8,7 +8,7 @@ import Select from '@/components/Common/Select'; import { useClientContext } from '@/hooks'; import { ReleaseContext } from '@/providers/releaseProvider'; import type { UserOS } from '@/types/userOS'; -import { OPERATING_SYSTEMS, parseCompat } from '@/util/downloadUtils'; +import { nextItem, OPERATING_SYSTEMS, parseCompat } from '@/util/downloadUtils'; type OperatingSystemDropdownProps = { exclude?: Array }; @@ -30,9 +30,22 @@ const OperatingSystemDropdown: FC = () => { // We parse the compatibility of the dropdown items const parsedOperatingSystems = useMemo( () => parseCompat(OPERATING_SYSTEMS, release), - // We only want to react on the change of the Install Method + // We only want to react on the change of the Install Method and Version // eslint-disable-next-line react-hooks/exhaustive-deps - [release.installMethod, release.os] + [release.installMethod, release.version] + ); + + // We set the OS to the next available OS when the current + // one is not valid anymore due to Version changes + useEffect( + () => { + if (release.os !== 'LOADING') { + release.setOS(nextItem(release.os, parsedOperatingSystems)); + } + }, + // We only want to react on the change of the Version, Install Method and OS + // eslint-disable-next-line react-hooks/exhaustive-deps + [release.installMethod, release.version, release.os] ); return ( diff --git a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx index f3ffb8057cf62..e8a1684aef5f5 100644 --- a/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx +++ b/apps/site/components/Downloads/Release/ReleaseCodeBox.tsx @@ -96,8 +96,28 @@ const ReleaseCodeBox: FC = () => { return (
+ + {release.status === 'End-of-life' && ( - + {t.rich('layouts.download.codeBox.unsupportedVersionWarning', { link: text => {text}, })} @@ -105,7 +125,11 @@ const ReleaseCodeBox: FC = () => { )} {!currentPlatform || currentPlatform.recommended || ( - + {t('layouts.download.codeBox.communityPlatformInfo')} )} diff --git a/apps/site/hooks/react-client/__tests__/useMediaQuery.test.mjs b/apps/site/hooks/react-client/__tests__/useMediaQuery.test.mjs index 2b3024ebdecba..afe88261f4bcb 100644 --- a/apps/site/hooks/react-client/__tests__/useMediaQuery.test.mjs +++ b/apps/site/hooks/react-client/__tests__/useMediaQuery.test.mjs @@ -3,75 +3,56 @@ import { renderHook } from '@testing-library/react'; import useMediaQuery from '@/hooks/react-client/useMediaQuery'; describe('useMediaQuery', () => { - it('should check for matchMedia support', () => { + it('should return undefined initially', () => { const { result } = renderHook(() => useMediaQuery('media-query-mock')); - - expect(result.current).toBe(undefined); + expect(result.current).toBe(false); }); it('should return true for matched query', () => { Object.defineProperty(window, 'matchMedia', { writable: true, - value: () => ({ + value: query => ({ matches: true, + media: query, addEventListener: jest.fn(), removeEventListener: jest.fn(), }), }); const { result } = renderHook(() => useMediaQuery('media-query-mock')); - expect(result.current).toBe(true); }); it('should return false for not-matched query', () => { Object.defineProperty(window, 'matchMedia', { writable: true, - value: () => ({ + value: query => ({ matches: false, + media: query, addEventListener: jest.fn(), removeEventListener: jest.fn(), }), }); const { result } = renderHook(() => useMediaQuery('media-query-mock')); - expect(result.current).toBe(false); }); it('should subscribe for media changes', () => { const listenerMock = jest.fn().mockImplementation((_, handler) => { - handler(); + handler({ matches: false }); }); Object.defineProperty(window, 'matchMedia', { writable: true, - value: () => ({ + value: query => ({ matches: false, + media: query, addEventListener: listenerMock, removeEventListener: jest.fn(), }), }); - renderHook(() => useMediaQuery('media-query-mock')); - - expect(listenerMock).toHaveBeenCalledTimes(1); - }); - - it("should support MediaQueryList's old event listeners", () => { - const listenerMock = jest.fn().mockImplementation(handler => { - handler(); - }); - - Object.defineProperty(window, 'matchMedia', { - writable: true, - value: () => ({ - matches: false, - addListener: listenerMock, - removeListener: jest.fn(), - }), - }); - renderHook(() => useMediaQuery('media-query-mock')); expect(listenerMock).toHaveBeenCalledTimes(1); }); diff --git a/apps/site/hooks/react-client/useMediaQuery.ts b/apps/site/hooks/react-client/useMediaQuery.ts index 4d28baa033584..224dac5b88998 100644 --- a/apps/site/hooks/react-client/useMediaQuery.ts +++ b/apps/site/hooks/react-client/useMediaQuery.ts @@ -2,40 +2,24 @@ import { useState, useEffect } from 'react'; -const mediaQueryChangeSubscribe = (mq: MediaQueryList, handler: () => void) => { - if (mq.addEventListener) { - mq.addEventListener('change', handler); - } else { - mq.addListener(handler); - } -}; - -const mediaQueryChangeUnsubscribe = ( - mq: MediaQueryList, - handler: () => void -) => { - if (mq.removeEventListener) { - mq.removeEventListener('change', handler); - } else { - mq.removeListener(handler); - } -}; - -const useMediaQuery = (query: string): boolean | undefined => { - const [matches, setMatches] = useState(); +const useMediaQuery = (query: string) => { + const [matches, setMatches] = useState(false); useEffect(() => { - if (typeof window?.matchMedia === 'function') { - const mq = window.matchMedia(query); - setMatches(mq.matches); + const { matches, addEventListener, removeEventListener } = + window.matchMedia?.(query) ?? { + matches: false, + addEventListener: () => {}, + removeEventListener: () => {}, + }; + + setMatches(matches); - const handler = (): void => setMatches(mq.matches); - mediaQueryChangeSubscribe(mq, handler); + const handler = (event: MediaQueryListEvent) => setMatches(event.matches); - return (): void => mediaQueryChangeUnsubscribe(mq, handler); - } + addEventListener('change', handler); - return undefined; + return () => removeEventListener('change', handler); }, [query]); return matches; diff --git a/apps/site/navigation.json b/apps/site/navigation.json index 8f7fd86cf6c0c..363bffd0c523f 100644 --- a/apps/site/navigation.json +++ b/apps/site/navigation.json @@ -380,45 +380,5 @@ } } } - }, - "download": { - "items": { - "shaSums": { - "link": "https://nodejs.org/dist/{nodeVersion}/SHASUMS256.txt.asc", - "label": "components.downloadList.links.shaSums.title" - }, - "allDownloads": { - "link": "https://nodejs.org/dist/{nodeVersion}/", - "label": "components.downloadList.links.allDownloads" - }, - "packageManager": { - "link": "/download/package-manager", - "label": "components.downloadList.links.packageManager" - }, - "previousReleases": { - "link": "/about/previous-releases", - "label": "components.downloadList.links.previousReleases" - }, - "nightlyReleases": { - "link": "https://nodejs.org/download/nightly/", - "label": "components.downloadList.links.nightlyReleases" - }, - "unofficialBuilds": { - "link": "https://unofficial-builds.nodejs.org/download/", - "label": "components.downloadList.links.unofficialBuilds" - }, - "buildingFromSource": { - "link": "https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms", - "label": "components.downloadList.links.buildingFromSource" - }, - "installingOnLinux": { - "link": "https://github.com/nodejs/help/wiki/Installation", - "label": "components.downloadList.links.installingOnLinux" - }, - "installingOnWsl": { - "link": "https://github.com/nodejs/node/blob/main/BUILDING.md#building-nodejs-on-supported-platforms", - "label": "components.downloadList.links.installingOnWsl" - } - } } } diff --git a/apps/site/pages/es/search.mdx b/apps/site/pages/es/search.mdx deleted file mode 100644 index 048d829afa13f..0000000000000 --- a/apps/site/pages/es/search.mdx +++ /dev/null @@ -1,6 +0,0 @@ ---- -layout: search -title: Resultados de Búsqueda ---- - - diff --git a/apps/site/util/downloadUtils.tsx b/apps/site/util/downloadUtils.tsx index a7368a97e761a..7b756641f4d3c 100644 --- a/apps/site/util/downloadUtils.tsx +++ b/apps/site/util/downloadUtils.tsx @@ -144,7 +144,7 @@ export const OPERATING_SYSTEMS: Array> = [ { label: OperatingSystemLabel.AIX, value: 'AIX', - compatibility: { installMethod: [''] }, + compatibility: { installMethod: [''], semver: ['>= 6.7.0'] }, iconImage: , }, ]; diff --git a/packages/i18n/locales/en.json b/packages/i18n/locales/en.json index 37af22658066d..9d6aff319e36f 100644 --- a/packages/i18n/locales/en.json +++ b/packages/i18n/locales/en.json @@ -136,22 +136,6 @@ } } }, - "downloadList": { - "links": { - "previousReleases": "Node.js Releases", - "packageManager": "Installing Node.js via package manager", - "shaSums": { - "title": "Signed SHASUMS for release files", - "howToVerify": " (How to verify)" - }, - "allDownloads": "All download options", - "nightlyReleases": "Nightly builds", - "unofficialBuilds": "Unofficial builds", - "buildingFromSource": "Building Node.js from source on supported platforms", - "installingOnLinux": "Installing Node.js via binary archive", - "installingOnWsl": "Install on Windows Subsystem for Linux (WSL)" - } - }, "downloadReleasesTable": { "changelog": "Changelog", "releases": "Releases", @@ -162,6 +146,11 @@ "previous": "Previous" }, "common": { + "alertBox": { + "info": "Info", + "warning": "Warning", + "danger": "Danger" + }, "breadcrumbs": { "navigateToHome": "Navigate to Home" }, @@ -202,32 +191,9 @@ "viewAs": "View as", "tableOfContents": "Table of Contents" }, - "downloads": { - "changelogModal": { - "startContributing": "Start Contributing" - } - }, "search": { "searchBox": { "placeholder": "Start typing..." - }, - "seeAll": { - "text": "See all {count} results" - }, - "searchError": { - "text": "An error occurred while searching. Please try again later." - }, - "poweredBy": { - "text": "Powered by" - }, - "noResults": { - "text": "No results found for \"{query}\"." - }, - "emptyState": { - "text": "Search something..." - }, - "searchPage": { - "title": "You're searching: {query}" } }, "blog": { @@ -278,7 +244,6 @@ "backToHome": "Back to Home" }, "download": { - "selectCategory": "Categories", "buttons": { "installer": "{os} Installer (.{extension})", "binary": "Standalone Binary (.{extension})" @@ -299,6 +264,7 @@ "unsupportedVersionWarning": "This version is out of maintenance. Please use a currently supported version. Understand EOL support.", "communityPlatformInfo": "Installation methods that involve community software are supported by the teams maintaining that software.", "externalSupportInfo": "If you encounter any issues please visit {platform}'s website", + "noScriptDetected": "This page requires JavaScript. You can download Node.js without JavaScript by visiting the releases page directly.", "platformInfo": { "default": "{platform} and their installation scripts are not maintained by the Node.js project.", "nvm": "\"nvm\" is a cross-platform Node.js version manager.",