mirror of
https://github.com/meshtastic/meshtastic.git
synced 2025-03-05 21:00:08 -08:00
341 lines
11 KiB
TypeScript
341 lines
11 KiB
TypeScript
import Head from "@docusaurus/Head";
|
|
import Link from "@docusaurus/Link";
|
|
import useBaseUrl from "@docusaurus/useBaseUrl";
|
|
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
|
|
import {
|
|
CheckCircleIcon,
|
|
CommandLineIcon,
|
|
DevicePhoneMobileIcon,
|
|
GlobeAltIcon,
|
|
} from "@heroicons/react/24/outline";
|
|
import Layout from "@theme/Layout";
|
|
|
|
import {
|
|
SocialCard,
|
|
type SocialCardProps,
|
|
} from "../components/homepage/SocialCard";
|
|
|
|
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-10"
|
|
src="/img/homepage/Twitter-Logo-White.svg"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#3875EA]",
|
|
link: "https://facebook.com/themeshtastic",
|
|
children: (
|
|
<img
|
|
alt="facebook"
|
|
className="m-auto h-10"
|
|
src="/img/homepage/f_logo_RGB-White_1024.webp"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#ffffff]",
|
|
link: "https://www.instagram.com/themeshtastic/",
|
|
children: (
|
|
<img
|
|
alt="instagram"
|
|
className="m-auto h-10"
|
|
src="/img/homepage/Instagram_Glyph_Gradient.svg"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#FF0000]",
|
|
link: "https://www.youtube.com/meshtastic",
|
|
children: (
|
|
<img
|
|
alt="youtube"
|
|
className="m-auto h-12"
|
|
src="/img/homepage/YouTube-Logo-White.svg"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#FF4500]",
|
|
link: "https://reddit.com/r/meshtastic",
|
|
children: (
|
|
<img
|
|
alt="reddit"
|
|
className="m-auto h-14"
|
|
src="/img/homepage/Reddit-Logo-White.svg"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#563ACC]",
|
|
link: "https://mastodon.social/@meshtastic",
|
|
isMeLink: true,
|
|
children: (
|
|
<img
|
|
alt="mastodon"
|
|
className="m-auto h-10"
|
|
src="/img/homepage/mastodon-logo-white.svg"
|
|
/>
|
|
),
|
|
},
|
|
{
|
|
color: "bg-[#24A1DE]",
|
|
link: "https://t.me/+hmKN0xOR73ExOTU6",
|
|
children: (
|
|
<img
|
|
alt="telegram"
|
|
className="m-auto h-10"
|
|
src="/img/homepage/telegram-single-path-240px.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 className="hero hero--primary text-center p-2">
|
|
<div className="container">
|
|
<h1 className="hero__title">
|
|
<img
|
|
alt="Meshtastic Logo"
|
|
className="header__logo py-8"
|
|
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>
|
|
<Link
|
|
className="button button--lg"
|
|
to="/docs/contributing/#supporting-and-contributing-to-meshtastic"
|
|
>
|
|
Donate
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="flex flex-col gap-8">
|
|
<div className="bg-primaryDark mx-auto flex w-full lg:w-auto flex-col gap-4 p-4 shadow-inner">
|
|
<div className="flex w-full overflow-x-auto gap-2 flex-wrap justify-center">
|
|
{SocialCards.map((card) => (
|
|
<SocialCard
|
|
key={card.link}
|
|
color={card.color}
|
|
link={card.link}
|
|
isMeLink={card.isMeLink}
|
|
>
|
|
{card.children}
|
|
</SocialCard>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="container mx-auto flex w-auto flex-col gap-4">
|
|
<h3 className="text-xl font-bold">Getting Started</h3>
|
|
<div className="flex flex-wrap justify-center gap-6">
|
|
<div className="flex flex-col items-center">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircleIcon
|
|
className="h-8 w-8"
|
|
style={{ color: "var(--ifm-color-primary)" }}
|
|
/>
|
|
<h4 className="text-lg font-bold">Step 1</h4>
|
|
</div>
|
|
<Link
|
|
to="/docs/hardware/devices/"
|
|
className="mt-1 underline hover:no-underline font-semibold"
|
|
>
|
|
Choose a Device →
|
|
</Link>
|
|
<p className="text-center max-w-xs">
|
|
Meshtastic devices are available in a variety of configurations
|
|
to suit your needs.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircleIcon
|
|
className="h-8 w-8"
|
|
style={{ color: "var(--ifm-color-primary)" }}
|
|
/>
|
|
<h4 className="text-lg font-bold">Step 2</h4>
|
|
</div>
|
|
<Link
|
|
to="/docs/getting-started/"
|
|
className="mt-1 underline hover:no-underline font-semibold"
|
|
>
|
|
Flash and Configure your Device →
|
|
</Link>
|
|
<p className="text-center max-w-xs">
|
|
Flash your device with the latest version of Meshtastic and
|
|
configure it to your liking.
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-center">
|
|
<div className="flex items-center gap-2">
|
|
<CheckCircleIcon
|
|
className="h-8 w-8"
|
|
style={{ color: "var(--ifm-color-primary)" }}
|
|
/>
|
|
<h4 className="text-lg font-bold">Step 3</h4>
|
|
</div>
|
|
<Link
|
|
to="/docs/getting-started/initial-config/"
|
|
className="mt-1 underline hover:no-underline font-semibold"
|
|
>
|
|
Connect to your Device →
|
|
</Link>
|
|
<p className="text-center max-w-xs">
|
|
Connect to your device via any of our clients to start sending
|
|
and receiving messages!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="container mx-auto flex w-auto flex-col gap-4">
|
|
<h3 className="text-xl font-bold">Get Connected</h3>
|
|
<p>
|
|
Connect and control your Meshtastic devices through various
|
|
platforms. Choose the client that best fits your needs and device
|
|
ecosystem.
|
|
</p>
|
|
</div>
|
|
<div className="container mx-auto flex w-auto flex-wrap justify-center gap-6">
|
|
<div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
|
|
<div className="card__header flex justify-between">
|
|
<h4 className="text-lg font-bold">iOS App</h4>
|
|
<DevicePhoneMobileIcon
|
|
className="h-8 w-8"
|
|
style={{ color: "var(--ifm-color-primary)" }}
|
|
/>
|
|
</div>
|
|
<div className="card__body flex justify-center">
|
|
<p>
|
|
Manage your Meshtastic network on-the-go with our iOS
|
|
application.
|
|
</p>
|
|
</div>
|
|
<div className="card__footer flex justify-center mt-4">
|
|
<Link
|
|
to="/docs/software/apple/installation/"
|
|
className="mt-1 underline hover:no-underline font-semibold"
|
|
>
|
|
Try it out →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
|
|
<div className="card__header flex justify-between">
|
|
<h4 className="text-lg font-bold">Android App</h4>
|
|
<DevicePhoneMobileIcon
|
|
className="h-8 w-8"
|
|
style={{ color: "var(--ifm-color-primary)" }}
|
|
/>
|
|
</div>
|
|
<div className="card__body flex justify-center">
|
|
<p>
|
|
Connect and control your Meshtastic devices using our Android
|
|
application.
|
|
</p>
|
|
</div>
|
|
<div className="card__footer flex justify-center mt-4">
|
|
<Link
|
|
to="/docs/software/android/installation/"
|
|
className="mt-1 underline hover:no-underline font-semibold"
|
|
>
|
|
Try it out →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
|
|
<div className="card__header flex justify-between">
|
|
<h4 className="text-lg font-bold">Web Client</h4>
|
|
<GlobeAltIcon
|
|
className="h-8 w-8"
|
|
style={{ color: "var(--ifm-color-primary)" }}
|
|
/>
|
|
</div>
|
|
<div className="card__body flex justify-center">
|
|
<p>
|
|
Access your Meshtastic network from any device with our
|
|
web-based client.
|
|
</p>
|
|
</div>
|
|
<div className="card__footer flex justify-center mt-4">
|
|
<Link
|
|
to="https://client.meshtastic.org"
|
|
className="mt-1 underline hover:no-underline font-semibold"
|
|
>
|
|
Try it out →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="card w-[calc(100%-1rem)] sm:w-1/3 md:w-1/4 lg:w-1/4">
|
|
<div className="card__header flex justify-between">
|
|
<h4 className="text-lg font-bold">Python CLI/SDK</h4>
|
|
<CommandLineIcon
|
|
className="h-8 w-8"
|
|
style={{ color: "var(--ifm-color-primary)" }}
|
|
/>
|
|
</div>
|
|
<div className="card__body flex justify-center">
|
|
<p>
|
|
Command-line interface and software development kit for Python
|
|
developers and power users.
|
|
</p>
|
|
</div>
|
|
<div className="card__footer flex justify-center mt-4">
|
|
<Link
|
|
to="/docs/software/python/cli/installation/"
|
|
className="mt-1 underline hover:no-underline font-semibold"
|
|
>
|
|
Try it out →
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<br />
|
|
</main>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
export default Home;
|