added cards

src/pages/downloads/_components/DownloadCard.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+
+export interface releaseCardProps {
+  client: string;
+  imgUrl: string;
+  url: string;
+  notes: string;
+  buttonText: string;
+}
+
+export const DownloadCard = ({
+  client,
+  imgUrl,
+  url,
+  notes,
+  buttonText,
+}: releaseCardProps): JSX.Element => {
+
+  const button = React.createElement(
+    'a',
+    {href: url, className: "button button--secondary button--block"},
+    buttonText
+  )
+  const img = React.createElement(
+    'img',
+    {style: {height: '4rem'}, src: imgUrl, href: url},
+    null
+  )
+
+  const anchorImg = <a href={url}>{buttonText ? null : img}</a>
+
+  return (
+    <div className="card">
+      <div
+        className="card__header"
+        style={{ display: "flex", justifyContent: "space-between" }}
+      >
+        <h3>{client}</h3>
+      </div>
+      <div
+        className="card__body"
+        style={{ display: "flex", justifyContent: "center"}}
+      >
+        {buttonText ? button : anchorImg}
+      </div>
+      <div className="card__footer">
+        {notes ? notes : null}
+      </div>
+    </div>
+  );
+};
+
+export const PlaceholderFirmwareCard = (): JSX.Element => {
+  return (
+    <div
+      className="card"
+      style={{
+        width: "100%",
+        animation: "pulse 2s infinite",
+        transform: "scale(1)",
+        display: "flex",
+        gap: "1rem",
+        padding: "1rem",
+      }}
+    >
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          marginBottom: "1rem",
+        }}
+      >
+        <div
+          style={{
+            borderRadius: "0.4rem",
+            backgroundColor: "gray",
+            height: "2rem",
+            width: "8rem",
+          }}
+        />
+        <div
+          style={{
+            borderRadius: "0.4rem",
+            backgroundColor: "gray",
+            marginTop: "1rem",
+            height: "1rem",
+            width: "8rem",
+          }}
+        />
+      </div>
+      <div
+        className="card__body"
+        style={{
+          borderRadius: "0.4rem",
+          backgroundColor: "gray",
+          height: "3rem",
+          display: "flex",
+          jusifyContent: "center",
+          alignItems: "center",
+        }}
+      />
+      <a className="button disabled button--primary button--block">&nbsp;</a>
+      <div
+        style={{
+          borderRadius: "0.4rem",
+          backgroundColor: "gray",
+          width: "8rem",
+          height: "2rem",
+        }}
+      />
+      <div
+        style={{
+          borderRadius: "0.4rem",
+          backgroundColor: "gray",
+          width: "11rem",
+          height: "1rem",
+        }}
+      />
+      <div
+        style={{
+          borderRadius: "0.4rem",
+          backgroundColor: "gray",
+          width: "9rem",
+          height: "1rem",
+        }}
+      />
+      <div
+        style={{
+          borderRadius: "0.4rem",
+          backgroundColor: "gray",
+          width: "13rem",
+          height: "1rem",
+        }}
+      />
+      <div
+        style={{
+          borderRadius: "0.4rem",
+          backgroundColor: "gray",
+          width: "11rem",
+          height: "1rem",
+        }}
+      />
+    </div>
+  );
+};

src/pages/downloads/index.tsx

@@ -4,6 +4,7 @@ import useSWR from 'swr';
 
 // import { Endpoints } from '@octokit/types';
 import Layout from '@theme/Layout';
+import CodeBlock from '@theme/CodeBlock';
 
 import { Release } from '../../utils/github';
 import { fetcher } from '../../utils/swr';
@@ -12,6 +13,7 @@ import {
   PlaceholderFirmwareCard,
 } from './_components/FirmwareCard';
 import { HeaderText } from './_components/HeaderText'
+import { DownloadCard } from './_components/DownloadCard'
 
 const Firmware = (): JSX.Element => {
   const { data, error } = useSWR<Release[]>(
@@ -38,7 +40,21 @@ const Firmware = (): JSX.Element => {
           <HeaderText
             type="h2"
             text="Install Meshtastic"
-            link=""
+            link="install-meshtastic"
+          />
+          <DownloadCard
+            client="Meshtastic Flasher"
+            buttonText="Download Meshtastic Flasher"
+            url="https://github.com/meshtastic/Meshtastic-gui-installer/releases/latest"
+            notes={[
+              "To download using ", <code>pip</code>, " use the following:",
+              <CodeBlock className="language-bash" title="Install meshtastic-flasher">
+                {"pip install meshtastic-flasher"}
+              </CodeBlock>,
+              <CodeBlock className="language-bash" title="Running meshtastic-flasher">
+                {"meshtastic-flasher"}
+              </CodeBlock>,
+            ]}
           />
         </div>
         <div className="container">
@@ -47,6 +63,28 @@ const Firmware = (): JSX.Element => {
             text="Mobile Downloads"
             link="mobile-downloads"
           />
+          <ul
+            style={{
+              position: "relative",
+              display: "grid",
+              gap: "1.5rem",
+              gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+              paddingLeft: "0",
+            }}
+          >
+            <DownloadCard
+              client="Android"
+              imgUrl="https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png"
+              url="https://play.google.com/store/apps/details?id=com.geeksville.mesh&referrer=utm_source=downloads-page"
+              notes={["To sideload, ",<a href="https://github.com/meshtastic/Meshtastic-Android/releases/latest" rel="noreferrer" target="_blank">download the latest .apk</a>," from Github", ]}
+            />
+            <DownloadCard
+              client="iOS"
+              url="https://testflight.apple.com/join/c8nNl8q1"
+              buttonText="Download on TestFlight"
+              notes="Currently only available in TestFlight"
+            />
+          </ul>
         </div>
         <div className="container">
           <HeaderText