Add Nix flake and direnv files.

.envrc

@@ -0,0 +1,3 @@
+#!/usr/bin/env bash
+
+use flake

.gitignore

@@ -1,107 +1,3 @@
-# Logs
+.direnv/
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
-
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
 node_modules/
-jspm_packages/
+public/
-
-# TypeScript v1 declaration files
-typings/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Microbundle cache
-.rpt2_cache/
-.rts2_cache_cjs/
-.rts2_cache_es/
-.rts2_cache_umd/
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.test
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# Next.js build output
-.next
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and *not* Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# TernJS port file
-.tern-port
-
-# Site output directory
-/public/

flake.lock

@@ -0,0 +1,59 @@
+{
+  "nodes": {
+    "flake-utils": {
+      "inputs": {
+        "systems": "systems"
+      },
+      "locked": {
+        "lastModified": 1705309234,
+        "narHash": "sha256-uNRRNRKmJyCRC/8y1RqBkqWBLM034y4qN7EprSdmgyA=",
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "rev": "1ef2e671c3b0c19053962c07dbda38332dcebf26",
+        "type": "github"
+      },
+      "original": {
+        "owner": "numtide",
+        "repo": "flake-utils",
+        "type": "github"
+      }
+    },
+    "nixpkgs": {
+      "locked": {
+        "lastModified": 1705883077,
+        "narHash": "sha256-ByzHHX3KxpU1+V0erFy8jpujTufimh6KaS/Iv3AciHk=",
+        "owner": "NixOS",
+        "repo": "nixpkgs",
+        "rev": "5f5210aa20e343b7e35f40c033000db0ef80d7b9",
+        "type": "github"
+      },
+      "original": {
+        "id": "nixpkgs",
+        "type": "indirect"
+      }
+    },
+    "root": {
+      "inputs": {
+        "flake-utils": "flake-utils",
+        "nixpkgs": "nixpkgs"
+      }
+    },
+    "systems": {
+      "locked": {
+        "lastModified": 1681028828,
+        "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+        "owner": "nix-systems",
+        "repo": "default",
+        "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+        "type": "github"
+      },
+      "original": {
+        "owner": "nix-systems",
+        "repo": "default",
+        "type": "github"
+      }
+    }
+  },
+  "root": "root",
+  "version": 7
+}

flake.nix

@@ -0,0 +1,13 @@
+{
+  inputs.flake-utils.url = "github:numtide/flake-utils";
+
+  outputs = { self, nixpkgs, flake-utils }:
+    flake-utils.lib.eachDefaultSystem (system:
+      let
+        pkgs = nixpkgs.legacyPackages.${system};
+      in
+      {
+        devShells.default = import ./shell.nix { inherit pkgs; };
+      }
+    );
+}

package.json

@@ -13,36 +13,34 @@
     "deploy:netlify": "netlify deploy --prod -d 'public' -s 'href.plus'"
   },
   "dependencies": {
-    "@fontsource/inter": "^4.5.12",
+    "@fontsource/inter": "^5.0.16",
     "htm": "^3.1.1",
-    "modern-normalize": "^1.1.0",
+    "modern-normalize": "^2.0.0",
-    "preact": "^10.11.0",
+    "preact": "^10.19.3",
-    "preact-router": "^4.1.0"
+    "preact-router": "^4.1.2"
   },
   "devDependencies": {
-    "@types/node": "^18.7.23",
+    "@types/node": "^20.11.5",
-    "netlify-cli": "^14.2.1",
+    "netlify-cli": "^17.15.1",
-    "postcss": "^8.4.16",
+    "postcss": "^8.4.33",
-    "sass": "^1.55.0",
+    "sass": "^1.70.0",
-    "stylelint": "^14.13.0",
+    "stylelint": "^16.2.0",
-    "stylelint-config-standard-scss": "^5.0.0",
+    "stylelint-config-standard-scss": "^13.0.0",
-    "typescript": "^4.8.4",
+    "typescript": "^5.3.3",
-    "vite": "^3.1.4",
+    "vite": "^5.0.12",
-    "xo": "^0.52.3"
+    "xo": "^0.56.0"
   },
   "stylelint": {
     "extends": [
       "stylelint-config-standard-scss"
-    ],
+    ]
-    "rules": {
-      "string-quotes": "single"
-    }
   },
   "xo": {
     "prettier": true,
     "rules": {
       "@typescript-eslint/consistent-type-definitions": "off",
       "@typescript-eslint/consistent-type-imports": "off",
+      "@typescript-eslint/no-unsafe-declaration-merging": "off",
       "n/file-extension-in-import": "off"
     },
     "space": true

shell.nix

@@ -0,0 +1,7 @@
+{ pkgs ? import <nixpkgs> { } }:
+
+with pkgs;
+
+mkShell rec {
+  packages = [ cargo-make nodejs nodePackages.pnpm ];
+}

source/ts/components/search-bar.ts

@@ -1,5 +1,4 @@
 import {Component, html} from 'htm/preact';
-
 import debounce from '../utilities/debounce.js';
 import searchReleases, {
   searchLimit,
@@ -74,16 +73,14 @@ export default class SearchBar extends Component<Props, State> {
         `;
       }
 
-      results.push(
+      results.push(html`
-        html`
+        <li>
-          <li>
+          <a class="search-result" href="/release/${result.id}">
-            <a class="search-result" href="/release/${result.id}">
+            <span class="display">${result.artist} - ${result.title}</span>
-              <span class="display">${result.artist} - ${result.title}</span>
+            ${disambiguation}
-              ${disambiguation}
+          </a>
-            </a>
+        </li>
-          </li>
+      `);
-        `,
-      );
     }
 
     const isLoading = this.state.searchState === 'searching';
@@ -101,15 +98,13 @@ export default class SearchBar extends Component<Props, State> {
 
     const resultAmount = this.state.searchResults.length;
     if (resultAmount > 0 && resultAmount % searchLimit === 0) {
-      results.push(
+      results.push(html`
-        html`
+        <li class="search-state">
-          <li class="search-state">
+          <button class="load-more" onClick=${this.searchMore}>
-            <button class="load-more" onClick=${this.searchMore}>
+            Load more…
-              Load more…
+          </button>
-            </button>
+        </li>
-          </li>
+      `);
-        `,
-      );
     }
 
     return html`

source/ts/components/shared-footer.ts

@@ -1,5 +1,4 @@
 import {Component, html} from 'htm/preact';
-
 import ExternalAnchor from './external-anchor.js';
 
 type Props = {

source/ts/pages/home.ts

@@ -1,5 +1,4 @@
 import {Component, html} from 'htm/preact';
-
 import ExternalAnchor from '../components/external-anchor.js';
 import SearchBar from '../components/search-bar.js';
 import SharedFooter from '../components/shared-footer.js';

source/ts/pages/not-found.ts

@@ -1,5 +1,4 @@
 import {Component, html} from 'htm/preact';
-
 import SharedFooter from '../components/shared-footer.js';
 
 export default class NotFoundPage extends Component {

source/ts/pages/release.ts

@@ -1,5 +1,4 @@
 import {Component, html} from 'htm/preact';
-
 import ExternalAnchor from '../components/external-anchor.js';
 import Release from '../utilities/release.js';
 
@@ -94,16 +93,14 @@ export default class ReleasePage extends Component<Props, State> {
       const releaseUrl = `https://musicbrainz.org/release/${mbid}`;
       if (urls.length === 0) {
         const editUrl = `${releaseUrl}/edit`;
-        urls.push(
+        urls.push(html`
-          html`
+          <li class="no-links">
-            <li class="no-links">
+            <p>
-              <p>
+              There are no links for this release yet, consider${' '}
-                There are no links for this release yet, consider${' '}
+              <${ExternalAnchor} url="${editUrl}" text="adding some" />?
-                <${ExternalAnchor} url="${editUrl}" text="adding some" />?
+            </p>
-              </p>
+          </li>
-            </li>
+        `);
-          `,
-        );
       } else {
         urls.push(
           html`<li class="divider"></li>`,

source/ts/pages/settings.ts

@@ -1,5 +1,4 @@
 import {Component, html} from 'htm/preact';
-
 import ExternalAnchor from '../components/external-anchor.js';
 import SharedFooter from '../components/shared-footer.js';
 import {isDebugEnabled} from '../utilities/debug.js';

source/ts/single-page-application.ts

@@ -2,10 +2,8 @@
 // import 'preact/debug';
 
 import '@fontsource/inter/latin.css';
-
 import {html, render} from 'htm/preact';
 import {Router} from 'preact-router';
-
 import HomePage from './pages/home.js';
 import NotFoundPage from './pages/not-found.js';
 import ReleasePage from './pages/release.js';

source/ts/utilities/release.ts

@@ -73,8 +73,8 @@ export default class Release {
         a.isKnown === b.isKnown
           ? a.text.localeCompare(b.text)
           : b.isKnown
-          ? 1 // This return 1 or -1 is because .sort() expects a number.
+            ? 1 // This return 1 or -1 is because .sort() expects a number.
-          : -1,
+            : -1,
       );
 
     return new Release({