2.0

.eslintrc.js

@@ -0,0 +1,23 @@
+module.exports = {
+  env: {
+    node: true,
+    browser: true,
+    es2021: true,
+  },
+  extends: ["eslint:recommended", "plugin:react/recommended"],
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 12,
+    sourceType: "module",
+  },
+  plugins: ["react"],
+  rules: { "react/prop-types": 0 },
+
+  settings: {
+    react: {
+      version: "latest",
+    },
+  },
+};

gatsby-config.js

@@ -16,6 +16,7 @@ module.exports = {
         name: `book`,
       },
     },
+    `gatsby-plugin-sass`,
     {
       resolve: `gatsby-transformer-remark`,
       options: {

generate-book/epub.js

@@ -3,25 +3,32 @@ const fs = require("fs");
 const path = require("path");
 const Epub = require("epub-gen");
 const info = require("../bookInfo");
+const cheerio = require("cheerio");
 
-const savePath = ext => path.join(__dirname, "../book/book." + ext);
+const savePath = (ext) => path.join(__dirname, "../book/book." + ext);
 const html = fs.readFileSync(
   path.join(__dirname, "../public/index.html"),
   "utf8"
 );
 
+const $ = cheerio.load(html);
+const chapters = [];
+
+$("h1").each(function (i, elem) {
+  chapters.push({
+    data: $(elem).nextUntil("h1").toArray().map($.html).join(""),
+    title: $(elem).text(),
+  });
+});
+
 const option = {
   title: info.title,
   verbose: true,
   author: info.author,
   cover: path.join(__dirname, info.cover),
   customHtmlTocTemplatePath: path.join(__dirname, "./toc.html"),
   css: epubCSS,
-  content: [
-    {
-      data: html
-    }
-  ]
+  content: chapters,
 };
 
 new Epub(option, savePath("epub"));

generate-book/pdf.js

@@ -3,28 +3,26 @@ const fs = require("fs");
 const path = require("path");
 const { PDFDocument, PageSizes } = require("pdf-lib");
 const info = require("../bookInfo");
-const { footerTemplate } = require("./templates");
+const { footerTemplate, footerDark } = require("./templates");
 
-const savePath = ext => path.join(__dirname, "../book/book." + ext);
-
-async function printPDF() {
+async function printPDFLight() {
   try {
     const browser = await puppeteer.launch({ headless: true });
     const page = await browser.newPage();
     await page.goto(info.localURL, {
       waitUntil: "networkidle2",
-      timeout: 0
+      timeout: 0,
     });
     const book = await page.pdf({
       displayHeaderFooter: true,
       printBackground: true,
       format: "A4",
       margin: {
         top: "100px",
-        bottom: "100px"
+        bottom: "100px",
       },
       headerTemplate: " ",
-      footerTemplate
+      footerTemplate,
     });
     await browser.close();
     const pdfDoc = await PDFDocument.load(book);
@@ -35,29 +33,91 @@ async function printPDF() {
     pdfDoc.setAuthor(info.author);
     pdfDoc.setSubject(info.subject);
     pdfDoc.setKeywords(info.keywords);
-
     // Get the width and height of the first page
     const { width, height } = newPage.getSize();
 
     newPage.drawImage(image, {
       x: 0,
       y: 0,
       width,
-      height
+      height,
     });
 
     // Serialize the PDFDocument to bytes (a Uint8Array)
     const pdfBytes = await pdfDoc.save();
-    fs.writeFile(savePath("pdf"), pdfBytes, function(err) {
-      if (err) {
-        return console.log(err);
+    fs.writeFile(
+      path.join(__dirname, "../book/book-light.pdf"),
+      pdfBytes,
+      function (err) {
+        if (err) {
+          return console.log(err);
+        }
+
+        console.log("pdf built");
       }
+    );
+  } catch (e) {
+    console.log(e);
+  }
+}
+
+async function printPDFDark() {
+  try {
+    const browser = await puppeteer.launch({ headless: true });
+    const page = await browser.newPage();
+    await page.goto(info.localURL + "?theme=dark", {
+      waitUntil: "networkidle2",
+      timeout: 0,
+    });
+
+    const book = await page.pdf({
+      displayHeaderFooter: true,
+      printBackground: true,
+      format: "A4",
+      margin: {
+        top: "100px",
+        bottom: "100px",
+      },
+      headerTemplate: " ",
+      footerTemplate: footerDark,
+    });
+    await browser.close();
+    const pdfDoc = await PDFDocument.load(book);
+    const newPage = pdfDoc.insertPage(0, PageSizes.A4);
+    const { width, height } = newPage.getSize();
+
+    const imageBytes = fs.readFileSync(path.join(__dirname, info.cover));
+    const image = await pdfDoc.embedPng(imageBytes);
+    pdfDoc.setTitle(info.title);
+    pdfDoc.setAuthor(info.author);
+    pdfDoc.setSubject(info.subject);
+    pdfDoc.setKeywords(info.keywords);
+    // Get the width and height of the first page
 
-      console.log("pdf built");
+    newPage.drawImage(image, {
+      x: 0,
+      y: 0,
+      width,
+      height,
     });
+
+    // Serialize the PDFDocument to bytes (a Uint8Array)
+    const pdfBytes = await pdfDoc.save();
+    fs.writeFile(
+      path.join(__dirname, "../book/book-dark.pdf"),
+      pdfBytes,
+      function (err) {
+        if (err) {
+          return console.log(err);
+        }
+
+        console.log("pdf built");
+      }
+    );
   } catch (e) {
     console.log(e);
   }
 }
 
-printPDF();
+printPDFLight();
+printPDFDark();

generate-book/templates.js

@@ -1,8 +1,17 @@
 const footerTemplate =
-  '<style>@font-face {font-family: "Merriweather"; font-style: normal; font-weight: 400; font-display: swap; src: local("Merriweather Regular"), local("Merriweather-Regular"), url(./merryi.woff2) format("woff2");}</style><div style="margin: 0 auto;"><h1 style="color: #000; font-size: 6px; text-align: center;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></h1></div>';
+  '<div style="margin: 0 auto 10px auto;"><h1 style="color: #ddd; font-family: Helvetica; font-size: 8px; text-align: center;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></h1></div>';
+
+const footerDark =
+  '<style>* {-webkit-print-color-adjust: exact; color: #3B5C77; background: rgb(32, 40, 51);}</style><div style="margin: 0 auto;"><h1 style="font-family: Helvetica, serif; font-size: 8px; text-align: center;">Page <span class="pageNumber"></span> of <span class="totalPages"></span></h1></div>';
 
 const epubCSS = `
-  body {color: #000; font-family: "Helvetica";}
+  @font-face {
+    font-family: "Helvetica";
+    font-style: normal;
+    font-weight: normal;
+    src: url("./Helvetica.ttf");
+  }
+  body {color: #000; font-family: "Helvetica", sans-serif;}
   .alert, .title {display: none;}
   .menu-toggle,
   .title,
@@ -12,9 +21,127 @@ const epubCSS = `
   pre,
   .toc {
     page-break-inside: avoid;
-  }`;
+  }
+  code[class*="language-"],
+  pre[class*="language-"] {
+    color: #464646;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    word-wrap: normal;
+    line-height: 1.5;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+  pre[class*="language-"]::-moz-selection,
+  pre[class*="language-"] ::-moz-selection,
+  code[class*="language-"]::-moz-selection,
+  code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: #f7f7f7;
+  }
+  pre[class*="language-"]::selection,
+  pre[class*="language-"] ::selection,
+  code[class*="language-"]::selection,
+  code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: #f7f7f7;
+  }
+  @media print {
+    code[class*="language-"],
+    pre[class*="language-"] {
+      text-shadow: none;
+    }
+  }
+  /* Code blocks */
+  pre[class*="language-"] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+  :not(pre) > code[class*="language-"],
+  pre[class*="language-"] {
+    color: white;
+    background: #f7f7f7;
+  }
+  :not(pre) > code[class*="language-"] {
+    padding: 0.1em;
+    border-radius: 0.3em;
+    white-space: normal;
+  }
+  .token.variable {
+    color: #464646;
+    
+  }
+  .token.operator {
+    color: #464646;
+    
+  }
+  .token.keyword {
+    color: #999999;
+    
+  }
+  .token.number {
+    color: #999999;
+    
+  }
+  .token.constant {
+    color: #999999;
+    
+  }
+  .token.attr-name {
+    color: #999999;
+    
+  }
+  .token.builtin {
+    color: #868686;
+    
+  }
+  .token.string {
+    color: #868686;
+    
+  }
+  .token.char {
+    color: #868686;
+    
+  }
+  .token.tag {
+    color: #7C7C7C;
+    
+  }
+  .token.deleted {
+    color: #7C7C7C;
+    
+  }
+  .token.selector {
+    color: #747474;
+    
+  }
+  .token.changed {
+    color: #747474;
+    
+  }
+  .token.inserted {
+    color: #8E8E8E;
+    
+  }
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+  `;
 
 module.exports = {
+  footerDark,
   footerTemplate,
-  epubCSS
+  epubCSS,
 };

package.json

@@ -16,6 +16,7 @@
     "gatsby-plugin-no-javascript": "2.0.5",
     "gatsby-plugin-offline": "3.0.34",
     "gatsby-plugin-react-helmet": "3.1.22",
+    "gatsby-plugin-sass": "^2.3.13",
     "gatsby-plugin-sharp": "2.4.5",
     "gatsby-remark-copy-linked-files": "2.1.37",
     "gatsby-remark-images": "3.1.44",
@@ -25,6 +26,7 @@
     "gatsby-source-filesystem": "2.1.48",
     "gatsby-transformer-remark": "2.6.50",
     "gatsby-transformer-sharp": "2.3.14",
+    "node-sass": "^4.14.1",
     "prism-theme-night-owl": "1.2.0",
     "prism-themes": "^1.3.0",
     "prismjs": "1.19.0",
@@ -37,7 +39,10 @@
     "typeface-montserrat": "0.0.75"
   },
   "devDependencies": {
+    "cheerio": "^1.0.0-rc.3",
     "epub-gen": "0.1.0",
+    "eslint": "^7.9.0",
+    "eslint-plugin-react": "^7.20.6",
     "pdf-lib": "1.3.1",
     "prettier": "^2.1.1",
     "puppeteer": "2.1.1"
@@ -57,6 +62,7 @@
     "build:book": "node generate-book/pdf.js && GATSBY_SCRAPPER=1 gatsby build && node generate-book/epub.js",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
+    "lint": "eslint .",
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",