Skip to content

Commit 8fda350

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 and related dead code from MdxRoute
1 parent 5226348 commit 8fda350

3 files changed

Lines changed: 88 additions & 53 deletions

File tree

‎app/routes.res‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@ let default = [
4949
route("blog", "./routes/BlogRoute.jsx", ~options={id: "blog-index"}),
5050
route("blog/archived", "./routes/BlogRoute.jsx", ~options={id: "blog-archived"}),
5151
route("docs", "./routes/DocsOverview.jsx", ~options={id: "docs-overview"}),
52+
route("docs/manual/api", "./routes/ApiOverviewRoute.jsx", ~options={id: "api-overview"}),
5253
route("docs/manual/api/stdlib", "./routes/ApiRoute.jsx", ~options={id: "api-stdlib"}),
5354
route("docs/manual/api/introduction", "./routes/ApiRoute.jsx", ~options={id: "api-intro"}),
5455
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: 3 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -159,9 +159,7 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
159159
res
160160
} else {
161161
let categories = {
162-
if pathname == "/docs/manual/api" {
163-
[]
164-
} else if pathname->String.includes("docs/manual") {
162+
if pathname->String.includes("docs/manual") {
165163
await manualTableOfContents()
166164
} else if pathname->String.includes("docs/react") {
167165
await reactTableOfContents()
@@ -236,8 +234,6 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
236234
let path = (pathname :> string)
237235
let title = if path->String.includes("docs/react") {
238236
"ReScript React"
239-
} else if path->String.includes("docs/manual/api") {
240-
"ReScript API"
241237
} else if path->String.includes("docs/manual") {
242238
"ReScript Language Manual"
243239
} else if path->String.includes("community") {
@@ -249,11 +245,7 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
249245
title
250246
}
251247

252-
let title = if pathname == "/docs/manual/api" {
253-
"API"
254-
} else {
255-
mdx.attributes.title
256-
}
248+
let title = mdx.attributes.title
257249

258250
let res: loaderData = {
259251
__raw: mdx.__raw,
@@ -278,49 +270,7 @@ let default = () => {
278270
let {entries, categories, title} = loaderData
279271

280272
<>
281-
{if (pathname :> string) == "/docs/manual/api" {
282-
let breadcrumbs = list{
283-
{Url.name: "Docs", href: `/docs/manual/api`},
284-
{name: "API", href: `/docs/manual/api`},
285-
}
286-
let sidebarContent =
287-
<aside className="px-4 w-full block">
288-
<div className="flex justify-between items-baseline">
289-
<div className="flex flex-col text-fire font-medium">
290-
<VersionSelect />
291-
</div>
292-
<button
293-
className="flex items-center" onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
294-
>
295-
<Icon.Close />
296-
</button>
297-
</div>
298-
<div className="mb-56">
299-
{ApiOverviewLayout.categories
300-
->Array.map(category => {
301-
let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
302-
navItem.href === (pathname :> string)
303-
<div key=category.name>
304-
<SidebarLayout.Sidebar.Category
305-
isItemActive category onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
306-
/>
307-
</div>
308-
})
309-
->React.array}
310-
</div>
311-
</aside>
312-
313-
<>
314-
<Meta title=title description={attributes.description->Nullable.getOr("ReScript API")} />
315-
<NavbarSecondary />
316-
<NavbarTertiary sidebar=sidebarContent>
317-
<SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
318-
</NavbarTertiary>
319-
<ApiOverviewLayout.Docs>
320-
<div className="markdown-body"> {component()} </div>
321-
</ApiOverviewLayout.Docs>
322-
</>
323-
} else if (
273+
{if (
324274
(pathname :> string)->String.includes("docs/manual") ||
325275
(pathname :> string)->String.includes("docs/react") ||
326276
(pathname :> string)->String.includes("docs/guidelines")

0 commit comments

Comments
 (0)