.github/dependabot.yml

@@ -0,0 +1,12 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"
+    open-pull-requests-limit: 100

.github/workflows/nodejs.yml

@@ -6,7 +6,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: ['10.x', '12.x', '14.x', '16.x']
+        node: ['14.x', '16.x', '18.x']
 
     steps:
     - uses: actions/checkout@v3

.gitignore

@@ -6,3 +6,7 @@ settings.json
 yarn.lock
 .parcel-cache
 parcel-dist
+examples/epubs_
+examples/epubs__
+examples/epubs___
+examples/epubs____

build.ts

@@ -1,17 +1,20 @@
 import { build as esbuild, BuildOptions } from "esbuild";
-import util from "util";
+import * as util from "util";
 import chalk from "chalk";
-import { Options as SassOptions } from "node-sass";
 import { promises as fs } from "fs";
 import { watch } from "chokidar";
-import { debounce } from "debounce";
-const copy = util.promisify(require("copy"));
-const rimraf = util.promisify(require("rimraf"));
-const exec = util.promisify(require("child_process").exec);
-const sass = util.promisify(require("node-sass").render);
+import debounce from "debounce";
+import copy0 from "copy";
+import child_process0 from "child_process";
+import sass0 from "sass";
+import { rimraf } from "rimraf";
+
+const copy = util.promisify(copy0);
+const exec = util.promisify(child_process0.exec);
+const sass = util.promisify(sass0.render);
 
 const isWatchEnabled = process.argv[2] === "-w";
-// for now we bundle for production whenever we aren't in watch mode
+// for now, we bundle for production whenever we aren't in watch mode
 const isProduction = !isWatchEnabled;
 
 /**
@@ -65,17 +68,18 @@ async function buildTs(
  * Compiles SASS to CSS and writes it to the filesystem
  */
 async function compileCss(input: string, filename: string) {
-  const options: SassOptions = {
+  const options = {
     file: input,
     sourceMap: true,
     outFile: `dist/${filename}.css`,
     bundle: false,
+    outputStyle: "compressed",
   };
   try {
     const result = await sass(options);
     const fullPath = `dist/${filename}`;
     const p1 = fs.writeFile(`${fullPath}.css`, result.css);
-    const p2 = fs.writeFile(`${fullPath}.map.css`, result.map);
+    const p2 = fs.writeFile(`${fullPath}.css.map`, result.map);
     await Promise.all([p1, p2]);
     logBundled("Compiled SASS", `${fullPath}.css`);
   } catch (e) {

examples/react/index.tsx

@@ -19,7 +19,7 @@ const App = () => {
     const url = new URL("https://alice.dita.digital/manifest.json");
     D2Reader.load({
       url,
-      injectables: injectables as any,
+      injectables: injectables,
       injectablesFixed: [],
     }).then(setReader);
   }, []);

examples/react/tsconfig.json

@@ -35,6 +35,7 @@
     "declaration": true,
     "preserveConstEnums": true,
     "strictNullChecks": true,
+    "strict": true,
     "target": "es6",
     "skipLibCheck": true,
     "jsx": "react",

examples/server.ts

@@ -33,6 +33,10 @@ async function start() {
         title: "API Example",
         getUrl: (url) => `/viewer/index_api.html?url=${url}`,
       },
+      {
+        title: "Static Placeholder PDF Example",
+        getUrl: (url) => `/viewer/index_pdf.html?url=${url}`,
+      },
     ],
   });
 

injectables/style/popup.css

@@ -102,7 +102,7 @@
     margin: 0;
     background-color: #fafafa;
     border-radius: 0.5em;
-    line-height: 0;
+    /*line-height: 1;*/
     max-width: 353px;
 }
 .d2-popup-content {
@@ -117,5 +117,5 @@
     background: #fafafa;
     border-radius: 0.5em;
     -webkit-font-smoothing: subpixel-antialiased;
-    line-height: normal;
+    line-height: normal !important;
 }

injectables/style/style.css

@@ -253,3 +253,9 @@
 img {
     max-height: var(--USER__maxMediaHeight) !important;
 }
+
+#R2_ID_GUTTER_RIGHT_CONTAINER {
+    position: absolute;
+    top: 0;
+    right: -20px;
+}