git.iko.soy/urbit.org
on master help sign in
Merge pull request #746 from urbit/mp/docs/side-nav-scroll

docs, contentarea: insert toc inside contentarea

commitd8a056599f00b57ac229e06d67aeae32b17de110 authorédouard <edouard@urcad.es> dateThu 29 Jul 2021, 14:21 (5 years ago) parent3523ab4bba336c
7 files changed+10−7
compare with master
unifiedsplit
components/ContentArea.js+4 components/TableOfContents.js+1−1 pages/community/[[...slug]].js+1 pages/docs/[[...slug]].js+1−2 pages/getting-started/[[...slug]].js+1−2 pages/understanding-urbit/[[...slug]].js+1 pages/using/[[...slug]].js+1−2
components/ContentArea.js+4
@@ -1,5 +1,6 @@
11import Section from "./Section";
22import { useState, useEffect } from "react";
3+import { TableOfContents } from "./TableOfContents";
34
45export default function ContentArea(props) {
56 const [shortcut, setShortcut] = useState("");
@@ -50,6 +51,9 @@ export default function ContentArea(props) {
5051 <div className="pb-32" />
5152 </div>
5253 )}
54+ <TableOfContents
55+ key={props.params.slug?.join("/") || Math.random()}
56+ />
5357 </div>
5458 </div>
5559 </div>
components/TableOfContents.js+1−1
@@ -8,7 +8,7 @@ export const TableOfContents = ({ staticPosition, noh3s }) => {
88 <nav
99 className={
1010 (staticPosition ? "static" : "sticky") +
11− " min-h-0 overflow-y-auto w-52 flex-shrink-0 pb-24 hidden lg:block"
11+ " min-h-0 overflow-y-auto w-52 flex-shrink-0 pb-24 hidden lg:block pl-4"
1212 }
1313 style={{ top: "8rem", height: "calc(100vh - 16rem)" }}
1414 >
pages/community/[[...slug]].js+1
@@ -76,6 +76,7 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {
7676 title={data.title}
7777 search={search}
7878 section={"Community"}
79+ params={params}
7980 >
8081 <div className={markdownStyles["markdown"]}>
8182 <article
pages/docs/[[...slug]].js+1−2
@@ -17,7 +17,6 @@ import ContentArea from "../../components/ContentArea";
1717import Sidebar from "../../components/Sidebar";
1818import markdownStyles from "../../styles/markdown.module.css";
1919import { decode } from "html-entities";
20−import { TableOfContents } from "../../components/TableOfContents";
2120
2221const breadcrumbs = (posts, paths) => {
2322 const results = [
@@ -144,6 +143,7 @@ export default function DocsLayout({
144143 title={data.title}
145144 search={search}
146145 section="Urbit Documentation"
146+ params={params}
147147 >
148148 <div className={markdownStyles["markdown"]}>
149149 <article
@@ -175,7 +175,6 @@ export default function DocsLayout({
175175 )}
176176 </div>
177177 </ContentArea>
178− <TableOfContents key={params.slug?.join("/") || "docs"} />
179178 </div>
180179 </>
181180 );
pages/getting-started/[[...slug]].js+1−2
@@ -7,7 +7,6 @@ import { join } from "path";
77import { buildPageTree, getPage } from "../../lib/lib";
88import Markdown from "../../components/Markdown";
99import ContentArea from "../../components/ContentArea";
10−import { TableOfContents } from "../../components/TableOfContents";
1110import Sidebar from "../../components/Sidebar";
1211import markdownStyles from "../../styles/markdown.module.css";
1312import { decode } from "html-entities";
@@ -94,6 +93,7 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {
9493 title={data.title}
9594 search={search}
9695 section={"Getting Started"}
96+ params={params}
9797 >
9898 <div className={markdownStyles["markdown"]}>
9999 <article
@@ -101,7 +101,6 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {
101101 ></article>
102102 </div>
103103 </ContentArea>
104− <TableOfContents key={params.slug?.join("/") || "getting-started"} />
105104 </div>
106105 </>
107106 );
pages/understanding-urbit/[[...slug]].js+1
@@ -106,6 +106,7 @@ export default function UnderstandingLayout({
106106 title={data.title}
107107 search={search}
108108 section={"Understanding Urbit"}
109+ params={params}
109110 >
110111 <div className={markdownStyles["markdown"]}>
111112 <article
pages/using/[[...slug]].js+1−2
@@ -8,7 +8,6 @@ import { join } from "path";
88import { getDocs, formatDate, buildPageTree, getPage } from "../../lib/lib";
99import Markdown from "../../components/Markdown";
1010import ContentArea from "../../components/ContentArea";
11−import { TableOfContents } from "../../components/TableOfContents";
1211import Sidebar from "../../components/Sidebar";
1312import markdownStyles from "../../styles/markdown.module.css";
1413import { decode } from "html-entities";
@@ -114,6 +113,7 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {
114113 title={data.title}
115114 search={search}
116115 section={"Operator's Manual"}
116+ params={params}
117117 >
118118 <div className={markdownStyles["markdown"]}>
119119 <article
@@ -121,7 +121,6 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {
121121 ></article>
122122 </div>
123123 </ContentArea>
124− <TableOfContents key={params.slug?.join("/") || "using"} />
125124 </div>
126125 </>
127126 );