git.iko.soy/urbit.org
on 16c28fa help sign in
urbit.org/components/ecosystem/BasicPage.js
146 lines 4.6 kB history raw
1import { useRouter } from "next/router";
2import Head from "next/head";
3import Link from "next/link";
4import Meta from "../Meta";
5import ErrorPage from "../../pages/404";
6import classnames from "classnames";
7import {
8 Container,
9 SingleColumn,
10 Section,
11 Markdown,
12 IntraNav,
13} from "@urbit/foundation-design-system";
14import Header from "../Header";
15import Footer from "../Footer";
16import MetadataBlock from "./MetadataBlock";
18export default function BasicPage({
19 section,
20 post,
21 markdown,
22 search,
23 children,
24}) {
25 const router = useRouter();
26 if (!router.isFallback && !post?.slug) {
27 return <ErrorPage />;
28 }
29 const metaPost = Object.assign({}, post);
30 metaPost.title = `${post.title} - ${section}`;
31 metaPost.description =
32 section === "Podcast" ? `${post.podcast} - ${post.date}` : post.description;
33 section === "Article" ? `${post.publication} - ${post.date}` : post.description;
34 return (
35 <Container>
36 <Head>
37 <title>
38 {post.title} • {section}
39 </title>
40 {Meta(metaPost)}
41 </Head>
42 <IntraNav ourSite="https://urbit.org" search={search} />
43 <SingleColumn>
44 <Header search={search} />
45 <Section narrow className="space-y-12">
46 <div className="flex items-center space-x-4">
47 <img src={post.image} className="w-36" />
48 <div className="flex flex-col pl-2">
49 <h1 className="text-3xl">
50 {post.title}
51 </h1>
52 <p>{section}</p>
53 </div>
54 </div>
55 {/* General purpose metadata bar -- podcast listen button is special-cased URL, flexed at the end of the row */}
56 <div className="flex justify-between">
57 <div className="flex space-x-12">
58 {post?.podcast && (
59 <MetadataBlock
60 title="Podcast"
61 content={post.podcast}
62 />
63 )}
64 {post?.publication && (
65 <MetadataBlock
66 title="Publication"
67 content={post.publication}
68 />
69 )}
70 {post?.author && (
71 <MetadataBlock
72 title="Author"
73 content={post.author}
74 />
75 )}
76 {post?.date && (
77 <MetadataBlock
78 title="Date"
79 content={post.date}
80 />
81 )}
83 {post?.twitter && (
84 <div className="flex flex-col">
85 <p className="font-bold text-wall-400">Twitter</p>
86 <Link href={"http://twitter.com/" + post.twitter}>
87 <a className="text-green-400 text-sm font-semibold font-mono">@{post.twitter}</a>
88 </Link>
89 </div>
90 )}
93 {post?.URL && section !== "Podcast" && section !== "Article" && (
94 <div className="flex flex-col">
95 <p className="font-bold text-wall-400">Website</p>
96 <a
97 className="text-green-400 text-sm font-semibold font-mono"
98 href={post.URL}
99 >
100 {post.URL.slice(post.URL.indexOf("://") + 3)}
101 </a>
102 </div>
103 )}
105 {post?.URL && section === "Urbit Marketplace" && (
106 <div className="flex flex-col">
107 <p className="font-bold text-wall-400">Accepts</p>
108 <p className="text-sm font-semibold font-mono">
109 {post.payment.join(", ")}
110 </p>
111 </div>
112 )}
113 </div>
117 {post?.URL && section === "Podcast" && (
118 <a
119 href={post.URL}
120 className="button-lg bg-green-400 text-white cursor-pointer flex space-x-2"
121 >
122 <img src="/images/sound.svg" />
123 &nbsp;Listen
124 </a>
125 )}
126 {post?.URL && section === "Article" && (
127 <a
128 href={post.URL}
129 className="button-lg bg-green-400 text-white cursor-pointer flex space-x-2"
130 >
131 Read
132 </a>
133 )}
134 </div>
135 <div className="flex">
136 <div className="markdown w-full">
137 <Markdown.render content={JSON.parse(markdown)} />
138 {children}
139 </div>
140 </div>
141 </Section>
142 </SingleColumn>
143 <Footer />
144 </Container>
145 );