Skip to content

Commit 50c3705

Browse files
ryyppyryyppy
committed
Unify sidebar experience for docs / apis, add v8.0.0 api layouts and content
1 parent 20c680f commit 50c3705

File tree

110 files changed

+29660
-798
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

110 files changed

+29660
-798
lines changed

‎common/App.re

Lines changed: 31 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -75,18 +75,38 @@ let default = (props: props): React.element => {
7575
| {base: [|"docs", "gentype"|], version: Latest} =>
7676
<GenTypeDocsLayout> content </GenTypeDocsLayout>
7777
// apis routes
78-
| {base: [|"apis"|], version: Latest, pagepath} =>
79-
switch (Belt.Array.length(pagepath), Belt.Array.get(pagepath, 0)) {
80-
| (0, _) => <ApiOverviewLayout.Docs> content </ApiOverviewLayout.Docs>
81-
| (1, Some("js")) => <JsDocsLayout.Prose> content </JsDocsLayout.Prose>
82-
| (1, Some("belt")) =>
83-
<BeltDocsLayout.Prose> content </BeltDocsLayout.Prose>
84-
| (_, Some("js")) => <JsDocsLayout.Docs> content </JsDocsLayout.Docs>
85-
| (_, Some("belt")) =>
86-
<BeltDocsLayout.Docs> content </BeltDocsLayout.Docs>
87-
| (_, Some("dom")) => <DomDocsLayout.Docs> content </DomDocsLayout.Docs>
88-
| _ => React.null
78+
| {base: [|"apis"|], version, pagepath} =>
79+
switch (version) {
80+
| Latest =>
81+
switch (Belt.Array.length(pagepath), Belt.Array.get(pagepath, 0)) {
82+
| (0, _) => <ApiOverviewLayout.Docs> content </ApiOverviewLayout.Docs>
83+
| (1, Some("js")) => <JsDocsLayout.Prose> content </JsDocsLayout.Prose>
84+
| (1, Some("belt")) =>
85+
<BeltDocsLayout.Prose> content </BeltDocsLayout.Prose>
86+
| (_, Some("js")) => <JsDocsLayout.Docs> content </JsDocsLayout.Docs>
87+
| (_, Some("belt")) =>
88+
<BeltDocsLayout.Docs> content </BeltDocsLayout.Docs>
89+
| (_, Some("dom")) => <DomDocsLayout.Docs> content </DomDocsLayout.Docs>
90+
| _ => React.null
91+
}
92+
| Version("v8.0.0") =>
93+
switch (Belt.Array.length(pagepath), Belt.Array.get(pagepath, 0)) {
94+
| (0, _) =>
95+
<ApiOverviewLayout8_0_0.Docs> content </ApiOverviewLayout8_0_0.Docs>
96+
| (1, Some("js")) =>
97+
<JsDocsLayout8_0_0.Prose> content </JsDocsLayout8_0_0.Prose>
98+
| (1, Some("belt")) =>
99+
<BeltDocsLayout8_0_0.Prose> content </BeltDocsLayout8_0_0.Prose>
100+
| (_, Some("js")) =>
101+
<JsDocsLayout8_0_0.Docs> content </JsDocsLayout8_0_0.Docs>
102+
| (_, Some("belt")) =>
103+
<BeltDocsLayout8_0_0.Docs> content </BeltDocsLayout8_0_0.Docs>
104+
| (_, Some("dom")) => <DomDocsLayout8_0_0.Docs> content </DomDocsLayout8_0_0.Docs>
105+
| _ => React.null
106+
}
107+
| _ => content
89108
}
109+
90110
// common routes
91111
| {base} =>
92112
switch (Belt.List.fromArray(base)) {

‎components/VersionSelect.re

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
open Util.ReactStuff;
2+
3+
[@react.component]
4+
let make =
5+
(
6+
~onChange,
7+
~version: string,
8+
~latestVersionLabel: string,
9+
~availableVersions: array(string),
10+
) => {
11+
let children =
12+
Belt.Array.map(
13+
availableVersions,
14+
ver => {
15+
let label = ver === "latest" ? latestVersionLabel : ver;
16+
<option className="py-4" key=ver value=ver> label->s </option>;
17+
},
18+
);
19+
<select
20+
className="text-14 border border-fire inline-block rounded px-4 py-1 font-semibold "
21+
name="versionSelection"
22+
value=version
23+
onChange>
24+
children->ate
25+
</select>;
26+
};

‎layouts/ApiLayout.re

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
module Link = Next.Link;
2+
open Util.ReactStuff;
3+
4+
// This is used for the version dropdown in the api layouts
5+
let allApiVersions = [|"latest", "v8.0.0"|];
6+
7+
// Used for replacing "latest" with "vX.X.X" in the version dropdown
8+
let latestVersionLabel = "v8.2.0";
9+
10+
module Sidebar = SidebarLayout.Sidebar;
11+
module Toc = SidebarLayout.Toc;
12+
13+
module OldDocsWarning = {
14+
[@react.component]
15+
let make = (~version: string, ~route: string) => {
16+
let url = Url.parse(route);
17+
let latestUrl =
18+
"/"
19+
++ Js.Array2.joinWith(url.base, "/")
20+
++ "/latest/"
21+
++ Js.Array2.joinWith(url.pagepath, "/");
22+
Markdown.(
23+
<div className="mb-10">
24+
<Info>
25+
<P>
26+
{(
27+
"You are currently looking at the "
28+
++ version
29+
++ " docs (Reason v3.6 syntax edition). You can find the latest API docs "
30+
)
31+
->s}
32+
<A href=latestUrl> "here"->s </A>
33+
"."->s
34+
</P>
35+
</Info>
36+
</div>
37+
);
38+
};
39+
};
40+
41+
[@react.component]
42+
let make =
43+
(
44+
~breadcrumbs=?,
45+
~categories: array(Sidebar.Category.t),
46+
~title="",
47+
~version: option(string)=?,
48+
~activeToc: option(Toc.t)=?,
49+
~components=ApiMarkdown.default,
50+
~children,
51+
) => {
52+
let router = Next.Router.useRouter();
53+
let route = router.route;
54+
55+
let (isSidebarOpen, setSidebarOpen) = React.useState(_ => false);
56+
let toggleSidebar = () => setSidebarOpen(prev => !prev);
57+
58+
React.useEffect1(
59+
() => {
60+
open Next.Router.Events;
61+
let {Next.Router.events} = router;
62+
63+
let onChangeComplete = _url => {
64+
setSidebarOpen(_ => false);
65+
};
66+
67+
events->on(`routeChangeComplete(onChangeComplete));
68+
events->on(`hashChangeComplete(onChangeComplete));
69+
70+
Some(
71+
() => {
72+
events->off(`routeChangeComplete(onChangeComplete));
73+
events->off(`hashChangeComplete(onChangeComplete));
74+
},
75+
);
76+
},
77+
[||],
78+
);
79+
80+
let preludeSection =
81+
<div
82+
className="flex justify-between text-primary font-medium items-baseline">
83+
title->s
84+
{switch (version) {
85+
| Some(version) =>
86+
let onChange = evt => {
87+
open Url;
88+
ReactEvent.Form.preventDefault(evt);
89+
let version = evt->ReactEvent.Form.target##value;
90+
let url = Url.parse(route);
91+
92+
let targetUrl =
93+
"/"
94+
++ Js.Array2.joinWith(url.base, "/")
95+
++ "/"
96+
++ version
97+
++ "/"
98+
++ Js.Array2.joinWith(url.pagepath, "/");
99+
router->Next.Router.push(targetUrl);
100+
};
101+
<VersionSelect
102+
latestVersionLabel
103+
onChange
104+
version
105+
availableVersions=allApiVersions
106+
/>;
107+
| None => React.null
108+
}}
109+
</div>;
110+
111+
let sidebar =
112+
<Sidebar
113+
preludeSection
114+
isOpen=isSidebarOpen
115+
toggle=toggleSidebar
116+
categories
117+
?activeToc
118+
route
119+
/>;
120+
121+
let pageTitle =
122+
switch (breadcrumbs) {
123+
| Some([_, {SidebarLayout.UrlPath.name}]) => name
124+
| Some([_, _, {name}]) => "Js." ++ name
125+
| _ => "Js"
126+
};
127+
<SidebarLayout
128+
?breadcrumbs
129+
metaTitle={pageTitle ++ " | ReScript API"}
130+
theme=`Reason
131+
components
132+
sidebarState=(isSidebarOpen, setSidebarOpen)
133+
sidebar>
134+
children
135+
</SidebarLayout>;
136+
};

‎layouts/ApiOverviewLayout.re

Lines changed: 20 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,30 @@
11
module Link = Next.Link;
22

3-
module Sidebar = SidebarLayout.Sidebar;
3+
module Sidebar = DocsLayout.Sidebar;
4+
5+
let categories: array(Sidebar.Category.t) = [|
6+
{
7+
name: "Introduction",
8+
items: [|{name: "Overview", href: "/apis/latest"}|],
9+
},
10+
{
11+
name: "Modules",
12+
items: [|
13+
{name: "Js Module", href: "/apis/latest/js"},
14+
{name: "Belt Stdlib", href: "/apis/latest/belt"},
15+
{name: "Dom Module", href: "/apis/latest/dom"},
16+
|],
17+
},
18+
|];
419

520
/* Used for API docs (structured data) */
621
module Docs = {
722
[@react.component]
8-
let make = (~theme=`Reason, ~components=ApiMarkdown.default, ~children) => {
9-
let router = Next.Router.useRouter();
10-
let theme = ColorTheme.toCN(`Js);
11-
12-
let categories: array(Sidebar.Category.t) = [|
13-
{
14-
name: "Introduction",
15-
items: [|{name: "Overview", href: "/apis/latest"}|],
16-
},
17-
{
18-
name: "JavaScript",
19-
items: [|
20-
{name: "Js Module", href: "/apis/latest/js"},
21-
{name: "Belt Stdlib", href: "/apis/latest/belt"},
22-
{name: "Dom", href: "/apis/latest/dom"},
23-
|],
24-
},
25-
|];
26-
27-
let (isSidebarOpen, setSidebarOpen) = React.useState(_ => false);
28-
let toggleSidebar = () => setSidebarOpen(prev => !prev);
29-
30-
let sidebar =
31-
<Sidebar
32-
isOpen=isSidebarOpen
33-
toggle=toggleSidebar
34-
categories
35-
route={router.route}
36-
/>;
23+
let make = (~components=ApiMarkdown.default, ~children) => {
24+
let title = "API";
25+
let version = "latest";
3726

38-
<SidebarLayout
39-
metaTitle="ReScript API"
40-
theme=`Reason
41-
components
42-
sidebarState=(isSidebarOpen, setSidebarOpen)
43-
sidebar>
44-
children
45-
</SidebarLayout>;
27+
<ApiLayout title categories version components> children </ApiLayout>;
4628
};
4729
};
4830

‎layouts/ApiOverviewLayout8_0_0.re

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
module Link = Next.Link;
2+
3+
module Sidebar = DocsLayout.Sidebar;
4+
5+
let categories: array(Sidebar.Category.t) = [|
6+
{
7+
name: "Introduction",
8+
items: [|{name: "Overview", href: "/apis/v8.0.0"}|],
9+
},
10+
{
11+
name: "Modules",
12+
items: [|
13+
{name: "Js Module", href: "/apis/v8.0.0/js"},
14+
{name: "Belt Stdlib", href: "/apis/v8.0.0/belt"},
15+
{name: "Dom Module", href: "/apis/v8.0.0/dom"},
16+
|],
17+
},
18+
|];
19+
20+
/* Used for API docs (structured data) */
21+
module Docs = {
22+
[@react.component]
23+
let make = (~components=ApiMarkdown.default, ~children) => {
24+
let router = Next.Router.useRouter();
25+
let route = router.route;
26+
27+
let title = "API";
28+
let version = "v8.0.0";
29+
30+
let warnBanner = <ApiLayout.OldDocsWarning route version />;
31+
32+
<ApiLayout title categories version components>
33+
warnBanner
34+
children
35+
</ApiLayout>;
36+
};
37+
};
38+
39+
/*
40+
This layout is used for structured prose text with proper H2 headings.
41+
We cannot really use the same layout as with the Docs module, since they
42+
have different semantic styling and do things such as hiding the text
43+
of H2 nodes.
44+
*/
45+
module Prose = {
46+
[@react.component]
47+
let make = (~children) => {
48+
<Docs components=Markdown.default> children </Docs>;
49+
};
50+
};

0 commit comments

Comments
 (0)