@@ -1,13 +1,52 @@
1−import Head from "next/head";
21import Link from "next/link";
3−import { useState } from "react";
4−import Container from "../components/Container";
5−import Footer from "../components/Footer";
6−import Header from "../components/Header";
7−import SingleColumn from "../components/SingleColumn";
8−import BackgroundImage from "../components/BackgroundImage";
9−import Lorem from "../components/Lorem";
10−import { getDocs, formatDate } from "../lib/lib";
2+import { useRouter } from "next/router";
3+import { join } from "path";
4+import { getDocs, formatDate, buildPageTree, getIndexPage } from "../lib/lib";
5+import Markdown from "../components/Markdown";
6+
7+const breadcrumbs = (posts, paths) => {
8+ const results = [
9+ <Link href="/">Urbit.org</Link>,
10+ <span className="px-1">/</span>,
11+ <Link href="/docs">Documentation</Link>,
12+ ];
13+ let thisLink = "/docs";
14+ for (const path of paths) {
15+ posts = posts.children[path];
16+ thisLink = join(thisLink, path);
17+ results.push(
18+ <span className="px-1">/</span>,
19+ <Link href={thisLink}>{posts.title}</Link>
20+ );
21+ }
22+ return results;
23+};
24+
25+const childPages = (thisLink, children) => (
26+ <ul className="pl-1">
27+ {Object.entries(children).map(([childSlug, child]) => (
28+ <li>{pageTree(join(thisLink, childSlug), child)}</li>
29+ ))}
30+ </ul>
31+);
32+
33+const pageTree = (thisLink, tree) => (
34+ <div>
35+ <Link href={thisLink}>
36+ <span className="font-medium text-lg cursor-pointer">{tree.title}</span>
37+ </Link>
38+ <ul className="pl-1">
39+ {tree.pages
40+ .sort((a, b) => a.weight - b.weight)
41+ .map(({ title, slug }) => (
42+ <li className="font-thin py-1">
43+ <Link href={join(thisLink, slug)}>{title}</Link>
44+ </li>
45+ ))}
46+ </ul>
47+ {childPages(thisLink, tree.children)}
48+ </div>
49+);
1150
1251function Sidebar(props) {
1352 return (
@@ -32,8 +71,8 @@ function ContentArea(props) {
3271 <div className="type-ui">Install Urbit</div>
3372 </header>
3473 <div className="px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
35− <div className="type-ui text-lightGray">Breadcrumbs/go/here</div>
36− <h2 className="mb-16 mt-4">Getting Started</h2>
74+ <div className="type-ui text-lightGray">{props.breadcrumbs}</div>
75+ <h2 className="mb-16 mt-4">{props.title}</h2>
3776 {props.children}
3877 <div className="pb-32" />
3978 </div>
@@ -41,29 +80,21 @@ function ContentArea(props) {
4180 );
4281}
4382
44−export default function DocsLayout({ posts }) {
83+export default function DocsLayout({ posts, data, content }) {
4584 return (
4685 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">
47− <Sidebar>
48− <Lorem />
49− </Sidebar>
50− <ContentArea>
51− <Lorem />
86+ <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
87+ <ContentArea breadcrumbs={breadcrumbs(posts, [])} title={data.title}>
88+ <Markdown post={{ content: content }} />
5289 </ContentArea>
5390 </div>
5491 );
5592}
5693
57−// export async function getStaticProps() {
58−// const docs = getAllPosts([
59−// 'title',
60−// 'slug',
61−// 'date',
62−// 'description',
63−// 'extra',
64−// ], 'docs')
65−//
66−// return {
67−// props: { posts },
68−// }
69−// }
94+export async function getStaticProps() {
95+ const posts = buildPageTree(join(process.cwd(), "content/docs"));
96+ const { data, content } = getIndexPage(
97+ join(process.cwd(), "content/docs", "_index.md")
98+ );
99+ return { props: { posts, data, content } };
100+}