Add Firmware Page

website/docusaurus.config.js

@@ -32,6 +32,11 @@ const config = {
         srcDark: "img/meshtastic-design/logo/svg/Mesh_Logo_White.svg",
       },
       items: [
+        {
+          label: "Firmware",
+          to: "firmware",
+          activeBasePath: "firmware",
+        },
         {
           label: "Showcase",
           to: "showcase",

website/src/pages/firmware/_components/FirmwareCard.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+
+import { Endpoints } from '@octokit/types';
+
+export interface FirmwareCardProps {
+  variant: string;
+  description: string;
+  firmware: Endpoints["GET /repos/{owner}/{repo}/releases"]["response"]["data"];
+}
+
+export const FirmwareCard = ({
+  variant,
+  description,
+  firmware,
+}: FirmwareCardProps): JSX.Element => {
+  return (
+    <div className="card">
+      <div
+        className="card__header"
+        style={{ display: "flex", justifyContent: "space-between" }}
+      >
+        <h3>{variant}</h3>
+        {firmware?.length && (
+          <a href={firmware[0].html_url}>{firmware[0].name}</a>
+        )}
+      </div>
+      <div className="card__body">
+        <p>{description}</p>
+      </div>
+      <div className="card__footer">
+        {firmware?.length ? (
+          <>
+            <a
+              href={firmware[0].assets[1]?.browser_download_url}
+              className="button button--secondary button--block"
+            >
+              Download
+            </a>
+            <div className="margin-top--sm">
+              <h3>Older versions</h3>
+              {firmware.slice(1, 6).map((release) => {
+                return (
+                  <div key={release.id}>
+                    <a href={release.assets[1]?.browser_download_url}>
+                      {release.name}
+                    </a>
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        ) : (
+          <button disabled className="button button--secondary button--block">
+            Loading...
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

website/src/pages/firmware/index.tsx

@@ -1,8 +1,33 @@
 import React from 'react';
 
+import { Octokit } from '@octokit/rest';
+import { Endpoints } from '@octokit/types';
 import Layout from '@theme/Layout';
 
+import { FirmwareCard } from './_components/FirmwareCard';
+
 const Firmware = (): JSX.Element => {
+  const gh = new Octokit();
+
+  const [releases, setReleases] =
+    React.useState<
+      Endpoints["GET /repos/{owner}/{repo}/releases"]["response"]
+    >();
+
+  gh.repos
+    .listReleases({
+      owner: "meshtastic",
+      repo: "meshtastic-device",
+    })
+    .then((response) => {
+      if (response.data) {
+        setReleases(response);
+      }
+    });
+
+  const beta = releases?.data.filter((release) => release.prerelease === false);
+
+  const alpha = releases?.data.filter((release) => release.prerelease === true);
   return (
     <Layout
       title="Firmware"
@@ -10,16 +35,6 @@ const Firmware = (): JSX.Element => {
     >
       <main className="margin-vert--xl">
         <div className="container">
-          {/*  */}
-          <div
-            className="margin-bottom--sm"
-            style={{
-              display: "flex",
-              alignItems: "center",
-            }}
-          >
-            <h2>Stable</h2>
-          </div>
           <ul
             style={{
               position: "relative",
@@ -30,38 +45,16 @@ const Firmware = (): JSX.Element => {
             }}
           >
             {/*  */}
-            <div className="card">
+            <FirmwareCard
-              <div className="card__header">
+              variant="Beta"
-                <h3>Beta</h3>
+              description="Tested feature set. For those who want stability."
-              </div>
+              firmware={beta}
-              <div className="card__body">
+            />
-                <p>Tested feature set. For those who want stability.</p>
+            <FirmwareCard
-              </div>
+              variant="Alpha"
-              <div className="card__footer">
+              description="Upcomming changes for testing. For those who want new features."
-                <button className="button button--secondary button--block">
+              firmware={alpha}
-                  See All
+            />
-                </button>
-              </div>
-            </div>
-
-            {/*  */}
-            {/*  */}
-            <div className="card">
-              <div className="card__header">
-                <h3>Alpha</h3>
-              </div>
-              <div className="card__body">
-                <p>
-                  Upcomming changes for testing. For those who want new
-                  features.
-                </p>
-              </div>
-              <div className="card__footer">
-                <button className="button button--secondary button--block">
-                  See All
-                </button>
-              </div>
-            </div>
 
             {/*  */}
             {/*  */}
@@ -75,10 +68,13 @@ const Firmware = (): JSX.Element => {
                   things.
                 </p>
               </div>
-              <div className="card__footer">
+              <div className="card__footer" style={{ marginTop: "1rem" }}>
-                <button className="button button--secondary button--block">
+                <a
-                  See All
+                  href="https://nightly.link/meshtastic/meshtastic-device/workflows/main/master/built.zip"
-                </button>
+                  className="button button--secondary button--block"
+                >
+                  Download
+                </a>
               </div>
             </div>