break up utility file, get build for sure working

still Much Work Yet Ahead but this is good progress!! also the site is
in a working state afaict and thats a kinda nice milestone lmbo

16 files changed, 9115 insertions, 0 deletions

diff --git a/src/gen-thumbs.js b/src/gen-thumbs.js
new file mode 100644
index 0000000..d636d2f
--- /dev/null
+++ b/src/gen-thumbs.js
@@ -0,0 +1,306 @@
+#!/usr/bin/env node
+
+// Ok, so the d8te is 3 March 2021, and the music wiki was initially released
+// on 15 November 2019. That is 474 days or 11376 hours. In my opinion, and
+// pro8a8ly the opinions of at least one other person, that is WAY TOO LONG
+// to go without media thum8nails!!!! So that's what this file is here to do.
+//
+// This program takes a path to the media folder (via --media or the environ.
+// varia8le HSMUSIC_MEDIA), traverses su8directories to locate image files,
+// and gener8tes lower-resolution/file-size versions of all that are new or
+// have 8een modified since the last run. We use a JSON-format cache of MD5s
+// for each file to perform this comparision; we gener8te files (using ffmpeg)
+// in "medium" and "small" sizes adjacent to the existing PNG for easy and
+// versatile access in site gener8tion code.
+//
+// So for example, on the very first run, you might have a media folder which
+// looks something like this:
+//
+//   media/
+//     album-art/
+//       one-year-older/
+//         cover.jpg
+//         firefly-cloud.jpg
+//         october.jpg
+//         ...
+//     flash-art/
+//       413.jpg
+//       ...
+//     bg.jpg
+//     ...
+//
+// After running gen-thumbs.js with the path to that folder passed, you'd end
+// up with something like this:
+//
+//   media/
+//     album-art/
+//       one-year-older/
+//         cover.jpg
+//         cover.medium.jpg
+//         cover.small.jpg
+//         firefly-cloud.jpg
+//         firefly-cloud.medium.jpg
+//         firefly-cloud.small.jpg
+//         october.jpg
+//         october.medium.jpg
+//         october.small.jpg
+//         ...
+//     flash-art/
+//       413.jpg
+//       413.medium.jpg
+//       413.small.jpg
+//       ...
+//     bg.jpg
+//     bg.medium.jpg
+//     bg.small.jpg
+//     thumbs-cache.json
+//     ...
+//
+// (Do note that while 8oth JPG and PNG are supported, gener8ted files will
+// always 8e in JPG format and file extension. GIFs are skipped since there
+// aren't any super gr8 ways to make those more efficient!)
+//
+// And then in gener8tion code, you'd reference the medium/small or original
+// version of each file, as decided is appropriate. Here are some guidelines:
+//
+// - Small: Grid tiles on the homepage and in galleries.
+// - Medium: Cover art on individual al8um and track pages, etc.
+// - Original: Only linked to, not embedded.
+//
+// The traversal code is indiscrimin8te: there are no special cases to, say,
+// not gener8te thum8nails for the bg.jpg file (since those would generally go
+// unused). This is just to make the code more porta8le and sta8le, long-term,
+// since it avoids a lot of otherwise implic8ted maintenance.
+
+'use strict';
+
+const CACHE_FILE = 'thumbnail-cache.json';
+const WARNING_DELAY_TIME = 10000;
+
+import { spawn } from 'child_process';
+import { createHash } from 'crypto';
+import * as path from 'path';
+
+import {
+    readdir,
+    readFile,
+    writeFile
+} from 'fs/promises'; // Whatcha know! Nice.
+
+import {
+    createReadStream
+} from 'fs'; // Still gotta import from 8oth tho, for createReadStream.
+
+import {
+    logError,
+    logInfo,
+    logWarn,
+    parseOptions,
+    progressPromiseAll
+} from './util/cli.js';
+
+import {
+    promisifyProcess,
+} from './util/node-utils.js';
+
+import {
+    delay,
+    queue,
+} from './util/sugar.js';
+
+function traverse(startDirPath, {
+    filterFile = () => true,
+    filterDir = () => true
+} = {}) {
+    const recursive = (names, subDirPath) => Promise
+        .all(names.map(name => readdir(path.join(startDirPath, subDirPath, name)).then(
+            names => filterDir(name) ? recursive(names, path.join(subDirPath, name)) : [],
+            err => filterFile(name) ? [path.join(subDirPath, name)] : [])))
+        .then(pathArrays => pathArrays.flatMap(x => x));
+
+    return readdir(startDirPath)
+        .then(names => recursive(names, ''));
+}
+
+function readFileMD5(filePath) {
+    return new Promise((resolve, reject) => {
+        const md5 = createHash('md5');
+        const stream = createReadStream(filePath);
+        stream.on('data', data => md5.update(data));
+        stream.on('end', data => resolve(md5.digest('hex')));
+        stream.on('error', err => reject(err));
+    });
+}
+
+function generateImageThumbnails(filePath) {
+    const dirname = path.dirname(filePath);
+    const extname = path.extname(filePath);
+    const basename = path.basename(filePath, extname);
+    const output = name => path.join(dirname, basename + name + '.jpg');
+
+    const convert = (name, {size, quality}) => spawn('convert', [
+        '-strip',
+        '-resize', `${size}x${size}>`,
+        '-interlace', 'Plane',
+        '-quality', `${quality}%`,
+        filePath,
+        output(name)
+    ]);
+
+    return Promise.all([
+        promisifyProcess(convert('.medium', {size: 400, quality: 95}), false),
+        promisifyProcess(convert('.small', {size: 250, quality: 85}), false)
+    ]);
+
+    return new Promise((resolve, reject) => {
+        if (Math.random() < 0.2) {
+            reject(new Error(`Them's the 8r8ks, kiddo!`));
+        } else {
+            resolve();
+        }
+    });
+}
+
+export default async function genThumbs(mediaPath, {
+    queueSize = 0,
+    quiet = false
+} = {}) {
+    if (!mediaPath) {
+        throw new Error('Expected mediaPath to be passed');
+    }
+
+    const quietInfo = (quiet
+        ? () => null
+        : logInfo);
+
+    const filterFile = name => {
+        // TODO: Why is this not working????????
+        // thumbnail-cache.json is 8eing passed through, for some reason.
+
+        const ext = path.extname(name);
+        if (ext !== '.jpg' && ext !== '.png') return false;
+
+        const rest = path.basename(name, ext);
+        if (rest.endsWith('.medium') || rest.endsWith('.small')) return false;
+
+        return true;
+    };
+
+    const filterDir = name => {
+        if (name === '.git') return false;
+        return true;
+    };
+
+    let cache, firstRun = false, failedReadingCache = false;
+    try {
+        cache = JSON.parse(await readFile(path.join(mediaPath, CACHE_FILE)));
+        quietInfo`Cache file successfully read.`;
+    } catch (error) {
+        cache = {};
+        if (error.code === 'ENOENT') {
+            firstRun = true;
+        } else {
+            failedReadingCache = true;
+            logWarn`Malformed or unreadable cache file: ${error}`;
+            logWarn`You may want to cancel and investigate this!`;
+            logWarn`All-new thumbnails and cache will be generated for this run.`;
+            await delay(WARNING_DELAY_TIME);
+        }
+    }
+
+    try {
+        await writeFile(path.join(mediaPath, CACHE_FILE), JSON.stringify(cache));
+        quietInfo`Writing to cache file appears to be working.`;
+    } catch (error) {
+        logWarn`Test of cache file writing failed: ${error}`;
+        if (cache) {
+            logWarn`Cache read succeeded: Any newly written thumbs will be unnecessarily regenerated on the next run.`;
+        } else if (firstRun) {
+            logWarn`No cache found: All thumbs will be generated now, and will be unnecessarily regenerated next run.`;
+        } else {
+            logWarn`Cache read failed: All thumbs will be regenerated now, and will be unnecessarily regenerated again next run.`;
+        }
+        logWarn`You may want to cancel and investigate this!`;
+        await delay(WARNING_DELAY_TIME);
+    }
+
+    const imagePaths = await traverse(mediaPath, {filterFile, filterDir});
+
+    const imageToMD5Entries = await progressPromiseAll(`Generating MD5s of image files`, queue(
+        imagePaths.map(imagePath => () => readFileMD5(path.join(mediaPath, imagePath)).then(
+            md5 => [imagePath, md5],
+            error => [imagePath, {error}]
+        )),
+        queueSize
+    ));
+
+    {
+        let error = false;
+        for (const entry of imageToMD5Entries) {
+            if (entry[1].error) {
+                logError`Failed to read ${entry[0]}: ${entry[1].error}`;
+                error = true;
+            }
+        }
+        if (error) {
+            logError`Failed to read at least one image file!`;
+            logError`This implies a thumbnail probably won't be generatable.`;
+            logError`So, exiting early.`;
+            return false;
+        } else {
+            quietInfo`All image files successfully read.`;
+        }
+    }
+
+    // Technically we could pro8a8ly mut8te the cache varia8le in-place?
+    // 8ut that seems kinda iffy.
+    const updatedCache = Object.assign({}, cache);
+
+    const entriesToGenerate = imageToMD5Entries
+        .filter(([filePath, md5]) => md5 !== cache[filePath]);
+
+    if (entriesToGenerate.length === 0) {
+        logInfo`All image thumbnails are already up-to-date - nice!`;
+        return true;
+    }
+
+    const failed = [];
+    const succeeded = [];
+    const writeMessageFn = () => `Writing image thumbnails. [failed: ${failed.length}]`;
+
+    // This is actually sort of a lie, 8ecause we aren't doing synchronicity.
+    // (We pass queueSize = 1 to queue().) 8ut we still use progressPromiseAll,
+    // 'cuz the progress indic8tor is very cool and good.
+    await progressPromiseAll(writeMessageFn, queue(entriesToGenerate.map(([filePath, md5]) =>
+        () => generateImageThumbnails(path.join(mediaPath, filePath)).then(
+            () => {
+                updatedCache[filePath] = md5;
+                succeeded.push(filePath);
+            },
+            error => {
+                failed.push([filePath, error]);
+            }
+        )
+    )));
+
+    if (failed.length > 0) {
+        for (const [path, error] of failed) {
+            logError`Thumbnails failed to generate for ${path} - ${error}`;
+        }
+        logWarn`Result is incomplete - the above ${failed.length} thumbnails should be checked for errors.`;
+        logWarn`${succeeded.length} successfully generated images won't be regenerated next run, though!`;
+    } else {
+        logInfo`Generated all (updated) thumbnails successfully!`;
+    }
+
+    try {
+        await writeFile(path.join(mediaPath, CACHE_FILE), JSON.stringify(updatedCache));
+        quietInfo`Updated cache file successfully written!`;
+    } catch (error) {
+        logWarn`Failed to write updated cache file: ${error}`;
+        logWarn`Any newly (re)generated thumbnails will be regenerated next run.`;
+        logWarn`Sorry about that!`;
+    }
+
+    return true;
+}
diff --git a/src/static/client.js b/src/static/client.js
new file mode 100644
index 0000000..c12ff35
--- /dev/null
+++ b/src/static/client.js
@@ -0,0 +1,415 @@
+// This is the JS file that gets loaded on the client! It's only really used for
+// the random track feature right now - the idea is we only use it for stuff
+// that cannot 8e done at static-site compile time, 8y its fundamentally
+// ephemeral nature.
+//
+// Upd8: As of 04/02/2021, it's now used for info cards too! Nice.
+
+import {
+    getColors
+} from '../util/colors.js';
+
+let albumData, artistData, flashData;
+let officialAlbumData, fandomAlbumData, artistNames;
+
+let ready = false;
+
+// Localiz8tion nonsense ----------------------------------
+
+const language = document.documentElement.getAttribute('lang');
+
+let list;
+if (
+    typeof Intl === 'object' &&
+    typeof Intl.ListFormat === 'function'
+) {
+    const getFormat = type => {
+        const formatter = new Intl.ListFormat(language, {type});
+        return formatter.format.bind(formatter);
+    };
+
+    list = {
+        conjunction: getFormat('conjunction'),
+        disjunction: getFormat('disjunction'),
+        unit: getFormat('unit')
+    };
+} else {
+    // Not a gr8 mock we've got going here, 8ut it's *mostly* language-free.
+    // We use the same mock for every list 'cuz we don't have any of the
+    // necessary CLDR info to appropri8tely distinguish 8etween them.
+    const arbitraryMock = array => array.join(', ');
+
+    list = {
+        conjunction: arbitraryMock,
+        disjunction: arbitraryMock,
+        unit: arbitraryMock
+    };
+}
+
+// Miscellaneous helpers ----------------------------------
+
+function rebase(href, rebaseKey = 'rebaseLocalized') {
+    const relative = (document.documentElement.dataset[rebaseKey] || '.') + '/';
+    if (relative) {
+        return relative + href;
+    } else {
+        return href;
+    }
+}
+
+function pick(array) {
+    return array[Math.floor(Math.random() * array.length)];
+}
+
+function cssProp(el, key) {
+    return getComputedStyle(el).getPropertyValue(key).trim();
+}
+
+function getRefDirectory(ref) {
+    return ref.split(':')[1];
+}
+
+function getAlbum(el) {
+    const directory = cssProp(el, '--album-directory');
+    return albumData.find(album => album.directory === directory);
+}
+
+function getFlash(el) {
+    const directory = cssProp(el, '--flash-directory');
+    return flashData.find(flash => flash.directory === directory);
+}
+
+// TODO: These should pro8a8ly access some shared urlSpec path. We'd need to
+// separ8te the tooling around that into common-shared code too.
+const getLinkHref = (type, directory) => rebase(`${type}/${directory}`);
+const openAlbum = d => rebase(`album/${d}`);
+const openTrack = d => rebase(`track/${d}`);
+const openArtist = d => rebase(`artist/${d}`);
+const openFlash = d => rebase(`flash/${d}`);
+
+function getTrackListAndIndex() {
+    const album = getAlbum(document.body);
+    const directory = cssProp(document.body, '--track-directory');
+    if (!directory && !album) return {};
+    if (!directory) return {list: album.tracks};
+    const trackIndex = album.tracks.findIndex(track => track.directory === directory);
+    return {list: album.tracks, index: trackIndex};
+}
+
+function openRandomTrack() {
+    const { list } = getTrackListAndIndex();
+    if (!list) return;
+    return openTrack(pick(list));
+}
+
+function getFlashListAndIndex() {
+    const list = flashData.filter(flash => !flash.act8r8k)
+    const flash = getFlash(document.body);
+    if (!flash) return {list};
+    const flashIndex = list.indexOf(flash);
+    return {list, index: flashIndex};
+}
+
+// TODO: This should also use urlSpec.
+function fetchData(type, directory) {
+    return fetch(rebase(`${type}/${directory}/data.json`, 'rebaseData'))
+        .then(res => res.json());
+}
+
+// JS-based links -----------------------------------------
+
+for (const a of document.body.querySelectorAll('[data-random]')) {
+    a.addEventListener('click', evt => {
+        if (!ready) {
+            evt.preventDefault();
+            return;
+        }
+
+        setTimeout(() => {
+            a.href = rebase('js-disabled');
+        });
+        switch (a.dataset.random) {
+            case 'album': return a.href = openAlbum(pick(albumData).directory);
+            case 'album-in-fandom': return a.href = openAlbum(pick(fandomAlbumData).directory);
+            case 'album-in-official': return a.href = openAlbum(pick(officialAlbumData).directory);
+            case 'track': return a.href = openTrack(getRefDirectory(pick(albumData.map(a => a.tracks).reduce((a, b) => a.concat(b), []))));
+            case 'track-in-album': return a.href = openTrack(getRefDirectory(pick(getAlbum(a).tracks)));
+            case 'track-in-fandom': return a.href = openTrack(getRefDirectory(pick(fandomAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))));
+            case 'track-in-official': return a.href = openTrack(getRefDirectory(pick(officialAlbumData.reduce((acc, album) => acc.concat(album.tracks), []))));
+            case 'artist': return a.href = openArtist(pick(artistData).directory);
+            case 'artist-more-than-one-contrib': return a.href = openArtist(pick(artistData.filter(artist => C.getArtistNumContributions(artist) > 1)).directory);
+        }
+    });
+}
+
+const next = document.getElementById('next-button');
+const previous = document.getElementById('previous-button');
+const random = document.getElementById('random-button');
+
+const prependTitle = (el, prepend) => {
+    const existing = el.getAttribute('title');
+    if (existing) {
+        el.setAttribute('title', prepend + ' ' + existing);
+    } else {
+        el.setAttribute('title', prepend);
+    }
+};
+
+if (next) prependTitle(next, '(Shift+N)');
+if (previous) prependTitle(previous, '(Shift+P)');
+if (random) prependTitle(random, '(Shift+R)');
+
+document.addEventListener('keypress', event => {
+    if (event.shiftKey) {
+        if (event.charCode === 'N'.charCodeAt(0)) {
+            if (next) next.click();
+        } else if (event.charCode === 'P'.charCodeAt(0)) {
+            if (previous) previous.click();
+        } else if (event.charCode === 'R'.charCodeAt(0)) {
+            if (random && ready) random.click();
+        }
+    }
+});
+
+for (const reveal of document.querySelectorAll('.reveal')) {
+    reveal.addEventListener('click', event => {
+        if (!reveal.classList.contains('revealed')) {
+            reveal.classList.add('revealed');
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    });
+}
+
+const elements1 = document.getElementsByClassName('js-hide-once-data');
+const elements2 = document.getElementsByClassName('js-show-once-data');
+
+for (const element of elements1) element.style.display = 'block';
+
+fetch(rebase('data.json', 'rebaseShared')).then(data => data.json()).then(data => {
+    albumData = data.albumData;
+    artistData = data.artistData;
+    flashData = data.flashData;
+
+    officialAlbumData = albumData.filter(album => album.groups.includes('group:official'));
+    fandomAlbumData = albumData.filter(album => !album.groups.includes('group:official'));
+    artistNames = artistData.filter(artist => !artist.alias).map(artist => artist.name);
+
+    for (const element of elements1) element.style.display = 'none';
+    for (const element of elements2) element.style.display = 'block';
+
+    ready = true;
+});
+
+// Data & info card ---------------------------------------
+
+const NORMAL_HOVER_INFO_DELAY = 750;
+const FAST_HOVER_INFO_DELAY = 250;
+const END_FAST_HOVER_DELAY = 500;
+const HIDE_HOVER_DELAY = 250;
+
+let fastHover = false;
+let endFastHoverTimeout = null;
+
+function colorLink(a, color) {
+    if (color) {
+        const { primary, dim } = getColors(color);
+        a.style.setProperty('--primary-color', primary);
+        a.style.setProperty('--dim-color', dim);
+    }
+}
+
+function link(a, type, {name, directory, color}) {
+    colorLink(a, color);
+    a.innerText = name
+    a.href = getLinkHref(type, directory);
+}
+
+function joinElements(type, elements) {
+    // We can't use the Intl APIs with elements, 8ecuase it only oper8tes on
+    // strings. So instead, we'll pass the element's outer HTML's (which means
+    // the entire HTML of that element).
+    //
+    // That does mean this function returns a string, so always 8e sure to
+    // set innerHTML when using it (not appendChild).
+
+    return list[type](elements.map(el => el.outerHTML));
+}
+
+const infoCard = (() => {
+    const container = document.getElementById('info-card-container');
+
+    let cancelShow = false;
+    let hideTimeout = null;
+    let showing = false;
+
+    container.addEventListener('mouseenter', cancelHide);
+    container.addEventListener('mouseleave', readyHide);
+
+    function show(type, target) {
+        cancelShow = false;
+
+        fetchData(type, target.dataset[type]).then(data => {
+            // Manual DOM 'cuz we're laaaazy.
+
+            if (cancelShow) {
+                return;
+            }
+
+            showing = true;
+
+            const rect = target.getBoundingClientRect();
+
+            container.style.setProperty('--primary-color', data.color);
+
+            container.style.top = window.scrollY + rect.bottom + 'px';
+            container.style.left = window.scrollX + rect.left + 'px';
+
+            // Use a short timeout to let a currently hidden (or not yet shown)
+            // info card teleport to the position set a8ove. (If it's currently
+            // shown, it'll transition to that position.)
+            setTimeout(() => {
+                container.classList.remove('hide');
+                container.classList.add('show');
+            }, 50);
+
+            // 8asic details.
+
+            const nameLink = container.querySelector('.info-card-name a');
+            link(nameLink, 'track', data);
+
+            const albumLink = container.querySelector('.info-card-album a');
+            link(albumLink, 'album', data.album);
+
+            const artistSpan = container.querySelector('.info-card-artists span');
+            artistSpan.innerHTML = joinElements('conjunction', data.artists.map(({ artist }) => {
+                const a = document.createElement('a');
+                a.href = getLinkHref('artist', artist.directory);
+                a.innerText = artist.name;
+                return a;
+            }));
+
+            const coverArtistParagraph = container.querySelector('.info-card-cover-artists');
+            const coverArtistSpan = coverArtistParagraph.querySelector('span');
+            if (data.coverArtists.length) {
+                coverArtistParagraph.style.display = 'block';
+                coverArtistSpan.innerHTML = joinElements('conjunction', data.coverArtists.map(({ artist }) => {
+                    const a = document.createElement('a');
+                    a.href = getLinkHref('artist', artist.directory);
+                    a.innerText = artist.name;
+                    return a;
+                }));
+            } else {
+                coverArtistParagraph.style.display = 'none';
+            }
+
+            // Cover art.
+
+            const [ containerNoReveal, containerReveal ] = [
+                container.querySelector('.info-card-art-container.no-reveal'),
+                container.querySelector('.info-card-art-container.reveal')
+            ];
+
+            const [ containerShow, containerHide ] = (data.cover.warnings.length
+                ? [containerReveal, containerNoReveal]
+                : [containerNoReveal, containerReveal]);
+
+            containerHide.style.display = 'none';
+            containerShow.style.display = 'block';
+
+            const img = containerShow.querySelector('.info-card-art');
+            img.src = rebase(data.cover.paths.small, 'rebaseMedia');
+
+            const imgLink = containerShow.querySelector('a');
+            colorLink(imgLink, data.color);
+            imgLink.href = rebase(data.cover.paths.original, 'rebaseMedia');
+
+            if (containerShow === containerReveal) {
+                const cw = containerShow.querySelector('.info-card-art-warnings');
+                cw.innerText = list.unit(data.cover.warnings);
+
+                const reveal = containerShow.querySelector('.reveal');
+                reveal.classList.remove('revealed');
+            }
+        });
+    }
+
+    function hide() {
+        container.classList.remove('show');
+        container.classList.add('hide');
+        cancelShow = true;
+        showing = false;
+    }
+
+    function readyHide() {
+        if (!hideTimeout && showing) {
+            hideTimeout = setTimeout(hide, HIDE_HOVER_DELAY);
+        }
+    }
+
+    function cancelHide() {
+        if (hideTimeout) {
+            clearTimeout(hideTimeout);
+            hideTimeout = null;
+        }
+    }
+
+    return {
+        show,
+        hide,
+        readyHide,
+        cancelHide
+    };
+})();
+
+function makeInfoCardLinkHandlers(type) {
+    let hoverTimeout = null;
+
+    return {
+        mouseenter(evt) {
+            hoverTimeout = setTimeout(() => {
+                fastHover = true;
+                infoCard.show(type, evt.target);
+            }, fastHover ? FAST_HOVER_INFO_DELAY : NORMAL_HOVER_INFO_DELAY);
+
+            clearTimeout(endFastHoverTimeout);
+            endFastHoverTimeout = null;
+
+            infoCard.cancelHide();
+        },
+
+        mouseleave(evt) {
+            clearTimeout(hoverTimeout);
+
+            if (fastHover && !endFastHoverTimeout) {
+                endFastHoverTimeout = setTimeout(() => {
+                    endFastHoverTimeout = null;
+                    fastHover = false;
+                }, END_FAST_HOVER_DELAY);
+            }
+
+            infoCard.readyHide();
+        }
+    };
+}
+
+const infoCardLinkHandlers = {
+    track: makeInfoCardLinkHandlers('track')
+};
+
+function addInfoCardLinkHandlers(type) {
+    for (const a of document.querySelectorAll(`a[data-${type}]`)) {
+        for (const [ eventName, handler ] of Object.entries(infoCardLinkHandlers[type])) {
+            a.addEventListener(eventName, handler);
+        }
+    }
+}
+
+// Info cards are disa8led for now since they aren't quite ready for release,
+// 8ut you can try 'em out 8y setting this localStorage flag!
+//
+//     localStorage.tryInfoCards = true;
+//
+if (localStorage.tryInfoCards) {
+    addInfoCardLinkHandlers('track');
+}
diff --git a/src/static/icons.svg b/src/static/icons.svg
new file mode 100644
index 0000000..1e4351b
--- /dev/null
+++ b/src/static/icons.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 40 40" display="none" width="0" height="0">
+	<symbol id="icon-globe" viewBox="0 0 40 40"><path d="M20,3C10.6,3,3,10.6,3,20s7.6,17,17,17s17-7.6,17-17S29.4,3,20,3z M34.8,18.9h-6.2c-0.1-2.2-0.3-4.2-0.8-6.1 c1.5-0.4,3-0.9,4.2-1.5c0.6,0.9,1.2,1.8,1.6,2.9C34.3,15.7,34.7,17.3,34.8,18.9z M25.7,26.7c-1.5-0.3-3.1-0.4-4.6-0.5v-5.1h5.4 c-0.1,1.8-0.3,3.5-0.6,5.1C25.8,26.3,25.8,26.5,25.7,26.7z M14.2,26.2c-0.3-1.6-0.6-3.3-0.6-5.1h5.4v5.1c-1.6,0-3.2,0.2-4.6,0.5 C14.2,26.5,14.2,26.3,14.2,26.2z M14.3,13.3c1.5,0.3,3.1,0.4,4.6,0.5v5.1h-5.4c0.1-1.8,0.3-3.5,0.6-5.1 C14.2,13.7,14.2,13.5,14.3,13.3z M21.1,5.4C21.4,5.6,21.7,5.7,22,6c0.8,0.7,1.6,1.7,2.2,3c0.4,0.7,0.7,1.5,0.9,2.3 c-1.3,0.2-2.7,0.4-4,0.4V5.4z M18,6c0.3-0.3,0.6-0.4,0.9-0.6v6.2c-1.4,0-2.8-0.2-4-0.4c0.3-0.8,0.6-1.6,0.9-2.3 C16.5,7.7,17.2,6.7,18,6z M18.9,28.4v6.2c-0.3-0.1-0.6-0.3-0.9-0.6c-0.8-0.7-1.6-1.7-2.2-3c-0.4-0.7-0.7-1.5-0.9-2.3 C16.2,28.6,17.5,28.4,18.9,28.4z M22,34c-0.3,0.3-0.6,0.4-0.9,0.6v-6.2c1.4,0,2.8,0.2,4,0.4c-0.3,0.8-0.6,1.6-0.9,2.3 C23.5,32.3,22.8,33.3,22,34z M21.1,18.9v-5.1c1.6,0,3.2-0.2,4.6-0.5c0,0.2,0.1,0.4,0.1,0.5c0.3,1.6,0.6,3.3,0.6,5.1H21.1z M30.5,9.5 c0,0,0.1,0.1,0.1,0.1c-1,0.4-2.2,0.8-3.4,1.1c-0.6-1.9-1.4-3.5-2.4-4.8c0.3,0.1,0.6,0.2,0.9,0.3C27.5,7.1,29.1,8.1,30.5,9.5z M14.2,6.3c0.3-0.1,0.6-0.2,0.9-0.3c-0.9,1.3-1.7,2.9-2.4,4.8c-1.2-0.3-2.3-0.7-3.4-1.1c0,0,0.1-0.1,0.1-0.1 C10.9,8.1,12.5,7.1,14.2,6.3z M7.9,11.4c1.3,0.6,2.7,1.1,4.2,1.5c-0.4,1.9-0.7,3.9-0.8,6.1H5.2c0.1-1.6,0.5-3.2,1.1-4.7 C6.8,13.2,7.3,12.3,7.9,11.4z M5.2,21.1h6.2c0.1,2.2,0.3,4.2,0.8,6.1c-1.5,0.4-3,0.9-4.2,1.5c-0.6-0.9-1.2-1.8-1.6-2.9 C5.7,24.3,5.3,22.7,5.2,21.1z M9.5,30.5c0,0-0.1-0.1-0.1-0.1c1-0.4,2.2-0.8,3.4-1.1c0.6,1.9,1.4,3.5,2.4,4.8 c-0.3-0.1-0.6-0.2-0.9-0.3C12.5,32.9,10.9,31.9,9.5,30.5z M25.8,33.7c-0.3,0.1-0.6,0.2-0.9,0.3c0.9-1.3,1.7-2.9,2.4-4.8 c1.2,0.3,2.3,0.7,3.4,1.1c0,0-0.1,0.1-0.1,0.1C29.1,31.9,27.5,32.9,25.8,33.7z M32.1,28.6c-1.3-0.6-2.7-1.1-4.2-1.5 c0.4-1.9,0.7-3.9,0.8-6.1h6.2c-0.1,1.6-0.5,3.2-1.1,4.7C33.2,26.8,32.7,27.7,32.1,28.6z"/></symbol>
+	<symbol id="icon-bandcamp" viewBox="0 0 40 40"><path d="M7.1,13.3c5.6,0,11.1,0,16.7,0c0,1.5,0,3.1,0,4.6c0.7-0.7,1.5-1.5,3.2-1.3c2.6,0.3,3.8,3,3.6,5.6c-0.1,1.1-0.5,2.4-1.3,3.1 c-0.9,0.9-2.9,1.4-4.6,0.5c-0.4-0.2-0.7-0.6-1-1.1c0,0.4,0,0.8,0,1.3c-0.6,0-1.3,0-1.9,0c0-4.2,0-8.3,0-12.5 c-2.3,3.9-4.6,8.4-6.9,12.5c-4.9,0-9.8,0-14.7,0C2.5,21.7,4.8,17.5,7.1,13.3L7.1,13.3z M24.3,19c-1.4,1.9-0.4,6.7,2.8,5.5 c2.4-0.9,2-6.6-1.2-6.3C25.2,18.3,24.7,18.5,24.3,19L24.3,19z"/> <path d="M39.7,19.9c-0.6,0-1.3,0-2,0c0-1.6-1.9-2-3.1-1.5c-2.3,1.1-1.8,7.1,1.6,6.2c0.8-0.2,1.2-0.9,1.4-2c0.6,0,1.3,0,2,0 c-0.1,2.4-2.1,3.9-4.4,3.7c-2.1-0.1-3.8-1.8-4-4.2c-0.2-2.9,1.3-5.9,5-5.5C38.3,16.8,39.6,17.9,39.7,19.9z"/></symbol>
+	<symbol id="icon-deviantart" viewBox="0 0 40 40"><path d="M30,9.2L24,20.9l0.5,0.6H30v8.3H19.9L19,30.5l-2.8,5.5l-0.6,0.6h-6v-6.1l6.1-11.7l-0.5-0.6H9.5V9.8h10.2l0.9-0.6l2.8-5.5 L24,3.2h6C30,3.2,30,9.2,30,9.2z"/></symbol>
+	<symbol id="icon-soundcloud" viewBox="0 0 40 40"><path d="M13.8,27.4l0.3-4.2L13.8,14c0-0.1-0.1-0.2-0.1-0.3c-0.1-0.1-0.2-0.1-0.3-0.1c-0.1,0-0.2,0-0.3,0.1C13.1,13.8,13,13.9,13,14 l-0.2,9.2l0.2,4.2c0,0.1,0.1,0.2,0.1,0.3c0.1,0.1,0.2,0.1,0.3,0.1C13.7,27.8,13.8,27.7,13.8,27.4z M18.8,26.9l0.2-3.7l-0.2-10.3 c0-0.2-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.1-0.3-0.1s-0.2,0-0.3,0.1c-0.1,0.1-0.2,0.2-0.2,0.4l0,0.1l-0.2,10.1c0,0,0.1,1.4,0.2,4.1v0 c0,0.1,0,0.2,0.1,0.3c0.1,0.1,0.2,0.2,0.4,0.2c0.1,0,0.2-0.1,0.3-0.2c0.1-0.1,0.2-0.2,0.2-0.4L18.8,26.9z M1.2,20.9l0.3,2.2 l-0.3,2.2c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.1-0.1-0.2-0.2l-0.3-2.2l0.3-2.2c0-0.1,0.1-0.2,0.2-0.2S1.2,20.8,1.2,20.9z M2.7,19.5 l0.4,3.6l-0.4,3.6c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.2-0.1-0.2-0.2L2,23.2l0.4-3.6c0-0.1,0.1-0.2,0.2-0.2C2.6,19.4,2.7,19.4,2.7,19.5z M4.2,18.9l0.4,4.3l-0.4,4.2c0,0.1-0.1,0.2-0.2,0.2c-0.1,0-0.2-0.1-0.2-0.2l-0.4-4.2l0.4-4.3c0-0.1,0.1-0.2,0.2-0.2 C4.2,18.7,4.2,18.7,4.2,18.9z M5.8,18.8l0.4,4.4l-0.4,4.3c0,0.2-0.1,0.2-0.2,0.2c-0.1,0-0.2-0.1-0.2-0.2L5,23.2l0.4-4.4 c0-0.2,0.1-0.2,0.2-0.2C5.7,18.5,5.8,18.6,5.8,18.8z M7.4,19.1l0.4,4.1l-0.4,4.3c0,0.2-0.1,0.3-0.3,0.3c-0.1,0-0.1,0-0.2-0.1 c-0.1-0.1-0.1-0.1-0.1-0.2l-0.3-4.3l0.3-4.1c0-0.1,0-0.1,0.1-0.2C7,18.8,7,18.8,7.1,18.8C7.3,18.8,7.4,18.9,7.4,19.1L7.4,19.1z M9,16.5l0.4,6.7L9,27.5c0,0.1,0,0.2-0.1,0.2c-0.1,0.1-0.1,0.1-0.2,0.1c-0.2,0-0.3-0.1-0.3-0.3l-0.3-4.3l0.3-6.7 c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.1,0,0.2,0.1S9,16.4,9,16.5z M10.5,15l0.3,8.2l-0.3,4.3c0,0.1,0,0.2-0.1,0.2 c-0.1,0.1-0.1,0.1-0.2,0.1c-0.2,0-0.3-0.1-0.3-0.3l-0.3-4.3L9.9,15c0-0.2,0.1-0.3,0.3-0.3c0.1,0,0.2,0,0.2,0.1 C10.5,14.8,10.5,14.9,10.5,15z M12.2,14.3l0.3,8.9l-0.3,4.2c0,0.2-0.1,0.4-0.4,0.4c-0.2,0-0.3-0.1-0.4-0.4l-0.3-4.2l0.3-8.9 c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.2-0.1,0.2-0.1c0.1,0,0.2,0,0.3,0.1C12.1,14.1,12.2,14.2,12.2,14.3z M18.8,27.3L18.8,27.3L18.8,27.3z M15.4,14.2l0.3,8.9l-0.3,4.2c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3-0.1s-0.1-0.2-0.1-0.3l-0.2-4.2 l0.2-8.9c0-0.1,0-0.2,0.1-0.3c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0.1C15.4,14,15.4,14.1,15.4,14.2L15.4,14.2z M17.1,14.6 l0.2,8.6l-0.2,4.1c0,0.1,0,0.2-0.1,0.3c-0.1,0.1-0.2,0.1-0.3,0.1c-0.1,0-0.2,0-0.3-0.1c-0.1-0.1-0.1-0.2-0.2-0.3L16,23.2l0.2-8.6 c0-0.1,0.1-0.3,0.2-0.4c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0.1C17.1,14.3,17.1,14.4,17.1,14.6z M20.7,23.2l-0.2,4 c0,0.2-0.1,0.3-0.2,0.4c-0.1,0.1-0.2,0.2-0.4,0.2c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.2-0.2-0.4l-0.1-2l-0.1-2L19.4,12V12 c0-0.2,0.1-0.3,0.2-0.4c0.1-0.1,0.2-0.1,0.3-0.1c0.1,0,0.2,0,0.3,0.1c0.2,0.1,0.2,0.2,0.3,0.5L20.7,23.2z M39.4,22.9 c0,1.4-0.5,2.5-1.4,3.5c-0.9,1-2,1.4-3.4,1.4H21.4c-0.1,0-0.3-0.1-0.4-0.2c-0.1-0.1-0.2-0.2-0.2-0.4V11.5c0-0.3,0.2-0.5,0.5-0.6 c1-0.4,2-0.6,3-0.6c2.2,0,4.1,0.8,5.7,2.3c1.6,1.5,2.5,3.4,2.7,5.7c0.6-0.3,1.2-0.4,1.8-0.4c1.3,0,2.4,0.5,3.4,1.5 C38.9,20.3,39.4,21.5,39.4,22.9L39.4,22.9z"/></symbol>
+	<symbol id="icon-tumblr" viewBox="0 0 40 40"><path d="M26.8,29.7l1.6,4.6c-0.3,0.5-1,0.9-2.2,1.3s-2.3,0.6-3.4,0.6c-1.4,0-2.6-0.1-3.7-0.5s-2.1-0.8-2.8-1.4 c-0.7-0.6-1.3-1.3-1.9-2.1c-0.5-0.8-0.9-1.6-1.1-2.3c-0.2-0.8-0.3-1.5-0.3-2.3V16.9H9.7v-4.2c0.9-0.3,1.8-0.8,2.5-1.4 s1.3-1.1,1.8-1.8s0.8-1.3,1.1-2c0.3-0.7,0.5-1.4,0.7-1.9S16,4.6,16.1,4c0-0.1,0-0.1,0.1-0.2s0.1-0.1,0.1-0.1h4.8V12h6.5v4.9h-6.5V27 c0,0.4,0,0.8,0.1,1.1c0.1,0.3,0.2,0.7,0.4,1s0.5,0.6,1,0.8c0.4,0.2,1,0.3,1.6,0.3C25.2,30.2,26.1,30,26.8,29.7L26.8,29.7z"/></symbol>
+	<symbol id="icon-twitter" viewBox="0 0 40 40"><path d="M36.3,10.2c-1,1.3-2.1,2.5-3.4,3.5c0,0.2,0,0.4,0,1c0,1.7-0.2,3.6-0.9,5.3c-0.6,1.7-1.2,3.5-2.4,5.1 c-1.1,1.5-2.3,3.1-3.7,4.3c-1.4,1.2-3.3,2.3-5.3,3c-2.1,0.8-4.2,1.2-6.6,1.2c-3.6,0-7-1-10.2-3c0.4,0,1.1,0.1,1.5,0.1 c3.1,0,5.9-1,8.2-2.9c-1.4,0-2.7-0.4-3.8-1.3c-1.2-1-1.9-2-2.2-3.3c0.4,0.1,1,0.1,1.2,0.1c0.6,0,1.2-0.1,1.7-0.2 c-1.4-0.3-2.7-1.1-3.7-2.3s-1.4-2.6-1.4-4.2v-0.1c1,0.6,2,0.9,3,0.9c-1-0.6-1.5-1.3-2.2-2.4c-0.6-1-0.9-2.1-0.9-3.3s0.3-2.3,1-3.4 c1.5,2.1,3.6,3.6,6,4.9s4.9,2,7.6,2.1c-0.1-0.6-0.1-1.1-0.1-1.4c0-1.8,0.8-3.5,2-4.7c1.2-1.2,2.9-2,4.7-2c2,0,3.6,0.8,4.8,2.1 c1.4-0.3,2.9-0.9,4.2-1.5c-0.4,1.5-1.4,2.7-2.9,3.6C33.8,11.2,35.1,10.9,36.3,10.2L36.3,10.2z"/></symbol>
+	<symbol id="icon-youtube" viewBox="0 0 40 40"><path d="M24.3,27v4.2c0,0.9-0.3,1.3-0.8,1.3c-0.3,0-0.6-0.1-0.9-0.4v-6c0.3-0.3,0.6-0.4,0.9-0.4C24,25.6,24.3,26.1,24.3,27L24.3,27z M31.1,27v0.9h-1.8V27c0-0.9,0.3-1.4,0.9-1.4C30.8,25.6,31.1,26.1,31.1,27L31.1,27z M11.7,22.6h2.1v-1.9H7.6v1.9h2.1v11.4h2 L11.7,22.6L11.7,22.6z M17.5,34.1h1.8v-9.9h-1.8v7.6c-0.4,0.6-0.8,0.8-1.1,0.8c-0.2,0-0.4-0.1-0.4-0.4c0,0,0-0.3,0-0.7v-7.3h-1.8V32 c0,0.7,0.1,1.1,0.2,1.5c0.2,0.5,0.5,0.7,1.2,0.7c0.6,0,1.3-0.4,2-1.2L17.5,34.1L17.5,34.1z M26.1,31.1v-4c0-1-0.1-1.6-0.2-2 c-0.2-0.7-0.7-1.1-1.4-1.1c-0.7,0-1.3,0.4-1.9,1.1v-4.4h-1.8v13.3h1.8v-1c0.6,0.7,1.2,1.1,1.9,1.1c0.7,0,1.2-0.4,1.4-1.1 C26,32.7,26.1,32.1,26.1,31.1L26.1,31.1z M32.9,30.9v-0.3H31c0,0.7,0,1.1,0,1.2c-0.1,0.5-0.4,0.7-0.8,0.7c-0.6,0-0.9-0.5-0.9-1.4 v-1.7h3.6v-2.1c0-1.1-0.2-1.8-0.5-2.3c-0.5-0.7-1.2-1-2.1-1c-0.9,0-1.6,0.3-2.1,1c-0.4,0.5-0.6,1.3-0.6,2.3v3.5 c0,1.1,0.2,1.8,0.6,2.3c0.5,0.7,1.2,1,2.2,1c1,0,1.7-0.4,2.2-1.1c0.2-0.4,0.4-0.7,0.4-1.1C32.9,31.9,32.9,31.5,32.9,30.9L32.9,30.9z M20.7,12.5V8.3c0-0.9-0.3-1.4-0.9-1.4c-0.6,0-0.9,0.5-0.9,1.4v4.2c0,0.9,0.3,1.4,0.9,1.4C20.4,14,20.7,13.5,20.7,12.5z M35.1,27.6 c0,3.1-0.2,5.5-0.5,7c-0.2,0.8-0.6,1.5-1.2,2c-0.6,0.5-1.3,0.8-2,0.9c-2.5,0.3-6.2,0.4-11.1,0.4s-8.7-0.1-11.1-0.4 c-0.8-0.1-1.5-0.4-2.1-0.9c-0.6-0.5-1-1.2-1.2-2c-0.3-1.5-0.5-3.8-0.5-7c0-3.1,0.2-5.5,0.5-7c0.2-0.8,0.6-1.5,1.2-2 c0.6-0.5,1.3-0.9,2.1-0.9c2.5-0.3,6.2-0.4,11.1-0.4s8.7,0.1,11.1,0.4c0.8,0.1,1.5,0.4,2.1,0.9c0.6,0.5,1,1.2,1.2,2 C34.9,22.1,35.1,24.4,35.1,27.6z M15.1,2h2l-2.4,8v5.4h-2V10c-0.2-1-0.6-2.4-1.2-4.3c-0.5-1.4-0.9-2.6-1.3-3.8h2.1l1.4,5.3L15.1,2z M22.5,8.7v3.5c0,1.1-0.2,1.9-0.6,2.4c-0.5,0.7-1.2,1-2.1,1c-0.9,0-1.6-0.3-2.1-1c-0.4-0.5-0.6-1.3-0.6-2.4V8.7 c0-1.1,0.2-1.9,0.6-2.3c0.5-0.7,1.2-1,2.1-1c0.9,0,1.6,0.3,2.1,1C22.3,6.8,22.5,7.6,22.5,8.7z M29.2,5.4v10h-1.8v-1.1 c-0.7,0.8-1.4,1.2-2.1,1.2c-0.6,0-1-0.2-1.2-0.7C24,14.5,24,14,24,13.4V5.4h1.8v7.4c0,0.4,0,0.7,0,0.7c0,0.3,0.2,0.4,0.4,0.4 c0.4,0,0.7-0.3,1.1-0.9V5.4C27.4,5.4,29.2,5.4,29.2,5.4z"/></symbol>
+    <symbol id="icon-instagram" viewBox="0 0 40 40"><path d="M20,7c4.2,0,4.7,0,6.3,0.1c1.5,0.1,2.3,0.3,3,0.5C30,8,30.5,8.3,31.1,8.9c0.5,0.5,0.9,1.1,1.2,1.8c0.2,0.5,0.5,1.4,0.5,3 C33,15.3,33,15.8,33,20s0,4.7-0.1,6.3c-0.1,1.5-0.3,2.3-0.5,3c-0.3,0.7-0.6,1.2-1.2,1.8c-0.5,0.5-1.1,0.9-1.8,1.2 c-0.5,0.2-1.4,0.5-3,0.5C24.7,33,24.2,33,20,33s-4.7,0-6.3-0.1c-1.5-0.1-2.3-0.3-3-0.5C10,32,9.5,31.7,8.9,31.1 C8.4,30.6,8,30,7.7,29.3c-0.2-0.5-0.5-1.4-0.5-3C7,24.7,7,24.2,7,20s0-4.7,0.1-6.3c0.1-1.5,0.3-2.3,0.5-3C8,10,8.3,9.5,8.9,8.9 C9.4,8.4,10,8,10.7,7.7c0.5-0.2,1.4-0.5,3-0.5C15.3,7.1,15.8,7,20,7z M20,4.3c-4.3,0-4.8,0-6.5,0.1c-1.6,0-2.8,0.3-3.8,0.7 C8.7,5.5,7.8,6,6.9,6.9C6,7.8,5.5,8.7,5.1,9.7c-0.4,1-0.6,2.1-0.7,3.8c-0.1,1.7-0.1,2.2-0.1,6.5s0,4.8,0.1,6.5 c0,1.6,0.3,2.8,0.7,3.8c0.4,1,0.9,1.9,1.8,2.8c0.9,0.9,1.7,1.4,2.8,1.8c1,0.4,2.1,0.6,3.8,0.7c1.6,0.1,2.2,0.1,6.5,0.1 s4.8,0,6.5-0.1c1.6-0.1,2.9-0.3,3.8-0.7c1-0.4,1.9-0.9,2.8-1.8c0.9-0.9,1.4-1.7,1.8-2.8c0.4-1,0.6-2.1,0.7-3.8 c0.1-1.6,0.1-2.2,0.1-6.5s0-4.8-0.1-6.5c-0.1-1.6-0.3-2.9-0.7-3.8c-0.4-1-0.9-1.9-1.8-2.8c-0.9-0.9-1.7-1.4-2.8-1.8 c-1-0.4-2.1-0.6-3.8-0.7C24.8,4.3,24.3,4.3,20,4.3L20,4.3L20,4.3z"/><path d="M20,11.9c-4.5,0-8.1,3.7-8.1,8.1s3.7,8.1,8.1,8.1s8.1-3.7,8.1-8.1S24.5,11.9,20,11.9z M20,25.2c-2.9,0-5.2-2.3-5.2-5.2 s2.3-5.2,5.2-5.2s5.2,2.3,5.2,5.2S22.9,25.2,20,25.2z"/><path d="M30.6,11.6c0,1-0.8,1.9-1.9,1.9c-1,0-1.9-0.8-1.9-1.9s0.8-1.9,1.9-1.9C29.8,9.7,30.6,10.5,30.6,11.6z"/></symbol>
+    <symbol id="icon-mastodon" viewBox="-20 -20 237 255"><path d="M107.86523 0C78.203984.2425 49.672422 3.4535937 33.044922 11.089844c0 0-32.97656262 14.752031-32.97656262 65.082031 0 11.525-.224375 25.306175.140625 39.919925 1.19750002 49.22 9.02375002 97.72843 54.53124962 109.77343 20.9825 5.55375 38.99711 6.71547 53.505856 5.91797 26.31125-1.45875 41.08203-9.38867 41.08203-9.38867l-.86914-19.08984s-18.80171 5.92758-39.91796 5.20508c-20.921254-.7175-43.006879-2.25516-46.390629-27.94141-.3125-2.25625-.46875-4.66938-.46875-7.20313 0 0 20.536953 5.0204 46.564449 6.21289 15.915.73001 30.8393-.93343 45.99805-2.74218 29.07-3.47125 54.38125-21.3818 57.5625-37.74805 5.0125-25.78125 4.59961-62.916015 4.59961-62.916015 0-50.33-32.97461-65.082031-32.97461-65.082031C166.80539 3.4535938 138.255.2425 108.59375 0h-.72852zM74.296875 39.326172c12.355 0 21.710234 4.749297 27.896485 14.248047l6.01367 10.080078 6.01563-10.080078c6.185-9.49875 15.54023-14.248047 27.89648-14.248047 10.6775 0 19.28156 3.753672 25.85156 11.076172 6.36875 7.3225 9.53907 17.218828 9.53907 29.673828v60.941408h-24.14454V81.869141c0-12.46875-5.24453-18.798829-15.73828-18.798829-11.6025 0-17.41797 7.508516-17.41797 22.353516v32.375002H96.207031V85.423828c0-14.845-5.815468-22.353515-17.417969-22.353516-10.49375 0-15.740234 6.330079-15.740234 18.798829v59.148439H38.904297V80.076172c0-12.455 3.171016-22.351328 9.541015-29.673828 6.568751-7.3225 15.172813-11.076172 25.851563-11.076172z"/></symbol>
+</svg>
diff --git a/src/static/lazy-loading.js b/src/static/lazy-loading.js
new file mode 100644
index 0000000..a403d7c
--- /dev/null
+++ b/src/static/lazy-loading.js
@@ -0,0 +1,51 @@
+// Lazy loading! Roll your own. Woot.
+// This file includes a 8unch of fall8acks and stuff like that, and is written
+// with fairly Olden JavaScript(TM), so as to work on pretty much any 8rowser
+// with JS ena8led. (If it's disa8led, there are gener8ted <noscript> tags to
+// work there.)
+
+var observer;
+
+function loadImage(image) {
+    image.src = image.dataset.original;
+}
+
+function lazyLoad(elements) {
+    for (var i = 0; i < elements.length; i++) {
+        var item = elements[i];
+        if (item.intersectionRatio > 0) {
+            observer.unobserve(item.target);
+            loadImage(item.target);
+        }
+    }
+}
+
+function lazyLoadMain() {
+    // This is a live HTMLCollection! We can't iter8te over it normally 'cuz
+    // we'd 8e mutating its value just 8y interacting with the DOM elements it
+    // contains. A while loop works just fine, even though you'd think reading
+    // over this code that this would 8e an infinitely hanging loop. It isn't!
+    var elements = document.getElementsByClassName('js-hide');
+    while (elements.length) {
+        elements[0].classList.remove('js-hide');
+    }
+
+    var lazyElements = document.getElementsByClassName('lazy');
+    if (window.IntersectionObserver) {
+        observer = new IntersectionObserver(lazyLoad, {
+            rootMargin: '200px',
+            threshold: 1.0
+        });
+        for (var i = 0; i < lazyElements.length; i++) {
+            observer.observe(lazyElements[i]);
+        }
+    } else {
+        for (var i = 0; i < lazyElements.length; i++) {
+            var element = lazyElements[i];
+            var original = element.getAttribute('data-original');
+            element.setAttribute('src', original);
+        }
+    }
+}
+
+document.addEventListener('DOMContentLoaded', lazyLoadMain);
diff --git a/src/static/site-basic.css b/src/static/site-basic.css
new file mode 100644
index 0000000..d26584a
--- /dev/null
+++ b/src/static/site-basic.css
@@ -0,0 +1,19 @@
+/**
+ * For redirects and stuff like that.
+ * Small file, not so much helped 8y this comment.
+ */
+
+html {
+    background-color: #222222;
+    color: white;
+}
+
+body {
+    padding: 15px;
+}
+
+main {
+    background-color: rgba(0, 0, 0, 0.6);
+    border: 1px dotted white;
+    padding: 20px;
+}
diff --git a/src/static/site.css b/src/static/site.css
new file mode 100644
index 0000000..ae41f88
--- /dev/null
+++ b/src/static/site.css
@@ -0,0 +1,872 @@
+/* A frontend file! Wow.
+ * This file is just loaded statically 8y <link>s in the HTML files, so there's
+ * no need to re-run upd8.js when tweaking values here. Handy!
+ */
+
+:root {
+    --primary-color: #0088ff;
+}
+
+body {
+    background: black;
+    margin: 10px;
+    overflow-y: scroll;
+}
+
+body::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+
+    background-image: url("../media/bg.jpg");
+    background-position: center;
+    background-size: cover;
+    opacity: 0.5;
+}
+
+#page-container {
+    background-color: rgba(35, 35, 35, 0.80);
+    backdrop-filter: blur(4px);
+    color: #ffffff;
+
+    max-width: 1100px;
+    margin: 10px auto 50px;
+    padding: 15px 0;
+
+    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
+}
+
+#page-container > * {
+    margin-left: 15px;
+    margin-right: 15px;
+}
+
+#banner {
+    margin: 10px 0;
+    width: 100%;
+    background: black;
+    background-color: var(--dim-color);
+    border-bottom: 1px solid var(--primary-color);
+    position: relative;
+}
+
+#banner::after {
+    content: "";
+    box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.35);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+}
+
+#banner.dim img {
+    opacity: 0.8;
+}
+
+#banner img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+a {
+    color: var(--primary-color);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+#skippers {
+    position: absolute;
+    left: -10000px;
+    top: auto;
+    width: 1px;
+    height: 1px;
+}
+
+#skippers:focus-within {
+    position: static;
+    width: unset;
+    height: unset;
+}
+
+#skippers > .skipper:not(:last-child)::after {
+    content: " \00b7 ";
+    font-weight: 800;
+}
+
+.layout-columns {
+    display: flex;
+}
+
+#header, #skippers, #footer {
+    padding: 5px;
+    font-size: 0.85em;
+}
+
+#header, #skippers {
+    margin-bottom: 10px;
+}
+
+#footer {
+    margin-top: 10px;
+}
+
+#header {
+    display: flex;
+}
+
+#header > h2 {
+    font-size: 1em;
+    margin: 0 20px 0 0;
+    font-weight: normal;
+}
+
+#header > h2 a.current {
+    font-weight: 800;
+}
+
+#header > h2.dot-between-spans > span:not(:last-child)::after {
+    content: " \00b7 ";
+    font-weight: 800;
+}
+
+#header > h2 > span {
+    white-space: nowrap;
+}
+
+#header > div {
+    flex-grow: 1;
+}
+
+#header > div > *:not(:last-child)::after {
+    content: " \00b7 ";
+    font-weight: 800;
+}
+
+#header .chronology {
+    display: inline-block;
+}
+
+#header .chronology .heading,
+#header .chronology .buttons {
+    display: inline-block;
+}
+
+footer {
+    text-align: center;
+    font-style: oblique;
+}
+
+footer > :first-child {
+    margin-top: 0;
+}
+
+footer > :last-child {
+    margin-bottom: 0;
+}
+
+.nowrap {
+    white-space: nowrap;
+}
+
+.icons {
+    font-style: normal;
+    white-space: nowrap;
+}
+
+.icon {
+    display: inline-block;
+    width: 24px;
+    height: 1em;
+    position: relative;
+}
+
+.icon > svg {
+    width: 24px;
+    height: 24px;
+    top: -0.25em;
+    position: absolute;
+    fill: var(--primary-color);
+}
+
+.rerelease {
+    opacity: 0.7;
+    font-style: oblique;
+}
+
+.content-columns {
+    columns: 2;
+}
+
+.content-columns .column {
+    break-inside: avoid;
+}
+
+.content-columns .column h2 {
+    margin-top: 0;
+    font-size: 1em;
+}
+
+.sidebar, #content, #header, #skippers, #footer {
+    background-color: rgba(0, 0, 0, 0.6);
+    border: 1px dotted var(--primary-color);
+    border-radius: 3px;
+}
+
+.sidebar-column {
+    flex: 1 1 20%;
+    min-width: 150px;
+    max-width: 250px;
+    flex-basis: 250px;
+    height: 100%;
+}
+
+.sidebar-multiple {
+    display: flex;
+    flex-direction: column;
+}
+
+.sidebar-multiple .sidebar:not(:first-child) {
+    margin-top: 10px;
+}
+
+.sidebar {
+    padding: 5px;
+    font-size: 0.85em;
+}
+
+#sidebar-left {
+    margin-right: 10px;
+}
+
+#sidebar-right {
+    margin-left: 10px;
+}
+
+.sidebar.wide {
+    max-width: 350px;
+    flex-basis: 300px;
+    flex-shrink: 0;
+    flex-grow: 1;
+}
+
+#content {
+    padding: 20px;
+    flex-grow: 1;
+    flex-shrink: 3;
+}
+
+.sidebar > h1,
+.sidebar > h2,
+.sidebar > h3,
+.sidebar > p {
+    text-align: center;
+}
+
+.sidebar h1 {
+    font-size: 1.25em;
+}
+
+.sidebar h2 {
+    font-size: 1.1em;
+    margin: 0;
+}
+
+.sidebar h3 {
+    font-size: 1.1em;
+    font-style: oblique;
+    font-variant: small-caps;
+    margin-top: 0.3em;
+    margin-bottom: 0em;
+}
+
+.sidebar > p {
+    margin: 0.5em 0;
+    padding: 0 5px;
+}
+
+.sidebar hr {
+    color: #555;
+    margin: 10px 5px;
+}
+
+.sidebar > ol, .sidebar > ul {
+    padding-left: 30px;
+    padding-right: 15px;
+}
+
+.sidebar > dl {
+    padding-right: 15px;
+    padding-left: 0;
+}
+
+.sidebar > dl dt {
+    padding-left: 10px;
+    margin-top: 0.5em;
+}
+
+.sidebar > dl dt.current {
+    font-weight: 800;
+}
+
+.sidebar > dl dd {
+    margin-left: 0;
+}
+
+.sidebar > dl dd ul {
+    padding-left: 30px;
+    margin-left: 0;
+}
+
+.sidebar > dl .side {
+    padding-left: 10px;
+}
+
+.sidebar li.current {
+    font-weight: 800;
+}
+
+.sidebar li {
+    overflow-wrap: break-word;
+}
+
+.sidebar article {
+    text-align: left;
+    margin: 5px 5px 15px 5px;
+}
+
+.sidebar article:last-child {
+    margin-bottom: 5px;
+}
+
+.sidebar article h2,
+.news-index h2 {
+    border-bottom: 1px dotted;
+}
+
+.sidebar article h2 time,
+.news-index time {
+    float: right;
+    font-weight: normal;
+}
+
+#cover-art-container {
+    float: right;
+    width: 40%;
+    max-width: 400px;
+    margin: 0 0 10px 10px;
+    font-size: 0.8em;
+}
+
+#cover-art img {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+#cover-art-container p {
+    margin-top: 5px;
+}
+
+.image-container {
+    border: 2px solid var(--primary-color);
+    box-sizing: border-box;
+    position: relative;
+    padding: 5px;
+    text-align: left;
+    background-color: var(--dim-color);
+    color: white;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+}
+
+.image-inner-area {
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+}
+
+img {
+    object-fit: cover;
+    /* these unfortunately dont take effect while loading, so...
+    text-align: center;
+    line-height: 2em;
+    text-shadow: 0 0 5px black;
+    font-style: oblique;
+    */
+}
+
+.js-hide,
+.js-show-once-data,
+.js-hide-once-data {
+    display: none;
+}
+
+a.box:focus {
+    outline: 3px double var(--primary-color);
+}
+
+a.box:focus:not(:focus-visible) {
+    outline: none;
+}
+
+a.box img {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+h1 {
+    font-size: 1.5em;
+}
+
+#content li {
+    margin-bottom: 4px;
+}
+
+#content li i {
+    white-space: nowrap;
+}
+
+.grid-listing {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+
+.grid-item {
+    display: inline-block;
+    margin: 15px;
+    text-align: center;
+    background-color: #111111;
+    border: 1px dotted var(--primary-color);
+    border-radius: 2px;
+    padding: 5px;
+}
+
+.grid-item img {
+    width: 100%;
+    height: 100%;
+    margin-top: auto;
+    margin-bottom: auto;
+}
+
+.grid-item span {
+    overflow-wrap: break-word;
+    hyphens: auto;
+}
+
+.grid-item:hover {
+    text-decoration: none;
+}
+
+.grid-actions .grid-item:hover {
+    text-decoration: underline;
+}
+
+.grid-item > span:first-of-type {
+    margin-top: 0.45em;
+    display: block;
+}
+
+.grid-item:hover > span:first-of-type {
+    text-decoration: underline;
+}
+
+.grid-listing > .grid-item {
+    flex: 1 1 26%;
+}
+
+.grid-actions {
+    display: flex;
+    flex-direction: column;
+    margin: 15px;
+}
+
+.grid-actions > .grid-item {
+    flex-basis: unset !important;
+    margin: 5px;
+    --primary-color: inherit !important;
+    --dim-color: inherit !important;
+}
+
+.grid-item {
+    flex-basis: 240px;
+    min-width: 200px;
+    max-width: 240px;
+}
+
+.grid-item:not(.large-grid-item) {
+    flex-basis: 180px;
+    min-width: 120px;
+    max-width: 180px;
+    font-size: 0.9em;
+}
+
+.square {
+    position: relative;
+    width: 100%;
+}
+
+.square::after {
+    content: "";
+    display: block;
+    padding-bottom: 100%;
+}
+
+.square-content {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.vertical-square {
+    position: relative;
+    height: 100%;
+}
+
+.vertical-square::after {
+    content: "";
+    display: block;
+    padding-right: 100%;
+}
+
+.reveal {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
+.reveal img {
+    filter: blur(20px);
+    opacity: 0.4;
+}
+
+.reveal-text {
+    color: white;
+    position: absolute;
+    top: 15px;
+    left: 10px;
+    right: 10px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.reveal-interaction {
+    opacity: 0.8;
+}
+
+.reveal.revealed img {
+    filter: none;
+    opacity: 1;
+}
+
+.reveal.revealed .reveal-text {
+    display: none;
+}
+
+#content.top-index h1,
+#content.flash-index h1 {
+    text-align: center;
+    font-size: 2em;
+}
+
+#content.flash-index h2 {
+    text-align: center;
+    font-size: 2.5em;
+    font-variant: small-caps;
+    font-style: oblique;
+    margin-bottom: 0;
+    text-align: center;
+    width: 100%;
+}
+
+#content.top-index h2 {
+    text-align: center;
+    font-size: 2em;
+    font-weight: normal;
+    margin-bottom: 0.25em;
+}
+
+.quick-info {
+    text-align: center;
+}
+
+ul.quick-info {
+    list-style: none;
+    padding-left: 0;
+}
+
+ul.quick-info li {
+    display: inline-block;
+}
+
+ul.quick-info li:not(:last-child)::after {
+    content: " \00b7 ";
+    font-weight: 800;
+}
+
+#intro-menu {
+    margin: 24px 0;
+    padding: 10px;
+    background-color: #222222;
+    text-align: center;
+    border: 1px dotted var(--primary-color);
+    border-radius: 2px;
+}
+
+#intro-menu p {
+    margin: 12px 0;
+}
+
+#intro-menu a {
+    margin: 0 6px;
+}
+
+li .by {
+    white-space: nowrap;
+    font-style: oblique;
+}
+
+p code {
+    font-size: 1em;
+    font-family: 'courier new';
+    font-weight: 800;
+}
+
+blockquote {
+    max-width: 600px;
+    margin-right: 0;
+}
+
+.long-content {
+    margin-left: 12%;
+    margin-right: 12%;
+}
+
+p img {
+    max-width: 100%;
+    height: auto;
+}
+
+dl dt {
+    padding-left: 2em;
+}
+
+dl dt {
+    margin-bottom: 2px;
+}
+
+dl dd {
+    margin-bottom: 1em;
+}
+
+dl ul, dl ol {
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.album-group-list dt {
+    font-style: oblique;
+    padding-left: 0;
+}
+
+.album-group-list dd {
+    margin-left: 0;
+}
+
+.group-chronology-link {
+    font-style: oblique;
+}
+
+hr.split::before {
+    content: "(split)";
+    color: #808080;
+}
+
+hr.split {
+    position: relative;
+    overflow: hidden;
+    border: none;
+}
+
+hr.split::after {
+    display: inline-block;
+    content: "";
+    border: 1px inset #808080;
+    width: 100%;
+    position: absolute;
+    top: 50%;
+    margin-top: -2px;
+    margin-left: 10px;
+}
+
+li > ul {
+    margin-top: 5px;
+}
+
+#info-card-container {
+    position: absolute;
+
+    left: 0;
+    right: 10px;
+
+    pointer-events: none; /* Padding area shouldn't 8e interactive. */
+    display: none;
+}
+
+#info-card-container.show,
+#info-card-container.hide {
+    display: flex;
+}
+
+#info-card-container > * {
+    flex-basis: 400px;
+}
+
+#info-card-container.show {
+    animation: 0.2s linear forwards info-card-show;
+    transition: top 0.1s, left 0.1s;
+}
+
+#info-card-container.hide {
+    animation: 0.2s linear forwards info-card-hide;
+}
+
+@keyframes info-card-show {
+    0% {
+        opacity: 0;
+        margin-top: -5px;
+    }
+
+    100% {
+        opacity: 1;
+        margin-top: 0;
+    }
+}
+
+@keyframes info-card-hide {
+    0% {
+        opacity: 1;
+        margin-top: 0;
+    }
+
+    100% {
+        opacity: 0;
+        margin-top: 5px;
+        display: none !important;
+    }
+}
+
+.info-card-decor {
+    padding-left: 3ch;
+    border-top: 1px solid white;
+}
+
+.info-card {
+    background-color: black;
+    color: white;
+
+    border: 1px dotted var(--primary-color);
+    border-radius: 3px;
+    box-shadow: 0 5px 5px black;
+
+    padding: 5px;
+    font-size: 0.9em;
+
+    pointer-events: none;
+}
+
+.info-card::after {
+    content: "";
+    display: block;
+    clear: both;
+}
+
+#info-card-container.show .info-card {
+    animation: 0.01s linear 0.2s forwards info-card-become-interactive;
+}
+
+@keyframes info-card-become-interactive {
+    to {
+        pointer-events: auto;
+    }
+}
+
+.info-card-art-container {
+    float: right;
+
+    width: 40%;
+    margin: 5px;
+    font-size: 0.8em;
+
+    /* Dynamically shown. */
+    display: none;
+}
+
+.info-card-art-container .image-container {
+    padding: 2px;
+}
+
+.info-card-art {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+
+.info-card-name {
+    font-size: 1em;
+    border-bottom: 1px dotted;
+    margin: 0;
+}
+
+.info-card p {
+    margin-top: 0.25em;
+    margin-bottom: 0.25em;
+}
+
+.info-card p:last-child {
+    margin-bottom: 0;
+}
+
+@media (max-width: 900px) {
+    .sidebar-column:not(.no-hide) {
+        display: none;
+    }
+
+    .layout-columns.vertical-when-thin {
+        flex-direction: column;
+    }
+
+    .layout-columns.vertical-when-thin > *:not(:last-child) {
+        margin-bottom: 10px;
+    }
+
+    .sidebar-column.no-hide {
+        max-width: unset !important;
+        flex-basis: unset !important;
+        margin-right: 0 !important;
+        margin-left: 0 !important;
+    }
+
+    .sidebar .news-entry:not(.first-news-entry) {
+        display: none;
+    }
+}
+
+@media (max-width: 600px) {
+    .content-columns {
+        columns: 1;
+    }
+}
diff --git a/src/strings-default.json b/src/strings-default.json
new file mode 100644
index 0000000..7a948d6
--- /dev/null
+++ b/src/strings-default.json
@@ -0,0 +1,305 @@
+{
+    "meta.languageCode": "en",
+    "count.tracks": "{TRACKS}",
+    "count.tracks.withUnit.zero": "",
+    "count.tracks.withUnit.one": "{TRACKS} track",
+    "count.tracks.withUnit.two": "",
+    "count.tracks.withUnit.few": "",
+    "count.tracks.withUnit.many": "",
+    "count.tracks.withUnit.other": "{TRACKS} tracks",
+    "count.albums": "{ALBUMS}",
+    "count.albums.withUnit.zero": "",
+    "count.albums.withUnit.one": "{ALBUMS} album",
+    "count.albums.withUnit.two": "",
+    "count.albums.withUnit.two": "",
+    "count.albums.withUnit.few": "",
+    "count.albums.withUnit.many": "",
+    "count.albums.withUnit.other": "{ALBUMS} albums",
+    "count.commentaryEntries": "{ENTRIES}",
+    "count.commentaryEntries.withUnit.zero": "",
+    "count.commentaryEntries.withUnit.one": "{ENTRIES} entry",
+    "count.commentaryEntries.withUnit.two": "",
+    "count.commentaryEntries.withUnit.few": "",
+    "count.commentaryEntries.withUnit.many": "",
+    "count.commentaryEntries.withUnit.other": "{ENTRIES} entries",
+    "count.contributions": "{CONTRIBUTIONS}",
+    "count.contributions.withUnit.zero": "",
+    "count.contributions.withUnit.one": "{CONTRIBUTIONS} contribution",
+    "count.contributions.withUnit.two": "",
+    "count.contributions.withUnit.few": "",
+    "count.contributions.withUnit.many": "",
+    "count.contributions.withUnit.other": "{CONTRIBUTIONS} contributions",
+    "count.coverArts": "{COVER_ARTS}",
+    "count.coverArts.withUnit.zero": "",
+    "count.coverArts.withUnit.one": "{COVER_ARTS} cover art",
+    "count.coverArts.withUnit.two": "",
+    "count.coverArts.withUnit.few": "",
+    "count.coverArts.withUnit.many": "",
+    "count.coverArts.withUnit.other": "{COVER_ARTS} cover arts",
+    "count.timesReferenced": "{TIMES_REFERENCED}",
+    "count.timesReferenced.withUnit.zero": "",
+    "count.timesReferenced.withUnit.one": "{TIMES_REFERENCED} time referenced",
+    "count.timesReferenced.withUnit.two": "",
+    "count.timesReferenced.withUnit.few": "",
+    "count.timesReferenced.withUnit.many": "",
+    "count.timesReferenced.withUnit.other": "{TIMES_REFERENCED} times referenced",
+    "count.words": "{WORDS}",
+    "count.words.thousand": "{WORDS}k",
+    "count.words.withUnit.zero": "",
+    "count.words.withUnit.one": "{WORDS} word",
+    "count.words.withUnit.two": "",
+    "count.words.withUnit.few": "",
+    "count.words.withUnit.many": "",
+    "count.words.withUnit.other": "{WORDS} words",
+    "count.timesUsed": "{TIMES_USED}",
+    "count.timesUsed.withUnit.zero": "",
+    "count.timesUsed.withUnit.one": "used {TIMES_USED} time",
+    "count.timesUsed.withUnit.two": "",
+    "count.timesUsed.withUnit.few": "",
+    "count.timesUsed.withUnit.many": "",
+    "count.timesUsed.withUnit.other": "used {TIMES_USED} times",
+    "count.index.zero": "",
+    "count.index.one": "{INDEX}st",
+    "count.index.two": "{INDEX}nd",
+    "count.index.few": "{INDEX}rd",
+    "count.index.many": "",
+    "count.index.other": "{INDEX}th",
+    "count.duration.hours": "{HOURS}:{MINUTES}:{SECONDS}",
+    "count.duration.hours.withUnit": "{HOURS}:{MINUTES}:{SECONDS} hours",
+    "count.duration.minutes": "{MINUTES}:{SECONDS}",
+    "count.duration.minutes.withUnit": "{MINUTES}:{SECONDS} minutes",
+    "count.duration.approximate": "~{DURATION}",
+    "count.duration.missing": "_:__",
+    "releaseInfo.by": "By {ARTISTS}.",
+    "releaseInfo.from": "From {ALBUM}.",
+    "releaseInfo.coverArtBy": "Cover art by {ARTISTS}.",
+    "releaseInfo.wallpaperArtBy": "Wallpaper art by {ARTISTS}.",
+    "releaseInfo.bannerArtBy": "Banner art by {ARTISTS}.",
+    "releaseInfo.released": "Released {DATE}.",
+    "releaseInfo.artReleased": "Art released {DATE}.",
+    "releaseInfo.addedToWiki": "Added to wiki {DATE}.",
+    "releaseInfo.duration": "Duration: {DURATION}.",
+    "releaseInfo.viewCommentary": "View {LINK}!",
+    "releaseInfo.viewCommentary.link": "commentary page",
+    "releaseInfo.listenOn": "Listen on {LINKS}.",
+    "releaseInfo.listenOn.noLinks": "This track has no URLs at which it can be listened.",
+    "releaseInfo.visitOn": "Visit on {LINKS}.",
+    "releaseInfo.playOn": "Play on {LINKS}.",
+    "releaseInfo.alsoReleasedAs": "Also released as:",
+    "releaseInfo.alsoReleasedAs.item": "{TRACK} (on {ALBUM})",
+    "releaseInfo.contributors": "Contributors:",
+    "releaseInfo.tracksReferenced": "Tracks that {TRACK} references:",
+    "releaseInfo.tracksThatReference": "Tracks that reference {TRACK}:",
+    "releaseInfo.flashesThatFeature": "Flashes & games that feature {TRACK}:",
+    "releaseInfo.flashesThatFeature.item": "{FLASH}",
+    "releaseInfo.flashesThatFeature.item.asDifferentRelease": "{FLASH} (as {TRACK})",
+    "releaseInfo.lyrics": "Lyrics:",
+    "releaseInfo.artistCommentary": "Artist commentary:",
+    "releaseInfo.artistCommentary.seeOriginalRelease": "See {ORIGINAL}!",
+    "releaseInfo.artTags": "Tags:",
+    "releaseInfo.note": "Note:",
+    "trackList.group": "{GROUP} ({DURATION}):",
+    "trackList.item.withDuration": "({DURATION}) {TRACK}",
+    "trackList.item.withDuration.withArtists": "({DURATION}) {TRACK} {BY}",
+    "trackList.item.withArtists": "{TRACK} {BY}",
+    "trackList.item.withArtists.by": "by {ARTISTS}",
+    "trackList.item.rerelease": "{TRACK} (re-release)",
+    "misc.alt.albumCover": "album cover",
+    "misc.alt.albumBanner": "album banner",
+    "misc.alt.trackCover": "track cover",
+    "misc.alt.artistAvatar": "artist avatar",
+    "misc.alt.flashArt": "flash art",
+    "misc.chronology.seeArtistPages": "(See artist pages for chronology info!)",
+    "misc.chronology.heading.coverArt": "{INDEX} cover art by {ARTIST}",
+    "misc.chronology.heading.flash": "{INDEX} flash/game by {ARTIST}",
+    "misc.chronology.heading.track": "{INDEX} track by {ARTIST}",
+    "misc.external.domain": "External ({DOMAIN})",
+    "misc.external.bandcamp": "Bandcamp",
+    "misc.external.bandcamp.domain": "Bandcamp ({DOMAIN})",
+    "misc.external.deviantart": "DeviantArt",
+    "misc.external.instagram": "Instagram",
+    "misc.external.mastodon": "Mastodon",
+    "misc.external.mastodon.domain": "Mastodon ({DOMAIN})",
+    "misc.external.patreon": "Patreon",
+    "misc.external.poetryFoundation": "Poetry Foundation",
+    "misc.external.soundcloud": "SoundCloud",
+    "misc.external.tumblr": "Tumblr",
+    "misc.external.twitter": "Twitter",
+    "misc.external.wikipedia": "Wikipedia",
+    "misc.external.youtube": "YouTube",
+    "misc.external.youtube.playlist": "YouTube (playlist)",
+    "misc.external.youtube.fullAlbum": "YouTube (full album)",
+    "misc.external.flash.bgreco": "{LINK} (HQ Audio)",
+    "misc.external.flash.homestuck.page": "{LINK} (page {PAGE})",
+    "misc.external.flash.homestuck.secret": "{LINK} (secret page)",
+    "misc.external.flash.youtube": "{LINK} (on any device)",
+    "misc.nav.previous": "Previous",
+    "misc.nav.next": "Next",
+    "misc.nav.info": "Info",
+    "misc.nav.gallery": "Gallery",
+    "misc.skippers.skipToContent": "Skip to content",
+    "misc.skippers.skipToSidebar": "Skip to sidebar",
+    "misc.skippers.skipToSidebar.left": "Skip to sidebar (left)",
+    "misc.skippers.skipToSidebar.right": "Skip to sidebar (right)",
+    "misc.skippers.skipToFooter": "Skip to footer",
+    "misc.jumpTo": "Jump to:",
+    "misc.jumpTo.withLinks": "Jump to: {LINKS}.",
+    "misc.contentWarnings": "cw: {WARNINGS}",
+    "misc.contentWarnings.reveal": "click to show",
+    "misc.albumGridDetails": "({TRACKS}, {TIME})",
+    "homepage.title": "{TITLE}",
+    "homepage.news.title": "News",
+    "homepage.news.entry.viewRest": "(View rest of entry!)",
+    "albumSidebar.trackList.group": "{GROUP}",
+    "albumSidebar.trackList.group.withRange": "{GROUP} ({RANGE})",
+    "albumSidebar.trackList.item": "{TRACK}",
+    "albumSidebar.groupBox.title": "{GROUP}",
+    "albumSidebar.groupBox.next": "Next: {ALBUM}",
+    "albumSidebar.groupBox.previous": "Previous: {ALBUM}",
+    "albumPage.title": "{ALBUM}",
+    "albumPage.nav.album": "{ALBUM}",
+    "albumPage.nav.randomTrack": "Random Track",
+    "albumCommentaryPage.title": "{ALBUM} - Commentary",
+    "albumCommentaryPage.infoLine": "{WORDS} across {ENTRIES}.",
+    "albumCommentaryPage.nav.album": "Album: {ALBUM}",
+    "albumCommentaryPage.entry.title.albumCommentary": "Album commentary",
+    "albumCommentaryPage.entry.title.trackCommentary": "{TRACK}",
+    "artistPage.title": "{ARTIST}",
+    "artistPage.creditList.album": "{ALBUM}",
+    "artistPage.creditList.album.withDate": "{ALBUM} ({DATE})",
+    "artistPage.creditList.album.withDate.withDuration": "{ALBUM} ({DATE}; {DURATION})",
+    "artistPage.creditList.flashAct": "{ACT}",
+    "artistPage.creditList.flashAct.withDateRange": "{ACT} ({DATE_RANGE})",
+    "artistPage.creditList.entry.track": "{TRACK}",
+    "artistPage.creditList.entry.track.withDuration": "({DURATION}) {TRACK}",
+    "artistPage.creditList.entry.album.coverArt": "(cover art)",
+    "artistPage.creditList.entry.album.wallpaperArt": "(wallpaper art)",
+    "artistPage.creditList.entry.album.bannerArt": "(banner art)",
+    "artistPage.creditList.entry.album.commentary": "(album commentary)",
+    "artistPage.creditList.entry.flash": "{FLASH}",
+    "artistPage.creditList.entry.rerelease": "{ENTRY} (re-release)",
+    "artistPage.creditList.entry.withContribution": "{ENTRY} ({CONTRIBUTION})",
+    "artistPage.creditList.entry.withArtists": "{ENTRY} (with {ARTISTS})",
+    "artistPage.creditList.entry.withArtists.withContribution": "{ENTRY} ({CONTRIBUTION}; with {ARTISTS})",
+    "artistPage.contributedDurationLine": "{ARTIST} has contributed {DURATION} of music shared on this wiki.",
+    "artistPage.musicGroupsLine": "Contributed music to groups: {GROUPS}",
+    "artistPage.artGroupsLine": "Contributed art to groups: {GROUPS}",
+    "artistPage.groupsLine.item": "{GROUP} ({CONTRIBUTIONS})",
+    "artistPage.trackList.title": "Tracks",
+    "artistPage.unreleasedTrackList.title": "Unreleased Tracks",
+    "artistPage.artList.title": "Art",
+    "artistPage.flashList.title": "Flashes & Games",
+    "artistPage.commentaryList.title": "Commentary",
+    "artistPage.viewArtGallery": "View {LINK}!",
+    "artistPage.viewArtGallery.orBrowseList": "View {LINK}! Or browse the list:",
+    "artistPage.viewArtGallery.link": "art gallery",
+    "artistPage.nav.artist": "Artist: {ARTIST}",
+    "artistGalleryPage.title": "{ARTIST} - Gallery",
+    "artistGalleryPage.infoLine": "Contributed to {COVER_ARTS}.",
+    "commentaryIndex.title": "Commentary",
+    "commentaryIndex.infoLine": "{WORDS} across {ENTRIES}, in all.",
+    "commentaryIndex.albumList.title": "Choose an album:",
+    "commentaryIndex.albumList.item": "{ALBUM} ({WORDS} across {ENTRIES})",
+    "flashIndex.title": "Flashes & Games",
+    "flashPage.title": "{FLASH}",
+    "flashPage.nav.flash": "{FLASH}",
+    "groupSidebar.title": "Groups",
+    "groupSidebar.groupList.category": "{CATEGORY}",
+    "groupSidebar.groupList.item": "{GROUP}",
+    "groupPage.nav.group": "Group: {GROUP}",
+    "groupInfoPage.title": "{GROUP}",
+    "groupInfoPage.viewAlbumGallery": "View {LINK}! Or browse the list:",
+    "groupInfoPage.viewAlbumGallery.link": "album gallery",
+    "groupInfoPage.albumList.title": "Albums",
+    "groupInfoPage.albumList.item": "({YEAR}) {ALBUM}",
+    "groupGalleryPage.title": "{GROUP} - Gallery",
+    "groupGalleryPage.infoLine": "{TRACKS} across {ALBUMS}, totaling {TIME}.",
+    "listingIndex.title": "Listings",
+    "listingIndex.infoLine": "{WIKI}: {TRACKS} across {ALBUMS}, totaling {DURATION}.",
+    "listingIndex.exploreList": "Feel free to explore any of the listings linked below and in the sidebar!",
+    "listingPage.listAlbums.byName.title": "Albums - by Name",
+    "listingPage.listAlbums.byName.item": "{ALBUM} ({TRACKS})",
+    "listingPage.listAlbums.byTracks.title": "Albums - by Tracks",
+    "listingPage.listAlbums.byTracks.item": "{ALBUM} ({TRACKS})",
+    "listingPage.listAlbums.byDuration.title": "Albums - by Duration",
+    "listingPage.listAlbums.byDuration.item": "{ALBUM} ({DURATION})",
+    "listingPage.listAlbums.byDate.title": "Albums - by Date",
+    "listingPage.listAlbums.byDate.item": "{ALBUM} ({DATE})",
+    "listingPage.listAlbums.byDateAdded.title": "Albums - by Date Added to Wiki",
+    "listingPage.listAlbums.byDateAdded.date": "{DATE}",
+    "listingPage.listAlbums.byDateAdded.album": "{ALBUM}",
+    "listingPage.listArtists.byName.title": "Artists - by Name",
+    "listingPage.listArtists.byName.item": "{ARTIST} ({CONTRIBUTIONS})",
+    "listingPage.listArtists.byContribs.title": "Artists - by Contributions",
+    "listingPage.listArtists.byContribs.item": "{ARTIST} ({CONTRIBUTIONS})",
+    "listingPage.listArtists.byCommentary.title": "Artists - by Commentary Entries",
+    "listingPage.listArtists.byCommentary.item": "{ARTIST} ({ENTRIES})",
+    "listingPage.listArtists.byDuration.title": "Artists - by Duration",
+    "listingPage.listArtists.byDuration.item": "{ARTIST} ({DURATION})",
+    "listingPage.listArtists.byLatest.title": "Artists - by Latest Contribution",
+    "listingPage.listArtists.byLatest.item": "{ARTIST} ({DATE})",
+    "listingPage.listGroups.byName.title": "Groups - by Name",
+    "listingPage.listGroups.byName.item": "{GROUP} ({GALLERY})",
+    "listingPage.listGroups.byName.item.gallery": "Gallery",
+    "listingPage.listGroups.byCategory.title": "Groups - by Category",
+    "listingPage.listGroups.byCategory.category": "{CATEGORY}",
+    "listingPage.listGroups.byCategory.group": "{GROUP} ({GALLERY})",
+    "listingPage.listGroups.byCategory.group.gallery": "Gallery",
+    "listingPage.listGroups.byAlbums.title": "Groups - by Albums",
+    "listingPage.listGroups.byAlbums.item": "{GROUP} ({ALBUMS})",
+    "listingPage.listGroups.byTracks.title": "Groups - by Tracks",
+    "listingPage.listGroups.byTracks.item": "{GROUP} ({TRACKS})",
+    "listingPage.listGroups.byDuration.title": "Groups - by Duration",
+    "listingPage.listGroups.byDuration.item": "{GROUP} ({DURATION})",
+    "listingPage.listGroups.byLatest.title": "Groups - by Latest Album",
+    "listingPage.listGroups.byLatest.item": "{GROUP} ({DATE})",
+    "listingPage.listTracks.byName.title": "Tracks - by Name",
+    "listingPage.listTracks.byName.item": "{TRACK}",
+    "listingPage.listTracks.byAlbum.title": "Tracks - by Album",
+    "listingPage.listTracks.byAlbum.album": "{ALBUM}",
+    "listingPage.listTracks.byAlbum.track": "{TRACK}",
+    "listingPage.listTracks.byDate.title": "Tracks - by Date",
+    "listingPage.listTracks.byDate.album": "{ALBUM} ({DATE})",
+    "listingPage.listTracks.byDate.track": "{TRACK}",
+    "listingPage.listTracks.byDate.track.rerelease": "{TRACK} (re-release)",
+    "listingPage.listTracks.byDuration.title": "Tracks - by Duration",
+    "listingPage.listTracks.byDuration.item": "{TRACK} ({DURATION})",
+    "listingPage.listTracks.byDurationInAlbum.title": "Tracks - by Duration (in Album)",
+    "listingPage.listTracks.byDurationInAlbum.album": "{ALBUM}",
+    "listingPage.listTracks.byDurationInAlbum.track": "{TRACK} ({DURATION})",
+    "listingPage.listTracks.byTimesReferenced.title": "Tracks - by Times Referenced",
+    "listingPage.listTracks.byTimesReferenced.item": "{TRACK} ({TIMES_REFERENCED})",
+    "listingPage.listTracks.inFlashes.byAlbum.title": "Tracks - in Flashes & Games (by Album)",
+    "listingPage.listTracks.inFlashes.byAlbum.album": "{ALBUM} ({DATE})",
+    "listingPage.listTracks.inFlashes.byAlbum.track": "{TRACK} (in {FLASHES})",
+    "listingPage.listTracks.inFlashes.byFlash.title": "Tracks - in Flashes & Games (by Flash)",
+    "listingPage.listTracks.inFlashes.byFlash.flash": "{FLASH} ({DATE})",
+    "listingPage.listTracks.inFlashes.byFlash.track": "{TRACK} (from {ALBUM})",
+    "listingPage.listTracks.withLyrics.title": "Tracks - with Lyrics",
+    "listingPage.listTracks.withLyrics.album": "{ALBUM} ({DATE})",
+    "listingPage.listTracks.withLyrics.track": "{TRACK}",
+    "listingPage.listTags.byName.title": "Tags - by Name",
+    "listingPage.listTags.byName.item": "{TAG} ({TIMES_USED})",
+    "listingPage.listTags.byUses.title": "Tags - by Uses",
+    "listingPage.listTags.byUses.item": "{TAG} ({TIMES_USED})",
+    "listingPage.misc.trackContributors": "Track Contributors",
+    "listingPage.misc.artContributors": "Art Contributors",
+    "listingPage.misc.artAndFlashContributors": "Art & Flash Contributors",
+    "newsIndex.title": "News",
+    "newsIndex.entry.viewRest": "(View rest of entry!)",
+    "newsEntryPage.title": "{ENTRY}",
+    "newsEntryPage.published": "(Published {DATE}.)",
+    "newsEntryPage.nav.news": "News",
+    "newsEntryPage.nav.entry": "{DATE}: {ENTRY}",
+    "redirectPage.title": "Moved to {TITLE}",
+    "redirectPage.infoLine": "This page has been moved to {TARGET}.",
+    "tagPage.title": "{TAG}",
+    "tagPage.infoLine": "Appears in {COVER_ARTS}.",
+    "tagPage.nav.tag": "Tag: {TAG}",
+    "trackPage.title": "{TRACK}",
+    "trackPage.referenceList.fandom": "Fandom:",
+    "trackPage.referenceList.official": "Official:",
+    "trackPage.nav.track": "{TRACK}",
+    "trackPage.nav.track.withNumber": "{NUMBER}. {TRACK}",
+    "trackPage.nav.random": "Random"
+}
diff --git a/src/upd8.js b/src/upd8.js
new file mode 100755
index 0000000..c0bea08
--- /dev/null
+++ b/src/upd8.js
@@ -0,0 +1,6395 @@
+#!/usr/bin/env node
+
+// HEY N8RDS!
+//
+// This is one of the 8ACKEND FILES. It's not used anywhere on the actual site
+// you are pro8a8ly using right now.
+//
+// Specifically, this one does all the actual work of the music wiki. The
+// process looks something like this:
+//
+//   1. Crawl the music directories. Well, not so much "crawl" as "look inside
+//      the folders for each al8um, and read the metadata file descri8ing that
+//      al8um and the tracks within."
+//
+//   2. Read that metadata. I'm writing this 8efore actually doing any of the
+//      code, and I've gotta admit I have no idea what file format they're
+//      going to 8e in. May8e JSON, 8ut more likely some weird custom format
+//      which will 8e a lot easier to edit.
+//
+//   3. Generate the page files! They're just static index.html files, and are
+//      what gh-pages (or wherever this is hosted) will show to clients.
+//      Hopefully pretty minimalistic HTML, 8ut like, shrug. They'll reference
+//      CSS (and maaaaaaaay8e JS) files, hard-coded somewhere near the root.
+//
+//   4. Print an awesome message which says the process is done. This is the
+//      most important step.
+//
+// Oh yeah, like. Just run this through some relatively recent version of
+// node.js and you'll 8e fine. ...Within the project root. O8viously.
+
+// HEY FUTURE ME!!!!!!!! Don't forget to implement artist pages! Those are,
+// like, the coolest idea you've had yet, so DO NOT FORGET. (Remem8er, link
+// from track listings, etc!) --- Thanks, past me. To futurerer me: an al8um
+// listing page (a list of all the al8ums)! Make sure to sort these 8y date -
+// we'll need a new field for al8ums.
+
+// ^^^^^^^^ DID THAT! 8ut also, artist images. Pro8a8ly stolen from the fandom
+// wiki (I found half those images anywayz).
+
+// TRACK ART CREDITS. This is a must.
+
+// 2020-08-23
+// ATTENTION ALL 8*TCHES AND OTHER GENDER TRUCKERS: AS IT TURNS OUT, THIS CODE
+// ****SUCKS****. I DON'T THINK ANYTHING WILL EVER REDEEM IT, 8UT THAT DOESN'T
+// MEAN WE CAN'T TAKE SOME ACTION TO MAKE WRITING IT A LITTLE LESS TERRI8LE.
+// We're gonna start defining STRUCTURES to make things suck less!!!!!!!!
+// No classes 8ecause those are a huge pain and like, pro8a8ly 8ad performance
+// or whatever -- just some standard structures that should 8e followed
+// wherever reasona8le. Only one I need today is the contri8 one 8ut let's put
+// any new general-purpose structures here too, ok?
+//
+// Contri8ution: {who, what, date, thing}. D8 and thing are the new fields.
+//
+// Use these wisely, which is to say all the time and instead of whatever
+// terri8le new pseudo structure you're trying to invent!!!!!!!!
+//
+// Upd8 2021-01-03: Soooooooo we didn't actually really end up using these,
+// lol? Well there's still only one anyway. Kinda ended up doing a 8ig refactor
+// of all the o8ject structures today. It's not *especially* relevant 8ut feels
+// worth mentioning? I'd get rid of this comment 8lock 8ut I like it too much!
+// Even though I haven't actually reread it, lol. 8ut yeah, hopefully in the
+// spirit of this "make things more consistent" attitude I 8rought up 8ack in
+// August, stuff's lookin' 8etter than ever now. W00t!
+
+import * as path from 'path';
+import { promisify } from 'util';
+import { fileURLToPath } from 'url';
+
+// I made this dependency myself! A long, long time ago. It is pro8a8ly my
+// most useful li8rary ever. I'm not sure 8esides me actually uses it, though.
+import fixWS from 'fix-whitespace';
+// Wait nevermind, I forgot a8out why-do-kids-love-the-taste-of-cinnamon-toast-
+// crunch. THAT is my 8est li8rary.
+
+// It stands for "HTML Entities", apparently. Cursed.
+import he from 'he';
+
+import {
+    // This is the dum8est name for a function possi8le. Like, SURE, fine, may8e
+    // the UNIX people had some valid reason to go with the weird truncated
+    // lowercased convention they did. 8ut Node didn't have to ALSO use that
+    // convention! Would it have 8een so hard to just name the function
+    // something like fs.readDirectory???????? No, it wouldn't have 8een.
+    readdir,
+    // ~~ 8ut okay, like, look at me. DOING THE SAME THING. See, *I* could have
+    // named my promisified function differently, and yet I did not. I literally
+    // cannot explain why. We are all used to following in the 8ad decisions of
+    // our ancestors, and never never never never never never never consider
+    // that hey, may8e we don't need to make the exact same decisions they did.
+    // Even when we're perfectly aware th8t's exactly what we're doing! ~~
+    //
+    // 2021 ADDENDUM: Ok, a year and a half later the a8ove is still true,
+    //                except for the part a8out promisifying, since fs/promises
+    //                already does that for us. 8ut I could STILL import it
+    //                using my own name (`readdir as readDirectory`), and yet
+    //                here I am, defin8tely not doing that.
+    //                SOME THINGS NEVER CHANGE.
+    //
+    // Programmers, including me, are all pretty stupid.
+
+    // 8ut I mean, come on. Look. Node decided to use readFile, instead of like,
+    // what, cat? Why couldn't they rename readdir too???????? As Johannes
+    // Kepler once so elegantly put it: "Shrug."
+    readFile,
+    writeFile,
+    access,
+    mkdir,
+    symlink,
+    unlink
+} from 'fs/promises';
+
+import genThumbs from './gen-thumbs.js';
+import * as html from './util/html.js';
+import link from './util/link.js';
+
+import {
+    decorateTime,
+    logWarn,
+    logInfo,
+    logError,
+    parseOptions,
+    progressPromiseAll
+} from './util/cli.js';
+
+import {
+    getLinkThemeString,
+    getThemeString
+} from './util/colors.js';
+
+import {
+    chunkByConditions,
+    chunkByProperties,
+    getAllTracks,
+    getArtistCommentary,
+    getArtistNumContributions,
+    getKebabCase,
+    sortByArtDate,
+    sortByDate,
+    sortByName
+} from './util/wiki-data.js';
+
+import {
+    call,
+    filterEmptyLines,
+    mapInPlace,
+    queue,
+    splitArray,
+    unique,
+    withEntries
+} from './util/sugar.js';
+
+import {
+    generateURLs,
+    thumb
+} from './util/urls.js';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const CACHEBUST = 5;
+
+const WIKI_INFO_FILE = 'wiki-info.txt';
+const HOMEPAGE_INFO_FILE = 'homepage.txt';
+const ARTIST_DATA_FILE = 'artists.txt';
+const FLASH_DATA_FILE = 'flashes.txt';
+const NEWS_DATA_FILE = 'news.txt';
+const TAG_DATA_FILE = 'tags.txt';
+const GROUP_DATA_FILE = 'groups.txt';
+const STATIC_PAGE_DATA_FILE = 'static-pages.txt';
+const DEFAULT_STRINGS_FILE = 'strings-default.json';
+
+const UNRELEASED_TRACKS_DIRECTORY = 'unreleased-tracks';
+const OFFICIAL_GROUP_DIRECTORY = 'official';
+const FANDOM_GROUP_DIRECTORY = 'fandom';
+
+// Code that's common 8etween the 8uild code (i.e. upd8.js) and gener8ted
+// site code should 8e put here. Which, uh, ~~only really means this one
+// file~~ is now a variety of useful utilities!
+//
+// Rather than hard code it, anything in this directory can 8e shared across
+// 8oth ends of the code8ase.
+// (This gets symlinked into the --data directory.)
+const UTILITY_DIRECTORY = 'util';
+
+// Code that's used only in the static site! CSS, cilent JS, etc.
+// (This gets symlinked into the --data directory.)
+const STATIC_DIRECTORY = 'static';
+
+// Su8directory under provided --data directory for al8um files, which are
+// read from and processed to compose the majority of album and track data.
+const DATA_ALBUM_DIRECTORY = 'album';
+
+// Shared varia8les! These are more efficient to access than a shared varia8le
+// (or at least I h8pe so), and are easier to pass across functions than a
+// 8unch of specific arguments.
+//
+// Upd8: Okay yeah these aren't actually any different. Still cleaner than
+// passing around a data object containing all this, though.
+let dataPath;
+let mediaPath;
+let langPath;
+let outputPath;
+
+let wikiInfo;
+let homepageInfo;
+let albumData;
+let trackData;
+let flashData;
+let flashActData;
+let newsData;
+let tagData;
+let groupData;
+let groupCategoryData;
+let staticPageData;
+
+let artistNames;
+let artistData;
+let artistAliasData;
+
+let officialAlbumData;
+let fandomAlbumData;
+let justEverythingMan; // tracks, albums, flashes -- don't forget to upd8 toAnythingMan!
+let justEverythingSortedByArtDateMan;
+let contributionData;
+
+let queueSize;
+
+let languages;
+
+const urlSpec = {
+    data: {
+        prefix: 'data/',
+
+        paths: {
+            root: '',
+            path: '<>',
+
+            album: 'album/<>',
+            artist: 'artist/<>',
+            track: 'track/<>'
+        }
+    },
+
+    localized: {
+        // TODO: Implement this.
+        // prefix: '_languageCode',
+
+        paths: {
+            root: '',
+            path: '<>',
+
+            home: '',
+
+            album: 'album/<>/',
+            albumCommentary: 'commentary/album/<>/',
+
+            artist: 'artist/<>/',
+            artistGallery: 'artist/<>/gallery/',
+
+            commentaryIndex: 'commentary/',
+
+            flashIndex: 'flash/',
+            flash: 'flash/<>/',
+
+            groupInfo: 'group/<>/',
+            groupGallery: 'group/<>/gallery/',
+
+            listingIndex: 'list/',
+            listing: 'list/<>/',
+
+            newsIndex: 'news/',
+            newsEntry: 'news/<>/',
+
+            staticPage: '<>/',
+            tag: 'tag/<>/',
+            track: 'track/<>/'
+        }
+    },
+
+    shared: {
+        paths: {
+            root: '',
+            path: '<>',
+
+            utilityRoot: 'util',
+            staticRoot: 'static',
+
+            utilityFile: 'util/<>',
+            staticFile: 'static/<>'
+        }
+    },
+
+    media: {
+        prefix: 'media/',
+
+        paths: {
+            root: '',
+            path: '<>',
+
+            albumCover: 'album-art/<>/cover.jpg',
+            albumWallpaper: 'album-art/<>/bg.jpg',
+            albumBanner: 'album-art/<>/banner.jpg',
+            trackCover: 'album-art/<>/<>.jpg',
+            artistAvatar: 'artist-avatar/<>.jpg',
+            flashArt: 'flash-art/<>.jpg'
+        }
+    }
+};
+
+// This gets automatically switched in place when working from a baseDirectory,
+// so it should never be referenced manually.
+urlSpec.localizedWithBaseDirectory = {
+    paths: withEntries(
+        urlSpec.localized.paths,
+        entries => entries.map(([key, path]) => [key, '<>/' + path])
+    )
+};
+
+const urls = generateURLs(urlSpec);
+
+const searchHelper = (keys, dataFn, findFn) => ref => {
+    if (!ref) return null;
+    ref = ref.replace(new RegExp(`^(${keys.join('|')}):`), '');
+    const found = findFn(ref, dataFn());
+    if (!found) {
+        logWarn`Didn't match anything for ${ref}! (${keys.join(', ')})`;
+    }
+    return found;
+};
+
+const matchDirectory = (ref, data) => data.find(({ directory }) => directory === ref);
+
+const matchDirectoryOrName = (ref, data) => {
+    let thing;
+
+    thing = matchDirectory(ref, data);
+    if (thing) return thing;
+
+    thing = data.find(({ name }) => name === ref);
+    if (thing) return thing;
+
+    thing = data.find(({ name }) => name.toLowerCase() === ref.toLowerCase());
+    if (thing) {
+        logWarn`Bad capitalization: ${'\x1b[31m' + ref} -> ${'\x1b[32m' + thing.name}`;
+        return thing;
+    }
+
+    return null;
+};
+
+const search = {
+    album: searchHelper(['album', 'album-commentary'], () => albumData, matchDirectoryOrName),
+    artist: searchHelper(['artist', 'artist-gallery'], () => artistData, matchDirectoryOrName),
+    flash: searchHelper(['flash'], () => flashData, matchDirectory),
+    group: searchHelper(['group', 'group-gallery'], () => groupData, matchDirectoryOrName),
+    listing: searchHelper(['listing'], () => listingSpec, matchDirectory),
+    newsEntry: searchHelper(['news-entry'], () => newsData, matchDirectory),
+    staticPage: searchHelper(['static'], () => staticPageData, matchDirectory),
+    tag: searchHelper(['tag'], () => tagData, (ref, data) =>
+        matchDirectoryOrName(ref.startsWith('cw: ') ? ref.slice(4) : ref, data)),
+    track: searchHelper(['track'], () => trackData, matchDirectoryOrName)
+};
+
+// Localiz8tion time! Or l10n as the neeeeeeeerds call it. Which is a terri8le
+// name and not one I intend on using, thank you very much. (Don't even get me
+// started on """"a11y"""".)
+//
+// All the default strings are in strings-default.json, if you're curious what
+// those actually look like. Pretty much it's "I like {ANIMAL}" for example.
+// For each language, the o8ject gets turned into a single function of form
+// f(key, {args}). It searches for a key in the o8ject and uses the string it
+// finds (or the one in strings-default.json) as a templ8 evaluated with the
+// arguments passed. (This function gets treated as an o8ject too; it gets
+// the language code attached.)
+//
+// The function's also responsi8le for getting rid of dangerous characters
+// (quotes and angle tags), though only within the templ8te (not the args),
+// and it converts the keys of the arguments o8ject from camelCase to
+// CONSTANT_CASE too.
+function genStrings(stringsJSON, defaultJSON = null) {
+    // genStrings will only 8e called once for each language, and it happens
+    // right at the start of the program (or at least 8efore 8uilding pages).
+    // So, now's a good time to valid8te the strings and let any warnings be
+    // known.
+
+    // May8e contrary to the argument name, the arguments should 8e o8jects,
+    // not actual JSON-formatted strings!
+    if (typeof stringsJSON !== 'object' || stringsJSON.constructor !== Object) {
+        return {error: `Expected an object (parsed JSON) for stringsJSON.`};
+    }
+    if (typeof defaultJSON !== 'object') { // typeof null === object. I h8 JS.
+        return {error: `Expected an object (parsed JSON) or null for defaultJSON.`};
+    }
+
+    // All languages require a language code.
+    const code = stringsJSON['meta.languageCode'];
+    if (!code) {
+        return {error: `Missing language code.`};
+    }
+    if (typeof code !== 'string') {
+        return {error: `Expected language code to be a string.`};
+    }
+
+    // Every value on the provided o8ject should be a string.
+    // (This is lazy, but we only 8other checking this on stringsJSON, on the
+    // assumption that defaultJSON was passed through this function too, and so
+    // has already been valid8ted.)
+    {
+        let err = false;
+        for (const [ key, value ] of Object.entries(stringsJSON)) {
+            if (typeof value !== 'string') {
+                logError`(${code}) The value for ${key} should be a string.`;
+                err = true;
+            }
+        }
+        if (err) {
+            return {error: `Expected all values to be a string.`};
+        }
+    }
+
+    // Checking is generally done against the default JSON, so we'll skip out
+    // if that isn't provided (which should only 8e the case when it itself is
+    // 8eing processed as the first loaded language).
+    if (defaultJSON) {
+        // Warn for keys that are missing or unexpected.
+        const expectedKeys = Object.keys(defaultJSON);
+        const presentKeys = Object.keys(stringsJSON);
+        for (const key of presentKeys) {
+            if (!expectedKeys.includes(key)) {
+                logWarn`(${code}) Unexpected translation key: ${key} - this won't be used!`;
+            }
+        }
+        for (const key of expectedKeys) {
+            if (!presentKeys.includes(key)) {
+                logWarn`(${code}) Missing translation key: ${key} - this won't be localized!`;
+            }
+        }
+    }
+
+    // Valid8tion is complete, 8ut We can still do a little caching to make
+    // repeated actions faster.
+
+    // We're gonna 8e mut8ting the strings dictionary o8ject from here on out.
+    // We make a copy so we don't mess with the one which was given to us.
+    stringsJSON = Object.assign({}, stringsJSON);
+
+    // Preemptively pass everything through HTML encoding. This will prevent
+    // strings from embedding HTML tags or accidentally including characters
+    // that throw HTML parsers off.
+    for (const key of Object.keys(stringsJSON)) {
+        stringsJSON[key] = he.encode(stringsJSON[key], {useNamedReferences: true});
+    }
+
+    // It's time to cre8te the actual langauge function!
+
+    // In the function, we don't actually distinguish 8etween the primary and
+    // default (fall8ack) strings - any relevant warnings have already 8een
+    // presented a8ove, at the time the language JSON is processed. Now we'll
+    // only 8e using them for indexing strings to use as templ8tes, and we can
+    // com8ine them for that.
+    const stringIndex = Object.assign({}, defaultJSON, stringsJSON);
+
+    // We do still need the list of valid keys though. That's 8ased upon the
+    // default strings. (Or stringsJSON, 8ut only if the defaults aren't
+    // provided - which indic8tes that the single o8ject provided *is* the
+    // default.)
+    const validKeys = Object.keys(defaultJSON || stringsJSON);
+
+    const invalidKeysFound = [];
+
+    const strings = (key, args = {}) => {
+        // Ok, with the warning out of the way, it's time to get to work.
+        // First make sure we're even accessing a valid key. (If not, return
+        // an error string as su8stitute.)
+        if (!validKeys.includes(key)) {
+            // We only want to warn a8out a given key once. More than that is
+            // just redundant!
+            if (!invalidKeysFound.includes(key)) {
+                invalidKeysFound.push(key);
+                logError`(${code}) Accessing invalid key ${key}. Fix a typo or provide this in strings-default.json!`;
+            }
+            return `MISSING: ${key}`;
+        }
+
+        const template = stringIndex[key];
+
+        // Convert the keys on the args dict from camelCase to CONSTANT_CASE.
+        // (This isn't an OUTRAGEOUSLY versatile algorithm for doing that, 8ut
+        // like, who cares, dude?) Also, this is an array, 8ecause it's handy
+        // for the iterating we're a8out to do.
+        const processedArgs = Object.entries(args)
+            .map(([ k, v ]) => [k.replace(/[A-Z]/g, '_$&').toUpperCase(), v]);
+
+        // Replacement time! Woot. Reduce comes in handy here!
+        const output = processedArgs.reduce(
+            (x, [ k, v ]) => x.replaceAll(`{${k}}`, v),
+            template);
+
+        // Post-processing: if any expected arguments *weren't* replaced, that
+        // is almost definitely an error.
+        if (output.match(/\{[A-Z_]+\}/)) {
+            logError`(${code}) Args in ${key} were missing - output: ${output}`;
+        }
+
+        return output;
+    };
+
+    // And lastly, we add some utility stuff to the strings function.
+
+    // Store the language code, for convenience of access.
+    strings.code = code;
+
+    // Store the strings dictionary itself, also for convenience.
+    strings.json = stringsJSON;
+
+    // Store Intl o8jects that can 8e reused for value formatting.
+    strings.intl = {
+        date: new Intl.DateTimeFormat(code, {full: true}),
+        number: new Intl.NumberFormat(code),
+        list: {
+            conjunction: new Intl.ListFormat(code, {type: 'conjunction'}),
+            disjunction: new Intl.ListFormat(code, {type: 'disjunction'}),
+            unit: new Intl.ListFormat(code, {type: 'unit'})
+        },
+        plural: {
+            cardinal: new Intl.PluralRules(code, {type: 'cardinal'}),
+            ordinal: new Intl.PluralRules(code, {type: 'ordinal'})
+        }
+    };
+
+    const bindUtilities = (obj, bind) => Object.fromEntries(Object.entries(obj).map(
+        ([ key, fn ]) => [key, (value, opts = {}) => fn(value, {...bind, ...opts})]
+    ));
+
+    // There are a 8unch of handy count functions which expect a strings value;
+    // for a more terse syntax, we'll stick 'em on the strings function itself,
+    // with automatic 8inding for the strings argument.
+    strings.count = bindUtilities(count, {strings});
+
+    // The link functions also expect the strings o8ject(*). May as well hand
+    // 'em over here too! Keep in mind they still expect {to} though, and that
+    // isn't something we have access to from this scope (so calls such as
+    // strings.link.album(...) still need to provide it themselves).
+    //
+    // (*) At time of writing, it isn't actually used for anything, 8ut future-
+    // proofing, ok????????
+    strings.link = bindUtilities(link, {strings});
+
+    // List functions, too!
+    strings.list = bindUtilities(list, {strings});
+
+    return strings;
+};
+
+const countHelper = (stringKey, argName = stringKey) => (value, {strings, unit = false}) => strings(
+    (unit
+        ? `count.${stringKey}.withUnit.` + strings.intl.plural.cardinal.select(value)
+        : `count.${stringKey}`),
+    {[argName]: strings.intl.number.format(value)});
+
+const count = {
+    date: (date, {strings}) => {
+        return strings.intl.date.format(date);
+    },
+
+    dateRange: ([startDate, endDate], {strings}) => {
+        return strings.intl.date.formatRange(startDate, endDate);
+    },
+
+    duration: (secTotal, {strings, approximate = false, unit = false}) => {
+        if (secTotal === 0) {
+            return strings('count.duration.missing');
+        }
+
+        const hour = Math.floor(secTotal / 3600);
+        const min = Math.floor((secTotal - hour * 3600) / 60);
+        const sec = Math.floor(secTotal - hour * 3600 - min * 60);
+
+        const pad = val => val.toString().padStart(2, '0');
+
+        const stringSubkey = unit ? '.withUnit' : '';
+
+        const duration = (hour > 0
+            ? strings('count.duration.hours' + stringSubkey, {
+                hours: hour,
+                minutes: pad(min),
+                seconds: pad(sec)
+            })
+            : strings('count.duration.minutes' + stringSubkey, {
+                minutes: min,
+                seconds: pad(sec)
+            }));
+
+        return (approximate
+            ? strings('count.duration.approximate', {duration})
+            : duration);
+    },
+
+    index: (value, {strings}) => {
+        return strings('count.index.' + strings.intl.plural.ordinal.select(value), {index: value});
+    },
+
+    number: value => strings.intl.number.format(value),
+
+    words: (value, {strings, unit = false}) => {
+        const num = strings.intl.number.format(value > 1000
+            ? Math.floor(value / 100) / 10
+            : value);
+
+        const words = (value > 1000
+            ? strings('count.words.thousand', {words: num})
+            : strings('count.words', {words: num}));
+
+        return strings('count.words.withUnit.' + strings.intl.plural.cardinal.select(value), {words});
+    },
+
+    albums: countHelper('albums'),
+    commentaryEntries: countHelper('commentaryEntries', 'entries'),
+    contributions: countHelper('contributions'),
+    coverArts: countHelper('coverArts'),
+    timesReferenced: countHelper('timesReferenced'),
+    timesUsed: countHelper('timesUsed'),
+    tracks: countHelper('tracks')
+};
+
+const listHelper = type => (list, {strings}) => strings.intl.list[type].format(list);
+
+const list = {
+    unit: listHelper('unit'),
+    or: listHelper('disjunction'),
+    and: listHelper('conjunction')
+};
+
+// Note there isn't a 'find track data files' function. I plan on including the
+// data for all tracks within an al8um collected in the single metadata file
+// for that al8um. Otherwise there'll just 8e way too many files, and I'd also
+// have to worry a8out linking track files to al8um files (which would contain
+// only the track listing, not track data itself), and dealing with errors of
+// missing track files (or track files which are not linked to al8ums). All a
+// 8unch of stuff that's a pain to deal with for no apparent 8enefit.
+async function findFiles(dataPath, filter = f => true) {
+    return (await readdir(dataPath))
+        .map(file => path.join(dataPath, file))
+        .filter(file => filter(file));
+}
+
+function* getSections(lines) {
+    // ::::)
+    const isSeparatorLine = line => /^-{8,}$/.test(line);
+    yield* splitArray(lines, isSeparatorLine);
+}
+
+function getBasicField(lines, name) {
+    const line = lines.find(line => line.startsWith(name + ':'));
+    return line && line.slice(name.length + 1).trim();
+}
+
+function getBooleanField(lines, name) {
+    // The ?? oper8tor (which is just, hilariously named, lol) can 8e used to
+    // specify a default!
+    const value = getBasicField(lines, name);
+    switch (value) {
+        case 'yes':
+        case 'true':
+            return true;
+        case 'no':
+        case 'false':
+            return false;
+        default:
+            return null;
+    }
+}
+
+function getListField(lines, name) {
+    let startIndex = lines.findIndex(line => line.startsWith(name + ':'));
+    // If callers want to default to an empty array, they should stick
+    // "|| []" after the call.
+    if (startIndex === -1) {
+        return null;
+    }
+    // We increment startIndex 8ecause we don't want to include the
+    // "heading" line (e.g. "URLs:") in the actual data.
+    startIndex++;
+    let endIndex = lines.findIndex((line, index) => index >= startIndex && !line.startsWith('- '));
+    if (endIndex === -1) {
+        endIndex = lines.length;
+    }
+    if (endIndex === startIndex) {
+        // If there is no list that comes after the heading line, treat the
+        // heading line itself as the comma-separ8ted array value, using
+        // the 8asic field function to do that. (It's l8 and my 8rain is
+        // sleepy. Please excuse any unhelpful comments I may write, or may
+        // have already written, in this st8. Thanks!)
+        const value = getBasicField(lines, name);
+        return value && value.split(',').map(val => val.trim());
+    }
+    const listLines = lines.slice(startIndex, endIndex);
+    return listLines.map(line => line.slice(2));
+};
+
+function getContributionField(section, name) {
+    let contributors = getListField(section, name);
+
+    if (!contributors) {
+        return null;
+    }
+
+    if (contributors.length === 1 && contributors[0].startsWith('<i>')) {
+        const arr = [];
+        arr.textContent = contributors[0];
+        return arr;
+    }
+
+    contributors = contributors.map(contrib => {
+        // 8asically, the format is "Who (What)", or just "Who". 8e sure to
+        // keep in mind that "what" doesn't necessarily have a value!
+        const match = contrib.match(/^(.*?)( \((.*)\))?$/);
+        if (!match) {
+            return contrib;
+        }
+        const who = match[1];
+        const what = match[3] || null;
+        return {who, what};
+    });
+
+    const badContributor = contributors.find(val => typeof val === 'string');
+    if (badContributor) {
+        return {error: `An entry has an incorrectly formatted contributor, "${badContributor}".`};
+    }
+
+    if (contributors.length === 1 && contributors[0].who === 'none') {
+        return null;
+    }
+
+    return contributors;
+};
+
+function getMultilineField(lines, name) {
+    // All this code is 8asically the same as the getListText - just with a
+    // different line prefix (four spaces instead of a dash and a space).
+    let startIndex = lines.findIndex(line => line.startsWith(name + ':'));
+    if (startIndex === -1) {
+        return null;
+    }
+    startIndex++;
+    let endIndex = lines.findIndex((line, index) => index >= startIndex && line.length && !line.startsWith('    '));
+    if (endIndex === -1) {
+        endIndex = lines.length;
+    }
+    // If there aren't any content lines, don't return anything!
+    if (endIndex === startIndex) {
+        return null;
+    }
+    // We also join the lines instead of returning an array.
+    const listLines = lines.slice(startIndex, endIndex);
+    return listLines.map(line => line.slice(4)).join('\n');
+};
+
+const replacerSpec = {
+    'album': {
+        search: 'album',
+        link: 'album'
+    },
+    'album-commentary': {
+        search: 'album',
+        link: 'albumCommentary'
+    },
+    'artist': {
+        search: 'artist',
+        link: 'artist'
+    },
+    'artist-gallery': {
+        search: 'artist',
+        link: 'artistGallery'
+    },
+    'commentary-index': {
+        search: null,
+        link: 'commentaryIndex'
+    },
+    'date': {
+        search: null,
+        value: ref => new Date(ref),
+        html: (date, {strings}) => `<time datetime="${date.toString()}">${strings.count.date(date)}</time>`
+    },
+    'flash': {
+        search: 'flash',
+        link: 'flash',
+        transformName(name, search, offset, text) {
+            const nextCharacter = text[offset + search.length];
+            const lastCharacter = name[name.length - 1];
+            if (
+                ![' ', '\n', '<'].includes(nextCharacter) &&
+                lastCharacter === '.'
+            ) {
+                return name.slice(0, -1);
+            } else {
+                return name;
+            }
+        }
+    },
+    'group': {
+        search: 'group',
+        link: 'groupInfo'
+    },
+    'group-gallery': {
+        search: 'group',
+        link: 'groupGallery'
+    },
+    'listing-index': {
+        search: null,
+        link: 'listingIndex'
+    },
+    'listing': {
+        search: 'listing',
+        link: 'listing'
+    },
+    'media': {
+        search: null,
+        link: 'media'
+    },
+    'news-index': {
+        search: null,
+        link: 'newsIndex'
+    },
+    'news-entry': {
+        search: 'newsEntry',
+        link: 'newsEntry'
+    },
+    'root': {
+        search: null,
+        link: 'root'
+    },
+    'site': {
+        search: null,
+        link: 'site'
+    },
+    'static': {
+        search: 'staticPage',
+        link: 'staticPage'
+    },
+    'tag': {
+        search: 'tag',
+        link: 'tag'
+    },
+    'track': {
+        search: 'track',
+        link: 'track'
+    }
+};
+
+{
+    let error = false;
+    for (const [key, {link: linkKey, search: searchKey, value, html}] of Object.entries(replacerSpec)) {
+        if (!html && !link[linkKey]) {
+            logError`The replacer spec ${key} has invalid link key ${linkKey}! Specify it in link specs or fix typo.`;
+            error = true;
+        }
+        if (searchKey && !search[searchKey]) {
+            logError`The replacer spec ${key} has invalid search key ${searchKey}! Specify it in search specs or fix typo.`;
+            error = true;
+        }
+    }
+    if (error) process.exit();
+
+    const categoryPart = Object.keys(replacerSpec).join('|');
+    transformInline.regexp = new RegExp(String.raw`(?<!\\)\[\[((${categoryPart}):)?(.+?)((?<! )#.+?)?(\|(.+?))?\]\]`, 'g');
+}
+
+function transformInline(text, {strings, to}) {
+    return text.replace(transformInline.regexp, (match, _1, category, ref, hash, _2, enteredName, offset) => {
+        if (!category) {
+            category = 'track';
+        }
+
+        const {
+            search: searchKey,
+            link: linkKey,
+            value: valueFn,
+            html: htmlFn,
+            transformName
+        } = replacerSpec[category];
+
+        const value = (
+            valueFn ? valueFn(ref) :
+            searchKey ? search[searchKey](ref) :
+            {
+                directory: ref.replace(category + ':', ''),
+                name: null
+            });
+
+        if (!value) {
+            logWarn`The link ${match} does not match anything!`;
+            return match;
+        }
+
+        const label = (enteredName
+            || transformName && transformName(value.name, match, offset, text)
+            || value.name);
+
+        if (!valueFn && !label) {
+            logWarn`The link ${match} requires a label be entered!`;
+            return match;
+        }
+
+        const fn = (htmlFn
+            ? htmlFn
+            : strings.link[linkKey]);
+
+        try {
+            return fn(value, {text: label, hash, strings, to});
+        } catch (error) {
+            logError`The link ${match} failed to be processed: ${error}`;
+            return match;
+        }
+    }).replaceAll(String.raw`\[[`, '[[');
+}
+
+function parseAttributes(string, {to}) {
+    const attributes = Object.create(null);
+    const skipWhitespace = i => {
+        const ws = /\s/;
+        if (ws.test(string[i])) {
+            const match = string.slice(i).match(/[^\s]/);
+            if (match) {
+                return i + match.index;
+            } else {
+                return string.length;
+            }
+        } else {
+            return i;
+        }
+    };
+
+    for (let i = 0; i < string.length;) {
+        i = skipWhitespace(i);
+        const aStart = i;
+        const aEnd = i + string.slice(i).match(/[\s=]|$/).index;
+        const attribute = string.slice(aStart, aEnd);
+        i = skipWhitespace(aEnd);
+        if (string[i] === '=') {
+            i = skipWhitespace(i + 1);
+            let end, endOffset;
+            if (string[i] === '"' || string[i] === "'") {
+                end = string[i];
+                endOffset = 1;
+                i++;
+            } else {
+                end = '\\s';
+                endOffset = 0;
+            }
+            const vStart = i;
+            const vEnd = i + string.slice(i).match(new RegExp(`${end}|$`)).index;
+            const value = string.slice(vStart, vEnd);
+            i = vEnd + endOffset;
+            if (attribute === 'src' && value.startsWith('media/')) {
+                attributes[attribute] = to('media.path', value.slice('media/'.length));
+            } else {
+                attributes[attribute] = value;
+            }
+        } else {
+            attributes[attribute] = attribute;
+        }
+    }
+    return Object.fromEntries(Object.entries(attributes).map(([ key, val ]) => [
+        key,
+        val === 'true' ? true :
+        val === 'false' ? false :
+        val === key ? true :
+        val
+    ]));
+}
+
+function transformMultiline(text, {strings, to}) {
+    // Heck yes, HTML magics.
+
+    text = transformInline(text.trim(), {strings, to});
+
+    const outLines = [];
+
+    const indentString = ' '.repeat(4);
+
+    let levelIndents = [];
+    const openLevel = indent => {
+        // opening a sublist is a pain: to be semantically *and* visually
+        // correct, we have to append the <ul> at the end of the existing
+        // previous <li>
+        const previousLine = outLines[outLines.length - 1];
+        if (previousLine?.endsWith('</li>')) {
+            // we will re-close the <li> later
+            outLines[outLines.length - 1] = previousLine.slice(0, -5) + ' <ul>';
+        } else {
+            // if the previous line isn't a list item, this is the opening of
+            // the first list level, so no need for indent
+            outLines.push('<ul>');
+        }
+        levelIndents.push(indent);
+    };
+    const closeLevel = () => {
+        levelIndents.pop();
+        if (levelIndents.length) {
+            // closing a sublist, so close the list item containing it too
+            outLines.push(indentString.repeat(levelIndents.length) + '</ul></li>');
+        } else {
+            // closing the final list level! no need for indent here
+            outLines.push('</ul>');
+        }
+    };
+
+    // okay yes we should support nested formatting, more than one blockquote
+    // layer, etc, but hear me out here: making all that work would basically
+    // be the same as implementing an entire markdown converter, which im not
+    // interested in doing lol. sorry!!!
+    let inBlockquote = false;
+
+    for (let line of text.split(/\r|\n|\r\n/)) {
+        const imageLine = line.startsWith('<img');
+        line = line.replace(/<img (.*?)>/g, (match, attributes) => img({
+            lazy: true,
+            link: true,
+            thumb: 'medium',
+            ...parseAttributes(attributes, {to})
+        }));
+
+        let indentThisLine = 0;
+        let lineContent = line;
+        let lineTag = 'p';
+
+        const listMatch = line.match(/^( *)- *(.*)$/);
+        if (listMatch) {
+            // is a list item!
+            if (!levelIndents.length) {
+                // first level is always indent = 0, regardless of actual line
+                // content (this is to avoid going to a lesser indent than the
+                // initial level)
+                openLevel(0);
+            } else {
+                // find level corresponding to indent
+                const indent = listMatch[1].length;
+                let i;
+                for (i = levelIndents.length - 1; i >= 0; i--) {
+                    if (levelIndents[i] <= indent) break;
+                }
+                // note: i cannot equal -1 because the first indentation level
+                // is always 0, and the minimum indentation is also 0
+                if (levelIndents[i] === indent) {
+                    // same indent! return to that level
+                    while (levelIndents.length - 1 > i) closeLevel();
+                    // (if this is already the current level, the above loop
+                    // will do nothing)
+                } else if (levelIndents[i] < indent) {
+                    // lesser indent! branch based on index
+                    if (i === levelIndents.length - 1) {
+                        // top level is lesser: add a new level
+                        openLevel(indent);
+                    } else {
+                        // lower level is lesser: return to that level
+                        while (levelIndents.length - 1 > i) closeLevel();
+                    }
+                }
+            }
+            // finally, set variables for appending content line
+            indentThisLine = levelIndents.length;
+            lineContent = listMatch[2];
+            lineTag = 'li';
+        } else {
+            // not a list item! close any existing list levels
+            while (levelIndents.length) closeLevel();
+
+            // like i said, no nested shenanigans - quotes only appear outside
+            // of lists. sorry!
+            const quoteMatch = line.match(/^> *(.*)$/);
+            if (quoteMatch) {
+                // is a quote! open a blockquote tag if it doesnt already exist
+                if (!inBlockquote) {
+                    inBlockquote = true;
+                    outLines.push('<blockquote>');
+                }
+                indentThisLine = 1;
+                lineContent = quoteMatch[1];
+            } else if (inBlockquote) {
+                // not a quote! close a blockquote tag if it exists
+                inBlockquote = false;
+                outLines.push('</blockquote>');
+            }
+        }
+
+        if (lineTag === 'p') {
+            // certain inline element tags should still be postioned within a
+            // paragraph; other elements (e.g. headings) should be added as-is
+            const elementMatch = line.match(/^<(.*?)[ >]/);
+            if (elementMatch && !imageLine && !['a', 'abbr', 'b', 'bdo', 'br', 'cite', 'code', 'data', 'datalist', 'del', 'dfn', 'em', 'i', 'img', 'ins', 'kbd', 'mark', 'output', 'picture', 'q', 'ruby', 'samp', 'small', 'span', 'strong', 'sub', 'sup', 'svg', 'time', 'var', 'wbr'].includes(elementMatch[1])) {
+                lineTag = '';
+            }
+        }
+
+        let pushString = indentString.repeat(indentThisLine);
+        if (lineTag) {
+            pushString += `<${lineTag}>${lineContent}</${lineTag}>`;
+        } else {
+            pushString += lineContent;
+        }
+        outLines.push(pushString);
+    }
+
+    // after processing all lines...
+
+    // if still in a list, close all levels
+    while (levelIndents.length) closeLevel();
+
+    // if still in a blockquote, close its tag
+    if (inBlockquote) {
+        inBlockquote = false;
+        outLines.push('</blockquote>');
+    }
+
+    return outLines.join('\n');
+}
+
+function transformLyrics(text, {strings, to}) {
+    // Different from transformMultiline 'cuz it joins multiple lines together
+    // with line 8reaks (<br>); transformMultiline treats each line as its own
+    // complete paragraph (or list, etc).
+
+    // If it looks like old data, then like, oh god.
+    // Use the normal transformMultiline tool.
+    if (text.includes('<br')) {
+        return transformMultiline(text, {strings, to});
+    }
+
+    text = transformInline(text.trim(), {strings, to});
+
+    let buildLine = '';
+    const addLine = () => outLines.push(`<p>${buildLine}</p>`);
+    const outLines = [];
+    for (const line of text.split('\n')) {
+        if (line.length) {
+            if (buildLine.length) {
+                buildLine += '<br>';
+            }
+            buildLine += line;
+        } else if (buildLine.length) {
+            addLine();
+            buildLine = '';
+        }
+    }
+    if (buildLine.length) {
+        addLine();
+    }
+    return outLines.join('\n');
+}
+
+function getCommentaryField(lines) {
+    const text = getMultilineField(lines, 'Commentary');
+    if (text) {
+        const lines = text.split('\n');
+        if (!lines[0].replace(/<\/b>/g, '').includes(':</i>')) {
+            return {error: `An entry is missing commentary citation: "${lines[0].slice(0, 40)}..."`};
+        }
+        return text;
+    } else {
+        return null;
+    }
+};
+
+async function processAlbumDataFile(file) {
+    let contents;
+    try {
+        contents = await readFile(file, 'utf-8');
+    } catch (error) {
+        // This function can return "error o8jects," which are really just
+        // ordinary o8jects with an error message attached. I'm not 8othering
+        // with error codes here or anywhere in this function; while this would
+        // normally 8e 8ad coding practice, it doesn't really matter here,
+        // 8ecause this isn't an API getting consumed 8y other services (e.g.
+        // translaction functions). If we return an error, the caller will just
+        // print the attached message in the output summary.
+        return {error: `Could not read ${file} (${error.code}).`};
+    }
+
+    // We're pro8a8ly supposed to, like, search for a header somewhere in the
+    // al8um contents, to make sure it's trying to 8e the intended structure
+    // and is a valid utf-8 (or at least ASCII) file. 8ut like, whatever.
+    // We'll just return more specific errors if it's missing necessary data
+    // fields.
+
+    const contentLines = contents.split('\n');
+
+    // In this line of code I defeat the purpose of using a generator in the
+    // first place. Sorry!!!!!!!!
+    const sections = Array.from(getSections(contentLines));
+
+    const albumSection = sections[0];
+    const album = {};
+
+    album.name = getBasicField(albumSection, 'Album');
+    album.artists = getContributionField(albumSection, 'Artists') || getContributionField(albumSection, 'Artist');
+    album.wallpaperArtists = getContributionField(albumSection, 'Wallpaper Art');
+    album.wallpaperStyle = getMultilineField(albumSection, 'Wallpaper Style');
+    album.bannerArtists = getContributionField(albumSection, 'Banner Art');
+    album.bannerStyle = getMultilineField(albumSection, 'Banner Style');
+    album.date = getBasicField(albumSection, 'Date');
+    album.trackArtDate = getBasicField(albumSection, 'Track Art Date') || album.date;
+    album.coverArtDate = getBasicField(albumSection, 'Cover Art Date') || album.date;
+    album.dateAdded = getBasicField(albumSection, 'Date Added');
+    album.coverArtists = getContributionField(albumSection, 'Cover Art');
+    album.hasTrackArt = getBooleanField(albumSection, 'Has Track Art') ?? true;
+    album.trackCoverArtists = getContributionField(albumSection, 'Track Art');
+    album.artTags = getListField(albumSection, 'Art Tags') || [];
+    album.commentary = getCommentaryField(albumSection);
+    album.urls = getListField(albumSection, 'URLs') || [];
+    album.groups = getListField(albumSection, 'Groups') || [];
+    album.directory = getBasicField(albumSection, 'Directory');
+    album.isMajorRelease = getBooleanField(albumSection, 'Major Release') ?? false;
+
+    if (album.artists && album.artists.error) {
+        return {error: `${album.artists.error} (in ${album.name})`};
+    }
+
+    if (album.coverArtists && album.coverArtists.error) {
+        return {error: `${album.coverArtists.error} (in ${album.name})`};
+    }
+
+    if (album.commentary && album.commentary.error) {
+        return {error: `${album.commentary.error} (in ${album.name})`};
+    }
+
+    if (album.trackCoverArtists && album.trackCoverArtists.error) {
+        return {error: `${album.trackCoverArtists.error} (in ${album.name})`};
+    }
+
+    if (!album.coverArtists) {
+        return {error: `The album "${album.name}" is missing the "Cover Art" field.`};
+    }
+
+    album.color = (
+        getBasicField(albumSection, 'Color') ||
+        getBasicField(albumSection, 'FG')
+    );
+
+    if (!album.name) {
+        return {error: `Expected "Album" (name) field!`};
+    }
+
+    if (!album.date) {
+        return {error: `Expected "Date" field! (in ${album.name})`};
+    }
+
+    if (!album.dateAdded) {
+        return {error: `Expected "Date Added" field! (in ${album.name})`};
+    }
+
+    if (isNaN(Date.parse(album.date))) {
+        return {error: `Invalid Date field: "${album.date}" (in ${album.name})`};
+    }
+
+    if (isNaN(Date.parse(album.trackArtDate))) {
+        return {error: `Invalid Track Art Date field: "${album.trackArtDate}" (in ${album.name})`};
+    }
+
+    if (isNaN(Date.parse(album.coverArtDate))) {
+        return {error: `Invalid Cover Art Date field: "${album.coverArtDate}" (in ${album.name})`};
+    }
+
+    if (isNaN(Date.parse(album.dateAdded))) {
+        return {error: `Invalid Date Added field: "${album.dateAdded}" (in ${album.name})`};
+    }
+
+    album.date = new Date(album.date);
+    album.trackArtDate = new Date(album.trackArtDate);
+    album.coverArtDate = new Date(album.coverArtDate);
+    album.dateAdded = new Date(album.dateAdded);
+
+    if (!album.directory) {
+        album.directory = getKebabCase(album.name);
+    }
+
+    album.tracks = [];
+
+    // will be overwritten if a group section is found!
+    album.trackGroups = null;
+
+    let group = null;
+    let trackIndex = 0;
+
+    for (const section of sections.slice(1)) {
+        // Just skip empty sections. Sometimes I paste a 8unch of dividers,
+        // and this lets the empty sections doing that creates (temporarily)
+        // exist without raising an error.
+        if (!section.filter(Boolean).length) {
+            continue;
+        }
+
+        const groupName = getBasicField(section, 'Group');
+        if (groupName) {
+            group = {
+                name: groupName,
+                color: (
+                    getBasicField(section, 'Color') ||
+                    getBasicField(section, 'FG') ||
+                    album.color
+                ),
+                startIndex: trackIndex,
+                tracks: []
+            };
+            if (album.trackGroups) {
+                album.trackGroups.push(group);
+            } else {
+                album.trackGroups = [group];
+            }
+            continue;
+        }
+
+        trackIndex++;
+
+        const track = {};
+
+        track.name = getBasicField(section, 'Track');
+        track.commentary = getCommentaryField(section);
+        track.lyrics = getMultilineField(section, 'Lyrics');
+        track.originalDate = getBasicField(section, 'Original Date');
+        track.coverArtDate = getBasicField(section, 'Cover Art Date') || track.originalDate || album.trackArtDate;
+        track.references = getListField(section, 'References') || [];
+        track.artists = getContributionField(section, 'Artists') || getContributionField(section, 'Artist');
+        track.coverArtists = getContributionField(section, 'Track Art');
+        track.artTags = getListField(section, 'Art Tags') || [];
+        track.contributors = getContributionField(section, 'Contributors') || [];
+        track.directory = getBasicField(section, 'Directory');
+        track.aka = getBasicField(section, 'AKA');
+
+        if (!track.name) {
+            return {error: `A track section is missing the "Track" (name) field (in ${album.name}, previous: ${album.tracks[album.tracks.length - 1]?.name}).`};
+        }
+
+        let durationString = getBasicField(section, 'Duration') || '0:00';
+        track.duration = getDurationInSeconds(durationString);
+
+        if (track.contributors.error) {
+            return {error: `${track.contributors.error} (in ${track.name}, ${album.name})`};
+        }
+
+        if (track.commentary && track.commentary.error) {
+            return {error: `${track.commentary.error} (in ${track.name}, ${album.name})`};
+        }
+
+        if (!track.artists) {
+            // If an al8um has an artist specified (usually 8ecause it's a solo
+            // al8um), let tracks inherit that artist. We won't display the
+            // "8y <artist>" string on the al8um listing.
+            if (album.artists) {
+                track.artists = album.artists;
+            } else {
+                return {error: `The track "${track.name}" is missing the "Artist" field (in ${album.name}).`};
+            }
+        }
+
+        if (!track.coverArtists) {
+            if (getBasicField(section, 'Track Art') !== 'none' && album.hasTrackArt) {
+                if (album.trackCoverArtists) {
+                    track.coverArtists = album.trackCoverArtists;
+                } else {
+                    return {error: `The track "${track.name}" is missing the "Track Art" field (in ${album.name}).`};
+                }
+            }
+        }
+
+        if (track.coverArtists && track.coverArtists.length && track.coverArtists[0] === 'none') {
+            track.coverArtists = null;
+        }
+
+        if (!track.directory) {
+            track.directory = getKebabCase(track.name);
+        }
+
+        if (track.originalDate) {
+            if (isNaN(Date.parse(track.originalDate))) {
+                return {error: `The track "${track.name}"'s has an invalid "Original Date" field: "${track.originalDate}"`};
+            }
+            track.date = new Date(track.originalDate);
+        } else {
+            track.date = album.date;
+        }
+
+        track.coverArtDate = new Date(track.coverArtDate);
+
+        const hasURLs = getBooleanField(section, 'Has URLs') ?? true;
+
+        track.urls = hasURLs && (getListField(section, 'URLs') || []).filter(Boolean);
+
+        if (hasURLs && !track.urls.length) {
+            return {error: `The track "${track.name}" should have at least one URL specified.`};
+        }
+
+        // 8ack-reference the al8um o8ject! This is very useful for when
+        // we're outputting the track pages.
+        track.album = album;
+
+        if (group) {
+            track.color = group.color;
+            group.tracks.push(track);
+        } else {
+            track.color = album.color;
+        }
+
+        album.tracks.push(track);
+    }
+
+    return album;
+}
+
+async function processArtistDataFile(file) {
+    let contents;
+    try {
+        contents = await readFile(file, 'utf-8');
+    } catch (error) {
+        return {error: `Could not read ${file} (${error.code}).`};
+    }
+
+    const contentLines = contents.split('\n');
+    const sections = Array.from(getSections(contentLines));
+
+    return sections.filter(s => s.filter(Boolean).length).map(section => {
+        const name = getBasicField(section, 'Artist');
+        const urls = (getListField(section, 'URLs') || []).filter(Boolean);
+        const alias = getBasicField(section, 'Alias');
+        const hasAvatar = getBooleanField(section, 'Has Avatar') ?? false;
+        const note = getMultilineField(section, 'Note');
+        let directory = getBasicField(section, 'Directory');
+
+        if (!name) {
+            return {error: 'Expected "Artist" (name) field!'};
+        }
+
+        if (!directory) {
+            directory = getKebabCase(name);
+        }
+
+        if (alias) {
+            return {name, directory, alias};
+        } else {
+            return {name, directory, urls, note, hasAvatar};
+        }
+    });
+}
+
+async function processFlashDataFile(file) {
+    let contents;
+    try {
+        contents = await readFile(file, 'utf-8');
+    } catch (error) {
+        return {error: `Could not read ${file} (${error.code}).`};
+    }
+
+    const contentLines = contents.split('\n');
+    const sections = Array.from(getSections(contentLines));
+
+    let act, color;
+    return sections.map(section => {
+        if (getBasicField(section, 'ACT')) {
+            act = getBasicField(section, 'ACT');
+            color = (
+                getBasicField(section, 'Color') ||
+                getBasicField(section, 'FG')
+            );
+            const anchor = getBasicField(section, 'Anchor');
+            const jump = getBasicField(section, 'Jump');
+            const jumpColor = getBasicField(section, 'Jump Color') || color;
+            return {act8r8k: true, name: act, color, anchor, jump, jumpColor};
+        }
+
+        const name = getBasicField(section, 'Flash');
+        let page = getBasicField(section, 'Page');
+        let directory = getBasicField(section, 'Directory');
+        let date = getBasicField(section, 'Date');
+        const jiff = getBasicField(section, 'Jiff');
+        const tracks = getListField(section, 'Tracks') || [];
+        const contributors = getContributionField(section, 'Contributors') || [];
+        const urls = (getListField(section, 'URLs') || []).filter(Boolean);
+
+        if (!name) {
+            return {error: 'Expected "Flash" (name) field!'};
+        }
+
+        if (!page && !directory) {
+            return {error: 'Expected "Page" or "Directory" field!'};
+        }
+
+        if (!directory) {
+            directory = page;
+        }
+
+        if (!date) {
+            return {error: 'Expected "Date" field!'};
+        }
+
+        if (isNaN(Date.parse(date))) {
+            return {error: `Invalid Date field: "${date}"`};
+        }
+
+        date = new Date(date);
+
+        return {name, page, directory, date, contributors, tracks, urls, act, color, jiff};
+    });
+}
+
+async function processNewsDataFile(file) {
+    let contents;
+    try {
+        contents = await readFile(file, 'utf-8');
+    } catch (error) {
+        return {error: `Could not read ${file} (${error.code}).`};
+    }
+
+    const contentLines = contents.split('\n');
+    const sections = Array.from(getSections(contentLines));
+
+    return sections.map(section => {
+        const name = getBasicField(section, 'Name');
+        if (!name) {
+            return {error: 'Expected "Name" field!'};
+        }
+
+        const directory = getBasicField(section, 'Directory') || getBasicField(section, 'ID');
+        if (!directory) {
+            return {error: 'Expected "Directory" field!'};
+        }
+
+        let body = getMultilineField(section, 'Body');
+        if (!body) {
+            return {error: 'Expected "Body" field!'};
+        }
+
+        let date = getBasicField(section, 'Date');
+        if (!date) {
+            return {error: 'Expected "Date" field!'};
+        }
+
+        if (isNaN(Date.parse(date))) {
+            return {error: `Invalid date field: "${date}"`};
+        }
+
+        date = new Date(date);
+
+        let bodyShort = body.split('<hr class="split">')[0];
+
+        return {
+            name,
+            directory,
+            body,
+            bodyShort,
+            date
+        };
+    });
+}
+
+async function processTagDataFile(file) {
+    let contents;
+    try {
+        contents = await readFile(file, 'utf-8');
+    } catch (error) {
+        if (error.code === 'ENOENT') {
+            return [];
+        } else {
+            return {error: `Could not read ${file} (${error.code}).`};
+        }
+    }
+
+    const contentLines = contents.split('\n');
+    const sections = Array.from(getSections(contentLines));
+
+    return sections.map(section => {
+        let isCW = false;
+
+        let name = getBasicField(section, 'Tag');
+        if (!name) {
+            name = getBasicField(section, 'CW');
+            isCW = true;
+            if (!name) {
+                return {error: 'Expected "Tag" or "CW" field!'};
+            }
+        }
+
+        let color;
+        if (!isCW) {
+            color = getBasicField(section, 'Color');
+            if (!color) {
+                return {error: 'Expected "Color" field!'};
+            }
+        }
+
+        const directory = getKebabCase(name);
+
+        return {
+            name,
+            directory,
+            isCW,
+            color
+        };
+    });
+}
+
+async function processGroupDataFile(file) {
+    let contents;
+    try {
+        contents = await readFile(file, 'utf-8');
+    } catch (error) {
+        if (error.code === 'ENOENT') {
+            return [];
+        } else {
+            return {error: `Could not read ${file} (${error.code}).`};
+        }
+    }
+
+    const contentLines = contents.split('\n');
+    const sections = Array.from(getSections(contentLines));
+
+    let category, color;
+    return sections.map(section => {
+        if (getBasicField(section, 'Category')) {
+            category = getBasicField(section, 'Category');
+            color = getBasicField(section, 'Color');
+            return {isCategory: true, name: category, color};
+        }
+
+        const name = getBasicField(section, 'Group');
+        if (!name) {
+            return {error: 'Expected "Group" field!'};
+        }
+
+        let directory = getBasicField(section, 'Directory');
+        if (!directory) {
+            directory = getKebabCase(name);
+        }
+
+        let description = getMultilineField(section, 'Description');
+        if (!description) {
+            return {error: 'Expected "Description" field!'};
+        }
+
+        let descriptionShort = description.split('<hr class="split">')[0];
+
+        const urls = (getListField(section, 'URLs') || []).filter(Boolean);
+
+        return {
+            isGroup: true,
+            name,
+            directory,
+            description,
+            descriptionShort,
+            urls,
+            category,
+            color
+        };
+    });
+}
+
+async function processStaticPageDataFile(file) {
+    let contents;
+    try {
+        contents = await readFile(file, 'utf-8');
+    } catch (error) {
+        if (error.code === 'ENOENT') {
+            return [];
+        } else {
+            return {error: `Could not read ${file} (${error.code}).`};
+        }
+    }
+
+    const contentLines = contents.split('\n');
+    const sections = Array.from(getSections(contentLines));
+
+    return sections.map(section => {
+        const name = getBasicField(section, 'Name');
+        if (!name) {
+            return {error: 'Expected "Name" field!'};
+        }
+
+        const shortName = getBasicField(section, 'Short Name') || name;
+
+        let directory = getBasicField(section, 'Directory');
+        if (!directory) {
+            return {error: 'Expected "Directory" field!'};
+        }
+
+        let content = getMultilineField(section, 'Content');
+        if (!content) {
+            return {error: 'Expected "Content" field!'};
+        }
+
+        let stylesheet = getMultilineField(section, 'Style') || '';
+
+        let listed = getBooleanField(section, 'Listed') ?? true;
+
+        return {
+            name,
+            shortName,
+            directory,
+            content,
+            stylesheet,
+            listed
+        };
+    });
+}
+
+async function processWikiInfoFile(file) {
+    let contents;
+    try {
+        contents = await readFile(file, 'utf-8');
+    } catch (error) {
+        return {error: `Could not read ${file} (${error.code}).`};
+    }
+
+    // Unlike other data files, the site info data file isn't 8roken up into
+    // more than one entry. So we operate on the plain old contentLines array,
+    // rather than dividing into sections like we usually do!
+    const contentLines = contents.split('\n');
+
+    const name = getBasicField(contentLines, 'Name');
+    if (!name) {
+        return {error: 'Expected "Name" field!'};
+    }
+
+    const shortName = getBasicField(contentLines, 'Short Name') || name;
+
+    const color = getBasicField(contentLines, 'Color') || '#0088ff';
+
+    // This is optional! Without it, <meta rel="canonical"> tags won't 8e
+    // gener8ted.
+    const canonicalBase = getBasicField(contentLines, 'Canonical Base');
+
+    // This is optional! Without it, the site will default to 8uilding in
+    // English. (This is only really relevant if you've provided string files
+    // for non-English languages.)
+    const defaultLanguage = getBasicField(contentLines, 'Default Language');
+
+    // Also optional! In charge of <meta rel="description">.
+    const description = getBasicField(contentLines, 'Description');
+
+    const footer = getMultilineField(contentLines, 'Footer') || '';
+
+    // We've had a comment lying around for ages, just reading:
+    // "Might ena8le this later... we'll see! Eventually. May8e."
+    // We still haven't! 8ut hey, the option's here.
+    const enableArtistAvatars = getBooleanField(contentLines, 'Enable Artist Avatars') ?? false;
+
+    const enableFlashesAndGames = getBooleanField(contentLines, 'Enable Flashes & Games') ?? false;
+    const enableListings = getBooleanField(contentLines, 'Enable Listings') ?? false;
+    const enableNews = getBooleanField(contentLines, 'Enable News') ?? false;
+    const enableArtTagUI = getBooleanField(contentLines, 'Enable Art Tag UI') ?? false;
+    const enableGroupUI = getBooleanField(contentLines, 'Enable Group UI') ?? false;
+
+    return {
+        name,
+        shortName,
+        color,
+        canonicalBase,
+        defaultLanguage,
+        description,
+        footer,
+        features: {
+            artistAvatars: enableArtistAvatars,
+            flashesAndGames: enableFlashesAndGames,
+            listings: enableListings,
+            news: enableNews,
+            artTagUI: enableArtTagUI,
+            groupUI: enableGroupUI
+        }
+    };
+}
+
+async function processHomepageInfoFile(file) {
+    let contents;
+    try {
+        contents = await readFile(file, 'utf-8');
+    } catch (error) {
+        return {error: `Could not read ${file} (${error.code}).`};
+    }
+
+    const contentLines = contents.split('\n');
+    const sections = Array.from(getSections(contentLines));
+
+    const [ firstSection, ...rowSections ] = sections;
+
+    const sidebar = getMultilineField(firstSection, 'Sidebar');
+
+    const validRowTypes = ['albums'];
+
+    const rows = rowSections.map(section => {
+        const name = getBasicField(section, 'Row');
+        if (!name) {
+            return {error: 'Expected "Row" (name) field!'};
+        }
+
+        const color = getBasicField(section, 'Color');
+
+        const type = getBasicField(section, 'Type');
+        if (!type) {
+            return {error: 'Expected "Type" field!'};
+        }
+
+        if (!validRowTypes.includes(type)) {
+            return {error: `Expected "Type" field to be one of: ${validRowTypes.join(', ')}`};
+        }
+
+        const row = {name, color, type};
+
+        switch (type) {
+            case 'albums': {
+                const group = getBasicField(section, 'Group') || null;
+                const albums = getListField(section, 'Albums') || [];
+
+                if (!group && !albums) {
+                    return {error: 'Expected "Group" and/or "Albums" field!'};
+                }
+
+                let groupCount = getBasicField(section, 'Count');
+                if (group && !groupCount) {
+                    return {error: 'Expected "Count" field!'};
+                }
+
+                if (groupCount) {
+                    if (isNaN(parseInt(groupCount))) {
+                        return {error: `Invalid Count field: "${groupCount}"`};
+                    }
+
+                    groupCount = parseInt(groupCount);
+                }
+
+                const actions = getListField(section, 'Actions') || [];
+
+                return {...row, group, groupCount, albums, actions};
+            }
+        }
+    });
+
+    return {sidebar, rows};
+}
+
+function getDurationInSeconds(string) {
+    const parts = string.split(':').map(n => parseInt(n))
+    if (parts.length === 3) {
+        return parts[0] * 3600 + parts[1] * 60 + parts[2]
+    } else if (parts.length === 2) {
+        return parts[0] * 60 + parts[1]
+    } else {
+        return 0
+    }
+}
+
+function getTotalDuration(tracks) {
+    return tracks.reduce((duration, track) => duration + track.duration, 0);
+}
+
+const stringifyIndent = 0;
+
+const toRefs = (label, objectOrArray) => {
+    if (Array.isArray(objectOrArray)) {
+        return objectOrArray.filter(Boolean).map(x => `${label}:${x.directory}`);
+    } else if (objectOrArray.directory) {
+        throw new Error('toRefs should not be passed a single object with directory');
+    } else if (typeof objectOrArray === 'object') {
+        return Object.fromEntries(Object.entries(objectOrArray)
+            .map(([ key, value ]) => [key, toRefs(key, value)]));
+    } else {
+        throw new Error('toRefs should be passed an array or object of arrays');
+    }
+};
+
+function stringifyRefs(key, value) {
+    switch (key) {
+        case 'tracks':
+        case 'references':
+        case 'referencedBy':
+            return toRefs('track', value);
+        case 'artists':
+        case 'contributors':
+        case 'coverArtists':
+        case 'trackCoverArtists':
+            return value && value.map(({ who, what }) => ({who: `artist:${who.directory}`, what}));
+        case 'albums': return toRefs('album', value);
+        case 'flashes': return toRefs('flash', value);
+        case 'groups': return toRefs('group', value);
+        case 'artTags': return toRefs('tag', value);
+        case 'aka': return value && `track:${value.directory}`;
+        default:
+            return value;
+    }
+}
+
+function stringifyAlbumData() {
+    return JSON.stringify(albumData, (key, value) => {
+        switch (key) {
+            case 'commentary':
+                return '';
+            default:
+                return stringifyRefs(key, value);
+        }
+    }, stringifyIndent);
+}
+
+function stringifyTrackData() {
+    return JSON.stringify(trackData, (key, value) => {
+        switch (key) {
+            case 'album':
+            case 'commentary':
+            case 'otherReleases':
+                return undefined;
+            default:
+                return stringifyRefs(key, value);
+        }
+    }, stringifyIndent);
+}
+
+function stringifyFlashData() {
+    return JSON.stringify(flashData, (key, value) => {
+        switch (key) {
+            case 'act':
+            case 'commentary':
+                return undefined;
+            default:
+                return stringifyRefs(key, value);
+        }
+    }, stringifyIndent);
+}
+
+function stringifyArtistData() {
+    return JSON.stringify(artistData, (key, value) => {
+        switch (key) {
+            case 'asAny':
+                return;
+            case 'asArtist':
+            case 'asContributor':
+            case 'asCoverArtist':
+                return toRefs('track', value);
+            default:
+                return stringifyRefs(key, value);
+        }
+    }, stringifyIndent);
+}
+
+function img({
+    src = '',
+    alt = '',
+    thumb: thumbKey = '',
+    reveal = '',
+    id = '',
+    class: className = '',
+    width = '',
+    height = '',
+    link = false,
+    lazy = false,
+    square = false
+}) {
+    const willSquare = square;
+    const willLink = typeof link === 'string' || link;
+
+    const originalSrc = src;
+    const thumbSrc = thumbKey ? thumb[thumbKey](src) : src;
+
+    const imgAttributes = html.attributes({
+        id: link ? '' : id,
+        class: className,
+        alt,
+        width,
+        height
+    });
+
+    const nonlazyHTML = wrap(`<img src="${thumbSrc}" ${imgAttributes}>`);
+    const lazyHTML = lazy && wrap(`<img class="lazy" data-original="${thumbSrc}" ${imgAttributes}>`, true);
+
+    if (lazy) {
+        return fixWS`
+            <noscript>${nonlazyHTML}</noscript>
+            ${lazyHTML}
+        `;
+    } else {
+        return nonlazyHTML;
+    }
+
+    function wrap(input, hide = false) {
+        let wrapped = input;
+
+        wrapped = `<div class="image-inner-area">${wrapped}</div>`;
+        wrapped = `<div class="image-container">${wrapped}</div>`;
+
+        if (reveal) {
+            wrapped = fixWS`
+                <div class="reveal">
+                    ${wrapped}
+                    <span class="reveal-text">${reveal}</span>
+                </div>
+            `;
+        }
+
+        if (willSquare) {
+            wrapped = html.tag('div', {class: 'square-content'}, wrapped);
+            wrapped = html.tag('div', {class: ['square', hide && !willLink && 'js-hide']}, wrapped);
+        }
+
+        if (willLink) {
+            wrapped = html.tag('a', {
+                id,
+                class: ['box', hide && 'js-hide'],
+                href: typeof link === 'string' ? link : originalSrc
+            }, wrapped);
+        }
+
+        return wrapped;
+    }
+}
+
+function serializeImagePaths(original) {
+    return {
+        original,
+        medium: thumb.medium(original),
+        small: thumb.small(original)
+    };
+}
+
+function serializeLink(thing) {
+    const ret = {};
+    ret.name = thing.name;
+    ret.directory = thing.directory;
+    if (thing.color) ret.color = thing.color;
+    return ret;
+}
+
+function serializeContribs(contribs) {
+    return contribs.map(({ who, what }) => {
+        const ret = {};
+        ret.artist = serializeLink(who);
+        if (what) ret.contribution = what;
+        return ret;
+    });
+}
+
+function serializeCover(thing, pathFunction) {
+    const coverPath = pathFunction(thing, {
+        to: urls.from('media.root').to
+    });
+
+    const { artTags } = thing;
+
+    const cwTags = artTags.filter(tag => tag.isCW);
+    const linkTags = artTags.filter(tag => !tag.isCW);
+
+    return {
+        paths: serializeImagePaths(coverPath),
+        tags: linkTags.map(serializeLink),
+        warnings: cwTags.map(tag => tag.name)
+    };
+}
+
+function serializeGroupsForAlbum(album) {
+    return album.groups.map(group => {
+        const index = group.albums.indexOf(album);
+        const next = group.albums[index + 1] || null;
+        const previous = group.albums[index - 1] || null;
+        return {group, index, next, previous};
+    }).map(({group, index, next, previous}) => ({
+        link: serializeLink(group),
+        descriptionShort: group.descriptionShort,
+        albumIndex: index,
+        nextAlbum: next && serializeLink(next),
+        previousAlbum: previous && serializeLink(previous),
+        urls: group.urls
+    }));
+}
+
+function serializeGroupsForTrack(track) {
+    return track.album.groups.map(group => ({
+        link: serializeLink(group),
+        urls: group.urls,
+    }));
+}
+
+function validateWritePath(path, urlGroup) {
+    if (!Array.isArray(path)) {
+        return {error: `Expected array, got ${path}`};
+    }
+
+    const { paths } = urlGroup;
+
+    const definedKeys = Object.keys(paths);
+    const specifiedKey = path[0];
+
+    if (!definedKeys.includes(specifiedKey)) {
+        return {error: `Specified key ${specifiedKey} isn't defined`};
+    }
+
+    const expectedArgs = paths[specifiedKey].match(/<>/g).length;
+    const specifiedArgs = path.length - 1;
+
+    if (specifiedArgs !== expectedArgs) {
+        return {error: `Expected ${expectedArgs} arguments, got ${specifiedArgs}`};
+    }
+
+    return {success: true};
+}
+
+function validateWriteObject(obj) {
+    if (typeof obj !== 'object') {
+        return {error: `Expected object, got ${typeof obj}`};
+    }
+
+    if (typeof obj.type !== 'string') {
+        return {error: `Expected type to be string, got ${obj.type}`};
+    }
+
+    switch (obj.type) {
+        case 'legacy': {
+            if (typeof obj.write !== 'function') {
+                return {error: `Expected write to be string, got ${obj.write}`};
+            }
+
+            break;
+        }
+
+        case 'page': {
+            const path = validateWritePath(obj.path, urlSpec.localized);
+            if (path.error) {
+                return {error: `Path validation failed: ${path.error}`};
+            }
+
+            if (typeof obj.page !== 'function') {
+                return {error: `Expected page to be function, got ${obj.content}`};
+            }
+
+            break;
+        }
+
+        case 'data': {
+            const path = validateWritePath(obj.path, urlSpec.data);
+            if (path.error) {
+                return {error: `Path validation failed: ${path.error}`};
+            }
+
+            if (typeof obj.data !== 'function') {
+                return {error: `Expected data to be function, got ${obj.data}`};
+            }
+
+            break;
+        }
+
+        default: {
+            return {error: `Unknown type: ${obj.type}`};
+        }
+    }
+
+    return {success: true};
+}
+
+async function writeData(subKey, directory, data) {
+    const paths = writePage.paths('', 'data.' + subKey, directory, {file: 'data.json'});
+    await writePage.write(JSON.stringify(data), {paths});
+}
+
+async function writePage(strings, baseDirectory, pageSubKey, directory, pageFn) {
+    // Generally this function shouldn't 8e called directly - instead use the
+    // shadowed version provided 8y wrapLanguages, which automatically provides
+    // the appropriate baseDirectory and strings arguments. (The utility
+    // functions attached to this function are generally useful, though!)
+
+    const paths = writePage.paths(baseDirectory, 'localized.' + pageSubKey, directory);
+
+    const to = (targetFullKey, ...args) => {
+        const [ groupKey, subKey ] = targetFullKey.split('.')[0];
+        let path = paths.subdirectoryPrefix
+        // When linking to *outside* the localized area of the site, we need to
+        // make sure the result is correctly relative to the 8ase directory.
+        if (groupKey !== 'localized' && baseDirectory) {
+            path += urls.from('localizedWithBaseDirectory.' + pageSubKey).to(targetFullKey, ...args);
+        } else {
+            // If we're linking inside the localized area (or there just is no
+            // 8ase directory), the 8ase directory doesn't matter.
+            path += urls.from('localized.' + pageSubKey).to(targetFullKey, ...args);
+        }
+        // console.log(pageSubKey, '->', targetFullKey, '=', path);
+        return path;
+    };
+
+    const content = writePage.html(pageFn, {paths, strings, to});
+    await writePage.write(content, {paths});
+}
+
+writePage.html = (pageFn, {paths, strings, to}) => {
+    let {
+        title = '',
+        meta = {},
+        theme = '',
+        stylesheet = '',
+
+        // missing properties are auto-filled, see below!
+        body = {},
+        banner = {},
+        main = {},
+        sidebarLeft = {},
+        sidebarRight = {},
+        nav = {},
+        footer = {}
+    } = pageFn({to});
+
+    body.style ??= '';
+
+    theme = theme || getThemeString(wikiInfo.color);
+
+    banner ||= {};
+    banner.classes ??= [];
+    banner.src ??= '';
+    banner.position ??= '';
+
+    main.classes ??= [];
+    main.content ??= '';
+
+    sidebarLeft ??= {};
+    sidebarRight ??= {};
+
+    for (const sidebar of [sidebarLeft, sidebarRight]) {
+        sidebar.classes ??= [];
+        sidebar.content ??= '';
+        sidebar.collapse ??= true;
+    }
+
+    nav.classes ??= [];
+    nav.content ??= '';
+    nav.links ??= [];
+
+    footer.classes ??= [];
+    footer.content ??= (wikiInfo.footer ? transformMultiline(wikiInfo.footer, {strings, to}) : '');
+
+    const canonical = (wikiInfo.canonicalBase
+        ? wikiInfo.canonicalBase + paths.pathname
+        : '');
+
+    const collapseSidebars = (sidebarLeft.collapse !== false) && (sidebarRight.collapse !== false);
+
+    const mainHTML = main.content && fixWS`
+        <main id="content" ${classes(...main.classes || [])}>
+            ${main.content}
+        </main>
+    `;
+
+    const footerHTML = footer.content && fixWS`
+        <footer id="footer" ${classes(...footer.classes || [])}>
+            ${footer.content}
+        </footer>
+    `;
+
+    const generateSidebarHTML = (id, {
+        content,
+        multiple,
+        classes: sidebarClasses = [],
+        collapse = true,
+        wide = false
+    }) => (content ? fixWS`
+        <div id="${id}" ${classes(
+            'sidebar-column',
+            'sidebar',
+            wide && 'wide',
+            !collapse && 'no-hide',
+            ...sidebarClasses
+        )}>
+            ${content}
+        </div>
+    ` : multiple ? fixWS`
+        <div id="${id}" ${classes(
+            'sidebar-column',
+            'sidebar-multiple',
+            wide && 'wide',
+            !collapse && 'no-hide'
+        )}>
+            ${multiple.map(content => fixWS`
+                <div ${classes(
+                    'sidebar',
+                    ...sidebarClasses
+                )}>
+                    ${content}
+                </div>
+            `).join('\n')}
+        </div>
+    ` : '');
+
+    const sidebarLeftHTML = generateSidebarHTML('sidebar-left', sidebarLeft);
+    const sidebarRightHTML = generateSidebarHTML('sidebar-right', sidebarRight);
+
+    if (nav.simple) {
+        nav.links = [
+            {
+                href: to('localized.home'),
+                title: wikiInfo.shortName
+            },
+            {
+                href: '',
+                title
+            }
+        ];
+    }
+
+    const links = (nav.links || []).filter(Boolean);
+
+    const navLinkParts = [];
+    for (let i = 0; i < links.length; i++) {
+        const link = links[i];
+        const prev = links[i - 1];
+        const next = links[i + 1];
+        const { html, href, title, divider = true } = link;
+        let part = prev && divider ? '/ ' : '';
+        if (typeof href === 'string') {
+            part += `<a href="${href}" ${classes(i === links.length - 1 && 'current')}>${title}</a>`;
+        } else if (html) {
+            part += `<span>${html}</span>`;
+        }
+        navLinkParts.push(part);
+    }
+
+    const navHTML = html.tag('nav', {
+        [html.onlyIfContent]: true,
+        id: 'header',
+        class: nav.classes
+    }, [
+        links.length && html.tag('h2', {class: 'highlight-last-link'}, navLinkParts),
+        nav.content
+    ]);
+
+    const bannerHTML = banner.position && banner.src && html.tag('div',
+        {
+            id: 'banner',
+            class: banner.classes
+        },
+        html.tag('img', {
+            src: banner.src,
+            alt: banner.alt,
+            width: 1100,
+            height: 200
+        })
+    );
+
+    const layoutHTML = [
+        navHTML,
+        banner.position === 'top' && bannerHTML,
+        (sidebarLeftHTML || sidebarRightHTML) ? fixWS`
+            <div ${classes('layout-columns', !collapseSidebars && 'vertical-when-thin')}>
+                ${sidebarLeftHTML}
+                ${mainHTML}
+                ${sidebarRightHTML}
+            </div>
+        ` : mainHTML,
+        banner.position === 'bottom' && bannerHTML,
+        footerHTML
+    ].filter(Boolean).join('\n');
+
+    const infoCardHTML = fixWS`
+        <div id="info-card-container">
+            <div class="info-card-decor">
+                <div class="info-card">
+                    <div class="info-card-art-container no-reveal">
+                        ${img({
+                            class: 'info-card-art',
+                            src: '',
+                            link: true,
+                            square: true
+                        })}
+                    </div>
+                    <div class="info-card-art-container reveal">
+                        ${img({
+                            class: 'info-card-art',
+                            src: '',
+                            link: true,
+                            square: true,
+                            reveal: getRevealStringFromWarnings('<span class="info-card-art-warnings"></span>', {strings})
+                        })}
+                    </div>
+                    <h1 class="info-card-name"><a></a></h1>
+                    <p class="info-card-album">${strings('releaseInfo.from', {album: '<a></a>'})}</p>
+                    <p class="info-card-artists">${strings('releaseInfo.by', {artists: '<span></span>'})}</p>
+                    <p class="info-card-cover-artists">${strings('releaseInfo.coverArtBy', {artists: '<span></span>'})}</p>
+                </div>
+            </div>
+        </div>
+    `;
+
+    return filterEmptyLines(fixWS`
+        <!DOCTYPE html>
+        <html ${html.attributes({
+            lang: strings.code,
+            'data-rebase-localized': to('localized.root'),
+            'data-rebase-shared': to('shared.root'),
+            'data-rebase-media': to('media.root'),
+            'data-rebase-data': to('data.root')
+        })}>
+            <head>
+                <title>${title}</title>
+                <meta charset="utf-8">
+                <meta name="viewport" content="width=device-width, initial-scale=1">
+                ${Object.entries(meta).filter(([ key, value ]) => value).map(([ key, value ]) => `<meta ${key}="${html.escapeAttributeValue(value)}">`).join('\n')}
+                ${canonical && `<link rel="canonical" href="${canonical}">`}
+                <link rel="stylesheet" href="${to('shared.staticFile', `site.css?${CACHEBUST}`)}">
+                ${(theme || stylesheet) && fixWS`
+                    <style>
+                        ${theme}
+                        ${stylesheet}
+                    </style>
+                `}
+                <script src="${to('shared.staticFile', `lazy-loading.js?${CACHEBUST}`)}"></script>
+            </head>
+            <body ${html.attributes({style: body.style || ''})}>
+                <div id="page-container">
+                    ${mainHTML && fixWS`
+                        <div id="skippers">
+                            ${[
+                                ['#content', strings('misc.skippers.skipToContent')],
+                                sidebarLeftHTML && ['#sidebar-left', (sidebarRightHTML
+                                    ? strings('misc.skippers.skipToSidebar.left')
+                                    : strings('misc.skippers.skipToSidebar'))],
+                                sidebarRightHTML && ['#sidebar-right', (sidebarLeftHTML
+                                    ? strings('misc.skippers.skipToSidebar.right')
+                                    : strings('misc.skippers.skipToSidebar'))],
+                                footerHTML && ['#footer', strings('misc.skippers.skipToFooter')]
+                            ].filter(Boolean).map(([ href, title ]) => fixWS`
+                                <span class="skipper"><a href="${href}">${title}</a></span>
+                            `).join('\n')}
+                        </div>
+                    `}
+                    ${layoutHTML}
+                </div>
+                ${infoCardHTML}
+                <script type="module" src="${to('shared.staticFile', `client.js?${CACHEBUST}`)}"></script>
+            </body>
+        </html>
+    `);
+};
+
+writePage.write = async (content, {paths}) => {
+    await mkdir(paths.outputDirectory, {recursive: true});
+    await writeFile(paths.outputFile, content);
+};
+
+// TODO: This only supports one <>-style argument.
+writePage.paths = (baseDirectory, fullKey, directory, {
+    file = 'index.html'
+} = {}) => {
+    const [ groupKey, subKey ] = fullKey.split('.');
+
+    const pathname = (groupKey === 'localized' && baseDirectory
+        ? urls.from('shared.root').to('localizedWithBaseDirectory.' + subKey, baseDirectory, directory)
+        : urls.from('shared.root').to(fullKey, directory));
+
+    // Needed for the rare directory which itself contains a slash, e.g. for
+    // listings, with directories like 'albums/by-name'.
+    const subdirectoryPrefix = '../'.repeat(directory.split('/').length - 1);
+
+    const outputDirectory = path.join(outputPath, pathname);
+    const outputFile = path.join(outputDirectory, file);
+
+    return {
+        pathname,
+        subdirectoryPrefix,
+        outputDirectory, outputFile
+    };
+};
+
+function getGridHTML({
+    strings,
+    entries,
+    srcFn,
+    hrefFn,
+    altFn = () => '',
+    detailsFn = null,
+    lazy = true
+}) {
+    return entries.map(({ large, item }, i) => fixWS`
+        <a ${classes('grid-item', 'box', large && 'large-grid-item')} href="${hrefFn(item)}" style="${getLinkThemeString(item.color)}">
+            ${img({
+                src: srcFn(item),
+                alt: altFn(item),
+                thumb: 'small',
+                lazy: (typeof lazy === 'number' ? i >= lazy : lazy),
+                square: true,
+                reveal: getRevealStringFromTags(item.artTags, {strings})
+            })}
+            <span>${item.name}</span>
+            ${detailsFn && `<span>${detailsFn(item)}</span>`}
+        </a>
+    `).join('\n');
+}
+
+function getAlbumGridHTML({strings, to, details = false, ...props}) {
+    return getGridHTML({
+        strings,
+        srcFn: album => getAlbumCover(album, {to}),
+        hrefFn: album => to('localized.album', album.directory),
+        detailsFn: details && (album => strings('misc.albumGridDetails', {
+            tracks: strings.count.tracks(album.tracks.length, {unit: true}),
+            time: strings.count.duration(getTotalDuration(album.tracks))
+        })),
+        ...props
+    });
+}
+
+function getFlashGridHTML({strings, to, ...props}) {
+    return getGridHTML({
+        strings,
+        srcFn: flash => to('media.flashArt', flash.directory),
+        hrefFn: flash => to('localized.flash', flash.directory),
+        ...props
+    });
+}
+
+function getNewReleases(numReleases) {
+    const latestFirst = albumData.slice().reverse();
+    const majorReleases = latestFirst.filter(album => album.isMajorRelease);
+    majorReleases.splice(1);
+
+    const otherReleases = latestFirst
+        .filter(album => !majorReleases.includes(album))
+        .slice(0, numReleases - majorReleases.length);
+
+    return [
+        ...majorReleases.map(album => ({large: true, item: album})),
+        ...otherReleases.map(album => ({large: false, item: album}))
+    ];
+}
+
+function getNewAdditions(numAlbums) {
+    // Sort al8ums, in descending order of priority, 8y...
+    //
+    // * D8te of addition to the wiki (descending).
+    // * Major releases first.
+    // * D8te of release (descending).
+    //
+    // Major releases go first to 8etter ensure they show up in the list (and
+    // are usually at the start of the final output for a given d8 of release
+    // too).
+    const sortedAlbums = albumData.slice().sort((a, b) => {
+        if (a.dateAdded > b.dateAdded) return -1;
+        if (a.dateAdded < b.dateAdded) return 1;
+        if (a.isMajorRelease && !b.isMajorRelease) return -1;
+        if (!a.isMajorRelease && b.isMajorRelease) return 1;
+        if (a.date > b.date) return -1;
+        if (a.date < b.date) return 1;
+    });
+
+    // When multiple al8ums are added to the wiki at a time, we want to show
+    // all of them 8efore pulling al8ums from the next (earlier) date. We also
+    // want to show a diverse selection of al8ums - with limited space, we'd
+    // rather not show only the latest al8ums, if those happen to all 8e
+    // closely rel8ted!
+    //
+    // Specifically, we're concerned with avoiding too much overlap amongst
+    // the primary (first/top-most) group. We do this 8y collecting every
+    // primary group present amongst the al8ums for a given d8 into one
+    // (ordered) array, initially sorted (inherently) 8y latest al8um from
+    // the group. Then we cycle over the array, adding one al8um from each
+    // group until all the al8ums from that release d8 have 8een added (or
+    // we've met the total target num8er of al8ums). Once we've added all the
+    // al8ums for a given group, it's struck from the array (so the groups
+    // with the most additions on one d8 will have their oldest releases
+    // collected more towards the end of the list).
+
+    const albums = [];
+
+    let i = 0;
+    outerLoop: while (i < sortedAlbums.length) {
+        // 8uild up a list of groups and their al8ums 8y order of decending
+        // release, iter8ting until we're on a different d8. (We use a map for
+        // indexing so we don't have to iter8te through the entire array each
+        // time we access one of its entries. This is 8asically unnecessary
+        // since this will never 8e an expensive enough task for that to
+        // matter.... 8ut it's nicer code. BBBB) )
+        const currentDate = sortedAlbums[i].dateAdded;
+        const groupMap = new Map();
+        const groupArray = [];
+        for (let album; (album = sortedAlbums[i]) && +album.dateAdded === +currentDate; i++) {
+            const primaryGroup = album.groups[0];
+            if (groupMap.has(primaryGroup)) {
+                groupMap.get(primaryGroup).push(album);
+            } else {
+                const entry = [album]
+                groupMap.set(primaryGroup, entry);
+                groupArray.push(entry);
+            }
+        }
+
+        // Then cycle over that sorted array, adding one al8um from each to
+        // the main array until we've run out or have met the target num8er
+        // of al8ums.
+        while (groupArray.length) {
+            let j = 0;
+            while (j < groupArray.length) {
+                const entry = groupArray[j];
+                const album = entry.shift();
+                albums.push(album);
+
+
+                // This is the only time we ever add anything to the main al8um
+                // list, so it's also the only place we need to check if we've
+                // met the target length.
+                if (albums.length === numAlbums) {
+                    // If we've met it, 8r8k out of the outer loop - we're done
+                    // here!
+                    break outerLoop;
+                }
+
+                if (entry.length) {
+                    j++;
+                } else {
+                    groupArray.splice(j, 1);
+                }
+            }
+        }
+    }
+
+    // Finally, do some quick mapping shenanigans to 8etter display the result
+    // in a grid. (This should pro8a8ly 8e a separ8te, shared function, 8ut
+    // whatevs.)
+    return albums.map(album => ({large: album.isMajorRelease, item: album}));
+}
+
+function writeSymlinks() {
+    return progressPromiseAll('Writing site symlinks.', [
+        link(path.join(__dirname, UTILITY_DIRECTORY), 'shared.utilityRoot'),
+        link(path.join(__dirname, STATIC_DIRECTORY), 'shared.staticRoot'),
+        link(mediaPath, 'media.root')
+    ]);
+
+    async function link(directory, urlKey) {
+        const pathname = urls.from('shared.root').to(urlKey);
+        const file = path.join(outputPath, pathname);
+        try {
+            await unlink(file);
+        } catch (error) {
+            if (error.code !== 'ENOENT') {
+                throw error;
+            }
+        }
+        await symlink(path.resolve(directory), file);
+    }
+}
+
+function writeSharedFilesAndPages({strings}) {
+    const redirect = async (title, from, urlKey, directory) => {
+        const target = path.relative(from, urls.from('shared.root').to(urlKey, directory));
+        const content = generateRedirectPage(title, target, {strings});
+        await mkdir(path.join(outputPath, from), {recursive: true});
+        await writeFile(path.join(outputPath, from, 'index.html'), content);
+    };
+
+    return progressPromiseAll(`Writing files & pages shared across languages.`, [
+        groupData?.some(group => group.directory === 'fandom') &&
+        redirect('Fandom - Gallery', 'albums/fandom', 'localized.groupGallery', 'fandom'),
+
+        groupData?.some(group => group.directory === 'official') &&
+        redirect('Official - Gallery', 'albums/official', 'localized.groupGallery', 'official'),
+
+        wikiInfo.features.listings &&
+        redirect('Album Commentary', 'list/all-commentary', 'localized.commentaryIndex', ''),
+
+        writeFile(path.join(outputPath, 'data.json'), fixWS`
+            {
+                "albumData": ${stringifyAlbumData()},
+                ${wikiInfo.features.flashesAndGames && `"flashData": ${stringifyFlashData()},`}
+                "artistData": ${stringifyArtistData()}
+            }
+        `)
+    ].filter(Boolean));
+}
+
+function writeHomepage() {
+    return ({strings, writePage}) => writePage('home', '', ({to}) => ({
+        title: wikiInfo.name,
+
+        meta: {
+            description: wikiInfo.description
+        },
+
+        main: {
+            classes: ['top-index'],
+            content: fixWS`
+                <h1>${wikiInfo.name}</h1>
+                ${homepageInfo.rows.map((row, i) => fixWS`
+                    <section class="row" style="${getLinkThemeString(row.color)}">
+                        <h2>${row.name}</h2>
+                        ${row.type === 'albums' && fixWS`
+                            <div class="grid-listing">
+                                ${getAlbumGridHTML({
+                                    strings, to,
+                                    entries: (
+                                        row.group === 'new-releases' ? getNewReleases(row.groupCount) :
+                                        row.group === 'new-additions' ? getNewAdditions(row.groupCount) :
+                                        ((search.group(row.group)?.albums || [])
+                                            .slice()
+                                            .reverse()
+                                            .slice(0, row.groupCount)
+                                            .map(album => ({item: album})))
+                                    ).concat(row.albums
+                                        .map(search.album)
+                                        .map(album => ({item: album}))
+                                    ),
+                                    lazy: i > 0
+                                })}
+                                ${row.actions.length && fixWS`
+                                    <div class="grid-actions">
+                                        ${row.actions.map(action => transformInline(action, {strings, to})
+                                            .replace('<a', '<a class="box grid-item"')).join('\n')}
+                                    </div>
+                                `}
+                            </div>
+                        `}
+                    </section>
+                `).join('\n')}
+            `
+        },
+
+        sidebarLeft: homepageInfo.sidebar && {
+            wide: true,
+            collapse: false,
+            // This is a pretty filthy hack! 8ut otherwise, the [[news]] part
+            // gets treated like it's a reference to the track named "news",
+            // which o8viously isn't what we're going for. Gotta catch that
+            // 8efore we pass it to transformMultiline, 'cuz otherwise it'll
+            // get repl8ced with just the word "news" (or anything else that
+            // transformMultiline does with references it can't match) -- and
+            // we can't match that for replacing it with the news column!
+            //
+            // And no, I will not make [[news]] into part of transformMultiline
+            // (even though that would 8e hilarious).
+            content: transformMultiline(homepageInfo.sidebar.replace('[[news]]', '__GENERATE_NEWS__'), {strings, to}).replace('<p>__GENERATE_NEWS__</p>', wikiInfo.features.news ? fixWS`
+                <h1>${strings('homepage.news.title')}</h1>
+                ${newsData.slice(0, 3).map((entry, i) => fixWS`
+                    <article ${classes('news-entry', i === 0 && 'first-news-entry')}>
+                        <h2><time>${strings.count.date(entry.date)}</time> ${strings.link.newsEntry(entry, {to})}</h2>
+                        ${transformMultiline(entry.bodyShort, {strings, to})}
+                        ${entry.bodyShort !== entry.body && strings.link.newsEntry(entry, {
+                            to,
+                            text: strings('homepage.news.entry.viewRest')
+                        })}
+                    </article>
+                `).join('\n')}
+            ` : `<p><i>News requested in content description but this feature isn't enabled</i></p>`)
+        },
+
+        nav: {
+            content: fixWS`
+                <h2 class="dot-between-spans">
+                    ${[
+                        strings.link.home('', {text: wikiInfo.shortName, class: 'current', to}),
+                        wikiInfo.features.listings &&
+                        strings.link.listingIndex('', {text: strings('listingIndex.title'), to}),
+                        wikiInfo.features.news &&
+                        strings.link.newsIndex('', {text: strings('newsIndex.title'), to}),
+                        wikiInfo.features.flashesAndGames &&
+                        strings.link.flashIndex('', {text: strings('flashIndex.title'), to}),
+                        ...staticPageData.filter(page => page.listed).map(page => strings.link.staticPage(page, {to}))
+                    ].filter(Boolean).map(link => `<span>${link}</span>`).join('\n')}
+                </h2>
+            `
+        }
+    }));
+}
+
+function writeMiscellaneousPages() {
+    return [
+        writeHomepage()
+    ];
+}
+
+function writeNewsPages() {
+    if (!wikiInfo.features.news) {
+        return;
+    }
+
+    return [
+        writeNewsIndex(),
+        ...newsData.map(writeNewsEntryPage)
+    ];
+}
+
+function writeNewsIndex() {
+    return ({strings, writePage}) => writePage('newsIndex', '', ({to}) => ({
+        title: strings('newsIndex.title'),
+
+        main: {
+            content: fixWS`
+                <div class="long-content news-index">
+                    <h1>${strings('newsIndex.title')}</h1>
+                    ${newsData.map(entry => fixWS`
+                        <article id="${entry.directory}">
+                            <h2><time>${strings.count.date(entry.date)}</time> ${strings.link.newsEntry(entry, {to})}</h2>
+                            ${transformMultiline(entry.bodyShort, {strings, to})}
+                            ${entry.bodyShort !== entry.body && `<p>${strings.link.newsEntry(entry, {
+                                to,
+                                text: strings('newsIndex.entry.viewRest')
+                            })}</p>`}
+                        </article>
+                    `).join('\n')}
+                </div>
+            `
+        },
+
+        nav: {simple: true}
+    }));
+}
+
+function writeNewsEntryPage(entry) {
+    return ({strings, writePage}) => writePage('newsEntry', entry.directory, ({to}) => ({
+        title: strings('newsEntryPage.title', {entry: entry.name}),
+
+        main: {
+            content: fixWS`
+                <div class="long-content">
+                    <h1>${strings('newsEntryPage.title', {entry: entry.name})}</h1>
+                    <p>${strings('newsEntryPage.published', {date: strings.count.date(entry.date)})}</p>
+                    ${transformMultiline(entry.body, {strings, to})}
+                </div>
+            `
+        },
+
+        nav: generateNewsEntryNav(entry, {strings, to})
+    }));
+}
+
+function generateNewsEntryNav(entry, {strings, to}) {
+    // The newsData list is sorted reverse chronologically (newest ones first),
+    // so the way we find next/previous entries is flipped from normal.
+    const previousNextLinks = generatePreviousNextLinks('localized.newsEntry', entry, newsData.slice().reverse(), {strings, to});
+
+    return {
+        links: [
+            {
+                href: to('localized.home'),
+                title: wikiInfo.shortName
+            },
+            {
+                href: to('localized.newsIndex'),
+                title: strings('newsEntryPage.nav.news')
+            },
+            {
+                html: strings('newsEntryPage.nav.entry', {
+                    date: strings.count.date(entry.date),
+                    entry: strings.link.newsEntry(entry, {class: 'current', to})
+                })
+            },
+            previousNextLinks &&
+            {
+                divider: false,
+                html: `(${previousNextLinks})`
+            }
+        ]
+    };
+}
+
+function writeStaticPages() {
+    return staticPageData.map(writeStaticPage);
+}
+
+function writeStaticPage(staticPage) {
+    return ({strings, writePage}) => writePage('staticPage', staticPage.directory, ({to}) => ({
+        title: staticPage.name,
+        stylesheet: staticPage.stylesheet,
+
+        main: {
+            content: fixWS`
+                <div class="long-content">
+                    <h1>${staticPage.name}</h1>
+                    ${transformMultiline(staticPage.content, {strings, to})}
+                </div>
+            `
+        },
+
+        nav: {simple: true}
+    }));
+}
+
+
+function getRevealStringFromWarnings(warnings, {strings}) {
+    return strings('misc.contentWarnings', {warnings}) + `<br><span class="reveal-interaction">${strings('misc.contentWarnings.reveal')}</span>`
+}
+
+function getRevealStringFromTags(tags, {strings}) {
+    return tags && tags.some(tag => tag.isCW) && (
+        getRevealStringFromWarnings(strings.list.unit(tags.filter(tag => tag.isCW).map(tag => tag.name)), {strings}));
+}
+
+function generateCoverLink({
+    strings, to,
+    src,
+    alt,
+    tags = []
+}) {
+    return fixWS`
+        <div id="cover-art-container">
+            ${img({
+                src,
+                alt,
+                thumb: 'medium',
+                id: 'cover-art',
+                link: true,
+                square: true,
+                reveal: getRevealStringFromTags(tags, {strings})
+            })}
+            ${wikiInfo.features.artTagUI && tags.filter(tag => !tag.isCW).length && fixWS`
+                <p class="tags">
+                    ${strings('releaseInfo.artTags')}
+                    ${(tags
+                        .filter(tag => !tag.isCW)
+                        .map(tag => strings.link.tag(tag, {to}))
+                        .join(',\n'))}
+                </p>
+            `}
+        </div>
+    `;
+}
+
+// This function title is my gr8test work of art.
+// (The 8ehavior... well, um. Don't tell anyone, 8ut it's even 8etter.)
+/* // RIP, 2k20-2k20.
+function writeIndexAndTrackPagesForAlbum(album) {
+    return [
+        () => writeAlbumPage(album),
+        ...album.tracks.map(track => () => writeTrackPage(track))
+    ];
+}
+*/
+
+function writeAlbumPages() {
+    return albumData.map(writeAlbumPage);
+}
+
+function writeAlbumPage(album) {
+    const trackToListItem = (track, {strings, to}) => {
+        const itemOpts = {
+            duration: strings.count.duration(track.duration),
+            track: strings.link.track(track, {to})
+        };
+        return `<li style="${getLinkThemeString(track.color)}">${
+            (track.artists === album.artists
+                ? strings('trackList.item.withDuration', itemOpts)
+                : strings('trackList.item.withDuration.withArtists', {
+                    ...itemOpts,
+                    by: `<span class="by">${
+                        strings('trackList.item.withArtists.by', {
+                            artists: getArtistString(track.artists, {strings, to})
+                        })
+                    }</span>`
+                }))
+        }</li>`;
+    };
+
+    const commentaryEntries = [album, ...album.tracks].filter(x => x.commentary).length;
+    const albumDuration = getTotalDuration(album.tracks);
+
+    const listTag = getAlbumListTag(album);
+
+    const data = {
+        type: 'data',
+        path: ['album', album.directory],
+        data: () => ({
+            name: album.name,
+            directory: album.directory,
+            dates: {
+                released: album.date,
+                trackArtAdded: album.trackArtDate,
+                coverArtAdded: album.coverArtDate,
+                addedToWiki: album.dateAdded
+            },
+            duration: albumDuration,
+            color: album.color,
+            cover: serializeCover(album, getAlbumCover),
+            artists: serializeContribs(album.artists || []),
+            coverArtists: serializeContribs(album.coverArtists || []),
+            wallpaperArtists: serializeContribs(album.wallpaperArtists || []),
+            bannerArtists: serializeContribs(album.bannerArtists || []),
+            groups: serializeGroupsForAlbum(album),
+            trackGroups: album.trackGroups?.map(trackGroup => ({
+                name: trackGroup.name,
+                color: trackGroup.color,
+                tracks: trackGroup.tracks.map(track => track.directory)
+            })),
+            tracks: album.tracks.map(track => ({
+                link: serializeLink(track),
+                duration: track.duration
+            }))
+        })
+    };
+
+    const page = {type: 'page', path: ['album', album.directory], page: ({strings, to}) => ({
+        title: strings('albumPage.title', {album: album.name}),
+        stylesheet: getAlbumStylesheet(album, {to}),
+        theme: getThemeString(album.color, [
+            `--album-directory: ${album.directory}`
+        ]),
+
+        banner: album.bannerArtists && {
+            src: to('media.albumBanner', album.directory),
+            alt: strings('misc.alt.albumBanner'),
+            position: 'top'
+        },
+
+        main: {
+            content: fixWS`
+                ${generateCoverLink({
+                    strings, to,
+                    src: to('media.albumCover', album.directory),
+                    alt: strings('misc.alt.albumCover'),
+                    tags: album.artTags
+                })}
+                <h1>${strings('albumPage.title', {album: album.name})}</h1>
+                <p>
+                    ${[
+                        album.artists && strings('releaseInfo.by', {
+                            artists: getArtistString(album.artists, {
+                                strings, to,
+                                showContrib: true,
+                                showIcons: true
+                            })
+                        }),
+                        album.coverArtists && strings('releaseInfo.coverArtBy', {
+                            artists: getArtistString(album.coverArtists, {
+                                strings, to,
+                                showContrib: true,
+                                showIcons: true
+                            })
+                        }),
+                        album.wallpaperArtists && strings('releaseInfo.wallpaperArtBy', {
+                            artists: getArtistString(album.wallpaperArtists, {
+                                strings, to,
+                                showContrib: true,
+                                showIcons: true
+                            })
+                        }),
+                        album.bannerArtists && strings('releaseInfo.bannerArtBy', {
+                            artists: getArtistString(album.bannerArtists, {
+                                strings, to,
+                                showContrib: true,
+                                showIcons: true
+                            })
+                        }),
+                        strings('releaseInfo.released', {
+                            date: strings.count.date(album.date)
+                        }),
+                        +album.coverArtDate !== +album.date && strings('releaseInfo.artReleased', {
+                            date: strings.count.date(album.coverArtDate)
+                        }),
+                        strings('releaseInfo.duration', {
+                            duration: strings.count.duration(albumDuration, {approximate: album.tracks.length > 1})
+                        })
+                    ].filter(Boolean).join('<br>\n')}
+                </p>
+                ${commentaryEntries && `<p>${
+                    strings('releaseInfo.viewCommentary', {
+                        link: `<a href="${to('localized.albumCommentary', album.directory)}">${
+                            strings('releaseInfo.viewCommentary.link')
+                        }</a>`
+                    })
+                }</p>`}
+                ${album.urls.length && `<p>${
+                    strings('releaseInfo.listenOn', {
+                        links: strings.list.or(album.urls.map(url => fancifyURL(url, {album: true, strings})))
+                    })
+                }</p>`}
+                ${album.trackGroups ? fixWS`
+                    <dl class="album-group-list">
+                        ${album.trackGroups.map(({ name, color, startIndex, tracks }) => fixWS`
+                            <dt>${
+                                strings('trackList.group', {
+                                    duration: strings.count.duration(getTotalDuration(tracks), {approximate: tracks.length > 1}),
+                                    group: name
+                                })
+                            }</dt>
+                            <dd><${listTag === 'ol' ? `ol start="${startIndex + 1}"` : listTag}>
+                                ${tracks.map(t => trackToListItem(t, {strings, to})).join('\n')}
+                            </${listTag}></dd>
+                        `).join('\n')}
+                    </dl>
+                ` : fixWS`
+                    <${listTag}>
+                        ${album.tracks.map(t => trackToListItem(t, {strings, to})).join('\n')}
+                    </${listTag}>
+                `}
+                <p>
+                    ${[
+                        strings('releaseInfo.addedToWiki', {
+                            date: strings.count.date(album.dateAdded)
+                        })
+                    ].filter(Boolean).join('<br>\n')}
+                </p>
+                ${album.commentary && fixWS`
+                    <p>${strings('releaseInfo.artistCommentary')}</p>
+                    <blockquote>
+                        ${transformMultiline(album.commentary, {strings, to})}
+                    </blockquote>
+                `}
+            `
+        },
+
+        sidebarLeft: generateSidebarForAlbum(album, null, {strings, to}),
+
+        nav: {
+            links: [
+                {
+                    href: to('localized.home'),
+                    title: wikiInfo.shortName
+                },
+                {
+                    html: strings('albumPage.nav.album', {
+                        album: strings.link.album(album, {class: 'current', to})
+                    })
+                },
+                {
+                    divider: false,
+                    html: generateAlbumNavLinks(album, null, {strings, to})
+                }
+            ],
+            content: fixWS`
+                <div>
+                    ${generateAlbumChronologyLinks(album, null, {strings, to})}
+                </div>
+            `
+        }
+    })};
+
+    return [page, data];
+}
+
+function getAlbumStylesheet(album, {to}) {
+    return [
+        album.wallpaperArtists && fixWS`
+            body::before {
+                background-image: url("${to('media.albumWallpaper', album.directory)}");
+                ${album.wallpaperStyle}
+            }
+        `,
+        album.bannerStyle && fixWS`
+            #banner img {
+                ${album.bannerStyle}
+            }
+        `
+    ].filter(Boolean).join('\n');
+}
+
+function writeTrackPages() {
+    return trackData.map(writeTrackPage);
+}
+
+function writeTrackPage(track) {
+    const { album } = track;
+
+    const tracksThatReference = track.referencedBy;
+    const useDividedReferences = groupData.some(group => group.directory === OFFICIAL_GROUP_DIRECTORY);
+    const ttrFanon = (useDividedReferences &&
+        tracksThatReference.filter(t => t.album.groups.every(group => group.directory !== OFFICIAL_GROUP_DIRECTORY)));
+    const ttrOfficial = (useDividedReferences &&
+        tracksThatReference.filter(t => t.album.groups.some(group => group.directory === OFFICIAL_GROUP_DIRECTORY)));
+
+    const tracksReferenced = track.references;
+    const otherReleases = track.otherReleases;
+    const listTag = getAlbumListTag(album);
+
+    let flashesThatFeature;
+    if (wikiInfo.features.flashesAndGames) {
+        flashesThatFeature = sortByDate([track, ...otherReleases]
+            .flatMap(track => track.flashes.map(flash => ({flash, as: track}))));
+    }
+
+    const generateTrackList = (tracks, {strings, to}) => html.tag('ul',
+        tracks.map(track => {
+            const line = strings('trackList.item.withArtists', {
+                track: strings.link.track(track, {to}),
+                by: `<span class="by">${strings('trackList.item.withArtists.by', {
+                    artists: getArtistString(track.artists, {strings, to})
+                })}</span>`
+            });
+            return (track.aka
+                ? `<li class="rerelease">${strings('trackList.item.rerelease', {track: line})}</li>`
+                : `<li>${line}</li>`);
+        })
+    );
+
+    const hasCommentary = track.commentary || otherReleases.some(t => t.commentary);
+    const generateCommentary = ({strings, to}) => transformMultiline(
+        [
+            track.commentary,
+            ...otherReleases.map(track =>
+                (track.commentary?.split('\n')
+                    .filter(line => line.replace(/<\/b>/g, '').includes(':</i>'))
+                    .map(line => fixWS`
+                        ${line}
+                        ${strings('releaseInfo.artistCommentary.seeOriginalRelease', {
+                            original: strings.link.track(track, {to})
+                        })}
+                    `)
+                    .join('\n')))
+        ].filter(Boolean).join('\n'),
+        {strings, to});
+
+    const data = {
+        type: 'data',
+        path: ['track', track.directory],
+        data: () => ({
+            name: track.name,
+            directory: track.directory,
+            dates: {
+                released: track.date,
+                originallyReleased: track.originalDate,
+                coverArtAdded: track.coverArtDate
+            },
+            duration: track.duration,
+            color: track.color,
+            cover: serializeCover(track, getTrackCover),
+            artists: serializeContribs(track.artists),
+            contributors: serializeContribs(track.contributors),
+            coverArtists: serializeContribs(track.coverArtists || []),
+            album: serializeLink(track.album),
+            groups: serializeGroupsForTrack(track),
+            references: track.references.map(serializeLink),
+            referencedBy: track.referencedBy.map(serializeLink),
+            alsoReleasedAs: otherReleases.map(track => ({
+                track: serializeLink(track),
+                album: serializeLink(track.album)
+            }))
+        })
+    };
+
+    const page = {type: 'page', path: ['track', track.directory], page: ({strings, to}) => ({
+        title: strings('trackPage.title', {track: track.name}),
+        stylesheet: getAlbumStylesheet(album, {to}),
+        theme: getThemeString(track.color, [
+            `--album-directory: ${album.directory}`,
+            `--track-directory: ${track.directory}`
+        ]),
+
+        // disabled for now! shifting banner position per height of page is disorienting
+        /*
+        banner: album.bannerArtists && {
+            classes: ['dim'],
+            src: to('media.albumBanner', album.directory),
+            alt: strings('misc.alt.albumBanner'),
+            position: 'bottom'
+        },
+        */
+
+        main: {
+            content: fixWS`
+                ${generateCoverLink({
+                    strings, to,
+                    src: getTrackCover(track, {to}),
+                    alt: strings('misc.alt.trackCover'),
+                    tags: track.artTags
+                })}
+                <h1>${strings('trackPage.title', {track: track.name})}</h1>
+                <p>
+                    ${[
+                        strings('releaseInfo.by', {
+                            artists: getArtistString(track.artists, {
+                                strings, to,
+                                showContrib: true,
+                                showIcons: true
+                            })
+                        }),
+                        track.coverArtists && strings('releaseInfo.coverArtBy', {
+                            artists: getArtistString(track.coverArtists, {
+                                strings, to,
+                                showContrib: true,
+                                showIcons: true
+                            })
+                        }),
+                        album.directory !== UNRELEASED_TRACKS_DIRECTORY && strings('releaseInfo.released', {
+                            date: strings.count.date(track.date)
+                        }),
+                        +track.coverArtDate !== +track.date && strings('releaseInfo.artReleased', {
+                            date: strings.count.date(track.coverArtDate)
+                        }),
+                        track.duration && strings('releaseInfo.duration', {
+                            duration: strings.count.duration(track.duration)
+                        })
+                    ].filter(Boolean).join('<br>\n')}
+                </p>
+                <p>${
+                    (track.urls.length
+                        ? strings('releaseInfo.listenOn', {
+                            links: strings.list.or(track.urls.map(url => fancifyURL(url, {strings})))
+                        })
+                        : strings('releaseInfo.listenOn.noLinks'))
+                }</p>
+                ${otherReleases.length && fixWS`
+                    <p>${strings('releaseInfo.alsoReleasedAs')}</p>
+                    <ul>
+                        ${otherReleases.map(track => fixWS`
+                            <li>${strings('releaseInfo.alsoReleasedAs.item', {
+                                track: strings.link.track(track, {to}),
+                                album: strings.link.album(track.album, {to})
+                            })}</li>
+                        `).join('\n')}
+                    </ul>
+                `}
+                ${track.contributors.textContent && fixWS`
+                    <p>
+                        ${strings('releaseInfo.contributors')}
+                        <br>
+                        ${transformInline(track.contributors.textContent, {strings, to})}
+                    </p>
+                `}
+                ${track.contributors.length && fixWS`
+                    <p>${strings('releaseInfo.contributors')}</p>
+                    <ul>
+                        ${(track.contributors
+                            .map(contrib => `<li>${getArtistString([contrib], {
+                                strings, to,
+                                showContrib: true,
+                                showIcons: true
+                            })}</li>`)
+                            .join('\n'))}
+                    </ul>
+                `}
+                ${tracksReferenced.length && fixWS`
+                    <p>${strings('releaseInfo.tracksReferenced', {track: `<i>${track.name}</i>`})}</p>
+                    ${generateTrackList(tracksReferenced, {strings, to})}
+                `}
+                ${tracksThatReference.length && fixWS`
+                    <p>${strings('releaseInfo.tracksThatReference', {track: `<i>${track.name}</i>`})}</p>
+                    ${useDividedReferences && fixWS`
+                        <dl>
+                            ${ttrOfficial.length && fixWS`
+                                <dt>${strings('trackPage.referenceList.official')}</dt>
+                                <dd>${generateTrackList(ttrOfficial, {strings, to})}</dd>
+                            `}
+                            ${ttrFanon.length && fixWS`
+                                <dt>${strings('trackPage.referenceList.fandom')}</dt>
+                                <dd>${generateTrackList(ttrFanon, {strings, to})}</dd>
+                            `}
+                        </dl>
+                    `}
+                    ${!useDividedReferences && generateTrackList(tracksThatReference, {strings, to})}
+                `}
+                ${wikiInfo.features.flashesAndGames && flashesThatFeature.length && fixWS`
+                    <p>${strings('releaseInfo.flashesThatFeature', {track: `<i>${track.name}</i>`})}</p>
+                    <ul>
+                        ${flashesThatFeature.map(({ flash, as }) => fixWS`
+                            <li ${classes(as !== track && 'rerelease')}>${
+                                (as === track
+                                    ? strings('releaseInfo.flashesThatFeature.item', {
+                                        flash: strings.link.flash(flash, {to})
+                                    })
+                                    : strings('releaseInfo.flashesThatFeature.item.asDifferentRelease', {
+                                        flash: strings.link.flash(flash, {to}),
+                                        track: strings.link.track(as, {to})
+                                    }))
+                            }</li>
+                        `).join('\n')}
+                    </ul>
+                `}
+                ${track.lyrics && fixWS`
+                    <p>${strings('releaseInfo.lyrics')}</p>
+                    <blockquote>
+                        ${transformLyrics(track.lyrics, {strings, to})}
+                    </blockquote>
+                `}
+                ${hasCommentary && fixWS`
+                    <p>${strings('releaseInfo.artistCommentary')}</p>
+                    <blockquote>
+                        ${generateCommentary({strings, to})}
+                    </blockquote>
+                `}
+            `
+        },
+
+        sidebarLeft: generateSidebarForAlbum(album, track, {strings, to}),
+
+        nav: {
+            links: [
+                {
+                    href: to('localized.home'),
+                    title: wikiInfo.shortName
+                },
+                {
+                    href: to('localized.album', album.directory),
+                    title: album.name
+                },
+                listTag === 'ol' ? {
+                    html: strings('trackPage.nav.track.withNumber', {
+                        number: album.tracks.indexOf(track) + 1,
+                        track: strings.link.track(track, {class: 'current', to})
+                    })
+                } : {
+                    html: strings('trackPage.nav.track', {
+                        track: strings.link.track(track, {class: 'current', to})
+                    })
+                },
+                {
+                    divider: false,
+                    html: generateAlbumNavLinks(album, track, {strings, to})
+                }
+            ].filter(Boolean),
+            content: fixWS`
+                <div>
+                    ${generateAlbumChronologyLinks(album, track, {strings, to})}
+                </div>
+            `
+        }
+    })};
+
+    return [data, page];
+}
+
+function writeArtistPages() {
+    return [
+        ...artistData.map(writeArtistPage),
+        ...artistAliasData.map(writeArtistAliasPage)
+    ];
+}
+
+function writeArtistPage(artist) {
+    const {
+        name,
+        urls = [],
+        note = ''
+    } = artist;
+
+    const artThingsAll = sortByDate(unique([...artist.albums.asCoverArtist, ...artist.albums.asWallpaperArtist, ...artist.albums.asBannerArtist, ...artist.tracks.asCoverArtist]));
+    const artThingsGallery = sortByDate([...artist.albums.asCoverArtist, ...artist.tracks.asCoverArtist]);
+    const commentaryThings = sortByDate([...artist.albums.asCommentator, ...artist.tracks.asCommentator]);
+
+    const hasGallery = artThingsGallery.length > 0;
+
+    const getArtistsAndContrib = (thing, key) => ({
+        artists: thing[key]?.filter(({ who }) => who !== artist),
+        contrib: thing[key]?.find(({ who }) => who === artist),
+        thing,
+        key
+    });
+
+    const artListChunks = chunkByProperties(artThingsAll.flatMap(thing =>
+        (['coverArtists', 'wallpaperArtists', 'bannerArtists']
+            .map(key => getArtistsAndContrib(thing, key))
+            .filter(({ contrib }) => contrib)
+            .map(props => ({
+                album: thing.album || thing,
+                track: thing.album ? thing : null,
+                date: +(thing.coverArtDate || thing.date),
+                ...props
+            })))
+    ), ['date', 'album']);
+
+    const commentaryListChunks = chunkByProperties(commentaryThings.map(thing => ({
+        album: thing.album || thing,
+        track: thing.album ? thing : null
+    })), ['album']);
+
+    const allTracks = sortByDate(unique([...artist.tracks.asArtist, ...artist.tracks.asContributor]));
+    const unreleasedTracks = allTracks.filter(track => track.album.directory === UNRELEASED_TRACKS_DIRECTORY);
+    const releasedTracks = allTracks.filter(track => track.album.directory !== UNRELEASED_TRACKS_DIRECTORY);
+
+    const chunkTracks = tracks => (
+        chunkByProperties(tracks.map(track => ({
+            track,
+            date: +track.date,
+            album: track.album,
+            duration: track.duration,
+            artists: (track.artists.some(({ who }) => who === artist)
+                ? track.artists.filter(({ who }) => who !== artist)
+                : track.contributors.filter(({ who }) => who !== artist)),
+            contrib: {
+                who: artist,
+                what: [
+                    track.artists.find(({ who }) => who === artist)?.what,
+                    track.contributors.find(({ who }) => who === artist)?.what
+                ].filter(Boolean).join(', ')
+            }
+        })), ['date', 'album'])
+        .map(({date, album, chunk}) => ({
+            date, album, chunk,
+            duration: getTotalDuration(chunk),
+        })));
+
+    const unreleasedTrackListChunks = chunkTracks(unreleasedTracks);
+    const releasedTrackListChunks = chunkTracks(releasedTracks);
+
+    const totalReleasedDuration = getTotalDuration(releasedTracks);
+
+    const countGroups = things => {
+        const usedGroups = things.flatMap(thing => thing.groups || thing.album?.groups || []);
+        return groupData
+            .map(group => ({
+                group,
+                contributions: usedGroups.filter(g => g === group).length
+            }))
+            .filter(({ contributions }) => contributions > 0)
+            .sort((a, b) => b.contributions - a.contributions);
+    };
+
+    const musicGroups = countGroups(releasedTracks);
+    const artGroups = countGroups(artThingsAll);
+
+    let flashes, flashListChunks;
+    if (wikiInfo.features.flashesAndGames) {
+        flashes = sortByDate(artist.flashes.asContributor.slice());
+        flashListChunks = (
+            chunkByProperties(flashes.map(flash => ({
+                act: flash.act,
+                flash,
+                date: flash.date,
+                // Manual artists/contrib properties here, 8ecause we don't
+                // want to show the full list of other contri8utors inline.
+                // (It can often 8e very, very large!)
+                artists: [],
+                contrib: flash.contributors.find(({ who }) => who === artist)
+            })), ['act'])
+            .map(({ act, chunk }) => ({
+                act, chunk,
+                dateFirst: chunk[0].date,
+                dateLast: chunk[chunk.length - 1].date
+            })));
+    }
+
+    const generateEntryAccents = ({ aka, entry, artists, contrib, strings, to }) =>
+        (aka
+            ? strings('artistPage.creditList.entry.rerelease', {entry})
+            : (artists.length
+                ? (contrib.what
+                    ? strings('artistPage.creditList.entry.withArtists.withContribution', {
+                        entry,
+                        artists: getArtistString(artists, {strings, to}),
+                        contribution: contrib.what
+                    })
+                    : strings('artistPage.creditList.entry.withArtists', {
+                        entry,
+                        artists: getArtistString(artists, {strings, to})
+                    }))
+                : (contrib.what
+                    ? strings('artistPage.creditList.entry.withContribution', {
+                        entry,
+                        contribution: contrib.what
+                    })
+                    : entry)));
+
+    const generateTrackList = (chunks, {strings, to}) => fixWS`
+        <dl>
+            ${chunks.map(({date, album, chunk, duration}) => fixWS`
+                <dt>${strings('artistPage.creditList.album.withDate.withDuration', {
+                    album: strings.link.album(album, {to}),
+                    date: strings.count.date(date),
+                    duration: strings.count.duration(duration, {approximate: true})
+                })}</dt>
+                <dd><ul>
+                    ${(chunk
+                        .map(({track, ...props}) => ({
+                            aka: track.aka,
+                            entry: strings('artistPage.creditList.entry.track.withDuration', {
+                                track: strings.link.track(track, {to}),
+                                duration: strings.count.duration(track.duration, {to})
+                            }),
+                            ...props
+                        }))
+                        .map(({aka, ...opts}) => `<li ${classes(aka && 'rerelease')}>${generateEntryAccents({strings, to, aka, ...opts})}</li>`)
+                        .join('\n'))}
+                </ul></dd>
+            `).join('\n')}
+        </dl>
+    `;
+
+    const serializeArtistsAndContrib = key => thing => {
+        const { artists, contrib } = getArtistsAndContrib(thing, key);
+        const ret = {};
+        ret.link = serializeLink(thing);
+        if (contrib.what) ret.contribution = contrib.what;
+        if (artists.length) ret.otherArtists = serializeContribs(artists);
+        return ret;
+    };
+
+    const serializeTrackListChunks = chunks =>
+        chunks.map(({date, album, chunk, duration}) => ({
+            album: serializeLink(album),
+            date,
+            duration,
+            tracks: chunk.map(({ track }) => ({
+                link: serializeLink(track),
+                duration: track.duration
+            }))
+        }));
+
+    const data = {
+        type: 'data',
+        path: ['artist', artist.directory],
+        data: () => ({
+            albums: {
+                asCoverArtist: artist.albums.asCoverArtist.map(serializeArtistsAndContrib('coverArtists')),
+                asWallpaperArtist: artist.albums.asWallpaperArtist.map(serializeArtistsAndContrib('wallpaperArtists')),
+                asBannerArtist: artist.albums.asBannerArtist.map(serializeArtistsAndContrib('bannerArtists'))
+            },
+            flashes: wikiInfo.features.flashesAndGames ? {
+                asContributor: artist.flashes.asContributor
+                    .map(flash => getArtistsAndContrib(flash, 'contributors'))
+                    .map(({ contrib, thing: flash }) => ({
+                        link: serializeLink(flash),
+                        contribution: contrib.what
+                    }))
+            } : null,
+            tracks: {
+                asArtist: artist.tracks.asArtist.map(serializeArtistsAndContrib('artists')),
+                asContributor: artist.tracks.asContributor.map(serializeArtistsAndContrib('contributors')),
+                chunked: {
+                    released: serializeTrackListChunks(releasedTrackListChunks),
+                    unreleased: serializeTrackListChunks(unreleasedTrackListChunks)
+                }
+            }
+        })
+    };
+
+    const infoPage = {
+        type: 'page',
+        path: ['artist', artist.directory],
+        page: ({strings, to}) => ({
+            title: strings('artistPage.title', {artist: name}),
+
+            main: {
+                content: fixWS`
+                    ${artist.hasAvatar && generateCoverLink({
+                        strings, to,
+                        src: to('localized.artistAvatar', artist.directory),
+                        alt: strings('misc.alt.artistAvatar')
+                    })}
+                    <h1>${strings('artistPage.title', {artist: name})}</h1>
+                    ${note && fixWS`
+                        <p>${strings('releaseInfo.note')}</p>
+                        <blockquote>
+                            ${transformMultiline(note, {strings, to})}
+                        </blockquote>
+                        <hr>
+                    `}
+                    ${urls.length && `<p>${strings('releaseInfo.visitOn', {
+                        links: strings.list.or(urls.map(url => fancifyURL(url, {strings})))
+                    })}</p>`}
+                    ${hasGallery && `<p>${strings('artistPage.viewArtGallery', {
+                        link: strings.link.artistGallery(artist, {
+                            to,
+                            text: strings('artistPage.viewArtGallery.link')
+                        })
+                    })}</p>`}
+                    <p>${strings('misc.jumpTo.withLinks', {
+                        links: strings.list.unit([
+                            [
+                                [...releasedTracks, ...unreleasedTracks].length && `<a href="#tracks">${strings('artistPage.trackList.title')}</a>`,
+                                unreleasedTracks.length && `(<a href="#unreleased-tracks">${strings('artistPage.unreleasedTrackList.title')}</a>)`
+                            ].filter(Boolean).join(' '),
+                            artThingsAll.length && `<a href="#art">${strings('artistPage.artList.title')}</a>`,
+                            wikiInfo.features.flashesAndGames && flashes.length && `<a href="#flashes">${strings('artistPage.flashList.title')}</a>`,
+                            commentaryThings.length && `<a href="#commentary">${strings('artistPage.commentaryList.title')}</a>`
+                        ].filter(Boolean))
+                    })}</p>
+                    ${(releasedTracks.length || unreleasedTracks.length) && fixWS`
+                        <h2 id="tracks">${strings('artistPage.trackList.title')}</h2>
+                    `}
+                    ${releasedTracks.length && fixWS`
+                        <p>${strings('artistPage.contributedDurationLine', {
+                            artist: artist.name,
+                            duration: strings.count.duration(totalReleasedDuration, {approximate: true, unit: true})
+                        })}</p>
+                        <p>${strings('artistPage.musicGroupsLine', {
+                            groups: strings.list.unit(musicGroups
+                                .map(({ group, contributions }) => strings('artistPage.groupsLine.item', {
+                                    group: strings.link.groupInfo(group, {to}),
+                                    contributions: strings.count.contributions(contributions)
+                                })))
+                        })}</p>
+                        ${generateTrackList(releasedTrackListChunks, {strings, to})}
+                    `}
+                    ${unreleasedTracks.length && fixWS`
+                        <h3 id="unreleased-tracks">${strings('artistPage.unreleasedTrackList.title')}</h3>
+                        ${generateTrackList(unreleasedTrackListChunks, {strings, to})}
+                    `}
+                    ${artThingsAll.length && fixWS`
+                        <h2 id="art">${strings('artistPage.artList.title')}</h2>
+                        ${hasGallery && `<p>${strings('artistPage.viewArtGallery.orBrowseList', {
+                            link: strings.link.artistGallery(artist, {
+                                to,
+                                text: strings('artistPage.viewArtGallery.link')
+                            })
+                        })}</p>`}
+                        <p>${strings('artistPage.artGroupsLine', {
+                            groups: strings.list.unit(artGroups
+                                .map(({ group, contributions }) => strings('artistPage.groupsLine.item', {
+                                    group: strings.link.groupInfo(group, {to}),
+                                    contributions: strings.count.contributions(contributions)
+                                })))
+                        })}</p>
+                        <dl>
+                            ${artListChunks.map(({date, album, chunk}) => fixWS`
+                                <dt>${strings('artistPage.creditList.album.withDate', {
+                                    album: strings.link.album(album, {to}),
+                                    date: strings.count.date(date)
+                                })}</dt>
+                                <dd><ul>
+                                    ${(chunk
+                                        .map(({album, track, key, ...props}) => ({
+                                            entry: (track
+                                                ? strings('artistPage.creditList.entry.track', {
+                                                    track: strings.link.track(track, {to})
+                                                })
+                                                : `<i>${strings('artistPage.creditList.entry.album.' + {
+                                                    wallpaperArtists: 'wallpaperArt',
+                                                    bannerArtists: 'bannerArt',
+                                                    coverArtists: 'coverArt'
+                                                }[key])}</i>`),
+                                            ...props
+                                        }))
+                                        .map(opts => generateEntryAccents({strings, to, ...opts}))
+                                        .map(row => `<li>${row}</li>`)
+                                        .join('\n'))}
+                                </ul></dd>
+                            `).join('\n')}
+                        </dl>
+                    `}
+                    ${wikiInfo.features.flashesAndGames && flashes.length && fixWS`
+                        <h2 id="flashes">${strings('artistPage.flashList.title')}</h2>
+                        <dl>
+                            ${flashListChunks.map(({act, chunk, dateFirst, dateLast}) => fixWS`
+                                <dt>${strings('artistPage.creditList.flashAct.withDateRange', {
+                                    act: strings.link.flash(chunk[0].flash, {to, text: act.name}),
+                                    dateRange: strings.count.dateRange([dateFirst, dateLast])
+                                })}</dt>
+                                <dd><ul>
+                                    ${(chunk
+                                        .map(({flash, ...props}) => ({
+                                            entry: strings('artistPage.creditList.entry.flash', {
+                                                flash: strings.link.flash(flash, {to})
+                                            }),
+                                            ...props
+                                        }))
+                                        .map(opts => generateEntryAccents({strings, to, ...opts}))
+                                        .map(row => `<li>${row}</li>`)
+                                        .join('\n'))}
+                                </ul></dd>
+                            `).join('\n')}
+                        </dl>
+                    `}
+                    ${commentaryThings.length && fixWS`
+                        <h2 id="commentary">${strings('artistPage.commentaryList.title')}</h2>
+                        <dl>
+                            ${commentaryListChunks.map(({album, chunk}) => fixWS`
+                                <dt>${strings('artistPage.creditList.album', {
+                                    album: strings.link.album(album, {to})
+                                })}</dt>
+                                <dd><ul>
+                                    ${(chunk
+                                        .map(({album, track, ...props}) => track
+                                            ? strings('artistPage.creditList.entry.track', {
+                                                track: strings.link.track(track, {to})
+                                            })
+                                            : `<i>${strings('artistPage.creditList.entry.album.commentary')}</i>`)
+                                        .map(row => `<li>${row}</li>`)
+                                        .join('\n'))}
+                                </ul></dd>
+                            `).join('\n')}
+                        </dl>
+                    `}
+                `
+            },
+
+            nav: generateNavForArtist(artist, {strings, to, isGallery: false, hasGallery})
+        })
+    };
+
+    const galleryPage = hasGallery && {
+        type: 'page',
+        path: ['artistGallery', artist.directory],
+        page: ({strings, to}) => ({
+            title: strings('artistGalleryPage.title', {artist: name}),
+
+            main: {
+                classes: ['top-index'],
+                content: fixWS`
+                    <h1>${strings('artistGalleryPage.title', {artist: name})}</h1>
+                    <p class="quick-info">${strings('artistGalleryPage.infoLine', {
+                        coverArts: strings.count.coverArts(artThingsGallery.length, {unit: true})
+                    })}</p>
+                    <div class="grid-listing">
+                        ${getGridHTML({
+                            strings, to,
+                            entries: artThingsGallery.map(item => ({item})),
+                            srcFn: thing => (thing.album
+                                ? getTrackCover(thing, {to})
+                                : getAlbumCover(thing, {to})),
+                            hrefFn: thing => (thing.album
+                                ? to('localized.track', thing.directory)
+                                : to('localized.album', thing.directory))
+                        })}
+                    </div>
+                `
+            },
+
+            nav: generateNavForArtist(artist, {strings, to, isGallery: true, hasGallery})
+        })
+    };
+
+    return [data, infoPage, galleryPage].filter(Boolean);
+}
+
+function generateNavForArtist(artist, {strings, to, isGallery, hasGallery}) {
+    const infoGalleryLinks = (hasGallery &&
+        generateInfoGalleryLinks('artist', 'artistGallery', artist, isGallery, {strings, to}))
+
+    return {
+        links: [
+            {
+                href: to('localized.home'),
+                title: wikiInfo.shortName
+            },
+            wikiInfo.features.listings &&
+            {
+                href: to('localized.listingIndex'),
+                title: strings('listingIndex.title')
+            },
+            {
+                html: strings('artistPage.nav.artist', {
+                    artist: strings.link.artist(artist, {class: 'current', to})
+                })
+            },
+            hasGallery &&
+            {
+                divider: false,
+                html: `(${infoGalleryLinks})`
+            }
+        ]
+    };
+}
+
+function writeArtistAliasPage(artist) {
+    const { alias } = artist;
+
+    return async ({baseDirectory, strings, writePage}) => {
+        const { code } = strings;
+        const paths = writePage.paths(baseDirectory, 'artist', alias.directory);
+        const content = generateRedirectPage(alias.name, paths.pathname, {strings});
+        await writePage.write(content, {paths});
+    };
+}
+
+function generateRedirectPage(title, target, {strings}) {
+    return fixWS`
+        <!DOCTYPE html>
+        <html>
+            <head>
+                <title>${strings('redirectPage.title', {title})}</title>
+                <meta charset="utf-8">
+                <meta http-equiv="refresh" content="0;url=${target}">
+                <link rel="canonical" href="${target}">
+                <link rel="stylesheet" href="static/site-basic.css">
+            </head>
+            <body>
+                <main>
+                    <h1>${strings('redirectPage.title', {title})}</h1>
+                    <p>${strings('redirectPage.infoLine', {
+                        target: `<a href="${target}">${target}</a>`
+                    })}</p>
+                </main>
+            </body>
+        </html>
+    `;
+}
+
+function writeFlashPages() {
+    if (!wikiInfo.features.flashesAndGames) {
+        return;
+    }
+
+    return [
+        writeFlashIndex(),
+        ...flashData.map(writeFlashPage)
+    ];
+}
+
+function writeFlashIndex() {
+    return ({strings, writePage}) => writePage('flashIndex', '', ({to}) => ({
+        title: strings('flashIndex.title'),
+
+        main: {
+            classes: ['flash-index'],
+            content: fixWS`
+                <h1>${strings('flashIndex.title')}</h1>
+                <div class="long-content">
+                    <p class="quick-info">${strings('misc.jumpTo')}</p>
+                    <ul class="quick-info">
+                        ${flashActData.filter(act => act.jump).map(({ anchor, jump, jumpColor }) => fixWS`
+                            <li><a href="#${anchor}" style="${getLinkThemeString(jumpColor)}">${jump}</a></li>
+                        `).join('\n')}
+                    </ul>
+                </div>
+                ${flashActData.map((act, i) => fixWS`
+                    <h2 id="${act.anchor}" style="${getLinkThemeString(act.color)}"><a href="${to('localized.flash', act.flashes[0].directory)}">${act.name}</a></h2>
+                    <div class="grid-listing">
+                        ${getFlashGridHTML({
+                            strings, to,
+                            entries: act.flashes.map(flash => ({item: flash})),
+                            lazy: i === 0 ? 4 : true
+                        })}
+                    </div>
+                `).join('\n')}
+            `
+        },
+
+        nav: {simple: true}
+    }));
+}
+
+function writeFlashPage(flash) {
+    return ({strings, writePage}) => writePage('flash', flash.directory, ({to}) => ({
+        title: strings('flashPage.title', {flash: flash.name}),
+        theme: getThemeString(flash.color, [
+            `--flash-directory: ${flash.directory}`
+        ]),
+
+        main: {
+            content: fixWS`
+                <h1>${strings('flashPage.title', {flash: flash.name})}</h1>
+                ${generateCoverLink({
+                    strings, to,
+                    src: to('media.flashArt', flash.directory),
+                    alt: strings('misc.alt.flashArt')
+                })}
+                <p>${strings('releaseInfo.released', {date: strings.count.date(flash.date)})}</p>
+                ${(flash.page || flash.urls.length) && `<p>${strings('releaseInfo.playOn', {
+                    links: strings.list.or([
+                        flash.page && getFlashLink(flash),
+                        ...flash.urls
+                    ].map(url => fancifyFlashURL(url, flash, {strings})))
+                })}</p>`}
+                ${flash.tracks.length && fixWS`
+                    <p>Tracks featured in <i>${flash.name.replace(/\.$/, '')}</i>:</p>
+                    <ul>
+                        ${(flash.tracks
+                            .map(track => strings('trackList.item.withArtists', {
+                                track: strings.link.track(track, {strings, to}),
+                                by: `<span class="by">${
+                                    strings('trackList.item.withArtists.by', {
+                                        artists: getArtistString(track.artists, {strings, to})
+                                    })
+                                }</span>`
+                            }))
+                            .map(row => `<li>${row}</li>`)
+                            .join('\n'))}
+                    </ul>
+                `}
+                ${flash.contributors.textContent && fixWS`
+                    <p>
+                        ${strings('releaseInfo.contributors')}
+                        <br>
+                        ${transformInline(flash.contributors.textContent, {strings, to})}
+                    </p>
+                `}
+                ${flash.contributors.length && fixWS`
+                    <p>${strings('releaseInfo.contributors')}</p>
+                    <ul>
+                        ${flash.contributors
+                            .map(contrib => `<li>${getArtistString([contrib], {
+                                strings, to,
+                                showContrib: true,
+                                showIcons: true
+                            })}</li>`)
+                            .join('\n')}
+                    </ul>
+                `}
+            `
+        },
+
+        sidebarLeft: generateSidebarForFlash(flash, {strings, to}),
+        nav: generateNavForFlash(flash, {strings, to})
+    }));
+}
+
+function generateNavForFlash(flash, {strings, to}) {
+    const previousNextLinks = generatePreviousNextLinks('localized.flash', flash, flashData, {strings, to});
+
+    return {
+        links: [
+            {
+                href: to('localized.home'),
+                title: wikiInfo.shortName
+            },
+            {
+                href: to('localized.flashIndex'),
+                title: strings('flashIndex.title')
+            },
+            {
+                html: strings('flashPage.nav.flash', {
+                    flash: strings.link.flash(flash, {class: 'current', to})
+                })
+            },
+            previousNextLinks &&
+            {
+                divider: false,
+                html: `(${previousNextLinks})`
+            }
+        ],
+
+        content: fixWS`
+            <div>
+                ${chronologyLinks(flash, {
+                    strings, to,
+                    headingString: 'misc.chronology.heading.flash',
+                    contribKey: 'contributors',
+                    getThings: artist => artist.flashes.asContributor
+                })}
+            </div>
+        `
+    };
+}
+
+function generateSidebarForFlash(flash, {strings, to}) {
+    // all hard-coded, sorry :(
+    // this doesnt have a super portable implementation/design...yet!!
+
+    const act6 = flashActData.findIndex(act => act.name.startsWith('Act 6'));
+    const postCanon = flashActData.findIndex(act => act.name.includes('Post Canon'));
+    const outsideCanon = postCanon + flashActData.slice(postCanon).findIndex(act => !act.name.includes('Post Canon'));
+    const actIndex = flashActData.indexOf(flash.act);
+    const side = (
+        (actIndex < 0) ? 0 :
+        (actIndex < act6) ? 1 :
+        (actIndex <= outsideCanon) ? 2 :
+        3
+    );
+    const currentAct = flash && flash.act;
+
+    return {
+        content: fixWS`
+            <h1>${strings.link.flashIndex('', {to, text: strings('flashIndex.title')})}</h1>
+            <dl>
+                ${flashActData.filter(act =>
+                    act.name.startsWith('Act 1') ||
+                    act.name.startsWith('Act 6 Act 1') ||
+                    act.name.startsWith('Hiveswap') ||
+                    // Sorry not sorry -Yiffy
+                    (({index = flashActData.indexOf(act)} = {}) => (
+                        index < act6 ? side === 1 :
+                        index < outsideCanon ? side === 2 :
+                        true
+                    ))()
+                ).flatMap(act => [
+                    act.name.startsWith('Act 1') && `<dt ${classes('side', side === 1 && 'current')}><a href="${to('localized.flash', act.flashes[0].directory)}" style="--primary-color: #4ac925">Side 1 (Acts 1-5)</a></dt>`
+                    || act.name.startsWith('Act 6 Act 1') && `<dt ${classes('side', side === 2 && 'current')}><a href="${to('localized.flash', act.flashes[0].directory)}" style="--primary-color: #1076a2">Side 2 (Acts 6-7)</a></dt>`
+                    || act.name.startsWith('Hiveswap Act 1') && `<dt ${classes('side', side === 3 && 'current')}><a href="${to('localized.flash', act.flashes[0].directory)}" style="--primary-color: #008282">Outside Canon (Misc. Games)</a></dt>`,
+                    (({index = flashActData.indexOf(act)} = {}) => (
+                        index < act6 ? side === 1 :
+                        index < outsideCanon ? side === 2 :
+                        true
+                    ))()
+                    && `<dt ${classes(act === currentAct && 'current')}><a href="${to('localized.flash', act.flashes[0].directory)}" style="${getLinkThemeString(act.color)}">${act.name}</a></dt>`,
+                    act === currentAct && fixWS`
+                        <dd><ul>
+                            ${act.flashes.map(f => fixWS`
+                                <li ${classes(f === flash && 'current')}>${strings.link.flash(f, {to})}</li>
+                            `).join('\n')}
+                        </ul></dd>
+                    `
+                ]).filter(Boolean).join('\n')}
+            </dl>
+        `
+    };
+}
+
+const listingSpec = [
+    {
+        directory: 'albums/by-name',
+        title: ({strings}) => strings('listingPage.listAlbums.byName.title'),
+
+        data() {
+            return albumData.slice()
+                .sort(sortByName);
+        },
+
+        row(album, {strings, to}) {
+            return strings('listingPage.listAlbums.byName.item', {
+                album: strings.link.album(album, {to}),
+                tracks: strings.count.tracks(album.tracks.length, {unit: true})
+            });
+        }
+    },
+
+    {
+        directory: 'albums/by-tracks',
+        title: ({strings}) => strings('listingPage.listAlbums.byTracks.title'),
+
+        data() {
+            return albumData.slice()
+                .sort((a, b) => b.tracks.length - a.tracks.length);
+        },
+
+        row(album, {strings, to}) {
+            return strings('listingPage.listAlbums.byTracks.item', {
+                album: strings.link.album(album, {to}),
+                tracks: strings.count.tracks(album.tracks.length, {unit: true})
+            });
+        }
+    },
+
+    {
+        directory: 'albums/by-duration',
+        title: ({strings}) => strings('listingPage.listAlbums.byDuration.title'),
+
+        data() {
+            return albumData
+                .map(album => ({album, duration: getTotalDuration(album.tracks)}))
+                .sort((a, b) => b.duration - a.duration);
+        },
+
+        row({album, duration}, {strings, to}) {
+            return strings('listingPage.listAlbums.byDuration.item', {
+                album: strings.link.album(album, {to}),
+                duration: strings.count.duration(duration)
+            });
+        }
+    },
+
+    {
+        directory: 'albums/by-date',
+        title: ({strings}) => strings('listingPage.listAlbums.byDate.title'),
+
+        data() {
+            return sortByDate(albumData
+                .filter(album => album.directory !== UNRELEASED_TRACKS_DIRECTORY));
+        },
+
+        row(album, {strings, to}) {
+            return strings('listingPage.listAlbums.byDate.item', {
+                album: strings.link.album(album, {to}),
+                date: strings.count.date(album.date)
+            });
+        }
+    },
+
+    {
+        directory: 'albusm/by-date-added',
+        title: ({strings}) => strings('listingPage.listAlbums.byDateAdded.title'),
+
+        data() {
+            return chunkByProperties(albumData.slice().sort((a, b) => {
+                if (a.dateAdded < b.dateAdded) return -1;
+                if (a.dateAdded > b.dateAdded) return 1;
+            }), ['dateAdded']);
+        },
+
+        html(chunks, {strings, to}) {
+            return fixWS`
+                <dl>
+                    ${chunks.map(({dateAdded, chunk: albums}) => fixWS`
+                        <dt>${strings('listingPage.listAlbums.byDateAdded.date', {
+                            date: strings.count.date(dateAdded)
+                        })}</dt>
+                        <dd><ul>
+                            ${(albums
+                                .map(album => strings('listingPage.listAlbums.byDateAdded.album', {
+                                    album: strings.link.album(album, {to})
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                        </ul></dd>
+                    `).join('\n')}
+                </dl>
+            `;
+        }
+    },
+
+    {
+        directory: 'artists/by-name',
+        title: ({strings}) => strings('listingPage.listArtists.byName.title'),
+
+        data() {
+            return artistData.slice()
+                .sort(sortByName)
+                .map(artist => ({artist, contributions: getArtistNumContributions(artist)}));
+        },
+
+        row({artist, contributions}, {strings, to}) {
+            return strings('listingPage.listArtists.byName.item', {
+                artist: strings.link.artist(artist, {to}),
+                contributions: strings.count.contributions(contributions, {to, unit: true})
+            });
+        }
+    },
+
+    {
+        directory: 'artists/by-contribs',
+        title: ({strings}) => strings('listingPage.listArtists.byContribs.title'),
+
+        data() {
+            return {
+                toTracks: (artistData
+                    .map(artist => ({
+                        artist,
+                        contributions: (
+                            artist.tracks.asContributor.length +
+                            artist.tracks.asArtist.length
+                        )
+                    }))
+                    .sort((a, b) => b.contributions - a.contributions)
+                    .filter(({ contributions }) => contributions)),
+
+                toArtAndFlashes: (artistData
+                    .map(artist => ({
+                        artist,
+                        contributions: (
+                            artist.tracks.asCoverArtist.length +
+                            artist.albums.asCoverArtist.length +
+                            artist.albums.asWallpaperArtist.length +
+                            artist.albums.asBannerArtist.length +
+                            (wikiInfo.features.flashesAndGames
+                                ? artist.flashes.asContributor.length
+                                : 0)
+                        )
+                    }))
+                    .sort((a, b) => b.contributions - a.contributions)
+                    .filter(({ contributions }) => contributions))
+            };
+        },
+
+        html({toTracks, toArtAndFlashes}, {strings, to}) {
+            return fixWS`
+                <div class="content-columns">
+                    <div class="column">
+                        <h2>${strings('listingPage.misc.trackContributors')}</h2>
+                        <ul>
+                            ${(toTracks
+                                .map(({ artist, contributions }) => strings('listingPage.listArtists.byContribs.item', {
+                                    artist: strings.link.artist(artist, {to}),
+                                    contributions: strings.count.contributions(contributions, {unit: true})
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                         </ul>
+                    </div>
+                    <div class="column">
+                        <h2>${strings('listingPage.misc' +
+                            (wikiInfo.features.flashesAndGames
+                                ? '.artAndFlashContributors'
+                                : '.artContributors'))}</h2>
+                        <ul>
+                            ${(toArtAndFlashes
+                                .map(({ artist, contributions }) => strings('listingPage.listArtists.byContribs.item', {
+                                    artist: strings.link.artist(artist, {to}),
+                                    contributions: strings.count.contributions(contributions, {unit: true})
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                        </ul>
+                    </div>
+                </div>
+            `;
+        }
+    },
+
+    {
+        directory: 'artists/by-commentary',
+        title: ({strings}) => strings('listingPage.listArtists.byCommentary.title'),
+
+        data() {
+            return artistData
+                .map(artist => ({artist, entries: artist.tracks.asCommentator.length + artist.albums.asCommentator.length}))
+                .filter(({ entries }) => entries)
+                .sort((a, b) => b.entries - a.entries);
+        },
+
+        row({artist, entries}, {strings, to}) {
+            return strings('listingPage.listArtists.byCommentary.item', {
+                artist: strings.link.artist(artist, {to}),
+                entries: strings.count.commentaryEntries(entries, {unit: true})
+            });
+        }
+    },
+
+    {
+        directory: 'artists/by-duration',
+        title: ({strings}) => strings('listingPage.listArtists.byDuration.title'),
+
+        data() {
+            return artistData
+                .map(artist => ({artist, duration: getTotalDuration(
+                    [...artist.tracks.asArtist, ...artist.tracks.asContributor].filter(track => track.album.directory !== UNRELEASED_TRACKS_DIRECTORY))
+                }))
+                .filter(({ duration }) => duration > 0)
+                .sort((a, b) => b.duration - a.duration);
+        },
+
+        row({artist, duration}, {strings, to}) {
+            return strings('listingPage.listArtists.byDuration.item', {
+                artist: strings.link.artist(artist, {to}),
+                duration: strings.count.duration(duration)
+            });
+        }
+    },
+
+    {
+        directory: 'artists/by-latest',
+        title: ({strings}) => strings('listingPage.listArtists.byLatest.title'),
+
+        data() {
+            const reversedTracks = trackData.slice().reverse();
+            const reversedArtThings = justEverythingSortedByArtDateMan.slice().reverse();
+
+            return {
+                toTracks: sortByDate(artistData
+                    .filter(artist => !artist.alias)
+                    .map(artist => ({
+                        artist,
+                        date: reversedTracks.find(({ album, artists, contributors }) => (
+                            album.directory !== UNRELEASED_TRACKS_DIRECTORY &&
+                            [...artists, ...contributors].some(({ who }) => who === artist)
+                        ))?.date
+                    }))
+                    .filter(({ date }) => date)
+                    .sort((a, b) => a.name < b.name ? 1 : a.name > b.name ? -1 : 0)).reverse(),
+
+                toArtAndFlashes: sortByDate(artistData
+                    .filter(artist => !artist.alias)
+                    .map(artist => {
+                        const thing = reversedArtThings.find(({ album, coverArtists, contributors }) => (
+                            album?.directory !== UNRELEASED_TRACKS_DIRECTORY &&
+                            [...coverArtists || [], ...!album && contributors || []].some(({ who }) => who === artist)
+                        ));
+                        return thing && {
+                            artist,
+                            date: (thing.coverArtists?.some(({ who }) => who === artist)
+                                ? thing.coverArtDate
+                                : thing.date)
+                        };
+                    })
+                    .filter(Boolean)
+                    .sort((a, b) => a.name < b.name ? 1 : a.name > b.name ? -1 : 0)
+                ).reverse()
+            };
+        },
+
+        html({toTracks, toArtAndFlashes}, {strings, to}) {
+            return fixWS`
+                <div class="content-columns">
+                    <div class="column">
+                        <h2>${strings('listingPage.misc.trackContributors')}</h2>
+                        <ul>
+                            ${(toTracks
+                                .map(({ artist, date }) => strings('listingPage.listArtists.byLatest.item', {
+                                    artist: strings.link.artist(artist, {to}),
+                                    date: strings.count.date(date)
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                        </ul>
+                    </div>
+                    <div class="column">
+                        <h2>${strings('listingPage.misc' +
+                            (wikiInfo.features.flashesAndGames
+                                ? '.artAndFlashContributors'
+                                : '.artContributors'))}</h2>
+                        <ul>
+                            ${(toArtAndFlashes
+                                .map(({ artist, date }) => strings('listingPage.listArtists.byLatest.item', {
+                                    artist: strings.link.artist(artist, {to}),
+                                    date: strings.count.date(date)
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                        </ul>
+                    </div>
+                </div>
+            `;
+        }
+    },
+
+    {
+        directory: 'groups/by-name',
+        title: ({strings}) => strings('listingPage.listGroups.byName.title'),
+        condition: () => wikiInfo.features.groupUI,
+
+        data() {
+            return groupData.slice().sort(sortByName);
+        },
+
+        row(group, {strings, to}) {
+            return strings('listingPage.listGroups.byCategory.group', {
+                group: strings.link.groupInfo(group, {to}),
+                gallery: strings.link.groupGallery(group, {
+                    to,
+                    text: strings('listingPage.listGroups.byCategory.group.gallery')
+                })
+            });
+        }
+    },
+
+    {
+        directory: 'groups/by-category',
+        title: ({strings}) => strings('listingPage.listGroups.byCategory.title'),
+        condition: () => wikiInfo.features.groupUI,
+
+        html({strings, to}) {
+            return fixWS`
+                <dl>
+                    ${groupCategoryData.map(category => fixWS`
+                        <dt>${strings('listingPage.listGroups.byCategory.category', {
+                            category: strings.link.groupInfo(category.groups[0], {to, text: category.name})
+                        })}</dt>
+                        <dd><ul>
+                            ${(category.groups
+                                .map(group => strings('listingPage.listGroups.byCategory.group', {
+                                    group: strings.link.groupInfo(group, {to}),
+                                    gallery: strings.link.groupGallery(group, {
+                                        to,
+                                        text: strings('listingPage.listGroups.byCategory.group.gallery')
+                                    })
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                        </ul></dd>
+                    `).join('\n')}
+                </dl>
+            `;
+        }
+    },
+
+    {
+        directory: 'groups/by-albums',
+        title: ({strings}) => strings('listingPage.listGroups.byAlbums.title'),
+        condition: () => wikiInfo.features.groupUI,
+
+        data() {
+            return groupData
+                .map(group => ({group, albums: group.albums.length}))
+                .sort((a, b) => b.albums - a.albums);
+        },
+
+        row({group, albums}, {strings, to}) {
+            return strings('listingPage.listGroups.byAlbums.item', {
+                group: strings.link.groupInfo(group, {to}),
+                albums: strings.count.albums(albums, {unit: true})
+            });
+        }
+    },
+
+    {
+        directory: 'groups/by-tracks',
+        title: ({strings}) => strings('listingPage.listGroups.byTracks.title'),
+        condition: () => wikiInfo.features.groupUI,
+
+        data() {
+            return groupData
+                .map(group => ({group, tracks: group.albums.reduce((acc, album) => acc + album.tracks.length, 0)}))
+                .sort((a, b) => b.tracks - a.tracks);
+        },
+
+        row({group, tracks}, {strings, to}) {
+            return strings('listingPage.listGroups.byTracks.item', {
+                group: strings.link.groupInfo(group, {to}),
+                tracks: strings.count.tracks(tracks, {unit: true})
+            });
+        }
+    },
+
+    {
+        directory: 'groups/by-duration',
+        title: ({strings}) => strings('listingPage.listGroups.byDuration.title'),
+        condition: () => wikiInfo.features.groupUI,
+
+        data() {
+            return groupData
+                .map(group => ({group, duration: getTotalDuration(group.albums.flatMap(album => album.tracks))}))
+                .sort((a, b) => b.duration - a.duration);
+        },
+
+        row({group, duration}, {strings, to}) {
+            return strings('listingPage.listGroups.byDuration.item', {
+                group: strings.link.groupInfo(group, {to}),
+                duration: strings.count.duration(duration)
+            });
+        }
+    },
+
+    {
+        directory: 'groups/by-latest-album',
+        title: ({strings}) => strings('listingPage.listGroups.byLatest.title'),
+        condition: () => wikiInfo.features.groupUI,
+
+        data() {
+            return sortByDate(groupData
+                .map(group => ({group, date: group.albums[group.albums.length - 1].date}))
+                // So this is kinda tough to explain, 8ut 8asically, when we reverse the list after sorting it 8y d8te
+                // (so that the latest d8tes come first), it also flips the order of groups which share the same d8te.
+                // This happens mostly when a single al8um is the l8test in two groups. So, say one such al8um is in
+                // the groups "Fandom" and "UMSPAF". Per category order, Fandom is meant to show up 8efore UMSPAF, 8ut
+                // when we do the reverse l8ter, that flips them, and UMSPAF ends up displaying 8efore Fandom. So we do
+                // an extra reverse here, which will fix that and only affect groups that share the same d8te (8ecause
+                // groups that don't will 8e moved 8y the sortByDate call surrounding this).
+                .reverse()).reverse()
+        },
+
+        row({group, date}, {strings, to}) {
+            return strings('listingPage.listGroups.byLatest.item', {
+                group: strings.link.groupInfo(group, {to}),
+                date: strings.count.date(date)
+            });
+        }
+    },
+
+    {
+        directory: 'tracks/by-name',
+        title: ({strings}) => strings('listingPage.listTracks.byName.title'),
+
+        data() {
+            return trackData.slice().sort(sortByName);
+        },
+
+        row(track, {strings, to}) {
+            return strings('listingPage.listTracks.byName.item', {
+                track: strings.link.track(track, {to})
+            });
+        }
+    },
+
+    {
+        directory: 'tracks/by-album',
+        title: ({strings}) => strings('listingPage.listTracks.byAlbum.title'),
+
+        html({strings, to}) {
+            return fixWS`
+                <dl>
+                    ${albumData.map(album => fixWS`
+                        <dt>${strings('listingPage.listTracks.byAlbum.album', {
+                            album: strings.link.album(album, {to})
+                        })}</dt>
+                        <dd><ol>
+                            ${(album.tracks
+                                .map(track => strings('listingPage.listTracks.byAlbum.track', {
+                                    track: strings.link.track(track, {to})
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                        </ol></dd>
+                    `).join('\n')}
+                </dl>
+            `;
+        }
+    },
+
+    {
+        directory: 'tracks/by-date',
+        title: ({strings}) => strings('listingPage.listTracks.byDate.title'),
+
+        data() {
+            return chunkByProperties(
+                sortByDate(trackData.filter(track => track.album.directory !== UNRELEASED_TRACKS_DIRECTORY)),
+                ['album', 'date']
+            );
+        },
+
+        html(chunks, {strings, to}) {
+            return fixWS`
+                <dl>
+                    ${chunks.map(({album, date, chunk: tracks}) => fixWS`
+                        <dt>${strings('listingPage.listTracks.byDate.album', {
+                            album: strings.link.album(album, {to}),
+                            date: strings.count.date(date)
+                        })}</dt>
+                        <dd><ul>
+                            ${(tracks
+                                .map(track => track.aka
+                                    ? `<li class="rerelease">${strings('listingPage.listTracks.byDate.track.rerelease', {
+                                        track: strings.link.track(track, {to})
+                                    })}</li>`
+                                    : `<li>${strings('listingPage.listTracks.byDate.track', {
+                                        track: strings.link.track(track, {to})
+                                    })}</li>`)
+                                .join('\n'))}
+                        </ul></dd>
+                    `).join('\n')}
+                </dl>
+            `;
+        }
+    },
+
+    {
+        directory: 'tracks/by-duration',
+        title: ({strings}) => strings('listingPage.listTracks.byDuration.title'),
+
+        data() {
+            return trackData
+                .filter(track => track.album.directory !== UNRELEASED_TRACKS_DIRECTORY)
+                .map(track => ({track, duration: track.duration}))
+                .filter(({ duration }) => duration > 0)
+                .sort((a, b) => b.duration - a.duration);
+        },
+
+        row({track, duration}, {strings, to}) {
+            return strings('listingPage.listTracks.byDuration.item', {
+                track: strings.link.track(track, {to}),
+                duration: strings.count.duration(duration)
+            });
+        }
+    },
+
+    {
+        directory: 'tracks/by-duration-in-album',
+        title: ({strings}) => strings('listingPage.listTracks.byDurationInAlbum.title'),
+
+        data() {
+            return albumData.map(album => ({
+                album,
+                tracks: album.tracks.slice().sort((a, b) => b.duration - a.duration)
+            }));
+        },
+
+        html(albums, {strings, to}) {
+            return fixWS`
+                <dl>
+                    ${albums.map(({album, tracks}) => fixWS`
+                        <dt>${strings('listingPage.listTracks.byDurationInAlbum.album', {
+                            album: strings.link.album(album, {to})
+                        })}</dt>
+                        <dd><ul>
+                            ${(tracks
+                                .map(track => strings('listingPage.listTracks.byDurationInAlbum.track', {
+                                    track: strings.link.track(track, {to}),
+                                    duration: strings.count.duration(track.duration)
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                        </dd></ul>
+                    `).join('\n')}
+                </dl>
+            `;
+        }
+    },
+
+    {
+        directory: 'tracks/by-times-referenced',
+        title: ({strings}) => strings('listingPage.listTracks.byTimesReferenced.title'),
+
+        data() {
+            return trackData
+                .map(track => ({track, timesReferenced: track.referencedBy.length}))
+                .filter(({ timesReferenced }) => timesReferenced > 0)
+                .sort((a, b) => b.timesReferenced - a.timesReferenced);
+        },
+
+        row({track, timesReferenced}, {strings, to}) {
+            return strings('listingPage.listTracks.byTimesReferenced.item', {
+                track: strings.link.track(track, {to}),
+                timesReferenced: strings.count.timesReferenced(timesReferenced, {unit: true})
+            });
+        }
+    },
+
+    {
+        directory: 'tracks/in-flashes/by-album',
+        title: ({strings}) => strings('listingPage.listTracks.inFlashes.byAlbum.title'),
+        condition: () => wikiInfo.features.flashesAndGames,
+
+        data() {
+            return chunkByProperties(trackData.filter(t => t.flashes.length > 0), ['album'])
+                .filter(({ album }) => album.directory !== UNRELEASED_TRACKS_DIRECTORY);
+        },
+
+        html(chunks, {strings, to}) {
+            return fixWS`
+                <dl>
+                    ${chunks.map(({album, chunk: tracks}) => fixWS`
+                        <dt>${strings('listingPage.listTracks.inFlashes.byAlbum.album', {
+                            album: strings.link.album(album, {to}),
+                            date: strings.count.date(album.date)
+                        })}</dt>
+                        <dd><ul>
+                            ${(tracks
+                                .map(track => strings('listingPage.listTracks.inFlashes.byAlbum.track', {
+                                    track: strings.link.track(track, {to}),
+                                    flashes: strings.list.and(track.flashes.map(flash => strings.link.flash(flash, {to})))
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                        </dd></ul>
+                    `).join('\n')}
+                </dl>
+            `;
+        }
+    },
+
+    {
+        directory: 'tracks/in-flashes/by-flash',
+        title: ({strings}) => strings('listingPage.listTracks.inFlashes.byFlash.title'),
+        condition: () => wikiInfo.features.flashesAndGames,
+
+        html({strings, to}) {
+            return fixWS`
+                <dl>
+                    ${sortByDate(flashData.slice()).map(flash => fixWS`
+                        <dt>${strings('listingPage.listTracks.inFlashes.byFlash.flash', {
+                            flash: strings.link.flash(flash, {to}),
+                            date: strings.count.date(flash.date)
+                        })}</dt>
+                        <dd><ul>
+                            ${(flash.tracks
+                                .map(track => strings('listingPage.listTracks.inFlashes.byFlash.track', {
+                                    track: strings.link.track(track, {to}),
+                                    album: strings.link.album(track.album, {to})
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                        </ul></dd>
+                    `).join('\n')}
+                </dl>
+            `;
+        }
+    },
+
+    {
+        directory: 'tracks/with-lyrics',
+        title: ({strings}) => strings('listingPage.listTracks.withLyrics.title'),
+
+        data() {
+            return chunkByProperties(trackData.filter(t => t.lyrics), ['album']);
+        },
+
+        html(chunks, {strings, to}) {
+            return fixWS`
+                <dl>
+                    ${chunks.map(({album, chunk: tracks}) => fixWS`
+                        <dt>${strings('listingPage.listTracks.withLyrics.album', {
+                            album: strings.link.album(album, {to}),
+                            date: strings.count.date(album.date)
+                        })}</dt>
+                        <dd><ul>
+                            ${(tracks
+                                .map(track => strings('listingPage.listTracks.withLyrics.track', {
+                                    track: strings.link.track(track, {to}),
+                                }))
+                                .map(row => `<li>${row}</li>`)
+                                .join('\n'))}
+                        </dd></ul>
+                    `).join('\n')}
+                </dl>
+            `;
+        }
+    },
+
+    {
+        directory: 'tags/by-name',
+        title: ({strings}) => strings('listingPage.listTags.byName.title'),
+        condition: () => wikiInfo.features.artTagUI,
+
+        data() {
+            return tagData
+                .filter(tag => !tag.isCW)
+                .sort(sortByName)
+                .map(tag => ({tag, timesUsed: tag.things.length}));
+        },
+
+        row({tag, timesUsed}, {strings, to}) {
+            return strings('listingPage.listTags.byName.item', {
+                tag: strings.link.tag(tag, {to}),
+                timesUsed: strings.count.timesUsed(timesUsed, {unit: true})
+            });
+        }
+    },
+
+    {
+        directory: 'tags/by-uses',
+        title: ({strings}) => strings('listingPage.listTags.byUses.title'),
+        condition: () => wikiInfo.features.artTagUI,
+
+        data() {
+            return tagData
+                .filter(tag => !tag.isCW)
+                .map(tag => ({tag, timesUsed: tag.things.length}))
+                .sort((a, b) => b.timesUsed - a.timesUsed);
+        },
+
+        row({tag, timesUsed}, {strings, to}) {
+            return strings('listingPage.listTags.byUses.item', {
+                tag: strings.link.tag(tag, {to}),
+                timesUsed: strings.count.timesUsed(timesUsed, {unit: true})
+            });
+        }
+    },
+
+    {
+        directory: 'random',
+        title: ({strings}) => `Random Pages`,
+        html: ({strings, to}) => fixWS`
+            <p>Choose a link to go to a random page in that category or album! If your browser doesn't support relatively modern JavaScript or you've disabled it, these links won't work - sorry.</p>
+            <p class="js-hide-once-data">(Data files are downloading in the background! Please wait for data to load.)</p>
+            <p class="js-show-once-data">(Data files have finished being downloaded. The links should work!)</p>
+            <dl>
+                <dt>Miscellaneous:</dt>
+                <dd><ul>
+                    <li>
+                        <a href="#" data-random="artist">Random Artist</a>
+                        (<a href="#" data-random="artist-more-than-one-contrib">&gt;1 contribution</a>)
+                    </li>
+                    <li><a href="#" data-random="album">Random Album (whole site)</a></li>
+                    <li><a href="#" data-random="track">Random Track (whole site)</a></li>
+                </ul></dd>
+                ${[
+                    {name: 'Official', albumData: officialAlbumData, code: 'official'},
+                    {name: 'Fandom', albumData: fandomAlbumData, code: 'fandom'}
+                ].map(category => fixWS`
+                    <dt>${category.name}: (<a href="#" data-random="album-in-${category.code}">Random Album</a>, <a href="#" data-random="track-in-${category.code}">Random Track</a>)</dt>
+                    <dd><ul>${category.albumData.map(album => fixWS`
+                        <li><a style="${getLinkThemeString(album.color)}; --album-directory: ${album.directory}" href="#" data-random="track-in-album">${album.name}</a></li>
+                    `).join('\n')}</ul></dd>
+                `).join('\n')}
+            </dl>
+        `
+    }
+];
+
+function writeListingPages() {
+    if (!wikiInfo.features.listings) {
+        return;
+    }
+
+    return [
+        writeListingIndex(),
+        ...listingSpec.map(writeListingPage).filter(Boolean)
+    ];
+}
+
+function writeListingIndex() {
+    const releasedTracks = trackData.filter(track => track.album.directory !== UNRELEASED_TRACKS_DIRECTORY);
+    const releasedAlbums = albumData.filter(album => album.directory !== UNRELEASED_TRACKS_DIRECTORY);
+    const duration = getTotalDuration(releasedTracks);
+
+    return ({strings, writePage}) => writePage('listingIndex', '', ({to}) => ({
+        title: strings('listingIndex.title'),
+
+        main: {
+            content: fixWS`
+                <h1>${strings('listingIndex.title')}</h1>
+                <p>${strings('listingIndex.infoLine', {
+                    wiki: wikiInfo.name,
+                    tracks: `<b>${strings.count.tracks(releasedTracks.length, {unit: true})}</b>`,
+                    albums: `<b>${strings.count.albums(releasedAlbums.length, {unit: true})}</b>`,
+                    duration: `<b>${strings.count.duration(duration, {approximate: true, unit: true})}</b>`
+                })}</p>
+                <hr>
+                <p>${strings('listingIndex.exploreList')}</p>
+                ${generateLinkIndexForListings(null, {strings, to})}
+            `
+        },
+
+        sidebarLeft: {
+            content: generateSidebarForListings(null, {strings, to})
+        },
+
+        nav: {simple: true}
+    }))
+}
+
+function writeListingPage(listing) {
+    if (listing.condition && !listing.condition()) {
+        return null;
+    }
+
+    const data = (listing.data
+        ? listing.data()
+        : null);
+
+    return ({strings, writePage}) => writePage('listing', listing.directory, ({to}) => ({
+        title: listing.title({strings}),
+
+        main: {
+            content: fixWS`
+                <h1>${listing.title({strings})}</h1>
+                ${listing.html && (listing.data
+                    ? listing.html(data, {strings, to})
+                    : listing.html({strings, to}))}
+                ${listing.row && fixWS`
+                    <ul>
+                        ${(data
+                            .map(item => listing.row(item, {strings, to}))
+                            .map(row => `<li>${row}</li>`)
+                            .join('\n'))}
+                    </ul>
+                `}
+            `
+        },
+
+        sidebarLeft: {
+            content: generateSidebarForListings(listing, {strings, to})
+        },
+
+        nav: {
+            links: [
+                {
+                    href: to('localized.home'),
+                    title: wikiInfo.shortName
+                },
+                {
+                    href: to('localized.listingIndex'),
+                    title: strings('listingIndex.title')
+                },
+                {
+                    href: '',
+                    title: listing.title({strings})
+                }
+            ]
+        }
+    }));
+}
+
+function generateSidebarForListings(currentListing, {strings, to}) {
+    return fixWS`
+        <h1>${strings.link.listingIndex('', {text: strings('listingIndex.title'), to})}</h1>
+        ${generateLinkIndexForListings(currentListing, {strings, to})}
+    `;
+}
+
+function generateLinkIndexForListings(currentListing, {strings, to}) {
+    return fixWS`
+        <ul>
+            ${(listingSpec
+                .filter(({ condition }) => !condition || condition())
+                .map(listing => fixWS`
+                    <li ${classes(listing === currentListing && 'current')}>
+                        <a href="${to('localized.listing', listing.directory)}">${listing.title({strings})}</a>
+                    </li>
+                `)
+                .join('\n'))}
+        </ul>
+    `;
+}
+
+function filterAlbumsByCommentary() {
+    return albumData.filter(album => [album, ...album.tracks].some(x => x.commentary));
+}
+
+function writeCommentaryPages() {
+    if (!filterAlbumsByCommentary().length) {
+        return;
+    }
+
+    return [
+        writeCommentaryIndex(),
+        ...filterAlbumsByCommentary().map(writeAlbumCommentaryPage)
+    ];
+}
+
+function writeCommentaryIndex() {
+    const data = filterAlbumsByCommentary()
+        .map(album => ({
+            album,
+            entries: [album, ...album.tracks].filter(x => x.commentary).map(x => x.commentary)
+        }))
+        .map(({ album, entries }) => ({
+            album, entries,
+            words: entries.join(' ').split(' ').length
+        }));
+
+    const totalEntries = data.reduce((acc, {entries}) => acc + entries.length, 0);
+    const totalWords = data.reduce((acc, {words}) => acc + words, 0);
+
+    return ({strings, writePage}) => writePage('commentaryIndex', '', ({to}) => ({
+        title: strings('commentaryIndex.title'),
+
+        main: {
+            content: fixWS`
+                <div class="long-content">
+                    <h1>${strings('commentaryIndex.title')}</h1>
+                    <p>${strings('commentaryIndex.infoLine', {
+                        words: `<b>${strings.count.words(totalWords, {unit: true})}</b>`,
+                        entries: `<b>${strings.count.commentaryEntries(totalEntries, {unit: true})}</b>`
+                    })}</p>
+                    <p>${strings('commentaryIndex.albumList.title')}</p>
+                    <ul>
+                        ${data
+                            .map(({ album, entries, words }) => fixWS`
+                                <li>${strings('commentaryIndex.albumList.item', {
+                                    album: strings.link.albumCommentary(album, {to}),
+                                    words: strings.count.words(words, {unit: true}),
+                                    entries: strings.count.commentaryEntries(entries.length, {unit: true})
+                                })}</li>
+                            `)
+                            .join('\n')}
+                    </ul>
+                </div>
+            `
+        },
+
+        nav: {simple: true}
+    }));
+}
+
+function writeAlbumCommentaryPage(album) {
+    const entries = [album, ...album.tracks].filter(x => x.commentary).map(x => x.commentary);
+    const words = entries.join(' ').split(' ').length;
+
+    return ({strings, writePage}) => writePage('albumCommentary', album.directory, ({to}) => ({
+        title: strings('albumCommentaryPage.title', {album: album.name}),
+        stylesheet: getAlbumStylesheet(album, {to}),
+        theme: getThemeString(album.color),
+
+        main: {
+            content: fixWS`
+                <div class="long-content">
+                    <h1>${strings('albumCommentaryPage.title', {
+                        album: strings.link.album(album, {to})
+                    })}</h1>
+                    <p>${strings('albumCommentaryPage.infoLine', {
+                        words: `<b>${strings.count.words(words, {unit: true})}</b>`,
+                        entries: `<b>${strings.count.commentaryEntries(entries.length, {unit: true})}</b>`
+                    })}</p>
+                    ${album.commentary && fixWS`
+                        <h3>${strings('albumCommentaryPage.entry.title.albumCommentary')}</h3>
+                        <blockquote>
+                            ${transformMultiline(album.commentary, {strings, to})}
+                        </blockquote>
+                    `}
+                    ${album.tracks.filter(t => t.commentary).map(track => fixWS`
+                        <h3 id="${track.directory}">${strings('albumCommentaryPage.entry.title.trackCommentary', {
+                            track: strings.link.track(track, {to})
+                        })}</h3>
+                        <blockquote style="${getLinkThemeString(track.color)}">
+                            ${transformMultiline(track.commentary, {strings, to})}
+                        </blockquote>
+                    `).join('\n')}
+                </div>
+            `
+        },
+
+        nav: {
+            links: [
+                {
+                    href: to('localized.home'),
+                    title: wikiInfo.shortName
+                },
+                {
+                    href: to('localized.commentaryIndex'),
+                    title: strings('commentaryIndex.title')
+                },
+                {
+                    html: strings('albumCommentaryPage.nav.album', {
+                        album: strings.link.albumCommentary(album, {class: 'current', to})
+                    })
+                }
+            ]
+        }
+    }));
+}
+
+function writeTagPages() {
+    if (!wikiInfo.features.artTagUI) {
+        return;
+    }
+
+    return tagData.filter(tag => !tag.isCW).map(writeTagPage);
+}
+
+function writeTagPage(tag) {
+    const { things } = tag;
+
+    return ({strings, writePage}) => writePage('tag', tag.directory, ({to}) => ({
+        title: strings('tagPage.title', {tag: tag.name}),
+        theme: getThemeString(tag.color),
+
+        main: {
+            classes: ['top-index'],
+            content: fixWS`
+                <h1>${strings('tagPage.title', {tag: tag.name})}</h1>
+                <p class="quick-info">${strings('tagPage.infoLine', {
+                    coverArts: strings.count.coverArts(things.length, {unit: true})
+                })}</p>
+                <div class="grid-listing">
+                    ${getGridHTML({
+                        strings, to,
+                        entries: things.map(item => ({item})),
+                        srcFn: thing => (thing.album
+                            ? getTrackCover(thing, {to})
+                            : getAlbumCover(thing, {to})),
+                        hrefFn: thing => (thing.album
+                            ? to('localized.track', thing.directory)
+                            : to('localized.album', thing.directory))
+                    })}
+                </div>
+            `
+        },
+
+        nav: {
+            links: [
+                {
+                    href: to('localized.home'),
+                    title: wikiInfo.shortName
+                },
+                wikiInfo.features.listings &&
+                {
+                    href: to('localized.listingIndex'),
+                    title: strings('listingIndex.title')
+                },
+                {
+                    html: strings('tagPage.nav.tag', {
+                        tag: strings.link.tag(tag, {class: 'current', to})
+                    })
+                }
+            ]
+        }
+    }));
+}
+
+function getArtistString(artists, {strings, to, showIcons = false, showContrib = false}) {
+    return strings.list.and(artists.map(({ who, what }) => {
+        const { urls, directory, name } = who;
+        return [
+            strings.link.artist(who, {to}),
+            showContrib && what && `(${what})`,
+            showIcons && urls.length && `<span class="icons">(${
+                strings.list.unit(urls.map(url => iconifyURL(url, {strings, to})))
+            })</span>`
+        ].filter(Boolean).join(' ');
+    }));
+}
+
+function getFlashDirectory(flash) {
+    // const kebab = getKebabCase(flash.name.replace('[S] ', ''));
+    // return flash.page + (kebab ? '-' + kebab : '');
+    // return '' + flash.page;
+    return '' + flash.directory;
+}
+
+function getTagDirectory({name}) {
+    return getKebabCase(name);
+}
+
+function getAlbumListTag(album) {
+    if (album.directory === UNRELEASED_TRACKS_DIRECTORY) {
+        return 'ul';
+    } else {
+        return 'ol';
+    }
+}
+
+function fancifyURL(url, {strings, album = false} = {}) {
+    const domain = new URL(url).hostname;
+    return fixWS`<a href="${url}" class="nowrap">${
+        domain.includes('bandcamp.com') ? strings('misc.external.bandcamp') :
+        [
+            'music.solatrux.com'
+        ].includes(domain) ? strings('misc.external.bandcamp.domain', {domain}) :
+        [
+            'types.pl'
+        ].includes(domain) ? strings('misc.external.mastodon.domain', {domain}) :
+        domain.includes('youtu') ? (album
+            ? (url.includes('list=')
+                ? strings('misc.external.youtube.playlist')
+                : strings('misc.external.youtube.fullAlbum'))
+            : strings('misc.external.youtube')) :
+        domain.includes('soundcloud') ? strings('misc.external.soundcloud') :
+        domain.includes('tumblr.com') ? strings('misc.external.tumblr') :
+        domain.includes('twitter.com') ? strings('misc.external.twitter') :
+        domain.includes('deviantart.com') ? strings('misc.external.deviantart') :
+        domain.includes('wikipedia.org') ? strings('misc.external.wikipedia') :
+        domain.includes('poetryfoundation.org') ? strings('misc.external.poetryFoundation') :
+        domain.includes('instagram.com') ? strings('misc.external.instagram') :
+        domain.includes('patreon.com') ? strings('misc.external.patreon') :
+        domain
+    }</a>`;
+}
+
+function fancifyFlashURL(url, flash, {strings}) {
+    const link = fancifyURL(url, {strings});
+    return `<span class="nowrap">${
+        url.includes('homestuck.com') ? (isNaN(Number(flash.page))
+            ? strings('misc.external.flash.homestuck.secret', {link})
+            : strings('misc.external.flash.homestuck.page', {link, page: flash.page})) :
+        url.includes('bgreco.net') ? strings('misc.external.flash.bgreco', {link}) :
+        url.includes('youtu') ? strings('misc.external.flash.youtube', {link}) :
+        link
+    }</span>`;
+}
+
+function iconifyURL(url, {strings, to}) {
+    const domain = new URL(url).hostname;
+    const [ id, msg ] = (
+        domain.includes('bandcamp.com') ? ['bandcamp', strings('misc.external.bandcamp')] :
+        (
+            domain.includes('music.solatrus.com')
+        ) ? ['bandcamp', strings('misc.external.bandcamp.domain', {domain})] :
+        (
+            domain.includes('types.pl')
+        ) ? ['mastodon', strings('misc.external.mastodon.domain', {domain})] :
+        domain.includes('youtu') ? ['youtube', strings('misc.external.youtube')] :
+        domain.includes('soundcloud') ? ['soundcloud', strings('misc.external.soundcloud')] :
+        domain.includes('tumblr.com') ? ['tumblr', strings('misc.external.tumblr')] :
+        domain.includes('twitter.com') ? ['twitter', strings('misc.external.twitter')] :
+        domain.includes('deviantart.com') ? ['deviantart', strings('misc.external.deviantart')] :
+        domain.includes('instagram.com') ? ['instagram', strings('misc.external.bandcamp')] :
+        ['globe', strings('misc.external.domain', {domain})]
+    );
+    return fixWS`<a href="${url}" class="icon"><svg><title>${msg}</title><use href="${to('shared.staticFile', `icons.svg#icon-${id}`)}"></use></svg></a>`;
+}
+
+function chronologyLinks(currentThing, {
+    strings, to,
+    headingString,
+    contribKey,
+    getThings
+}) {
+    const contributions = currentThing[contribKey];
+    if (!contributions) {
+        return '';
+    }
+
+    if (contributions.length > 8) {
+        return `<div class="chronology">${strings('misc.chronology.seeArtistPages')}</div>`;
+    }
+
+    return contributions.map(({ who: artist }) => {
+        const things = sortByDate(unique(getThings(artist)));
+        const releasedThings = things.filter(thing => {
+            const album = albumData.includes(thing) ? thing : thing.album;
+            return !(album && album.directory === UNRELEASED_TRACKS_DIRECTORY);
+        });
+        const index = releasedThings.indexOf(currentThing);
+
+        if (index === -1) return '';
+
+        // TODO: This can pro8a8ly 8e made to use generatePreviousNextLinks?
+        // We'd need to make generatePreviousNextLinks use toAnythingMan tho.
+        const previous = releasedThings[index - 1];
+        const next = releasedThings[index + 1];
+        const parts = [
+            previous && `<a href="${toAnythingMan(previous, to)}" title="${previous.name}">Previous</a>`,
+            next && `<a href="${toAnythingMan(next, to)}" title="${next.name}">Next</a>`
+        ].filter(Boolean);
+
+        const stringOpts = {
+            index: strings.count.index(index + 1, {strings}),
+            artist: strings.link.artist(artist, {to})
+        };
+
+        return fixWS`
+            <div class="chronology">
+                <span class="heading">${strings(headingString, stringOpts)}</span>
+                ${parts.length && `<span class="buttons">(${parts.join(', ')})</span>`}
+            </div>
+        `;
+    }).filter(Boolean).join('\n');
+}
+
+function generateAlbumNavLinks(album, currentTrack, {strings, to}) {
+    if (album.tracks.length <= 1) {
+        return '';
+    }
+
+    const previousNextLinks = currentTrack && generatePreviousNextLinks('localized.track', currentTrack, album.tracks, {strings, to})
+    const randomLink = `<a href="#" data-random="track-in-album" id="random-button">${
+        (currentTrack
+            ? strings('trackPage.nav.random')
+            : strings('albumPage.nav.randomTrack'))
+    }</a>`;
+
+    return (previousNextLinks
+        ? `(${previousNextLinks}<span class="js-hide-until-data">, ${randomLink}</span>)`
+        : `<span class="js-hide-until-data">(${randomLink})</span>`);
+}
+
+function generateAlbumChronologyLinks(album, currentTrack, {strings, to}) {
+    return [
+        currentTrack && chronologyLinks(currentTrack, {
+            strings, to,
+            headingString: 'misc.chronology.heading.track',
+            contribKey: 'artists',
+            getThings: artist => [...artist.tracks.asArtist, ...artist.tracks.asContributor]
+        }),
+        chronologyLinks(currentTrack || album, {
+            strings, to,
+            headingString: 'misc.chronology.heading.coverArt',
+            contribKey: 'coverArtists',
+            getThings: artist => [...artist.albums.asCoverArtist, ...artist.tracks.asCoverArtist]
+        })
+    ].filter(Boolean).join('\n');
+}
+
+function generateSidebarForAlbum(album, currentTrack, {strings, to}) {
+    const listTag = getAlbumListTag(album);
+
+    const trackToListItem = track => `<li ${classes(track === currentTrack && 'current')}>${
+        strings('albumSidebar.trackList.item', {
+            track: strings.link.track(track, {to})
+        })
+    }</li>`;
+
+    const trackListPart = fixWS`
+        <h1><a href="${to('localized.album', album.directory)}">${album.name}</a></h1>
+        ${album.trackGroups ? fixWS`
+            <dl>
+                ${album.trackGroups.map(({ name, color, startIndex, tracks }) => fixWS`
+                    <dt ${classes(tracks.includes(currentTrack) && 'current')}>${
+                        (listTag === 'ol'
+                            ? strings('albumSidebar.trackList.group.withRange', {
+                                group: strings.link.track(tracks[0], {to, text: name}),
+                                range: `${startIndex + 1}&ndash;${startIndex + tracks.length}`
+                            })
+                            : strings('albumSidebar.trackList.group', {
+                                group: strings.link.track(tracks[0], {to, text: name})
+                            }))
+                    }</dt>
+                    ${(!currentTrack || tracks.includes(currentTrack)) && fixWS`
+                        <dd><${listTag === 'ol' ? `ol start="${startIndex + 1}"` : listTag}>
+                            ${tracks.map(trackToListItem).join('\n')}
+                        </${listTag}></dd>
+                    `}
+                `).join('\n')}
+            </dl>
+        ` : fixWS`
+            <${listTag}>
+                ${album.tracks.map(trackToListItem).join('\n')}
+            </${listTag}>
+        `}
+    `;
+
+    const { groups } = album;
+
+    const groupParts = groups.map(group => {
+        const index = group.albums.indexOf(album);
+        const next = group.albums[index + 1];
+        const previous = group.albums[index - 1];
+        return {group, next, previous};
+    }).map(({group, next, previous}) => fixWS`
+        <h1>${
+            strings('albumSidebar.groupBox.title', {
+                group: `<a href="${to('localized.groupInfo', group.directory)}">${group.name}</a>`
+            })
+        }</h1>
+        ${!currentTrack && transformMultiline(group.descriptionShort, {strings, to})}
+        ${group.urls.length && `<p>${
+            strings('releaseInfo.visitOn', {
+                links: strings.list.or(group.urls.map(url => fancifyURL(url, {strings})))
+            })
+        }</p>`}
+        ${!currentTrack && fixWS`
+            ${next && `<p class="group-chronology-link">${
+                strings('albumSidebar.groupBox.next', {
+                    album: `<a href="${to('localized.album', next.directory)}" style="${getLinkThemeString(next.color)}">${next.name}</a>`
+                })
+            }</p>`}
+            ${previous && `<p class="group-chronology-link">${
+                strings('albumSidebar.groupBox.previous', {
+                    album: `<a href="${to('localized.album', previous.directory)}" style="${getLinkThemeString(previous.color)}">${previous.name}</a>`
+                })
+            }</p>`}
+        `}
+    `);
+
+    if (groupParts.length) {
+        if (currentTrack) {
+            const combinedGroupPart = groupParts.join('\n<hr>\n');
+            return {
+                multiple: [
+                    trackListPart,
+                    combinedGroupPart
+                ]
+            };
+        } else {
+            return {
+                multiple: [
+                    ...groupParts,
+                    trackListPart
+                ]
+            };
+        }
+    } else {
+        return {
+            content: trackListPart
+        };
+    }
+}
+
+function generateSidebarForGroup(currentGroup, {strings, to, isGallery}) {
+    if (!wikiInfo.features.groupUI) {
+        return null;
+    }
+
+    const urlKey = isGallery ? 'localized.groupGallery' : 'localized.groupInfo';
+
+    return {
+        content: fixWS`
+            <h1>${strings('groupSidebar.title')}</h1>
+            <dl>
+                ${groupCategoryData.map(category => [
+                    fixWS`
+                        <dt ${classes(category === currentGroup.category && 'current')}>${
+                            strings('groupSidebar.groupList.category', {
+                                category: `<a href="${to(urlKey, category.groups[0].directory)}" style="${getLinkThemeString(category.color)}">${category.name}</a>`
+                            })
+                        }</dt>
+                        <dd><ul>
+                            ${category.groups.map(group => fixWS`
+                                <li ${classes(group === currentGroup && 'current')} style="${getLinkThemeString(group.color)}">${
+                                    strings('groupSidebar.groupList.item', {
+                                        group: `<a href="${to(urlKey, group.directory)}">${group.name}</a>`
+                                    })
+                                }</li>
+                            `).join('\n')}
+                        </ul></dd>
+                    `
+                ]).join('\n')}
+            </dl>
+        `
+    };
+}
+
+function generateInfoGalleryLinks(urlKeyInfo, urlKeyGallery, currentThing, isGallery, {strings, to}) {
+    return [
+        strings.link[urlKeyInfo](currentThing, {
+            to,
+            class: isGallery ? '' : 'current',
+            text: strings('misc.nav.info')
+        }),
+        strings.link[urlKeyGallery](currentThing, {
+            to,
+            class: isGallery ? 'current' : '',
+            text: strings('misc.nav.gallery')
+        })
+    ].join(', ');
+}
+
+function generatePreviousNextLinks(urlKey, currentThing, thingData, {strings, to}) {
+    const index = thingData.indexOf(currentThing);
+    const previous = thingData[index - 1];
+    const next = thingData[index + 1];
+
+    return [
+        previous && `<a href="${to(urlKey, previous.directory)}" id="previous-button" title="${previous.name}">${strings('misc.nav.previous')}</a>`,
+        next && `<a href="${to(urlKey, next.directory)}" id="next-button" title="${next.name}">${strings('misc.nav.next')}</a>`
+    ].filter(Boolean).join(', ');
+}
+
+function generateNavForGroup(currentGroup, {strings, to, isGallery}) {
+    if (!wikiInfo.features.groupUI) {
+        return {simple: true};
+    }
+
+    const urlKey = isGallery ? 'localized.groupGallery' : 'localized.groupInfo';
+    const linkKey = isGallery ? 'groupGallery' : 'groupInfo';
+
+    const infoGalleryLinks = generateInfoGalleryLinks('groupInfo', 'groupGallery', currentGroup, isGallery, {strings, to});
+    const previousNextLinks = generatePreviousNextLinks(urlKey, currentGroup, groupData, {strings, to})
+
+    return {
+        links: [
+            {
+                href: to('localized.home'),
+                title: wikiInfo.shortName
+            },
+            wikiInfo.features.listings &&
+            {
+                href: to('localized.listingIndex'),
+                title: strings('listingIndex.title')
+            },
+            {
+                html: strings('groupPage.nav.group', {
+                    group: strings.link[linkKey](currentGroup, {class: 'current', to})
+                })
+            },
+            {
+                divider: false,
+                html: (previousNextLinks
+                    ? `(${infoGalleryLinks}; ${previousNextLinks})`
+                    : `(${previousNextLinks})`)
+            }
+        ]
+    };
+}
+
+function writeGroupPages() {
+    return groupData.map(writeGroupPage);
+}
+
+function writeGroupPage(group) {
+    const releasedAlbums = group.albums.filter(album => album.directory !== UNRELEASED_TRACKS_DIRECTORY);
+    const releasedTracks = releasedAlbums.flatMap(album => album.tracks);
+    const totalDuration = getTotalDuration(releasedTracks);
+
+    return async ({strings, writePage}) => {
+        await writePage('groupInfo', group.directory, ({to}) => ({
+            title: strings('groupInfoPage.title', {group: group.name}),
+            theme: getThemeString(group.color),
+
+            main: {
+                content: fixWS`
+                    <h1>${strings('groupInfoPage.title', {group: group.name})}</h1>
+                    ${group.urls.length && `<p>${
+                        strings('releaseInfo.visitOn', {
+                            links: strings.list.or(group.urls.map(url => fancifyURL(url, {strings})))
+                        })
+                    }</p>`}
+                    <blockquote>
+                        ${transformMultiline(group.description, {strings, to})}
+                    </blockquote>
+                    <h2>${strings('groupInfoPage.albumList.title')}</h2>
+                    <p>${
+                        strings('groupInfoPage.viewAlbumGallery', {
+                            link: `<a href="${to('localized.groupGallery', group.directory)}">${
+                                strings('groupInfoPage.viewAlbumGallery.link')
+                            }</a>`
+                        })
+                    }</p>
+                    <ul>
+                        ${group.albums.map(album => fixWS`
+                            <li>${
+                                strings('groupInfoPage.albumList.item', {
+                                    year: album.date.getFullYear(),
+                                    album: `<a href="${to('localized.album', album.directory)}" style="${getLinkThemeString(album.color)}">${album.name}</a>`
+                                })
+                            }</li>
+                        `).join('\n')}
+                    </ul>
+                `
+            },
+
+            sidebarLeft: generateSidebarForGroup(group, {strings, to, isGallery: false}),
+            nav: generateNavForGroup(group, {strings, to, isGallery: false})
+        }));
+
+        await writePage('groupGallery', group.directory, ({to}) => ({
+            title: strings('groupGalleryPage.title', {group: group.name}),
+            theme: getThemeString(group.color),
+
+            main: {
+                classes: ['top-index'],
+                content: fixWS`
+                    <h1>${strings('groupGalleryPage.title', {group: group.name})}</h1>
+                    <p class="quick-info">${
+                        strings('groupGalleryPage.infoLine', {
+                            tracks: `<b>${strings.count.tracks(releasedTracks.length, {unit: true})}</b>`,
+                            albums: `<b>${strings.count.albums(releasedAlbums.length, {unit: true})}</b>`,
+                            time: `<b>${strings.count.duration(totalDuration, {unit: true})}</b>`
+                        })
+                    }</p>
+                    ${wikiInfo.features.groupUI && wikiInfo.features.listings && `<p class="quick-info">(<a href="${to('localized.listing', 'groups/by-category')}">Choose another group to filter by!</a>)</p>`}
+                    <div class="grid-listing">
+                        ${getAlbumGridHTML({
+                            strings, to,
+                            entries: sortByDate(group.albums.map(item => ({item}))).reverse(),
+                            details: true
+                        })}
+                    </div>
+                `
+            },
+
+            sidebarLeft: generateSidebarForGroup(group, {strings, to, isGallery: true}),
+            nav: generateNavForGroup(group, {strings, to, isGallery: true})
+        }));
+    };
+}
+
+function toAnythingMan(anythingMan, to) {
+    return (
+        albumData.includes(anythingMan) ? to('localized.album', anythingMan.directory) :
+        trackData.includes(anythingMan) ? to('localized.track', anythingMan.directory) :
+        flashData?.includes(anythingMan) ? to('localized.flash', anythingMan.directory) :
+        'idk-bud'
+    )
+}
+
+function getAlbumCover(album, {to}) {
+    return to('media.albumCover', album.directory);
+}
+
+function getTrackCover(track, {to}) {
+    // Some al8ums don't have any track art at all, and in those, every track
+    // just inherits the al8um's own cover art.
+    if (track.coverArtists === null) {
+        return getAlbumCover(track.album, {to});
+    } else {
+        return to('media.trackCover', track.album.directory, track.directory);
+    }
+}
+
+function getFlashLink(flash) {
+    return `https://homestuck.com/story/${flash.page}`;
+}
+
+function classes(...args) {
+    const values = args.filter(Boolean);
+    return `class="${values.join(' ')}"`;
+}
+
+async function processLanguageFile(file, defaultStrings = null) {
+    let contents;
+    try {
+        contents = await readFile(file, 'utf-8');
+    } catch (error) {
+        return {error: `Could not read ${file} (${error.code}).`};
+    }
+
+    let json;
+    try {
+        json = JSON.parse(contents);
+    } catch (error) {
+        return {error: `Could not parse JSON from ${file} (${error}).`};
+    }
+
+    return genStrings(json, defaultStrings);
+}
+
+// Wrapper function for running a function once for all languages. It provides:
+// * the language strings
+// * a shadowing writePages function for outputing to the appropriate subdir
+// * a shadowing urls object for linking to the appropriate relative paths
+async function wrapLanguages(fn, writeOneLanguage = null) {
+    const k = writeOneLanguage
+    const languagesToRun = (k
+        ? {[k]: languages[k]}
+        : languages)
+
+    const entries = Object.entries(languagesToRun)
+        .filter(([ key ]) => key !== 'default');
+
+    for (let i = 0; i < entries.length; i++) {
+        const [ key, strings ] = entries[i];
+
+        const baseDirectory = (strings === languages.default ? '' : strings.code);
+
+        const shadow_writePage = (urlKey, directory, pageFn) => writePage(strings, baseDirectory, urlKey, directory, pageFn);
+
+        // 8ring the utility functions over too!
+        Object.assign(shadow_writePage, writePage);
+
+        await fn({
+            baseDirectory,
+            strings,
+            writePage: shadow_writePage
+        }, i, entries);
+    }
+}
+
+async function main() {
+    const miscOptions = await parseOptions(process.argv.slice(2), {
+        // Data files for the site, including flash, artist, and al8um data,
+        // and like a jillion other things too. Pretty much everything which
+        // makes an individual wiki what it is goes here!
+        'data-path': {
+            type: 'value'
+        },
+
+        // Static media will 8e referenced in the site here! The contents are
+        // categorized; check out MEDIA_ALBUM_ART_DIRECTORY and other constants
+        // near the top of this file (upd8.js).
+        'media-path': {
+            type: 'value'
+        },
+
+        // String files! For the most part, this is used for translating the
+        // site to different languages, though you can also customize strings
+        // for your own 8uild of the site if you'd like. Files here should all
+        // match the format in strings-default.json in this repository. (If a
+        // language file is missing any strings, the site code will fall 8ack
+        // to what's specified in strings-default.json.)
+        //
+        // Unlike the other options here, this one's optional - the site will
+        // 8uild with the default (English) strings if this path is left
+        // unspecified.
+        'lang-path': {
+            type: 'value'
+        },
+
+        // This is the output directory. It's the one you'll upload online with
+        // rsync or whatever when you're pushing an upd8, and also the one
+        // you'd archive if you wanted to make a 8ackup of the whole dang
+        // site. Just keep in mind that the gener8ted result will contain a
+        // couple symlinked directories, so if you're uploading, you're pro8a8ly
+        // gonna want to resolve those yourself.
+        'out-path': {
+            type: 'value'
+        },
+
+        // Thum8nail gener8tion is *usually* something you want, 8ut it can 8e
+        // kinda a pain to run every time, since it does necessit8te reading
+        // every media file at run time. Pass this to skip it.
+        'skip-thumbs': {
+            type: 'flag'
+        },
+
+        // Or, if you *only* want to gener8te newly upd8ted thum8nails, you can
+        // pass this flag! It exits 8efore 8uilding the rest of the site.
+        'thumbs-only': {
+            type: 'flag'
+        },
+
+        // Only want 8uild one language during testing? This can chop down
+        // 8uild times a pretty 8ig chunk! Just pass a single language code.
+        'lang': {
+            type: 'value'
+        },
+
+        'queue-size': {
+            type: 'value',
+            validate(size) {
+                if (parseInt(size) !== parseFloat(size)) return 'an integer';
+                if (parseInt(size) < 0) return 'a counting number or zero';
+                return true;
+            }
+        },
+        queue: {alias: 'queue-size'},
+
+        [parseOptions.handleUnknown]: () => {}
+    });
+
+    dataPath = miscOptions['data-path'] || process.env.HSMUSIC_DATA;
+    mediaPath = miscOptions['media-path'] || process.env.HSMUSIC_MEDIA;
+    langPath = miscOptions['lang-path'] || process.env.HSMUSIC_LANG; // Can 8e left unset!
+    outputPath = miscOptions['out-path'] || process.env.HSMUSIC_OUT;
+
+    const writeOneLanguage = miscOptions['lang'];
+
+    {
+        let errored = false;
+        const error = (cond, msg) => {
+            if (cond) {
+                console.error(`\x1b[31;1m${msg}\x1b[0m`);
+                errored = true;
+            }
+        };
+        error(!dataPath,   `Expected --data option or HSMUSIC_DATA to be set`);
+        error(!mediaPath,  `Expected --media option or HSMUSIC_MEDIA to be set`);
+        error(!outputPath, `Expected --out option or HSMUSIC_OUT to be set`);
+        if (errored) {
+            return;
+        }
+    }
+
+    const skipThumbs = miscOptions['skip-thumbs'] ?? false;
+    const thumbsOnly = miscOptions['thumbs-only'] ?? false;
+
+    if (skipThumbs && thumbsOnly) {
+        logInfo`Well, you've put yourself rather between a roc and a hard place, hmmmm?`;
+        return;
+    }
+
+    if (skipThumbs) {
+        logInfo`Skipping thumbnail generation.`;
+    } else {
+        logInfo`Begin thumbnail generation... -----+`;
+        const result = await genThumbs(mediaPath, {queueSize, quiet: true});
+        logInfo`Done thumbnail generation! --------+`;
+        if (!result) return;
+        if (thumbsOnly) return;
+    }
+
+    const defaultStrings = await processLanguageFile(path.join(__dirname, DEFAULT_STRINGS_FILE));
+    if (defaultStrings.error) {
+        logError`Error loading default strings: ${defaultStrings.error}`;
+        return;
+    }
+
+    if (langPath) {
+        const languageDataFiles = await findFiles(langPath, f => path.extname(f) === '.json');
+        const results = await progressPromiseAll(`Reading & processing language files.`, languageDataFiles
+            .map(file => processLanguageFile(file, defaultStrings.json)));
+
+        let error = false;
+        for (const strings of results) {
+            if (strings.error) {
+                logError`Error loading provided strings: ${strings.error}`;
+                error = true;
+            }
+        }
+        if (error) return;
+
+        languages = Object.fromEntries(results.map(strings => [strings.code, strings]));
+    } else {
+        languages = {};
+    }
+
+    if (!languages[defaultStrings.code]) {
+        languages[defaultStrings.code] = defaultStrings;
+    }
+
+    logInfo`Loaded language strings: ${Object.keys(languages).join(', ')}`;
+
+    if (writeOneLanguage && !(writeOneLanguage in languages)) {
+        logError`Specified to write only ${writeOneLanguage}, but there is no strings file with this language code!`;
+        return;
+    } else if (writeOneLanguage) {
+        logInfo`Writing only language ${writeOneLanguage} this run.`;
+    } else {
+        logInfo`Writing all languages.`;
+    }
+
+    wikiInfo = await processWikiInfoFile(path.join(dataPath, WIKI_INFO_FILE));
+    if (wikiInfo.error) {
+        console.log(`\x1b[31;1m${wikiInfo.error}\x1b[0m`);
+        return;
+    }
+
+    // Update languages o8ject with the wiki-specified default language!
+    // This will make page files for that language 8e gener8ted at the root
+    // directory, instead of the language-specific su8directory.
+    if (wikiInfo.defaultLanguage) {
+        if (Object.keys(languages).includes(wikiInfo.defaultLanguage)) {
+            languages.default = languages[wikiInfo.defaultLanguage];
+        } else {
+            logError`Wiki info file specified default language is ${wikiInfo.defaultLanguage}, but no such language file exists!`;
+            if (langPath) {
+                logError`Check if an appropriate file exists in ${langPath}?`;
+            } else {
+                logError`Be sure to specify ${'--lang'} or ${'HSMUSIC_LANG'} with the path to language files.`;
+            }
+            return;
+        }
+    } else {
+        languages.default = defaultStrings;
+    }
+
+    homepageInfo = await processHomepageInfoFile(path.join(dataPath, HOMEPAGE_INFO_FILE));
+
+    if (homepageInfo.error) {
+        console.log(`\x1b[31;1m${homepageInfo.error}\x1b[0m`);
+        return;
+    }
+
+    {
+        const errors = homepageInfo.rows.filter(obj => obj.error);
+        if (errors.length) {
+            for (const error of errors) {
+                console.log(`\x1b[31;1m${error.error}\x1b[0m`);
+            }
+            return;
+        }
+    }
+
+    // 8ut wait, you might say, how do we know which al8um these data files
+    // correspond to???????? You wouldn't dare suggest we parse the actual
+    // paths returned 8y this function, which ought to 8e of effectively
+    // unknown format except for their purpose as reada8le data files!?
+    // To that, I would say, yeah, you're right. Thanks a 8unch, my projection
+    // of "you". We're going to read these files later, and contained within
+    // will 8e the actual directory names that the data correspond to. Yes,
+    // that's redundant in some ways - we COULD just return the directory name
+    // in addition to the data path, and duplicating that name within the file
+    // itself suggests we 8e careful to avoid mismatching it - 8ut doing it
+    // this way lets the data files themselves 8e more porta8le (meaning we
+    // could store them all in one folder, if we wanted, and this program would
+    // still output to the correct al8um directories), and also does make the
+    // function's signature simpler (an array of strings, rather than some kind
+    // of structure containing 8oth data file paths and output directories).
+    // This is o8jectively a good thing, 8ecause it means the function can stay
+    // truer to its name, and have a narrower purpose: it doesn't need to
+    // concern itself with where we *output* files, or whatever other reasons
+    // we might (hypothetically) have for knowing the containing directory.
+    // And, in the strange case where we DO really need to know that info, we
+    // callers CAN use path.dirname to find out that data. 8ut we'll 8e
+    // avoiding that in our code 8ecause, again, we want to avoid assuming the
+    // format of the returned paths here - they're only meant to 8e used for
+    // reading as-is.
+    const albumDataFiles = await findFiles(path.join(dataPath, DATA_ALBUM_DIRECTORY));
+
+    // Technically, we could do the data file reading and output writing at the
+    // same time, 8ut that kinda makes the code messy, so I'm not 8othering
+    // with it.
+    albumData = await progressPromiseAll(`Reading & processing album files.`, albumDataFiles.map(processAlbumDataFile));
+
+    {
+        const errors = albumData.filter(obj => obj.error);
+        if (errors.length) {
+            for (const error of errors) {
+                console.log(`\x1b[31;1m${error.error}\x1b[0m`);
+            }
+            return;
+        }
+    }
+
+    sortByDate(albumData);
+
+    artistData = await processArtistDataFile(path.join(dataPath, ARTIST_DATA_FILE));
+    if (artistData.error) {
+        console.log(`\x1b[31;1m${artistData.error}\x1b[0m`);
+        return;
+    }
+
+    {
+        const errors = artistData.filter(obj => obj.error);
+        if (errors.length) {
+            for (const error of errors) {
+                console.log(`\x1b[31;1m${error.error}\x1b[0m`);
+            }
+            return;
+        }
+    }
+
+    artistAliasData = artistData.filter(x => x.alias);
+    artistData = artistData.filter(x => !x.alias);
+
+    trackData = getAllTracks(albumData);
+
+    if (wikiInfo.features.flashesAndGames) {
+        flashData = await processFlashDataFile(path.join(dataPath, FLASH_DATA_FILE));
+        if (flashData.error) {
+            console.log(`\x1b[31;1m${flashData.error}\x1b[0m`);
+            return;
+        }
+
+        const errors = flashData.filter(obj => obj.error);
+        if (errors.length) {
+            for (const error of errors) {
+                console.log(`\x1b[31;1m${error.error}\x1b[0m`);
+            }
+            return;
+        }
+    }
+
+    flashActData = flashData?.filter(x => x.act8r8k);
+    flashData = flashData?.filter(x => !x.act8r8k);
+
+    artistNames = Array.from(new Set([
+        ...artistData.filter(artist => !artist.alias).map(artist => artist.name),
+        ...[
+            ...albumData.flatMap(album => [
+                ...album.artists || [],
+                ...album.coverArtists || [],
+                ...album.wallpaperArtists || [],
+                ...album.tracks.flatMap(track => [
+                    ...track.artists,
+                    ...track.coverArtists || [],
+                    ...track.contributors || []
+                ])
+            ]),
+            ...(flashData?.flatMap(flash => [
+                ...flash.contributors || []
+            ]) || [])
+        ].map(contribution => contribution.who)
+    ]));
+
+    tagData = await processTagDataFile(path.join(dataPath, TAG_DATA_FILE));
+    if (tagData.error) {
+        console.log(`\x1b[31;1m${tagData.error}\x1b[0m`);
+        return;
+    }
+
+    {
+        const errors = tagData.filter(obj => obj.error);
+        if (errors.length) {
+            for (const error of errors) {
+                console.log(`\x1b[31;1m${error.error}\x1b[0m`);
+            }
+            return;
+        }
+    }
+
+    groupData = await processGroupDataFile(path.join(dataPath, GROUP_DATA_FILE));
+    if (groupData.error) {
+        console.log(`\x1b[31;1m${groupData.error}\x1b[0m`);
+        return;
+    }
+
+    {
+        const errors = groupData.filter(obj => obj.error);
+        if (errors.length) {
+            for (const error of errors) {
+                console.log(`\x1b[31;1m${error.error}\x1b[0m`);
+            }
+            return;
+        }
+    }
+
+    groupCategoryData = groupData.filter(x => x.isCategory);
+    groupData = groupData.filter(x => x.isGroup);
+
+    staticPageData = await processStaticPageDataFile(path.join(dataPath, STATIC_PAGE_DATA_FILE));
+    if (staticPageData.error) {
+        console.log(`\x1b[31;1m${staticPageData.error}\x1b[0m`);
+        return;
+    }
+
+    {
+        const errors = staticPageData.filter(obj => obj.error);
+        if (errors.length) {
+            for (const error of errors) {
+                console.log(`\x1b[31;1m${error.error}\x1b[0m`);
+            }
+            return;
+        }
+    }
+
+    if (wikiInfo.features.news) {
+        newsData = await processNewsDataFile(path.join(dataPath, NEWS_DATA_FILE));
+        if (newsData.error) {
+            console.log(`\x1b[31;1m${newsData.error}\x1b[0m`);
+            return;
+        }
+
+        const errors = newsData.filter(obj => obj.error);
+        if (errors.length) {
+            for (const error of errors) {
+                console.log(`\x1b[31;1m${error.error}\x1b[0m`);
+            }
+            return;
+        }
+
+        sortByDate(newsData);
+        newsData.reverse();
+    }
+
+    {
+        const tagNames = new Set([...trackData, ...albumData].flatMap(thing => thing.artTags));
+
+        for (let { name, isCW } of tagData) {
+            if (isCW) {
+                name = 'cw: ' + name;
+            }
+            tagNames.delete(name);
+        }
+
+        if (tagNames.size) {
+            for (const name of Array.from(tagNames).sort()) {
+                console.log(`\x1b[33;1m- Missing tag: "${name}"\x1b[0m`);
+            }
+            return;
+        }
+    }
+
+    artistNames.sort((a, b) => a.toLowerCase() < b.toLowerCase() ? -1 : a.toLowerCase() > b.toLowerCase() ? 1 : 0);
+
+    justEverythingMan = sortByDate([...albumData, ...trackData, ...(flashData || [])]);
+    justEverythingSortedByArtDateMan = sortByArtDate(justEverythingMan.slice());
+    // console.log(JSON.stringify(justEverythingSortedByArtDateMan.map(toAnythingMan), null, 2));
+
+    {
+        let buffer = [];
+        const clearBuffer = function() {
+            if (buffer.length) {
+                for (const entry of buffer.slice(0, -1)) {
+                    console.log(`\x1b[2m... ${entry.name} ...\x1b[0m`);
+                }
+                const lastEntry = buffer[buffer.length - 1];
+                console.log(`\x1b[2m... \x1b[0m${lastEntry.name}\x1b[0;2m ...\x1b[0m`);
+                buffer = [];
+            }
+        };
+        const showWhere = (name, color) => {
+            const where = justEverythingMan.filter(thing => [
+                ...thing.coverArtists || [],
+                ...thing.contributors || [],
+                ...thing.artists || []
+            ].some(({ who }) => who === name));
+            for (const thing of where) {
+                console.log(`\x1b[${color}m- ` + (thing.album ? `(\x1b[1m${thing.album.name}\x1b[0;${color}m)` : '') + ` \x1b[1m${thing.name}\x1b[0m`);
+            }
+        };
+        let CR4SH = false;
+        for (let name of artistNames) {
+            const entry = [...artistData, ...artistAliasData].find(entry => entry.name === name || entry.name.toLowerCase() === name.toLowerCase());
+            if (!entry) {
+                clearBuffer();
+                console.log(`\x1b[31mMissing entry for artist "\x1b[1m${name}\x1b[0;31m"\x1b[0m`);
+                showWhere(name, 31);
+                CR4SH = true;
+            } else if (entry.alias) {
+                console.log(`\x1b[33mArtist "\x1b[1m${name}\x1b[0;33m" should be named "\x1b[1m${entry.alias}\x1b[0;33m"\x1b[0m`);
+                showWhere(name, 33);
+                CR4SH = true;
+            } else if (entry.name !== name) {
+                console.log(`\x1b[33mArtist "\x1b[1m${name}\x1b[0;33m" should be named "\x1b[1m${entry.name}\x1b[0;33m"\x1b[0m`);
+                showWhere(name, 33);
+                CR4SH = true;
+            } else {
+                buffer.push(entry);
+                if (buffer.length > 3) {
+                    buffer.shift();
+                }
+            }
+        }
+        if (CR4SH) {
+            return;
+        }
+    }
+
+    {
+        const directories = [];
+        for (const { directory, name } of albumData) {
+            if (directories.includes(directory)) {
+                console.log(`\x1b[31;1mDuplicate album directory "${directory}" (${name})\x1b[0m`);
+                return;
+            }
+            directories.push(directory);
+        }
+    }
+
+    {
+        const directories = [];
+        const where = {};
+        for (const { directory, album } of trackData) {
+            if (directories.includes(directory)) {
+                console.log(`\x1b[31;1mDuplicate track directory "${directory}"\x1b[0m`);
+                console.log(`Shows up in:`);
+                console.log(`- ${album.name}`);
+                console.log(`- ${where[directory].name}`);
+                return;
+            }
+            directories.push(directory);
+            where[directory] = album;
+        }
+    }
+
+    {
+        const artists = [];
+        const artistsLC = [];
+        for (const name of artistNames) {
+            if (!artists.includes(name) && artistsLC.includes(name.toLowerCase())) {
+                const other = artists.find(oth => oth.toLowerCase() === name.toLowerCase());
+                console.log(`\x1b[31;1mMiscapitalized artist name: ${name}, ${other}\x1b[0m`);
+                return;
+            }
+            artists.push(name);
+            artistsLC.push(name.toLowerCase());
+        }
+    }
+
+    {
+        for (const { references, name, album } of trackData) {
+            for (const ref of references) {
+                if (!search.track(ref)) {
+                    logWarn`Track not found "${ref}" in ${name} (${album.name})`;
+                }
+            }
+        }
+    }
+
+    contributionData = Array.from(new Set([
+        ...trackData.flatMap(track => [...track.artists || [], ...track.contributors || [], ...track.coverArtists || []]),
+        ...albumData.flatMap(album => [...album.artists || [], ...album.coverArtists || [], ...album.wallpaperArtists || [], ...album.bannerArtists || []]),
+        ...(flashData?.flatMap(flash => [...flash.contributors || []]) || [])
+    ]));
+
+    // Now that we have all the data, resolve references all 8efore actually
+    // gener8ting any of the pages, 8ecause page gener8tion is going to involve
+    // accessing these references a lot, and there's no reason to resolve them
+    // more than once. (We 8uild a few additional links that can't 8e cre8ted
+    // at initial data processing time here too.)
+
+    const filterNullArray = (parent, key) => {
+        for (const obj of parent) {
+            const array = obj[key];
+            for (let i = 0; i < array.length; i++) {
+                if (!array[i]) {
+                    const prev = array[i - 1] && array[i - 1].name;
+                    const next = array[i + 1] && array[i + 1].name;
+                    logWarn`Unexpected null in ${obj.name} (${obj.what}) (array key ${key} - prev: ${prev}, next: ${next})`;
+                }
+            }
+            array.splice(0, array.length, ...array.filter(Boolean));
+        }
+    };
+
+    const filterNullValue = (parent, key) => {
+        parent.splice(0, parent.length, ...parent.filter(obj => {
+            if (!obj[key]) {
+                logWarn`Unexpected null in ${obj.name} (value key ${key})`;
+            }
+        }));
+    };
+
+    trackData.forEach(track => mapInPlace(track.references, search.track));
+    trackData.forEach(track => track.aka = search.track(track.aka));
+    trackData.forEach(track => mapInPlace(track.artTags, search.tag));
+    albumData.forEach(album => mapInPlace(album.groups, search.group));
+    albumData.forEach(album => mapInPlace(album.artTags, search.tag));
+    artistAliasData.forEach(artist => artist.alias = search.artist(artist.alias));
+    contributionData.forEach(contrib => contrib.who = search.artist(contrib.who));
+
+    filterNullArray(trackData, 'references');
+    filterNullArray(trackData, 'artTags');
+    filterNullArray(albumData, 'groups');
+    filterNullArray(albumData, 'artTags');
+    filterNullValue(artistAliasData, 'alias');
+    filterNullValue(contributionData, 'who');
+
+    trackData.forEach(track1 => track1.referencedBy = trackData.filter(track2 => track2.references.includes(track1)));
+    groupData.forEach(group => group.albums = albumData.filter(album => album.groups.includes(group)));
+    tagData.forEach(tag => tag.things = sortByArtDate([...albumData, ...trackData]).filter(thing => thing.artTags.includes(tag)));
+
+    groupData.forEach(group => group.category = groupCategoryData.find(x => x.name === group.category));
+    groupCategoryData.forEach(category => category.groups = groupData.filter(x => x.category === category));
+
+    trackData.forEach(track => track.otherReleases = [
+        track.aka,
+        ...trackData.filter(({ aka }) => aka === track || (track.aka && aka === track.aka)),
+    ].filter(x => x && x !== track));
+
+    if (wikiInfo.features.flashesAndGames) {
+        flashData.forEach(flash => mapInPlace(flash.tracks, search.track));
+        flashData.forEach(flash => flash.act = flashActData.find(act => act.name === flash.act));
+        flashActData.forEach(act => act.flashes = flashData.filter(flash => flash.act === act));
+
+        filterNullArray(flashData, 'tracks');
+
+        trackData.forEach(track => track.flashes = flashData.filter(flash => flash.tracks.includes(track)));
+    }
+
+    artistData.forEach(artist => {
+        const filterProp = (array, prop) => array.filter(thing => thing[prop]?.some(({ who }) => who === artist));
+        const filterCommentary = array => array.filter(thing => thing.commentary && thing.commentary.replace(/<\/?b>/g, '').includes('<i>' + artist.name + ':</i>'));
+        artist.tracks = {
+            asArtist: filterProp(trackData, 'artists'),
+            asCommentator: filterCommentary(trackData),
+            asContributor: filterProp(trackData, 'contributors'),
+            asCoverArtist: filterProp(trackData, 'coverArtists'),
+            asAny: trackData.filter(track => (
+                [...track.artists, ...track.contributors, ...track.coverArtists || []].some(({ who }) => who === artist)
+            ))
+        };
+        artist.albums = {
+            asArtist: filterProp(albumData, 'artists'),
+            asCommentator: filterCommentary(albumData),
+            asCoverArtist: filterProp(albumData, 'coverArtists'),
+            asWallpaperArtist: filterProp(albumData, 'wallpaperArtists'),
+            asBannerArtist: filterProp(albumData, 'bannerArtists')
+        };
+        if (wikiInfo.features.flashesAndGames) {
+            artist.flashes = {
+                asContributor: filterProp(flashData, 'contributors')
+            };
+        }
+    });
+
+    officialAlbumData = albumData.filter(album => album.groups.some(group => group.directory === OFFICIAL_GROUP_DIRECTORY));
+    fandomAlbumData = albumData.filter(album => album.groups.every(group => group.directory !== OFFICIAL_GROUP_DIRECTORY));
+
+    // Makes writing a little nicer on CPU theoretically, 8ut also costs in
+    // performance right now 'cuz it'll w8 for file writes to 8e completed
+    // 8efore moving on to more data processing. So, defaults to zero, which
+    // disa8les the queue feature altogether.
+    queueSize = +(miscOptions['queue-size'] ?? 0);
+
+    // NOT for ena8ling or disa8ling specific features of the site!
+    // This is only in charge of what general groups of files to 8uild.
+    // They're here to make development quicker when you're only working
+    // on some particular area(s) of the site rather than making changes
+    // across all of them.
+    const writeFlags = await parseOptions(process.argv.slice(2), {
+        all: {type: 'flag'}, // Defaults to true if none 8elow specified.
+
+        album: {type: 'flag'},
+        artist: {type: 'flag'},
+        commentary: {type: 'flag'},
+        flash: {type: 'flag'},
+        group: {type: 'flag'},
+        list: {type: 'flag'},
+        misc: {type: 'flag'},
+        news: {type: 'flag'},
+        static: {type: 'flag'},
+        tag: {type: 'flag'},
+        track: {type: 'flag'},
+
+        [parseOptions.handleUnknown]: () => {}
+    });
+
+    const writeAll = !Object.keys(writeFlags).length || writeFlags.all;
+
+    logInfo`Writing site pages: ${writeAll ? 'all' : Object.keys(writeFlags).join(', ')}`;
+
+    await writeSymlinks();
+    await writeSharedFilesAndPages({strings: defaultStrings});
+
+    const buildDictionary = {
+        misc: writeMiscellaneousPages,
+        news: writeNewsPages,
+        list: writeListingPages,
+        tag: writeTagPages,
+        commentary: writeCommentaryPages,
+        static: writeStaticPages,
+        group: writeGroupPages,
+        album: writeAlbumPages,
+        track: writeTrackPages,
+        artist: writeArtistPages,
+        flash: writeFlashPages
+    };
+
+    const buildSteps = (writeAll
+        ? Object.values(buildDictionary)
+        : (Object.entries(buildDictionary)
+            .filter(([ flag ]) => writeFlags[flag])
+            .map(([ flag, fn ]) => fn)));
+
+    // *NB: While what's 8elow is 8asically still true in principle, the
+    //      format is QUITE DIFFERENT than what's descri8ed here! There
+    //      will 8e actual document8tion on like, what the return format
+    //      looks like soon, once we implement a 8unch of other pages and
+    //      are certain what they actually, uh, will look like, in the end.*
+    //
+    // The writeThingPages functions don't actually immediately do any file
+    // writing themselves; an initial call will only gather the relevant data
+    // which is *then* used for writing. So the return value is a function
+    // (or an array of functions) which expects {writePage, strings}, and
+    // *that's* what we call after -- multiple times, once for each language.
+    let writes;
+    {
+        let error = false;
+
+        writes = buildSteps.flatMap(fn => {
+            const fns = fn() || [];
+
+            // Do a quick valid8tion! If one of the writeThingPages functions go
+            // wrong, this will stall out early and tell us which did.
+            if (!Array.isArray(fns)) {
+                logError`${fn.name} didn't return an array!`;
+                error = true;
+            } else if (fns.every(entry => Array.isArray(entry))) {
+                if (!(
+                    fns.every(entry => entry.every(obj => typeof obj === 'object')) &&
+                    fns.every(entry => entry.every(obj => {
+                        const result = validateWriteObject(obj);
+                        if (result.error) {
+                            logError`Validating write object failed: ${result.error}`;
+                            return false;
+                        } else {
+                            return true;
+                        }
+                    }))
+                )) {
+                    logError`${fn.name} uses updated format, but entries are invalid!`;
+                    error = true;
+                }
+
+                return fns.flatMap(writes => writes);
+            } else if (fns.some(fn => typeof fn !== 'function')) {
+                logError`${fn.name} didn't return all functions or all arrays!`;
+                error = true;
+            }
+
+            return fns;
+        });
+
+        if (error) {
+            return;
+        }
+
+        // The modern(TM) return format for each writeThingPages function is an
+        // array of arrays, each of which's items are 8ig Complicated Objects
+        // that 8asically look like {type, path, content}. 8ut surprise, these
+        // aren't actually implemented in most places yet! So, we transform
+        // stuff in the old format here. 'Scept keep in mind, the OLD FORMAT
+        // doesn't really give us most of the info we want for Cool And Modern
+        // Reasons, so they're going into a fancy {type: 'legacy'} sort of
+        // o8ject, with a plain {write} property for, uh, the writing stuff,
+        // same as usual.
+        //
+        // I promise this document8tion will get 8etter when we make progress
+        // actually moving old pages over. Also it'll 8e hecks of less work
+        // than previous restructures, don't worry.
+        writes = writes.map(entry =>
+            typeof entry === 'object' ? entry :
+            typeof entry === 'function' ? {type: 'legacy', write: entry} :
+            {type: 'wut', entry});
+
+        const wut = writes.filter(({ type }) => type === 'wut');
+        if (wut.length) {
+            // Oh g*d oh h*ck.
+            logError`Uhhhhh writes contains something 8esides o8jects and functions?`;
+            logError`Definitely a 8ug!`;
+            console.log(wut);
+            return;
+        }
+    }
+
+    const localizedWrites = writes.filter(({ type }) => type === 'page' || type === 'legacy');
+    const dataWrites = writes.filter(({ type }) => type === 'data');
+
+    await progressPromiseAll(`Writing data files shared across languages.`, queue(
+        // TODO: This only supports one <>-style argument.
+        dataWrites.map(({path, data}) => () => writeData(path[0], path[1], data())),
+        queueSize
+    ));
+
+    await wrapLanguages(async ({strings, ...opts}, i, entries) => {
+        console.log(`\x1b[34;1m${
+            (`[${i + 1}/${entries.length}] ${strings.code} (-> /${opts.baseDirectory}) `
+                .padEnd(60, '-'))
+        }\x1b[0m`);
+        await progressPromiseAll(`Writing ${strings.code}`, queue(
+            localizedWrites.map(({type, ...props}) => () => {
+                switch (type) {
+                    case 'legacy': {
+                        const { write } = props;
+                        return write({strings, ...opts});
+                    }
+                    case 'page': {
+                        const { path, page } = props;
+                        // TODO: This only supports one <>-style argument.
+                        return opts.writePage(path[0], path[1], ({to}) => page({strings, to}));
+                    }
+                }
+            }),
+            queueSize
+        ));
+    }, writeOneLanguage);
+
+    decorateTime.displayTime();
+
+    // The single most important step.
+    logInfo`Written!`;
+}
+
+main().catch(error => console.error(error));
diff --git a/src/util/cli.js b/src/util/cli.js
new file mode 100644
index 0000000..7771156
--- /dev/null
+++ b/src/util/cli.js
@@ -0,0 +1,210 @@
+// Utility functions for CLI- and de8ugging-rel8ted stuff.
+//
+// A 8unch of these depend on process.stdout 8eing availa8le, so they won't
+// work within the 8rowser.
+
+const logColor = color => (literals, ...values) => {
+    const w = s => process.stdout.write(s);
+    w(`\x1b[${color}m`);
+    for (let i = 0; i < literals.length; i++) {
+        w(literals[i]);
+        if (values[i] !== undefined) {
+            w(`\x1b[1m`);
+            w(String(values[i]));
+            w(`\x1b[0;${color}m`);
+        }
+    }
+    w(`\x1b[0m\n`);
+};
+
+export const logInfo = logColor(2);
+export const logWarn = logColor(33);
+export const logError = logColor(31);
+
+// Stolen as #@CK from mtui!
+export async function parseOptions(options, optionDescriptorMap) {
+    // This function is sorely lacking in comments, but the basic usage is
+    // as such:
+    //
+    // options is the array of options you want to process;
+    // optionDescriptorMap is a mapping of option names to objects that describe
+    // the expected value for their corresponding options.
+    // Returned is a mapping of any specified option names to their values, or
+    // a process.exit(1) and error message if there were any issues.
+    //
+    // Here are examples of optionDescriptorMap to cover all the things you can
+    // do with it:
+    //
+    // optionDescriptorMap: {
+    //   'telnet-server': {type: 'flag'},
+    //   't': {alias: 'telnet-server'}
+    // }
+    //
+    // options: ['t'] -> result: {'telnet-server': true}
+    //
+    // optionDescriptorMap: {
+    //   'directory': {
+    //     type: 'value',
+    //     validate(name) {
+    //       // const whitelistedDirectories = ['apple', 'banana']
+    //       if (whitelistedDirectories.includes(name)) {
+    //         return true
+    //       } else {
+    //         return 'a whitelisted directory'
+    //       }
+    //     }
+    //   },
+    //   'files': {type: 'series'}
+    // }
+    //
+    // ['--directory', 'apple'] -> {'directory': 'apple'}
+    // ['--directory', 'artichoke'] -> (error)
+    // ['--files', 'a', 'b', 'c', ';'] -> {'files': ['a', 'b', 'c']}
+    //
+    // TODO: Be able to validate the values in a series option.
+
+    const handleDashless = optionDescriptorMap[parseOptions.handleDashless];
+    const handleUnknown = optionDescriptorMap[parseOptions.handleUnknown];
+    const result = Object.create(null);
+    for (let i = 0; i < options.length; i++) {
+        const option = options[i];
+        if (option.startsWith('--')) {
+            // --x can be a flag or expect a value or series of values
+            let name = option.slice(2).split('=')[0]; // '--x'.split('=') = ['--x']
+            let descriptor = optionDescriptorMap[name];
+            if (!descriptor) {
+                if (handleUnknown) {
+                    handleUnknown(option);
+                } else {
+                    console.error(`Unknown option name: ${name}`);
+                    process.exit(1);
+                }
+                continue;
+            }
+            if (descriptor.alias) {
+                name = descriptor.alias;
+                descriptor = optionDescriptorMap[name];
+            }
+            if (descriptor.type === 'flag') {
+                result[name] = true;
+            } else if (descriptor.type === 'value') {
+                let value = option.slice(2).split('=')[1];
+                if (!value) {
+                    value = options[++i];
+                    if (!value || value.startsWith('-')) {
+                        value = null;
+                    }
+                }
+                if (!value) {
+                    console.error(`Expected a value for --${name}`);
+                    process.exit(1);
+                }
+                result[name] = value;
+            } else if (descriptor.type === 'series') {
+                if (!options.slice(i).includes(';')) {
+                    console.error(`Expected a series of values concluding with ; (\\;) for --${name}`);
+                    process.exit(1);
+                }
+                const endIndex = i + options.slice(i).indexOf(';');
+                result[name] = options.slice(i + 1, endIndex);
+                i = endIndex;
+            }
+            if (descriptor.validate) {
+                const validation = await descriptor.validate(result[name]);
+                if (validation !== true) {
+                    console.error(`Expected ${validation} for --${name}`);
+                    process.exit(1);
+                }
+            }
+        } else if (option.startsWith('-')) {
+            // mtui doesn't use any -x=y or -x y format optionuments
+            // -x will always just be a flag
+            let name = option.slice(1);
+            let descriptor = optionDescriptorMap[name];
+            if (!descriptor) {
+                if (handleUnknown) {
+                    handleUnknown(option);
+                } else {
+                    console.error(`Unknown option name: ${name}`);
+                    process.exit(1);
+                }
+                continue;
+            }
+            if (descriptor.alias) {
+                name = descriptor.alias;
+                descriptor = optionDescriptorMap[name];
+            }
+            if (descriptor.type === 'flag') {
+                result[name] = true;
+            } else {
+                console.error(`Use --${name} (value) to specify ${name}`);
+                process.exit(1);
+            }
+        } else if (handleDashless) {
+            handleDashless(option);
+        }
+    }
+    return result;
+}
+
+export const handleDashless = Symbol();
+export const handleUnknown = Symbol();
+
+export function decorateTime(functionToBeWrapped) {
+    const fn = function(...args) {
+        const start = Date.now();
+        const ret = functionToBeWrapped(...args);
+        const end = Date.now();
+        fn.timeSpent += end - start;
+        fn.timesCalled++;
+        return ret;
+    };
+
+    fn.wrappedName = functionToBeWrapped.name;
+    fn.timeSpent = 0;
+    fn.timesCalled = 0;
+    fn.displayTime = function() {
+        const averageTime = fn.timeSpent / fn.timesCalled;
+        console.log(`\x1b[1m${fn.wrappedName}(...):\x1b[0m ${fn.timeSpent} ms / ${fn.timesCalled} calls \x1b[2m(avg: ${averageTime} ms)\x1b[0m`);
+    };
+
+    decorateTime.decoratedFunctions.push(fn);
+
+    return fn;
+}
+
+decorateTime.decoratedFunctions = [];
+decorateTime.displayTime = function() {
+    if (decorateTime.decoratedFunctions.length) {
+        console.log(`\x1b[1mdecorateTime results: ` + '-'.repeat(40) + '\x1b[0m');
+        for (const fn of decorateTime.decoratedFunctions) {
+            fn.displayTime();
+        }
+    }
+};
+
+export function progressPromiseAll(msgOrMsgFn, array) {
+    if (!array.length) {
+        return Promise.resolve([]);
+    }
+
+    const msgFn = (typeof msgOrMsgFn === 'function'
+        ? msgOrMsgFn
+        : () => msgOrMsgFn);
+
+    let done = 0, total = array.length;
+    process.stdout.write(`\r${msgFn()} [0/${total}]`);
+    const start = Date.now();
+    return Promise.all(array.map(promise => promise.then(val => {
+        done++;
+        // const pc = `${done}/${total}`;
+        const pc = (Math.round(done / total * 1000) / 10 + '%').padEnd('99.9%'.length, ' ');
+        if (done === total) {
+            const time = Date.now() - start;
+            process.stdout.write(`\r\x1b[2m${msgFn()} [${pc}] \x1b[0;32mDone! \x1b[0;2m(${time} ms) \x1b[0m\n`)
+        } else {
+            process.stdout.write(`\r${msgFn()} [${pc}] `);
+        }
+        return val;
+    })));
+}
diff --git a/src/util/colors.js b/src/util/colors.js
new file mode 100644
index 0000000..1df591b
--- /dev/null
+++ b/src/util/colors.js
@@ -0,0 +1,47 @@
+// Color and theming utility functions! Handy.
+
+// Graciously stolen from https://stackoverflow.com/a/54071699! ::::)
+// in: r,g,b in [0,1], out: h in [0,360) and s,l in [0,1]
+export function rgb2hsl(r, g, b) {
+    let a=Math.max(r,g,b), n=a-Math.min(r,g,b), f=(1-Math.abs(a+a-n-1));
+    let h= n && ((a==r) ? (g-b)/n : ((a==g) ? 2+(b-r)/n : 4+(r-g)/n));
+    return [60*(h<0?h+6:h), f ? n/f : 0, (a+a-n)/2];
+}
+
+export function getColors(primary) {
+    const [ r, g, b ] = primary.slice(1)
+        .match(/[0-9a-fA-F]{2,2}/g)
+        .slice(0, 3)
+        .map(val => parseInt(val, 16) / 255);
+    const [ h, s, l ] = rgb2hsl(r, g, b);
+    const dim = `hsl(${Math.round(h)}deg, ${Math.round(s * 50)}%, ${Math.round(l * 80)}%)`;
+
+    return {primary, dim};
+}
+
+export function getLinkThemeString(color) {
+    if (!color) return '';
+
+    const { primary, dim } = getColors(color);
+    return `--primary-color: ${primary}; --dim-color: ${dim}`;
+}
+
+export function getThemeString(color, additionalVariables = []) {
+    if (!color) return '';
+
+    const { primary, dim } = getColors(color);
+
+    const variables = [
+        `--primary-color: ${primary}`,
+        `--dim-color: ${dim}`,
+        ...additionalVariables
+    ].filter(Boolean);
+
+    if (!variables.length) return '';
+
+    return (
+        `:root {\n` +
+        variables.map(line => `    ` + line + ';\n').join('') +
+        `}`
+    );
+}
diff --git a/src/util/html.js b/src/util/html.js
new file mode 100644
index 0000000..4895301
--- /dev/null
+++ b/src/util/html.js
@@ -0,0 +1,92 @@
+// Some really simple functions for formatting HTML content.
+
+// Non-comprehensive. ::::P
+export const selfClosingTags = ['br', 'img'];
+
+// Pass to tag() as an attri8utes key to make tag() return a 8lank string
+// if the provided content is empty. Useful for when you'll only 8e showing
+// an element according to the presence of content that would 8elong there.
+export const onlyIfContent = Symbol();
+
+export function tag(tagName, ...args) {
+    const selfClosing = selfClosingTags.includes(tagName);
+
+    let openTag;
+    let content;
+    let attrs;
+
+    if (typeof args[0] === 'object' && !Array.isArray(args[0])) {
+        attrs = args[0];
+        content = args[1];
+    } else {
+        content = args[0];
+    }
+
+    if (selfClosing && content) {
+        throw new Error(`Tag <${tagName}> is self-closing but got content!`);
+    }
+
+    if (attrs?.[onlyIfContent] && !content) {
+        return '';
+    }
+
+    if (attrs) {
+        const attrString = attributes(args[0]);
+        if (attrString) {
+            openTag = `${tagName} ${attrString}`;
+        }
+    }
+
+    if (!openTag) {
+        openTag = tagName;
+    }
+
+    if (Array.isArray(content)) {
+        content = content.filter(Boolean).join('\n');
+    }
+
+    if (content) {
+        if (content.includes('\n')) {
+            return (
+                `<${openTag}>\n` +
+                content.split('\n').map(line => '    ' + line + '\n').join('') +
+                `</${tagName}>`
+            );
+        } else {
+            return `<${openTag}>${content}</${tagName}>`;
+        }
+    } else {
+        if (selfClosing) {
+            return `<${openTag}>`;
+        } else {
+            return `<${openTag}></${tagName}>`;
+        }
+    }
+}
+
+export function escapeAttributeValue(value) {
+    return value
+        .replaceAll('"', '&quot;')
+        .replaceAll("'", '&apos;');
+}
+
+export function attributes(attribs) {
+    return Object.entries(attribs)
+        .map(([ key, val ]) => {
+            if (!val)
+                return [key, val];
+            else if (typeof val === 'string' || typeof val === 'boolean')
+                return [key, val];
+            else if (typeof val === 'number')
+                return [key, val.toString()];
+            else if (Array.isArray(val))
+                return [key, val.join(' ')];
+            else
+                throw new Error(`Attribute value for ${key} should be primitive or array, got ${typeof val}`);
+        })
+        .filter(([ key, val ]) => val)
+        .map(([ key, val ]) => (typeof val === 'boolean'
+            ? `${key}`
+            : `${key}="${escapeAttributeValue(val)}"`))
+        .join(' ');
+}
diff --git a/src/util/link.js b/src/util/link.js
new file mode 100644
index 0000000..e5c3c59
--- /dev/null
+++ b/src/util/link.js
@@ -0,0 +1,67 @@
+// This file is essentially one level of a8straction a8ove urls.js (and the
+// urlSpec it gets its paths from). It's a 8unch of utility functions which
+// take certain types of wiki data o8jects (colloquially known as "things")
+// and return actual <a href> HTML link tags.
+//
+// The functions we're cre8ting here (all factory-style) take a "to" argument,
+// which is roughly a function which takes a urlSpec key and spits out a path
+// to 8e stuck in an href or src or suchever. There are also a few other
+// options availa8le in all the functions, making a common interface for
+// gener8ting just a8out any link on the site.
+
+import * as html from './html.js'
+import { getLinkThemeString } from './colors.js'
+
+const linkHelper = (hrefFn, {color = true, attr = null} = {}) =>
+    (thing, {
+        strings, to,
+        text = '',
+        class: className = '',
+        hash = ''
+    }) => (
+        html.tag('a', {
+            ...attr ? attr(thing) : {},
+            href: hrefFn(thing, {to}) + (hash ? (hash.startsWith('#') ? '' : '#') + hash : ''),
+            style: color ? getLinkThemeString(thing.color) : '',
+            class: className
+        }, text || thing.name)
+    );
+
+const linkDirectory = (key, {expose = null, attr = null, ...conf} = {}) =>
+    linkHelper((thing, {to}) => to('localized.' + key, thing.directory), {
+        attr: thing => ({
+            ...attr ? attr(thing) : {},
+            ...expose ? {[expose]: thing.directory} : {}
+        }),
+        ...conf
+    });
+
+const linkPathname = (key, conf) => linkHelper(({directory: pathname}, {to}) => to(key, pathname), conf);
+const linkIndex = (key, conf) => linkHelper((_, {to}) => to('localized.' + key), conf);
+
+const link = {
+    album: linkDirectory('album'),
+    albumCommentary: linkDirectory('albumCommentary'),
+    artist: linkDirectory('artist', {color: false}),
+    artistGallery: linkDirectory('artistGallery', {color: false}),
+    commentaryIndex: linkIndex('commentaryIndex', {color: false}),
+    flashIndex: linkIndex('flashIndex', {color: false}),
+    flash: linkDirectory('flash'),
+    groupInfo: linkDirectory('groupInfo'),
+    groupGallery: linkDirectory('groupGallery'),
+    home: linkIndex('home', {color: false}),
+    listingIndex: linkIndex('listingIndex'),
+    listing: linkDirectory('listing'),
+    newsIndex: linkIndex('newsIndex', {color: false}),
+    newsEntry: linkDirectory('newsEntry', {color: false}),
+    staticPage: linkDirectory('staticPage', {color: false}),
+    tag: linkDirectory('tag'),
+    track: linkDirectory('track', {expose: 'data-track'}),
+
+    media: linkPathname('media.path', {color: false}),
+    root: linkPathname('shared.path', {color: false}),
+    data: linkPathname('data.path', {color: false}),
+    site: linkPathname('localized.path', {color: false})
+};
+
+export default link;
diff --git a/src/util/node-utils.js b/src/util/node-utils.js
new file mode 100644
index 0000000..d660612
--- /dev/null
+++ b/src/util/node-utils.js
@@ -0,0 +1,27 @@
+// Utility functions which are only relevant to particular Node.js constructs.
+
+// Very cool function origin8ting in... http-music pro8a8ly!
+// Sorry if we happen to 8e violating past-us's copyright, lmao.
+export function promisifyProcess(proc, showLogging = true) {
+    // Takes a process (from the child_process module) and returns a promise
+    // that resolves when the process exits (or rejects, if the exit code is
+    // non-zero).
+    //
+    // Ayy look, no alpha8etical second letter! Couldn't tell this was written
+    // like three years ago 8efore I was me. 8888)
+
+    return new Promise((resolve, reject) => {
+        if (showLogging) {
+            proc.stdout.pipe(process.stdout);
+            proc.stderr.pipe(process.stderr);
+        }
+
+        proc.on('exit', code => {
+            if (code === 0) {
+                resolve();
+            } else {
+                reject(code);
+            }
+        })
+    })
+}
diff --git a/src/util/sugar.js b/src/util/sugar.js
new file mode 100644
index 0000000..9970bad
--- /dev/null
+++ b/src/util/sugar.js
@@ -0,0 +1,70 @@
+// Syntactic sugar! (Mostly.)
+// Generic functions - these are useful just a8out everywhere.
+//
+// Friendly(!) disclaimer: these utility functions haven't 8een tested all that
+// much. Do not assume it will do exactly what you want it to do in all cases.
+// It will likely only do exactly what I want it to, and only in the cases I
+// decided were relevant enough to 8other handling.
+
+// Apparently JavaScript doesn't come with a function to split an array into
+// chunks! Weird. Anyway, this is an awesome place to use a generator, even
+// though we don't really make use of the 8enefits of generators any time we
+// actually use this. 8ut it's still awesome, 8ecause I say so.
+export function* splitArray(array, fn) {
+    let lastIndex = 0;
+    while (lastIndex < array.length) {
+        let nextIndex = array.findIndex((item, index) => index >= lastIndex && fn(item));
+        if (nextIndex === -1) {
+            nextIndex = array.length;
+        }
+        yield array.slice(lastIndex, nextIndex);
+        // Plus one because we don't want to include the dividing line in the
+        // next array we yield.
+        lastIndex = nextIndex + 1;
+    }
+};
+
+export const mapInPlace = (array, fn) => array.splice(0, array.length, ...array.map(fn));
+
+export const filterEmptyLines = string => string.split('\n').filter(line => line.trim()).join('\n');
+
+export const unique = arr => Array.from(new Set(arr));
+
+// Stolen from jq! Which pro8a8ly stole the concept from other places. Nice.
+export const withEntries = (obj, fn) => Object.fromEntries(fn(Object.entries(obj)));
+
+// Nothin' more to it than what it says. Runs a function in-place. Provides an
+// altern8tive syntax to the usual IIFEs (e.g. (() => {})()) when you want to
+// open a scope and run some statements while inside an existing expression.
+export const call = fn => fn();
+
+export function queue(array, max = 50) {
+    if (max === 0) {
+        return array.map(fn => fn());
+    }
+
+    const begin = [];
+    let current = 0;
+    const ret = array.map(fn => new Promise((resolve, reject) => {
+        begin.push(() => {
+            current++;
+            Promise.resolve(fn()).then(value => {
+                current--;
+                if (current < max && begin.length) {
+                    begin.shift()();
+                }
+                resolve(value);
+            }, reject);
+        });
+    }));
+
+    for (let i = 0; i < max && begin.length; i++) {
+        begin.shift()();
+    }
+
+    return ret;
+}
+
+export function delay(ms) {
+    return new Promise(res => setTimeout(res, ms));
+}
diff --git a/src/util/urls.js b/src/util/urls.js
new file mode 100644
index 0000000..f0f9cdb
--- /dev/null
+++ b/src/util/urls.js
@@ -0,0 +1,102 @@
+// Code that deals with URLs (really the pathnames that get referenced all
+// throughout the gener8ted HTML). Most nota8ly here is generateURLs, which
+// is in charge of pre-gener8ting a complete network of template strings
+// which can really quickly take su8stitute parameters to link from any one
+// place to another; 8ut there are also a few other utilities, too.
+//
+// Nota8ly, everything here is string-8ased, for gener8ting and transforming
+// actual path strings. More a8stract operations using wiki data o8jects is
+// the domain of link.js.
+
+import * as path from 'path';
+import { withEntries } from './sugar.js';
+
+export function generateURLs(urlSpec) {
+    const getValueForFullKey = (obj, fullKey, prop = null) => {
+        const [ groupKey, subKey ] = fullKey.split('.');
+        if (!groupKey || !subKey) {
+            throw new Error(`Expected group key and subkey (got ${fullKey})`);
+        }
+
+        if (!obj.hasOwnProperty(groupKey)) {
+            throw new Error(`Expected valid group key (got ${groupKey})`);
+        }
+
+        const group = obj[groupKey];
+
+        if (!group.hasOwnProperty(subKey)) {
+            throw new Error(`Expected valid subkey (got ${subKey} for group ${groupKey})`);
+        }
+
+        return {
+            value: group[subKey],
+            group
+        };
+    };
+
+    const generateTo = (fromPath, fromGroup) => {
+        const rebasePrefix = '../'.repeat((fromGroup.prefix || '').split('/').filter(Boolean).length);
+
+        const pathHelper = (toPath, toGroup) => {
+            let target = toPath;
+
+            let argIndex = 0;
+            target = target.replaceAll('<>', () => `<${argIndex++}>`);
+
+            if (toGroup.prefix !== fromGroup.prefix) {
+                // TODO: Handle differing domains in prefixes.
+                target = rebasePrefix + (toGroup.prefix || '') + target;
+            }
+
+            return (path.relative(fromPath, target)
+                + (toPath.endsWith('/') ? '/' : ''));
+        };
+
+        const groupSymbol = Symbol();
+
+        const groupHelper = urlGroup => ({
+            [groupSymbol]: urlGroup,
+            ...withEntries(urlGroup.paths, entries => entries
+                .map(([key, path]) => [key, pathHelper(path, urlGroup)]))
+        });
+
+        const relative = withEntries(urlSpec, entries => entries
+            .map(([key, urlGroup]) => [key, groupHelper(urlGroup)]));
+
+        const to = (key, ...args) => {
+            const { value: template, group: {[groupSymbol]: toGroup} } = getValueForFullKey(relative, key)
+            let result = template.replaceAll(/<([0-9]+)>/g, (match, n) => args[n]);
+
+            // Kinda hacky lol, 8ut it works.
+            const missing = result.match(/<([0-9]+)>/g);
+            if (missing) {
+                throw new Error(`Expected ${missing[missing.length - 1]} arguments, got ${args.length}`);
+            }
+
+            return result;
+        };
+
+        return {to, relative};
+    };
+
+    const generateFrom = () => {
+        const map = withEntries(urlSpec, entries => entries
+            .map(([key, group]) => [key, withEntries(group.paths, entries => entries
+                .map(([key, path]) => [key, generateTo(path, group)])
+            )]));
+
+        const from = key => getValueForFullKey(map, key).value;
+
+        return {from, map};
+    };
+
+    return generateFrom();
+}
+
+const thumbnailHelper = name => file =>
+    file.replace(/\.(jpg|png)$/, name + '.jpg');
+
+export const thumb = {
+    medium: thumbnailHelper('.medium'),
+    small: thumbnailHelper('.small')
+};
diff --git a/src/util/wiki-data.js b/src/util/wiki-data.js
new file mode 100644
index 0000000..e76722b
--- /dev/null
+++ b/src/util/wiki-data.js
@@ -0,0 +1,126 @@
+// Utility functions for interacting with wiki data.
+
+// Generic value operations
+
+export function getKebabCase(name) {
+    return name
+        .split(' ')
+        .join('-')
+        .replace(/&/g, 'and')
+        .replace(/[^a-zA-Z0-9\-]/g, '')
+        .replace(/-{2,}/g, '-')
+        .replace(/^-+|-+$/g, '')
+        .toLowerCase();
+}
+
+export function chunkByConditions(array, conditions) {
+    if (array.length === 0) {
+        return [];
+    } else if (conditions.length === 0) {
+        return [array];
+    }
+
+    const out = [];
+    let cur = [array[0]];
+    for (let i = 1; i < array.length; i++) {
+        const item = array[i];
+        const prev = array[i - 1];
+        let chunk = false;
+        for (const condition of conditions) {
+            if (condition(item, prev)) {
+                chunk = true;
+                break;
+            }
+        }
+        if (chunk) {
+            out.push(cur);
+            cur = [item];
+        } else {
+            cur.push(item);
+        }
+    }
+    out.push(cur);
+    return out;
+}
+
+export function chunkByProperties(array, properties) {
+    return chunkByConditions(array, properties.map(p => (a, b) => {
+        if (a[p] instanceof Date && b[p] instanceof Date)
+            return +a[p] !== +b[p];
+
+        if (a[p] !== b[p]) return true;
+
+        // Not sure if this line is still necessary with the specific check for
+        // d8tes a8ove, 8ut, uh, keeping it anyway, just in case....?
+        if (a[p] != b[p]) return true;
+
+        return false;
+    }))
+        .map(chunk => ({
+            ...Object.fromEntries(properties.map(p => [p, chunk[0][p]])),
+            chunk
+        }));
+}
+
+// Sorting functions
+
+export function sortByName(a, b) {
+    let an = a.name.toLowerCase();
+    let bn = b.name.toLowerCase();
+    if (an.startsWith('the ')) an = an.slice(4);
+    if (bn.startsWith('the ')) bn = bn.slice(4);
+    return an < bn ? -1 : an > bn ? 1 : 0;
+}
+
+// This function was originally made to sort just al8um data, 8ut its exact
+// code works fine for sorting tracks too, so I made the varia8les and names
+// more general.
+export function sortByDate(data) {
+    // Just to 8e clear: sort is a mutating function! I only return the array
+    // 8ecause then you don't have to define it as a separate varia8le 8efore
+    // passing it into this function.
+    return data.sort((a, b) => a.date - b.date);
+}
+
+// Same details as the sortByDate, 8ut for covers~
+export function sortByArtDate(data) {
+    return data.sort((a, b) => (a.coverArtDate || a.date) - (b.coverArtDate || b.date));
+}
+
+// Specific data utilities
+
+// This gets all the track o8jects defined in every al8um, and sorts them 8y
+// date released. Generally, albumData will pro8a8ly already 8e sorted 8efore
+// you pass it to this function, 8ut individual tracks can have their own
+// original release d8, distinct from the al8um's d8. I allowed that 8ecause
+// in Homestuck, the first four Vol.'s were com8ined into one al8um really
+// early in the history of the 8andcamp, and I still want to use that as the
+// al8um listing (not the original four al8um listings), 8ut if I only did
+// that, all the tracks would 8e sorted as though they were released at the
+// same time as the compilation al8um - i.e, after some other al8ums (including
+// Vol.'s 5 and 6!) were released. That would mess with chronological listings
+// including tracks from multiple al8ums, like artist pages. So, to fix that,
+// I gave tracks an Original Date field, defaulting to the release date of the
+// al8um if not specified. Pretty reasona8le, I think! Oh, and this feature can
+// 8e used for other projects too, like if you wanted to have an al8um listing
+// compiling a 8unch of songs with radically different & interspersed release
+// d8s, 8ut still keep the al8um listing in a specific order, since that isn't
+// sorted 8y date.
+export function getAllTracks(albumData) {
+    return sortByDate(albumData.flatMap(album => album.tracks));
+}
+
+export function getArtistNumContributions(artist) {
+    return (
+        artist.tracks.asAny.length +
+        artist.albums.asCoverArtist.length +
+        (artist.flashes ? artist.flashes.asContributor.length : 0)
+    );
+}
+
+export function getArtistCommentary(artist, {justEverythingMan}) {
+    return justEverythingMan.filter(thing =>
+        (thing?.commentary
+            .replace(/<\/?b>/g, '')
+            .includes('<i>' + artist.name + ':</i>')));
+}