Switch to shareable configs and fix linting issues.

.stylelintrc.json

@@ -1,9 +0,0 @@
-{
-  "extends": [
-    "stylelint-config-standard-scss"
-  ],
-  "rules": {
-    "no-descending-specificity": null,
-    "string-quotes": "single"
-  }
-}

package.json

@@ -13,18 +13,25 @@
     "modern-normalize": "^2.0.0"
   },
   "devDependencies": {
+    "@bauke/eslint-config": "^0.1.5",
+    "@bauke/prettier-config": "^0.1.5",
+    "@bauke/stylelint-config": "^0.1.5",
     "@types/node": "^20.11.5",
     "@types/nunjucks": "^3.2.6",
     "netlify-cli": "^17.14.0",
     "sass": "^1.69.7",
     "stylelint": "^16.1.0",
-    "stylelint-config-standard-scss": "^13.0.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.11",
     "vite-plugin-nunjucks": "^0.2.0",
     "xo": "^0.56.0"
   },
+  "prettier": "@bauke/prettier-config",
+  "stylelint": {
+    "extends": "@bauke/stylelint-config"
+  },
   "xo": {
+    "extends": "@bauke/eslint-config",
     "prettier": true,
     "rules": {
       "@typescript-eslint/consistent-type-definitions": "off"

source/scss/common.scss

@@ -1,4 +1,4 @@
-@use 'reset';
+@use "reset";
 
 html {
   font-size: 62.5%;

source/scss/fangs/fangs.scss

@@ -1,4 +1,4 @@
-@use '../mixins';
+@use "../mixins";
 
 body {
   padding: var(--spacing-16);
@@ -51,7 +51,7 @@ body {
     justify-content: center;
     margin-bottom: var(--spacing-16);
 
-    @media (max-width: 600px) {
+    @media (width < 600px) {
       flex-direction: column;
     }
 

source/scss/home/home.scss

@@ -1,5 +1,5 @@
-@use '../mixins';
-@use 'sections';
+@use "../mixins";
+@use "sections";
 
 .page-header {
   @include mixins.responsive-container;

source/scss/home/sections.scss

@@ -1,4 +1,4 @@
-@use '../mixins';
+@use "../mixins";
 
 .sections {
   @include mixins.responsive-container;

source/scss/mixins.scss

@@ -17,8 +17,8 @@ $large-breakpoint: 1200px;
   &::after {
     --shadow-size: #{$size};
 
-    background: url('/assets/shadow-pattern.png') repeat;
-    content: '';
+    background: url("/assets/shadow-pattern.png") repeat;
+    content: "";
     height: 100%;
     left: var(--shadow-size);
     position: absolute;

source/scss/modern-normalize.scss

@@ -1 +1 @@
-@use '../../node_modules/modern-normalize/modern-normalize.css';
+@use "../../node_modules/modern-normalize/modern-normalize.css";

source/scss/queue/queue.scss

@@ -1,4 +1,4 @@
-@use '../mixins';
+@use "../mixins";
 
 body {
   padding: var(--spacing-16);
@@ -50,7 +50,7 @@ body {
     justify-content: center;
     margin-bottom: var(--spacing-16);
 
-    @media (max-width: 600px) {
+    @media (width < 600px) {
       flex-direction: column;
     }
 

source/scss/re-nav/re-nav.scss

@@ -1,4 +1,4 @@
-@use '../mixins';
+@use "../mixins";
 
 body {
   padding: var(--spacing-16);
@@ -51,7 +51,7 @@ body {
     justify-content: center;
     margin-bottom: var(--spacing-16);
 
-    @media (max-width: 600px) {
+    @media (width < 600px) {
       flex-direction: column;
     }
 

source/ts/common.ts

@@ -1 +1 @@
-import '../../node_modules/@fontsource/inter/latin.css';
+import "../../node_modules/@fontsource/inter/latin.css";

source/ts/re-nav/share.ts

@@ -1,12 +1,12 @@
-import {Base64} from 'js-base64';
+import {Base64} from "js-base64";
 
-const fragmentPrefix = '#json=';
+const fragmentPrefix = "#json=";
 
 const exampleRedirect: Redirect = {
-  matcherType: 'hostname',
-  matcherValue: 'example.com',
-  redirectType: 'hostname',
-  redirectValue: 'example.org',
+  matcherType: "hostname",
+  matcherValue: "example.com",
+  redirectType: "hostname",
+  redirectValue: "example.org",
 };
 
 function decodeBase64<T>(base64: string): T {
@@ -17,8 +17,8 @@ function encodeBase64(source: any): string {
   return Base64.encode(JSON.stringify(source), true);
 }
 
-window.addEventListener('DOMContentLoaded', () => {
-  window['Re-Nav'] = {
+window.addEventListener("DOMContentLoaded", () => {
+  window["Re-Nav"] = {
     decodeBase64,
     encodeBase64,
     share,
@@ -26,11 +26,11 @@ window.addEventListener('DOMContentLoaded', () => {
 
   console.log(
     "Want to manually create a share link? Use the window['Re-Nav'].share",
-    'function, where redirect is an object with matcherType, matcherValue,',
-    'redirectType and redirectValue properties. Like this:',
+    "function, where redirect is an object with matcherType, matcherValue,",
+    "redirectType and redirectValue properties. Like this:",
   );
   console.log(JSON.stringify(exampleRedirect, undefined, 2));
-  console.log(window['Re-Nav'].share);
+  console.log(window["Re-Nav"].share);
 
   if (!location.hash.startsWith(fragmentPrefix)) {
     return;
@@ -43,12 +43,12 @@ window.addEventListener('DOMContentLoaded', () => {
     insertText(key as keyof Redirect, value);
   }
 
-  for (const element of document.querySelectorAll('.hidden-by-default')) {
-    element.classList.remove('hidden-by-default');
+  for (const element of document.querySelectorAll(".hidden-by-default")) {
+    element.classList.remove("hidden-by-default");
   }
 
-  document.querySelector('.subtitle')!.textContent =
-    'Someone shared a redirect with you!';
+  document.querySelector(".subtitle")!.textContent =
+    "Someone shared a redirect with you!";
 });
 
 function insertText(key: keyof Redirect, value: string): void {
@@ -57,14 +57,14 @@ function insertText(key: keyof Redirect, value: string): void {
   };
 
   // eslint-disable-next-line unicorn/prefer-switch
-  if (key === 'matcherType') {
-    insert('.matcher-type', value);
-  } else if (key === 'matcherValue') {
-    insert('.matcher-value', value);
-  } else if (key === 'redirectType') {
-    insert('.redirect-type', value);
-  } else if (key === 'redirectValue') {
-    insert('.redirect-value', value);
+  if (key === "matcherType") {
+    insert(".matcher-type", value);
+  } else if (key === "matcherValue") {
+    insert(".matcher-value", value);
+  } else if (key === "redirectType") {
+    insert(".redirect-type", value);
+  } else if (key === "redirectValue") {
+    insert(".redirect-value", value);
   } else {
     console.warn(`Unknown key: ${key as string}`);
   }

source/types.d.ts

@@ -11,11 +11,11 @@ declare global {
     readonly DEV: boolean;
     readonly MODE: string;
     readonly PROD: boolean;
-    readonly VITE_BROWSER: 'chromium' | 'firefox';
+    readonly VITE_BROWSER: "chromium" | "firefox";
   }
 
   interface Window {
-    'Re-Nav': {
+    "Re-Nav": {
       decodeBase64<T>(base64: string): T;
       encodeBase64(source: any): string;
       share(redirect: Redirect): string;

vite.config.ts

@@ -1,13 +1,11 @@
-import path from 'node:path';
-import url from 'node:url';
+import path from "node:path";
+import {defineConfig} from "vite";
+import nunjucks from "vite-plugin-nunjucks";
 
-import {defineConfig} from 'vite';
+const relative = (input: string) => new URL(input, import.meta.url).pathname;
 
-import nunjucks from 'vite-plugin-nunjucks';
-
-const currentDir = path.dirname(url.fileURLToPath(import.meta.url));
-const buildDir = path.join(currentDir, 'build');
-const sourceDir = path.join(currentDir, 'source');
+const buildDir = relative("build");
+const sourceDir = relative("source");
 
 export default defineConfig({
   build: {
@@ -15,11 +13,11 @@ export default defineConfig({
     outDir: buildDir,
     rollupOptions: {
       input: {
-        fangs: path.join(sourceDir, 'fangs/index.html'),
-        home: path.join(sourceDir, 'index.html'),
-        queue: path.join(sourceDir, 'queue/index.html'),
-        're-nav': path.join(sourceDir, 're-nav/index.html'),
-        're-nav/share': path.join(sourceDir, 're-nav/share/index.html'),
+        fangs: path.join(sourceDir, "fangs/index.html"),
+        home: path.join(sourceDir, "index.html"),
+        queue: path.join(sourceDir, "queue/index.html"),
+        "re-nav": path.join(sourceDir, "re-nav/index.html"),
+        "re-nav/share": path.join(sourceDir, "re-nav/share/index.html"),
       },
     },
     sourcemap: true,
@@ -31,6 +29,6 @@ export default defineConfig({
       },
     }),
   ],
-  publicDir: path.join(sourceDir, 'static'),
+  publicDir: path.join(sourceDir, "static"),
   root: sourceDir,
 });