Rewrite frontend with TypeScript/CSS and no NPM

* Changed fonts to builtin fonts
* Changed Disqus to load on-demand
* Changed syntax highlighting to load on-demand

.vscode/tasks.json

@@ -0,0 +1,23 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558 
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Build frontend",
+      "type": "shell",
+      "command": "./build.sh",
+      "presentation": {
+        "reveal": "always"
+      },
+      "options": {
+        "cwd": "./lib/web/frontend",
+        "env": {}
+      },
+      "group": {
+        "kind": "build",
+        "isDefault": true
+      }
+    }
+  ]
+}

lib/mix/tasks/mebe.build.frontend.ex

@@ -1,18 +1,15 @@
 defmodule Mix.Tasks.Mebe.Build.Frontend do
-  use MBU.BuildTask, auto_path: false, create_out_path: false
+  use MBU.BuildTask, auto_path: false, create_out_path: true
   import MBU.TaskUtils
 
   @shortdoc "Build Mebe2 frontend"
 
   @deps ["mebe.clean"]
 
+  def out_path(), do: File.cwd!() |> Path.join("priv") |> Path.join("static")
+
   task _ do
     frontend_path = Path.join([File.cwd!(), "lib", "web", "frontend"])
-
-    [
-      exec(System.find_executable("bsb"), [], name: "ocaml", cd: frontend_path),
-      exec(System.find_executable("node"), ["fuse", "build"], name: "fusebox", cd: frontend_path)
-    ]
-    |> listen()
+    exec(System.find_executable("bash"), ["build.sh"], cd: frontend_path) |> listen()
   end
 end

lib/mix/tasks/mebe.serve.ex

@@ -4,14 +4,20 @@ defmodule Mix.Tasks.Mebe.Serve do
 
   @shortdoc "Start Mebe2 server and frontend development tools"
 
-  @deps ["mebe.clean"]
+  @deps ["mebe.build.frontend"]
 
   task _ do
-    frontend_path = Path.join([File.cwd!(), "lib", "web", "frontend"])
-
     [
-      exec(System.find_executable("bsb"), ["-w"], name: "ocaml", cd: frontend_path),
-      exec(System.find_executable("node"), ["fuse"], name: "fusebox", cd: frontend_path),
+      watch(
+        "Frontend TS",
+        Path.join([File.cwd!(), "lib", "web", "frontend", "src"]),
+        Mix.Tasks.Mebe.Build.Frontend
+      ),
+      watch(
+        "Frontend assets",
+        Path.join([File.cwd!(), "lib", "web", "frontend", "assets"]),
+        Mix.Tasks.Mebe.Build.Frontend
+      ),
       exec(System.find_executable("mix"), ["run", "--no-halt"])
     ]
     |> listen(watch: true)

lib/web/frontend/.gitignore

@@ -1,29 +1 @@
-*.exe
-*.obj
-*.out
-*.compile
-*.native
-*.byte
-*.cmo
-*.annot
-*.cmi
-*.cmx
-*.cmt
-*.cmti
-*.cma
-*.a
-*.cmxa
-*.obj
-*~
-*.annot
-*.cmj
-*.bak
-lib/bs
-*.mlast
-*.mliast
-.vscode
-.fusebox
-.merlin
-.bsb.lock
-*.bs.js
-/node_modules
+build

lib/web/frontend/README.md

@@ -1,16 +0,0 @@
-
-
-# Build
-```
-npm run build
-```
-
-# Watch
-
-```
-npm run watch
-```
-
-
-# Editor
-If you use `vscode`, Press `Windows + Shift + B` it will build automatically

lib/web/frontend/assets/style/archives.css

@@ -0,0 +1,35 @@
+#archives-heading {
+  margin-top: 0;
+}
+
+#archives a {
+  color: var(--accent-link);
+}
+
+#archives ul {
+  list-style-position: inside;
+}
+
+#archives-year-list {
+  clear: both;
+  padding-left: 0;
+}
+
+.archives-month-list {
+  padding-left: 20px;
+}
+
+#archives-tags {
+  font-size: calc(var(--text-size-factor) * 2.5rem);
+  line-height: 75%;
+}
+
+.archives-tag {
+  display: block;
+  float: left;
+  margin: 0 2px;
+}
+
+#archives-tags + #archives-year-list {
+  padding-top: 20px;
+}

lib/web/frontend/assets/style/base-layout.css

@@ -0,0 +1,94 @@
+html {
+  height: 100%;
+}
+
+body {
+  display: grid;
+  grid-template: var(--main-grid);
+  margin: 0;
+  padding: 0;
+  height: 100%;
+  background-color: var(--base-background);
+}
+
+/* Blog header that also works as a sidebar on big screens */
+#main-header {
+  grid-area: hd;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: start;
+
+  padding: var(--layout-padding);
+  background-color: var(--accent-background);
+}
+
+#main-header a {
+  color: var(--accent-link);
+}
+
+#main-header a:hover h1, #main-header a:visited {
+  color: var(--accent-link-active);
+}
+
+#main-header h1 {
+  color: var(--blog-name-color);
+  text-transform: uppercase;
+  font-weight: bold;
+  font-size: 2.1em;
+  margin: 20px 0 0;
+}
+
+#menunav ul {
+  list-style-type: none;
+  padding-left: 0;
+}
+
+#menunav ul li {
+  display: inline-block;
+  border: var(--btn-border-accent);
+  padding: var(--btn-padding);
+  border-radius: var(--btn-border-radius);
+}
+
+/* Archives and stuff in the sidebar */
+#main-sidebar {
+  grid-area: nav;
+  padding: var(--layout-padding);
+
+  background-color: var(--accent-background);
+  color: var(--accent-text);
+}
+
+/* Footer after all blog posts */
+#main-footer {
+  grid-area: ft;
+
+  padding: var(--layout-padding);
+  max-width: var(--content-max-width);
+
+  display: flex;
+  flex-direction: var(--footer-direction);
+  justify-content: space-between;
+  align-items: center;
+}
+
+#main-footer>p {
+  margin: var(--footer-item-margin);
+}
+
+/* Main blog post area */
+main {
+  grid-area: mn;
+
+  padding: var(--layout-padding);
+  max-width: var(--content-max-width);
+
+  /*
+    For some reason this fixes our code blocks in the posts, otherwise they will overflow the
+    container
+    Found on: https://stackoverflow.com/questions/45468633/pre-tag-causing-page-to-scroll-horizontally-in-css-grid#comment77898323_45468633
+  */
+  min-width: 0;
+}

lib/web/frontend/assets/style/buttons.css

@@ -0,0 +1,22 @@
+button {
+  border: var(--btn-border);
+  border-radius: var(--btn-border-radius);
+  padding: var(--btn-padding);
+
+  background-color: var(--background-color);
+  color: var(--accent-background);
+}
+
+button:hover {
+  cursor: pointer;
+}
+
+button:active {
+  background-color: var(--accent-link);
+}
+
+button:disabled {
+  background-color: var(--accent-link);
+  color: var(--disabled-color);
+  border-color: var(--disabled-color);
+}

lib/web/frontend/assets/style/index.css

@@ -0,0 +1,10 @@
+@charset "utf-8";
+@import "settings.css";
+@import "init.css";
+@import "buttons.css";
+@import "typography.css";
+@import "base-layout.css";
+@import "archives.css";
+@import "post-list.css";
+@import "pagination.css";
+@import "post-layout.css";

lib/web/frontend/assets/style/init.css

@@ -0,0 +1,6 @@
+*,
+*::before,
+*::after {
+  /* UGH */
+  box-sizing: border-box;
+}

lib/web/frontend/assets/style/pagination.css

@@ -0,0 +1,29 @@
+nav.pagination {
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: center;
+}
+
+.pagination-link {
+  color: var(--accent-background);
+  background-color: var(--accent-link);
+}
+
+.pagination-link:first-child {
+  border-radius: var(--pagination-link-radius) 0 0 var(--pagination-link-radius);
+}
+
+.pagination-link:last-child {
+  border-radius: 0 var(--pagination-link-radius) var(--pagination-link-radius) 0;
+}
+
+.pagination-link a, .pagination-disabled {
+  display: block;
+  padding: 10px;
+}
+
+.pagination-disabled {
+  color: var(--pagination-disabled-color);
+  cursor: not-allowed;
+}

lib/web/frontend/assets/style/post-layout.css

@@ -0,0 +1,56 @@
+.post {
+  max-width: 100%;
+}
+
+.post h1 {
+  margin: 20px 0 10px;
+}
+
+.post-meta {
+  margin: 0 0 3px;
+
+  color: var(--post-meta-color);
+  font-style: italic;
+  font-size: 90%;
+}
+
+.post-meta a {
+  display: inline-block;
+  padding: 2px;
+  color: var(--accent-background);
+  background-color: var(--accent-link);
+  border-radius: 2px;
+}
+
+.post pre[class*="language-"] {
+  max-width: var(--code-block-max-width);
+}
+
+.post figure {
+  max-width: 100%;
+  text-align: center;
+  margin: 20px 0;
+  padding: 0;
+}
+
+.post figure img {
+  max-width: 100%;
+}
+
+.post figcaption {
+  font-style: italic;
+  text-align: center;
+}
+
+.post iframe.youtube {
+  display: block;
+  max-width: 100%;
+  width: 100%;
+  height: var(--youtube-height);
+}
+
+#disqus_load_btn {
+  margin-top: 20px;
+
+  font-size: 1.25rem;
+}

lib/web/frontend/assets/style/post-list.css

@@ -1,6 +1,6 @@
 .viewing-info {
   padding: 20px;
-  background-color: lighten($accent-background, 60%);
+  background-color: var(--viewing-info-background);
   border-radius: 10px;
   display: inline-block;
 }

lib/web/frontend/assets/style/settings.css

@@ -0,0 +1,120 @@
+:root {
+  /* Color Palette */
+
+  --background-color: #fff;
+
+  /* Accent color for differentiating special elements or layout "pop" */
+  --accent-text: #fcfcfe;
+  --accent-headings: var(--accent-text);
+  --accent-background: #3d4f5d;
+  --accent-link: #e9edee;
+  --accent-link-active: #dbe2e3;
+  --accent-link-visited: var(--accent-link);
+  --blog-name-color: #3d92c9;
+
+  /* Basic colors, the usual colors where others aren't appropriate */
+  --base-text: #000;
+  --base-headings: var(--base-text);
+  --base-background: var(--background-color);
+  --base-link: #51697c;
+  --base-link-visited: var(--base-link);
+  --disabled-color: #666;
+
+
+  /* Base layout */
+
+  --content-max-width: 1000px;
+  --layout-padding: 20px;
+  --main-grid: 'hd' 'mn' 1fr 'nav' 'ft' / auto;
+  --footer-direction: column;
+  --footer-item-margin: 5px;
+
+
+  /* Typography */
+
+  --font-size: 16px;
+  --font-size-big: 18px;
+  --font-headings: 'Trebuchet MS', 'Open Sans', 'Arial', sans-serif;
+  --font-body: 'Trebuchet MS', 'Open Sans', 'Arial', sans-serif;
+  --font-mono: monospace;
+
+  --code-background: #f2f2f2;
+
+  --h1-size: 3.000rem;
+  --h2-size: 2.369rem;
+  --h3-size: 1.777rem;
+  --h4-size: 1.333rem;
+  --h5-size: 1.222rem;
+  --h6-size: 1.111rem;
+
+  /* These allow tuning fonts to be even smaller or bigger on certain screen sizes. */
+  --h-size-factor: 0.65;
+  --text-size-factor: 0.9;
+
+  /* Button styles */
+  --btn-border-style: solid;
+  --btn-border-width: 2px;
+  --btn-border: var(--btn-border-width) var(--btn-border-style) var(--accent-background);
+  --btn-border-accent: var(--btn-border-width) var(--btn-border-style) var(--accent-link);
+  --btn-padding: 3px 5px;
+  --btn-border-radius: 3px;
+
+
+  /* Post list */
+
+  --viewing-info-background: #e1e7eb;
+
+
+  /* Pagination */
+
+  --pagination-link-radius: 5px;
+  --pagination-disabled-color: #888;
+
+
+  /* Post layout */
+  --post-meta-color: #4d4d4d;
+
+  /* Code should not enlargen mobile layouts, so remove 40px for padding. */
+  --code-block-max-width: calc(100vw - 20px * 2);
+
+  --youtube-height: 200px;
+}
+
+@media (min-width: 480px) {
+  :root {
+    --footer-direction: row;
+    --footer-item-margin: 0;
+
+    --h-size-factor: 0.85;
+    --text-size-factor: 0.95;
+    --youtube-height: 300px;
+  }
+}
+
+@media (min-width: 768px) {
+  :root {
+    --main-grid: 'hd    mn' 200px
+                 'nav   mn'
+                 'nav   ft'
+                 'nav   . '
+                / 250px auto;
+    
+    --h-size-factor: 1;
+    --text-size-factor: 1;
+
+    --code-block-max-width: 100%;
+    --youtube-height: 400px;
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --main-grid: 'hd    mn' 200px
+                 'nav   mn'
+                 'nav   ft'
+                 'nav   . '
+                / 325px auto;
+    
+    --youtube-height: 500px;
+  }
+}

lib/web/frontend/assets/style/typography.css

@@ -0,0 +1,93 @@
+body {
+  font-family: var(--font-body);
+  font-weight: 400;
+  font-size: calc(var(--text-size-factor) * 1rem);
+  line-height: 1.45;
+  color: var(--base-text);
+}
+
+p {
+  margin-bottom: 1.3rem;
+}
+
+p:first-child {
+  /* No top margin if paragraph is first element in container. */
+  margin-top: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-headings);
+}
+
+h1,
+h2,
+h3,
+h4 {
+  margin: 1.414em 0 0.5em;
+  font-weight: inherit;
+  line-height: 1.2;
+}
+
+h1 {
+  font-size: calc(var(--h-size-factor) * var(--h1-size));
+  margin-top: 0.5em;
+}
+
+h2 {
+  font-size: calc(var(--h-size-factor) * var(--h2-size));
+}
+
+h3 {
+  font-size: calc(var(--h-size-factor) * var(--h3-size));
+}
+
+h4 {
+  font-size: calc(var(--h-size-factor) * var(--h4-size));
+}
+
+h5 {
+  font-size: calc(var(--h-size-factor) * var(--h5-size));
+}
+
+h6 {
+  font-size: calc(var(--h-size-factor) * var(--h6-size));
+}
+
+small,
+.font-small {
+  font-size: 0.75em;
+}
+
+.text-center {
+  text-align: center;
+}
+
+a {
+  color: var(--base-link);
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+a:visited {
+  color: var(--base-link-visited);
+}
+
+pre {
+  padding: 10px;
+}
+
+code, pre {
+  background-color: var(--code-background);
+}
+
+code {
+  white-space: pre-wrap;
+}

lib/web/frontend/bsconfig.json

@@ -1,18 +0,0 @@
-{
-  "name": "frontend",
-  "version": "0.1.0",
-  "sources": {
-    "dir": "src",
-    "subdirs": true
-  },
-  "package-specs": {
-    "module": "commonjs",
-    "in-source": true
-  },
-  "suffix": ".bs.js",
-  "bs-dependencies": [],
-  "warnings": {
-    "error": "+101"
-  },
-  "refmt": 3
-}

lib/web/frontend/build.sh

@@ -0,0 +1,12 @@
+#!/usr/bin/env bash
+
+set -eux
+set -o pipefail
+
+TARGETDIR=../../../priv/static
+
+tsc
+mkdir -p ${TARGETDIR}
+cp -r assets/ ${TARGETDIR}/assets
+cp -r build/ ${TARGETDIR}/build
+cp -r vendor/ ${TARGETDIR}/build/vendor

lib/web/frontend/fuse.js

@@ -1,46 +0,0 @@
-const { FuseBox, QuantumPlugin, SassPlugin, CSSPlugin, CSSResourcePlugin } = require("fuse-box");
-
-const DIST_PATH = '../../../priv/static';
-
-const BUILD_ONLY = process.argv.length > 2 && process.argv[2] === 'build';
-
-const IS_PRODUCTION = process.env.NODE_ENV === 'production';
-
-const fuse = FuseBox.init({
-  homeDir: 'src',
-  output: `${DIST_PATH}/$name.js`,
-  target: 'browser@es5',
-  sourceMaps: true,
-  plugins: [
-    [
-      SassPlugin(),
-      CSSResourcePlugin({ dist: `${DIST_PATH}/css-resources` }),
-      CSSPlugin(),
-    ],
-    IS_PRODUCTION && QuantumPlugin({
-      bakeApiIntoBundle: 'app',
-      uglify: true,
-      css: true,
-    })
-  ]
-});
-
-if (!IS_PRODUCTION && !BUILD_ONLY) {
-  fuse.dev({
-    port: 2125,
-    proxy: {
-      '/': {
-        target: 'http://127.0.0.1:2124',
-        changeOrigin: true
-      }
-    }
-  });
-}
-
-const app = fuse.bundle('app').instructions(`> index.bs.js + style/index.scss`);
-
-if (!IS_PRODUCTION && !BUILD_ONLY) {
-  app.hmr({ reload: true }).watch();
-}
-
-fuse.run();

lib/web/frontend/package.json

@@ -1,26 +0,0 @@
-{
-  "name": "frontend",
-  "version": "0.1.0",
-  "private": true,
-  "scripts": {
-    "clean": "bsb -clean-world",
-    "build": "bsb -make-world && node fuse build"
-  },
-  "keywords": [
-    "BuckleScript"
-  ],
-  "author": "Nicd",
-  "license": "",
-  "devDependencies": {
-    "bs-platform": "^4.0.5",
-    "fuse-box": "^3.5.0",
-    "http-proxy-middleware": "^0.19.0",
-    "node-sass": "^4.9.3",
-    "typescript": "^3.0.3",
-    "uglify-js": "^3.4.9"
-  },
-  "dependencies": {
-    "@csstools/normalize.css": "^9.0.1",
-    "prismjs": "^1.15.0"
-  }
-}

lib/web/frontend/src/code-hilighter.ts

@@ -0,0 +1,241 @@
+import { PRISM_LANGUAGES_PATH, PRISM_PATH } from "./config.js";
+
+const CLASS_PREFIX = "language-" as const;
+
+const DEPENDENCIES: { [key: string]: readonly string[] } = {
+  "javascript": ["clike"],
+  "actionscript": ["javascript"],
+  "arduino": ["cpp"],
+  "aspnet": ["markup", "csharp"],
+  "bison": ["c"],
+  "c": ["clike"],
+  "csharp": ["clike"],
+  "cpp": ["c"],
+  "coffeescript": ["javascript"],
+  "crystal": ["ruby"],
+  "css-extras": ["css"],
+  "d": ["clike"],
+  "dart": ["clike"],
+  "django": ["markup-templating"],
+  "ejs": ["javascript", "markup-templating"],
+  "etlua": ["lua", "markup-templating"],
+  "erb": ["ruby", "markup-templating"],
+  "fsharp": ["clike"],
+  "firestore-security-rules": ["clike"],
+  "flow": ["javascript"],
+  "ftl": ["markup-templating"],
+  "glsl": ["clike"],
+  "gml": ["clike"],
+  "go": ["clike"],
+  "groovy": ["clike"],
+  "haml": ["ruby"],
+  "handlebars": ["markup-templating"],
+  "haxe": ["clike"],
+  "java": ["clike"],
+  "javadoc": ["markup", "java", "javadoclike"],
+  "jolie": ["clike"],
+  "jsdoc": ["javascript", "javadoclike"],
+  "js-extras": ["javascript"],
+  "js-templates": ["javascript"],
+  "jsonp": ["json"],
+  "json5": ["json"],
+  "kotlin": ["clike"],
+  "latte": ["clike", "markup-templating", "php"],
+  "less": ["css"],
+  "lilypond": ["scheme"],
+  "markdown": ["markup"],
+  "markup-templating": ["markup"],
+  "n4js": ["javascript"],
+  "nginx": ["clike"],
+  "objectivec": ["c"],
+  "opencl": ["c"],
+  "parser": ["markup"],
+  "php": ["clike", "markup-templating"],
+  "phpdoc": ["php", "javadoclike"],
+  "php-extras": ["php"],
+  "plsql": ["sql"],
+  "processing": ["clike"],
+  "protobuf": ["clike"],
+  "pug": ["markup", "javascript"],
+  "qml": ["javascript"],
+  "qore": ["clike"],
+  "jsx": ["markup", "javascript"],
+  "tsx": ["jsx", "typescript"],
+  "reason": ["clike"],
+  "ruby": ["clike"],
+  "sass": ["css"],
+  "scss": ["css"],
+  "scala": ["java"],
+  "shell-session": ["bash"],
+  "smarty": ["markup-templating"],
+  "solidity": ["clike"],
+  "soy": ["markup-templating"],
+  "sparql": ["turtle"],
+  "sqf": ["clike"],
+  "swift": ["clike"],
+  "tap": ["yaml"],
+  "textile": ["markup"],
+  "tt2": ["clike", "markup-templating"],
+  "twig": ["markup"],
+  "typescript": ["javascript"],
+  "t4-cs": ["t4-templating", "csharp"],
+  "t4-vb": ["t4-templating", "visual-basic"],
+  "vala": ["clike"],
+  "vbnet": ["basic"],
+  "velocity": ["markup"],
+  "wiki": ["markup"],
+  "xeora": ["markup"],
+  "xquery": ["markup"],
+} as const;
+
+const ALIASES: { [key: string]: string } = {
+  "html": "markup",
+  "xml": "markup",
+  "svg": "markup",
+  "mathml": "markup",
+  "js": "javascript",
+  "g4": "antlr4",
+  "adoc": "asciidoc",
+  "shell": "bash",
+  "shortcode": "bbcode",
+  "rbnf": "bnf",
+  "conc": "concurnas",
+  "dotnet": "csharp",
+  "cs": "csharp",
+  "coffee": "coffeescript",
+  "jinja2": "django",
+  "dns-zone": "dns-zone-file",
+  "dockerfile": "docker",
+  "eta": "ejs",
+  "excel-formula": "xlsx",
+  "xls": "xlsx",
+  "gml": "gamemakerlanguage",
+  "hs": "haskell",
+  "tex": "latex",
+  "context": "latex",
+  "ly": "lilypond",
+  "emacs": "lisp",
+  "elisp": "lisp",
+  "emacs-lisp": "lisp",
+  "md": "markdown",
+  "moon": "moonscript",
+  "n4jsd": "n4js",
+  "hdl": "nand2tetris",
+  "objectpascal": "pascal",
+  "px": "pcaxis",
+  "pq": "powerquery",
+  "mscript": "powerquery",
+  "py": "python",
+  "robot": "robotframework",
+  "rb": "ruby",
+  "solution-file": "sln",
+  "rq": "sparql",
+  "trig": "turtle",
+  "ts": "typescript",
+  "t4-cs": "t4",
+  "visual-basic": "vb",
+  "xeoracube": "xeora",
+  "yml": "yaml",
+} as const;
+
+const state: {
+  filesLoaded: Set<string>,
+  rootLoaded: boolean,
+  languageEls: Map<string, Array<[HTMLElement, HTMLElement]>>,
+} = {
+  filesLoaded: new Set(),
+  rootLoaded: false,
+  languageEls: new Map(),
+};
+
+function getFilename(language: string) {
+  if (ALIASES.hasOwnProperty(language)) {
+    language = ALIASES[language];
+  }
+
+  return `${language}.min.js`;
+}
+
+function loadCSS() {
+  const styleEl = document.createElement("link");
+  styleEl.rel = "stylesheet";
+  styleEl.type = "text/css";
+  styleEl.href = `${PRISM_PATH}/prism.css`;
+
+  document.getElementsByTagName("head")[0].appendChild(styleEl);
+}
+
+function loadJSFile(name: string, isLanguage: boolean) {
+  const path = isLanguage ? PRISM_LANGUAGES_PATH : PRISM_PATH;
+  return import(`${path}/${name}`);
+}
+
+async function loadMainJS() {
+  // Prevent Prism from running on its own
+  (window as any).Prism = { manual: true };
+
+  await loadJSFile("prism.min.js", false);
+}
+
+async function loadLanguage(language: string) {
+  const filename = getFilename(language);
+  if (state.filesLoaded.has(filename)) {
+    return;
+  }
+
+  if (!state.rootLoaded) {
+    loadCSS();
+    await loadMainJS();
+    state.rootLoaded = true;
+  }
+
+  const depsPromises = [];
+  for (const dep of DEPENDENCIES[language] || []) {
+    depsPromises.push(loadLanguage(dep));
+  }
+
+  await Promise.all(depsPromises);
+  await loadJSFile(filename, true);
+  state.filesLoaded.add(filename);
+}
+
+async function hilightCode(code: HTMLElement, language: string) {
+  await loadLanguage(language);
+  (window as any).Prism.highlightElement(code);
+}
+
+function addLoadPrompt(pre: HTMLElement, code: HTMLElement, language: string) {
+  const loadButton = document.createElement("button");
+  loadButton.textContent = `Load syntax highlighting for ”${language}”`;
+
+  loadButton.addEventListener("click", async () => {
+    const elsForLanguage = state.languageEls.get(language) || [];
+    for (const [codeEl, btn] of elsForLanguage) {
+      btn.setAttribute("disabled", "disabled");
+      btn.textContent = `Loading ”${language}”…`;
+      await hilightCode(codeEl, language);
+      btn.remove();
+    }
+
+    state.languageEls.delete(language);
+  });
+
+  pre.parentElement!.insertBefore(loadButton, pre);
+  state.languageEls.set(
+    language,
+    (state.languageEls.get(language) || []).concat([[code, loadButton]]),
+  );
+}
+
+export function initHilights() {
+  const codeEls = document.querySelectorAll(`pre>code[class*='${CLASS_PREFIX}']`);
+  codeEls.forEach(async (el) => {
+    for (const klass of el.classList.values()) {
+      if (klass.startsWith(CLASS_PREFIX) && klass !== CLASS_PREFIX) {
+        const language = klass.substring(CLASS_PREFIX.length);
+        addLoadPrompt(el.parentElement as HTMLElement, el as HTMLElement, language);
+        break;
+      }
+    }
+  });
+}

lib/web/frontend/src/code_hl.ml

@@ -1,7 +0,0 @@
-(* Code block highlighting in blog, with PrismJS. *)
-[%raw {|
-  require('prismjs'),
-  require('prismjs/components/prism-elixir'),
-  require('prismjs/components/prism-bash'),
-  require('prismjs/components/prism-c')
-|}]

lib/web/frontend/src/config.ts

@@ -0,0 +1,10 @@
+/** Locale to use when formatting numbers. */
+export const LOCALE = "en-GB" as const;
+
+export const ASSETS_PATH = "/build" as const;
+
+export const VENDOR_PATH = `${ASSETS_PATH}/vendor`;
+
+export const PRISM_PATH = `${VENDOR_PATH}/prism`;
+
+export const PRISM_LANGUAGES_PATH = `${PRISM_PATH}/languages`;

lib/web/frontend/src/fonts/FIRA-LICENSE.txt

@@ -1,93 +0,0 @@
-Copyright (c) 2012-2015, The Mozilla Foundation and Telefonica S.A.
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

lib/web/frontend/src/fonts/LATO-LICENSE.txt

@@ -1,93 +0,0 @@
-Copyright (c) 2010-2014 by tyPoland Lukasz Dziedzic (team@latofonts.com) with Reserved Font Name "Lato"
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.