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