chore: reduce layout shift, simplify codebox and cleanup text

nodejs · Feb 25, 2024 · 2d595d2 · 2d595d2
1 parent 51aba24
commit 2d595d2
Show file tree

Hide file tree

Showing 19 changed files with 73 additions and 70 deletions.
diff --git a/components/Downloads/Release/BitnessDropdown.tsx b/components/Downloads/Release/BitnessDropdown.tsx
@@ -50,15 +50,15 @@ const BitnessDropdown: FC = () => {
 
   return (
     <Select
+      label={t('layouts.download.dropdown.bitness')}
       values={formatDropdownItems({
         items: bitnessItems[os],
         disabledItems,
       })}
       defaultValue={String(bitness)}
       onChange={bitness => setBitness(parseNumericBitness(bitness))}
+      className="w-28"
       inline={true}
-      className="min-w-20"
-      label={t('layouts.download.dropdown.bitness')}
     />
   );
 };

diff --git a/components/Downloads/Release/DownloadButton.tsx b/components/Downloads/Release/DownloadButton.tsx
@@ -7,7 +7,6 @@ import type { FC } from 'react';
 
 import Button from '@/components/Common/Button';
 import { ReleaseContext } from '@/providers/releaseProvider';
-import { OperatingSystem } from '@/util/downloadUtils';
 import { getNodeDownloadUrl } from '@/util/getNodeDownloadUrl';
 
 type DownloadButtonProps = { kind: 'installer' | 'binary' | 'source' };
@@ -24,10 +23,7 @@ const DownloadButton: FC<DownloadButtonProps> = ({ kind = 'installer' }) => {
       <Button href={url} disabled={!version}>
         <CloudArrowDownIcon />
 
-        {t('layouts.download.buttons.prebuilt', {
-          version,
-          os: OperatingSystem[os],
-        })}
+        {t('layouts.download.buttons.prebuilt', { version })}
       </Button>
     </div>
   );

diff --git a/components/Downloads/Release/OperatingSystemDropdown.tsx b/components/Downloads/Release/OperatingSystemDropdown.tsx
@@ -63,6 +63,7 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
 
   return (
     <Select
+      label={t('layouts.download.dropdown.os')}
       values={formatDropdownItems({
         items: operatingSystemItems,
         disabledItems,
@@ -74,9 +75,8 @@ const OperatingSystemDropdown: FC<OperatingSystemDropdownProps> = ({
       })}
       defaultValue={os}
       onChange={value => setOS(value as UserOS)}
+      className="w-[8.5rem]"
       inline={true}
-      className="min-w-28"
-      label={t('layouts.download.dropdown.os')}
     />
   );
 };

diff --git a/components/Downloads/Release/PlatformDropdown.tsx b/components/Downloads/Release/PlatformDropdown.tsx
@@ -6,7 +6,6 @@ import type { FC } from 'react';
 
 import Select from '@/components/Common/Select';
 import Docker from '@/components/Icons/Platform/Docker';
-import Generic from '@/components/Icons/Platform/Generic';
 import Homebrew from '@/components/Icons/Platform/Homebrew';
 import NVM from '@/components/Icons/Platform/NVM';
 import { ReleaseContext } from '@/providers/releaseProvider';
@@ -65,23 +64,20 @@ const PlatformDropdown: FC = () => {
 
   return (
     <Select
+      label={t('layouts.download.dropdown.platform')}
       values={formatDropdownItems({
         items: platformItems,
         icons: {
           NVM: <NVM width={16} height={16} />,
           BREW: <Homebrew width={16} height={16} />,
           DOCKER: <Docker width={16} height={16} />,
         },
-        defaultIcon: (
-          <Generic className="dark:stroke-neutral-600" width={16} height={16} />
-        ),
         disabledItems,
       })}
       defaultValue={platform}
       onChange={platform => setPlatform(platform as PackageManager)}
+      className="w-28"
       inline={true}
-      className="min-w-24"
-      label={t('layouts.download.dropdown.platform')}
     />
   );
 };

diff --git a/components/Downloads/Release/ReleaseCodeBox.tsx b/components/Downloads/Release/ReleaseCodeBox.tsx
@@ -5,8 +5,13 @@ import type { FC } from 'react';
 
 import CodeBox from '@/components/Common/CodeBox';
 import { ReleaseContext } from '@/providers/releaseProvider';
+import { getShiki, highlightToHtml } from '@/util/getHighlighter';
 import { getNodeDownloadSnippet } from '@/util/getNodeDownloadSnippet';
 
+// We cannot do top-level awaits on utilities or code that is imported by client-only components
+// hence we only declare a Promise and let it be fulfilled by the first call to the function
+const memoizedShiki = getShiki();
+
 const ReleaseCodeBox: FC = () => {
   const {
     platform,
@@ -17,20 +22,23 @@ const ReleaseCodeBox: FC = () => {
   const [code, setCode] = useState('');
 
   useEffect(() => {
+    const updatedCode = getNodeDownloadSnippet(major, os)[platform];
     // Docker and NVM support downloading tags/versions by their full release number
     // but usually we should recommend users to download "major" versions
     // since our Downlooad Buttons get the latest minor of a major, it does make sense
     // to request installation of a major via a package manager
-    getNodeDownloadSnippet(major, os).then(platforms =>
-      setCode(platforms[platform])
-    );
+    memoizedShiki
+      .then(shiki => highlightToHtml(shiki)(updatedCode, 'bash'))
+      .then(setCode);
   }, [major, os, platform]);
 
   return (
     <div className="mb-2 mt-6 flex min-h-80 flex-col gap-2">
-      <CodeBox language="Bash">
-        <code dangerouslySetInnerHTML={{ __html: code }} />
-      </CodeBox>
+      {code && (
+        <CodeBox language="Bash">
+          <code dangerouslySetInnerHTML={{ __html: code }} />
+        </CodeBox>
+      )}
 
       <span className="text-center text-xs text-neutral-800 dark:text-neutral-200">
         Package Managers and their installation scripts are not maintained by

diff --git a/components/Downloads/Release/VersionDropdown.tsx b/components/Downloads/Release/VersionDropdown.tsx
@@ -2,11 +2,10 @@
 
 import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
-import { useContext, useEffect } from 'react';
+import { useContext } from 'react';
 
 import Select from '@/components/Common/Select';
 import { ReleaseContext } from '@/providers/releaseProvider';
-import type { NodeRelease } from '@/types';
 
 const getDropDownStatus = (version: string, status: string) => {
   if (status === 'Active LTS') {
@@ -20,24 +19,21 @@ const getDropDownStatus = (version: string, status: string) => {
   return version;
 };
 
-const VersionDropdown: FC<NodeRelease> = ({ versionWithPrefix }) => {
+const VersionDropdown: FC = () => {
   const { releases, release, setVersion } = useContext(ReleaseContext);
   const t = useTranslations();
-  // we shouldn't react when "actions" change
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useEffect(() => setVersion(versionWithPrefix), []);
 
   return (
     <Select
+      label={t('layouts.download.dropdown.version')}
       values={releases.map(({ status, versionWithPrefix }) => ({
         value: versionWithPrefix,
         label: getDropDownStatus(versionWithPrefix, status),
       }))}
       defaultValue={release.versionWithPrefix}
       onChange={setVersion}
-      className="min-w-28"
-      inline
-      label={t('layouts.download.dropdown.version')}
+      className="w-40"
+      inline={true}
     />
   );
 };

diff --git a/components/withDownloadCategories.tsx b/components/withDownloadCategories.tsx
@@ -4,9 +4,11 @@ import type { FC, PropsWithChildren } from 'react';
 import { useClientContext } from '@/hooks/react-server';
 import getReleaseData from '@/next-data/releaseData';
 import { ReleaseProvider } from '@/providers/releaseProvider';
+import type { NodeReleaseStatus } from '@/types';
 import { getDownloadCategory, mapCategoriesToTabs } from '@/util/downloadUtils';
 
 import LinkTabs from './Common/LinkTabs';
+import WithNodeRelease from './withNodeRelease';
 
 const WithDownloadCategories: FC<PropsWithChildren> = async ({ children }) => {
   const t = await getTranslations();
@@ -15,6 +17,10 @@ const WithDownloadCategories: FC<PropsWithChildren> = async ({ children }) => {
   const { pathname } = useClientContext();
   const { page, category, subCategory } = getDownloadCategory(pathname);
 
+  const initialRelease: Array<NodeReleaseStatus> = pathname.includes('current')
+    ? ['Current']
+    : ['Active LTS', 'Maintenance LTS'];
+
   return (
     <LinkTabs
       activeTab={category}
@@ -42,7 +48,13 @@ const WithDownloadCategories: FC<PropsWithChildren> = async ({ children }) => {
         subCategory: subCategory,
       })}
     >
-      <ReleaseProvider releases={releases}>{children}</ReleaseProvider>
+      <WithNodeRelease status={initialRelease}>
+        {({ release }) => (
+          <ReleaseProvider initialRelease={release} releases={releases}>
+            {children}
+          </ReleaseProvider>
+        )}
+      </WithNodeRelease>
     </LinkTabs>
   );
 };

diff --git a/i18n/locales/en.json b/i18n/locales/en.json
@@ -276,8 +276,8 @@
         "source-code": "Source Code"
       },
       "buttons": {
-        "prebuilt": "Download {version} Node.js for {os}",
-        "source": "Download {version} source code"
+        "prebuilt": "Download Node.js {version}",
+        "source": "Download Node.js {version} source"
       },
       "dropdown": {
         "bitness": "Bitness",

diff --git a/pages/en/new-design/download/current.mdx b/pages/en/new-design/download/current.mdx
@@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want.
 ---
 
 <section>
-  I want the <WithNodeRelease status={['Current']}>{({ release }) => <Release.VersionDropdown {...release} />}</WithNodeRelease> version of Node for <Release.OperatingSystemDropdown exclude={["LINUX"]} /> running <Release.BitnessDropdown />
+  I want the <Release.VersionDropdown /> version of Node.js for <Release.OperatingSystemDropdown exclude={["LINUX"]} /> running <Release.BitnessDropdown />
 
   <Release.DownloadButton kind="installer" />
 </section>
 
 <section>
-  <Release.Status /> Version: <Release.Version /> (includes npm and corepack).
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/new-design/download/index.mdx b/pages/en/new-design/download/index.mdx
@@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want.
 ---
 
 <section>
-  I want the <WithNodeRelease status={['Active LTS', 'Maintenance LTS']}>{({ release }) => <Release.VersionDropdown {...release} />}</WithNodeRelease> version of Node for <Release.OperatingSystemDropdown exclude={["LINUX"]} /> running <Release.BitnessDropdown />
+  I want the <Release.VersionDropdown /> version of Node.js for <Release.OperatingSystemDropdown exclude={["LINUX"]} /> running <Release.BitnessDropdown />
 
   <Release.DownloadButton kind="installer" />
 </section>
 
 <section>
-  <Release.Status /> Version: <Release.Version /> (includes npm <Release.NpmVersion />).
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/new-design/download/package-manager/current.mdx b/pages/en/new-design/download/package-manager/current.mdx
@@ -5,12 +5,14 @@ subtitle: Download Node.js the way you want.
 ---
 
 <section>
-  Install Node version <WithNodeRelease status={['Current']}>{({ release }) => <Release.VersionDropdown {...release} />}</WithNodeRelease> on  <Release.OperatingSystemDropdown /> using <Release.PlatformDropdown />
+  Install Node.js <Release.VersionDropdown /> on  <Release.OperatingSystemDropdown /> using <Release.PlatformDropdown />
 
   <Release.ReleaseCodeBox />
 </section>
 
 <section>
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
+
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 
 Learn how to <Release.VerifyingBinariesLink>verify signed SHASUMS</Release.VerifyingBinariesLink>

diff --git a/pages/en/new-design/download/package-manager/index.mdx b/pages/en/new-design/download/package-manager/index.mdx
@@ -5,12 +5,14 @@ subtitle: Download Node.js the way you want.
 ---
 
 <section>
-  Install Node version <WithNodeRelease status={['Active LTS', 'Maintenance LTS']}>{({ release }) => <Release.VersionDropdown {...release} />}</WithNodeRelease> on <Release.OperatingSystemDropdown /> using <Release.PlatformDropdown />
+  Install Node.js <Release.VersionDropdown /> on <Release.OperatingSystemDropdown /> using <Release.PlatformDropdown />
 
   <Release.ReleaseCodeBox />
 </section>
 
 <section>
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
+
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 
 Learn how to <Release.VerifyingBinariesLink>verify signed SHASUMS</Release.VerifyingBinariesLink>

diff --git a/pages/en/new-design/download/prebuilt-binaries/current.mdx b/pages/en/new-design/download/prebuilt-binaries/current.mdx
@@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want.
 ---
 
 <section>
-  I want the <WithNodeRelease status={['Current']}>{({ release }) => <Release.VersionDropdown {...release} />}</WithNodeRelease> version of Node for <Release.OperatingSystemDropdown /> running <Release.BitnessDropdown />
+  I want the <Release.VersionDropdown /> version of Node.js for <Release.OperatingSystemDropdown /> running <Release.BitnessDropdown />
 
   <Release.DownloadButton kind="binary" />
 </section>
 
 <section>
-<Release.Status /> Version: <Release.Version /> (includes npm and corepack).
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/new-design/download/prebuilt-binaries/index.mdx b/pages/en/new-design/download/prebuilt-binaries/index.mdx
@@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want.
 ---
 
 <section>
-  I want the <WithNodeRelease status={['Active LTS', 'Maintenance LTS']}>{({ release }) => <Release.VersionDropdown {...release} />}</WithNodeRelease> version of Node for <Release.OperatingSystemDropdown /> running <Release.BitnessDropdown />
+  I want the <Release.VersionDropdown /> version of Node.js for <Release.OperatingSystemDropdown /> running <Release.BitnessDropdown />
 
   <Release.DownloadButton kind="binary" />
 </section>
 
 <section>
-<Release.Status /> Version: <Release.Version /> (includes npm <Release.NpmVersion />).
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/new-design/download/source-code/current.mdx b/pages/en/new-design/download/source-code/current.mdx
@@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want.
 ---
 
 <section>
-  I want the <WithNodeRelease status={['Current']}>{({ release }) => <Release.VersionDropdown {...release} />}</WithNodeRelease> version of the Node.js source code.
+  I want the <Release.VersionDropdown /> version of the Node.js source code.
 
   <Release.SourceButton kind="source" />
 </section>
 
 <section>
-<Release.Status /> Version: <Release.Version /> (includes npm <Release.NpmVersion />).
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/pages/en/new-design/download/source-code/index.mdx b/pages/en/new-design/download/source-code/index.mdx
@@ -5,13 +5,13 @@ subtitle: Download Node.js the way you want.
 ---
 
 <section>
-  I want the <WithNodeRelease status={['Active LTS', 'Maintenance LTS']}>{({ release }) => <Release.VersionDropdown {...release} />}</WithNodeRelease> version of the Node.js source code.
+  I want the <Release.VersionDropdown /> version of the Node.js source code.
 
   <Release.SourceButton kind="source" />
 </section>
 
 <section>
-<Release.Status /> Version: <Release.Version /> (includes npm <Release.NpmVersion />).
+Node.js includes <LinkWithArrow href="https://npmjs.com">npm</LinkWithArrow> (<Release.NpmVersion />) and corepack.
 
 Read the blog post for <Release.BlogPostLink>this version</Release.BlogPostLink>
 

diff --git a/providers/releaseProvider.tsx b/providers/releaseProvider.tsx
@@ -37,6 +37,7 @@ export const ReleaseContext = createContext<ReleaseContextType>({
 export const ReleaseProvider: FC<PropsWithChildren<ReleaseProviderProps>> = ({
   children,
   releases,
+  initialRelease,
 }) => {
   const getReleaseFromVersion = (version: string) =>
     releases.find(({ versionWithPrefix }) => versionWithPrefix === version) ??
@@ -60,6 +61,7 @@ export const ReleaseProvider: FC<PropsWithChildren<ReleaseProviderProps>> = ({
   const [state, dispatch] = useReducer(releaseReducer, {
     ...initialState,
     releases: releases,
+    release: initialRelease,
   });
 
   const actions = useMemo(() => createDispatchActions(dispatch), [dispatch]);

diff --git a/types/release.ts b/types/release.ts
@@ -33,4 +33,5 @@ export interface ReleaseContextType
 export interface ReleaseProviderProps {
   children: ReactNode;
   releases: Array<NodeRelease>;
+  initialRelease: NodeRelease;
 }