Update dependencies and fix linting issues.

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

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({