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