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

This commit is contained in:
Robert Kaussow 2022-01-07 16:18:11 +01:00 committed by GitHub
parent e6d74f29e5
commit beb5afa756
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 441 additions and 2856 deletions

View File

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

3144
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -4,20 +4,20 @@
"description": "Hugo theme made for blogs", "description": "Hugo theme made for blogs",
"main": "index.js", "main": "index.js",
"scripts": { "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", "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:webpack": "webpack --mode=development --watch",
"start:build": "webpack --mode=development", "start:build": "webpack --mode=development",
"start:hugo": "hugo server -D -F -s exampleSite/", "start:hugo": "hugo server -D -F -s exampleSite/",
"svg": "run-s svg:*", "svg": "run-s svg:*",
"svg:sprite": "svg-sprite -C svgsprite.config.json 'src/icons/*.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" "lint": "eslint src/js/ --color"
}, },
"repository": { "repository": {
@ -35,25 +35,23 @@
"@babel/eslint-parser": "7.16.5", "@babel/eslint-parser": "7.16.5",
"autoprefixer": "10.4.1", "autoprefixer": "10.4.1",
"copy-webpack-plugin": "10.2.0", "copy-webpack-plugin": "10.2.0",
"cpy-cli": "3.1.1",
"css-loader": "6.5.1", "css-loader": "6.5.1",
"del-cli": "4.0.1",
"eslint": "8.6.0", "eslint": "8.6.0",
"eslint-config-prettier": "8.3.0", "eslint-config-prettier": "8.3.0",
"eslint-plugin-prettier": "4.0.0", "eslint-plugin-prettier": "4.0.0",
"favicons-webpack-plugin": "5.0.2", "favicons-webpack-plugin": "5.0.2",
"make-dir-cli": "3.0.0",
"npm-run-all": "4.1.5", "npm-run-all": "4.1.5",
"postcss-loader": "6.2.1", "postcss-loader": "6.2.1",
"prettier": "2.5.1", "prettier": "2.5.1",
"prettier-plugin-go-template": "0.0.11", "prettier-plugin-go-template": "0.0.11",
"sass": "1.46.0", "sass": "1.46.0",
"sass-loader": "12.4.0", "sass-loader": "12.4.0",
"shx": "0.3.3",
"svg-sprite": "1.5.3", "svg-sprite": "1.5.3",
"svgtofont": "3.13.1", "svgtofont": "3.13.1",
"webpack": "5.65.0", "webpack": "5.65.0",
"webpack-assets-manifest": "5.0.6",
"webpack-cli": "4.9.1", "webpack-cli": "4.9.1",
"webpack-manifest-plugin": "4.0.2",
"webpack-remove-empty-scripts": "0.7.2" "webpack-remove-empty-scripts": "0.7.2"
}, },
"browserslist": [ "browserslist": [

View File

@ -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() applyTheme()
})() })()

View File

@ -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) => { document.addEventListener("DOMContentLoaded", (event) => {
const darkModeToggle = document.getElementById("gblog-dark-mode") const darkModeToggle = document.getElementById("gblog-dark-mode")

View File

@ -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) { document.addEventListener("DOMContentLoaded", function (event) {
let lstore = Storage.namespace(THEME) let lstore = Storage.namespace(THEME)

View File

@ -1,9 +1,13 @@
const path = require("path") 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 FaviconsWebpackPlugin = require("favicons-webpack-plugin")
const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts") const RemoveEmptyScriptsPlugin = require("webpack-remove-empty-scripts")
const CopyPlugin = require("copy-webpack-plugin") const CopyPlugin = require("copy-webpack-plugin")
const SRIPlugin = require("./webpack.plugins")
const nodeModulesPath = path.resolve(__dirname, "node_modules")
var config = { var config = {
entry: { entry: {
@ -26,8 +30,6 @@ var config = {
ignored: ["/exampleSite/", "/node_modules/"] ignored: ["/exampleSite/", "/node_modules/"]
}, },
plugins: [ plugins: [
new RemoveEmptyScriptsPlugin(),
new CopyPlugin({ new CopyPlugin({
patterns: [ patterns: [
{ {
@ -46,12 +48,6 @@ var config = {
] ]
}), }),
new WebpackAssetsManifest({
output: "../data/assets.json",
integrity: true,
integrityHashes: ["sha512"]
}),
new FaviconsWebpackPlugin({ new FaviconsWebpackPlugin({
logo: path.resolve("src", "static", "favicon", "favicon.svg"), logo: path.resolve("src", "static", "favicon", "favicon.svg"),
cache: true, cache: true,
@ -70,6 +66,31 @@ var config = {
coast: false 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 = { config.module = {
rules: [ 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", type: "asset/resource",
generator: { generator: {
filename: "[name]-[contenthash:8].min.css" 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 // FIXME: https://github.com/webpack-contrib/sass-loader/issues/962#issuecomment-1002675051
sourceMap: argv.mode === "development" ? true : false, sourceMap: argv.mode === "development" ? true : false,
sourceMapEmbed: argv.mode === "development" ? true : false, sourceMapEmbed: argv.mode === "development" ? true : false,
outputStyle: "compressed" outputStyle: "compressed",
includePaths: [nodeModulesPath]
} }
} }
} }

57
webpack.plugins.js Normal file
View File

@ -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