mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2024-12-25 05:34:11 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Add Firmware Page

Browse source
This commit is contained in:
Sacha Weatherstone 2021-12-07 22:47:01 +11:00
parent c1aa5a0441
commit 201321dad0
3 changed files with 107 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
website/docusaurus.config.js
View file

@ -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",

60
website/src/pages/firmware/_components/FirmwareCard.tsx Normal file
View file

@ -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>
);
};

88
website/src/pages/firmware/index.tsx
View file

@ -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">
<div className="card__header">
<h3>Beta</h3>
</div>
<div className="card__body">
<p>Tested feature set. For those who want stability.</p>
</div>
<div className="card__footer">
<button className="button button--secondary button--block">
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>
<FirmwareCard
variant="Beta"
description="Tested feature set. For those who want stability."
firmware={beta}
/>
<FirmwareCard
variant="Alpha"
description="Upcomming changes for testing. For those who want new features."
firmware={alpha}
/>
{/* */}
{/* */}
@ -75,10 +68,13 @@ const Firmware = (): JSX.Element => {
things.
</p>
</div>
<div className="card__footer">
<button className="button button--secondary button--block">
See All
</button>
<div className="card__footer" style={{ marginTop: "1rem" }}>
<a
href="https://nightly.link/meshtastic/meshtastic-device/workflows/main/master/built.zip"
className="button button--secondary button--block"
>
Download
</a>
</div>
</div>