developers.urbit.org/pages/index.js

321 lines
11 KiB
JavaScript
Raw Permalink Normal View History

2021-09-30 16:23:38 +03:00
import Head from "next/head";
2022-06-22 03:49:31 +03:00
import Header from "../components/Header";
import Footer from "../components/Footer";
2022-07-19 06:39:04 +03:00
import IndexCard from "../components/IndexCard";
2022-07-19 03:10:36 +03:00
import NewsletterSignup from "../components/NewsletterSignup";
2022-06-23 07:01:56 +03:00
import {
Container,
SingleColumn,
Section,
TwoUp,
formatDate,
generateDisplayDate,
getAllPosts,
} from "@urbit/foundation-design-system";
2021-10-01 19:51:50 +03:00
import Link from "next/link";
2022-06-22 03:49:31 +03:00
import {
Comms,
2022-07-15 22:04:22 +03:00
Ringsig,
2022-08-19 10:46:47 +03:00
Squad,
2022-06-22 03:49:31 +03:00
Database,
Distribution,
2022-06-28 00:26:35 +03:00
Functional,
2022-06-22 03:49:31 +03:00
Identity,
Interface,
Peer,
} from "../components/icons";
import Card from "../components/Card";
import TallCard from "../components/TallCard";
2022-10-11 02:30:06 +03:00
import HoonIcon from "../components/icons/TallCard/hoon";
import AppIcon from "../components/icons/TallCard/app";
2022-12-10 03:04:25 +03:00
import Meta from "../components/Meta";
2023-01-27 02:43:54 +03:00
import HighlightCard from "../components/HighlightCard";
2021-09-30 16:10:31 +03:00
2023-01-27 02:43:54 +03:00
export default function Home({ search, posts, highlights }) {
2022-12-07 02:30:07 +03:00
const post = {
title: "Urbit Developers",
description: "Discover the creative possibilities of a unified operating system.",
image: "https://storage.googleapis.com/media.urbit.org/site/opengraph/developers.png"
};
2021-09-30 16:10:31 +03:00
return (
2022-06-22 03:49:31 +03:00
<div>
2021-09-30 16:10:31 +03:00
<Head>
2021-09-30 16:23:38 +03:00
<title>Urbit Developers</title>
2022-12-10 03:00:28 +03:00
{Meta(post, false, true)}
2021-09-30 16:10:31 +03:00
</Head>
2021-10-01 19:19:03 +03:00
<Container>
2022-06-23 10:55:08 +03:00
<Header search={search} />
2021-10-01 19:19:03 +03:00
<SingleColumn>
2023-01-27 02:43:54 +03:00
<Section className="pb-36">
2022-06-22 03:49:31 +03:00
{/* Hero statement */}
<div className="flex flex-col space-y-4">
<h1 className="max-w-prose">
2022-06-28 00:30:17 +03:00
Discover the creative possibilities of a unified operating
2022-12-07 02:30:07 +03:00
system.
2022-06-22 03:49:31 +03:00
</h1>
2022-06-28 19:53:52 +03:00
<div className="flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4 pt-4">
2022-10-04 14:03:59 +03:00
<Link href="/guides/quickstart/intro" passHref>
2022-06-28 00:26:35 +03:00
<a className="button-lg bg-green-400 text-white">
Quickstart
</a>
</Link>
2022-06-22 03:49:31 +03:00
<Link href="/overview" passHref>
2022-06-28 00:26:35 +03:00
<a className="button-lg bg-blue-400 text-white">
2022-06-22 03:49:31 +03:00
Read the Overview
</a>
</Link>
<Link href="/guides" passHref>
2022-06-28 00:26:35 +03:00
<a className="button-lg bg-white border-wall-500 border-2">
2022-06-22 03:49:31 +03:00
Learn the Stack
</a>
</Link>
</div>
</div>
2021-10-01 19:19:03 +03:00
</Section>
2023-01-27 02:43:54 +03:00
<Section className="pb-36">
<HighlightCard highlight={highlights[0]} key={highlights[0].slug} />
</Section>
2021-10-02 19:23:45 +03:00
<Section short>
2022-06-28 00:26:35 +03:00
<h2 className="font-normal">
Urbit provides{" "}
<span className="font-bold">foundational primitives</span> at the
operating system layer, serving as a better platform for building{" "}
<span className="font-bold">
networked, decentralized applications
</span>
.
2022-06-22 03:49:31 +03:00
</h2>
<div className="flex flex-wrap pt-12">
{pitch.map((each) => {
return (
<div
key={each.title}
2022-06-22 21:06:14 +03:00
className="basis-full md:basis-1/2 xl:basis-1/3 flex space-x-2 justify-start items-start my-8 pr-8"
2022-06-22 03:49:31 +03:00
>
{each.icon}
<div className="flex flex-col">
<p className="font-bold text-sm">{each.title}</p>
<p className="text-sm">{each.content}</p>
</div>
</div>
);
})}
</div>
<div className="pt-12">
2023-01-24 04:03:21 +03:00
<h3 className="max-w-prose font-normal">
2022-06-22 03:49:31 +03:00
Thanks to this architecture, you can take software into
2023-01-24 04:03:21 +03:00
production within weeks rather than months.
</h3>
2021-10-01 19:19:03 +03:00
</div>
</Section>
2022-06-22 03:49:31 +03:00
<Section>
<h2 className="pt-12">Quickstart: Lightning Tutorials</h2>
2023-01-24 04:03:21 +03:00
<p className="pt-12 text-lg">Jump right in and build an app in under a half hour.</p>
<div className="flex flex-col space-y-4 md:space-y-0 md:flex-row md:space-x-8 pt-12">
2022-08-19 10:46:47 +03:00
<Card
icon={<Squad />}
title="Groups Application"
text="Build an app to create public or private groups"
className="basis-1/2"
href="/guides/quickstart/groups-guide"
/>
2022-06-22 03:49:31 +03:00
<Card
icon={<Comms />}
title="Encrypted Chat Application"
text="Build your own secure comms tool"
className="basis-1/2"
href="/guides/quickstart/chat-guide"
2022-06-22 03:49:31 +03:00
/>
2022-08-19 10:46:47 +03:00
</div>
2023-01-24 04:03:21 +03:00
<div className="flex flex-col space-y-4 md:space-y-0 md:flex-row md:space-x-8 pt-8">
2022-07-15 13:27:24 +03:00
<Card
2022-07-15 22:04:22 +03:00
icon={<Ringsig />}
2022-07-15 13:27:24 +03:00
title="Ring Signature Voting App"
text="Build an anonymous voting app for groups"
2022-06-22 03:49:31 +03:00
className="basis-1/2"
2022-07-15 13:27:24 +03:00
href="/guides/quickstart/voting-guide"
/>
2022-08-19 10:46:47 +03:00
<div className="basis-1/2" />
2021-10-01 19:19:03 +03:00
</div>
</Section>
2022-06-22 03:49:31 +03:00
<Section className="flex flex-col space-y-12">
<h2>Guides</h2>
2023-01-24 04:03:21 +03:00
<p className="text-lg max-w-prose">
2022-06-22 03:49:31 +03:00
Learn the foundations of software development on Urbit with our
2023-01-24 04:03:21 +03:00
core curriculum of guides and workbooks.
2022-06-22 03:49:31 +03:00
</p>
2022-06-23 07:01:56 +03:00
<TwoUp>
2022-06-22 03:49:31 +03:00
<TallCard
title="Hoon School"
description="Learn the fundamentals of the Hoon programming language"
callout="View Guide"
href="/guides/core/hoon-school"
image="https://storage.googleapis.com/media.urbit.org/developers/images/hoon-school.svg"
2022-06-23 07:01:56 +03:00
className="h-full"
2022-06-22 03:49:31 +03:00
/>
<TallCard
title="App School"
description="Learn how to build Urbit userspace applications by writing your own Gall agents"
callout="View Guide"
href="/guides/core/app-school"
image="https://storage.googleapis.com/media.urbit.org/developers/images/app-school.svg"
2022-06-23 07:01:56 +03:00
className="h-full"
2022-06-22 03:49:31 +03:00
/>
2022-06-23 07:01:56 +03:00
</TwoUp>
2022-06-22 03:49:31 +03:00
<Link href="/guides" passHref>
<a className="button-lg bg-wall-600 text-white w-fit">
View All Guides
</a>
</Link>
</Section>
<Section className="flex flex-col space-y-12">
<h2>Courses</h2>
2023-01-24 04:03:21 +03:00
<p className="text-lg max-w-prose">
2022-06-22 03:49:31 +03:00
Want an interactive experience to truly learn software development
2023-01-24 04:03:21 +03:00
on Urbit? <br/>Join the next cohort for Hoon or App School Live and
2022-06-22 03:49:31 +03:00
learn with a group.
</p>
<Link href="/courses" passHref>
<a className="button-lg bg-green-400 text-white w-fit">
View Courses
</a>
</Link>
</Section>
<Section className="flex flex-col space-y-8">
<h2>Community</h2>
<p className="text-lg">
The developer community is friendly, helpful, and organized from
within Urbit itself.
</p>
<div className="flex flex-col space-y-4 md:space-y-0 md:flex-row md:space-x-4 pb-4">
2022-06-22 03:49:31 +03:00
<Card
title="Directory"
text="There are many bright minds happy to answer your questions."
href="/community/directory"
callout="View Directory"
2022-06-22 03:49:31 +03:00
className="basis-1/2"
/>
<Card
title="Opportunities"
text="Urbit is growing and there are many opportunities to find a job, grant, or funding for your great idea."
2022-06-22 03:49:31 +03:00
href="/community/opportunities"
callout="Explore Opportunities"
className="basis-1/2"
/>
2021-10-01 19:19:03 +03:00
</div>
<Link href="/community" passHref>
<a className="button-lg bg-wall-600 text-white w-fit">
Explore the Community
</a>
</Link>
2021-10-01 19:19:03 +03:00
</Section>
2022-06-22 03:49:31 +03:00
<Section className="flex flex-col space-y-8">
2022-07-19 06:39:04 +03:00
<h2>Blog</h2>
2022-06-28 01:01:14 +03:00
<TwoUp>
2022-07-19 06:39:04 +03:00
{posts.slice(0, 2).map((e) => {
const date = generateDisplayDate(e.date);
return (
<IndexCard
2022-09-16 05:25:30 +03:00
key={e.slug}
2022-07-19 06:39:04 +03:00
slug={`/blog/${e.slug}`}
title={e.title}
image={e.extra.image}
author={e?.extra?.author || ""}
ship={e?.extra?.ship || ""}
content={
<p className="text-wall-500 type-sub shrink-0">
{formatDate(date)}
</p>
}
/>
);
})}
</TwoUp>
</Section>
2022-07-19 03:10:36 +03:00
<Section narrow>
<div className="measure">
2022-10-07 22:53:12 +03:00
<h2 className="pb-2">[battery payload]</h2>
2022-09-16 05:25:30 +03:00
<p className="pb-6">The Urbit Developer Newsletter</p>
2022-07-19 03:10:36 +03:00
</div>
<NewsletterSignup />
2022-09-16 05:25:30 +03:00
<p className="pt-6">
2022-10-07 22:53:12 +03:00
Get monthly developer news on releases, applications, events, and&nbsp;more.
</p>
2022-07-19 03:10:36 +03:00
</Section>
2021-10-01 19:19:03 +03:00
</SingleColumn>
2022-06-22 03:49:31 +03:00
<Footer />
2021-10-01 19:19:03 +03:00
</Container>
2022-06-22 03:49:31 +03:00
</div>
2021-09-30 16:23:38 +03:00
);
2021-09-30 16:10:31 +03:00
}
2022-06-22 03:49:31 +03:00
const pitch = [
{
icon: <Identity className="shrink-0" />,
title: "Identity",
2022-06-28 00:26:35 +03:00
content:
"Identity is built-in at the lowest level of the stack say goodbye to auth systems.",
2022-06-22 03:49:31 +03:00
},
{
2022-06-28 00:26:35 +03:00
icon: <Functional className="shrink-0" />,
title: "Functional Network",
2022-06-22 03:49:31 +03:00
content:
2022-06-28 00:26:35 +03:00
"Immutable, functional programming across the entire OS and network",
2022-06-22 03:49:31 +03:00
},
{
icon: <Database className="shrink-0" />,
2022-06-28 00:26:35 +03:00
title: "Built-in Database",
content: "Every piece of state in your application is persistent, always",
2022-06-22 03:49:31 +03:00
},
{
icon: <Peer className="shrink-0" />,
title: "Peer-to-Peer Applications",
2022-06-28 00:26:35 +03:00
content: "Urbit makes robust peer-to-peer applications easy to build",
2022-06-22 03:49:31 +03:00
},
{
icon: <Distribution className="shrink-0" />,
title: "Open Distribution",
2022-06-28 00:26:35 +03:00
content:
"Distribute software directly to users — you are your own app store",
2022-06-22 03:49:31 +03:00
},
{
icon: <Interface className="shrink-0" />,
title: "Web Interfaces",
2022-06-28 00:26:35 +03:00
content:
"Urbit applications can be built on any interface framework, including the web",
2022-06-22 03:49:31 +03:00
},
];
2022-06-28 01:01:14 +03:00
2023-01-27 02:43:54 +03:00
2022-06-28 01:01:14 +03:00
export async function getStaticProps() {
2023-01-27 02:43:54 +03:00
// Highlights
const highlights = getAllPosts(
["title", "slug", "image", "url", "description"],
"highlights"
);
2022-06-28 01:01:14 +03:00
const posts = getAllPosts(
["title", "slug", "date", "description", "extra"],
"blog",
"date"
2022-07-19 06:39:04 +03:00
);
2022-06-28 01:01:14 +03:00
return {
props: {
2022-07-19 06:39:04 +03:00
posts,
2023-01-27 02:43:54 +03:00
highlights
2022-06-28 01:01:14 +03:00
},
};
}