diff --git a/.github/workflows/pull_request_js.yml b/.github/workflows/pull_request_js.yml index 438bfa98ba1..484b5bf9a03 100644 --- a/.github/workflows/pull_request_js.yml +++ b/.github/workflows/pull_request_js.yml @@ -45,7 +45,7 @@ jobs: with: version: 7 - name: Build WASM module for the web - run: wasm-pack build --out-dir ../../npm/wasm-web --target web --release --scope rometools crates/rome_wasm + run: wasm-pack build --out-dir ../../npm/wasm-web --target web --scope rometools crates/rome_wasm - name: Install libraries working-directory: website run: pnpm i diff --git a/website/package.json b/website/package.json index 6976b6ca709..cbd5e65fc0c 100644 --- a/website/package.json +++ b/website/package.json @@ -50,6 +50,7 @@ "rehype-slug": "^5.1.0", "rehype-toc": "^3.0.2", "remark-toc": "^8.0.1", + "rome": "^10.0.1", "sass": "^1.56.1", "typescript": "^4.8.4", "vite": "3.1.8", diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml index 0f2f3285658..81c90208c23 100644 --- a/website/pnpm-lock.yaml +++ b/website/pnpm-lock.yaml @@ -38,6 +38,7 @@ specifiers: rehype-slug: ^5.1.0 rehype-toc: ^3.0.2 remark-toc: ^8.0.1 + rome: ^10.0.1 sass: ^1.56.1 typescript: ^4.8.4 vite: 3.1.8 @@ -81,6 +82,7 @@ dependencies: rehype-slug: 5.1.0 rehype-toc: 3.0.2 remark-toc: 8.0.1 + rome: 10.0.1 sass: 1.56.1 typescript: 4.8.4 vite: 3.1.8_sass@1.56.1 @@ -981,6 +983,54 @@ packages: picomatch: 2.3.1 dev: false + /@rometools/cli-darwin-arm64/10.0.1: + resolution: {integrity: sha512-MwQjk3uhZrCu6LgIwJHREAsVt/mUQTGv7p8iosfaF8lCIxMVjyS+akbF/QcBufyW5sFtHYNWUEe/uKPHK4E//A==} + cpu: [arm64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + + /@rometools/cli-darwin-x64/10.0.1: + resolution: {integrity: sha512-n010Wc/z9L8wRkRnR5boMhdWgDVGrTG/i7zL8u/3+F5aSUgLCywf9F/b3ex74tCJJfcwBLlhaAqAVQX6U1bIkA==} + cpu: [x64] + os: [darwin] + requiresBuild: true + dev: false + optional: true + + /@rometools/cli-linux-arm64/10.0.1: + resolution: {integrity: sha512-JljZsnud1KCfe36VNsVh/LrYdAzgbKbcsCTzeCjW9ROkMyNj8pmQ/gIUFxZ+PyhMFgowHIDGihoNf4m+pgpxkA==} + cpu: [arm64] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /@rometools/cli-linux-x64/10.0.1: + resolution: {integrity: sha512-jXIqd9iDyZUexk63CRfAXDA4zNDUHpErUmCejjGab3dhDt1KA40fDqKb+kxZpAhY3tQoWNSNQyo750zX5NawLw==} + cpu: [x64] + os: [linux] + requiresBuild: true + dev: false + optional: true + + /@rometools/cli-win32-arm64/10.0.1: + resolution: {integrity: sha512-G/toRrKPhhi7SMYMyROq/E2c8/4xRX/67vFhVihuMvDDzhanIb99hEt5MMbM4HbYK1nnZBPyLN6LxVsxm9M9hA==} + cpu: [arm64] + os: [win32] + requiresBuild: true + dev: false + optional: true + + /@rometools/cli-win32-x64/10.0.1: + resolution: {integrity: sha512-y299+VGoBufZntZj0Xz7w9DODU+6E5giXStfBDoa0fspXGNkYyYfD+HC6j9gUv4zpMZJ607XVvVHjpfwM/3ftA==} + cpu: [x64] + os: [win32] + requiresBuild: true + dev: false + optional: true + /@svgr/babel-plugin-add-jsx-attribute/6.5.1_@babel+core@7.20.2: resolution: {integrity: sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==} engines: {node: '>=10'} @@ -5187,6 +5237,20 @@ packages: fsevents: 2.3.2 dev: false + /rome/10.0.1: + resolution: {integrity: sha512-RfaDa+cSustBsjX6bj3fWqEhoNxXrK1uNgKHpkCHAqp20QMJXnCRtbokhirNMe0utyGI9GTO/sDoK7hJP7O8Bw==} + engines: {node: '>=14.*'} + hasBin: true + requiresBuild: true + optionalDependencies: + '@rometools/cli-darwin-arm64': 10.0.1 + '@rometools/cli-darwin-x64': 10.0.1 + '@rometools/cli-linux-arm64': 10.0.1 + '@rometools/cli-linux-x64': 10.0.1 + '@rometools/cli-win32-arm64': 10.0.1 + '@rometools/cli-win32-x64': 10.0.1 + dev: false + /run-parallel/1.2.0: resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} dependencies: diff --git a/website/src/frontend-scripts/docsearch.ts b/website/src/frontend-scripts/docsearch.ts index a062515fcb3..1e3b119ea59 100644 --- a/website/src/frontend-scripts/docsearch.ts +++ b/website/src/frontend-scripts/docsearch.ts @@ -1,9 +1,15 @@ import docsearch from "@docsearch/js"; +import { matchesDark, setCurrentTheme } from "./util"; const docsearchContainer = document.querySelector( "#docsearch-target", ) as HTMLElement; +// We need to explicitly set data-theme as docsearch explicitly matches for it +if (matchesDark.matches) { + setCurrentTheme("dark"); +} + docsearch({ appId: "ZKNROT3Q65", apiKey: "6c573608bd6c44671bfc263fb83992e2", diff --git a/website/src/frontend-scripts/index.ts b/website/src/frontend-scripts/index.ts index a647537c9ae..1528b39c06d 100644 --- a/website/src/frontend-scripts/index.ts +++ b/website/src/frontend-scripts/index.ts @@ -1,4 +1,4 @@ -import { matchesDark, getCurrentTheme } from "./util"; +import { matchesDark, getCurrentTheme, setCurrentTheme } from "./util"; import "./mobile"; import "./toc"; import "./package-manager-commands"; @@ -44,7 +44,6 @@ for (const elem of collapsed) { function toggleColorSchemeSwitch(evt: Event) { const currentScheme = getCurrentTheme(); const newScheme = currentScheme === "dark" ? "light" : "dark"; - window.localStorage.setItem("data-theme", newScheme); if (evt.currentTarget instanceof Element) { evt.currentTarget.setAttribute( @@ -54,7 +53,8 @@ function toggleColorSchemeSwitch(evt: Event) { } document.documentElement.classList.add("transition"); - document.documentElement.setAttribute("data-theme", newScheme); + window.localStorage.setItem("data-theme", newScheme); + setCurrentTheme(newScheme); onColorSchemeChange(); } @@ -68,7 +68,7 @@ if (colorSchemeSwitcher != null) { colorSchemeSwitcher.addEventListener("click", toggleColorSchemeSwitch, false); } -matchesDark().addEventListener("change", () => { +matchesDark.addEventListener("change", () => { onColorSchemeChange(); }); diff --git a/website/src/frontend-scripts/util.ts b/website/src/frontend-scripts/util.ts index fbda142a347..c8dd36480c9 100644 --- a/website/src/frontend-scripts/util.ts +++ b/website/src/frontend-scripts/util.ts @@ -1,14 +1,15 @@ export type ThemeName = "dark" | "light"; -export function matchesDark() { - return window.matchMedia("(prefers-color-scheme: dark)"); -} +export const matchesDark = window.matchMedia("(prefers-color-scheme: dark)"); export function getCurrentTheme(): ThemeName { let currentScheme = window.localStorage.getItem("data-theme"); if (currentScheme == null) { - const prefersDarkMode = matchesDark().matches; - currentScheme = prefersDarkMode ? "dark" : "light"; + currentScheme = matchesDark.matches ? "dark" : "light"; } return currentScheme === "dark" ? "dark" : "light"; } + +export function setCurrentTheme(theme: ThemeName) { + document.documentElement.setAttribute("data-theme", theme); +} diff --git a/website/src/styles/_docs.scss b/website/src/styles/_docs.scss index a4a39dcb63e..8d609947d10 100644 --- a/website/src/styles/_docs.scss +++ b/website/src/styles/_docs.scss @@ -210,6 +210,7 @@ footer { background-color: var(--container-color); border-right: 1px solid var(--hard-border-color); padding: 20px; + flex-shrink: 0; @include mobile-only { position: fixed; @@ -318,6 +319,7 @@ footer { .toc-sidebar { right: 0; + white-space: nowrap; h2 { padding-left: 32px; diff --git a/website/src/svg/npm.svg b/website/src/svg/npm.svg index ec09b76455a..3bf3e4c47d1 100644 --- a/website/src/svg/npm.svg +++ b/website/src/svg/npm.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file