@@ -5,77 +5,39 @@ import { useRouter } from "next/router";
55import classnames from "classnames";
66import { join } from "path";
77import { getPage } from "../../lib/lib";
8+import { decode } from "html-entities";
89import Markdown from "../../components/Markdown";
910import ContentArea from "../../components/ContentArea";
1011import Sidebar from "../../components/Sidebar";
1112import GettingStartedTree from "../../cache/getting-started.json";
1213
13−import { decode } from "html-entities";
14−
15−const breadcrumbs = (posts, paths) => {
16− const results = [
17− <Link href="/">Urbit</Link>,
18− <span className="px-1">/</span>,
19− <Link href="/getting-started">Getting Started</Link>,
20− ];
21− let thisLink = "/getting-started";
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− {children?.map((child) => (
36− <li>{pageTree(join(thisLink, child.slug), child, level)}</li>
37− ))}
38− </ul>
39−);
40−
41−const pageTree = (thisLink, tree, level = 0) => {
42− const router = useRouter();
43−
44− const isThisPage = router.asPath === thisLink;
45−
46− const pageItemClasses = classnames({
47− "pl-0 font-semibold text-wall-500 text-base hover:text-green-400":
48− level === 0,
49− "pl-8 text-wall-600 text-base hover:text-green-400": level === 1,
50− "pl-12 text-wall-600 text-base hover:text-green-400": level === 2,
51− "dot relative": isThisPage,
52− "text-green-400": isThisPage,
53− });
54−
55− if (thisLink === "/getting-started/cli") {
56− return false;
57− }
58−
59− return (
60− <>
61− <Link href={thisLink} passHref>
62− <a className={`${pageItemClasses} cursor-pointer`}>{tree.title}</a>
63− </Link>
64− </>
65− );
66−};
67−
6814export default function UsingLayout({ posts, data, params, search, markdown }) {
6915 const router = useRouter();
7016
7117 const select = (href) => {
72− const isSelected = href === router.asPath;
18+ const isSelected =
19+ `/getting-started${href === "" ? "" : `/${href}`}` === router.asPath;
7320 return classnames({
7421 dot: isSelected,
7522 "text-green-400": isSelected,
7623 "text-wall-500": !isSelected,
7724 });
7825 };
26+
27+ let menu = [{ title: "Overview", slug: "", weight: 0 }],
28+ additional = [];
29+
30+ posts.pages.map((post) => {
31+ if (post?.tag === "additional") {
32+ additional.push(post);
33+ } else {
34+ menu.push(post);
35+ }
36+ });
37+
38+ menu.sort((a, b) => a.weight > b.weight);
39+ additional.sort((a, b) => a.weight > b.weight);
40+
7941 const rootClasses = "pl-0 font-semibold text-base hover:text-green-400";
8042
8143 return (
@@ -86,35 +48,33 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {
8648 </Head>
8749 <div className="flex h-screen min-h-screen w-screen sidebar">
8850 <Sidebar search={search}>
51+ <p className="uppercase font-bold text-xs text-wall-400">
52+ Getting Started
53+ </p>
8954 <ul>
90− <li>
91− <Link href="/getting-started" passHref>
92− <a
93− className={`relative ${select(
94− "/getting-started"
95− )} ${rootClasses}`}
96− >
97− Getting Started
98− </a>
99− </Link>
100− </li>
55+ {menu.map((post) => (
56+ <li>
57+ <Link href={post.slug} passHref>
58+ <a className={`relative ${select(post.slug)} ${rootClasses}`}>
59+ {post.title}
60+ </a>
61+ </Link>
62+ </li>
63+ ))}
10164 </ul>
102− {childPages("/getting-started", posts.pages)}
10365 <ul className="mt-8">
10466 <p className="uppercase font-bold text-xs text-wall-400">
105− Advanced
67+ Additional Guides
10668 </p>
107− <li>
108− <Link href="/getting-started/cli" passHref>
109− <a
110− className={`relative ${select(
111− "/getting-started/cli"
112− )} ${rootClasses}`}
113− >
114− CLI Install
115− </a>
116− </Link>
117− </li>
69+ {additional.map((post) => (
70+ <li>
71+ <Link href={post.slug} passHref>
72+ <a className={`relative ${select(post.slug)} ${rootClasses}`}>
73+ {post.title}
74+ </a>
75+ </Link>
76+ </li>
77+ ))}
11878 </ul>
11979 </Sidebar>
12080 <ContentArea
@@ -124,28 +84,52 @@ export default function UsingLayout({ posts, data, params, search, markdown }) {
12484 search={search}
12585 section={"Getting Started"}
12686 params={params}
87+ disableToC
12788 >
12889 <div className="markdown">
12990 <article
13091 dangerouslySetInnerHTML={{ __html: decode(markdown) }}
13192 ></article>
13293 </div>
133− {!params.slug && <LaunchCards />}
94+ {!params?.slug && <LaunchCards />}
13495 </ContentArea>
13596 </div>
13697 </>
13798 );
13899}
139100
101+const breadcrumbs = (posts, paths) => {
102+ const results = [
103+ <Link href="/">Urbit</Link>,
104+ <span className="px-1">/</span>,
105+ <Link href="/getting-started">Getting Started</Link>,
106+ ];
107+ let thisLink = "/getting-started";
108+ for (const path of paths) {
109+ posts = posts.children[path];
110+ thisLink = join(thisLink, path);
111+ results.push(
112+ <span className="px-1">/</span>,
113+ <Link href={thisLink}>{posts.title}</Link>
114+ );
115+ }
116+ return results;
117+};
118+
140119function LaunchCards() {
141120 const info = [
142121 {
143− title: "Easy",
122+ title: "Desktop app",
144123 subtitle: "Deploy Urbit on your local system",
145124 points: [
146− "Zero cost to you",
147− "Set up in minutes using a desktop GUI",
148− "Not a permanent way to use Urbit",
125+ {
126+ title: "Benefits",
127+ content: ["Free", "Set up in minutes"],
128+ },
129+ {
130+ title: "Considerations",
131+ content: ["Not a permanent way to use Urbit"],
132+ },
149133 ],
150134 svg: (
151135 <svg
@@ -165,16 +149,23 @@ function LaunchCards() {
165149 />
166150 </svg>
167151 ),
168− href: "/getting-started/easy",
152+ href: "/getting-started/desktop",
169153 },
170154 {
171− title: "Fun",
155+ title: "Server setup",
172156 subtitle: "Deploy Urbit on a cloud/VPS provider",
173157 points: [
174− "Self-host and own your data",
175− "Portable identity and accessibility from anywhere",
176− "Requires investment in a planet (one-time) and cloud service (monthly)",
177− "Requires Linux proficiency",
158+ {
159+ title: "Benefits",
160+ content: ["Complete data ownership", "Accessibility from anywhere"],
161+ },
162+ {
163+ title: "Considerations",
164+ content: [
165+ "Requires monthly cloud service subscription & (one-time) Urbit ID purchase",
166+ "Requires Linux proficiency",
167+ ],
168+ },
178169 ],
179170 svg: (
180171 <svg
@@ -192,16 +183,27 @@ function LaunchCards() {
192183 />
193184 </svg>
194185 ),
195− href: "/getting-started/fun",
186+ href: "/getting-started/server",
196187 },
197188 {
198− title: "Hosted",
189+ title: "Hosted urbit",
199190 subtitle: "Deploy Urbit on a managed service",
200191 points: [
201− "Streamlined setup for ownership and identity",
202− "No technical proficiency required",
203− "Need to trust your provider",
204− "Requires monthly investment",
192+ {
193+ title: "Benefits",
194+ content: [
195+ "Accessibility from anywhere",
196+ "Streamlined setup for ownership and identity",
197+ "No technical proficiency required",
198+ ],
199+ },
200+ {
201+ title: "Considerations",
202+ content: [
203+ "Requires monthly subscription",
204+ "Requires trust in your service provider",
205+ ],
206+ },
205207 ],
206208 svg: (
207209 <svg
@@ -235,31 +237,44 @@ function LaunchCards() {
235237 />
236238 </svg>
237239 ),
238− href: "/getting-started/hosting",
240+ href: "/getting-started/hosted",
239241 },
240242 ];
241243 return (
242244 <div className="flex flex-col space-y-8 mt-8">
243245 {info.map((e) => {
244246 return (
245− <div className="py-8 bg-wall-100 rounded-xl">
247+ <div className="p-8 bg-wall-100 rounded-xl max-w-screen-md flex flex-col">
246248 <div className="flex">
247− <div className="px-8 justify-center flex">{e.svg}</div>
249+ <div className="pl-4 pr-8 justify-center items-center flex">
250+ {e.svg}
251+ </div>
248252 <div className="flex flex-col">
249− <h4>{e.title}</h4>
253+ <h4 className="text-2xl">{e.title}</h4>
250254 <p className="font-light text-lg">{e.subtitle}</p>
251− <ul className="mx-8 mt-2 list-disc text-sm flex flex-col space-y-2">
252− {e.points.map((point) => {
253− return <li>{point}</li>;
254− })}
255− </ul>
256− <Link href={e.href} passHref>
257− <a className="button-lg max-w-fit text-white mt-4 bg-green-400">
258− Get Started
259− </a>
260− </Link>
261255 </div>
262256 </div>
257+ <div className="flex mt-8">
258+ {e.points.map((section) => {
259+ return (
260+ <div className="basis-1/2">
261+ <p className="uppercase font-bold text-sm text-black">
262+ {section.title}
263+ </p>
264+ <ul className="mx-8 my-4 list-disc text-sm flex flex-col space-y-2">
265+ {section.content.map((point) => (
266+ <li>{point}</li>
267+ ))}
268+ </ul>
269+ </div>
270+ );
271+ })}
272+ </div>
273+ <Link href={e.href} passHref>
274+ <a className="button-lg max-w-fit text-white mt-4 bg-green-400">
275+ Get Started
276+ </a>
277+ </Link>
263278 </div>
264279 );
265280 })}
@@ -268,7 +283,7 @@ function LaunchCards() {
268283}
269284
270285export async function getStaticProps({ params }) {
271− const posts = GettingStartedTree;
286+ let posts = GettingStartedTree;
272287
273288 const { data, content } = getPage(
274289 join(