Introduce new parcel-based world order

Webpack was entirely and utterly unmaintainable. This commit throws it
out of the window into the gutter where it belongs, and rewrites the
entire repository so that it may work with parcel instead.

.dir-locals.el

@@ -0,0 +1,11 @@
+;;; Directory Local Variables
+;;; For more information see (info "(emacs) Directory Variables")
+
+((json-mode
+  (js-indent-level . 2))
+ (pug-mode
+  (tab-width . 2))
+ (scss-mode
+  (css-indent-offset . 2)))
+
+

.gitignore

@@ -1,2 +1,3 @@
-/dist/*
 /node_modules/
+/.parcel-cache/
+/dist/

.parcelrc

@@ -0,0 +1,6 @@
+{
+  "extends": "@parcel/config-default",
+  "transforms": {
+    "*.mp3": [ "@parcel/transformer-raw" ]
+  }
+}

package.json

@@ -2,36 +2,15 @@
   "name": "tlaternet",
   "version": "1.0.0",
   "description": "tlaternet web interface",
-  "main": "index.js",
   "author": "Tristan Maat <tm@tlater.net>",
   "license": "MIT",
   "private": true,
   "devDependencies": {
-    "@babel/core": "^7.8.4",
     "@babel/preset-env": "^7.8.4",
-    "babel-loader": "^8.0.5",
+    "jstransformer-markdown-it": "^2.1.0",
-    "clean-webpack-plugin": "^1.0.1",
+    "parcel": "^2.0.0-alpha.3.2",
-    "css-loader": "^2.1.0",
+    "pug": "^2.0.4",
-    "exports-loader": "^0.7.0",
+    "sass": "^1.25.0"
-    "favicons-webpack-plugin": "^3.0.1",
-    "file-loader": "^3.0.1",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^4.0.0-beta.11",
-    "jsdoc": "^3.5.5",
-    "jstransformer-markdown-it": "^2.0.0",
-    "mini-css-extract-plugin": "^0.5.0",
-    "node-sass": "^4.13.1",
-    "optimize-css-assets-webpack-plugin": "^5.0.1",
-    "postcss-loader": "^3.0.0",
-    "precss": "^4.0.0",
-    "pug": "^2.0.3",
-    "pug-loader": "^2.4.0",
-    "sass-loader": "^7.1.0",
-    "style-loader": "^0.23.1",
-    "terser-webpack-plugin": "^2.3.4",
-    "webpack": "^4.41.5",
-    "webpack-cli": "^3.2.1",
-    "webpack-merge": "^4.1.2"
   },
   "dependencies": {
     "@fortawesome/fontawesome-free": "^5.12.1",
@@ -41,7 +20,21 @@
     "three": "^0.101.1"
   },
   "scripts": {
-    "dev": "webpack --config webpack.config.js",
+    "build": "parcel build --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)",
-    "build": "webpack --config webpack.prod.js"
+    "serve": "parcel serve --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)",
+    "watch": "parcel watch --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)",
+    "build-dist": "parcel build --no-cache --no-autoinstall $(find src -path src/lib -prune -o -name '*.pug' -print)"
+  },
+  "targets": {
+    "browser": {
+      "engines": {
+        "browsers": [
+          ">1%",
+          "not dead"
+        ]
+      },
+      "distDir": "dist",
+      "publicUrl": "https://tlater.net"
+    }
   }
 }

src/index.js

@@ -1,5 +1,4 @@
-import "bootstrap";
+import $ from "jquery";
-import "./index.scss";
 
 // Helpers
 
@@ -105,11 +104,7 @@ class Typer {
     }
 }
 
-// Application code
+$(document).ready(() => {
-function main() {
-    // Type the head line
     let typer = new Typer($(".head-line .typed").get(0), 500, 3000);
     typer.type();
-}
+})
-
-$(document).ready(main);

src/index.pug

@@ -1,12 +1,15 @@
-extends ../lib/pug/base
+extends ./lib/pug/base
 
-block content
+block stylesheets
-  noscript
   style.
-      .head-line .typed {
+    .no-js .head-line .typed {
         visibility: visible;
     }
+    .head-line .typed {
+        visibility: hidden;
+    }
 
+block content
   h1.head-line
     | $ 
     span.typed Welcome to tlater.net!
@@ -67,4 +70,7 @@ block content
 
         You may find the following interesting though:
 
-        - A [little web app](music_sample) showing off what Webgl can do in combination with the JavaScript Audio interface.
+        - A [little web app](./music_sample.pug) showing off what Webgl can do in combination with the JavaScript Audio interface.
+
+block footer
+  script(type="text/javascript" src="./index.js" defer)

src/index/index.scss

@@ -1,6 +0,0 @@
-@import "../lib/scss/main";
-@import "~bootstrap/scss/bootstrap";
-
-.head-line .typed {
-  visibility: hidden;
-}

src/lib/js/main.js

@@ -0,0 +1,3 @@
+import $ from "jquery";
+
+$(document).ready($("html").removeClass("no-js"));

src/lib/pug/base.pug

@@ -1,11 +1,13 @@
 doctype html
-html(lang="en")
+html.no-js(lang="en")
   head
     meta(charset="utf-8")
     meta(name="description", content="tlater.net web server")
-    meta(name="author", content="Tristan Daniel Maat")
+    meta(name="author", content="Tristan Daniël Maat")
     meta(name="viewport", content="width=device-width, initial-scale=1")
-    title= htmlWebpackPlugin.options.title
+    link(rel="stylesheet", href="~/src/lib/scss/main.scss")
+    block stylesheets
+    title="tlater.net"
   body
     block navigation
       include ./navigation
@@ -14,4 +16,7 @@ html(lang="en")
       include ./message-flash.html
       block content
 
+    script(type="text/javascript", src="~/node_modules/jquery/dist/jquery.min.js" defer)
+    script(type="text/javascript", src="~/node_modules/bootstrap/dist/js/bootstrap.min.js" defer)
+    script(type="text/javascript", src="~/src/lib/js/main.js" defer)
     block footer

src/lib/pug/navigation.pug

@@ -13,5 +13,5 @@ nav.navbar.navbar-expand-lg.navbar-dark.bg-dark
 
     #navbar.navbar-collapse.collapse
       ul.navbar-nav.mr-auto
-        li.nav-item: a.nav-link(href="mail") E-Mail
+        li.nav-item: a.nav-link(href="~/src/mail.pug") E-Mail
         li.nav-item: a.nav-link(href="https://www.github.com/TLATER") GitHub

src/lib/scss/_custom-bootstrap.scss

@@ -1,6 +1,6 @@
-@import "~bootstrap/scss/functions";
+@import "bootstrap/scss/_functions";
-@import "~bootstrap/scss/variables";
+@import "bootstrap/scss/_variables";
-@import "~bootstrap/scss/mixins";
+@import "bootstrap/scss/_mixins";
 
 // Theme colors
 $green: #2aa889;
@@ -14,8 +14,13 @@ $colors: (
 );
 
 $theme-colors: (
-  "info": $cyan,
+    "primary":    $primary,
+    "secondary":  $secondary,
     "success":    $green,
+    "info":       $cyan,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
     "dark":       $dark
 );
 
@@ -56,3 +61,39 @@ $navbar-dark-hover-color: rgba($white, 90);
     color: $white !important;
   }
 }
+
+// Optional
+@import "bootstrap/scss/_root";
+@import "bootstrap/scss/_reboot";
+@import "bootstrap/scss/_type";
+@import "bootstrap/scss/_images";
+@import "bootstrap/scss/_code";
+@import "bootstrap/scss/_grid";
+@import "bootstrap/scss/_tables";
+@import "bootstrap/scss/_forms";
+@import "bootstrap/scss/_buttons";
+@import "bootstrap/scss/_transitions";
+@import "bootstrap/scss/_dropdown";
+@import "bootstrap/scss/_button-group";
+@import "bootstrap/scss/_input-group";
+@import "bootstrap/scss/_custom-forms";
+@import "bootstrap/scss/_nav";
+@import "bootstrap/scss/_navbar";
+@import "bootstrap/scss/_card";
+@import "bootstrap/scss/_breadcrumb";
+@import "bootstrap/scss/_pagination";
+@import "bootstrap/scss/_badge";
+@import "bootstrap/scss/_jumbotron";
+@import "bootstrap/scss/_alert";
+@import "bootstrap/scss/_progress";
+@import "bootstrap/scss/_media";
+@import "bootstrap/scss/_list-group";
+@import "bootstrap/scss/_close";
+@import "bootstrap/scss/_toasts";
+@import "bootstrap/scss/_modal";
+@import "bootstrap/scss/_tooltip";
+@import "bootstrap/scss/_popover";
+@import "bootstrap/scss/_carousel";
+@import "bootstrap/scss/_spinners";
+@import "bootstrap/scss/_utilities";
+@import "bootstrap/scss/_print";

src/lib/scss/_fonts.scss

@@ -3,13 +3,13 @@
   font-family: 'Nunito';
   font-style: italic;
   font-weight: 400;
-  src: url('../lib/fonts/nunito-v9-latin-italic.eot'); /* IE9 Compat Modes */
+  src: url('~/src/lib/fonts/nunito-v9-latin-italic.eot'); /* IE9 Compat Modes */
   src: local('Nunito Italic'), local('Nunito-Italic'),
-  url('../lib/fonts/nunito-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('~/src/lib/fonts/nunito-v9-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('../lib/fonts/nunito-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
+  url('~/src/lib/fonts/nunito-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
-  url('../lib/fonts/nunito-v9-latin-italic.woff') format('woff'), /* Modern Browsers */
+  url('~/src/lib/fonts/nunito-v9-latin-italic.woff') format('woff'), /* Modern Browsers */
-  url('../lib/fonts/nunito-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
+  url('~/src/lib/fonts/nunito-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
-  url('../lib/fonts/nunito-v9-latin-italic.svg#Nunito') format('svg'); /* Legacy iOS */
+  url('~/src/lib/fonts/nunito-v9-latin-italic.svg#Nunito') format('svg'); /* Legacy iOS */
 }
 
 /* nunito-regular - latin */
@@ -17,11 +17,11 @@
   font-family: 'Nunito';
   font-style: normal;
   font-weight: 400;
-  src: url('../lib/fonts/nunito-v9-latin-regular.eot'); /* IE9 Compat Modes */
+  src: url('~/src/lib/fonts/nunito-v9-latin-regular.eot'); /* IE9 Compat Modes */
   src: local('Nunito Regular'), local('Nunito-Regular'),
-       url('../lib/fonts/nunito-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('~/src/lib/fonts/nunito-v9-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
-       url('../lib/fonts/nunito-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('~/src/lib/fonts/nunito-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
-       url('../lib/fonts/nunito-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('~/src/lib/fonts/nunito-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
-       url('../lib/fonts/nunito-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
+       url('~/src/lib/fonts/nunito-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
-       url('../lib/fonts/nunito-v9-latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
+       url('~/src/lib/fonts/nunito-v9-latin-regular.svg#Nunito') format('svg'); /* Legacy iOS */
 }

src/lib/scss/main.scss

@@ -1,5 +1,3 @@
 @import 'custom-bootstrap';
-@import 'fonts';
+/* @import 'fonts'; */
 @import 'headings';
-
-$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";

src/mail.pug

@@ -1,4 +1,4 @@
-extends ../lib/pug/base
+extends ./lib/pug/base
 
 block content
   h1.head-line Contact me

src/mail/mail.js

@@ -1,2 +0,0 @@
-import "bootstrap";
-import "./mail.scss";

src/mail/mail.scss

@@ -1,2 +0,0 @@
-@import "../lib/scss/main";
-@import "~bootstrap/scss/bootstrap";

src/music/music.js

@@ -1,7 +1,4 @@
-import "bootstrap";
-import "./music.scss";
-
 import music from "./Mseq_-_Journey.mp3";
-import Player from "./player/index.js";
+import Player from "./player/player.js";
 
 window.player = new Player(music);

src/music/music.scss

@@ -1,7 +1,8 @@
-@import "../lib/scss/main";
+// $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
+// @import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "~@fortawesome/fontawesome-free/scss/solid.scss";
+// @import "@fortawesome/fontawesome-free/scss/solid.scss";
-@import "~bootstrap/scss/bootstrap";
+
+@import "~/src/lib/scss/main";
 
 #playerUI {
   width: 100%;

src/music/player/controls.js

@@ -1,3 +1,5 @@
+import $ from "jquery";
+
 /**
  * _Text()
  *

src/music/player/display.js

@@ -1,3 +1,4 @@
+import $ from "jquery";
 import Spectrum from "./backgrounds/Spectrum.js";
 
 let backgrounds = {

src/music/player/player.js

@@ -1,3 +1,4 @@
+import $ from "jquery";
 import AudioManager from "./audio_manager";
 import Controls from "./controls";
 import Display from "./display";

src/music_sample.pug

@@ -1,4 +1,7 @@
-extends ../lib/pug/base
+extends ./lib/pug/base
+
+block stylesheets
+  link(rel="stylesheet", href="music/music.scss")
 
 block footer
   #playerUI.container-fluid
@@ -8,3 +11,4 @@ block footer
         .row
           span#playerButton.col-1.playerControlsContent.fa.fa-fw.fa-spin.fa-spinner
           #playerText.col-11.playerControlsContent Some text for now
+  script(type="text/javascript" src="./music/music.js")

src/pages/index.json

@@ -1,7 +0,0 @@
-{
-    "hash": true,
-    "title": "tlater.net",
-    "filename": "../index.html.hbs",
-    "template": "./src/index/index.pug",
-    "chunks": ["index"]
-}

src/pages/mail.json

@@ -1,7 +0,0 @@
-{
-    "hash": true,
-    "title": "tlater.net contact",
-    "filename": "../mail.html.hbs",
-    "template": "./src/mail/mail.pug",
-    "chunks": ["mail"]
-}

src/pages/music.json

@@ -1,7 +0,0 @@
-{
-    "hash": true,
-    "title": "tlater.net music",
-    "filename": "../music.html.hbs",
-    "template": "./src/music/music.pug",
-    "chunks": ["music"]
-}

src/pages/startpage.json

@@ -1,7 +0,0 @@
-{
-    "hash": true,
-    "title": "tlater.net startpage",
-    "filename": "../startpage.html.hbs",
-    "template": "./src/startpage/startpage.pug",
-    "chunks": ["startpage"]
-}

src/startpage/startpage.js

@@ -1,9 +0,0 @@
-import "bootstrap";
-import "./startpage.scss";
-
-function print_time_recursively (element) {
-    element.html(new Date().toLocaleString());
-    setTimeout(() => print_time_recursively(element), 1000);
-}
-
-$(() => print_time_recursively($("#clock h1")));

src/startpage/startpage.pug

@@ -1,9 +0,0 @@
-extends ../lib/pug/base
-
-block navigation
-
-block content
-  .container
-    .row
-      #clock.col-md-12
-        h1

src/startpage/startpage.scss

@@ -1,7 +0,0 @@
-@import "../lib/scss/main";
-@import "~bootstrap/scss/bootstrap";
-
-#clock {
-  text-align: center;
-  padding-top: 20px;
-}

webpack.common.js

@@ -1,107 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const webpack = require("webpack");
-const HtmlWebpackPlugin = require("html-webpack-plugin");
-const CleanWebpackPlugin = require("clean-webpack-plugin");
-const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const FaviconsWebpackPlugin = require("favicons-webpack-plugin");
-
-const PAGE_DIR = path.resolve(__dirname, "src", "pages");
-
-// Collect page configurations
-const page_files = fs.readdirSync(PAGE_DIR);
-
-const pages = page_files.map(page => JSON.parse(fs.readFileSync(
-    path.resolve(PAGE_DIR, page),
-    {encoding: "UTF-8"}
-)));
-
-module.exports = {
-    entry: {
-        index: "./src/index/index.js",
-        mail: "./src/mail/mail.js",
-        startpage: "./src/startpage/startpage.js",
-        music: "./src/music/music.js"
-    },
-    output: {
-        filename: "[name].bundle.js",
-        path: path.resolve(__dirname, "dist", "static")
-    },
-    plugins: [
-        new CleanWebpackPlugin("dist"),
-        new webpack.ProvidePlugin({
-            $: "jquery",
-            jQuery: "jquery"
-        }),
-        new MiniCssExtractPlugin(),
-        new FaviconsWebpackPlugin({
-            logo: path.resolve(__dirname, "src", "lib", "favicon.png"),
-            prefix: "../static/",
-            title: "tlater.net"
-        })
-    ].concat(pages.map(page => new HtmlWebpackPlugin(page))),
-    module: {
-        rules: [
-            {
-                test: /\.js$/,
-                exclude: /{node_modules}/,
-                use: {
-                    loader: "babel-loader",
-                    options: {
-                        presets: ["@babel/preset-env"]
-                    }
-                }
-            },
-            {
-                test: /.scss$/,
-                use: [{
-                    loader: MiniCssExtractPlugin.loader,
-                    options: {
-                        output: {
-                            path: path.resolve(__dirname, "dist", "static")
-                        }
-                    }
-                }, {
-                    loader: "css-loader"
-                }, {
-                    loader: "postcss-loader",
-                    options: {
-                        plugins: () => [
-                            require("precss"),
-                            require("autoprefixer")
-                        ]
-                    }
-                }, {
-                    loader: "sass-loader"
-                }]
-            },
-            {
-                test: /.html$/,
-                use: [{
-                    loader: "html-loader"
-                }]
-            },
-            {
-                test: /.pug$/,
-                use: [{
-                    loader: "pug-loader"
-                }]
-            },
-            {
-                test: /\.mp3$/,
-                use: [{
-                    loader: "file-loader",
-                    options: {
-                        publicPath: "static/"
-                    }
-                }]
-            },
-            {
-                test: /\.(eot|svg|ttf|woff|woff2)$/,
-                use: [{
-                    loader: "file-loader"
-                }]
-            }
-        ]
-    }
-};

webpack.config.js

@@ -1,7 +0,0 @@
-const merge = require("webpack-merge");
-const common = require("./webpack.common.js");
-
-module.exports = merge(common, {
-    "mode": "development",
-    devtool: "cheap-eval-source-map"
-});

webpack.prod.js

@@ -1,19 +0,0 @@
-const merge = require("webpack-merge");
-const common = require("./webpack.common.js");
-const TerserPlugin = require("terser-webpack-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
-
-module.exports = merge(common, {
-    optimization: {
-        minimizer: [
-            new TerserPlugin({
-                cache: true,
-                parallel: true,
-                sourceMap: true
-            }),
-            new OptimizeCSSAssetsPlugin({})
-        ]
-    },
-    devtool: "source-map",
-    mode: "production"
-});