mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2025-02-21 03:25:51 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

added getting started to front page

Browse source
This commit is contained in:
Foster Irwin 2022-03-03 10:53:42 -07:00
parent 53239c3f1d
commit 9e282bc430
1 changed files with 110 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

110
src/pages/index.tsx
View file

@ -5,6 +5,7 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout'; import Layout from '@theme/Layout';
import Link from '@docusaurus/Link'; import Link from '@docusaurus/Link';
import { HeaderText } from './Downloads/_components/HeaderText';
const features = [ const features = [
{ {
@ -145,6 +146,115 @@ function Home() {
</div> </div>
</section> </section>
)} )}
<div className="container">
<HeaderText
type="h1"
text="Getting Started"
link="getting-started"
/>
<p>
Getting started with Meshtastic is as easy as 1, 2, 3!
</p>
<ul
style={{
position: "relative",
display: "grid",
gap: "1.5rem",
gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
paddingLeft: "0",
}}
>
<div className="card">
<div
className="card__header"
style={{ display: "flex", justifyContent: "space-between" }}
>
<h3>
1. Purchase Supported Hardware
</h3>
</div>
<div
className="card__body"
style={{ display: "flex", justifyContent: "center"}}
>
<p>
Hardware you will want will consider:
<ul>
<li>
Radio
</li>
<li>
Battery
</li>
<li>
Case
</li>
<li>
Antenna (most devices include an antenna, but it is a bit of a mixed bag from some suppliers)
</li>
</ul>
</p>
</div>
</div>
<div className="card">
<div
className="card__header"
style={{ display: "flex", justifyContent: "space-between" }}
>
<h3>
2. Flash & Configure Node
</h3>
</div>
<div
className="card__body"
style={{ display: "flex", justifyContent: "center"}}
>
<p>
The Meshtastic Flasher application can assist you in flashing the firmware and configuring settings.
</p>
</div>
</div>
<div className="card">
<div
className="card__header"
style={{ display: "flex", justifyContent: "space-between" }}
>
<h3>
3. Connect to Node
</h3>
</div>
<div
className="card__body"
style={{ display: "flex", justifyContent: "center"}}
>
<p>
Applications are available for the following systems:
<ul>
<li>
Android
</li>
<li>
iOS
</li>
<li>
Mac
</li>
<li>
Web Browser
</li>
</ul>
</p>
</div>
</div>
</ul>
<div className="indexCtasBody">
<Link
className="button button--outline button--lg cta--button" to="/docs/getting-started"
>
Getting Started
</Link>
</div>
</div>
</main> </main>
</Layout> </Layout>
); );