@@ -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";
911import Search from "../../components/Search";
1012import { configure, GlobalHotKeys } from "react-hotkeys";
1113
@@ -40,37 +42,53 @@ const pageTree = (thisLink, tree, level = 0) => {
4042 const firstCrumb = "/" + router.asPath.split("/").slice(1, -1).join("/");
4143
4244 const includesThisPage = firstCrumb.includes(thisLink);
43− const isThisPage = firstCrumb === thisLink;
45+ const isThisPage = router.asPath === thisLink;
4446 const [isOpen, toggleTree] = useState(includesThisPage);
4547
4648 const activeClasses = classnames({
4749 hidden: !isOpen,
4850 });
4951
50− const headerClass = classnames({
51− "text-gray": !isThisPage,
52+ const headingItemClasses = classnames({
53+ "pl-0 text-black text-base font-semibold hover:text-green leading-relaxed":
54+ level === 0,
55+ "pl-4 text-black text-base font-semibold hover:text-green": level === 1,
56+ "pl-8 text-black text-base hover:text-green": level === 2,
57+ });
58+
59+ const pageItemClasses = classnames({
60+ "pl-4 text-black text-base hover:text-green": level === 0,
61+ "pl-8 text-black text-base hover:text-green": level === 1,
62+ "pl-12 text-black text-base hover:text-green": level === 2,
5263 dot: isThisPage,
5364 });
65+
5466 return (
5567 <>
56− <span
57− className={
58− "font-medium text-lg cursor-pointer hover:text-black relative " +
59− headerClass
60− }
61− onClick={() => toggleTree(!isOpen)}
62− >
63− {tree.title}
68+ <span onClick={() => toggleTree(!isOpen)}>
69+ <p className={`${headingItemClasses} cursor-pointer`}>{tree.title}</p>
6470 </span>
6571 <div className={activeClasses}>
6672 <ul className={"pl-1"}>
67− {tree.pages
68− .sort((a, b) => a.weight - b.weight)
69− .map(({ title, slug }) => (
70− <li className="font-thin py-1">
71− <Link href={join(thisLink, slug)}>{title}</Link>
73+ {tree.pages.map(({ title, slug }) => {
74+ const href = join(thisLink, slug);
75+ const isSelected = router.asPath === href;
76+ const selectedClasses = classnames({
77+ dot: isSelected,
78+ "text-green": isSelected,
79+ });
80+ return (
81+ <li>
82+ <Link href={href}>
83+ <a
84+ className={`relative ${pageItemClasses} ${selectedClasses}`}
85+ >
86+ {title}
87+ </a>
88+ </Link>
7289 </li>
73− ))}
90+ );
91+ })}
7492 </ul>
7593 {childPages(thisLink, tree.children, level + 1)}
7694 </div>
@@ -78,47 +96,6 @@ const pageTree = (thisLink, tree, level = 0) => {
7896 );
7997};
8098
81−function Sidebar(props) {
82− return (
83− <div className="flex flex-col w-72 bg-wall max-h-screen h-screen">
84− <header className="flex flex-shrink-0 justify-between items-center pl-12 pt-12 pb-8">
85− <Link href="/">
86− <a className="type-ui text-gray">Urbit.org</a>
87− </Link>
88− </header>
89− <div className="overflow-y-scroll p-12 pt-16">
90− {props.children}
91− <div className="pb-32" />
92− </div>
93− </div>
94− );
95−}
96−
97−function ContentArea(props) {
98− return (
99− <div className="w-full">
100− <header className="flex justify-between items-center px-24 pt-12 pb-8">
101− <div className="type-ui">Urbit Documentation</div>
102− <button
103− onClick={(e) => {
104− e.stopPropagation();
105− props.toggleSearch();
106− }}
107− className="button-sm bg-wall text-gray"
108− >
109− Search Urbit.org<div className="ml-4 text-lightGray">⌘K</div>
110− </button>
111− </header>
112− <div className="px-24 pb-24 pt-16 flex flex-col w-full max-h-screen h-screen overflow-y-scroll">
113− <div className="type-ui text-lightGray">{props.breadcrumbs}</div>
114− <h2 className="mb-16 mt-4">{props.title}</h2>
115− {props.children}
116− <div className="pb-32" />
117− </div>
118− </div>
119− );
120−}
121−
12299export default function DocsLayout({ posts, data, content, params }) {
123100 const [showSearch, toggleSearch] = useState(false);
124101 const toggle = () => toggleSearch((state) => !state);
@@ -137,7 +114,7 @@ export default function DocsLayout({ posts, data, content, params }) {
137114 <div className="flex w-screen h-screen min-h-screen w-screen overflow-hidden">
138115 <Sidebar>{childPages("/docs", posts.children)}</Sidebar>
139116 <ContentArea
140− breadcrumbs={breadcrumbs(posts, params.slug.slice(0, -1))}
117+ breadcrumbs={breadcrumbs(posts, params.slug?.slice(0, -1) || "")}
141118 title={data.title}
142119 toggleSearch={() => toggleSearch(true)}
143120 >
@@ -150,15 +127,18 @@ export default function DocsLayout({ posts, data, content, params }) {
150127
151128export async function getStaticProps({ params }) {
152129 const posts = buildPageTree(join(process.cwd(), "content/docs"), "weight");
130+
153131 const { data, content } = getPage(
154− join(process.cwd(), "content/docs", params.slug.join("/"))
132+ join(process.cwd(), "content/docs", params.slug?.join("/") || "/")
155133 );
134+
156135 return { props: { posts, data, content, params } };
157136}
158137
159138export async function getStaticPaths() {
160139 const posts = buildPageTree(join(process.cwd(), "content/docs"), "weight");
161140 const slugs = [];
141+
162142 const allHrefs = (thisLink, tree) => {
163143 slugs.push(thisLink, ...tree.pages.map((e) => join(thisLink, e.slug)));
164144 allHrefsChildren(thisLink, tree.children);
@@ -169,9 +149,11 @@ export async function getStaticPaths() {
169149 allHrefs(join(thisLink, childSlug), child);
170150 });
171151 };
152+
172153 allHrefs("/docs", posts);
154+
173155 return {
174− paths: slugs.filter((e) => e !== "/docs"),
156+ paths: slugs,
175157 fallback: false,
176158 };
177159}