Merge pull request #364 from d-i-t-a/develop

V2.1.0
d-i-t-a · Sep 21, 2022 · dc2c3f6 · dc2c3f6
2 parents 12e3119 + 8a8814a
commit dc2c3f6
Show file tree

Hide file tree

Showing 47 changed files with 5,603 additions and 9,643 deletions.
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
@@ -9,26 +9,13 @@ jobs:
         node: ['10.x', '12.x', '14.x', '16.x']
 
     steps:
-      - name: Checkout repo
-        uses: actions/checkout@v2
-
-      - name: Use Node ${{ matrix.node }}
-        uses: actions/setup-node@v1
-        with:
-          node-version: ${{ matrix.node }}
-
-      - name: Install deps and build (with cache)
-        uses: bahmutov/npm-install@v1
-
-      # this ensures that unformatted code or lint errors
-      # don't make it in through a PR
-      - name: Lint
-        run: npm run lint
-
-      # We don't currently have a test suite it looks like
-      # but will enable this when we do
-      # - name: Test
-      #   run: npm run test --ci --coverage --maxWorkers=2
-
-      - name: Build
-        run: npm run build
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        cache: 'npm'
+    - run: npm install
+    - run: npm run lint --if-present
+    - run: npm run build --if-present
+    - run: npm test --if-present
diff --git a/build.ts b/build.ts
@@ -1,17 +1,16 @@
 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);
+const sass = util.promisify(require("sass").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 +64,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) {

diff --git a/examples/react/index.html b/examples/react/index.html
@@ -14,6 +14,6 @@
 
   <body>
     <div id="root"></div>
-    <script src="./index.tsx"></script>
+    <script type="module" src="./index.tsx"></script>
   </body>
 </html>
diff --git a/examples/react/index.tsx b/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);
   }, []);

diff --git a/examples/react/readium-css/ReadiumCSS-before.css b/examples/react/readium-css/ReadiumCSS-before.css
@@ -1,4 +1,4 @@
-/* Readium CSS 
+/* Readium CSS
    Config module
 
    A file allowing implementers to customize flags for reading modes,
@@ -39,7 +39,7 @@
 
 /* Direction i.e. ltr and rtl */
 
-/* Readium CSS 
+/* Readium CSS
    Base module
 
    A minimal stylesheet for all ebooks
@@ -75,7 +75,7 @@
 
   /* Config */
   --RS__baseFontFamily: var(--RS__oldStyleTf);
-  
+
   /* For square-ish fonts (CJK, Indic, etc.), we must apply some compensation in dynamic leading. Default is 1 i.e. no compensation */
   --RS__lineHeightCompensation: 1;
 
@@ -170,7 +170,7 @@ math {
 
 :lang(ja) {
   --RS__baseFontFamily: "游ゴシック体", YuGothic, "ヒラギノ丸ゴ", "Hiragino Sans", "Yu Gothic UI", "Meiryo UI", "MS Gothic", Roboto, Noto, "Noto Sans CJK JP", sans-serif;
-  
+
   /* For CJK, the line-height is usually 15–20% more than for Latin */
   --RS__lineHeightCompensation: 1.167;
 
@@ -193,7 +193,7 @@ math {
 
 :lang(ko) {
   --RS__baseFontFamily: "Nanum Gothic", "Apple SD Gothic Neo", "Malgun Gothic", Roboto, Noto, "Noto Sans CJK KR", sans-serif;
-  
+
   /* For CJK, the line-height is usually 15–20% more than for Latin */
   --RS__lineHeightCompensation: 1.167;
 }
@@ -248,19 +248,19 @@ math {
 :lang(zh-Hant),
 :lang(zh-TW) {
   --RS__baseFontFamily: "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif;
-  
+
   /* For CJK, the line-height is usually 15–20% more than for Latin */
   --RS__lineHeightCompensation: 1.167;
 }
 
 :lang(zh-HK) {
   --RS__baseFontFamily: "方體", "PingFang HK", "方體", "PingFang TC", "黑體", "Heiti TC", "Microsoft JhengHei UI", "Microsoft JhengHei", Roboto, Noto, "Noto Sans CJK TC", sans-serif;
-  
+
   /* For CJK, the line-height is usually 15–20% more than for Latin */
   --RS__lineHeightCompensation: 1.167;
 }
 
-/* Readium CSS 
+/* Readium CSS
    Day/Default mode
 
    A preset theme for day mode, which is the default
@@ -295,7 +295,7 @@ math {
   background-color: var(--RS__selectionBackgroundColor);
 }
 
-/* Readium CSS 
+/* Readium CSS
    Fonts module
 
    A stylesheet for embedded fonts
@@ -304,28 +304,28 @@ math {
 
 /* /!\ Mind the path (relative to the folders in which you have stylesheets and the fonts) */
 
-@font-face {
-  font-family: AccessibleDfA;
-  font-style: normal;
-  font-weight: normal;
-  src: local("AccessibleDfA"),
-    url("fonts/AccessibleDfA.otf") format("opentype");
-}
-
-@font-face {
-  font-family: "IA Writer Duospace";
-  font-style: normal;
-  font-weight: normal;
-  src: local("iAWriterDuospace-Regular"),
-    url("fonts/iAWriterDuospace-Regular.ttf") format("truetype");
-}
-
-/* If you have different weights/styles, 
-   use `font-weight` and `font-style`, 
-   not prefixes in the font-family name, 
+/*@font-face {*/
+/*  font-family: AccessibleDfA;*/
+/*  font-style: normal;*/
+/*  font-weight: normal;*/
+/*  src: local("AccessibleDfA"),*/
+/*    url("fonts/AccessibleDfA.otf") format("opentype");*/
+/*}*/
+
+/*@font-face {*/
+/*  font-family: "IA Writer Duospace";*/
+/*  font-style: normal;*/
+/*  font-weight: normal;*/
+/*  src: local("iAWriterDuospace-Regular"),*/
+/*    url("fonts/iAWriterDuospace-Regular.ttf") format("truetype");*/
+/*}*/
+
+/* If you have different weights/styles,
+   use `font-weight` and `font-style`,
+   not prefixes in the font-family name,
    or else it will be a nightmare to manage in user settings. */
 
-/* Readium CSS 
+/* Readium CSS
    HTML5 SR Patch stylesheet
 
    A set of style to adjust HTML5 Suggested Rendering to paginated content
@@ -351,7 +351,7 @@ hr, caption {
   break-after: avoid;
 }
 
-h1, h2, h3, h4, h5, h6, dt, 
+h1, h2, h3, h4, h5, h6, dt,
 figure, tr {
   -webkit-column-break-inside: avoid;
   page-break-inside: avoid;
@@ -434,13 +434,13 @@ figure, blockquote {
   margin: 1em 5%;
 }
 
-/* 
+/*
 
 :lang(ja) figure, :lang(ja) blockquote,
 :lang(zh-Hant) figure, :lang(zh-Hant) blockquote,
 :lang(zh-TW) figure, :lang(zh-TW) blockquote,
 :lang(mn) figure, :lang(mn) blockquote {
-  margin: 5% 1em;  
+  margin: 5% 1em;
 }
 
 */
@@ -449,13 +449,13 @@ ul, ol {
   padding-left: 5%;
 }
 
-/* 
+/*
 
 :lang(ja) ul, :lang(ja) ol,
 :lang(zh-Hant) ul, :lang(zh-Hant) ol,
 :lang(zh-TW) ul, :lang(zh-TW) ol,
 :lang(mn) ul, :lang(mn) ol   {
-  padding-top: 5%;  
+  padding-top: 5%;
 }
 
 */
@@ -464,13 +464,13 @@ dd {
   margin-left: 5%;
 }
 
-/* 
+/*
 
 :lang(ja) dd,
 :lang(zh-Hant) dd,
-:lang(zh-TW) dd, 
+:lang(zh-TW) dd,
 :lang(mn) dd {
-  margin-top: 5%;  
+  margin-top: 5%;
 }
 
 */
@@ -507,19 +507,19 @@ ruby > rt, ruby > rp {
 *:lang(ja),
 *:lang(zh),
 *:lang(ko),
-:lang(ja) cite, :lang(ja) dfn, :lang(ja) em, :lang(ja) i,  
+:lang(ja) cite, :lang(ja) dfn, :lang(ja) em, :lang(ja) i,
 :lang(zh) cite, :lang(zh) dfn, :lang(zh) em, :lang(zh) i,
 :lang(ko) cite, :lang(ko) dfn, :lang(ko) em, :lang(ko) i {
   font-style: normal;
 }
 
-:lang(ja) a,  
+:lang(ja) a,
 :lang(zh) a,
 :lang(ko) a {
   text-decoration: none;
 }
 
-/* Readium CSS 
+/* Readium CSS
    Safeguards module
 
    A set of styles to prevent common issues in pagination
@@ -534,7 +534,7 @@ ruby > rt, ruby > rp {
   /* max-width for media, you can override that via JS if not compiled to static */
   --RS__maxMediaWidth: 100%;
 
-  /* max-height for media, you can override that via JS if not compiled to static 
+  /* max-height for media, you can override that via JS if not compiled to static
      Please consider figures might have a figcaption, which is why 95vh in the first place */
   --RS__maxMediaHeight: 95vh;
 

diff --git a/examples/react/tsconfig.json b/examples/react/tsconfig.json
@@ -35,6 +35,7 @@
     "declaration": true,
     "preserveConstEnums": true,
     "strictNullChecks": true,
+    "strict": true,
     "target": "es6",
     "skipLibCheck": true,
     "jsx": "react",

diff --git a/injectables/style/popup.css b/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;
 }
diff --git a/injectables/style/style.css b/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;
+}