Add watermarks to version control as a shared npm asset

docs/config/paths.js

@@ -28,7 +28,6 @@ const mappedIcons = [
   },
 ];
 
-
 const docsIcons = ['./assets/icons/'];
 
 const mappedCopies = [
@@ -39,7 +38,7 @@ const mappedCopies = [
   {
     in: './docs/src/js',
     out: `${buildDir}js`,
-  },
+  }
 ];
 
 const mappedGithubData = {
@@ -48,6 +47,7 @@ const mappedGithubData = {
   out: './docs/dist/data/github.json',
 };
 
+const docsImages = './assets/images/';
 
 const siteURL =
   process.env.SITE_ENV === 'production'
@@ -63,4 +63,5 @@ module.exports = {
   mappedCopies,
   buildDir,
   siteURL,
+  docsImages,
 };

docs/config/tasks/watermark.ts

@@ -1,8 +1,9 @@
-import { buildDir } from '../paths';
+import { docsImages } from '../paths';
 
 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;
@@ -16,6 +17,8 @@ interface Watermark {
   imagePath: string;
 }
 
+const watermarkDir = path.join(docsImages, 'watermarks', '/');
+
 async function createWatermark(year: Number): Promise<Watermark> {
   const width = 200;
   const height = 50;
@@ -35,15 +38,15 @@ async function createWatermark(year: Number): Promise<Watermark> {
   img.src = `data:image/svg+xml;charset=utf-8,${bug}`;
   context.drawImage(img, 10, canvas.height / 2 - bugHeight / 2);
   const buffer = canvas.toBuffer('image/png');
-  const imagePath = `${buildDir}/img/watermarks/${year}.png`;
-  fs.outputFile(`${buildDir}/img/watermarks/${year}.png`, buffer);
+  const imagePath = `${watermarkDir}${year}.png`;
+  fs.outputFile(imagePath, buffer);
   return {
     year,
     imagePath,
   };
 }
 
-module.exports = async () => {
+async function build() {
   const spinner = ora('Generating watermark images').start();
   const now = new Date().getUTCFullYear();
   const years = Array(now - 1998)
@@ -54,4 +57,10 @@ module.exports = async () => {
   );
   spinner.succeed();
   return watermarks;
-};
+}
+
+build().catch((err) => {
+  // eslint-disable-next-line no-console
+  console.log(err);
+  process.exit(1);
+});

docs/src/icons-logos.njk

@@ -68,15 +68,4 @@ layout: base.njk
       </div>
     {% endfor %}
   </div>
-  <div class="q-spacer">
-    <h2 class="is-size-3 q-bottom-spacer">Watermarks</h2>
-    <ul class="q-tiles">
-      {% for watermark in watermarks %}
-        <li class="q-bottom-spacer">
-          {% set imagePath = '/img/watermarks/' + watermark.year + '.png' %}
-          <img src="{{ imagePath | url }}" alt="">
-        </li>
-      {% endfor %}
-    </ul>
-  </div>
 </div>

package.json

@@ -13,7 +13,8 @@
     "test": "npm run lint && npm run build",
     "release": "np --any-branch",
     "compile": "tsc",
-    "docs": "npm run compile && SITE_ENV=development node docs/src/data/docs.js"
+    "docs": "npm run compile && SITE_ENV=development node docs/src/data/docs.js",
+    "watermark": "npm run compile && node docs/build/config/tasks/watermark.js"
   },
   "files": [
     "/assets"