@@ -0,0 +1,146 @@
1+import { useRouter } from "next/router";
2+import {
3+ getPostBySlug,
4+ getAllPosts,
5+ getNextPost,
6+ getPreviousPost,
7+ formatDate,
8+} from "../../lib/lib";
9+import Head from "next/head";
10+import Link from "next/link";
11+import ErrorPage from "../404";
12+import Container from "../../components/Container";
13+import Markdown from "../../components/Markdown";
14+import Header from "../../components/Header";
15+import Footer from "../../components/Footer";
16+import BackgroundImage from "../../components/BackgroundImage";
17+import SingleColumn from "../../components/SingleColumn";
18+import NewsletterSignup from "../../components/NewletterSignup";
19+import PostPreview from "../../components/PostPreview";
20+import { name, contact } from "../../lib/constants";
21+
22+export default function Event({ post, nextPost, previousPost }) {
23+ const router = useRouter();
24+ if (!router.isFallback && !post?.slug) {
25+ return <ErrorPage />;
26+ }
27+
28+ return (
29+ <Container>
30+ <SingleColumn>
31+ <Header />
32+ <section className="flex flex-col layout-wide pt-24">
33+ <h1>{post.title}</h1>
34+ {post.extra.author ? (
35+ <div className="type-ui text-gray mt-4">{post.extra.author}</div>
36+ ) : null}
37+ {post.extra.ship ? (
38+ <div className="type-ui text-gray font-mono">{post.extra.ship}</div>
39+ ) : null}
40+ <div className="type-ui text-gray mt-16">
41+ {formatDate(new Date(post.date))}
42+ </div>
43+ </section>
44+ <article className="flex justify-center pt-12">
45+ <Markdown post={post} />
46+ </article>
47+ <section className="layout-narrow pt-24">
48+ <div className="measure">
49+ <h4 className="pb-6">
50+ If you’d like to follow our progress, we send monthly updates via
51+ email:
52+ </h4>
53+ </div>
54+ <NewsletterSignup color="black" />
55+ <h4 className="mt-12 text-gray">
56+ Follow us on{" "}
57+ <a className="text-black" href={contact.twitter}>
58+ Twitter
59+ </a>
60+ </h4>
61+ <h4 className="mt-6 text-gray">
62+ Explore code on{" "}
63+ <a className="text-black" href={contact.github}>
64+ Github
65+ </a>
66+ </h4>
67+ <h4 className="mt-6 text-gray">
68+ Ask questions in our{" "}
69+ <a className="text-black" href={contact.discord}>
70+ Discord
71+ </a>
72+ </h4>
73+ <h4 className="mt-6 text-gray">
74+ Boot Urbit and join{" "}
75+ <code className="bg-wall p-2 rounded-lg">
76+ {contact.urbitCommunity}
77+ </code>
78+ </h4>
79+ </section>
80+ <section className="layout-wide pt-24 flex">
81+ {previousPost === null ? (
82+ <div className={"w-1/2 mr-4"} />
83+ ) : (
84+ <PostPreview
85+ title="Previous Post"
86+ post={previousPost}
87+ className="mr-4 w-1/2"
88+ />
89+ )}
90+ {nextPost === null ? (
91+ <div className={"w-1/2 ml-4"} />
92+ ) : (
93+ <PostPreview
94+ title="Next Post"
95+ post={nextPost}
96+ className="ml-4 w-1/2"
97+ />
98+ )}
99+ </section>
100+ </SingleColumn>
101+ <Footer />
102+ </Container>
103+ );
104+}
105+
106+//
107+export async function getStaticProps({ params }) {
108+ const nextPost =
109+ getNextPost(
110+ params.slug,
111+ ["title", "slug", "date", "description", "extra"],
112+ "events"
113+ ) || null;
114+
115+ const previousPost =
116+ getPreviousPost(
117+ params.slug,
118+ ["title", "slug", "date", "description", "extra"],
119+ "events"
120+ ) || null;
121+
122+ const post = getPostBySlug(
123+ params.slug,
124+ ["title", "slug", "date", "description", "content", "extra"],
125+ "events"
126+ );
127+
128+ return {
129+ props: { post, nextPost, previousPost },
130+ };
131+}
132+
133+export async function getStaticPaths() {
134+ const posts = getAllPosts(["slug", "date"], "events");
135+
136+ return {
137+ paths: posts.map((post) => {
138+ return {
139+ params: {
140+ slug: post.slug,
141+ },
142+ };
143+ }),
144+ fallback: false,
145+ };
146+}