website(docs): Fix some regressions
MODIFY
.github/workflows/pull_request_js.yml
.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

MODIFY
website/package.json
website/package.json
"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",

MODIFY
website/pnpm-lock.yaml
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:

MODIFY
website/src/frontend-scripts/docsearch.ts
website/src/frontend-scripts/docsearch.ts
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",

MODIFY
website/src/frontend-scripts/index.ts
website/src/frontend-scripts/index.ts
-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();
});

MODIFY
website/src/frontend-scripts/util.ts
website/src/frontend-scripts/util.ts
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);
+}

MODIFY
website/src/styles/_docs.scss
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;

MODIFY
website/src/svg/npm.svg
website/src/svg/npm.svg
-<?xml version="1.0" encoding="UTF-8"?><svg id="logosandtypes_com" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.31 150"><defs><style>.cls-1{fill:none;}.cls-2{fill:#cb3837;}.cls-3{fill:#fff;stroke:#000;stroke-miterlimit:10;}</style></defs><path class="cls-1" d="M0,0H150V150H0V0Z"/><g id="Layer_2"><rect class="cls-3" x="23.12" y="23.43" width="104.75" height="104.75"/></g><path class="cls-2" d="M.31,0V150H150.31V0H.31ZM125.16,124.86h-25.15V50.28h-25.15V124.86H25.45V25.15H125.16V124.86Z"/></svg>
\ No newline at end of file
+<?xml version="1.0" encoding="UTF-8"?><svg id="logosandtypes_com" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150.31 150"><path d="M0,0H150V150H0V0Z" style="fill:none;"/><g id="Layer_2"><rect x="23.12" y="23.43" width="104.75" height="104.75" style="fill:#fff; stroke:#000; stroke-miterlimit:10;"/></g><path d="M.31,0V150H150.31V0H.31ZM125.16,124.86h-25.15V50.28h-25.15V124.86H25.45V25.15H125.16V124.86Z" style="fill:#cb3837;"/></svg>
\ No newline at end of file

website(docs): Fix some regressions (#3694)