meshtastic/src/pages/index.tsx

264 lines
8 KiB
TypeScript
Raw Normal View History

2021-04-01 17:34:44 -07:00
import React from 'react';
2021-11-30 02:46:31 -08:00
import Head from '@docusaurus/Head';
2021-04-01 17:34:44 -07:00
import useBaseUrl from '@docusaurus/useBaseUrl';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
2022-03-02 15:17:30 -08:00
import Link from '@docusaurus/Link';
2022-03-03 09:53:42 -08:00
import { HeaderText } from './Downloads/_components/HeaderText';
2021-04-01 17:34:44 -07:00
const features = [
{
2021-11-23 11:31:34 -08:00
title: "Radio Mesh Text Messaging",
2021-11-23 14:21:58 -08:00
imageUrl: "img/homepage/messages.svg",
2021-04-01 17:34:44 -07:00
description: (
<>
2021-11-30 02:46:31 -08:00
Off-grid messaging using inexpensive hardware to create your personal
mesh. Radios forward messages to the next to flood the network.
Communicate kilometers/miles between nodes. Internet-connected relay
nodes enable the conversation to move online too.
2021-04-01 17:34:44 -07:00
</>
),
},
{
2021-11-23 11:31:34 -08:00
title: "Encryption",
2021-11-23 14:21:58 -08:00
imageUrl: "img/homepage/encryption.svg",
2021-04-01 17:34:44 -07:00
description: (
<>
2021-11-30 02:46:31 -08:00
Messages are AES256 encrypted. Only radios supplied with your channel
settings (which includes the key) should be able to read your messages.
Using multichannel settings you can send encrypted messages on one
channel and still participate in a default Meshtastic mesh.
2021-04-01 17:34:44 -07:00
</>
),
},
{
2021-11-23 11:31:34 -08:00
title: "Conserve Battery",
2021-11-23 14:21:58 -08:00
imageUrl: "img/homepage/battery.svg",
2021-04-01 17:34:44 -07:00
description: (
<>
2021-11-30 02:46:31 -08:00
Go for days on end and on a single battery or extend it infinitely with
a solar cell. Power management ensures the device will last the duration
of your use.
2021-11-23 11:31:34 -08:00
</>
),
},
{
title: "Extendable",
2021-11-23 14:21:58 -08:00
imageUrl: "img/homepage/extendable.svg",
2021-11-23 11:31:34 -08:00
description: (
<>
2021-11-30 02:46:31 -08:00
Create a highly scalable mesh with hardware on a multitude of platforms
to fit your unique requirements: Create an environment monitoring mesh
and produce real-time heatmaps, or maybe decentralised, encrypted
messaging network, your imagination is the limit.
2021-11-23 11:31:34 -08:00
</>
),
},
{
title: "Platform Agnostic",
2021-11-23 14:21:58 -08:00
imageUrl: "img/homepage/platforms.svg",
2021-11-23 11:31:34 -08:00
description: (
<>
2021-11-30 02:46:31 -08:00
Meshtastic clients are built or being built for all major desktop and
mobile platforms. Linux, Windows, Mac, Android, and iOS are all
supported or well on their way to being supported.
2021-11-23 11:31:34 -08:00
</>
),
},
{
title: "Open Source",
2021-11-23 14:21:58 -08:00
imageUrl: "img/homepage/opensource.svg",
2021-11-23 11:31:34 -08:00
description: (
<>
2021-11-30 02:46:31 -08:00
All Meshtastic software is open source. If you want an improvement,
submit a pull request or file an issue on Github. Happy coding!
2021-04-01 17:34:44 -07:00
</>
),
},
];
function Feature({ imageUrl, title, description }) {
const imgUrl = useBaseUrl(imageUrl);
return (
2021-11-30 02:46:31 -08:00
<div className="col col--4">
2021-04-01 17:34:44 -07:00
{imgUrl && (
<div className="text--center">
2021-11-30 02:46:31 -08:00
<img width={200} height={200} src={imgUrl} alt={title} />
2021-04-01 17:34:44 -07:00
</div>
)}
<h3>{title}</h3>
<p>{description}</p>
</div>
);
}
function Home() {
const context = useDocusaurusContext();
2021-10-22 19:35:13 -07:00
const { siteConfig } = context;
2021-04-01 17:34:44 -07:00
return (
<Layout>
<Head>
<meta property="og:title" content="Meshtastic" />
<meta
property="og:image"
2021-12-22 06:53:13 -08:00
content={useBaseUrl("design/web/social-preview-1200x630.png")}
/>
<meta
property="og:description"
2022-01-03 17:05:40 -08:00
content="Open Source hiking, pilot, skiing and secure LoRa mesh communicator"
/>
<meta property="og:url" content="https://meshtastic.org/" />
<meta name="twitter:card" content="summary_large_image" />
</Head>
2021-11-30 02:46:31 -08:00
<header style={{ textAlign: "center" }} className="hero hero--primary">
2021-04-01 17:34:44 -07:00
<div className="container">
<h1 className="hero__title">
<img
style={{ paddingTop: "2rem", paddingBottom: "2rem" }}
alt="Meshtastic Logo"
className="header__logo"
2021-12-22 06:53:13 -08:00
src={useBaseUrl("design/typelogo/typelogo.svg")}
2021-04-01 17:34:44 -07:00
/>
</h1>
<p className="hero__subtitle">{siteConfig.tagline}</p>
2022-03-02 15:17:30 -08:00
<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>
2021-04-01 17:34:44 -07:00
</div>
</header>
<main>
{features && features.length > 0 && (
2021-11-30 02:46:31 -08:00
<section
style={{ display: "flex", alignItems: "center", padding: "2rem" }}
>
2021-04-01 17:34:44 -07:00
<div className="container">
<div className="row">
{features.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
)}
2022-03-03 09:53:42 -08:00
<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>
2021-04-01 17:34:44 -07:00
</main>
</Layout>
);
}
export default Home;