Skip to content

Commit 98addbf

Browse files
jderochervlkjderochervlk
authored
feat: split API overview page out of MdxRoute into ApiOverviewRoute (#1226)
1 parent dfc4cdc commit 98addbf

4 files changed

Lines changed: 100 additions & 61 deletions

File tree

‎app/routes.res‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -47,11 +47,6 @@ let blogArticleRoutes =
4747
route(path, "./routes/BlogArticleRoute.jsx", ~options={id: path})
4848
)
4949

50-
let docsGuidelinesRoutes =
51-
MdxFile.scanPaths(
52-
~dir="markdown-pages/docs/guidelines",
53-
~alias="docs/guidelines",
54-
)->Array.map(path => route(path, "./routes/DocsGuidelinesRoute.jsx", ~options={id: path}))
5550
let communityRoutes =
5651
MdxFile.scanPaths(~dir="markdown-pages/community", ~alias="community")->Array.map(path =>
5752
route(path, "./routes/CommunityRoute.jsx", ~options={id: path})
@@ -63,8 +58,9 @@ let mdxRoutes = mdxRoutes("./routes/MdxRoute.jsx")->Array.filter(r =>
6358
->Option.map(path =>
6459
path === "blog" ||
6560
String.startsWith(path, "blog/") ||
66-
path === "docs/guidelines" ||
67-
String.startsWith(path, "docs/guidelines/") ||
61+
path === "community" ||
62+
String.startsWith(path, "community/") ||
63+
path === "docs/manual/api" ||
6864
path === "community" ||
6965
String.startsWith(path, "community/")
7066
)
@@ -80,6 +76,7 @@ let default = [
8076
route("blog", "./routes/BlogRoute.jsx", ~options={id: "blog-index"}),
8177
route("blog/archived", "./routes/BlogRoute.jsx", ~options={id: "blog-archived"}),
8278
route("docs", "./routes/DocsOverview.jsx", ~options={id: "docs-overview"}),
79+
route("docs/manual/api", "./routes/ApiOverviewRoute.jsx", ~options={id: "api-overview"}),
8380
route("docs/manual/api/stdlib", "./routes/ApiRoute.jsx", ~options={id: "api-stdlib"}),
8481
route("docs/manual/api/introduction", "./routes/ApiRoute.jsx", ~options={id: "api-intro"}),
8582
route("docs/manual/api/belt", "./routes/ApiRoute.jsx", ~options={id: "api-belt"}),
@@ -88,7 +85,6 @@ let default = [
8885
...beltRoutes,
8986
...domRoutes,
9087
...blogArticleRoutes,
91-
...docsGuidelinesRoutes,
9288
...communityRoutes,
9389
...mdxRoutes,
9490
route("*", "./routes/NotFoundRoute.jsx"),

‎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/ApiOverviewRoute.resi‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
type loaderData = {
2+
compiledMdx: CompiledMdx.t,
3+
title: string,
4+
description: string,
5+
}
6+
7+
let loader: ReactRouter.Loader.t<loaderData>
8+
9+
let default: unit => React.element

‎app/routes/MdxRoute.res‎

Lines changed: 3 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -146,9 +146,7 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
146146
res
147147
} else {
148148
let categories = {
149-
if pathname == "/docs/manual/api" {
150-
[]
151-
} else if pathname->String.includes("docs/manual") {
149+
if pathname->String.includes("docs/manual") {
152150
await manualTableOfContents()
153151
} else if pathname->String.includes("docs/react") {
154152
await reactTableOfContents()
@@ -221,8 +219,6 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
221219
let path = (pathname :> string)
222220
let title = if path->String.includes("docs/react") {
223221
"ReScript React"
224-
} else if path->String.includes("docs/manual/api") {
225-
"ReScript API"
226222
} else if path->String.includes("docs/manual") {
227223
"ReScript Language Manual"
228224
} else {
@@ -232,11 +228,7 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
232228
title
233229
}
234230

235-
let title = if pathname == "/docs/manual/api" {
236-
"API"
237-
} else {
238-
mdx.attributes.title
239-
}
231+
let title = mdx.attributes.title
240232

241233
let res: loaderData = {
242234
__raw: mdx.__raw,
@@ -261,49 +253,7 @@ let default = () => {
261253
let {entries, categories, title} = loaderData
262254

263255
<>
264-
{if (pathname :> string) == "/docs/manual/api" {
265-
let breadcrumbs = list{
266-
{Url.name: "Docs", href: `/docs/manual/api`},
267-
{name: "API", href: `/docs/manual/api`},
268-
}
269-
let sidebarContent =
270-
<aside className="px-4 w-full block">
271-
<div className="flex justify-between items-baseline">
272-
<div className="flex flex-col text-fire font-medium">
273-
<VersionSelect />
274-
</div>
275-
<button
276-
className="flex items-center" onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
277-
>
278-
<Icon.Close />
279-
</button>
280-
</div>
281-
<div className="mb-56">
282-
{ApiOverviewLayout.categories
283-
->Array.map(category => {
284-
let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
285-
navItem.href === (pathname :> string)
286-
<div key=category.name>
287-
<SidebarLayout.Sidebar.Category
288-
isItemActive category onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
289-
/>
290-
</div>
291-
})
292-
->React.array}
293-
</div>
294-
</aside>
295-
296-
<>
297-
<Meta title=title description={attributes.description->Nullable.getOr("ReScript API")} />
298-
<NavbarSecondary />
299-
<NavbarTertiary sidebar=sidebarContent>
300-
<SidebarLayout.BreadCrumbs crumbs=breadcrumbs />
301-
</NavbarTertiary>
302-
<ApiOverviewLayout.Docs>
303-
<div className="markdown-body"> {component()} </div>
304-
</ApiOverviewLayout.Docs>
305-
</>
306-
} else if (
256+
{if (
307257
(pathname :> string)->String.includes("docs/manual") ||
308258
(pathname :> string)->String.includes("docs/react") ||
309259
(pathname :> string)->String.includes("docs/guidelines")

0 commit comments

Comments
 (0)