refactor: replace gulp with webpack (#42)
All checks were successful
continuous-integration/drone/push Build is passing

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>
This commit is contained in:
Robert Kaussow 2021-12-30 16:57:27 +01:00
parent 50e3493186
commit d5e92052a8
11 changed files with 10083 additions and 3187 deletions

View File

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

View File

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

14
.prettierrc Normal file
View File

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

View File

@ -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"
)
);

View File

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

12958
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -2,10 +2,15 @@
"name": "the-geeklab",
"version": "1.0.0",
"description": "My personal blog",
"main": "gulpfile.js",
"main": "index.js",
"scripts": {
"gulp": "gulp",
"server": "hugo server -D -F"
"build": "run-s prep build:*",
"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",
"gulp": "4.0.2",
"gulp-real-favicon": "0.3.2",
"gulp-rename": "2.0.0",
"through2": "4.0.2"
"copy-webpack-plugin": "10.2.0",
"del-cli": "4.0.1",
"favicons-webpack-plugin": "5.0.2",
"js-yaml": "4.1.0",
"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"
}
}

0
src/dummy.js Normal file
View File

44
src/static/brand.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 2.2 KiB

View File

Before

Width:  |  Height:  |  Size: 2.2 KiB

After

Width:  |  Height:  |  Size: 2.2 KiB

56
webpack.config.js Normal file
View File

@ -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
}
}
})
]
}