refactor: replace gulp with webpack (#42)

Co-authored-by: Robert Kaussow <mail@thegeeklab.de>
Reviewed-on: #42
Co-authored-by: Robert Kaussow <xoxys@rknet.org>
Co-committed-by: Robert Kaussow <xoxys@rknet.org>

.drone.yml

@@ -33,7 +33,7 @@ steps:
     image: node:lts-alpine
     commands:
       - npm install > /dev/null
-      - npx gulp favicon
+      - npm run build
     environment:
       FORCE_COLOR: true
       NPM_CONFIG_LOGLEVEL: error
@@ -127,6 +127,6 @@ depends_on:
 
 ---
 kind: signature
-hmac: ef49fc0e06b9885e2e0ab17fcdd42fbbd71e91f5aa2318bec102ec216d2cf4bb
+hmac: 305e8e4eb11134ee58a5fb77a6ae25686daa5fc0007ebba33923f41f338999a4
 
 ...

.prettierignore

@@ -1,9 +1,9 @@
-*.html
 .drone.yml
 search*.js
 _normalize.css
-.lighthouseci/
+list.json.json
-themes/
+/.lighthouseci/
-static/js/
+/themes/
-src/favicon/
+/static/js/
+/src/favicon/
 LICENSE

.prettierrc

@@ -0,0 +1,14 @@
+{
+  "printWidth": 99,
+  "singleQuote": false,
+  "semi": false,
+  "trailingComma": "none",
+  "overrides": [
+    {
+      "files": ["*.html"],
+      "options": {
+        "parser": "go-template"
+      }
+    }
+  ]
+}

gulpfile.js

@@ -1,129 +0,0 @@
-const gulp = require("gulp");
-const rename = require("gulp-rename");
-const realFavicon = require("gulp-real-favicon");
-
-const fs = require("fs");
-const del = require("del");
-const through = require("through2");
-
-var BUILD = "build";
-var FAVICON_DATA_FILE = BUILD + "/faviconData.json";
-
-function noop() {
-  return through.obj();
-}
-
-gulp.task("prepare", function (done) {
-  if (!fs.existsSync(BUILD)) {
-    fs.mkdirSync(BUILD, {
-      recursive: true,
-    });
-  }
-  done();
-});
-
-gulp.task("favicon-svg", function () {
-  return gulp
-    .src("src/favicon/favicon-main.svg")
-    .pipe(rename("favicon.svg"))
-    .pipe(gulp.dest("static/favicon/"));
-});
-
-gulp.task("favicon-generate", function (done) {
-  realFavicon.generateFavicon(
-    {
-      masterPicture: "src/favicon/favicon-main.svg",
-      dest: "static/favicon",
-      iconsPath: "/favicon",
-      design: {
-        ios: {
-          pictureAspect: "backgroundAndMargin",
-          backgroundColor: "#2f333e",
-          margin: "32%",
-          assets: {
-            ios6AndPriorIcons: true,
-            ios7AndLaterIcons: true,
-            precomposedIcons: false,
-            declareOnlyDefaultIcon: true,
-          },
-        },
-        desktopBrowser: {
-          design: "raw",
-        },
-        windows: {
-          pictureAspect: "whiteSilhouette",
-          backgroundColor: "#2f333e",
-          onConflict: "override",
-          assets: {
-            windows80Ie10Tile: false,
-            windows10Ie11EdgeTiles: {
-              small: true,
-              medium: true,
-              big: true,
-              rectangle: true,
-            },
-          },
-        },
-        androidChrome: {
-          pictureAspect: "backgroundAndMargin",
-          margin: "19%",
-          backgroundColor: "#2f333e",
-          themeColor: "#2f333e",
-          manifest: {
-            name: "the Geeklab",
-            display: "standalone",
-            orientation: "notSet",
-            onConflict: "override",
-            declared: true,
-          },
-          assets: {
-            legacyIcon: false,
-            lowResolutionIcons: false,
-          },
-        },
-        safariPinnedTab: {
-          pictureAspect: "silhouette",
-          themeColor: "#4186c9",
-        },
-      },
-      settings: {
-        scalingAlgorithm: "Mitchell",
-        errorOnImageTooSmall: false,
-        readmeFile: false,
-        htmlCodeFile: false,
-        usePathAsIs: false,
-      },
-      markupFile: FAVICON_DATA_FILE,
-    },
-    function () {
-      done();
-    }
-  );
-});
-
-gulp.task("favicon-check-update", function (done) {
-  var currentVersion = JSON.parse(fs.readFileSync(FAVICON_DATA_FILE)).version;
-  realFavicon.checkForUpdates(currentVersion, function (err) {
-    if (err) {
-      throw err;
-    }
-  });
-  done();
-});
-
-gulp.task("clean", function () {
-  return del([BUILD, "static/favicon/", "resources"]);
-});
-
-/* Task series */
-
-gulp.task(
-  "favicon",
-  gulp.series(
-    "clean",
-    "prepare",
-    "favicon-svg",
-    "favicon-generate",
-    "favicon-check-update"
-  )
-);

layouts/partials/head/favicons.html

@@ -1,8 +1,20 @@
-<link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
+<link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}" />
-<link rel="apple-touch-icon" sizes="180x180" href="{{ "favicon/apple-touch-icon.png" | relURL }}">
+<link
-<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
+  rel="icon"
-<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
+  type="image/png"
-<link rel="manifest" href="{{ "favicon/site.webmanifest" | relURL }}">
+  sizes="48x48"
-<link rel="mask-icon" href="{{ "favicon/safari-pinned-tab.svg" | relURL }}" color="#4186c9">
+  href="{{ "favicon/favicon-32x32.png" | relURL }}"
-<meta name="msapplication-TileColor" content="#2f333e">
+/>
-<meta name="theme-color" content="#2f333e">
+<link
+  rel="icon"
+  type="image/png"
+  sizes="32x32"
+  href="{{ "favicon/favicon-32x32.png" | relURL }}"
+/>
+<link
+  rel="icon"
+  type="image/png"
+  sizes="16x16"
+  href="{{ "favicon/favicon-16x16.png" | relURL }}"
+/>
+<link rel="manifest" href="{{ "favicon/manifest.json" | relURL }}" />

package.json

@@ -2,10 +2,15 @@
   "name": "the-geeklab",
   "version": "1.0.0",
   "description": "My personal blog",
-  "main": "gulpfile.js",
+  "main": "index.js",
   "scripts": {
-    "gulp": "gulp",
+    "build": "run-s prep build:*",
-    "server": "hugo server  -D -F"
+    "build:webpack": "webpack --mode=production",
+    "start": "run-s prep build:webpack ; npm run start:hugo",
+    "start:hugo": "hugo server -D -F",
+    "prep": "run-s prep:*",
+    "prep:clean": "del build/ static/",
+    "prep:make": "make-dir build/"
   },
   "repository": {
     "type": "git",
@@ -14,10 +19,16 @@
   "author": "Robert Kaussow",
   "license": "MIT",
   "devDependencies": {
-    "del": "6.0.0",
+    "copy-webpack-plugin": "10.2.0",
-    "gulp": "4.0.2",
+    "del-cli": "4.0.1",
-    "gulp-real-favicon": "0.3.2",
+    "favicons-webpack-plugin": "5.0.2",
-    "gulp-rename": "2.0.0",
+    "js-yaml": "4.1.0",
-    "through2": "4.0.2"
+    "make-dir-cli": "3.0.0",
+    "npm-run-all": "4.1.5",
+    "prettier": "2.5.1",
+    "prettier-plugin-go-template": "0.0.11",
+    "webpack": "5.65.0",
+    "webpack-cli": "4.9.1",
+    "webpack-remove-empty-scripts": "0.7.2"
   }
 }

src/static/brand.svg

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   id="Layer_1"
+   data-name="Layer 1"
+   viewBox="0 0 1066.5 1066.5"
+   version="1.1"
+   sodipodi:docname="brand.svg"
+   inkscape:export-filename="/home/rknet/rkau2905/Bilder/the Geeklab/new/brand.png"
+   inkscape:export-xdpi="270.04221"
+   inkscape:export-ydpi="270.04221"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview11"
+     pagecolor="#2f333e"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="0"
+     showgrid="false"
+     inkscape:zoom="0.62353493"
+     inkscape:cx="533.25"
+     inkscape:cy="532.44812"
+     inkscape:window-width="2560"
+     inkscape:window-height="1380"
+     inkscape:window-x="0"
+     inkscape:window-y="32"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="Layer_1" />
+  <defs
+     id="defs4">
+    <style
+       id="style2">.cls-1{fill:#00101a;}.cls-2{fill:#fff;}</style>
+  </defs>
+  <path
+     id="path8"
+     class="cls-2"
+     d="M 532.3508,4.6997534 A 82.859095,82.859095 0 0 0 490.40895,15.816519 L 167.86364,203.60387 A 229.98135,229.98135 0 0 0 54.141557,402.24509 l 1.032151,288.3446 A 229.43295,229.43295 0 0 0 170.27201,888.21501 l 250.38855,143.39819 a 229.21691,229.21691 0 0 0 228.70031,-0.7466 L 898.63612,885.78716 a 229.49941,229.49941 0 0 0 113.72218,-198.5049 l -0.9835,-278.75659 A 136.45327,136.45327 0 0 0 806.33938,291.08391 L 446.30216,510.1313 444.64033,702.75485 847.60287,455.95611 848.45,687.81456 a 65.625866,65.625866 0 0 1 -32.10717,56.35309 L 566.90204,889.22767 a 65.310118,65.310118 0 0 1 -64.81157,0.21748 L 251.75062,746.04371 a 65.193788,65.193788 0 0 1 -32.7044,-55.98631 l -1.01269,-288.47769 a 65.17717,65.17717 0 0 1 32.35386,-56.20378 L 448.51253,229.79725 446.8507,404.12116 611.55413,307.15374 613.6152,87.311119 A 82.094651,82.094651 0 0 0 532.3508,4.6997534 Z"
+     style="stroke-width:1.66183" />
+</svg>

webpack.config.js

@@ -0,0 +1,56 @@
+const path = require("path")
+const yaml = require("js-yaml")
+const fs = require("fs")
+
+const FaviconsWebpackPlugin = require("favicons-webpack-plugin")
+const CopyPlugin = require("copy-webpack-plugin")
+
+let config
+try {
+  config = yaml.load(fs.readFileSync(path.join(__dirname, "config.yml"), "utf8"))
+} catch (e) {
+  console.log(e)
+}
+
+module.exports = {
+  entry: [path.resolve("src", "dummy.js")],
+  output: {
+    filename: "../build/dummy.js",
+    path: path.join(__dirname, "static"),
+    publicPath: "/",
+    clean: true
+  },
+  plugins: [
+    new CopyPlugin({
+      patterns: [
+        {
+          from: "**/*",
+          context: path.resolve(__dirname, "src", "static")
+        }
+      ]
+    }),
+
+    new FaviconsWebpackPlugin({
+      logo: path.resolve("src", "static", "favicon", "favicon.svg"),
+      cache: true,
+      prefix: "favicon/",
+      inject: false,
+      favicons: {
+        appName: config.title,
+        appShortName: config.title.concat(" - ", config.params.subtitle),
+        appDescription: config.params.description,
+        background: "#2f333e",
+        theme_color: "#2f333e",
+        icons: {
+          android: { offset: 10 },
+          appleIcon: { offset: 10 },
+          appleStartup: { offset: 10 },
+          favicons: true,
+          windows: { offset: 10 },
+          yandex: false,
+          coast: false
+        }
+      }
+    })
+  ]
+}