Revert "feat: redesigned home page with esp and updated downloads page (#7875)"

This reverts commit 8d29e0f.

Author: anonrig

apps/site/components/Downloads/Release/ReleaseCodeBox.tsx

@@ -38,7 +38,6 @@ const parseSnippet = (s: string, releaseContext: ReleaseContextType) => {
 
 const ReleaseCodeBox: FC = () => {
   const { snippets } = useContext(ReleasesContext);
-
   const { installMethod, os, packageManager, release } =
     useContext(ReleaseContext);
 
@@ -127,18 +126,6 @@ const ReleaseCodeBox: FC = () => {
         </AlertBox>
       )}
 
-      {release.status === 'LTS' && (
-        <AlertBox
-          title={t('components.common.alertBox.info')}
-          level="info"
-          size="small"
-        >
-          {t.rich('layouts.download.codeBox.ltsVersionFeaturesNotice', {
-            link: text => <Link href="/download/current">{text}</Link>,
-          })}
-        </AlertBox>
-      )}
-
       {!currentPlatform || currentPlatform.recommended || (
         <AlertBox
           title={t('components.common.alertBox.info')}

apps/site/components/Downloads/Release/VersionDropdown.tsx

@@ -1,11 +1,10 @@
 'use client';
 
 import Select from '@node-core/ui-components/Common/Select';
-import { useLocale, useTranslations } from 'next-intl';
+import { useTranslations } from 'next-intl';
 import type { FC } from 'react';
 import { useContext } from 'react';
 
-import { redirect, usePathname } from '#site/navigation';
 import {
   ReleaseContext,
   ReleasesContext,
@@ -27,28 +26,6 @@ const VersionDropdown: FC = () => {
   const { releases } = useContext(ReleasesContext);
   const { release, setVersion } = useContext(ReleaseContext);
   const t = useTranslations();
-  const locale = useLocale();
-  const pathname = usePathname();
-
-  // Allows us to keep the route semantically correct to what the user should expect
-  // from the /current and non /current routes.
-  const setVersionOrNavigate = (version: string) => {
-    const release = releases.find(
-      ({ versionWithPrefix }) => versionWithPrefix === version
-    );
-
-    if (release?.status === 'LTS' && pathname.includes('current')) {
-      redirect({ href: '/download', locale });
-      return;
-    }
-
-    if (release?.status === 'Current' && !pathname.includes('current')) {
-      redirect({ href: '/download/current', locale });
-      return;
-    }
-
-    setVersion(version);
-  };
 
   return (
     <Select
@@ -58,7 +35,7 @@ const VersionDropdown: FC = () => {
         label: getDropDownStatus(versionWithPrefix, status),
       }))}
       defaultValue={release.versionWithPrefix}
-      onChange={setVersionOrNavigate}
+      onChange={setVersion}
       className="min-w-36"
       inline={true}
     />

apps/site/components/Downloads/ReleaseModal/index.tsx

@@ -5,7 +5,6 @@ import type { FC } from 'react';
 
 import { MinorReleasesTable } from '#site/components/Downloads/MinorReleasesTable';
 import { ReleaseOverview } from '#site/components/Downloads/ReleaseOverview';
-import Link from '#site/components/Link';
 import LinkWithArrow from '#site/components/LinkWithArrow';
 import type { NodeRelease } from '#site/types';
 
@@ -39,21 +38,7 @@ const ReleaseModal: FC<ReleaseModalProps> = ({
           level="warning"
           size="small"
         >
-          {t.rich('components.releaseModal.unsupportedVersionWarning', {
-            link: text => <Link href="/about/previous-releases/">{text}</Link>,
-          })}
-        </AlertBox>
-      )}
-
-      {release.status === 'LTS' && (
-        <AlertBox
-          title={t('components.common.alertBox.info')}
-          level="info"
-          size="small"
-        >
-          {t.rich('components.releaseModal.ltsVersionFeaturesNotice', {
-            link: text => <Link href="/download/current">{text}</Link>,
-          })}
+          {t('components.releaseModal.unsupportedVersionWarning')}
         </AlertBox>
       )}
 

apps/site/layouts/GlowingBackdrop.tsx

@@ -16,7 +16,6 @@ const GlowingBackdropLayout: FC<
 > = ({ kind = 'home', children }) => (
   <>
     <WithNavBar />
-
     <div className={styles.centeredLayout}>
       <GlowingBackdrop />
 

apps/site/layouts/layouts.module.css

@@ -36,7 +36,7 @@
   section {
     &:nth-of-type(1) {
       @apply flex
-        max-w-[400px]
+        max-w-[500px]
         flex-[1_0]
         flex-col
         gap-8;
@@ -56,7 +56,7 @@
           @apply max-xs:text-xs
             text-center
             text-sm
-            text-neutral-600
+            text-neutral-800
             dark:text-neutral-400;
 
           sup {

apps/site/pages/en/index.mdx

@@ -14,19 +14,29 @@ layout: home
 
   </div>
 
-  <div className="flex gap-4">
-
-    <div className="flex flex-col gap-2">
-      <Button kind="special" className="!hidden dark:!block" href="/download">Install Node.js</Button>
-
-      <Button kind="primary" className="!block dark:!hidden" href="/download">Install Node.js</Button>
-
-      <Button kind="secondary" className="!block" href="https://www.herodevs.com/support/node-nes">
-        <span>Get security support</span>
-        <br />
-        <small className="!text-xs">for Node.js 18 and below</small>
-      </Button>
-    </div>
+  <div>
+    <WithNodeRelease status={['LTS']}>
+      {({ release }) => (
+        <>
+          <DownloadButton release={release}>Download Node.js (LTS)</DownloadButton>
+          <small>
+            Downloads Node.js <b>{release.versionWithPrefix}</b>
+            <sup title="Downloads a Node.js installer for your current platform">1</sup> with long-term support.
+            Node.js can also be installed via <Link href="/download">version managers</Link>.
+          </small>
+        </>
+      )}
+    </WithNodeRelease>
+
+    <WithNodeRelease status={['Current']}>
+      {({ release }) => (
+        <small>
+          Want new features sooner?
+          Get <b>Node.js <DownloadLink release={release}>{release.versionWithPrefix}</DownloadLink></b>
+          <sup title="Downloads a Node.js installer for your current platform">1</sup> instead.
+        </small>
+      )}
+    </WithNodeRelease>
 
   </div>
 </section>

apps/site/pages/es/index.mdx

@@ -0,0 +1,135 @@
+---
+title: Ejecuta JavaScript en cualquier parte
+layout: home
+---
+
+<section>
+  <WithBadgeGroup section="index" />
+
+  <div>
+    <h1 className="special">Ejecuta JavaScript en cualquier parte</h1>
+
+    Node.js® es un entorno de ejecución de JavaScript multiplataforma,
+    de código abierto y gratuito que permite a los desarrolladores crear servidores,
+    aplicaciones web, herramientas de línea de comando y scripts.
+
+  </div>
+
+  <div>
+    <WithNodeRelease status={['LTS']}>
+      {({ release }) => (
+        <>
+          <DownloadButton release={release}>Descargar Node.js (LTS)</DownloadButton>
+          <small>
+            Descarga Node.js <b>{release.versionWithPrefix}</b>
+            <sup title="Descarga un instalador de Node.js para tu plataforma">1</sup> con soporte a largo plazo.
+            Node.js también puede ser instalado a través de <Link href="/download">gestores de versiones</Link>.
+          </small>
+        </>
+      )}
+    </WithNodeRelease>
+
+    <WithNodeRelease status={['Current']}>
+      {({ release }) => (
+        <small>
+          ¿Quieres nuevas funciones más pronto?
+          Consigue<b>Node.js <DownloadLink release={release}>{release.versionWithPrefix}</DownloadLink></b>
+          <sup title="Downloads a Node.js installer for your current platform">1</sup> en vez.
+        </small>
+      )}
+    </WithNodeRelease>
+
+  </div>
+</section>
+
+<section>
+  <div>
+    ```js displayName="Create an HTTP Server"
+    // server.mjs
+    import { createServer } from 'node:http';
+
+    const server = createServer((req, res) => {
+      res.writeHead(200, { 'Content-Type': 'text/plain' });
+      res.end('Hello World!\n');
+    });
+
+    // starts a simple http server locally on port 3000
+    server.listen(3000, '127.0.0.1', () => {
+      console.log('Listening on 127.0.0.1:3000');
+    });
+
+    // run with `node server.mjs`
+    ```
+
+    ```js displayName="Write Tests"
+    // tests.mjs
+    import assert from 'node:assert';
+    import test from 'node:test';
+
+    test('that 1 is equal 1', () => {
+      assert.strictEqual(1, 1);
+    });
+
+    test('that throws as 1 is not equal 2', () => {
+      // throws an exception because 1 != 2
+      assert.strictEqual(1, 2);
+    });
+
+    // run with `node tests.mjs`
+    ```
+
+    ```js displayName="Read and Hash a File"
+    // crypto.mjs
+    import { createHash } from 'node:crypto';
+    import { readFile } from 'node:fs/promises';
+
+    const hasher = createHash('sha1');
+
+    hasher.setEncoding('hex');
+    // ensure you have a `package.json` file for this test!
+    hasher.write(await readFile('package.json'));
+    hasher.end();
+
+    const fileHash = hasher.read();
+
+    // run with `node crypto.mjs`
+    ```
+
+    ```js displayName="Streams Pipeline"
+    // streams.mjs
+    import { createReadStream, createWriteStream } from 'node:fs';
+    import { pipeline } from 'node:stream/promises';
+    import { createGzip } from 'node:zlib';
+
+    // ensure you have a `package.json` file for this test!
+    await pipeline(
+      createReadStream('package.json'),
+      createGzip(),
+      createWriteStream('package.json.gz')
+    );
+
+    // run with `node streams.mjs`
+    ```
+
+    ```js displayName="Work with Threads"
+    // threads.mjs
+    import { Worker, isMainThread,
+      workerData, parentPort } from 'node:worker_threads';
+
+    if (isMainThread) {
+      const data = 'some data';
+      const worker = new Worker(import.meta.filename, { workerData: data });
+      worker.on('message', msg => console.log('Reply from Thread:', msg));
+    } else {
+      const source = workerData;
+      parentPort.postMessage(btoa(source.toUpperCase()));
+    }
+
+    // run with `node threads.mjs`
+    ```
+
+  </div>
+
+Aprenda más sobre lo que Node.js puede ofrecer con nuestros [Materiales de aprendizaje](/learn).
+
+</section>