mudhorn/meshtastic
1
0
Fork 0
mirror of https://github.com/meshtastic/meshtastic.git synced 2024-12-27 14:39:54 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Merge pull request #268 from jfirwin/front-page

Browse source 
Add call to action buttons on front page
This commit is contained in:
Foster Irwin 2022-03-03 14:40:50 -07:00 committed by GitHub
parent a472375bd2 a4b56df9ff
commit b3afc9a95a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 185 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
docs/getting-started/getting_started.md
View file

@ -14,22 +14,25 @@ The radios automatically create a mesh to forward packets as needed, so everyone
Meshtastic uses LoRa for the long range communications and depending on settings used, the maximum theoretical group size ranges from 30-200 device nodes. Currently, each device can only support a connection from a single user at a time.
<Link
className={'button button--outline button--lg cta--button'}
to={'/docs/about'}>
Learn More
</Link>
<div className="indexCtasBody">
<Link
className={'button button--outline button--lg cta--button'}
to={'/docs/about'}>
Learn More
</Link>
</div>
## Purchase a Radio
The easiest way is to [buy a device with the software already installed](https://www.aliexpress.com/item/4001178678568.html). Other devices are [available](/docs/hardware/supported/tbeam). In the Americas get the 915MHz version, in Europe the 868MHz, or Asia 923MHz. See this listing by [The Things Network](https://www.thethingsnetwork.org/docs/lorawan/frequencies-by-country.html) for frequencies by specific countries.
<Link
className={'button button--outline button--lg cta--button'}
to={'/docs/hardware'}>
Purchase Hardware
</Link>
<div className="indexCtasBody">
<Link
className={'button button--outline button--lg cta--button'}
to={'/docs/hardware'}>
Purchase Hardware
</Link>
</div>
## Setup the Radio
@ -53,11 +56,13 @@ If your device already has Meshtastic flashed to it, you can update it over the
The manual firmware installation method will also depend on whether you have an ESP32 based device or a nRF52 based device. See our [hardware section](/docs/hardware) to determine which microcontroller your device is based on.
<Link
className={'button button--outline button--lg cta--button'}
to={'/docs/getting-started/flashing-firmware'}>
Flash Firmware
</Link>
<div className="indexCtasBody">
<Link
className={'button button--outline button--lg cta--button'}
to={'/docs/getting-started/flashing-firmware'}>
Flash Firmware
</Link>
</div>
## Connect to your Device
@ -69,6 +74,15 @@ There are many ways to connect to your new radio!
- Bluetooth
- Web app over Wifi (in development)
<div className="indexCtasBody">
<Link
className={'button button--outline button--lg cta--button'}
to={'/docs/getting-started/clients'}>
Connect to Node
</Link>
</div>
### A good first test (connect via USB and CLI)
If you have at least two radios with the Meshtastic firmware, you may consider connecting one via USB and the other battery powered. Communicate with the USB radio using a CLI like [Meshtastic-python](https://meshtastic.org/docs/software/python/python-installation).

36
src/css/custom.css
View file

@ -55,3 +55,39 @@ html[data-theme="dark"] .header-github-link:before {
--ifm-button-border-color: var(--ifm-link-color);
color: var(--ifm-link-color);
}
.indexCtasBody {
--ifm-button-size-multiplier: 1.6;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-top: 24px;
}
.indexCtasBody a:last-of-type {
margin: 20px 36px;
}
.indexCtas {
--ifm-button-size-multiplier: 1.6;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-top: 24px;
}
.indexCtas a {
color: var(--ifm-font-color-base-inverse);
--ifm-button-border-color: var(--ifm-font-color-base-inverse);
}
.indexCtas a:hover {
color: rgb(77, 77, 77);
--ifm-button-border-color: rgb(77, 77, 77);
}
.indexCtas a:last-of-type {
margin: 20px 36px;
}

119
src/pages/index.tsx
View file

@ -4,6 +4,8 @@ import Head from '@docusaurus/Head';
import useBaseUrl from '@docusaurus/useBaseUrl';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import Link from '@docusaurus/Link';
import { HeaderText } from './downloads/_components/HeaderText';
const features = [
{
@ -120,6 +122,14 @@ function Home() {
/>
</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
<div className="indexCtas">
<Link className="button button--lg" to="/docs/about">
Learn More
</Link>
<Link className="button button--lg" to="/docs/getting-started">
Get Started
</Link>
</div>
</div>
</header>
<main>
@ -136,6 +146,115 @@ function Home() {
</div>
</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 to consider:
<ul>
<li>
Radio
</li>
<li>
Battery
</li>
<li>
Case
</li>
<li>
Antenna (most devices include an antenna, but the quality can be a bit of a mixed bag from some suppliers on stock antennas)
</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>
</Layout>
);