Merge pull request #179 from catdad/#178-offline-fonts

downloading fonts for offline use in the app

.gitignore

@@ -38,5 +38,5 @@ coverage/
 .nyc_output/
 .raw-viewer-config.json
 temp/
-third-party/exiftool/
+third-party/
 dist/

lib/third-party.js

@@ -5,9 +5,11 @@ const platform = process.platform === 'win32' ? 'win' : 'linux';
 
 const exiftoolDir = path.resolve(root, 'third-party/exiftool', platform);
 const exiftool = path.resolve(exiftoolDir, `exiftool${platform === 'win' ? '.exe' : ''}`);
+const fontsDir = path.resolve(root, 'third-party/fonts');
 
 module.exports = {
   platform,
   exiftoolDir,
-  exiftool
+  exiftool,
+  fontsDir
 };

package.json

@@ -5,7 +5,7 @@
   "description": "raw-viewer",
   "main": "main.js",
   "scripts": {
-    "postinstall": "electron-rebuild && node scripts/exiftool-install.js",
+    "postinstall": "electron-rebuild && node scripts/exiftool-install.js && node scripts/fonts-install.js",
     "lint": "eslint main.js lib public renderer scripts test",
     "pretest": "node test/lib/downloader.js",
     "test": "mocha --timeout 30000 --slow 0 test/**.test.js",
@@ -55,6 +55,7 @@
     "electron-rebuild": "^1.8.4",
     "electronmon": "^0.4.0",
     "eslint": "^5.16.0",
+    "figures": "^3.0.0",
     "form-data": "^2.3.3",
     "mocha": "^6.1.4",
     "rootrequire": "^1.0.0",

public/index.html

@@ -4,7 +4,7 @@
   <meta charset="UTF-8">
   <title>Raw Viewer</title>
 
-  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
+  <link href="../third-party/fonts/fonts.css" rel="stylesheet">
   <style>
     html, body, #main {
       padding: 0;

scripts/exiftool-install.js

@@ -50,7 +50,7 @@ const unzipPromise = async (stream, outdir) => {
   }
 };
 
-(async () => {
+require('./lib.run.js')(`exiftool v${version}`, async () => {
   await fs.ensureDir(exiftoolDir);
 
   const archive = await responseStream(urls[platform]);
@@ -75,10 +75,4 @@ const unzipPromise = async (stream, outdir) => {
       }
     }));
   }
-})().then(() => {
-  console.log(`exiftool v${version} fetched successfully`);
-}).catch(err => {
-  console.error(`error fetching exiftool v${version}`);
-  console.error(err);
-  process.exitCode = 1;
 });

scripts/fonts-install.js

@@ -0,0 +1,67 @@
+/* eslint-disable no-console */
+
+const { promisify } = require('util');
+const stream = require('stream');
+const pipeline = promisify(stream.pipeline);
+const path = require('path');
+const fs = require('fs-extra');
+const fetch = require('node-fetch');
+
+const { fontsDir } = require('../lib/third-party.js');
+
+const css = `
+/* latin-ext */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  src: url(KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+`;
+
+const fonts = {
+  // roboto latin
+  'KFOmCnqEu92Fr1Mu4mxK.woff2': 'https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxK.woff2',
+  // roboto latin-ext
+  'KFOmCnqEu92Fr1Mu7GxKOzY.woff2': 'https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu7GxKOzY.woff2',
+  // roboto latin bold
+  'KFOlCnqEu92Fr1MmWUlfBBc4.woff2': 'https://fonts.gstatic.com/s/roboto/v19/KFOlCnqEu92Fr1MmWUlfBBc4.woff2'
+};
+
+require('./lib.run.js')('fonts', async () => {
+  await fs.ensureDir(fontsDir);
+  await fs.outputFile(path.resolve(fontsDir, 'fonts.css'), css);
+
+  for (let name in fonts) {
+    const res = await fetch(fonts[name]);
+
+    if (!res.ok) {
+      throw new Error(`failed to fetch font "${name}": ${res.status} ${res.statusText}`);
+    }
+
+    await pipeline(
+      res.body,
+      fs.createWriteStream(path.join(fontsDir, name))
+    );
+  }
+});

scripts/lib.run.js

@@ -0,0 +1,18 @@
+/* eslint-disable no-console */
+
+const chalk = require('chalk');
+const figures = require('figures');
+
+module.exports = (title, prom) => {
+  const start = Date.now();
+
+  prom().then(() => {
+    const end = Date.now();
+    console.log(`${chalk.green(figures.tick)} ${title} fetched successfully in ${end - start}ms`);
+  }).catch(err => {
+    const end = Date.now();
+    console.error(`${chalk.red(figures.cross)} error fetching ${title} in ${end - start}ms`);
+    console.error(err);
+    process.exitCode = 1;
+  });
+};