website(docs): Fix some regressions

.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

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",

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",

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();
 });
 

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);
+}

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;