feat: replace Next.js options page with a bun-bundled SPA

.github/workflows/build.yml

@@ -16,4 +16,3 @@ jobs:
       - run: bun lint
       - run: bun test
       - run: bun export:bundle
-      - run: bun export:options

.gitignore

@@ -3,8 +3,6 @@
 coverage
 node_modules
 *.tsbuildinfo
-.eslintcache
-.next
 
 # Artifacts #
 #############
@@ -20,5 +18,4 @@ node_modules
 /scripts
 /target
 /pkg
-/images
-/favicon.ico
+/images

biome.json

@@ -8,7 +8,7 @@
   "files": {
     "includes": [
       "src/*.ts",
-      "pages/*.tsx",
+      "src/*.tsx",
       "components/*.tsx",
       "*.{json,config.js}",
       "*.html"

pages/index.tsx → components/options-page.tsx

@@ -1,4 +1,3 @@
-// NOTE import from cjs here due to the way that nextjs handles internal es6 modules
 import styled from "@emotion/styled";
 import ContentPasteIcon from "@mui/icons-material/ContentPaste";
 import Alert, { type AlertColor } from "@mui/material/Alert";
@@ -18,13 +17,6 @@ import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import { marked } from "marked";
-import {
-  EB_Garamond,
-  Noto_Sans,
-  Noto_Sans_Mono,
-  Noto_Serif,
-} from "next/font/google";
-import Head from "next/head";
 import {
   type ChangeEvent,
   type ReactElement,
@@ -54,14 +46,7 @@ import {
   FaXmark,
 } from "react-icons/fa6";
 import { register } from "rmapi-js";
-import ButtonSelection from "../components/button-selection";
-import CheckboxSelection from "../components/checkbox-selection";
-import FormControlLabel from "../components/form-control-label";
-import LeftRight from "../components/left-right";
-import RadioSelection from "../components/radio-selection";
-import Right from "../components/right";
-import Section from "../components/section";
-import StaticImage from "../components/static-image";
+import repubPlain from "../public/repub-plain.svg";
 import { toMhtml } from "../src/mhtml";
 import {
   defaultOptions,
@@ -74,23 +59,13 @@ import {
 import { render } from "../src/render";
 import { uploadEpub, uploadPdf } from "../src/upload";
 import { sleep } from "../src/utils";
-
-const ebGaramond = EB_Garamond({
-  weight: "400",
-  subsets: ["latin"],
-});
-const notoSans = Noto_Sans({
-  weight: "400",
-  subsets: ["latin"],
-});
-const notoSerif = Noto_Serif({
-  weight: "400",
-  subsets: ["latin"],
-});
-const notoMono = Noto_Sans_Mono({
-  weight: "400",
-  subsets: ["latin"],
-});
+import ButtonSelection from "./button-selection";
+import CheckboxSelection from "./checkbox-selection";
+import FormControlLabel from "./form-control-label";
+import LeftRight from "./left-right";
+import RadioSelection from "./radio-selection";
+import Right from "./right";
+import Section from "./section";
 
 const theme = createTheme({
   palette: {
@@ -109,7 +84,6 @@ const unknownOpts: Partial<Options> = Object.fromEntries(
 
 async function getToken(code: string, authHost: string): Promise<string> {
   // This is for testing in dev mode
-  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (window.chrome?.runtime?.id) {
     return await register(code, { authHost });
   } else {
@@ -252,7 +226,6 @@ function FileUpload({
     <div {...getRootProps()}>
       <input
         type="file"
-        // eslint-disable-next-line spellcheck/spell-checker
         accept="application/epub+zip,application/pdf,text/markdown,multipart/related"
         style={{ display: "none" }}
         {...getInputProps()}
@@ -565,12 +538,7 @@ function SignInOptions({
   return (
     <Stack spacing={2}>
       <LeftRight label={title}>
-        <StaticImage
-          alt="repub"
-          src={`repub-plain.svg`}
-          width={32}
-          height={32}
-        />
+        <img alt="repub" src={repubPlain} width={32} height={32} />
       </LeftRight>
       <OutputStylePicker outputStyle={outputStyle} setOpts={setOpts} />
       <SignIn
@@ -736,7 +704,6 @@ function EpubOptions({
         setOpts={setOpts}
       />
       <SimplCheckboxSelection
-        // eslint-disable-next-line spellcheck/spell-checker
         name="filterIframes"
         title="Remove IFrames"
         caption="Some pages may include relevant information in iframes.
@@ -1005,7 +972,6 @@ function ViewBackgroundFilterSelector({
   setOpts,
   disabled,
 }: {
-  // eslint-disable-next-line spellcheck/spell-checker
   viewBackgroundFilter: "off" | "fullpage" | null | undefined;
   setOpts: SetOptions;
   disabled?: boolean;
@@ -1018,7 +984,6 @@ function ViewBackgroundFilterSelector({
       }}
       selections={[
         {
-          // eslint-disable-next-line spellcheck/spell-checker
           val: "fullpage",
           icon: <FaRegFileLines />,
         },
@@ -1056,65 +1021,55 @@ function FontNameSelector({
       }}
       selections={[
         {
-          // eslint-disable-next-line spellcheck/spell-checker
           val: "EB Garamond",
           icon: (
             <Typography
               variant="caption"
-              className={ebGaramond.className}
-              sx={{ textTransform: "none" }}
+              sx={{ fontFamily: "'EB Garamond'", textTransform: "none" }}
             >
               EB Garamond
             </Typography>
           ),
         },
         {
-          // eslint-disable-next-line spellcheck/spell-checker
           val: "Noto Sans",
           icon: (
             <Typography
               variant="caption"
-              className={notoSans.className}
-              sx={{ textTransform: "none" }}
+              sx={{ fontFamily: "'Noto Sans'", textTransform: "none" }}
             >
               Noto Sans
             </Typography>
           ),
         },
         {
-          // eslint-disable-next-line spellcheck/spell-checker
           val: "Noto Serif",
           icon: (
             <Typography
               variant="caption"
-              className={notoSerif.className}
-              sx={{ textTransform: "none" }}
+              sx={{ fontFamily: "'Noto Serif'", textTransform: "none" }}
             >
               Noto Serif
             </Typography>
           ),
         },
         {
-          // eslint-disable-next-line spellcheck/spell-checker
           val: "Noto Mono",
           icon: (
             <Typography
               variant="caption"
-              className={notoMono.className}
-              sx={{ textTransform: "none" }}
+              sx={{ fontFamily: "'Noto Sans Mono'", textTransform: "none" }}
             >
               Noto Mono
             </Typography>
           ),
         },
         {
-          // eslint-disable-next-line spellcheck/spell-checker
           val: "Noto Sans UI",
           icon: (
             <Typography
               variant="caption"
-              className={notoSans.className}
-              sx={{ textTransform: "none" }}
+              sx={{ fontFamily: "'Noto Sans'", textTransform: "none" }}
             >
               Noto Sans UI
             </Typography>
@@ -1291,7 +1246,6 @@ function ApiUrlsSection({
 
   // check permissions for each non-default URL individually
   useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (!globalThis.chrome?.permissions) return;
     let stale = false;
     // deduplicate origins so we only call contains once per unique origin
@@ -1470,11 +1424,6 @@ export default function OptionsPage(): ReactElement {
 
   return (
     <ThemeProvider theme={theme}>
-      <Head>
-        <title>reMarkable ePub Options</title>
-        {/* eslint-disable-next-line spellcheck/spell-checker */}
-        <link rel="icon" href="/favicon.ico" />
-      </Head>
       <Box
         sx={{
           maxWidth: "700px",
@@ -1483,7 +1432,6 @@ export default function OptionsPage(): ReactElement {
           margin: "0 auto",
         }}
       >
-        {/* eslint-disable-next-line spellcheck/spell-checker */}
         <Stack sx={{ justifyContent: "space-between", minHeight: "100vh" }}>
           <Container maxWidth="sm" sx={{ padding: 4 }}>
             <Stack spacing={4}>

manifest.json

@@ -19,7 +19,7 @@
     "https://eu.tectonic.remarkable.com/"
   ],
   "optional_host_permissions": ["https://*/"],
-  "options_page": "out/index.html",
+  "options_page": "out/options.html",
   "action": {
     "default_title": "convert page to epub"
   },

options.html

@@ -0,0 +1,23 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>reMarkable ePub Options</title>
+    <link rel="icon" href="public/repub.svg" />
+    <style>
+      html {
+        overflow-y: scroll;
+        background-color: rgb(250, 246, 240);
+      }
+
+      body {
+        margin: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="src/options-main.tsx" type="module"></script>
+  </body>
+</html>

package.json

@@ -8,24 +8,26 @@
   "type": "module",
   "scripts": {
     "cli": "bun run src/cli.ts",
-    "dev": "next dev",
+    "dev": "bun ./options.html",
     "fmt": "biome format --write",
     "lint": "tsc && biome check",
-    "export:images": "mkdir -p images && <<< $'16\n32\n48\n128' xargs -I@ rsvg-convert -w @ -h @ public/repub.svg -o images/repub_@.png && magick images/repub_*.png favicon.ico",
-    "export:bundle": "bun build src/background.ts src/offscreen.ts src/popup.ts --outdir . --sourcemap=linked",
-    "export:options": "next build",
-    "export:pack": "zip -r --filesync repub.zip background.js background.js.map favicon.ico images/*.png manifest.json offscreen.html popup.html popup.js popup.js.map offscreen.js offscreen.js.map out",
-    "export": "bun export:images && bun export:bundle && bun export:options && bun export:pack",
+    "export:images": "mkdir -p images && <<< $'16\n32\n48\n128' xargs -I@ rsvg-convert -w @ -h @ public/repub.svg -o images/repub_@.png",
+    "export:bundle": "bun build src/background.ts src/offscreen.ts src/popup.ts --outdir . --sourcemap=linked && bun build ./options.html --outdir out --sourcemap=linked",
+    "export:pack": "zip -r --filesync repub.zip background.js background.js.map images/*.png manifest.json offscreen.html popup.html popup.js popup.js.map offscreen.js offscreen.js.map out",
+    "export": "bun export:images && bun export:bundle && bun export:pack",
     "pack": "bun lint && bun test --coverage && bun export && publint"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.15",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@fontsource/eb-garamond": "^5.2.7",
+    "@fontsource/noto-sans": "^5.2.10",
+    "@fontsource/noto-sans-mono": "^5.2.10",
+    "@fontsource/noto-serif": "^5.2.9",
     "@mozilla/readability": "^0.6.0",
     "@mui/icons-material": "^9.0.1",
     "@mui/material": "^9.0.1",
-    "@next/eslint-plugin-next": "^16.2.6",
     "@types/base64-js": "^1.5.0",
     "@types/bun": "^1.3.14",
     "@types/chrome": "^0.1.42",
@@ -39,7 +41,6 @@
     "leven": "^4.1.0",
     "marked": "^18.0.3",
     "mhtml-stream": "^2.0.2",
-    "next": "^16.2.6",
     "publint": "^0.3.21",
     "react": "^19.2.6",
     "react-dom": "^19.2.6",

src/alter.ts

@@ -26,7 +26,6 @@ export function exactMatch(assetData: Map<string, MimeData>): UrlMatcher {
   };
 }
 
-// eslint-disable-next-line spellcheck/spell-checker
 /**
  * looks for close matches
  *
@@ -145,7 +144,6 @@ class Walker {
       const rep = `<?xml version="1.0" encoding="utf-8"?>${encoded}`;
       let url = this.svgs.get(rep);
       if (url === undefined) {
-        // eslint-disable-next-line spellcheck/spell-checker
         url = `inlinesvg://${this.svgs.size}.svg`;
         this.svgs.set(rep, url);
       }
@@ -217,7 +215,6 @@ ${this.options.tableCss}`;
       const blob = await canvas.convertToBlob({ type: "image/png" });
       const bytes = await blob.arrayBuffer();
 
-      // eslint-disable-next-line spellcheck/spell-checker
       const url = `tableimage://${this.pngs.length}.png`;
       this.pngs.push([url, new Uint8Array(bytes)]);
 

src/cli.ts

@@ -78,7 +78,6 @@ global.Image = dom.window["Image"] as typeof Image;
       type: "string",
     })
     .option("img-sim-thresh", {
-      // eslint-disable-next-line spellcheck/spell-checker
       describe: "how similar image urls need to be to use them",
       type: "number",
       default: defaultOptions.imageHrefSimilarityThreshold,
@@ -94,9 +93,7 @@ global.Image = dom.window["Image"] as typeof Image;
       type: "boolean",
       default: defaultOptions.filterLinks,
     })
-    // eslint-disable-next-line spellcheck/spell-checker
     .option("filter-iframes", {
-      // eslint-disable-next-line spellcheck/spell-checker
       describe: "filter iframes from generated results",
       type: "boolean",
       default: defaultOptions.filterIframes,