Large refactor + port client to TS + sidebar article div

package.json

@@ -5,8 +5,10 @@
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "build-ts": "tsc",
-        "build": "node build/index.js",
-        "dev": "npm run build-ts && npm run build && wrangler pages dev public",
+        "build": "node build/exporter/index.js",
+        "package": "webpack --config webpack.config.js --mode=production",
+        "package-dev": "webpack --config webpack.config.js --mode=development",
+        "dev": "npm run build-ts && npm run build && npm run package-dev && wrangler pages dev public",
         "start": "npm run dev",
         "format:fix": "prettier --write {assets,src}/**/*.{ts,js,scss,css}",
         "format:check": "prettier --check {assets,src}/**/*.{ts,js,scss,css}",
@@ -40,8 +42,10 @@
         "markdown-it-container": "^3.0.0",
         "markdown-it-emoji": "^2.0.2",
         "markdown-it-front-matter": "^0.2.3",
+        "ts-loader": "^9.5.1",
         "twemoji": "^14.0.2",
         "typescript": "^4.9.5",
+        "webpack": "^5.89.0",
         "yaml": "^2.2.1"
     },
     "devDependencies": {
@@ -60,6 +64,7 @@
         "lint-staged": "^13.1.2",
         "prettier": "^2.8.4",
         "prettier-eslint": "^15.0.1",
+        "webpack-cli": "^5.1.4",
         "wrangler": "^2.9.1"
     }
 }

static/resources/js/.eslintrc.js → src/client/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-    extends: ['../../../.eslintrc.js'],
+    extends: ['../../.eslintrc.js'],
     rules: {
         // We don't have a proper import system so ESLint can't find stuff from separate files even if in same
         // JS scope.

static/resources/js/anchors.js → src/client/anchors.ts

@@ -1,21 +1,26 @@
-function anchorHeaderFix() {
+export function anchorHeaderFix() {
     document.scrollingElement.scrollTop -=
         document.querySelector('.top-nav').getBoundingClientRect().height + window.innerHeight / 10;
 }
 
-function addAnchorLinks() {
+function copyAnchor(e: MouseEvent) {
+    // Suppress the navigation
+    e.preventDefault();
+
+    // Copy to clipboard
+    navigator.clipboard.writeText((e.target as HTMLAnchorElement).href);
+}
+
+export function addAnchorLinks() {
     const headings = document.querySelectorAll(
         '#content h1, #content h2, #content h3, #content h4, #content h5, #content h6'
     );
     for (const heading of headings) {
         const btn = document.createElement('a');
         btn.classList.add('anchor-copy', 'mdi', 'mdi-link-variant');
-        btn.href = `javascript:copyAnchor("${heading.id}")`;
+        btn.href = `#${heading.id}`;
+        btn.onclick = copyAnchor;
         btn.title = 'Click to copy anchor';
         heading.append(btn);
     }
 }
-
-function copyAnchor(id) {
-    navigator.clipboard.writeText(location.href + '#' + id);
-}

src/client/gameselector.ts

@@ -0,0 +1,86 @@
+import { Slug } from '../common/slug';
+import { MenuGame } from '../common/types';
+import { navigate, getLocationSlug } from './navigation';
+import { notify } from './notices';
+
+export class GameSelector {
+    dialogBox: HTMLDialogElement;
+    closeButton: HTMLButtonElement;
+    openButton: HTMLButtonElement;
+
+    constructor() {
+        // Grab the elements we'll be using
+        this.dialogBox = document.querySelector<HTMLDialogElement>('#gameSelector');
+        this.closeButton = document.querySelector<HTMLButtonElement>('#gameSelector .close');
+        this.openButton = document.querySelector<HTMLButtonElement>('.show-game-selector');
+
+        // Hook up the button events
+        this.closeButton.addEventListener('click', () => this.hide());
+        this.openButton.addEventListener('click', () => this.show());
+    }
+
+    /**
+     * Opens the Game Selector
+     * @param closeable Whether or not to display the close button
+     */
+    show(closeable = true) {
+        this.closeButton.style.display = closeable ? 'block' : 'none';
+        this.dialogBox.showModal();
+    }
+
+    /**
+     * Closes the Game Selector
+     */
+    hide() {
+        this.dialogBox.close();
+        this.closeButton.style.display = '';
+    }
+
+    /**
+     * Populates the Game Selector with buttons
+     * @param games List of available games
+     */
+    regenerate(games: { [game: string]: MenuGame }) {
+        // Grab and clear the selector container
+        const container = document.querySelector('#gameSelector .games');
+        container.innerHTML = '';
+
+        // Generate a button for each game
+        for (const [gameID, game] of Object.entries(games)) {
+            const btn = document.createElement('button');
+            btn.classList.add('game-selector', 'btn');
+            btn.onclick = () => {
+                this.switchGame(gameID);
+            };
+
+            const icon = document.createElement('img');
+            icon.src = game.icon;
+            icon.classList.add('icon');
+            icon.style.background = game.color;
+
+            btn.append(icon);
+
+            const name = document.createElement('span');
+            name.innerText = game.name;
+
+            btn.append(name);
+
+            container.append(btn);
+        }
+    }
+
+    private async switchGame(game: string) {
+        this.hide();
+
+        try {
+            // Get the current location, change the game, and try to navigate to it
+            const l: Slug = getLocationSlug();
+            l.game = game;
+            await navigate(l);
+        } catch {
+            // Failed to navigate! Let's just head back to the game's home page then
+            await navigate(new Slug(game));
+            notify('This page does not exist for this game, so we put you on the homepage.', 'file-document-remove');
+        }
+    }
+}

src/client/index.ts

@@ -0,0 +1,4 @@
+import './anchors';
+import './navigation';
+import './notices';
+import './scrollspy';