nodejs · benhalverson · May 3, 2020 · Apr 30, 2020 · Apr 30, 2020 · Apr 30, 2020
diff --git a/src/components/Hero/__tests__/__snapshots__/hero.test.tsx.snap b/src/components/Hero/__tests__/__snapshots__/hero.test.tsx.snap
@@ -16,26 +16,22 @@ exports[`Hero component renders correctly 1`] = `
     <div
       className="download-lts-container"
     >
-      <button
-        className="download-lts-cta t-body1"
-        type="button"
+      <a
+        href="https://nodejs.org/dist//node-.tar.gz"
       >
-        Download Node (LTS)
-      </button>
+        <button
+          className="download-lts-cta t-body1"
+          type="button"
+        >
+          Download Node (LTS)
+        </button>
+      </a>
       <p
         className="links t-caption"
       >
-        Version 10.15.3
-         - 
-        <a
-          href="/download"
-        >
-          What’s new
-        </a>
-         /
-
+
         <a
-          href="/download"
+          href="https://nodejs.org/dist//node-.tar.gz"
         >
           Get Current
         </a>

diff --git a/src/components/Hero/index.tsx b/src/components/Hero/index.tsx
@@ -1,34 +1,83 @@
 import React from 'react';
 import { Link } from 'gatsby';
 
+import { detectOS, UserOS } from '../../util/detectOS';
+import { useReleaseHistory, ReleaseData } from '../../hooks/useReleaseHistory';
+
 interface Props {
   title: string;
   subTitle: string;
 }
 
-const NodeVersion = 'Version 10.15.3';
-
-const Hero = ({ title, subTitle }: Props): JSX.Element => (
-  <div className="home-page-hero">
-    <h1>{title}</h1>
-    <h2 className="sub-title t-subheading">{subTitle}</h2>
-    <div className="btn-ctas">
-      <div className="download-lts-container">
-        <button className="download-lts-cta t-body1" type="button">
-          Download Node (LTS)
-        </button>
-        <p className="links t-caption">
-          {NodeVersion} - <Link to="/download">What’s new</Link> /{' '}
-          <Link to="/download">Get Current</Link>
-        </p>
+function downloadUrlByOS(userOS: UserOS, version: string): string {
+  const baseURL = `https://nodejs.org/dist/${version}`;
+
+  if (userOS === UserOS.MOBILE) {
+    return baseURL;
+  }
+
+  if (userOS === UserOS.MAC) {
+    return `${baseURL}/node-${version}.pkg`;
+  }
+
+  if (userOS === UserOS.WIN) {
+    if (
+      navigator.appVersion.indexOf('WOW64') !== -1 ||
+      navigator.appVersion.indexOf('Win64') !== -1
+    ) {
+      return `${baseURL}/node-${version}-x64.msi`;
+    }
+
+    return `${baseURL}/node-${version}-x86.msi`;
+  }
+
+  return `${baseURL}/node-${version}.tar.gz`;
+}
+
+const Hero = ({ title, subTitle }: Props): JSX.Element => {
+  const userOS = detectOS();
+  const [currentRelease, ...releases] = useReleaseHistory();
+
+  // find first lts version (first found is last LTS)
+  const lastLTSRelease = releases.find(
+    (release: ReleaseData): boolean => release.lts
+  );
+
+  const ltsVersionUrl = downloadUrlByOS(
+    userOS,
+    lastLTSRelease ? lastLTSRelease.version : ''
+  );
+  const currentVersionUrl = downloadUrlByOS(
+    userOS,
+    currentRelease ? currentRelease.version : ''
+  );
+
+  return (
+    <div className="home-page-hero">
+      <h1>{title}</h1>
+      <h2 className="sub-title t-subheading">{subTitle}</h2>
+      <div className="btn-ctas">
+        <div className="download-lts-container">
+          <a href={ltsVersionUrl}>
+            <button className="download-lts-cta t-body1" type="button">
+              Download Node (LTS)
+            </button>
+          </a>
+          <p className="links t-caption">
+            {lastLTSRelease
+              ? `Version ${lastLTSRelease.version.substr(1)} - `
+              : ''}
+            <a href={currentVersionUrl}>Get Current</a>
+          </p>
+        </div>
+        <Link to="/learn">
+          <button className="learn-cta t-body1" type="button">
+            Learn Node
+          </button>
+        </Link>
       </div>
-      <Link to="/learn">
-        <button className="learn-cta t-body1" type="button">
-          Learn Node
-        </button>
-      </Link>
     </div>
-  </div>
-);
+  );
+};
 
 export default Hero;
diff --git a/src/components/ReleaseCards/index.tsx b/src/components/ReleaseCards/index.tsx
@@ -13,8 +13,9 @@ export default function ReleaseCards({ line }: Props): JSX.Element {
         <i className="material-icons">cloud</i>
         <p>Windows Installer</p>
         <a
-          href={`https://nodejs.org/dist/${fileName}/node-${line &&
-            line.version}-x86.msi`}
+          href={`https://nodejs.org/dist/${fileName}/node-${
+            line && line.version
+          }-x86.msi`}
         >
           node-
           {line && line.version}
@@ -25,8 +26,9 @@ export default function ReleaseCards({ line }: Props): JSX.Element {
         <i className="material-icons">cloud</i>
         <p>Mac Installer</p>
         <a
-          href={`https://nodejs.org/dist/${fileName}/node-${line &&
-            line.version}.pkg`}
+          href={`https://nodejs.org/dist/${fileName}/node-${
+            line && line.version
+          }.pkg`}
         >
           node-
           {line && line.version}
@@ -37,8 +39,9 @@ export default function ReleaseCards({ line }: Props): JSX.Element {
         <i className="material-icons">cloud</i>
         <p>Source Code</p>
         <a
-          href={`https://nodejs.org/dist/${fileName}/node-${line &&
-            line.version}.tar.gz`}
+          href={`https://nodejs.org/dist/${fileName}/node-${
+            line && line.version
+          }.tar.gz`}
         >
           node-
           {line && line.version}

diff --git a/src/pages/docs.tsx b/src/pages/docs.tsx
@@ -57,9 +57,7 @@ function renderArticleOverview(
       </a>
       {children.length ? (
         <ul className="api-key__section">{children}</ul>
-      ) : (
-        undefined
-      )}
+      ) : undefined}
     </li>
   );
 

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -62,7 +62,7 @@
     color: var(--color-text-secondary);
     margin: var(--space-08) 0 0 0;
     position: absolute;
-    left: calc(var(--space-16) * -1);
+    left: var(--space-16);
   }
 }
 

diff --git a/src/util/detectOS.ts b/src/util/detectOS.ts
@@ -14,7 +14,7 @@ export function detectOS(): UserOS {
     if (navigator.appVersion.indexOf('Mac') !== -1) OS = UserOS.MAC;
     if (navigator.appVersion.indexOf('X11') !== -1) OS = UserOS.UNIX;
     if (navigator.appVersion.indexOf('Linux') !== -1) OS = UserOS.LINUX;
-    // not currently checking for mobile devices
+    if (navigator.appVersion.indexOf('Mobi') !== -1) OS = UserOS.MOBILE;
   }
   return OS;
 }