mirror of
https://github.com/meshtastic/meshtastic.git
synced 2025-03-05 21:00:08 -08:00
323 lines
8.3 KiB
TypeScript
323 lines
8.3 KiB
TypeScript
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
|
|
|
|
import React from "react";
|
|
|
|
import { Carousel } from "react-responsive-carousel";
|
|
|
|
import Head from "@docusaurus/Head";
|
|
import Link from "@docusaurus/Link";
|
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
|
import Layout from "@theme/Layout";
|
|
|
|
import { SocialCard, SocialCardProps } from "../components/homepage/SocialCard";
|
|
|
|
const features = [
|
|
{
|
|
title: "Radio Mesh Text Messaging",
|
|
imageUrl: "img/homepage/messages.svg",
|
|
description: (
|
|
<>
|
|
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.
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: "Encryption",
|
|
imageUrl: "img/homepage/encryption.svg",
|
|
description: (
|
|
<>
|
|
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.
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: "Conserve Battery",
|
|
imageUrl: "img/homepage/battery.svg",
|
|
description: (
|
|
<>
|
|
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.
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: "Extensible",
|
|
imageUrl: "img/homepage/extendable.svg",
|
|
description: (
|
|
<>
|
|
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 decentralized, encrypted
|
|
messaging network, your imagination is the limit.
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: "Platform Agnostic",
|
|
imageUrl: "img/homepage/platforms.svg",
|
|
description: (
|
|
<>
|
|
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.
|
|
</>
|
|
),
|
|
},
|
|
{
|
|
title: "Open Source",
|
|
imageUrl: "img/homepage/opensource.svg",
|
|
description: (
|
|
<>
|
|
All Meshtastic software is open source. If you want an improvement,
|
|
submit a pull request or file an issue on Github. Happy coding!
|
|
</>
|
|
),
|
|
},
|
|
];
|
|
|
|
const SocialCards: SocialCardProps[] = [
|
|
{
|
|
color: "bg-[#5865F2]",
|
|
link: "https://discord.com/invite/ktMAKGBnBs",
|
|
children: (
|
|
<img
|
|
alt="discord"
|
|
className="m-auto h-10"
|
|
src="/img/homepage/Discord-Logo-White.svg"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#4A99E9]",
|
|
link: "https://twitter.com/TheMeshtastic",
|
|
children: (
|
|
<img
|
|
alt="twitter"
|
|
className="m-auto h-14"
|
|
src="/img/homepage/Twitter-Logo-White.svg"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#3875EA]",
|
|
link: "https://facebook.com/themeshtastic",
|
|
children: (
|
|
<img
|
|
alt="facebook"
|
|
className="m-auto h-14"
|
|
src="/img/homepage/f_logo_RGB-White_1024.png"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#ffffff]",
|
|
link: "https://www.instagram.com/themeshtastic/",
|
|
children: (
|
|
<img
|
|
alt="instagram"
|
|
className="m-auto h-14"
|
|
src="/img/homepage/Instagram_Glyph_Gradient.svg"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#FF0000]",
|
|
link: "https://www.youtube.com/meshtastic",
|
|
children: (
|
|
<img
|
|
alt="youtube"
|
|
className="m-auto h-16"
|
|
src="/img/homepage/YouTube-Logo-White.svg"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#ffffff]",
|
|
link: "https://meshtastic.discourse.group",
|
|
children: (
|
|
<img
|
|
alt="discourse"
|
|
className="m-auto h-12"
|
|
src="/img/homepage/Discourse-Logo-White.svg"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#FF4500]",
|
|
link: "https://reddit.com/r/meshtastic",
|
|
children: (
|
|
<img
|
|
alt="reddit"
|
|
className="m-auto h-20"
|
|
src="/img/homepage/Reddit-Logo-White.svg"
|
|
/>
|
|
),
|
|
},
|
|
];
|
|
|
|
function Home() {
|
|
const context = useDocusaurusContext();
|
|
const { siteConfig } = context;
|
|
return (
|
|
<Layout>
|
|
<Head>
|
|
<meta property="og:title" content="Meshtastic" />
|
|
<meta
|
|
property="og:image"
|
|
content={useBaseUrl("design/web/social-preview-1200x630.png")}
|
|
/>
|
|
<meta
|
|
property="og:description"
|
|
content="An open source, off-grid, decentralized, mesh network built to run on affordable, low-power devices"
|
|
/>
|
|
<meta property="og:url" content="https://meshtastic.org/" />
|
|
<meta name="twitter:card" content="summary_large_image" />
|
|
</Head>
|
|
<header style={{ textAlign: "center" }} className="hero hero--primary">
|
|
<div className="container">
|
|
<h1 className="hero__title">
|
|
<img
|
|
style={{ paddingTop: "2rem", paddingBottom: "2rem" }}
|
|
alt="Meshtastic Logo"
|
|
className="header__logo"
|
|
src={useBaseUrl("design/typelogo/typelogo.svg")}
|
|
/>
|
|
</h1>
|
|
<p className="hero__subtitle">{siteConfig.tagline}</p>
|
|
<div className="indexCtas">
|
|
<Link className="button button--lg" to="/docs/introduction">
|
|
Learn More
|
|
</Link>
|
|
<Link className="button button--lg" to="/docs/getting-started">
|
|
Get Started
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<main className="flex flex-col gap-4">
|
|
<Carousel autoPlay infiniteLoop showStatus={false} showThumbs={false}>
|
|
{features.map((feature) => (
|
|
<div key={feature.title} className="flex p-12">
|
|
<div className="w-1/2">
|
|
<img
|
|
className="my-auto h-40"
|
|
src={feature.imageUrl}
|
|
alt={feature.title}
|
|
/>
|
|
</div>
|
|
<div className="my-auto w-1/2">
|
|
<h3 className="text-xl font-medium">{feature.title}</h3>
|
|
<p>{feature.description}</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</Carousel>
|
|
|
|
<div className="bg-primaryDark mx-auto flex w-full lg:w-auto flex-col gap-4 p-4 shadow-inner">
|
|
<h3 className="text-xl font-bold">Connect with us.</h3>
|
|
<div className="flex w-full overflow-x-auto">
|
|
{SocialCards.map((card) => (
|
|
<SocialCard key={card.link} color={card.color} link={card.link}>
|
|
{card.children}
|
|
</SocialCard>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="container mx-auto flex w-auto flex-col">
|
|
<h2 className="mb-2 text-xl font-medium">
|
|
Getting started with Meshtastic is as easy as 1, 2, 3!
|
|
</h2>
|
|
<ul
|
|
className="mx-auto"
|
|
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 Web-Based Flasher & Clients 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>
|
|
<br />
|
|
</main>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export default Home;
|