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.

src/index.js

@@ -1,5 +1,4 @@
-import "bootstrap";
-import "./index.scss";
+import $ from "jquery";
 
 // Helpers
 
@@ -105,11 +104,7 @@ class Typer {
     }
 }
 
-// Application code
-function main() {
-    // Type the head line
+$(document).ready(() => {
     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 stylesheets
+  style.
+    .no-js .head-line .typed {
+        visibility: visible;
+    }
+    .head-line .typed {
+        visibility: hidden;
+    }
 
 block content
-  noscript
-    style.
-      .head-line .typed {
-        visibility: visible;
-      }
-
   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/variables";
-@import "~bootstrap/scss/mixins";
+@import "bootstrap/scss/_functions";
+@import "bootstrap/scss/_variables";
+@import "bootstrap/scss/_mixins";
 
 // Theme colors
 $green: #2aa889;
@@ -14,9 +14,14 @@ $colors: (
 );
 
 $theme-colors: (
-  "info": $cyan,
-  "success": $green,
-  "dark": $dark
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "success":    $green,
+    "info":       $cyan,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark
 );
 
 // Site colors
@@ -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('../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('../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.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('~/src/lib/fonts/nunito-v9-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
+  url('~/src/lib/fonts/nunito-v9-latin-italic.woff') format('woff'), /* Modern Browsers */
+  url('~/src/lib/fonts/nunito-v9-latin-italic.ttf') format('truetype'), /* Safari, Android, 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('../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('../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.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('~/src/lib/fonts/nunito-v9-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
+       url('~/src/lib/fonts/nunito-v9-latin-regular.woff') format('woff'), /* Modern Browsers */
+       url('~/src/lib/fonts/nunito-v9-latin-regular.ttf') format('truetype'), /* Safari, Android, 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";
-@import "~@fortawesome/fontawesome-free/scss/fontawesome.scss";
-@import "~@fortawesome/fontawesome-free/scss/solid.scss";
-@import "~bootstrap/scss/bootstrap";
+// $fa-font-path: "@fortawesome/fontawesome-free/webfonts";
+// @import "@fortawesome/fontawesome-free/scss/fontawesome.scss";
+// @import "@fortawesome/fontawesome-free/scss/solid.scss";
+
+@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;
-}