Fix relative scripts
MODIFY
website/astro.config.ts
website/astro.config.ts
@@ -10,6 +10,28 @@ import rehypeSlug from "rehype-slug";
import remarkToc from "remark-toc";
import react from "@astrojs/react";
+function resolveFile(relative: string, parent: string, root: string): string {
+ if (relative[0] === "/") {
+ return `${root}${relative}`;
+ } else {
+ return path.resolve(path.join(parent, relative));
+ }
+}
+
+const IMPORT_REGEX = /^import"(.*?)"$/;
+
+async function readFile(loc: string, root: string): Promise<string> {
+ let content = await fs.readFile(loc, "utf8");
+ content = content.trim();
+
+ const importMatch = content.match(IMPORT_REGEX);
+ if (importMatch != null) {
+ return readFile(resolveFile(importMatch[1], path.dirname(loc), root), root);
+ }
+
+ return content;
+}
+
async function inline(
dir: string,
regex: RegExp,
@@ -34,15 +56,12 @@ async function inline(
const sources: string[] = await Promise.all(
paths.map(async (rawPath) => {
- let resolvedPath;
- if (rawPath[0] === "/") {
- resolvedPath = `${dir}${rawPath}`;
- } else {
- resolvedPath = path.resolve(
- path.join(path.dirname(htmlPath), rawPath),
+ const resolvedPath = resolveFile(
+ rawPath,
+ path.dirname(htmlPath),
+ dir,
);
- }
- return await fs.readFile(resolvedPath, "utf8");
+ return await readFile(resolvedPath, dir);
}),
);

MODIFY
website/src/BaseLayout.astro
website/src/BaseLayout.astro
@@ -45,6 +45,7 @@ const { default: favicon } = await import("/public/img/favicon.svg?raw");
<head>
<meta charset="utf8" />
<title>{title}</title>
+ <base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="mask-icon" href="/img/pinned-rome-logo.svg" color="#FFC905">

MODIFY
website/src/frontend-scripts/docsearch.ts
website/src/frontend-scripts/docsearch.ts
@@ -6,7 +6,7 @@ const docsearchContainer = document.querySelector(
) as HTMLElement;
// We need to explicitly set data-theme as docsearch explicitly matches for it
-if (matchesDark.matches) {
+if (matchesDark?.matches) {
setCurrentTheme("dark");
}

MODIFY
website/src/frontend-scripts/index.ts
website/src/frontend-scripts/index.ts
@@ -68,9 +68,11 @@ if (colorSchemeSwitcher != null) {
colorSchemeSwitcher.addEventListener("click", toggleColorSchemeSwitch, false);
}
+if (matchesDark !== undefined) {
matchesDark.addEventListener("change", () => {
onColorSchemeChange();
});
+}
//# Header scrolls to top
const tocSidebar: HTMLElement = document.querySelector(".toc-sidebar")!;

MODIFY
website/src/frontend-scripts/util.ts
website/src/frontend-scripts/util.ts
export type ThemeName = "dark" | "light";
-export const matchesDark = window.matchMedia("(prefers-color-scheme: dark)");
+export const matchesDark: undefined | MediaQueryList =
+ typeof window === "undefined"
+ ? undefined
+ : window.matchMedia("(prefers-color-scheme: dark)");
export function getCurrentTheme(): ThemeName {
let currentScheme = window.localStorage.getItem("data-theme");
if (currentScheme == null) {
- currentScheme = matchesDark.matches ? "dark" : "light";
+ currentScheme =
+ matchesDark !== undefined && matchesDark.matches ? "dark" : "light";
}
return currentScheme === "dark" ? "dark" : "light";
}

Fix relative scripts