7b5b982 · urbit.org · git.iko.soy

git.iko.soy/urbit.org

on master help sign in

pages, components: amend all references to docs

7b5b982Matilde Park4 years ago

components/ContentArea.js+1−2

compare with master

unifiedsplit

@@ -1,7 +1,6 @@

1−import { Section } from "foundation-design-system";

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

1import { useState, useEffect, useRef } from "react";

3import { useRouter } from "next/router";

2import { useRouter } from "next/router";

4−import { TableOfContents } from "./TableOfContents";

3+import { TableOfContents } from "foundation-design-system";

6export default function ContentArea(props) {

5export default function ContentArea(props) {

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

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

components/Header.js−14

@@ -47,13 +47,6 @@ export default function Header(props) {

47 // Large screen header

48 }

49 <nav className="items-center hidden md:flex">

50− <ActiveLink

51− currentPath={currentPath}

52− className="mr-5 type-ui"

53− href="/docs"

54− >

55− Docs

56− </ActiveLink>

57 <ActiveLink

50 <ActiveLink

58 currentPath={currentPath}

51 currentPath={currentPath}

59 className="mr-5 type-ui"

52 className="mr-5 type-ui"

@@ -98,13 +91,6 @@ export default function Header(props) {

98 <Link href="/" passHref>

91 <Link href="/" passHref>

99 <a className="type-ui mb-12">Urbit</a>

92 <a className="type-ui mb-12">Urbit</a>

100 </Link>

93 </Link>

101− <ActiveLink

102− currentPath={currentPath}

103− className="mr-5 mb-4 type-h3"

104− href="/docs"

105− >

106− Docs

107− </ActiveLink>

108 <ActiveLink

94 <ActiveLink

109 currentPath={currentPath}

95 currentPath={currentPath}

110 className="mr-5 mb-4 type-h3"

96 className="mr-5 mb-4 type-h3"

lib/constants.js+1−1

@@ -110,7 +110,7 @@ export const footerData = [

110 {

111 title: "Develop",

112 links: [

113− { title: "Documentation", href: "/docs" },

113+ { title: "Documentation", href: "https://developers.urbit.org" },

114 { title: "GitHub", href: "https://github.com/urbit" },

115 {

116 title: "Airlock APIs",

pages/docs/[[...slug]].jsdeleted−236

@@ -1,236 +0,0 @@

1−import Head from "next/head";

2−import Link from "next/link";

3−import { useRouter } from "next/router";

4−import { useState } from "react";

5−import classnames from "classnames";

6−import { join } from "path";

7−import { getPreviousPost, getNextPost, getPage } from "../../lib/lib";

8−import Meta from "../../components/Meta";

9−import Pagination from "../../components/Pagination";

10−import { Markdown } from "foundation-design-system";

11−import ContentArea from "../../components/ContentArea";

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

13−import docsPageTree from "../../cache/docs.json";

14−

15−const breadcrumbs = (posts, paths) => {

16− const results = [

17− <Link href="/">Urbit</Link>,

18− <span className="px-1">/</span>,

19− <Link href="/docs">Documentation</Link>,

20− ];

21− let thisLink = "/docs";

22− for (const path of paths) {

23− posts = posts.children[path];

24− thisLink = join(thisLink, path);

25− results.push(

26− <span className="px-1">/</span>,

27− <Link href={thisLink}>{posts.title}</Link>

28− );

29− }

30− return results;

31−};

32−

33−const childPages = (thisLink, children, level = 0) => (

34− <ul className="pl-0">

35− {Object.entries(children).map(([childSlug, child]) => (

36− <li>{pageTree(join(thisLink, childSlug), child, level)}</li>

37− ))}

38− </ul>

39−);

40−

41−const pageTree = (thisLink, tree, level = 0) => {

42− const router = useRouter();

43− const firstCrumb = "/" + router.asPath.split("/").slice(1, -1).join("/");

44−

45− const includesThisPage = firstCrumb.includes(thisLink);

46− const isThisPage = router.asPath === thisLink;

47− const [isOpen, toggleTree] = useState(includesThisPage);

48−

49− const activeClasses = classnames({

50− hidden: !isOpen,

51− });

52−

53− const headingItemClasses = classnames({

54− "pl-0 text-wall-600 text-base font-semibold hover:text-green-400 leading-relaxed":

55− level === 0,

56− "pl-4 text-wall-600 text-base font-semibold hover:text-green-400":

57− level === 1,

58− "pl-8 text-wall-600 text-base hover:text-green-400": level === 2,

59− });

60−

61− const pageItemClasses = classnames({

62− "pl-4 text-base hover:text-green-400": level === 0,

63− "pl-8 text-base hover:text-green-400": level === 1,

64− "pl-12 text-base hover:text-green-400": level === 2,

65− });

66−

67− return (

68− <>

69− <span onClick={() => toggleTree(!isOpen)}>

70− <p className={`${headingItemClasses} cursor-pointer`}>{tree.title}</p>

71− </span>

72− <div className={activeClasses}>

73− <ul className={""}>

74− {tree.pages.map(({ title, slug }) => {

75− const href = join(thisLink, slug);

76− const isSelected = router.asPath === href;

77− const selectedClasses = classnames({

78− dot: isSelected,

79− "text-green-400": isSelected,

80− "text-wall-600": !isSelected,

81− });

82− return (

83− <li>

84− <Link href={href} passHref>

85− <a

86− className={`relative inline-block ${selectedClasses} ${pageItemClasses} `}

87− >

88− {title}

89− </a>

90− </Link>

91− </li>

92− );

93− })}

94− </ul>

95− {childPages(thisLink, tree.children, level + 1)}

96− </div>

97− </>

98− );

99−};

100−

101−export default function DocsLayout({

102− posts,

103− data,

104− params,

105− search,

106− markdown,

107− previousPost,

108− nextPost,

109−}) {

110− const router = useRouter();

111−

112− const isSelected = "/docs".includes(router.asPath);

113− const selectedClasses = classnames({

114− dot: isSelected,

115− "text-green-400": isSelected,

116− "text-wall-600": !isSelected,

117− });

118− const rootClasses = "pl-0 text-base hover:text-green-400";

119−

120− return (

121− <>

122− <Head>

123− <title>{data.title} • Documentation • urbit.org</title>

124− {Meta(data)}

125− </Head>

126− <div className="flex h-screen min-h-screen w-screen sidebar">

127− <Sidebar search={search}>

128− <ul>

129− <li>

130− <Link href="/docs" passHref>

131− <a className={`relative ${selectedClasses} ${rootClasses}`}>

132− Introduction

133− </a>

134− </Link>

135− </li>

136− </ul>

137− {childPages("/docs", posts.children)}

138− </Sidebar>

139− <ContentArea

140− breadcrumbs={breadcrumbs(posts, params.slug?.slice(0, -1) || "")}

141− title={data.title}

142− search={search}

143− section="Urbit Documentation"

144− params={params}

145− >

146− <div className="markdown technical">

147− <Markdown.render content={JSON.parse(markdown)} />

148− </div>

149− <div className="flex justify-between mt-16">

150− {previousPost === null ? (

151− <div className={""} />

152− ) : (

153− <Pagination

154− previous

155− title="Previous Post"

156− post={previousPost}

157− className=""

158− section={join("docs", params.slug?.slice(0, -1).join("/"))}

159− />

160− )}

161− {nextPost === null ? (

162− <div className={""} />

163− ) : (

164− <Pagination

165− next

166− title="Next Post"

167− post={nextPost}

168− className=""

169− section={join("docs", params.slug?.slice(0, -1).join("/"))}

170− />

171− )}

172− </div>

173− <a

174− className="font-semibold rounded-xl block p-2 text-wall-400 hover:text-green-400 mt-16"

175− target="_blank"

176− href={`https://github.com/urbit/urbit.org/blob/master/content/docs/${

177− params.slug?.join("/") || "_index"

178− }.md`}

179− >

180− Edit this page on GitHub

181− </a>

182− </ContentArea>

183− </div>

184− </>

185− );

186−}

187−

188−export async function getStaticProps({ params }) {

189− const posts = docsPageTree;

190−

191− const { data, content } = getPage(

192− join(process.cwd(), "content/docs", params.slug?.join("/") || "/")

193− );

194−

195− const previousPost =

196− getPreviousPost(

197− params.slug?.slice(-1).join("") || "docs",

198− ["title", "slug", "weight"],

199− join("docs", params.slug?.slice(0, -1).join("/") || "/"),

200− "weight"

201− ) || null;

202−

203− const nextPost =

204− getNextPost(

205− params.slug?.slice(-1).join("") || "docs",

206− ["title", "slug", "weight"],

207− join("docs", params.slug?.slice(0, -1).join("/") || "/"),

208− "weight"

209− ) || null;

210−

211− const markdown = JSON.stringify(Markdown.parse({ post: { content } }));

212− return { props: { posts, data, markdown, previousPost, nextPost, params } };

213−}

214−

215−export async function getStaticPaths() {

216− const posts = docsPageTree;

217− const slugs = [];

218−

219− const allHrefs = (thisLink, tree) => {

220− slugs.push(thisLink, ...tree.pages.map((e) => join(thisLink, e.slug)));

221− allHrefsChildren(thisLink, tree.children);

222− };

223−

224− const allHrefsChildren = (thisLink, children) => {

225− Object.entries(children).map(([childSlug, child]) => {

226− allHrefs(join(thisLink, childSlug), child);

227− });

228− };

229−

230− allHrefs("/docs", posts);

231−

232− return {

233− paths: slugs,

234− fallback: false,

235− };

236−}

pages/index.js+1−1

@@ -185,7 +185,7 @@ export default function Home({ posts, events, grantNumbers, search }) {

185 </Link>{" "}

186 for building on Urbit using the languages you already know.

187 </p>

188− <Link href="/docs" passHref>

188+ <Link href="https://developers.urbit.org" passHref>

189 <a className="button-lg type-ui text-white bg-wall-600 max-w-fit">

190 Read the Developer Docs

191 </a>