nodejs · amiller-gh · Sep 27, 2019 · Sep 16, 2019 · Sep 16, 2019 · Sep 16, 2019
diff --git a/src/components/article.tsx b/src/components/article.tsx
@@ -27,7 +27,7 @@ const Article = ({
   <article className="article-reader">
     <h1 className="article-reader__headline">{title}</h1>
     <TOC heading="TABLE OF CONTENTS" tableOfContents={tableOfContents} />
-    {/* eslint-disable react/no-danger */}
+    {/* eslint-disable-next-line react/no-danger */}
     <div dangerouslySetInnerHTML={{ __html: html }} />
     <AuthorsList authors={authors} />
     <EditLink relativePath={relativePath} />

diff --git a/src/components/release-cards.tsx b/src/components/release-cards.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { ReleaseData } from '../hooks/useReleaseHistory';
+
+interface Props {
+  line?: ReleaseData;
+}
+
+export default function ReleaseCards({ line }: Props): JSX.Element {
+  const fileName = line && line.version;
+  return (
+    <div>
+      <div>
+        <i className="material-icons">cloud</i>
+        <p>Windows Installer</p>
+        <a
+          href={`https://nodejs.org/dist/${fileName}/node-${line &&
+            line.version}-x86.msi`}
+        >
+          node-{line && line.version}.x86.msi
+        </a>
+      </div>
+      <div>
+        <i className="material-icons">cloud</i>
+        <p>Mac Installer</p>
+        <a
+          href={`https://nodejs.org/dist/${fileName}/node-${line &&
+            line.version}.pkg`}
+        >
+          node-{line && line.version}.pkg
+        </a>
+      </div>
+      <div>
+        <i className="material-icons">cloud</i>
+        <p>Source Code</p>
+        <a
+          href={`https://nodejs.org/dist/${fileName}/node-${line &&
+            line.version}.tar.gz`}
+        >
+          node-{line && line.version}.tar.gz
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/release-toggle.tsx b/src/components/release-toggle.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+interface Props {
+  onToggle: Function;
+  selected: boolean;
+}
+
+export default function ReleaseToggle({
+  onToggle,
+  selected,
+}: Props): JSX.Element {
+  const handleClick = (): void => {
+    onToggle(!selected);
+  };
+
+  const id = Math.random() * (100000 - 1) + 1;
+  return (
+    <label htmlFor={`release-selector-${id}`}>
+      <input
+        id={`release-selector-${id}`}
+        type="checkbox"
+        checked={selected}
+        onChange={handleClick}
+      ></input>
+      {selected ? 'lts' : 'current'}
+    </label>
+  );
+}
diff --git a/src/pages/download.tsx b/src/pages/download.tsx
@@ -1,19 +1,39 @@
-import React from 'react';
-import { useReleaseHistory } from '../hooks';
+import React, { useState } from 'react';
+import { useReleaseHistory } from '../hooks/useReleaseHistory';
 import Hero from '../components/hero';
 import Layout from '../components/layout';
 import ReleaseTable from '../components/release-table';
+import ReleaseToggle from '../components/release-toggle';
+import ReleaseCards from '../components/release-cards';
+
+import { detectOS } from '../util/detectOS';
 
 export default function DownloadPage(): JSX.Element {
-  const releaseHistory = useReleaseHistory().slice(0, 25);
+  const releaseHistory = useReleaseHistory().slice(0, 50);
+  const [ltsSelected, setLtsSelected] = useState(true);
+
+  const userOS = detectOS();
   const title = 'Download Node.js';
   const description = 'Come get me!';
 
+  const lts = releaseHistory.find((release): boolean => release && release.lts);
+  const current = releaseHistory.find(
+    (release): boolean => release && !release.lts
+  );
+
+  const selectedLine = ltsSelected ? lts : current;
+
   return (
     <Layout title={title} description={description}>
       <Hero title={title} />
       <article style={{ width: '100%' }} className="article-reader">
-        <p>Welcome to the Downloads Page!</p>
+        <p>
+          Download the Node.js source code, a pre-built installer for your
+          platform, or install via package manager.
+        </p>
+        <p>You are currently on a {userOS} machine</p>
+        <ReleaseToggle selected={ltsSelected} onToggle={setLtsSelected} />
+        <ReleaseCards line={selectedLine} />
         <ReleaseTable releases={releaseHistory} />
       </article>
     </Layout>

diff --git a/src/util/detectOS.ts b/src/util/detectOS.ts
@@ -0,0 +1,20 @@
+export enum UserOS {
+  MAC = 'MAC',
+  WIN = 'WIN',
+  UNIX = 'UNIX',
+  LINUX = 'LINUX',
+  MOBILE = 'MOBILE',
+  UNKNOWN = 'UNKNOWN',
+}
+
+export function detectOS(): UserOS {
+  let OS = UserOS.UNKNOWN;
+  if (typeof navigator !== `undefined`) {
+    if (navigator.appVersion.indexOf('Win') !== -1) OS = UserOS.WIN;
+    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
+  }
+  return OS;
+}