Migrate to default template

.gitattributes

@@ -0,0 +1 @@
+package-lock.json binary

Gruntfile.js

@@ -0,0 +1,88 @@
+const path = require("path");
+
+module.exports = grunt => {
+    grunt.initConfig({
+        pkg: grunt.file.readJSON("package.json"),
+        clean: {
+            default: ["dist/"],
+        },
+        exec: {
+            eleventy: "npx @11ty/eleventy",
+        },
+        replace: {
+            dev: {
+                src: ["./dist/*.html", "./dist/*.js"],
+                replacements: [
+                    {
+                        from: "%%VERSION_NUMBER%%",
+                        to: "<%= pkg.version %>+" + new Date().toISOString().slice(0, 19).replace(/[-:T]/g, "")
+                    }
+                ],
+                overwrite: true
+            },
+            deploy: {
+                src: ["./dist/*.html", "./dist/*.js"],
+                replacements: [
+                    {
+                        from: "%%VERSION_NUMBER%%",
+                        to: "<%= pkg.version %>"
+                    }
+                ],
+                overwrite: true
+            },
+        },
+        webpack: {
+            options: {
+                entry: "./src/main/js/index.js",
+                module: {
+                    rules: [
+                        {
+                            test: /\.js$/,
+                            exclude: /node_modules/,
+                        },
+                    ],
+                },
+                resolve: {
+                    extensions: [".js"],
+                },
+                output: {
+                    filename: "bundle.js",
+                    path: path.resolve(__dirname, "dist/"),
+                },
+            },
+            dev: {
+                mode: "development",
+                devtool: "inline-source-map",
+            },
+            deploy: {
+                mode: "production",
+            },
+        },
+    });
+
+    grunt.loadNpmTasks("grunt-contrib-clean");
+    grunt.loadNpmTasks("grunt-exec");
+    grunt.loadNpmTasks("grunt-text-replace");
+    grunt.loadNpmTasks("grunt-webpack");
+
+    grunt.registerTask("dev", [
+        // Pre
+        "clean",
+        // Generate site
+        "exec:eleventy",
+        // Compile JS
+        "webpack:dev",
+        "replace:dev",
+    ]);
+    grunt.registerTask("deploy", [
+        // Pre
+        "clean",
+        // Generate site
+        "exec:eleventy",
+        // Compile JS
+        "webpack:deploy",
+        "replace:deploy",
+    ]);
+
+    grunt.registerTask("default", ["dev"]);
+};

README.md

@@ -0,0 +1,23 @@
+# Blog
+My personal blog.
+
+## Development
+### Requirements
+* [npm](https://www.npmjs.com/)
+
+### Setting up
+```shell script
+# Install dependencies (only needed once)
+$> npm ci
+```
+
+### Building
+```shell script
+# Build the blog in `dist/` for development
+$> npm run dev
+# Build the blog in `dist/` for deployment
+$> npm run deploy
+```
+
+You may need to change the `pathprefix` option of Eleventy when using WebStorm so that the root of the blog is changed
+to `blog/dist/` instead of `blog/`.

package.json

@@ -10,11 +10,23 @@
     },
     "private": true,
     "scripts": {
-        "build": "npx @11ty/eleventy",
-        "build:server": "npx @11ty/eleventy --serve"
+        "clean": "grunt clean",
+        "dev": "grunt dev",
+        "dev:server": "grunt dev:server",
+        "deploy": "grunt deploy"
     },
     "dependencies": {
-        "@fwdekker/template": "^0.0.13",
-        "@11ty/eleventy": "^0.10.0"
+        "@fwdekker/template": "^0.0.13"
+    },
+    "devDependencies": {
+        "@11ty/eleventy": "^0.10.0",
+        "grunt": "^1.1.0",
+        "grunt-cli": "^1.3.2",
+        "grunt-contrib-clean": "^2.0.0",
+        "grunt-exec": "^3.0.0",
+        "grunt-text-replace": "^0.4.0",
+        "grunt-webpack": "^3.1.3",
+        "webpack": "^4.42.1",
+        "webpack-cli": "^3.3.11"
     }
 }

src/main/_data/site.json

@@ -1,5 +1,5 @@
 {
-    "url": "https://fwdekker.com/blog/",
+    "baseurl": "/blog/",
     "title": "FWDekker's blog",
     "description": "Felix W. Dekker's blog",
     "author": "Felix W. Dekker",

src/main/_includes/default.njk

@@ -10,46 +10,44 @@
 
     <title>{% if page.title %}{{ page.title }}{% else %}Blog{% endif %} | FWDekker</title>
 
-    <link rel="shortcut icon" type="image/png" href="https://fwdekker.com/favicon.png"/>
+    <link rel="shortcut icon" type="image/png" href="https://fwdekker.com/favicon.png" />
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300italic,700,700italic"
           crossorigin="anonymous" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
-          integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.3.0/milligram.min.css"
-          integrity="sha256-Ro/wP8uUi8LR71kwIdilf78atpu8bTEwrK5ZotZo+Zc=" crossorigin="anonymous" />
-    <link rel="stylesheet" href="https://static.fwdekker.com/css/milligram-common.css" crossorigin="anonymous" />
     <style>
         p {
-            text-align: justify;
-            text-justify: inter-word;
+            text-align: justify !important;
+            text-justify: inter-word !important;
         }
+
         ol {
-            list-style: decimal outside;
+            list-style: decimal outside !important;
         }
     </style>
 </head>
 <body>
-<main class="wrapper">
-    <!-- Header -->
-    <header class="header">
+<noscript>
+    <span style="color: red; font-weight: bold;">
+        This website does not function if JavaScript is disabled.
+        Please check the <a href="https://www.enable-javascript.com/">
+        instructions on how to enable JavaScript in your web browser</a>.
+    </span>
+</noscript>
+<main style="display: none;">
+    <div id="nav"></div>
+    <div id="contents">
+        <div id="header"></div>
+
+
+        <!-- Contents -->
         <section class="container">
-            {% if title %}
-                <h1><a href="{{ '/' | url }}">{{ site.title }}</a></h1>
-            {% else %}
-                <h1>{{ site.title }}</h1>
-            {% endif %}
-
-            {% if title %}
-                <h2 style="display: inline;">{{ title }}</h2>&nbsp;
-                {% if date %}<u>{{ date | isoDate }}</u>{% endif %}
-            {% endif %}
+            {{ content | safe }}
         </section>
-    </header>
-
-    <!-- Contents -->
-    <section class="container">
-        {{ content | safe }}
-    </section>
+    </div>
+    <div id="footer"></div>
 </main>
+
+
+<!-- Scripts -->
+<script src="{{ '/bundle.js' | url }}"></script>
 </body>
 </html>

src/main/_includes/post.njk

@@ -4,6 +4,15 @@ layout: default
 
 <div class="row">
     <div class="column">
+        <a href="{{ '/' | url }}">&larr; home</a><br />
+
+        <h2 style="display: inline;">{{ title }}</h2>&nbsp;
+        {% if date %}<u>{{ date | isoDate }}</u>{% endif %}
+
         {{ content | safe }}
+
+        <hr />
+
+        <a href="{{ '/' | url }}">&larr; home</a><br />
     </div>
 </div>

src/main/js/index.js

@@ -0,0 +1,17 @@
+import {$, doAfterLoad, footer, header, nav} from "@fwdekker/template";
+
+
+doAfterLoad(() => {
+    $("#nav").appendChild(nav());
+    $("#header").appendChild(header({title: ""}));
+    $("#footer").appendChild(footer({
+        author: "Felix W. Dekker",
+        authorURL: "https://fwdekker.com/",
+        license: "MIT License",
+        licenseURL: "https://git.fwdekker.com/FWDekker/blog/src/branch/master/LICENSE",
+        vcs: "git",
+        vcsURL: "https://git.fwdekker.com/FWDekker/blog/",
+        version: "v%%VERSION_NUMBER%%"
+    }));
+    $("main").style.display = null;
+});