Skip to content

Commit f642c1c

Browse files
jderochervlkjderochervlk
committed
fixing docs
1 parent 09e42d4 commit f642c1c

6 files changed

Lines changed: 200 additions & 74 deletions

File tree

‎app/routes/MdxRoute.res‎

Lines changed: 61 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -304,10 +304,9 @@ let default = () => {
304304
) {
305305
<>
306306
<Meta title=title description={attributes.description->Nullable.getOr("")} />
307-
<DocsLayout
308-
categories
309-
activeToc={title, entries}
310-
breadcrumbs=?{loaderData.breadcrumbs->Option.map(crumbs =>
307+
<NavbarSecondary />
308+
{
309+
let breadcrumbs = loaderData.breadcrumbs->Option.map(crumbs =>
311310
List.mapWithIndex(crumbs, (item, index) => {
312311
if index === 0 {
313312
if (pathname :> string)->String.includes("docs/manual") {
@@ -321,11 +320,64 @@ let default = () => {
321320
item
322321
}
323322
})
324-
)}
325-
editHref={`https://github.com/rescript-lang/rescript-lang.org/blob/master${loaderData.filePath->Option.getOrThrow}`}
326-
>
327-
<div className="markdown-body"> {component()} </div>
328-
</DocsLayout>
323+
)
324+
let editHref = `https://github.com/rescript-lang/rescript-lang.org/blob/master${loaderData.filePath->Option.getOrThrow}`
325+
326+
let sidebarContent =
327+
<aside className="px-4 w-full block">
328+
<div className="flex justify-between items-baseline">
329+
<div className="flex flex-col text-fire font-medium">
330+
<VersionSelect />
331+
</div>
332+
<button
333+
className="flex items-center"
334+
onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
335+
>
336+
<Icon.Close />
337+
</button>
338+
</div>
339+
<div className="mb-56">
340+
{categories
341+
->Array.map(category => {
342+
let isItemActive = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
343+
navItem.href === (pathname :> string)
344+
let getActiveToc = (navItem: SidebarLayout.Sidebar.NavItem.t) =>
345+
if navItem.href === (pathname :> string) {
346+
Some({TableOfContents.title, entries})
347+
} else {
348+
None
349+
}
350+
<div key=category.name>
351+
<SidebarLayout.Sidebar.Category
352+
isItemActive
353+
getActiveToc
354+
category
355+
onClick={_ => NavbarUtils.closeMobileTertiaryDrawer()}
356+
/>
357+
</div>
358+
})
359+
->React.array}
360+
</div>
361+
</aside>
362+
363+
<>
364+
<NavbarTertiary sidebar=sidebarContent>
365+
{breadcrumbs->Option.mapOr(React.null, crumbs =>
366+
<SidebarLayout.BreadCrumbs crumbs />
367+
)}
368+
<a
369+
href=editHref
370+
className="inline text-14 hover:underline text-fire"
371+
rel="noopener noreferrer"
372+
>
373+
{React.string("Edit")}
374+
</a>
375+
</NavbarTertiary>
376+
<DocsLayout categories activeToc={title, entries} breadcrumbs=?{breadcrumbs} editHref>
377+
<div className="markdown-body"> {component()} </div>
378+
</DocsLayout>
379+
</>
380+
}
329381
</>
330382
} else if (pathname :> string)->String.includes("community") {
331383
<CommunityLayout categories entries>

‎src/components/NavbarSecondary.res‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,5 @@
1-
let link = "no-underline block hover:cursor-pointer hover:text-fire-30 mb-px"
2-
let activeLink = "font-medium text-fire-30 border-b border-fire"
3-
4-
let linkOrActiveLink = (~target: Path.t, ~route: Path.t) => target === route ? activeLink : link
5-
6-
let isActiveLink = (~includes: string, ~excludes: option<string>=?, ~route: Path.t) => {
7-
let route = (route :> string)
8-
// includes means we want the lnk to be active if it contains the expected text
9-
let includes = route->String.includes(includes)
10-
// excludes allows us to not have links be active even if they do have the includes text
11-
let excludes = switch excludes {
12-
| Some(excludes) => route->String.includes(excludes)
13-
| None => false
14-
}
15-
includes && !excludes ? activeLink : link
16-
}
1+
open ReactRouter
2+
open NavbarUtils
173

184
module MobileDrawerButton = {
195
@react.component
@@ -24,7 +10,10 @@ module MobileDrawerButton = {
2410
}
2511

2612
@react.component
27-
let make = (~children) => {
13+
let make = () => {
14+
let location = ReactRouter.useLocation()
15+
let route = location.pathname
16+
2817
let scrollDirection = Hooks.useScrollDirection(~topMargin=64, ~threshold=32)
2918

3019
let navbarClasses = switch scrollDirection {
@@ -34,12 +23,36 @@ let make = (~children) => {
3423

3524
<nav
3625
dataTestId="navbar-secondary"
37-
className={"text-12 md:text-14 shadow h-12 w-full bg-white sticky z-95 top-16 transition-transform duration-300 " ++
26+
className={"text-12 md:text-14 shadow h-12 w-full bg-white sticky z-95 top-16 transition-transform duration-300 px-4 " ++
3827
navbarClasses}
3928
>
40-
<div className="px-4 flex gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
41-
<MobileDrawerButton hidden=false />
42-
{children}
29+
<div className="flex gap-6 lg:gap-10 items-center h-full w-full max-w-1280 m-auto">
30+
<Link
31+
prefetch=#intent
32+
to=#"/docs/manual/introduction"
33+
className={isActiveLink(~includes="/docs/manual/", ~excludes="/api", ~route)}
34+
>
35+
{React.string("Language Manual")}
36+
</Link>
37+
<Link
38+
prefetch=#intent to=#"/docs/manual/api" className={isActiveLink(~includes="/api", ~route)}
39+
>
40+
{React.string("API")}
41+
</Link>
42+
<Link
43+
prefetch=#intent
44+
to=#"/syntax-lookup"
45+
className={isActiveLink(~includes="/syntax-lookup", ~route)}
46+
>
47+
{React.string("Syntax Lookup")}
48+
</Link>
49+
<Link
50+
prefetch=#intent
51+
to=#"/docs/react/introduction"
52+
className={isActiveLink(~includes="/docs/react/", ~route)}
53+
>
54+
{React.string("React")}
55+
</Link>
4356
</div>
4457
</nav>
4558
}

‎src/components/NavbarTertiary.res‎

Lines changed: 40 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,49 @@
1+
open NavbarUtils
2+
open ReactRouter
3+
14
@react.component
2-
let make = () => {
5+
let make = (~sidebar: React.element=?, ~children) => {
6+
let {pathname} = useLocation()
7+
38
let scrollDirection = Hooks.useScrollDirection(~topMargin=64, ~threshold=32)
49

510
let navbarClasses = switch scrollDirection {
611
| Up(_) => "translate-y-0"
7-
//
812
| Down(_) => "-translate-y-[176px] lg:translate-y-0"
913
}
1014

11-
<nav
12-
dataTestId="navbar-secondary"
13-
className={"shadow h-16 w-full bg-gray-20 sticky z-90 top-28 transition-transform duration-300 " ++
14-
navbarClasses}
15-
>
16-
</nav>
15+
React.useEffect(() => {
16+
Some(closeMobileTertiaryDrawer)
17+
}, [])
18+
19+
<>
20+
<nav
21+
dataTestId="navbar-tertiary"
22+
className={`shadow h-12 w-full bg-white sticky z-90 transition-transform duration-300 px-4
23+
${navbarClasses}
24+
${isDocRoute(~route=pathname) ? "top-28" : "top-16"}`}
25+
>
26+
<div className="flex items-center h-full w-full max-w-1280 m-auto">
27+
<button className="md:hidden mr-3" onClick={toggleMobileTertiaryDrawer}>
28+
<img className="h-4" src="/ic_sidebar_drawer.svg" />
29+
</button>
30+
<div
31+
className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 justify-between mr-4 w-full"
32+
>
33+
{children}
34+
</div>
35+
</div>
36+
</nav>
37+
<dialog
38+
id="mobile-tertiary-drawer"
39+
className={`${isDocRoute(~route=pathname)
40+
? "top-44"
41+
: "top-32"} flex-col h-full w-full z-50 bg-white overflow-y-auto pb-8`}
42+
>
43+
{switch sidebar {
44+
| Some(sidebar) => sidebar
45+
| None => React.null
46+
}}
47+
</dialog>
48+
</>
1749
}

‎src/components/NavbarUtils.res‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,18 @@
11
let link = "no-underline block hover:cursor-pointer hover:text-fire-30 mb-px"
22
let activeLink = "font-medium text-fire-30 border-b border-fire"
33

4+
let isActiveLink = (~includes: string, ~excludes: option<string>=?, ~route: Path.t) => {
5+
let route = (route :> string)
6+
// includes means we want the lnk to be active if it contains the expected text
7+
let includes = route->String.includes(includes)
8+
// excludes allows us to not have links be active even if they do have the includes text
9+
let excludes = switch excludes {
10+
| Some(excludes) => route->String.includes(excludes)
11+
| None => false
12+
}
13+
includes && !excludes ? activeLink : link
14+
}
15+
416
let linkOrActiveLink = (~target: Path.t, ~route: Path.t) => target === route ? activeLink : link
517

618
let linkOrActiveLinkSubroute = (~target: Path.t, ~route: Path.t) =>
@@ -41,3 +53,40 @@ let toggleMobileOverlay = _ => {
4153
openMobileOverlay()
4254
}
4355
}
56+
57+
let getMobileTertiaryDialog = () => {
58+
Nullable.make(document->WebAPI.Document.getElementById("mobile-tertiary-drawer")->elementToDialog)
59+
}
60+
61+
let openMobileTertiaryDrawer = _ =>
62+
switch getMobileTertiaryDialog() {
63+
| Nullable.Value(dialog) => dialog->WebAPI.HTMLDialogElement.show
64+
| Null => ()
65+
| Undefined => ()
66+
}
67+
68+
let closeMobileTertiaryDrawer = _ =>
69+
switch getMobileTertiaryDialog() {
70+
| Nullable.Value(dialog) => dialog->WebAPI.HTMLDialogElement.close
71+
| Null => ()
72+
| Undefined => ()
73+
}
74+
75+
let toggleMobileTertiaryDrawer = _ => {
76+
let isOpen = switch getMobileTertiaryDialog() {
77+
| Nullable.Value(dialog) => dialog->_open
78+
| Null => false
79+
| Undefined => false
80+
}
81+
82+
if isOpen {
83+
closeMobileTertiaryDrawer()
84+
} else {
85+
openMobileTertiaryDrawer()
86+
}
87+
}
88+
89+
let isDocRoute = (~route: Path.t) => {
90+
let route = (route :> string)
91+
route->String.includes("/docs/") || route->String.includes("/syntax-lookup")
92+
}

‎src/layouts/SidebarLayout.res‎

Lines changed: 11 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -170,17 +170,17 @@ module Sidebar = {
170170

171171
<>
172172
<div
173-
style={{
174-
paddingTop: `${sidebarTopOffset->Int.toString}px`,
175-
}}
173+
// style={{
174+
// paddingTop: `${sidebarTopOffset->Int.toString}px`,
175+
// }}
176176
id="sidebar"
177177
className={(
178178
isOpen ? "fixed w-full left-0 h-full z-20 min-w-320" : "hidden "
179-
) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 h-auto md:relative overflow-y-visible pt-2 bg-white md:mt-0 min-w-48"}
179+
) ++ " md:block md:w-48 md:-ml-4 lg:w-1/5 h-auto md:relative overflow-y-visible bg-white md:mt-0 min-w-48"}
180180
>
181181
<aside
182182
id="sidebar-content"
183-
className="h-full relative top-0 px-4 w-full block md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)]"
183+
className="h-full relative top-0 px-4 w-full block md:top-28 md:sticky border-r border-gray-20 overflow-y-auto pb-24 max-h-[calc(100vh-7rem)] pt-8"
184184
>
185185
<button
186186
onClick={evt => {
@@ -265,14 +265,6 @@ module BreadCrumbs = {
265265
}
266266
}
267267

268-
module MobileDrawerButton = {
269-
@react.component
270-
let make = (~hidden: bool, ~onClick) =>
271-
<button className={(hidden ? "hidden " : "") ++ "md:hidden mr-3"} onClick=onClick>
272-
<img className="h-4" src="/ic_sidebar_drawer.svg" />
273-
</button>
274-
}
275-
276268
@react.component
277269
let make = (
278270
~theme: ColorTheme.t,
@@ -370,30 +362,13 @@ let make = (
370362
<div className={"min-w-320 " ++ theme}>
371363
<div className="w-full">
372364
<div className="flex lg:justify-center">
373-
<div className="flex w-full max-w-1280 md:mx-10 md:mt-16">
365+
<div className="flex w-full max-w-1280 md:mx-10 ">
374366
sidebar
375-
<main className="px-4 w-full pt-4 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
376-
//width of the right content part
377-
<div
378-
id="mobile-navbar"
379-
className={`z-10 fixed border-b shadow ${isDocRoute(~route=pathname)
380-
? "top-28"
381-
: "top-16"} left-0 pl-4 bg-white w-full py-4 md:relative md:border-none md:shadow-none md:p-0 md:top-auto flex items-center transition duration-300 ease-out group-[.nav-disappear]:-translate-y-64 md:group-[.nav-disappear]:-translate-y-0 z-25`}
382-
>
383-
<MobileDrawerButton hidden=isNavOpen onClick={handleDrawerButtonClick} />
384-
<div
385-
className="truncate overflow-x-auto touch-scroll flex items-center space-x-4 md:justify-between mr-4 w-full"
386-
>
387-
breadcrumbs
388-
editLinkEl
389-
</div>
390-
</div>
391-
<div
392-
className={hasBreadcrumbs ? "mt-28 md:mt-10" : "mt-6 md:-mt-4"}
393-
dataTestId="side-layout-children"
394-
>
395-
children
396-
</div>
367+
<main
368+
dataTestId="side-layout-children"
369+
className="px-4 w-full pt-4 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740 md:pt-8"
370+
>
371+
children
397372
pagination
398373
</main>
399374
{switch rightSidebar {

‎src/layouts/SidebarLayout.resi‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,11 @@ module Sidebar: {
5353
) => React.element
5454
}
5555

56+
module BreadCrumbs: {
57+
@react.component
58+
let make: (~crumbs: list<Url.breadcrumb>) => React.element
59+
}
60+
5661
@react.component
5762
let make: (
5863
~theme: ColorTheme.t,

0 commit comments

Comments
 (0)