Skip to content

Commit 416591a

Browse files
jderochervlkjderochervlk
committed
add scroll lock and fix mobile nav bar
1 parent 2074165 commit 416591a

17 files changed

+163
-105
lines changed

‎app/root.res‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ open ReactRouter
3434
@react.component
3535
let default = () => {
3636
let (isOverlayOpen, setOverlayOpen) = React.useState(_ => false)
37+
let (isScrollLockEnabled, setIsScrollLockEnabled) = React.useState(_ => false)
38+
3739
<html>
3840
<head>
3941
<style> {React.string("html {opacity:0;}")} </style>
@@ -51,11 +53,15 @@ let default = () => {
5153
/>
5254
<meta charSet="UTF-8" />
5355
</head>
54-
<body>
55-
<Navigation isOverlayOpen setOverlayOpen />
56-
<Outlet />
57-
<ScrollRestoration />
58-
<Scripts />
56+
<body className={isScrollLockEnabled ? "overflow-hidden" : ""}>
57+
<ScrollLockContext.Provider lockState=(isScrollLockEnabled, setIsScrollLockEnabled)>
58+
<EnableCollapsibleNavbar isEnabled={!isOverlayOpen}>
59+
<Navigation isOverlayOpen setOverlayOpen />
60+
<Outlet />
61+
<ScrollRestoration />
62+
<Scripts />
63+
</EnableCollapsibleNavbar>
64+
</ScrollLockContext.Provider>
5965
</body>
6066
</html>
6167
}

‎app/routes/MdxRoute.res‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,8 @@ let default = () => {
289289
categories
290290
activeToc={title: "Introduction", entries}
291291
breadcrumbs=?loaderData.breadcrumbs
292-
editHref={`https://github.com/rescript-lang/rescript-lang.org/blob/master/pages${attributes.path}.mdx`}
292+
// TODO RR7: this probably needs to get the relative path
293+
editHref={`https://github.com/rescript-lang/rescript-lang.org/blob/master/pages/${attributes.path}.mdx`}
293294
>
294295
<div className="markdown-body pt-20 md:pt-0"> {component()} </div>
295296
</DocsLayout>
@@ -302,7 +303,7 @@ let default = () => {
302303
switch loaderData.blogPost {
303304
| Some({frontmatter, archived, path}) =>
304305
<BlogArticle frontmatter isArchived=archived path> {component()} </BlogArticle>
305-
| None => React.null // TODO: RR7 show an error
306+
| None => React.null // TODO: Post RR7 show an error?
306307
}
307308
} else {
308309
switch loaderData.mdxSources {

‎app/routes/SyntaxLookupRoute.res‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,6 @@ let convert = (mdx: Mdx.attributes): SyntaxLookup.item => {
99
id: mdx.id->Option.getOrThrow,
1010
keywords: mdx.keywords->Option.getOr([]),
1111
name: mdx.name->Option.getOrThrow,
12-
// TODO RR7 this can be removed I think
13-
children: <div> {React.string("TODO: render MDX here")} </div>,
1412
status: SyntaxLookup.Status.fromString(mdx.status->Option.getOr("active")),
1513
summary: mdx.summary->Option.getOrThrow,
1614
href: mdx.slug->Option.getOrThrow,

‎package-lock.json‎

Lines changed: 56 additions & 28 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
"remark-comment": "^1.0.0",
5656
"remark-frontmatter": "^5.0.0",
5757
"remark-gfm": "^4.0.1",
58-
"rescript": "^12.0.0-rc.2",
58+
"rescript": "^12.0.0-rc.3",
5959
"unified": "^11.0.5",
6060
"vfile-matter": "^5.0.0"
6161
},
@@ -73,6 +73,7 @@
7373
"search-insights": "^2.17.3",
7474
"tailwindcss": "^4",
7575
"vite": "^7.0.6",
76+
"vite-plugin-devtools-json": "^1.0.0",
7677
"vite-plugin-env-compatible": "^2.0.1"
7778
}
7879
}

‎src/MdxLegacy.res‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
the component context API
55
*/
66
/**
7-
* The code below is from Next's markdown, and I am not sure it is needed anymore.
8-
TODO: RR7
7+
* TODO: POST RR7 The code below is from Next's markdown, and I am not sure it is needed anymore.
98
*/
109
type mdxComponent
1110

‎src/Packages.res‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -431,7 +431,7 @@ let make = (props: props) => {
431431
/>
432432
<div className="mt-16 pt-2">
433433
<div className="text-gray-80 text-18">
434-
<Navigation isOverlayOpen setOverlayOpen />
434+
// <Navigation isOverlayOpen setOverlayOpen />
435435
<div className="flex overflow-hidden">
436436
<div
437437
className="flex justify-between min-w-320 px-4 pt-16 lg:align-center w-full lg:px-8 pb-48"

‎src/ScrollLockContext.res‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
let scrollLockContext = React.createContext((false, (_: bool => bool) => ()))
2+
3+
module ScrollLockProvider = {
4+
let make = React.Context.provider(scrollLockContext)
5+
}
6+
7+
let useScrollLock = () => React.useContext(scrollLockContext)
8+
9+
module Provider = {
10+
@react.component
11+
let make = (~children, ~lockState) => {
12+
<ScrollLockProvider value=lockState> children </ScrollLockProvider>
13+
}
14+
}

‎src/SyntaxLookup.res‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,6 @@ module Item = {
7070
name: string,
7171
summary: string,
7272
category: Category.t,
73-
children: React.element,
7473
status: Status.t,
7574
href: string,
7675
}
@@ -177,7 +176,6 @@ type item = {
177176
name: string,
178177
summary: string,
179178
category: Category.t,
180-
children: React.element,
181179
status: Status.t,
182180
href: string,
183181
}
@@ -198,7 +196,6 @@ let make = (
198196
summary,
199197
name,
200198
status,
201-
children,
202199
href,
203200
}
204201
})
@@ -384,7 +381,7 @@ let make = (
384381
/>
385382
<div className="mt-4 xs:mt-16">
386383
<div className="text-gray-80">
387-
<Navigation isOverlayOpen setOverlayOpen />
384+
// <Navigation isOverlayOpen setOverlayOpen />
388385
<div className="flex xs:justify-center overflow-hidden pb-48">
389386
<main className="mt-24 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280">
390387
<div className="flex justify-center">

‎src/common/Hooks.res‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,9 @@ let useScrollDirection = (~topMargin=80, ~threshold=20) => {
6060
}
6161
})
6262
}
63+
64+
// let onScroll = Util.debounce(onScroll, 50)
65+
6366
WebAPI.Window.addEventListener(window, Scroll, onScroll)
6467
Some(() => WebAPI.Window.removeEventListener(window, Scroll, onScroll))
6568
}, [topMargin, threshold])

0 commit comments

Comments
 (0)