//
{React.string("Docs")}
diff --git a/app/routes/MdxRoute.res b/app/routes/MdxRoute.res
index c3b495b7c..55f1bf4fb 100644
--- a/app/routes/MdxRoute.res
+++ b/app/routes/MdxRoute.res
@@ -291,8 +291,43 @@ let default = () => {
<>
{if (pathname :> string) == "/docs/manual/api" {
+ let breadcrumbs = list{
+ {Url.name: "Docs", href: `/docs/manual/api`},
+ {name: "API", href: `/docs/manual/api`},
+ }
+ let sidebarContent =
+
+
<>
Nullable.getOr("ReScript API")} />
+
+
+
+
{component()}
@@ -304,10 +339,9 @@ let default = () => {
) {
<>
Nullable.getOr("")} />
-
Option.map(crumbs =>
+
+ {
+ let breadcrumbs = loaderData.breadcrumbs->Option.map(crumbs =>
List.mapWithIndex(crumbs, (item, index) => {
if index === 0 {
if (pathname :> string)->String.includes("docs/manual") {
@@ -321,11 +355,64 @@ let default = () => {
item
}
})
- )}
- editHref={`https://github.com/rescript-lang/rescript-lang.org/blob/master${loaderData.filePath->Option.getOrThrow}`}
- >
- {component()}
-
+ )
+ let editHref = `https://github.com/rescript-lang/rescript-lang.org/blob/master${loaderData.filePath->Option.getOrThrow}`
+
+ let sidebarContent =
+
+
+ <>
+
+ {breadcrumbs->Option.mapOr(React.null, crumbs =>
+
+ )}
+
+ {React.string("Edit")}
+
+
+
+ {component()}
+
+
+ }
} else if (pathname :> string)->String.includes("community") {
@@ -347,7 +434,7 @@ let default = () => {
->Option.getOr("Syntax Lookup | ReScript API")}
description={attributes.description->Nullable.getOr("")}
/>
-
+
{component()}
diff --git a/app/routes/SyntaxLookupRoute.res b/app/routes/SyntaxLookupRoute.res
index ff71bc73a..b2a0e8e25 100644
--- a/app/routes/SyntaxLookupRoute.res
+++ b/app/routes/SyntaxLookupRoute.res
@@ -34,6 +34,7 @@ let default = () => {
let {mdxSources} = useLoaderData()
<>
{React.string("Syntax Lookup | ReScript API")}
+
}
diff --git a/e2e/DocsPage.test.res b/e2e/DocsPage.test.res
new file mode 100644
index 000000000..536f443fc
--- /dev/null
+++ b/e2e/DocsPage.test.res
@@ -0,0 +1,69 @@
+open Playwright
+
+describe("Docs Page", () => {
+ test("has the correct page title", async ({page}) => {
+ let _ = await page->goto("/docs")
+ await page->expect->toHaveTitle("ReScript Documentation")
+ })
+
+ test("renders the docs overview heading", async ({page}) => {
+ let _ = await page->goto("/docs")
+ let heading = page->getByRole("heading", ~options={name: "Documentation"})
+ await heading->expect->toBeVisible
+ })
+
+ test("docs navigation sidebar is present on the introduction page", async ({page}) => {
+ let _ = await page->goto("/docs/manual/latest/introduction")
+ let sidebar = page->getByRole("navigation")
+ await sidebar->expect->toBeVisible
+ })
+
+ test("can navigate from the overview to the introduction", async ({page}) => {
+ let _ = await page->goto("/docs")
+ let introLink = page->getByRole("link", ~options={name: "Introduction"})
+ await introLink->first->click
+ await page->expect->toHaveURL("/docs/manual/latest/introduction")
+ })
+
+ test("introduction page renders main content with h1", async ({page}) => {
+ let _ = await page->goto("/docs/manual/latest/introduction")
+ let mainContent = page->locator("main")
+ await mainContent->expect->toBeVisible
+ let heading = page->getByRole("heading", ~options={name: "Introduction", level: 1})
+ await heading->expect->toBeVisible
+ })
+
+ test("syntax lookup page loads with heading", async ({page}) => {
+ let _ = await page->goto("/syntax-lookup")
+ let heading = page->getByRole("heading", ~options={name: "Syntax Lookup"})
+ await heading->expect->toBeVisible
+ })
+
+ test("packages page loads", async ({page}) => {
+ let _ = await page->goto("/packages")
+ let heading = page->getByRole("heading", ~options={name: "Packages"})
+ await heading->expect->toBeVisible
+ })
+
+ test("has no accessibility violations on the docs overview", async ({page}) => {
+ let _ = await page->goto("/docs")
+ await page->assertNoA11yViolations
+ })
+
+ test("has no accessibility violations on the introduction page", async ({page}) => {
+ let _ = await page->goto("/docs/manual/latest/introduction")
+ await page->assertNoA11yViolations
+ })
+
+ test("visual snapshot — docs overview", async ({page}) => {
+ let _ = await page->goto("/docs")
+ await page->waitForLoadState("networkidle")
+ await takeSnapshot(page, "Docs Overview")
+ })
+
+ test("visual snapshot — introduction page", async ({page}) => {
+ let _ = await page->goto("/docs/manual/latest/introduction")
+ await page->waitForLoadState("networkidle")
+ await takeSnapshot(page, "Docs Introduction")
+ })
+})
diff --git a/e2e/LandingPage.test.res b/e2e/LandingPage.test.res
new file mode 100644
index 000000000..c2dd670d8
--- /dev/null
+++ b/e2e/LandingPage.test.res
@@ -0,0 +1,63 @@
+open Playwright
+
+describe("Landing Page", () => {
+ test("has the correct page title", async ({page}) => {
+ let _ = await page->goto("/")
+ await page
+ ->expect
+ ->toHaveTitle(
+ "ReScript - A robustly typed language that compiles to efficient and human-readable JavaScript.",
+ )
+ })
+
+ test("renders the hero section heading", async ({page}) => {
+ let _ = await page->goto("/")
+ let hero =
+ page->getByRole(
+ "heading",
+ ~options={name: "Fast, Simple, Fully Typed JavaScript from the Future"},
+ )
+ await hero->expect->toBeVisible
+ })
+
+ test("primary navigation links are present and visible", async ({page}) => {
+ let _ = await page->goto("/")
+
+ await page->getByRole("link", ~options={name: "Docs"})->expect->toBeVisible
+ await page->getByRole("link", ~options={name: "Playground"})->expect->toBeVisible
+ await page->getByRole("link", ~options={name: "Blog"})->expect->toBeVisible
+ await page->getByRole("link", ~options={name: "Community"})->expect->toBeVisible
+ })
+
+ test("Get Started link navigates to the introduction", async ({page}) => {
+ let _ = await page->goto("/")
+
+ let getStarted = page->getByRole("link", ~options={name: "Get Started"})
+ await getStarted->first->click
+
+ await page->expect->toHaveURL("/docs/manual/latest/introduction")
+ })
+
+ test("GitHub social link is present", async ({page}) => {
+ let _ = await page->goto("/")
+ let githubLink = page->getByRole("link", ~options={name: "GitHub"})
+ await githubLink->expect->toBeVisible
+ })
+
+ test("has no accessibility violations", async ({page}) => {
+ let _ = await page->goto("/")
+ await page->assertNoA11yViolations
+ })
+
+ test("visual snapshot — desktop", async ({page}) => {
+ let _ = await page->goto("/")
+ await page->waitForLoadState("networkidle")
+ await takeSnapshot(page, "Landing Page — Desktop")
+ })
+
+ test("visual snapshot — mobile", async ({page}) => {
+ let _ = await page->goto("/")
+ await page->waitForLoadState("networkidle")
+ await takeSnapshot(page, "Landing Page — Mobile")
+ })
+})
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/functions/yoga.wasm b/functions/yoga.wasm
new file mode 100644
index 000000000..7da77dea1
Binary files /dev/null and b/functions/yoga.wasm differ
diff --git a/package.json b/package.json
index 39407f269..5f3f5ea29 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,10 @@
"build:vite": "react-router build",
"build": "yarn build:res && yarn build:scripts && yarn build:update-index && yarn build:vite",
"ci:format": "prettier . --check --experimental-cli",
- "ci:test": "yarn vitest --run --browser.headless",
+ "ci:test": "yarn vitest --run --browser.headless --update",
+ "e2e": "playwright test",
+ "e2e:chromatic": "chromatic --playwright",
+ "e2e:report": "playwright show-report",
"clean:res": "rescript clean",
"convert-images": "auto-convert-images",
"dev:res": "rescript watch",
@@ -77,10 +80,15 @@
"remark-gfm": "^4.0.1",
"remark-validate-links": "^13.1.0",
"rescript": "^12.0.0",
+ "satori": "^0.19.2",
+ "shiki": "^3.22.0",
"unified": "^11.0.5",
"vfile-matter": "^5.0.0"
},
"devDependencies": {
+ "@axe-core/playwright": "^4.11.1",
+ "@chromatic-com/playwright": "^0.12.8",
+ "@playwright/test": "^1.58.2",
"@prettier/plugin-oxc": "^0.0.4",
"@react-router/dev": "^7.8.1",
"@tailwindcss/vite": "^4.1.13",
diff --git a/playwright.config.mjs b/playwright.config.mjs
new file mode 100644
index 000000000..05e687d68
--- /dev/null
+++ b/playwright.config.mjs
@@ -0,0 +1,116 @@
+import { defineConfig, devices } from "@playwright/test";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+/**
+ * The base URL for all page.goto('/') calls in tests.
+ *
+ * • CI (PR preview): set to the Cloudflare Pages preview URL, e.g.
+ * https://my-feature-branch.rescript-lang.pages.dev
+ * • Local: not set — Playwright starts Wrangler automatically and points
+ * tests at http://localhost:8788.
+ */
+const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? "http://localhost:8788";
+
+/**
+ * Whether we should let Playwright manage the local dev server.
+ * We only do this when there is no external URL to point at (i.e. local runs).
+ */
+const useLocalServer = !process.env.PLAYWRIGHT_BASE_URL;
+
+export default defineConfig({
+ /**
+ * Start Wrangler Pages dev server automatically for local runs so that
+ * `yarn e2e` works after `yarn build` with zero extra setup.
+ *
+ * The server is NOT started in CI because `PLAYWRIGHT_BASE_URL` is always
+ * set there to the Cloudflare preview URL.
+ *
+ * `reuseExistingServer` lets you keep a Wrangler process running in another
+ * terminal and have Playwright attach to it rather than spawning a new one.
+ */
+ webServer: useLocalServer
+ ? {
+ command: `yarn wrangler pages dev ${path.join(__dirname, "out")} --port 8788`,
+ url: "http://localhost:8788",
+ reuseExistingServer: true,
+ stdout: "pipe",
+ stderr: "pipe",
+ timeout: 60_000,
+ }
+ : undefined,
+
+ testDir: "./e2e",
+
+ /**
+ * Include compiled ReScript output (.jsx) as well as plain .js / .ts files.
+ * ReScript compiles *.res → *.jsx (in-source), so Playwright must discover
+ * those generated files.
+ */
+ testMatch: "**/*.test.{js,jsx,ts,tsx}",
+
+ /** Run each test file in parallel. */
+ fullyParallel: true,
+
+ /**
+ * Fail the suite immediately when a test.only() call is left in source —
+ * this is enforced only in CI so local debugging is unaffected.
+ */
+ forbidOnly: !!process.env.CI,
+
+ /** Retry flaky tests twice in CI; never locally so failures are obvious. */
+ retries: process.env.CI ? 2 : 0,
+
+ /** Limit parallelism in CI to avoid overwhelming the preview deployment. */
+ workers: process.env.CI ? 2 : undefined,
+
+ reporter: process.env.CI
+ ? [
+ ["github"], // Annotate PR checks with inline failure messages.
+ ["html", { open: "never", outputFolder: "playwright-report" }],
+ ["json", { outputFile: "test-results/results.json" }],
+ ]
+ : [["html", { open: "on-failure" }]],
+
+ use: {
+ baseURL,
+
+ /**
+ * Collect a Playwright trace on the first retry so failures can be
+ * inspected in the Playwright trace viewer without slowing down the
+ * initial run.
+ */
+ trace: "on-first-retry",
+
+ /**
+ * Capture a screenshot automatically on test failure.
+ */
+ screenshot: "only-on-failure",
+
+ /**
+ * Record a video on the first retry alongside the trace.
+ */
+ video: "on-first-retry",
+ },
+
+ projects: [
+ {
+ name: "chromium",
+ use: {
+ ...devices["Desktop Chrome"],
+ viewport: { width: 1440, height: 900 },
+ },
+ },
+ {
+ name: "mobile-chrome",
+ use: {
+ ...devices["Pixel 5"],
+ },
+ },
+ ],
+
+ /** Where Playwright writes screenshots, traces, and videos. */
+ outputDir: "test-results",
+});
diff --git a/rescript.json b/rescript.json
index 9214ceafd..9b50b9b33 100644
--- a/rescript.json
+++ b/rescript.json
@@ -13,6 +13,11 @@
"subdirs": true,
"type": "dev"
},
+ {
+ "dir": "e2e",
+ "subdirs": true,
+ "type": "dev"
+ },
{
"dir": "app",
"subdirs": true
diff --git a/src/ApiDocs.res b/src/ApiDocs.res
index f718abca3..20817bd4f 100644
--- a/src/ApiDocs.res
+++ b/src/ApiDocs.res
@@ -95,7 +95,7 @@ module RightSidebar = {
module SidebarTree = {
@react.component
- let make = (~isOpen: bool, ~toggle: unit => unit, ~node: node, ~items: array- ) => {
+ let make = (~node: node, ~items: array
- ) => {
open ReactRouter
let location = useLocation()
@@ -115,7 +115,7 @@ module SidebarTree = {
| true =>
| false => React.null
@@ -176,54 +176,26 @@ module SidebarTree = {
}
}
- let preludeSection =
-
-
-
-
-