From 51dc3f899a1f38d4db37a48ca764bee2618f39a7 Mon Sep 17 00:00:00 2001 From: jderochervlk Date: Sun, 8 Feb 2026 14:09:29 -0500 Subject: [PATCH 01/31] refactor: refactoring navbars --- app/root.res | 2 +- app/routes.res | 14 ++++- app/routes/Guide.res | 90 ++++++++++++++++++++++++++ app/routes/Guides.res | 3 + app/routes/MdxRoute.res | 42 +------------ markdown-pages/guide/parsing-json.mdx | 91 +++++++++++++++++++++++++++ react-router.config.mjs | 3 +- src/Mdx.res | 42 +++++++++++++ src/components/BreadCrumbs.res | 21 +++++++ src/components/Guide_Utils.res | 2 + src/components/NavbarPrimary.res | 16 +++++ src/components/NavbarSecondary.res | 16 +++++ src/components/NavbarTertiary.res | 16 +++++ src/components/Sidebar.res | 21 +++++++ styles/main.css | 6 +- 15 files changed, 338 insertions(+), 47 deletions(-) create mode 100644 app/routes/Guide.res create mode 100644 app/routes/Guides.res create mode 100644 markdown-pages/guide/parsing-json.mdx create mode 100644 src/components/BreadCrumbs.res create mode 100644 src/components/Guide_Utils.res create mode 100644 src/components/NavbarPrimary.res create mode 100644 src/components/NavbarSecondary.res create mode 100644 src/components/NavbarTertiary.res create mode 100644 src/components/Sidebar.res diff --git a/app/root.res b/app/root.res index 255797d01..0da06aa15 100644 --- a/app/root.res +++ b/app/root.res @@ -68,7 +68,7 @@ let default = () => { - + // diff --git a/app/routes.res b/app/routes.res index fd039b386..090493245 100644 --- a/app/routes.res +++ b/app/routes.res @@ -28,6 +28,16 @@ let stdlibRoutes = let beltRoutes = beltPaths->Array.map(path => route(path, "./routes/ApiRoute.jsx", ~options={id: path})) +let guideRoutes = + mdxRoutes("./routes/Guide.jsx")->Array.filter(route => + route.path->Option.map(path => String.includes(path, "guide/"))->Option.getOr(false) + ) + +let mdxRoutes = + mdxRoutes("./routes/MdxRoute.jsx")->Array.filter(route => + route.path->Option.map(path => !String.includes(path, "guide/"))->Option.getOr(true) + ) + let default = [ index("./routes/LandingPageRoute.jsx"), route("packages", "./routes/PackagesRoute.jsx"), @@ -42,6 +52,8 @@ let default = [ route("docs/manual/api/dom", "./routes/ApiRoute.jsx", ~options={id: "api-dom"}), ...stdlibRoutes, ...beltRoutes, - ...mdxRoutes("./routes/MdxRoute.jsx"), + ...mdxRoutes, + route("guides", "./routes/Guides.jsx"), + ...guideRoutes, route("*", "./routes/NotFoundRoute.jsx"), ] diff --git a/app/routes/Guide.res b/app/routes/Guide.res new file mode 100644 index 000000000..ecfdb4d7c --- /dev/null +++ b/app/routes/Guide.res @@ -0,0 +1,90 @@ +open Guide_Utils + +// For some reason the MDX components have to be defined in the route file +%%private( + let components = { + // Replacing HTML defaults + "a": Markdown.A.make, + "blockquote": Markdown.Blockquote.make, + "code": Markdown.Code.make, + "h1": Markdown.H1.make, + "h2": Markdown.H2.make, + "h3": Markdown.H3.make, + "h4": Markdown.H4.make, + "h5": Markdown.H5.make, + "hr": Markdown.Hr.make, + "intro": Markdown.Intro.make, + "li": Markdown.Li.make, + "ol": Markdown.Ol.make, + "p": Markdown.P.make, + "pre": Markdown.Pre.make, + "strong": Markdown.Strong.make, + "table": Markdown.Table.make, + "th": Markdown.Th.make, + "thead": Markdown.Thead.make, + "td": Markdown.Td.make, + "ul": Markdown.Ul.make, + // These are custom components we provide + "Cite": Markdown.Cite.make, + "CodeTab": Markdown.CodeTab.make, + "Image": Markdown.Image.make, + "Info": Markdown.Info.make, + "Intro": Markdown.Intro.make, + "UrlBox": Markdown.UrlBox.make, + "Video": Markdown.Video.make, + "Warn": Markdown.Warn.make, + "CommunityContent": CommunityContent.make, + "WarningTable": WarningTable.make, + "Docson": DocsonLazy.make, + "Suspense": React.Suspense.make, + } +) + +type loaderData = {...Mdx.t, sidebarItems: array} + +let loader: ReactRouter.Loader.t = async ({request}) => { + let mdx = await Mdx.loadMdx(request, ~options={remarkPlugins: Mdx.plugins}) + let guidePages = await getGuidePages() + { + __raw: mdx.__raw, + attributes: mdx.attributes, + sidebarItems: guidePages->Array.map((page): Sidebar.item => { + { + slug: page.slug->Option.getOrThrow, + title: page.title, + } + }), + } +} + +let default = () => { + let loaderData: loaderData = ReactRouter.useLoaderData() + // let attributes = Mdx.useMdxAttributes() + let component = Mdx.useMdxComponent(~components) + + let scrollDirection = Hooks.useScrollDirection(~topMargin=64, ~threshold=32) + + let navbarClasses = switch scrollDirection { + | Up(_) => "translate-y-0" + | Down(_) => "-translate-y-full md:translate-y-0" + } + + let secondaryNavbarClasses = switch scrollDirection { + | Up(_) => "translate-y-[32]" + // TODO: this has to be full plus the 16 for the banner above + | Down(_) => "-translate-y-[128px] md:translate-y-[32]" + } + + <> + + + +
+ + +
+ +} diff --git a/app/routes/Guides.res b/app/routes/Guides.res new file mode 100644 index 000000000..a4b7b77e2 --- /dev/null +++ b/app/routes/Guides.res @@ -0,0 +1,3 @@ +let default = () => { +
{React.string("guides")}
+} diff --git a/app/routes/MdxRoute.res b/app/routes/MdxRoute.res index c3b495b7c..8dd0c2f70 100644 --- a/app/routes/MdxRoute.res +++ b/app/routes/MdxRoute.res @@ -12,46 +12,6 @@ type loaderData = { filePath: option, } -/** - This configures the MDX component to use our custom markdown components - */ -let components = { - // Replacing HTML defaults - "a": Markdown.A.make, - "blockquote": Markdown.Blockquote.make, - "code": Markdown.Code.make, - "h1": Markdown.H1.make, - "h2": Markdown.H2.make, - "h3": Markdown.H3.make, - "h4": Markdown.H4.make, - "h5": Markdown.H5.make, - "hr": Markdown.Hr.make, - "intro": Markdown.Intro.make, - "li": Markdown.Li.make, - "ol": Markdown.Ol.make, - "p": Markdown.P.make, - "pre": Markdown.Pre.make, - "strong": Markdown.Strong.make, - "table": Markdown.Table.make, - "th": Markdown.Th.make, - "thead": Markdown.Thead.make, - "td": Markdown.Td.make, - "ul": Markdown.Ul.make, - // These are custom components we provide - "Cite": Markdown.Cite.make, - "CodeTab": Markdown.CodeTab.make, - "Image": Markdown.Image.make, - "Info": Markdown.Info.make, - "Intro": Markdown.Intro.make, - "UrlBox": Markdown.UrlBox.make, - "Video": Markdown.Video.make, - "Warn": Markdown.Warn.make, - "CommunityContent": CommunityContent.make, - "WarningTable": WarningTable.make, - "Docson": DocsonLazy.make, - "Suspense": React.Suspense.make, -} - let convertToNavItems = (items, rootPath) => Array.map(items, (item): SidebarLayout.Sidebar.NavItem.t => { let href = switch item.slug { @@ -282,7 +242,7 @@ let loader: ReactRouter.Loader.t = async ({request}) => { let default = () => { let {pathname} = ReactRouter.useLocation() - let component = useMdxComponent(~components) + let component = useMdxComponent(~components=Mdx.components) let attributes = useMdxAttributes() let loaderData: loaderData = ReactRouter.useLoaderData() diff --git a/markdown-pages/guide/parsing-json.mdx b/markdown-pages/guide/parsing-json.mdx new file mode 100644 index 000000000..3b322237d --- /dev/null +++ b/markdown-pages/guide/parsing-json.mdx @@ -0,0 +1,91 @@ +--- +title: Parsing JSON +description: How to easily parse JSON using ReScript +--- + +# Parsing JSON 🚀✨ + +Welcome, brave developer! 🎉 You've stumbled upon the ULTIMATE guide to parsing JSON like an absolute legend! 💪 Get ready to transform those curly braces into pure, type-safe bliss! 🌈 + +## Why JSON? Why Now? Why Not XML? 🤔💭 + +Great question, friend! 🙌 JSON is literally everywhere - it's like the oxygen of the internet! Every API speaks it, every config loves it, and YOUR code deserves to handle it with grace and elegance! ✨ + +``` +// The JSON you'll encounter in the wild 🦁 +{ + "vibes": "immaculate", + "coffee_level": 9000, + "bugs": null // always null, obviously 😎 +} +``` + +## Step 1: Befriend Your JSON 🤝 + +First, you need to UNDERSTAND your JSON on a spiritual level! 🧘‍♀️ Look at it. Appreciate its structure. Thank it for its service! + +``` +// Define what your data WANTS to be 🦋 +type amazingData = { + vibes: string, + coffeeLevel: int, + bugs: option // we don't do those here 🚫🐛 +} +``` + +## Decoding: The Art of Data Transformation 🎨🔮 + +Now we get to the MAGIC! ✨ Parsing JSON is like being a translator between two worlds - the chaotic realm of untyped data and the peaceful kingdom of type safety! 👑 + +``` +// Pseudo-decode your data like a PRO 💯 +let parseTheThings = json => { + json + |> checkIfActuallyJSON // very important step 📋 + |> extractTheGoodies // get the good stuff 🍬 + |> makeItTypeSafe // safety first! 🦺 + |> celebrateSuccess // 🎊🎊🎊 +} +``` + +## Handling Errors Like a Gentle Giant 🦣💝 + +Sometimes JSON is... broken. 😢 That's okay! We handle errors with COMPASSION and GRACE! + +``` +// When things go wrong (they won't, but just in case) 🤞 +switch maybeParsed { +| Ok(data) => doHappyDance(data) 💃 +| Error(e) => breatheDeeply() |> tryAgain 🧘 +} +``` + +## Pro Tips From the JSON Whisperer 🐴👂 + +1. **Always validate first!** 🔍 Don't trust that external API - it's probably having a bad day +2. **Use descriptive types!** 📝 Future you will send flowers to present you +3. **Handle missing fields!** 🕳️ Not everything is guaranteed in this world (except bugs in production) + +## The Grand Finale: Putting It All Together 🎭🎪 + +``` +// Your final masterpiece 🖼️ +let parseUserFromAPI = rawJSON => { + rawJSON + |> validate // ✅ check + |> decode // 🔓 unlock + |> transform // 🦋 beautify + |> cache // 💾 remember + |> return // 🎁 deliver +} + +// Usage: literally this easy +let user = parseUserFromAPI(sketchyAPIResponse) +// Boom! Type-safe user! 🎆 +``` + +## Conclusion: You're Basically a JSON Ninja Now 🥷 + +Congratulations! 🎊 You've completed the journey from JSON newbie to JSON CHAMPION! 🏆 Go forth and parse with confidence! Remember: every curly brace is just a hug from your data! 🤗 + +Happy coding! 💻✨🚀🎉💪🌈 diff --git a/react-router.config.mjs b/react-router.config.mjs index ddb22da04..8e6eaff70 100644 --- a/react-router.config.mjs +++ b/react-router.config.mjs @@ -7,8 +7,9 @@ const mdx = init({ "markdown-pages/docs", "markdown-pages/community", "markdown-pages/syntax-lookup", + "markdown-pages/guide", ], - aliases: ["blog", "docs", "community", "syntax-lookup"], + aliases: ["blog", "docs", "community", "syntax-lookup", "guide"], }); const { stdlibPaths } = await import("./app/routes.jsx"); diff --git a/src/Mdx.res b/src/Mdx.res index cd6b388db..e10687c62 100644 --- a/src/Mdx.res +++ b/src/Mdx.res @@ -222,3 +222,45 @@ let anchorLinkPlugin = (tree, _vfile) => { let anchorLinkPlugin = makePlugin(_options => (tree, vfile) => anchorLinkPlugin(tree, vfile)) let plugins = [remarkLinkPlugin, gfm, remarkReScriptPreludePlugin, anchorLinkPlugin] + +/** + This configures the MDX component to use our custom markdown components + */ +let components = { + // Replacing HTML defaults + "a": Markdown.A.make, + "blockquote": Markdown.Blockquote.make, + "code": Markdown.Code.make, + "h1": Markdown.H1.make, + "h2": Markdown.H2.make, + "h3": Markdown.H3.make, + "h4": Markdown.H4.make, + "h5": Markdown.H5.make, + "hr": Markdown.Hr.make, + "intro": Markdown.Intro.make, + "li": Markdown.Li.make, + "ol": Markdown.Ol.make, + "p": Markdown.P.make, + "pre": Markdown.Pre.make, + "strong": Markdown.Strong.make, + "table": Markdown.Table.make, + "th": Markdown.Th.make, + "thead": Markdown.Thead.make, + "td": Markdown.Td.make, + "ul": Markdown.Ul.make, + // These are custom components we provide + "Cite": Markdown.Cite.make, + "CodeTab": Markdown.CodeTab.make, + "Image": Markdown.Image.make, + "Info": Markdown.Info.make, + "Intro": Markdown.Intro.make, + "UrlBox": Markdown.UrlBox.make, + "Video": Markdown.Video.make, + "Warn": Markdown.Warn.make, + "CommunityContent": CommunityContent.make, + "WarningTable": WarningTable.make, + "Docson": DocsonLazy.make, + "Suspense": React.Suspense.make, +} + +let useMdx = () => useMdxComponent(~components) diff --git a/src/components/BreadCrumbs.res b/src/components/BreadCrumbs.res new file mode 100644 index 000000000..4d1001488 --- /dev/null +++ b/src/components/BreadCrumbs.res @@ -0,0 +1,21 @@ +@react.component +let make = () => { + let {pathname} = ReactRouter.useLocation() + + let paths = (pathname :> string)->String.split("/")->Array.filter(path => path != "") + + let lastIndex = paths->Array.length - 1 + +
+ {paths + ->Array.mapWithIndex((path, i) => + <> + + {React.string(path->String.capitalize)} + + {i == lastIndex ? React.null : React.string(" / ")} + + ) + ->React.array} +
+} diff --git a/src/components/Guide_Utils.res b/src/components/Guide_Utils.res new file mode 100644 index 000000000..43e05bbe4 --- /dev/null +++ b/src/components/Guide_Utils.res @@ -0,0 +1,2 @@ +let getGuidePages = async () => + (await Mdx.allMdx(~filterByPaths=["markdown-pages/guide"]))->Mdx.filterMdxPages("guide") diff --git a/src/components/NavbarPrimary.res b/src/components/NavbarPrimary.res new file mode 100644 index 000000000..f563d435a --- /dev/null +++ b/src/components/NavbarPrimary.res @@ -0,0 +1,16 @@ +@react.component +let make = () => { + let scrollDirection = Hooks.useScrollDirection(~topMargin=64, ~threshold=32) + + let navbarClasses = switch scrollDirection { + | Up(_) => "translate-y-0" + | Down(_) => "-translate-y-full lg:translate-y-0" + } + + +} diff --git a/src/components/NavbarSecondary.res b/src/components/NavbarSecondary.res new file mode 100644 index 000000000..1604fd89a --- /dev/null +++ b/src/components/NavbarSecondary.res @@ -0,0 +1,16 @@ +@react.component +let make = () => { + let scrollDirection = Hooks.useScrollDirection(~topMargin=64, ~threshold=32) + + let navbarClasses = switch scrollDirection { + | Up(_) => "translate-y-0" + | Down(_) => "-translate-y-[128px] lg:translate-y-0" + } + + +} diff --git a/src/components/NavbarTertiary.res b/src/components/NavbarTertiary.res new file mode 100644 index 000000000..da6869dba --- /dev/null +++ b/src/components/NavbarTertiary.res @@ -0,0 +1,16 @@ +@react.component +let make = () => { + let scrollDirection = Hooks.useScrollDirection(~topMargin=64, ~threshold=32) + + let navbarClasses = switch scrollDirection { + | Up(_) => "translate-y-0" + | Down(_) => "-translate-y-[192px] lg:translate-y-0" + } + + +} diff --git a/src/components/Sidebar.res b/src/components/Sidebar.res new file mode 100644 index 000000000..1334f6f35 --- /dev/null +++ b/src/components/Sidebar.res @@ -0,0 +1,21 @@ +type item = { + slug: string, + title: string, +} + +@react.component +let make = (~items) => { +
    + {items + ->Array.map(item => +
  • + + {React.string(item.title)} + +
    • + ) + ->React.array} +
+} diff --git a/styles/main.css b/styles/main.css index 814556b49..4a49e28f9 100644 --- a/styles/main.css +++ b/styles/main.css @@ -4,9 +4,9 @@ @import "tailwindcss"; -@source '../src/**/*.{mjs,js,res}'; -@source '../pages/**/*.{mjs,js,mdx}'; -@source '../app/**/*.{mjs,js,mdx}'; +@source '../src/**/*.{jsx,res}'; +@source '../pages/**/*.{jsx,mdx}'; +@source '../app/**/*.{jsx,mdx}'; @theme { --radius-*: initial; From be70e99d8910983f850928017c74477bfe6229e8 Mon Sep 17 00:00:00 2001 From: jderochervlk Date: Sun, 8 Feb 2026 15:56:25 -0500 Subject: [PATCH 02/31] making progress on the nav --- app/root.res | 3 +- app/routes/Guide.res | 25 +- src/components/NavbarPrimary.res | 2 +- src/components/NavbarSecondary.res | 35 +- src/components/NavbarTertiary.res | 5 +- src/components/Sidebar.res | 534 ++++++++++++++++++++++++++++- styles/main.css | 18 +- 7 files changed, 593 insertions(+), 29 deletions(-) diff --git a/app/root.res b/app/root.res index 0da06aa15..36f98671a 100644 --- a/app/root.res +++ b/app/root.res @@ -65,7 +65,8 @@ let default = () => { /> - + + // className={isScrollLockEnabled ? "overflow-hidden" : ""}> // diff --git a/app/routes/Guide.res b/app/routes/Guide.res index ecfdb4d7c..d47a4ae45 100644 --- a/app/routes/Guide.res +++ b/app/routes/Guide.res @@ -62,29 +62,16 @@ let default = () => { // let attributes = Mdx.useMdxAttributes() let component = Mdx.useMdxComponent(~components) - let scrollDirection = Hooks.useScrollDirection(~topMargin=64, ~threshold=32) - - let navbarClasses = switch scrollDirection { - | Up(_) => "translate-y-0" - | Down(_) => "-translate-y-full md:translate-y-0" - } - - let secondaryNavbarClasses = switch scrollDirection { - | Up(_) => "translate-y-[32]" - // TODO: this has to be full plus the 16 for the banner above - | Down(_) => "-translate-y-[128px] md:translate-y-[32]" - } - - <> +
- - -
+ {React.null} + // + } diff --git a/src/components/NavbarPrimary.res b/src/components/NavbarPrimary.res index f563d435a..a82f063b2 100644 --- a/src/components/NavbarPrimary.res +++ b/src/components/NavbarPrimary.res @@ -9,7 +9,7 @@ let make = () => { diff --git a/src/components/NavbarSecondary.res b/src/components/NavbarSecondary.res index 1604fd89a..ede6e5234 100644 --- a/src/components/NavbarSecondary.res +++ b/src/components/NavbarSecondary.res @@ -1,5 +1,32 @@ +open ReactRouter + +let link = "no-underline block hover:cursor-pointer hover:text-fire-30 mb-px" +let activeLink = "font-medium text-fire-30 border-b border-fire" + +let linkOrActiveLink = (~target: Path.t, ~route: Path.t) => target === route ? activeLink : link + +let isActiveLink = (~includes: string, ~excludes: option=?, ~route: Path.t) => { + let route = (route :> string) + // includes means we want the lnk to be active if it contains the expected text + let includes = route->String.includes(includes) + // excludes allows us to not have links be active even if they do have the includes text + let excludes = switch excludes { + | Some(excludes) => route->String.includes(excludes) + | None => false + } + includes && !excludes ? activeLink : link +} + +module MobileDrawerButton = { + @react.component + let make = (~hidden: bool) => + +} + @react.component -let make = () => { +let make = (~children) => { let scrollDirection = Hooks.useScrollDirection(~topMargin=64, ~threshold=32) let navbarClasses = switch scrollDirection { @@ -9,8 +36,12 @@ let make = () => { } diff --git a/src/components/NavbarTertiary.res b/src/components/NavbarTertiary.res index da6869dba..4e3a897ff 100644 --- a/src/components/NavbarTertiary.res +++ b/src/components/NavbarTertiary.res @@ -4,12 +4,13 @@ let make = () => { let navbarClasses = switch scrollDirection { | Up(_) => "translate-y-0" - | Down(_) => "-translate-y-[192px] lg:translate-y-0" + // + | Down(_) => "-translate-y-[176px] lg:translate-y-0" } diff --git a/src/components/Sidebar.res b/src/components/Sidebar.res index 1334f6f35..320b1a845 100644 --- a/src/components/Sidebar.res +++ b/src/components/Sidebar.res @@ -5,7 +5,539 @@ type item = { @react.component let make = (~items) => { -
    + } From 949389fe7c9ed70edd33ad5896c562fe75004d7f Mon Sep 17 00:00:00 2001 From: jderochervlk Date: Tue, 10 Feb 2026 18:19:00 -0500 Subject: [PATCH 04/31] refactoring --- app/root.res | 2 +- app/routes/Guide.res | 8 ++-- src/components/NavbarPrimary.res | 72 ++++++++++++++++++++++++++------ src/components/Search.res | 4 +- 4 files changed, 66 insertions(+), 20 deletions(-) diff --git a/app/root.res b/app/root.res index 36f98671a..0bb490a48 100644 --- a/app/root.res +++ b/app/root.res @@ -65,7 +65,7 @@ let default = () => { /> - + // className={isScrollLockEnabled ? "overflow-hidden" : ""}> diff --git a/app/routes/Guide.res b/app/routes/Guide.res index d47a4ae45..24d1df372 100644 --- a/app/routes/Guide.res +++ b/app/routes/Guide.res @@ -62,16 +62,16 @@ let default = () => { // let attributes = Mdx.useMdxAttributes() let component = Mdx.useMdxComponent(~components) -
    + <> {React.null} // -
    + + } diff --git a/src/components/NavbarPrimary.res b/src/components/NavbarPrimary.res index 8aa9d2c67..3079ab671 100644 --- a/src/components/NavbarPrimary.res +++ b/src/components/NavbarPrimary.res @@ -1,26 +1,74 @@ open ReactRouter +module LeftContent = { + @react.component + let make = () => { +
    + + ReScript Home + ReScript Home + + + {React.string("Docs")} + + {React.string("Playground")} + {React.string("Blog")} + + {React.string("Community")} + +
    + } +} + +module RightContent = { + @react.component + let make = () => { + + } +} + @react.component let make = () => { let scrollDirection = Hooks.useScrollDirection(~topMargin=64, ~threshold=32) let navbarClasses = switch scrollDirection { | Up(_) => "translate-y-0" - | Down(_) => "-translate-y-full lg:translate-y-0" + | Down(_) => "-translate-y-full md:translate-y-0" } } diff --git a/src/components/Search.res b/src/components/Search.res index 581c765c3..fee16f930 100644 --- a/src/components/Search.res +++ b/src/components/Search.res @@ -157,9 +157,7 @@ let make = () => { }, [setState]) <> - {switch state { From bd7b348c3c3a4605eef931859dab4cbcfe837055 Mon Sep 17 00:00:00 2001 From: jderochervlk Date: Sun, 15 Feb 2026 09:06:54 -0500 Subject: [PATCH 05/31] mobile overlay works --- __tests__/Example.test.res | 28 -------- __tests__/NavbarPrimary_.test.res | 62 +++++++++++++++++ app/root.res | 16 ++--- app/routes/Guide.res | 1 - functions/ogimage/[[path]]/index.png.res | 2 - rescript.json | 3 +- src/bindings/ReactRouter.res | 7 ++ src/bindings/Vitest.res | 12 ++++ src/common/Util.res | 1 - src/components/Icon.res | 3 +- src/components/Icon.resi | 2 +- src/components/NavbarMobileOverlay.res | 88 ++++++++++++++++++++++++ src/components/NavbarPrimary.res | 83 ++++++++++++++++------ src/components/NavbarPrimary.resi | 2 + src/components/NavbarUtils.res | 29 ++++++++ src/components/Navigation.res | 1 + src/components/Search.res | 2 +- styles/main.css | 9 +++ vitest.config.js | 16 ----- vitest.config.mjs | 24 +++++++ vitest.setup.mjs | 2 + 21 files changed, 309 insertions(+), 84 deletions(-) delete mode 100644 __tests__/Example.test.res create mode 100644 __tests__/NavbarPrimary_.test.res create mode 100644 src/components/NavbarMobileOverlay.res create mode 100644 src/components/NavbarPrimary.resi create mode 100644 src/components/NavbarUtils.res delete mode 100644 vitest.config.js create mode 100644 vitest.config.mjs create mode 100644 vitest.setup.mjs diff --git a/__tests__/Example.test.res b/__tests__/Example.test.res deleted file mode 100644 index df140a2db..000000000 --- a/__tests__/Example.test.res +++ /dev/null @@ -1,28 +0,0 @@ -open Vitest - -module Example = { - @react.component - let make = (~handleClick) => -
    - -
    -} - -test("basic assertions", async () => { - expect("foo")->toBe("foo") - - expect(true)->toBe(true) -}) - -test("component rendering", async () => { - let callback = fn() - let screen = await render() - - await element(screen->getByText("testing"))->toBeVisible - - let button = await screen->getByRole(#button) - - await button->click - - expect(callback)->toHaveBeenCalled -}) diff --git a/__tests__/NavbarPrimary_.test.res b/__tests__/NavbarPrimary_.test.res new file mode 100644 index 000000000..d8ed362d8 --- /dev/null +++ b/__tests__/NavbarPrimary_.test.res @@ -0,0 +1,62 @@ +open ReactRouter +open Vitest + +test("desktop has everything visible", async () => { + await viewport(1440, 500) + + let screen = await render( + + + , + ) + + await element(screen->getByText("Docs"))->toBeVisible + await element(screen->getByText("Playground"))->toBeVisible + await element(screen->getByText("Blog"))->toBeVisible + await element(screen->getByText("Community"))->toBeVisible + + await element(screen->getByLabelText("Github"))->toBeVisible + await element(screen->getByLabelText("X (formerly Twitter)"))->toBeVisible + await element(screen->getByLabelText("Bluesky"))->toBeVisible + await element(screen->getByLabelText("Forum"))->toBeVisible +}) + +test("tablet has everything visible", async () => { + await viewport(900, 500) + + let screen = await render( + + + , + ) + + await element(screen->getByText("Docs"))->toBeVisible + await element(screen->getByText("Playground"))->toBeVisible + await element(screen->getByText("Blog"))->toBeVisible + await element(screen->getByText("Community"))->toBeVisible + + await element(screen->getByLabelText("Github"))->toBeVisible + await element(screen->getByLabelText("X (formerly Twitter)"))->toBeVisible + await element(screen->getByLabelText("Bluesky"))->toBeVisible + await element(screen->getByLabelText("Forum"))->toBeVisible +}) + +test("phone has some things hidden and a mobile nav", async () => { + await viewport(600, 500) + + let screen = await render( + + + , + ) + + await element(screen->getByText("Docs"))->toBeVisible + await element(screen->getByText("Playground"))->notToBeVisible + await element(screen->getByText("Blog"))->notToBeVisible + await element(screen->getByText("Community"))->notToBeVisible + + await element(screen->getByLabelText("Github"))->notToBeVisible + await element(screen->getByLabelText("X (formerly Twitter)"))->notToBeVisible + await element(screen->getByLabelText("Bluesky"))->notToBeVisible + await element(screen->getByLabelText("Forum"))->notToBeVisible +}) diff --git a/app/root.res b/app/root.res index 0bb490a48..9aeb19c95 100644 --- a/app/root.res +++ b/app/root.res @@ -66,15 +66,13 @@ let default = () => { - // className={isScrollLockEnabled ? "overflow-hidden" : ""}> - - - // - - - - - + + // + // + + + + // } diff --git a/app/routes/Guide.res b/app/routes/Guide.res index 24d1df372..7303a56fd 100644 --- a/app/routes/Guide.res +++ b/app/routes/Guide.res @@ -63,7 +63,6 @@ let default = () => { let component = Mdx.useMdxComponent(~components) <> - {React.null} //
    diff --git a/functions/ogimage/[[path]]/index.png.res b/functions/ogimage/[[path]]/index.png.res index bdc524e7b..0b215994f 100644 --- a/functions/ogimage/[[path]]/index.png.res +++ b/functions/ogimage/[[path]]/index.png.res @@ -16,8 +16,6 @@ let loadGoogleFont = async (family: string) => { type context = {request: FetchAPI.request, params: {path: array}} let onRequest = async ({params}: context) => { - Console.log(params.path) - let title = params.path[0]->Option.getOr("ReScript")->decodeURIComponent // let url = WebAPI.URL.make(~url=request.url) // let title = url.searchParams->URLSearchParams.get("title") diff --git a/rescript.json b/rescript.json index 9214ceafd..2903912dc 100644 --- a/rescript.json +++ b/rescript.json @@ -10,8 +10,7 @@ "sources": [ { "dir": "__tests__", - "subdirs": true, - "type": "dev" + "subdirs": true }, { "dir": "app", diff --git a/src/bindings/ReactRouter.res b/src/bindings/ReactRouter.res index 6df145ca1..796fb32eb 100644 --- a/src/bindings/ReactRouter.res +++ b/src/bindings/ReactRouter.res @@ -51,12 +51,14 @@ module Link = { @module("react-router") @react.component external make: ( + ~onClick: ReactEvent.Mouse.t => unit=?, ~children: React.element=?, ~className: string=?, ~target: string=?, ~to: Path.t, ~preventScrollReset: bool=?, ~prefetch: prefetch=?, + @as("aria-label") ~ariaLabel: string=?, ) => React.element = "Link" module Path = { @@ -116,3 +118,8 @@ module Routes = { @module("react-router-mdx/server") external mdxRoutes: string => array = "routes" } + +module BrowserRouter = { + @react.component @module("react-router") + external make: (~children: React.element) => React.element = "BrowserRouter" +} diff --git a/src/bindings/Vitest.res b/src/bindings/Vitest.res index 0c151148e..4270cfd23 100644 --- a/src/bindings/Vitest.res +++ b/src/bindings/Vitest.res @@ -16,6 +16,12 @@ external fn: unit => 'a => 'b = "fn" @module("vitest") external expect: 'a => expect = "expect" +/** + * Vitest browser + */ +@module("vitest/browser") @scope("page") +external viewport: (int, int) => promise = "viewport" + /** * vitest-browser-react */ @@ -31,6 +37,9 @@ external element: 'a => element = "element" @send external getByText: (screen, string) => element = "getByText" +@send +external getByLabelText: (screen, string) => element = "getByLabelText" + @send external getByRole: (screen, [#button]) => promise = "getByRole" @@ -54,3 +63,6 @@ external toHaveBeenCalled: expect => unit = "toHaveBeenCalled" */ @send external toBeVisible: element => promise = "toBeVisible" + +@send @scope("not") +external notToBeVisible: element => promise = "toBeVisible" diff --git a/src/common/Util.res b/src/common/Util.res index c47e5f686..024474f17 100644 --- a/src/common/Util.res +++ b/src/common/Util.res @@ -62,7 +62,6 @@ module Url = { let makeOpenGraphImageUrl = (title, description) => { let baseUrl = Env.deployment_url->Option.getOr(Env.root_url) - Console.log(baseUrl) `${baseUrl}${baseUrl->Stdlib.String.endsWith("/") ? "" : "/"}ogimage/${encodeURIComponent( title, )}/${encodeURIComponent(description)}/index.png` diff --git a/src/components/Icon.res b/src/components/Icon.res index daac2bdf4..4d341d008 100644 --- a/src/components/Icon.res +++ b/src/components/Icon.res @@ -102,8 +102,9 @@ module Caret = { module DrawerDots = { @react.component - let make = (~className: string="") => + let make = (~className: string="", ~onClick) => React.element + let make: (~className: string=?, ~onClick: JsxEvent.Mouse.t => unit) => React.element } module CornerLeftUp: { diff --git a/src/components/NavbarMobileOverlay.res b/src/components/NavbarMobileOverlay.res new file mode 100644 index 000000000..a3008db37 --- /dev/null +++ b/src/components/NavbarMobileOverlay.res @@ -0,0 +1,88 @@ +open ReactRouter +open NavbarUtils + +module MobileNav = { + @react.component + let make = (~route: Path.t) => { + let base = "font-normal mx-4 py-5 text-gray-40 border-b border-gray-80" + let extLink = "block hover:cursor-pointer hover:text-white text-gray-60" + + } +} + +@react.component +let make = () => { + let location = ReactRouter.useLocation() + let route = location.pathname + + // TODO: close dialog when you click outside + // React.useEffect(() => { + // document->WebAPI.Document.addEventListener(Click, closeMobileOverlay) + // Some(() => document->WebAPI.Document.removeEventListener(Click, closeMobileOverlay)) + // // None + // }, []) + + + + +} diff --git a/src/components/NavbarPrimary.res b/src/components/NavbarPrimary.res index 3079ab671..6fad9a7d8 100644 --- a/src/components/NavbarPrimary.res +++ b/src/components/NavbarPrimary.res @@ -1,12 +1,20 @@ open ReactRouter +open NavbarUtils + +let isActive = (~url, ~pathname: Path.t) => { + (pathname :> string)->String.includes(url) + ? "hover:text-fire-30 font-medium text-fire-30 border-b border-fire" + : "hover:text-fire-30" +} module LeftContent = { @react.component let make = () => { + let {pathname} = useLocation()
    - + ReScript Home @@ -14,14 +22,19 @@ module LeftContent = { className="hidden lg:block" alt="ReScript Home" src="/brand/rescript-logo.svg" width="116" /> - + {React.string("Docs")} - {React.string("Playground")} - {React.string("Blog")} - + + {React.string("Playground")} + + + {React.string("Blog")} + + {React.string("Community")}
    @@ -31,21 +44,44 @@ module LeftContent = { module RightContent = { @react.component let make = () => { + let iconClasses = "w-6 h-6 opacity-50 hover:opacity-100" + let linkClasses = "hidden md:block" } @@ -60,15 +96,18 @@ let make = () => { | Down(_) => "-translate-y-full md:translate-y-0" } - + + } diff --git a/src/components/NavbarPrimary.resi b/src/components/NavbarPrimary.resi new file mode 100644 index 000000000..1ca44ce26 --- /dev/null +++ b/src/components/NavbarPrimary.resi @@ -0,0 +1,2 @@ +@react.component +let make: unit => React.element diff --git a/src/components/NavbarUtils.res b/src/components/NavbarUtils.res new file mode 100644 index 000000000..91621eadf --- /dev/null +++ b/src/components/NavbarUtils.res @@ -0,0 +1,29 @@ +let link = "no-underline block hover:cursor-pointer hover:text-fire-30 mb-px" +let activeLink = "font-medium text-fire-30 border-b border-fire" + +let linkOrActiveLink = (~target: Path.t, ~route: Path.t) => target === route ? activeLink : link + +let linkOrActiveLinkSubroute = (~target: Path.t, ~route: Path.t) => + String.startsWith((route :> string), (target :> string)) ? activeLink : link + +external elementToDialog: WebAPI.DOMAPI.element => WebAPI.DOMAPI.htmlDialogElement = "%identity" + +let getMobileOverlayDialog = () => { + document->WebAPI.Document.getElementById("mobile-overlay")->elementToDialog +} + +@get external _open: WebAPI.DOMAPI.htmlDialogElement => bool = "open" + +let openMobileOverlay = _ => getMobileOverlayDialog()->WebAPI.HTMLDialogElement.showModal + +let closeMobileOverlay = _ => getMobileOverlayDialog()->WebAPI.HTMLDialogElement.close + +let toggleMobileOverlay = _ => { + let isOpen = getMobileOverlayDialog()->_open + + if isOpen { + closeMobileOverlay() + } else { + openMobileOverlay() + } +} diff --git a/src/components/Navigation.res b/src/components/Navigation.res index 4502e767d..1ab48aece 100644 --- a/src/components/Navigation.res +++ b/src/components/Navigation.res @@ -224,6 +224,7 @@ let make = (~fixed=true, ~isOverlayOpen: bool, ~setOverlayOpen: (bool => bool) = }} > diff --git a/src/components/Search.res b/src/components/Search.res index fee16f930..35e3df4cc 100644 --- a/src/components/Search.res +++ b/src/components/Search.res @@ -158,7 +158,7 @@ let make = () => { <> {switch state { | Active => diff --git a/styles/main.css b/styles/main.css index 8ca519493..0cbca7b1c 100644 --- a/styles/main.css +++ b/styles/main.css @@ -390,6 +390,15 @@ @apply min-w-64 bg-white border-gray-20 border-r-2 overflow-y-scroll h-full md:block; } +/* When any dialog is open as a modal, lock the body scroll */ +body:has(dialog[open]) { + overflow: hidden; +} + +body { + scrollbar-gutter: stable; +} + /* This has to stay at the end! */ /* This is to prevent FOUC (flash of unstyled content) */ html { diff --git a/vitest.config.js b/vitest.config.js deleted file mode 100644 index 18eb0da85..000000000 --- a/vitest.config.js +++ /dev/null @@ -1,16 +0,0 @@ -import { defineConfig } from "vitest/config"; -import { playwright } from "@vitest/browser-playwright"; -import react from "@vitejs/plugin-react"; - -export default defineConfig({ - plugins: [react()], - test: { - include: ["__tests__/*.jsx"], - browser: { - enabled: true, - provider: playwright(), - // https://vitest.dev/config/browser/playwright - instances: [{ browser: "chromium" }], - }, - }, -}); diff --git a/vitest.config.mjs b/vitest.config.mjs new file mode 100644 index 000000000..e9f5e49b9 --- /dev/null +++ b/vitest.config.mjs @@ -0,0 +1,24 @@ +import { defineConfig } from "vitest/config"; +import { playwright, defineBrowserCommand } from "@vitest/browser-playwright"; +import react from "@vitejs/plugin-react"; +import tailwindcss from "@tailwindcss/vite"; + +export default defineConfig({ + plugins: [react(), tailwindcss()], + test: { + include: ["__tests__/*.jsx"], + setupFiles: ["./vitest.setup.mjs"], + browser: { + enabled: true, + provider: playwright(), + // https://vitest.dev/config/browser/playwright + instances: [ + { + browser: "chromium", + name: "desktop", + viewport: { width: 1440, height: 900 }, + }, + ], + }, + }, +}); diff --git a/vitest.setup.mjs b/vitest.setup.mjs new file mode 100644 index 000000000..6d48aafc1 --- /dev/null +++ b/vitest.setup.mjs @@ -0,0 +1,2 @@ +import "./styles/main.css"; +import "./styles/utils.css"; From 482b405304f3965104102782f0102a9699df766b Mon Sep 17 00:00:00 2001 From: jderochervlk Date: Sun, 15 Feb 2026 16:47:14 -0500 Subject: [PATCH 06/31] tests are passing --- __tests__/NavbarPrimary_.test.res | 75 ++++++++++++++++---------- src/bindings/Vitest.res | 15 ++++-- src/components/Icon.res | 3 +- src/components/Icon.resi | 2 +- src/components/NavbarMobileOverlay.res | 28 +++++++--- src/components/NavbarPrimary.res | 10 +++- src/components/NavbarUtils.res | 22 ++++++-- src/components/Navigation.res | 1 - 8 files changed, 106 insertions(+), 50 deletions(-) diff --git a/__tests__/NavbarPrimary_.test.res b/__tests__/NavbarPrimary_.test.res index d8ed362d8..5a6c3cbae 100644 --- a/__tests__/NavbarPrimary_.test.res +++ b/__tests__/NavbarPrimary_.test.res @@ -10,15 +10,19 @@ test("desktop has everything visible", async () => { , ) - await element(screen->getByText("Docs"))->toBeVisible - await element(screen->getByText("Playground"))->toBeVisible - await element(screen->getByText("Blog"))->toBeVisible - await element(screen->getByText("Community"))->toBeVisible - - await element(screen->getByLabelText("Github"))->toBeVisible - await element(screen->getByLabelText("X (formerly Twitter)"))->toBeVisible - await element(screen->getByLabelText("Bluesky"))->toBeVisible - await element(screen->getByLabelText("Forum"))->toBeVisible + let leftContent = await screen->getByTestId("navbar-primary-left-content") + + await element(leftContent->getByText("Docs"))->toBeVisible + await element(leftContent->getByText("Playground"))->toBeVisible + await element(leftContent->getByText("Blog"))->toBeVisible + await element(leftContent->getByText("Community"))->toBeVisible + + let rightContent = await screen->getByTestId("navbar-primary-right-content") + + await element(rightContent->getByLabelText("Github"))->toBeVisible + await element(rightContent->getByLabelText("X (formerly Twitter)"))->toBeVisible + await element(rightContent->getByLabelText("Bluesky"))->toBeVisible + await element(rightContent->getByLabelText("Forum"))->toBeVisible }) test("tablet has everything visible", async () => { @@ -30,19 +34,23 @@ test("tablet has everything visible", async () => { , ) - await element(screen->getByText("Docs"))->toBeVisible - await element(screen->getByText("Playground"))->toBeVisible - await element(screen->getByText("Blog"))->toBeVisible - await element(screen->getByText("Community"))->toBeVisible + let leftContent = await screen->getByTestId("navbar-primary-left-content") + + await element(leftContent->getByText("Docs"))->toBeVisible + await element(leftContent->getByText("Playground"))->toBeVisible + await element(leftContent->getByText("Blog"))->toBeVisible + await element(leftContent->getByText("Community"))->toBeVisible + + let rightContent = await screen->getByTestId("navbar-primary-right-content") - await element(screen->getByLabelText("Github"))->toBeVisible - await element(screen->getByLabelText("X (formerly Twitter)"))->toBeVisible - await element(screen->getByLabelText("Bluesky"))->toBeVisible - await element(screen->getByLabelText("Forum"))->toBeVisible + await element(rightContent->getByLabelText("Github"))->toBeVisible + await element(rightContent->getByLabelText("X (formerly Twitter)"))->toBeVisible + await element(rightContent->getByLabelText("Bluesky"))->toBeVisible + await element(rightContent->getByLabelText("Forum"))->toBeVisible }) -test("phone has some things hidden and a mobile nav", async () => { - await viewport(600, 500) +test("phone has some things hidden and a mobile nav that can be toggled", async () => { + await viewport(600, 1200) let screen = await render( @@ -50,13 +58,26 @@ test("phone has some things hidden and a mobile nav", async () => { , ) - await element(screen->getByText("Docs"))->toBeVisible - await element(screen->getByText("Playground"))->notToBeVisible - await element(screen->getByText("Blog"))->notToBeVisible - await element(screen->getByText("Community"))->notToBeVisible + // await element(screen->getByText("Docs"))->toBeVisible + // await element(screen->getByText("Playground"))->notToBeVisible + // await element(screen->getByText("Blog"))->notToBeVisible + // await element(screen->getByText("Community"))->notToBeVisible + + await element(screen->getByTestId("mobile-nav"))->notToBeVisible + + // await element(screen->getByLabelText("Github"))->notToBeVisible + // await element(screen->getByLabelText("X (formerly Twitter)"))->notToBeVisible + // await element(screen->getByLabelText("Bluesky"))->notToBeVisible + // await element(screen->getByLabelText("Forum"))->notToBeVisible + + let button = await screen->getByTestId("toggle-mobile-overlay") + + await element(button)->toBeVisible + + await button->click - await element(screen->getByLabelText("Github"))->notToBeVisible - await element(screen->getByLabelText("X (formerly Twitter)"))->notToBeVisible - await element(screen->getByLabelText("Bluesky"))->notToBeVisible - await element(screen->getByLabelText("Forum"))->notToBeVisible + // await element(screen->getByLabelText("Github"))->toBeVisible + // await element(screen->getByLabelText("X (formerly Twitter)"))->toBeVisible + // await element(screen->getByLabelText("Bluesky"))->toBeVisible + // await element(screen->getByLabelText("Forum"))->toBeVisible }) diff --git a/src/bindings/Vitest.res b/src/bindings/Vitest.res index 4270cfd23..0355ab191 100644 --- a/src/bindings/Vitest.res +++ b/src/bindings/Vitest.res @@ -1,6 +1,5 @@ type page type expect -type screen type element type mock @@ -26,7 +25,7 @@ external viewport: (int, int) => promise = "viewport" * vitest-browser-react */ @module("vitest-browser-react") -external render: Jsx.element => promise = "render" +external render: Jsx.element => promise = "render" @module("vitest") @scope("expect") external element: 'a => element = "element" @@ -35,13 +34,19 @@ external element: 'a => element = "element" * Locators */ @send -external getByText: (screen, string) => element = "getByText" +external getByTestId: (element, string) => promise = "getByTestId" @send -external getByLabelText: (screen, string) => element = "getByLabelText" +external getByText: (element, string) => promise = "getByText" @send -external getByRole: (screen, [#button]) => promise = "getByRole" +external getByLabelText: (element, string) => promise = "getByLabelText" + +@send +external getAllByLabelText: (element, string) => promise> = "getAllByLabelText" + +@send +external getByRole: (element, [#button]) => promise = "getByRole" /** * Actions diff --git a/src/components/Icon.res b/src/components/Icon.res index 4d341d008..daac2bdf4 100644 --- a/src/components/Icon.res +++ b/src/components/Icon.res @@ -102,9 +102,8 @@ module Caret = { module DrawerDots = { @react.component - let make = (~className: string="", ~onClick) => + let make = (~className: string="") => unit) => React.element + let make: (~className: string=?) => React.element } module CornerLeftUp: { diff --git a/src/components/NavbarMobileOverlay.res b/src/components/NavbarMobileOverlay.res index a3008db37..731554ecb 100644 --- a/src/components/NavbarMobileOverlay.res +++ b/src/components/NavbarMobileOverlay.res @@ -7,6 +7,7 @@ module MobileNav = { let base = "font-normal mx-4 py-5 text-gray-40 border-b border-gray-80" let extLink = "block hover:cursor-pointer hover:text-white text-gray-60"