3accbdb · urbit.org · git.iko.soy

components/ContentArea.js+4

compare with master

unifiedsplit

@@ -1,5 +1,6 @@

1import Section from "./Section";

2import { useState, useEffect } from "react";

3+import { TableOfContents } from "./TableOfContents";

3

4

4export default function ContentArea(props) {

5export default function ContentArea(props) {

5 const [shortcut, setShortcut] = useState("");

6 const [shortcut, setShortcut] = useState("");

@@ -50,6 +51,9 @@ export default function ContentArea(props) {

50 <div className="pb-32" />

51 <div className="pb-32" />

51 </div>

52 </div>

52 )}

53 )}

54+ <TableOfContents

55+ key={props.params.slug?.join("/") || Math.random()}

56+ />

53 </div>

57 </div>

54 </div>

58 </div>

55 </div>

59 </div>

components/TableOfContents.js+1−1

@@ -8,7 +8,7 @@ export const TableOfContents = ({ staticPosition, noh3s }) => {

8 <nav

9 className={

10 (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"

12 }

13 style={{ top: "8rem", height: "calc(100vh - 16rem)" }}

14 >

pages/docs/[[...slug]].js+1−2

@@ -17,7 +17,6 @@ import ContentArea from "../../components/ContentArea";

17import Sidebar from "../../components/Sidebar";

18import markdownStyles from "../../styles/markdown.module.css";

19import { decode } from "html-entities";

20−import { TableOfContents } from "../../components/TableOfContents";

21

20

22const breadcrumbs = (posts, paths) => {

21const breadcrumbs = (posts, paths) => {

23 const results = [

22 const results = [

@@ -144,6 +143,7 @@ export default function DocsLayout({

144 title={data.title}

143 title={data.title}

145 search={search}

144 search={search}

146 section="Urbit Documentation"

145 section="Urbit Documentation"

146+ params={params}

147 >

148 <div className={markdownStyles["markdown"]}>

149 <article

@@ -175,7 +175,6 @@ export default function DocsLayout({

175 )}

176 </div>

177 </ContentArea>

178− <TableOfContents key={params.slug?.join("/") || "docs"} />

179 </div>

178 </div>

180 </>

179 </>

181 );

180 );

pages/getting-started/[[...slug]].js−2

@@ -7,7 +7,6 @@ import { join } from "path";

7import { buildPageTree, getPage } from "../../lib/lib";

8import Markdown from "../../components/Markdown";

9import ContentArea from "../../components/ContentArea";

10−import { TableOfContents } from "../../components/TableOfContents";

11import Sidebar from "../../components/Sidebar";

10import Sidebar from "../../components/Sidebar";

12import markdownStyles from "../../styles/markdown.module.css";

11import markdownStyles from "../../styles/markdown.module.css";

13import { decode } from "html-entities";

12import { decode } from "html-entities";

@@ -101,7 +100,6 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {

101 ></article>

100 ></article>

102 </div>

101 </div>

103 </ContentArea>

102 </ContentArea>

104− <TableOfContents key={params.slug?.join("/") || "getting-started"} />

105 </div>

103 </div>

106 </>

104 </>

107 );

105 );

pages/using/[[...slug]].js−2

@@ -8,7 +8,6 @@ import { join } from "path";

8import { getDocs, formatDate, buildPageTree, getPage } from "../../lib/lib";

9import Markdown from "../../components/Markdown";

10import ContentArea from "../../components/ContentArea";

11−import { TableOfContents } from "../../components/TableOfContents";

12import Sidebar from "../../components/Sidebar";

11import Sidebar from "../../components/Sidebar";

13import markdownStyles from "../../styles/markdown.module.css";

12import markdownStyles from "../../styles/markdown.module.css";

14import { decode } from "html-entities";

13import { decode } from "html-entities";

@@ -121,7 +120,6 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {

121 ></article>

120 ></article>

122 </div>

121 </div>

123 </ContentArea>

122 </ContentArea>

124− <TableOfContents key={params.slug?.join("/") || "using"} />

125 </div>

123 </div>

126 </>

124 </>

127 );

125 );