chore: cleanup build setup and webpack requirements (#138)

.drone.yml

@@ -28,7 +28,7 @@ steps:
   - name: testbuild
     image: thegeeklab/hugo:0.91.0
     commands:
-      - mkdir exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/hugo-geekblog
+      - mkdir -p exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/hugo-geekblog
       - hugo -s exampleSite/ -b http://localhost/
 
   - name: html-validation
@@ -111,7 +111,6 @@ steps:
   - name: package
     image: thegeeklab/alpine-tools
     commands:
-      - mkdir dist/
       - echo "${DRONE_TAG:-latest}" > VERSION
       - tar -zcvf dist/hugo-geekblog.tar.gz -X .tarignore .
 
@@ -195,7 +194,7 @@ steps:
       - npm install > /dev/null
       - npm run build
       - npm run svg-sprite-list
-      - mkdir exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/hugo-geekblog
+      - mkdir -p exampleSite/themes/ && ln -s $(pwd)/ exampleSite/themes/hugo-geekblog
     environment:
       FORCE_COLOR: true
       NPM_CONFIG_LOGLEVEL: error
@@ -286,6 +285,6 @@ depends_on:
 
 ---
 kind: signature
-hmac: 74a7e960eb8af67b40992bb60bb75db699d44e81ac28189f01e1c27e1ad74988
+hmac: 281ff2f1156c56a0aaecc0e0bc11a85b84ed73cad76520c1494f25194b1c293d
 
 ...

package.json

@@ -4,20 +4,20 @@
   "description": "Hugo theme made for blogs",
   "main": "index.js",
   "scripts": {
-    "build": "run-s prep svg build:webpack-prod",
+    "build": "run-s prep:clean prep:make svg build:webpack",
-    "build:webpack-prod": "webpack --mode=production",
+    "build:webpack": "webpack --mode=production",
     "build:webpack-devel": "webpack --mode=development",
-    "start": "run-s prep svg build:webpack-devel ; run-p start:webpack start:hugo",
+    "start": "run-s prep:clean prep:make svg build:webpack-devel ; run-p start:webpack start:hugo",
     "start:webpack": "webpack --mode=development --watch",
     "start:build": "webpack --mode=development",
     "start:hugo": "hugo server -D -F -s exampleSite/",
     "svg": "run-s svg:*",
     "svg:sprite": "svg-sprite -C svgsprite.config.json 'src/icons/*.svg'",
-    "svg:font": "svgtofont --sources build/icons --output build/fonts",
+    "svg:font": "svgtofont --sources build/icons/ --output build/fonts/",
-    "prep": "run-s prep:*",
+    "prep:clean": "shx rm -rf build/ static/",
-    "prep:clean": "del build/ static/",
+    "prep:clean-all": "shx rm -rf build/ dist/ static/ data/ assets/sprites/ exampleSite/data/sprites/",
-    "prep:make": "make-dir build/icons build/fonts",
+    "prep:make": "mkdir -p build/icons/ build/fonts/ dist/",
-    "svg-sprite-list": "run-s prep svg ; make-dir exampleSite/data/sprites ; cpy build/fonts/GeekblogIcons.json exampleSite/data/sprites/ --rename geekblog.json",
+    "svg-sprite-list": "run-s prep:make svg ; mkdir -p exampleSite/data/sprites/ ; cp build/fonts/GeekblogIcons.json exampleSite/data/sprites/geekblog.json",
     "lint": "eslint src/js/ --color"
   },
   "repository": {
@@ -35,25 +35,23 @@
     "@babel/eslint-parser": "7.16.5",
     "autoprefixer": "10.4.1",
     "copy-webpack-plugin": "10.2.0",
-    "cpy-cli": "3.1.1",
     "css-loader": "6.5.1",
-    "del-cli": "4.0.1",
     "eslint": "8.6.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-prettier": "4.0.0",
     "favicons-webpack-plugin": "5.0.2",
-    "make-dir-cli": "3.0.0",
     "npm-run-all": "4.1.5",
     "postcss-loader": "6.2.1",
     "prettier": "2.5.1",
     "prettier-plugin-go-template": "0.0.11",
     "sass": "1.46.0",
     "sass-loader": "12.4.0",
+    "shx": "0.3.3",
     "svg-sprite": "1.5.3",
     "svgtofont": "3.13.1",
     "webpack": "5.65.0",
-    "webpack-assets-manifest": "5.0.6",
     "webpack-cli": "4.9.1",
+    "webpack-manifest-plugin": "4.0.2",
     "webpack-remove-empty-scripts": "0.7.2"
   },
   "browserslist": [

src/js/app.js

@@ -1,7 +1,7 @@
-import { applyTheme } from "./darkmode"
+const { applyTheme } = require("./darkmode")
-import { createCopyButton } from "./copycode.js"
+const { createCopyButton } = require("./copycode.js")
+const Clipboard = require("clipboard")
 
-import Clipboard from "clipboard"
 ;(() => {
   applyTheme()
 })()

src/js/darkmode.js

@@ -1,6 +1,6 @@
-import Storage from "store2"
+const Storage = require("store2")
 
-import { TOGGLE_MODES, THEME, AUTO_MODE } from "./config.js"
+const { TOGGLE_MODES, THEME, AUTO_MODE } = require("./config.js")
 
 document.addEventListener("DOMContentLoaded", (event) => {
   const darkModeToggle = document.getElementById("gblog-dark-mode")

src/js/mermaid.js

@@ -1,6 +1,5 @@
-import Storage from "store2"
+const Storage = require("store2")
-
+const { DARK_MODE, THEME, AUTO_MODE } = require("./config.js")
-import { DARK_MODE, THEME, AUTO_MODE } from "./config.js"
 
 document.addEventListener("DOMContentLoaded", function (event) {
   let lstore = Storage.namespace(THEME)

webpack.config.js

@@ -1,9 +1,13 @@
 const path = require("path")
+const glob = require("glob")
 
-const WebpackAssetsManifest = require("webpack-assets-manifest")
+const { WebpackManifestPlugin } = require("webpack-manifest-plugin")
 const FaviconsWebpackPlugin = require("favicons-webpack-plugin")
 const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts")
 const CopyPlugin = require("copy-webpack-plugin")
+const SRIPlugin = require("./webpack.plugins")
+
+const nodeModulesPath = path.resolve(__dirname, "node_modules")
 
 var config = {
   entry: {
@@ -26,8 +30,6 @@ var config = {
     ignored: ["/exampleSite/", "/node_modules/"]
   },
   plugins: [
-    new RemoveEmptyScriptsPlugin(),
-
     new CopyPlugin({
       patterns: [
         {
@@ -46,12 +48,6 @@ var config = {
       ]
     }),
 
-    new WebpackAssetsManifest({
-      output: "../data/assets.json",
-      integrity: true,
-      integrityHashes: ["sha512"]
-    }),
-
     new FaviconsWebpackPlugin({
       logo: path.resolve("src", "static", "favicon", "favicon.svg"),
       cache: true,
@@ -70,6 +66,31 @@ var config = {
           coast: false
         }
       }
+    }),
+
+    new RemoveEmptyScriptsPlugin(),
+
+    new WebpackManifestPlugin({
+      fileName: "../data/assets.json",
+      publicPath: "",
+      writeToFileEmit: true,
+      generate(seed, files) {
+        let manifest = {}
+
+        files.forEach(function (element, index) {
+          if (element.name.endsWith(".svg")) return
+
+          Object.assign(manifest, {
+            [element.name]: { src: element.path }
+          })
+        })
+
+        return manifest
+      }
+    }),
+
+    new SRIPlugin({
+      sourceFile: "data/assets.json"
     })
   ]
 }
@@ -82,8 +103,14 @@ module.exports = (env, argv) => {
   config.module = {
     rules: [
       {
-        test: /\.(sa|sc|c)ss$/,
+        test: /\.(woff|woff2|eot|ttf|otf)$/i,
-        exclude: /node_modules/,
+        type: "asset/resource",
+        generator: {
+          filename: "fonts/[name][ext]"
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/i,
         type: "asset/resource",
         generator: {
           filename: "[name]-[contenthash:8].min.css"
@@ -104,7 +131,8 @@ module.exports = (env, argv) => {
                 // FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051
                 sourceMap: argv.mode === "development" ? true : false,
                 sourceMapEmbed: argv.mode === "development" ? true : false,
-                outputStyle: "compressed"
+                outputStyle: "compressed",
+                includePaths: [nodeModulesPath]
               }
             }
           }

webpack.plugins.js

@@ -0,0 +1,57 @@
+const fs = require("fs")
+const crypto = require("crypto")
+const path = require("path")
+const { validate } = require("schema-utils")
+
+class SRIPlugin {
+  static defaultOptions = {
+    algorithm: "sha512",
+    sourceFile: "assets.json"
+  }
+
+  constructor(options = {}) {
+    const schema = {
+      type: "object",
+      properties: {
+        outputFile: {
+          type: "string"
+        },
+        algorithm: {
+          type: "string"
+        }
+      }
+    }
+
+    this.options = { ...SRIPlugin.defaultOptions, ...options }
+
+    validate(schema, options, {
+      name: "SRI Plugin",
+      baseDataPath: "options"
+    })
+  }
+
+  apply(compiler) {
+    compiler.hooks.done.tap("SRIPlugin", (manifest) => {
+      let data = JSON.parse(fs.readFileSync(this.options.sourceFile, "utf8"))
+      let outputFile = this.options.outputFile ? this.options.outputFile : this.options.sourceFile
+
+      const checksum = (str, algorithm = this.options.algorithm, encoding = "base64") =>
+        crypto.createHash(algorithm).update(str, "utf8").digest(encoding)
+      const fileSum = (file, algorithm) => checksum(fs.readFileSync(file), algorithm)
+      const calculateSRI = (file, algorithm = this.options.algorithm) =>
+        `${algorithm}-${fileSum(path.join(".", "static", file), algorithm)}`
+
+      Object.keys(data).forEach((key) => {
+        let element = data[key]
+        element.integrity = calculateSRI(element.src)
+      })
+
+      fs.writeFileSync(outputFile, JSON.stringify(data, null, 2), {
+        encoding: "utf8",
+        flag: "w"
+      })
+    })
+  }
+}
+
+module.exports = SRIPlugin