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