Merge pull request #229 from jfirwin/downloads-page

Downloads page
This commit is contained in:
Sacha Weatherstone 2022-02-07 08:33:37 +11:00 committed by GitHub
commit 25fd81ae74
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 310 additions and 93 deletions

View file

@ -52,7 +52,7 @@ values={[
### Download Latest Firmware ### Download Latest Firmware
Firmware can be downloaded from the [Firmware](/firmware) page. Your initial installation has to happen over USB from your Mac, Windows, or Linux PC. Once our software is installed, all future software updates happen over Bluetooth from your phone. Firmware can be downloaded from the [Downloads](/downloads) page. Your initial installation has to happen over USB from your Mac, Windows, or Linux PC. Once our software is installed, all future software updates happen over Bluetooth from your phone.
:::note :::note
The [T-Beam 0.7](/docs/hardware/supported/tbeam#t-beam---v07) board is an earlier version of the T-Beam board, and due to changes in the design in subsequent iterations this board uses a specific firmware file different from the other T-Beam boards. The [T-Beam 0.7](/docs/hardware/supported/tbeam#t-beam---v07) board is an earlier version of the T-Beam board, and due to changes in the design in subsequent iterations this board uses a specific firmware file different from the other T-Beam boards.

View file

@ -66,7 +66,7 @@ Please ensure that you have updated the bootloader to the latest version using t
## Download Latest Firmware ## Download Latest Firmware
Firmware can be downloaded from the [Firmware](/firmware) page. Your initial installation has to happen over USB from your Mac, Windows or Linux PC. Once our software is installed, all future software updates happen over Bluetooth from your phone. Firmware can be downloaded from the [Downloads](/downloads) page. Your initial installation has to happen over USB from your Mac, Windows or Linux PC. Once our software is installed, all future software updates happen over Bluetooth from your phone.
## Install/Update Firmware ## Install/Update Firmware

View file

@ -27,7 +27,7 @@ Make sure not to power the radio on without first attaching the antenna! You cou
## Download Firmware ## Download Firmware
Firmware can be downloaded from the [Firmware](/firmware) page. Your initial installation has to happen over USB from your Mac, Windows, or Linux PC. Once our software is installed, all future software updates happen over Bluetooth from your phone. Firmware can be downloaded from the [Downloads](/downloads) page. Your initial installation has to happen over USB from your Mac, Windows, or Linux PC. Once our software is installed, all future software updates happen over Bluetooth from your phone.
## Flashing Firmware ## Flashing Firmware

View file

@ -10,6 +10,7 @@ import TabItem from '@theme/TabItem';
Install Meshtastic Flasher by either [downloading the executable file](https://github.com/meshtastic/Meshtastic-gui-installer/releases) or installing using `pip`. The following operating systems are: Windows, Mac, and Ubuntu. Install Meshtastic Flasher by either [downloading the executable file](https://github.com/meshtastic/Meshtastic-gui-installer/releases) or installing using `pip`. The following operating systems are: Windows, Mac, and Ubuntu.
### Install using `pip`
<Tabs <Tabs
groupId="operating-system" groupId="operating-system"
defaultValue="linux" defaultValue="linux"

View file

@ -8,7 +8,7 @@ The device firmware runs on the nodes to build the mesh for communication. Each
The current firmware has support for a screen to display received messages, along with information about nodes on the mesh, and more detailed information about the device on which it is running. The current firmware has support for a screen to display received messages, along with information about nodes on the mesh, and more detailed information about the device on which it is running.
The latest firmware can be downloaded from the [Firmware](/firmware) page. If you wish to view the code or contribute to development of the firmware, please visit the device code <a href="https://github.com/meshtastic/Meshtastic-device">GitHub page</a>. The latest firmware can be downloaded from the [Downloads](/downloads) page. If you wish to view the code or contribute to development of the firmware, please visit the device code <a href="https://github.com/meshtastic/Meshtastic-device">GitHub page</a>.
### Buttons ### Buttons

View file

@ -69,9 +69,9 @@ const config = {
], ],
}, },
{ {
label: "Firmware", label: "Downloads",
to: "firmware", to: "downloads",
activeBasePath: "firmware", activeBasePath: "downloads",
}, },
{ {
label: "Showcase", label: "Showcase",

View file

@ -0,0 +1,141 @@
import React from 'react';
export interface downloadCardProps {
client: string;
imgUrl: string;
url: string;
notes: string;
buttonText: string;
}
export const DownloadCard = ({
client,
imgUrl,
url,
notes,
buttonText,
}: downloadCardProps): JSX.Element => {
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
?
<a href={url} className="button button--secondary button--block">
{buttonText}
</a>
:
<a href={url}>
<img style={{height: '4rem'}} src={imgUrl}></img>
</a>
}
</div>
<div className="card__footer">
{notes ? notes : null}
</div>
</div>
);
};
export const PlaceholderCard = (): 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>
);
};

View file

@ -0,0 +1,14 @@
import React from 'react';
export const HeaderText = ({type, text, link}): JSX.Element => {
const Header = type;
return (
<Header className="anchor anchorWithHideOnScrollNavbar_node_modules-@docusaurus-theme-classic-lib-next-theme-Heading-styles-module">
{text}
{link && <a className="hash-link" href={`#${link}`} title="Direct link to heading"/>}
</Header>
);
};

View file

@ -0,0 +1,147 @@
import React from 'react';
import useSWR from 'swr';
// import { Endpoints } from '@octokit/types';
import Layout from '@theme/Layout';
import { Release } from '../../utils/github';
import { fetcher } from '../../utils/swr';
import {
FirmwareCard,
PlaceholderFirmwareCard,
} from './_components/FirmwareCard';
import { HeaderText } from './_components/HeaderText'
import { DownloadCard } from './_components/DownloadCard'
const Firmware = (): JSX.Element => {
const { data, error } = useSWR<Release[]>(
"https://api.github.com/repos/meshtastic/meshtastic-device/releases",
fetcher
);
const beta = data?.filter((release) => release.prerelease === false);
const alpha = data?.filter((release) => release.prerelease === true);
return (
<Layout
title="Downloads"
description="Downloads for the Meshtastic project"
>
<main className="margin-vert--xl">
<div className="container">
<HeaderText
type="h1"
text="Downloads"
/>
</div>
<div className="container">
<HeaderText
type="h2"
text="Install Meshtastic"
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>, " follow ",<a href="https://meshtastic.org/docs/getting-started/meshtastic-flasher#install-using-pip">these instructions</a>,"."
]}
/>
</div>
<div className="container">
<HeaderText
type="h2"
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
type="h2"
text="Firmware Downloads"
link="firmware-downloads"
/>
<ul
style={{
position: "relative",
display: "grid",
gap: "1.5rem",
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
paddingLeft: "0",
}}
>
{data && !error ? (
<>
<FirmwareCard
variant="Beta"
description="Tested feature set. For those who want stability."
release={beta}
/>
<FirmwareCard
variant="Alpha"
description="Upcoming changes for testing. For those who want new features."
release={alpha}
/>
<div className="card">
<div className="card__header">
<h3>Bleeding</h3>
</div>
<div className="card__body">
<p>
Latest successful CI build. For those who want to break
things.
</p>
</div>
<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>
</>
) : (
<>
<PlaceholderFirmwareCard />
<PlaceholderFirmwareCard />
<PlaceholderFirmwareCard />
</>
)}
</ul>
Once downloaded, follow the flashing instructions for <a href="https://meshtastic.org/docs/getting-started/flashing-esp32" rel="noreferrer" target="_blank">ESP32 chipsets</a>, <a href="https://meshtastic.org/docs/getting-started/flashing-nrf52" rel="noreferrer" target="_blank">NRF52 chipsets</a>, or the <a href="https://meshtastic.org/docs/getting-started/meshtastic-flasher" rel="noreferrer" target="_blank">GUI instructions for Meshtastic Flasher</a>.
</div>
<div className="container">
<i>Google Play and the Google Play logo are trademarks of Google LLC.</i>
</div>
</main>
</Layout>
);
};
export default Firmware;

View file

@ -1,86 +0,0 @@
import React from 'react';
import useSWR from 'swr';
// import { Endpoints } from '@octokit/types';
import Layout from '@theme/Layout';
import { Release } from '../../utils/github';
import { fetcher } from '../../utils/swr';
import {
FirmwareCard,
PlaceholderFirmwareCard,
} from './_components/FirmwareCard';
const Firmware = (): JSX.Element => {
const { data, error } = useSWR<Release[]>(
"https://api.github.com/repos/meshtastic/meshtastic-device/releases",
fetcher
);
const beta = data?.filter((release) => release.prerelease === false);
const alpha = data?.filter((release) => release.prerelease === true);
return (
<Layout
title="Firmware"
description="Firmware download for the Meshtastic project"
>
<main className="margin-vert--xl">
<div className="container">
<ul
style={{
position: "relative",
display: "grid",
gap: "1.5rem",
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
paddingLeft: "0",
}}
>
{data && !error ? (
<>
<FirmwareCard
variant="Beta"
description="Tested feature set. For those who want stability."
release={beta}
/>
<FirmwareCard
variant="Alpha"
description="Upcoming changes for testing. For those who want new features."
release={alpha}
/>
<div className="card">
<div className="card__header">
<h3>Bleeding</h3>
</div>
<div className="card__body">
<p>
Latest successful CI build. For those who want to break
things.
</p>
</div>
<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>
</>
) : (
<>
<PlaceholderFirmwareCard />
<PlaceholderFirmwareCard />
<PlaceholderFirmwareCard />
</>
)}
</ul>
</div>
</main>
</Layout>
);
};
export default Firmware;