meshtastic/src/pages/index.tsx

145 lines
4.3 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';
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>
</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>
)}
</main>
</Layout>
);
}
export default Home;