Don't store fonts and increase scale of watermarks

docs/config/tasks/utils.js

@@ -1,9 +1,12 @@
+const axios = require('axios');
 const fs = require('fs-extra');
 const nunjucks = require('nunjucks');
+const path = require('path');
 const {
   docsStyles,
   siteURL,
   mappedGithubData,
+  buildDir,
 } = require('../paths.js');
 
 const generateClassName = (str) => {
@@ -85,13 +88,15 @@ const slugify = (text) =>
 
 const stripTags = (str) => str.replace(/(<([^>]+)>)/gi, '');
 
-const getKeywords = obj => {
-  const {name, description, modifiers} = obj;
+const getKeywords = (obj) => {
+  const { name, description, modifiers } = obj;
   const className = generateClassName(name);
   const keywordsStr = /Keywords: (.*)/;
   const keywordsMatch = keywordsStr.exec(description);
   let keywords = [`${name.toLowerCase()}`, className];
-  const modifierNames = modifiers.map((modifier) => stripSelector(modifier.data.name));
+  const modifierNames = modifiers.map((modifier) =>
+    stripSelector(modifier.data.name)
+  );
   if (modifiers.length > 0) {
     keywords = [...keywords, ...modifierNames];
   }
@@ -103,7 +108,7 @@ const getKeywords = obj => {
     keywords = [...labeledKeywords, ...keywords];
   }
   return keywords;
-}
+};
 const getDetails = (description, name) => {
   const isHelperStr = '{{isHelper}}';
   const isHelper = description.includes(isHelperStr);
@@ -149,6 +154,34 @@ const buildTokenArr = (arr) =>
     .map((arrMap) => arrMap.list.map((token) => ({ ...token })))
     .reduce((acc, val) => acc.concat(val), []);
 
+const downloadAsset = async (url, name) => {
+  const filepath = path.resolve(buildDir, name);
+  const writer = fs.createWriteStream(filepath);
+
+  const response = await axios({
+    url,
+    method: 'GET',
+    responseEncoding: 'binary',
+    responseType: 'stream',
+  });
+
+  await new Promise((resolve, reject) => {
+    response.data.pipe(writer);
+    let error = null;
+    writer.on('error', (err) => {
+      error = err;
+      writer.close();
+      reject(err);
+    });
+    writer.on('close', () => {
+      if (!error) {
+        resolve(true);
+      }
+    });
+  });
+  return filepath;
+};
+
 module.exports = {
   findUsageInfo,
   generateClassName,
@@ -163,4 +196,5 @@ module.exports = {
   convertArrayToObject,
   buildTokenArr,
   getKeywords,
+  downloadAsset,
 };

docs/config/tasks/watermark.ts

@@ -1,16 +1,14 @@
 import { docsImages } from '../paths';
+import { downloadAsset } from './utils';
 
 const { createCanvas, Image, registerFont } = require('canvas');
 const fs = require('fs-extra');
 const ora = require('ora');
 const path = require('path');
 
-const bugHeight = 35;
-const bugWidth = 30;
+const bugHeight = 70;
+const bugWidth = 60;
 const bug = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 174.9 200" width="${bugWidth}" height="${bugHeight}"><path fill="#ffc200" d="M0 0v200l40.2-25.1h134.6V0H0zm125.2 139.7l-38.3-25.2-38.3 25.2 12.1-44.2L25 66.8l45.8-2.1L87 21.8l16.2 42.9 45.8 2.1-35.8 28.6 12 44.3z"/></svg>`;
-registerFont('./assets/fonts/OpenSans-Bold.ttf', {
-  family: 'Open Sans Bold',
-});
 
 interface Watermark {
   year: Number;
@@ -19,15 +17,27 @@ interface Watermark {
 
 const watermarkDir = path.join(docsImages, 'watermarks', '/');
 
+async function initFonts(): Promise<any> {
+  // remote fonts must be downloaded
+  // https://github.com/Automattic/node-canvas/issues/1527
+  const fontPath = await downloadAsset(
+    'https://s3.amazonaws.com/cdn.texastribune.org/fonts/OpenSans-Bold.ttf',
+    'fonts/OpenSans-Bold.ttf'
+  );
+  registerFont(fontPath, {
+    family: 'Open Sans Bold',
+  });
+}
+
 async function createWatermark(year: Number): Promise<Watermark> {
-  const width = 200;
-  const height = 50;
+  const width = 330;
+  const height = 90;
 
   const canvas = createCanvas(width, height);
   const context = canvas.getContext('2d');
   context.fillStyle = '#222';
   context.fillRect(0, 0, width, height);
-  context.font = 'bold 16px Open Sans Bold';
+  context.font = 'bold 32px Open Sans Bold';
   context.fillStyle = '#fff';
   const text = `Published ${year}`;
   context.textBaseline = 'middle';
@@ -48,6 +58,8 @@ async function createWatermark(year: Number): Promise<Watermark> {
 
 async function build() {
   const spinner = ora('Generating watermark images').start();
+  // download and register CDN fonts
+  await initFonts();
   const now = new Date().getUTCFullYear();
   const years = Array(now - 1998)
     .fill('')