Skip to content

Commit 4412018

Browse files
jderochervlkjderochervlk
committed
feat: split API overview page out of MdxRoute into ApiOverviewRoute
- Create ApiOverviewRoute.res for /docs/manual/api with ApiOverviewLayout.Docs - Add explicit route in routes.res pointing docs/manual/api to ApiOverviewRoute - Remove API overview branch, manualTableOfContents, and sidebar helpers from MdxRoute - MdxRoute now only handles docs/manual and docs/react pages via react-router-mdx
1 parent 47fa859 commit 4412018

3 files changed

Lines changed: 89 additions & 110 deletions

File tree

‎app/routes.res‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@ let default = [
8888
route("blog", "./routes/BlogRoute.jsx", ~options={id: "blog-index"}),
8989
route("blog/archived", "./routes/BlogRoute.jsx", ~options={id: "blog-archived"}),
9090
route("docs", "./routes/DocsOverview.jsx", ~options={id: "docs-overview"}),
91+
route("docs/manual/api", "./routes/ApiOverviewRoute.jsx", ~options={id: "api-overview"}),
9192
route("docs/manual/api/stdlib", "./routes/ApiRoute.jsx", ~options={id: "api-stdlib"}),
9293
route("docs/manual/api/introduction", "./routes/ApiRoute.jsx", ~options={id: "api-intro"}),
9394
route("docs/manual/api/belt", "./routes/ApiRoute.jsx", ~options={id: "api-belt"}),

‎app/routes/ApiOverviewRoute.res‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
type loaderData = {
2+
compiledMdx: CompiledMdx.t,
3+
title: string,
4+
description: string,
5+
}
6+
7+
let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
8+
let {pathname} = WebAPI.URL.make(~url=request.url)
9+
let filePath = MdxFile.resolveFilePath(
10+
(pathname :> string),
11+
~dir="markdown-pages/docs/manual",
12+
~alias="docs/manual",
13+
)
14+
15+
let raw = await Node.Fs.readFile(filePath, "utf-8")
16+
let {frontmatter}: MarkdownParser.result = MarkdownParser.parseSync(raw)
17+
18+
let description = switch frontmatter {
19+
| Object(dict) =>
20+
switch dict->Dict.get("description") {
21+
| Some(String(s)) => s
22+
| _ => ""
23+
}
24+
| _ => ""
25+
}
26+
27+
let compiledMdx = await MdxFile.compileMdx(raw, ~filePath, ~remarkPlugins=Mdx.plugins)
28+
29+
{
30+
compiledMdx,
31+
title: "API | ReScript API",
32+
description,
33+
}
34+
}
35+
36+
let default = () => {
37+
let {pathname} = ReactRouter.useLocation()
38+
let {compiledMdx, title, description} = ReactRouter.useLoaderData()
39+
40+
let breadcrumbs = list{
41+
{Url.name: "Docs", href: `/docs/manual/api`},
42+
{Url.name: "API", href: `/docs/manual/api`},
43+
}
44+
45+
let sidebarContent =
46+
<aside className="px-4 w-full block">
47+
<div className="flex justify-between items-baseline">
48+
<div className="flex flex-col text-fire font-medium">
49+
<VersionSelect />
50+
</div>
51+
<button
52+
className="flex items-center" onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
53+
>
54+
<Icon.Close />
55+
</button>
56+
</div>
57+
<div className="mb-56">
58+
{ApiOverviewLayout.categories
59+
->Array.map(category => {
60+
let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
61+
navItem.href === (pathname :> string)
62+
<div key=category.name>
63+
<SidebarLayout.Sidebar.Category
64+
isItemActive category onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
65+
/>
66+
</div>
67+
})
68+
->React.array}
69+
</div>
70+
</aside>
71+
72+
<>
73+
<Meta title description />
74+
<NavbarSecondary />
75+
<NavbarTertiary sidebar=sidebarContent>
76+
<SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
77+
</NavbarTertiary>
78+
<ApiOverviewLayout.Docs>
79+
<div className="markdown-body">
80+
<MdxContent compiledMdx />
81+
</div>
82+
</ApiOverviewLayout.Docs>
83+
</>
84+
}

‎app/routes/MdxRoute.res‎

Lines changed: 4 additions & 110 deletions
Original file line numberDiff line numberDiff line change
@@ -9,68 +9,12 @@ type loaderData = {
99
filePath: option<string>,
1010
}
1111

12-
let convertToNavItems = (items, rootPath) =>
13-
Array.map(items, (item): SidebarLayout.Sidebar.NavItem.t => {
14-
let href = switch item.slug {
15-
| Some(slug) => `${rootPath}/${slug}`
16-
| None => rootPath
17-
}
18-
{
19-
name: item.title,
20-
href,
21-
}
22-
})
23-
24-
let getGroup = (groups, groupName): SidebarLayout.Sidebar.Category.t => {
25-
{
26-
name: groupName,
27-
items: groups
28-
->Dict.get(groupName)
29-
->Option.getOr([]),
30-
}
31-
}
32-
33-
let getAllGroups = (groups, groupNames): array<SidebarLayout.Sidebar.Category.t> =>
34-
groupNames->Array.map(item => getGroup(groups, item))
35-
36-
// These are the pages for the language manual, sorted by their "order" field in the frontmatter
37-
let manualTableOfContents = async () => {
38-
let groups =
39-
(await allMdx(~filterByPaths=["markdown-pages/docs"]))
40-
->filterMdxPages("docs/manual")
41-
->groupBySection
42-
->Dict.mapValues(values => values->sortSection->convertToNavItems("/docs/manual"))
43-
44-
// these are the categories that appear in the sidebar
45-
let categories: array<SidebarLayout.Sidebar.Category.t> = getAllGroups(
46-
groups,
47-
[
48-
"Overview",
49-
"Guides",
50-
"Language Features",
51-
"JavaScript Interop",
52-
"Build System",
53-
"Advanced Features",
54-
],
55-
)
56-
57-
categories
58-
}
59-
6012
let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
6113
let {pathname} = WebAPI.URL.make(~url=request.url)
6214

6315
let mdx = await loadMdx(request, ~options={remarkPlugins: Mdx.plugins})
6416

65-
let categories = {
66-
if pathname == "/docs/manual/api" {
67-
[]
68-
} else if pathname->String.includes("docs/manual") {
69-
await manualTableOfContents()
70-
} else {
71-
[]
72-
}
73-
}
17+
let categories = []
7418

7519
let filePath = ref(None)
7620

@@ -126,22 +70,14 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
12670

12771
let metaTitleCategory = {
12872
let path = (pathname :> string)
129-
let title = if path->String.includes("docs/manual/api") {
130-
"ReScript API"
131-
} else if path->String.includes("docs/manual") {
73+
if path->String.includes("docs/manual") {
13274
"ReScript Language Manual"
13375
} else {
13476
"ReScript"
13577
}
136-
137-
title
13878
}
13979

140-
let title = if pathname == "/docs/manual/api" {
141-
"API"
142-
} else {
143-
mdx.attributes.title
144-
}
80+
let title = mdx.attributes.title
14581

14682
let res: loaderData = {
14783
__raw: mdx.__raw,
@@ -165,49 +101,7 @@ let default = () => {
165101
let {entries, categories, title} = loaderData
166102

167103
<>
168-
{if (pathname :> string) == "/docs/manual/api" {
169-
let breadcrumbs = list{
170-
{Url.name: "Docs", href: `/docs/manual/api`},
171-
{name: "API", href: `/docs/manual/api`},
172-
}
173-
let sidebarContent =
174-
<aside className="px-4 w-full block">
175-
<div className="flex justify-between items-baseline">
176-
<div className="flex flex-col text-fire font-medium">
177-
<VersionSelect />
178-
</div>
179-
<button
180-
className="flex items-center" onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
181-
>
182-
<Icon.Close />
183-
</button>
184-
</div>
185-
<div className="mb-56">
186-
{ApiOverviewLayout.categories
187-
->Array.map(category => {
188-
let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
189-
navItem.href === (pathname :> string)
190-
<div key=category.name>
191-
<SidebarLayout.Sidebar.Category
192-
isItemActive category onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
193-
/>
194-
</div>
195-
})
196-
->React.array}
197-
</div>
198-
</aside>
199-
200-
<>
201-
<Meta title=title description={attributes.description->Nullable.getOr("ReScript API")} />
202-
<NavbarSecondary />
203-
<NavbarTertiary sidebar=sidebarContent>
204-
<SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
205-
</NavbarTertiary>
206-
<ApiOverviewLayout.Docs>
207-
<div className="markdown-body"> {component()} </div>
208-
</ApiOverviewLayout.Docs>
209-
</>
210-
} else if (
104+
{if (
211105
(pathname :> string)->String.includes("docs/manual") ||
212106
(pathname :> string)->String.includes("docs/react")
213107
) {

0 commit comments

Comments
 (0)