@@ -0,0 +1,126 @@
1+import Link from "next/link";
2+import { useRouter } from "next/router";
3+import { join } from "path";
4+import {
5+ getDocs,
6+ formatDate,
7+ buildPageTree,
8+ getIndexPage,
9+} from "../../lib/lib";
10+import Markdown from "../../components/Markdown";
11+
12+const breadcrumbs = (posts, paths) => {
13+ const results = [
14+ <Link href="/">Urbit.org</Link>,
15+ <span className="px-1">/</span>,
16+ <Link href="/docs">Documentation</Link>,
17+ ];
18+ let thisLink = "/docs";
19+ for (const path of paths) {
20+ posts = posts.children[path];
21+ thisLink = join(thisLink, path);
22+ results.push(
23+ <span className="px-1">/</span>,
24+ <Link href={thisLink}>{posts.title}</Link>
25+ );
26+ }
27+ return results;
28+};
29+
30+const childPages = (thisLink, children) => (
31+ <ul className="pl-1">
32+ {Object.entries(children).map(([childSlug, child]) => (
33+ <li>{pageTree(join(thisLink, childSlug), child)}</li>
34+ ))}
35+ </ul>
36+);
37+
38+const pageTree = (thisLink, tree) => (
39+ <div>
40+ <Link href={thisLink}>
41+ <span className="font-medium text-lg cursor-pointer">{tree.title}</span>
42+ </Link>
43+ <ul className="pl-1">
44+ {tree.pages
45+ .sort((a, b) => a.weight - b.weight)
46+ .map(({ title, slug }) => (
47+ <li className="font-thin py-1">
48+ <Link href={join(thisLink, slug)}>{title}</Link>
49+ </li>
50+ ))}
51+ </ul>
52+ {childPages(thisLink, tree.children)}
53+ </div>
54+);
55+
56+function Sidebar(props) {
57+ return (
58+ <div className="flex flex-col w-72 bg-wall max-h-screen h-screen">
59+ <header className="flex justify-between items-center pl-12 pt-8 pb-8">
60+ <Link href="/">
61+ <a className="type-ui">Urbit</a>
62+ </Link>
63+ </header>
64+ <div className="overflow-y-scroll p-12 pt-16">
65+ {props.children}
66+ <div className="pb-32" />
67+ </div>
68+ </div>
69+ );
70+}
71+
72+function ContentArea(props) {
73+ return (
74+ <div className="w-full">
75+ <header className="flex justify-between items-center px-24 pt-8 pb-8">
76+ <div className="type-ui">Install Urbit</div>
77+ </header>
78+ <div className="px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
79+ <div className="type-ui text-lightGray">{props.breadcrumbs}</div>
80+ <h2 className="mb-16 mt-4">{props.title}</h2>
81+ {props.children}
82+ <div className="pb-32" />
83+ </div>
84+ </div>
85+ );
86+}
87+
88+export default function DocsLayout({ posts, data, content }) {
89+ return (
90+ <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">
91+ <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
92+ <ContentArea breadcrumbs={breadcrumbs(posts, [])} title={data.title}>
93+ <Markdown post={{ content: content }} />
94+ </ContentArea>
95+ </div>
96+ );
97+}
98+
99+export async function getStaticProps() {
100+ const posts = buildPageTree(join(process.cwd(), "content/docs"));
101+ const { data, content } = getIndexPage(
102+ join(process.cwd(), "content/docs", "_index.md")
103+ );
104+ return { props: { posts, data, content } };
105+}
106+
107+export async function getStaticPaths() {
108+ const posts = buildPageTree(join(process.cwd(), "content/docs"));
109+ const slugs = [];
110+ const allHrefs = (thisLink, tree) => {
111+ slugs.push(thisLink, ...tree.pages.map((e) => join(thisLink, e.slug)));
112+ allHrefsChildren(thisLink, tree.children);
113+ };
114+
115+ const allHrefsChildren = (thisLink, children) => {
116+ Object.entries(children).map(([childSlug, child]) => {
117+ allHrefs(join(thisLink, childSlug), child);
118+ });
119+ };
120+ allHrefs("/docs", posts);
121+ console.log(slugs);
122+ return {
123+ paths: slugs.filter((e) => e !== "/docs"),
124+ fallback: false,
125+ };
126+}