Merge pull request 'develop' (#115) from develop into main

Reviewed-on: #115

.eleventy.js

@@ -0,0 +1,45 @@
+const pluginRev = require("eleventy-plugin-rev");
+const eleventySass = require("eleventy-sass");
+const tinyHTML = require('@sardine/eleventy-plugin-tinyhtml');
+
+module.exports = function (eleventyConfig) {
+    eleventyConfig.addPlugin(pluginRev);
+    eleventyConfig.addPlugin(tinyHTML);
+    eleventyConfig.addPlugin(eleventySass, {
+        sass: {
+            loadPaths: ["node_modules"],
+            style: "compressed",
+            sourceMap: false,
+        },
+        compileOptions: {
+            permalink: function (contents, inputPath) {
+                return (data) => {
+                    return data.page.filePathStem.replace(/^\/scss\//, "/css/") + ".css";
+                };
+            }
+        },
+        rev: true
+    });
+
+    eleventyConfig.setUseGitIgnore(false);
+    eleventyConfig.addPassthroughCopy({
+        "src/img": "img",
+        "src/favicon.*": "",
+        "node_modules/@fortawesome/fontawesome-free/webfonts": "webfonts",
+    });
+
+    return {
+        // Pre-process *.html files with: (default: `liquid`)
+        htmlTemplateEngine: "njk",
+        // Opt-out of pre-processing global data JSON files: (default: `liquid`)
+        dataTemplateEngine: "njk",
+
+        dir: {
+            input: "src",
+            // includes: "_includes",
+            // layouts: "_includes/layouts",
+            data: "_data",
+            output: `dist`
+        }
+    };
+};

gulpfile.js

@@ -1,185 +0,0 @@
-/**
- * Settings
- * Turn on/off build features
- */
-var settings = {
-    clean: true,
-    styles: true,
-    copy: true,
-    reload: true
-};
-
-
-/**
- * Paths to project folders
- */
-var paths = {
-    input: 'src/',
-    output: 'dist/',
-    styles: {
-        input: 'src/scss/*.scss',
-        output: 'dist/css/'
-    },
-    copy: {
-        input: [
-            'src/*.html',
-//            'src/.htaccess',
-            'src/{img,font}/**/*',
-            'node_modules/@fortawesome/fontawesome-free/*fonts/**/*'
-        ],
-        output: 'dist/'
-    },
-    reload: './dist/'
-};
-
-
-/**
- * Template for banner to add to file headers
- */
-
-var banner = {
-    main:
-        '/*!' +
-        ' <%= package.name %> v<%= package.version %>' +
-        ' | (c) ' + new Date().getFullYear() + ' <%= package.author.name %>' +
-        ' | <%= package.license %> License' +
-        ' | <%= package.repository.url %>' +
-        ' */\n'
-};
-
-
-/**
- * Gulp Packages
- */
-// General
-var {src, dest, watch, series, parallel} = require('gulp');
-var del = require('del');
-var rename = require('gulp-rename');
-var header = require('gulp-header');
-var package = require('./package.json');
-
-// Styles
-var sass = require('gulp-sass')(require('sass'));
-var postcss = require('gulp-postcss');
-var prefix = require('autoprefixer');
-var minify = require('cssnano');
-var tildeImporter = require('node-sass-tilde-importer');
-
-// BrowserSync
-var browserSync = require('browser-sync');
-
-
-/**
- * Gulp Tasks
- */
-// Remove pre-existing content from output folders
-var cleanDist = function (done) {
-
-    // Make sure this feature is activated before running
-    if (!settings.clean) return done();
-
-    // Clean the dist folder
-    del.sync([
-        paths.output
-    ]);
-
-    // Signal completion
-    return done();
-
-};
-
-// Process, and minify Sass files
-var buildStyles = function (done) {
-    // Make sure this feature is activated before running
-    if (!settings.styles) return done();
-
-    // Run tasks on all Sass files
-    return src(paths.styles.input)
-        .pipe(sass({
-            importer: tildeImporter,
-            outputStyle: 'expanded',
-            sourceComments: true
-        }))
-        .pipe(postcss([
-            prefix({
-                cascade: true,
-                remove: true
-            })
-        ]))
-        .pipe(header(banner.main, {package: package}))
-        .pipe(dest(paths.styles.output))
-        .pipe(rename({suffix: '.min'}))
-        .pipe(postcss([
-            minify({
-                discardComments: {
-                    removeAll: true
-                }
-            })
-        ]))
-        .pipe(dest(paths.styles.output));
-
-};
-
-// Copy static files into output folder
-var copyFiles = function (done) {
-
-    // Make sure this feature is activated before running
-    if (!settings.copy) return done();
-
-    // Copy static files
-    return src(paths.copy.input)
-        .pipe(dest(paths.copy.output));
-
-};
-
-// Watch for changes to the src directory
-var startServer = function (done) {
-    // Make sure this feature is activated before running
-    if (!settings.reload) return done();
-
-    // Initialize BrowserSync
-    browserSync.init({
-        server: {
-            baseDir: paths.reload
-        }
-    });
-
-    // Signal completion
-    done();
-
-};
-
-// Reload the browser when files change
-var reloadBrowser = function (done) {
-    if (!settings.reload) return done();
-    browserSync.reload();
-    done();
-};
-
-// Watch for changes
-var watchSource = function (done) {
-    watch(paths.input, series(exports.default, reloadBrowser));
-    done();
-};
-
-
-/**
- * Export Tasks
- */
-// Default task
-// gulp
-exports.default = series(
-    cleanDist,
-    parallel(
-        buildStyles,
-        copyFiles
-    )
-);
-
-// Watch and reload
-// gulp watch
-exports.watch = series(
-    exports.default,
-    startServer,
-    watchSource
-);

package.json

@@ -3,8 +3,9 @@
   "version": "1.0.0",
   "description": "website for sp-magic.de",
   "scripts": {
-    "start": "gulp watch",
+    "minify-css": "uncss -n -H dist/ -o dist/css/main-*.css dist/index.html",
-    "build": "gulp"
+    "build": "eleventy && npm run minify-css",
+    "start": "eleventy --serve --watch"
   },
   "author": "samuel-p",
   "repository": {
@@ -15,17 +16,18 @@
     "browser-sync": "^3.0.2"
   },
   "devDependencies": {
-    "autoprefixer": "10.4.19",
+    "@11ty/eleventy": "^2.0.1",
-    "cssnano": "6.1.2",
+    "@node-minify/core": "^8.0.6",
-    "del": "6.1.1",
+    "@node-minify/crass": "^8.0.6",
-    "gulp": "5.0.0",
+    "@node-minify/html-minifier": "^8.0.6",
-    "gulp-header": "2.0.9",
+    "@sardine/eleventy-plugin-tinyhtml": "^0.2.0",
-    "gulp-postcss": "10.0.0",
+    "eleventy-plugin-rev": "^2.0.0",
-    "gulp-rename": "2.0.0",
+    "eleventy-sass": "^2.2.4",
-    "gulp-sass": "5.1.0",
+    "glob": "^10.3.12",
-    "node-sass-tilde-importer": "^1.0.2",
+    "minify": "^11.1.1",
     "postcss": "^8.4.38",
-    "sass": "^1.74.1"
+    "sass": "^1.72.0",
+    "uncss": "^0.17.3"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.15.4",

src/index.html

@@ -29,8 +29,9 @@
     <meta name="twitter:description" content="Samuel Philipp - Magician from Magdeburg">
     <meta name="twitter:image" content="https://sp-magic.de/img/sp-magic.jpg">
     <link rel="shortcut icon" href="img/samuel.png">
-    <link rel="stylesheet" href="css/main.min.css">
+    <link rel="stylesheet" href="{{ '/css/main.css' | rev }}">
-    <script async defer data-website-id="dfb1ca1d-dc41-488a-8a95-f0e036bd3490" data-domains="sp-magic.de" src="https://umami.sp-codes.de/umami.js"></script>
+    <script async defer data-website-id="dfb1ca1d-dc41-488a-8a95-f0e036bd3490" data-domains="sp-magic.de"
+            src="https://umami.sp-codes.de/umami.js"></script>
 </head>
 <body class="d-flex flex-column">
 <div class="container flex-column flex-grow p-3">
@@ -44,10 +45,10 @@
         <div class="col-lg-8 col-md-10 col-12">
             <h1 class="sp-codes">Willkommen bei sp-magic!</h1>
             <p class="lead text-center mb-2">
-                Schön dass du hergefunden hast. Mein Name ist Samuel Philipp und ich bin ein Zauberkünstler aus Magdeburg.
+                Schön, dass du hergefunden hast. Mein Name ist Samuel Philipp und ich bin ein Zauberkünstler aus
-                Bei meinen Auftritten präsentiere ich Tricks mit Spielkarten, Büchern, Nägeln, Feuer und vielen anderen
+                Magdeburg. Bei meinen Auftritten präsentiere ich Tricks mit Spielkarten, Büchern, Nägeln, Feuer und
-                Dingen. Auf dieser Seite findest du verschiedene Möglichkeiten mit mir in Kontakt zu treten.
+                vielen anderen Dingen. Auf dieser Seite findest du verschiedene Möglichkeiten mit mir in Kontakt zu
-                Ich freue mich auf deine Nachricht.
+                treten. Ich freue mich auf deine Nachricht.
             </p>
         </div>
     </div>
@@ -56,7 +57,7 @@
         <div class="m-2"><a href="mailto:mail@sp-magic.de"><span
                 class="fas fa-fw fa-4x fa-envelope"></span></a></div>
         <div class="m-2"><a href="https://matrix.to/#/@samuel-p:matrix.sp-codes.de">
-            <img class="matrix-icon" src="../img/matrix.png" alt=""></a></div>
+            <img class="matrix-icon" src="img/matrix.png" alt=""></a></div>
         <div class="m-2"><a rel="me" href="https://social.sp-codes.de/@samuel_p"><span
                 class="fab fa-fw fa-4x fa-mastodon"></span></a></div>
     </div>
@@ -82,6 +83,6 @@
                 class="fas fa-code mr-2"></span>Code</a></div>
         <div><a target="_blank" href="https://umami.sp-codes.de/share/eEm9eppL/sp-magic.de"><span
                 class="fas fa-chart-line mr-2"></span>Statistiken</a></div>
-</div>
+    </div>
 </body>
 </html>

src/scss/main.scss

@@ -1,13 +1,13 @@
-@import "~bootstrap/scss/bootstrap-grid";
+@import "bootstrap/scss/bootstrap-grid";
-@import "~bootstrap/scss/bootstrap-reboot";
+@import "bootstrap/scss/bootstrap-reboot";
-@import "~bootstrap/scss/utilities/align";
+@import "bootstrap/scss/utilities/align";
-@import "~bootstrap/scss/utilities/spacing";
+@import "bootstrap/scss/utilities/spacing";
-@import "~bootstrap/scss/utilities/display";
+@import "bootstrap/scss/utilities/display";
-@import "~bootstrap/scss/utilities/text";
+@import "bootstrap/scss/utilities/text";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome";
+@import "@fortawesome/fontawesome-free/scss/fontawesome";
-@import "~@fortawesome/fontawesome-free/scss/solid";
+@import "@fortawesome/fontawesome-free/scss/solid";
-@import "~@fortawesome/fontawesome-free/scss/brands";
+@import "@fortawesome/fontawesome-free/scss/brands";
-@import "~@fortawesome/fontawesome-free/scss/regular";
+@import "@fortawesome/fontawesome-free/scss/regular";
 
 body {
   background: url('../img/bg.png') no-repeat center center fixed;