@@ -6,6 +6,8 @@ import classnames from "classnames";
66import { join } from "path";
77import { getDocs, formatDate, buildPageTree, getPage } from "../../lib/lib";
88import Markdown from "../../components/Markdown";
9+import ContentArea from "../../components/ContentArea";
10+import Sidebar from "../../components/Sidebar";
911
1012const breadcrumbs = (posts, paths) => {
1113 const results = [
@@ -38,37 +40,53 @@ const pageTree = (thisLink, tree, level = 0) => {
3840 const firstCrumb = "/" + router.asPath.split("/").slice(1, -1).join("/");
3941
4042 const includesThisPage = firstCrumb.includes(thisLink);
41− const isThisPage = firstCrumb === thisLink;
43+ const isThisPage = router.asPath === thisLink;
4244 const [isOpen, toggleTree] = useState(includesThisPage);
4345
4446 const activeClasses = classnames({
4547 hidden: !isOpen,
4648 });
4749
48− const headerClass = classnames({
49− "text-gray": !isThisPage,
50+ const headingItemClasses = classnames({
51+ "pl-0 text-black text-base font-semibold hover:text-green leading-relaxed":
52+ level === 0,
53+ "pl-4 text-black text-base font-semibold hover:text-green": level === 1,
54+ "pl-8 text-black text-base hover:text-green": level === 2,
55+ });
56+
57+ const pageItemClasses = classnames({
58+ "pl-4 text-black text-base hover:text-green": level === 0,
59+ "pl-8 text-black text-base hover:text-green": level === 1,
60+ "pl-12 text-black text-base hover:text-green": level === 2,
5061 dot: isThisPage,
5162 });
63+
5264 return (
5365 <>
54− <span
55− className={
56− "font-medium text-lg cursor-pointer hover:text-black relative " +
57− headerClass
58− }
59− onClick={() => toggleTree(!isOpen)}
60− >
61− {tree.title}
66+ <span onClick={() => toggleTree(!isOpen)}>
67+ <p className={`${headingItemClasses} cursor-pointer`}>{tree.title}</p>
6268 </span>
6369 <div className={activeClasses}>
6470 <ul className={"pl-1"}>
65− {tree.pages
66− .sort((a, b) => a.weight - b.weight)
67− .map(({ title, slug }) => (
68− <li className="font-thin py-1">
69− <Link href={join(thisLink, slug)}>{title}</Link>
71+ {tree.pages.map(({ title, slug }) => {
72+ const href = join(thisLink, slug);
73+ const isSelected = router.asPath === href;
74+ const selectedClasses = classnames({
75+ dot: isSelected,
76+ "text-green": isSelected,
77+ });
78+ return (
79+ <li>
80+ <Link href={href}>
81+ <a
82+ className={`relative ${pageItemClasses} ${selectedClasses}`}
83+ >
84+ {title}
85+ </a>
86+ </Link>
7087 </li>
71− ))}
88+ );
89+ })}
7290 </ul>
7391 {childPages(thisLink, tree.children, level + 1)}
7492 </div>
@@ -76,41 +94,6 @@ const pageTree = (thisLink, tree, level = 0) => {
7694 );
7795};
7896
79−function Sidebar(props) {
80− return (
81− <div className="flex flex-col w-72 bg-wall max-h-screen h-screen">
82− <header className="flex flex-shrink-0 justify-between items-center pl-12 pt-12 pb-8">
83− <Link href="/">
84− <a className="type-ui text-gray">Urbit.org</a>
85− </Link>
86− </header>
87− <div className="overflow-y-scroll p-12 pt-16">
88− {props.children}
89− <div className="pb-32" />
90− </div>
91− </div>
92− );
93−}
94−
95−function ContentArea(props) {
96− return (
97− <div className="w-full">
98− <header className="flex justify-between items-center px-24 pt-12 pb-8">
99− <div className="type-ui">Urbit Documentation</div>
100− <button className="button-sm bg-wall text-gray">
101− Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
102− </button>
103− </header>
104− <div className="px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
105− <div className="type-ui text-lightGray">{props.breadcrumbs}</div>
106− <h2 className="mb-16 mt-4">{props.title}</h2>
107− {props.children}
108− <div className="pb-32" />
109− </div>
110− </div>
111− );
112−}
113−
11497export default function DocsLayout({ posts, data, content, params }) {
11598 return (
11699 <>
@@ -120,7 +103,7 @@ export default function DocsLayout({ posts, data, content, params }) {
120103 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">
121104 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
122105 <ContentArea
123− breadcrumbs={breadcrumbs(posts, params.slug.slice(0, -1))}
106+ breadcrumbs={breadcrumbs(posts, params.slug?.slice(0, -1) || "")}
124107 title={data.title}
125108 >
126109 <Markdown post={{ content: content }} />
@@ -132,15 +115,18 @@ export default function DocsLayout({ posts, data, content, params }) {
132115
133116export async function getStaticProps({ params }) {
134117 const posts = buildPageTree(join(process.cwd(), "content/docs"), "weight");
118+
135119 const { data, content } = getPage(
136− join(process.cwd(), "content/docs", params.slug.join("/"))
120+ join(process.cwd(), "content/docs", params.slug?.join("/") || "/")
137121 );
122+
138123 return { props: { posts, data, content, params } };
139124}
140125
141126export async function getStaticPaths() {
142127 const posts = buildPageTree(join(process.cwd(), "content/docs"), "weight");
143128 const slugs = [];
129+
144130 const allHrefs = (thisLink, tree) => {
145131 slugs.push(thisLink, ...tree.pages.map((e) => join(thisLink, e.slug)));
146132 allHrefsChildren(thisLink, tree.children);
@@ -151,9 +137,11 @@ export async function getStaticPaths() {
151137 allHrefs(join(thisLink, childSlug), child);
152138 });
153139 };
140+
154141 allHrefs("/docs", posts);
142+
155143 return {
156− paths: slugs.filter((e) => e !== "/docs"),
144+ paths: slugs,
157145 fallback: false,
158146 };
159147}