Skip to content

feat(guide): add base document metadata [Codex] #1348

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jderochervlk merged 4 commits into from
Sep 13, 2026
Merged

feat(guide): add base document metadata [Codex] #1348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d39092c
feat(guide): add base document metadata
jderochervlk Sep 13, 2026
77be985
fix(guide): avoid shared web manifest
jderochervlk Sep 13, 2026
f9109ee
chore(guide): format generated root output
jderochervlk Sep 13, 2026
d7e7a4b
fix(guide): sync browser chrome theme
jderochervlk Sep 13, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions apps/guide/__tests__/GuideLayout_.test.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,11 @@ test("serializes pane sizes as guide CSS variables", async () => {
expect(style->String.includes("--guide-output-height: 250px"))->toBe(true)
})

test("uses a browser chrome color for each theme", async () => {
expect(GuideLayout.Light->GuideLayout.themeColor)->toBe("#f6f4ef")
expect(GuideLayout.Dark->GuideLayout.themeColor)->toBe("#0f172a")
})

test("stores resized pane dimensions in local storage", async () => {
GuideLayout.clearPaneSizes()

Expand Down
6 changes: 6 additions & 0 deletions apps/guide/app/GuideLayout.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,12 @@ let themeClass = theme =>
| Dark => "guide-theme-dark"
}

let themeColor = theme =>
switch theme {
| Light => "#f6f4ef"
| Dark => "#0f172a"
}

let toggleTheme = theme =>
switch theme {
| Light => Dark
Expand Down
16 changes: 16 additions & 0 deletions apps/guide/app/GuideLayoutHook.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@ type t = {
startRowResize: ReactEvent.Mouse.t => unit,
}

let syncThemeColor = theme =>
switch document->WebAPI.Document.querySelector(`meta[name="theme-color"]`) {
| Value(element) =>
WebAPI.Element.setAttribute(
element,
~qualifiedName="content",
~value=theme->GuideLayout.themeColor,
)
| Null => ()
}

let useLayout = (): t => {
let shellRef: React.ref<Nullable.t<Dom.element>> = React.useRef(Nullable.null)
let (paneSizes, setPaneSizes) = React.useState(() => GuideLayout.defaultPaneSizes)
Expand Down Expand Up @@ -39,6 +50,11 @@ let useLayout = (): t => {
None
}, (theme, themeLoaded))

React.useEffect(() => {
theme->syncThemeColor
None
}, [theme])

React.useEffect(() => {
if paneSizesLoaded {
paneSizes->GuideLayout.savePaneSizes
Expand Down
25 changes: 24 additions & 1 deletion apps/guide/app/root.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,34 @@ function Root$default(props) {
<link href={mainCss} rel={"stylesheet"} />
<ReactRouter.Links />
<ReactRouter.Meta />
<meta charSet={"UTF-8"} />
<meta
content={"width=device-width, initial-scale=1"}
name={"viewport"}
/>
<meta charSet={"UTF-8"} />
<meta content={"ReScript Guide"} name={"application-name"} />
<meta
content={"An interactive guide to learning ReScript."}
name={"description"}
/>
<meta content={"#f6f4ef"} name={"theme-color"} />
<link
href={"/apple-touch-icon.avif"}
rel={"apple-touch-icon"}
sizes={"180x180"}
/>
<link
href={"/favicon-32x32.avif"}
rel={"icon"}
sizes={"32x32"}
type={"image/avif"}
/>
<link
href={"/favicon-16x16.avif"}
rel={"icon"}
sizes={"16x16"}
type={"image/avif"}
/>
<title>{"ReScript Guide"}</title>
</head>
<body>
Expand Down
8 changes: 7 additions & 1 deletion apps/guide/app/root.res
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,14 @@ let default = () => {
<link rel="stylesheet" href={mainCss} />
<ReactRouter.Links />
<ReactRouter.Meta />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charSet="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="application-name" content="ReScript Guide" />
<meta name="description" content="An interactive guide to learning ReScript." />
<meta name="theme-color" content="#f6f4ef" />
Comment thread
jderochervlk marked this conversation as resolved.
Resolved
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.avif" />
<link rel="icon" type_="image/avif" sizes="32x32" href="/favicon-32x32.avif" />
<link rel="icon" type_="image/avif" sizes="16x16" href="/favicon-16x16.avif" />
<title> {React.string("ReScript Guide")} </title>
</head>
<body>
Expand Down
2 changes: 2 additions & 0 deletions apps/guide/vite.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ export default defineConfig(({ mode }) => {

return {
envDir: "../..",
// Reuse the official favicon set without duplicating branding assets.
publicDir: "../docs/public/favicon",
Comment thread
jderochervlk marked this conversation as resolved.
Resolved
plugins: [
env({ prefix: "PUBLIC_" }),
...(isTest ? [] : [reactRouter()]),
Expand Down
Loading