Simplify frontend assests and build steps

We just write the files directly in the public dir
Then change the npm scripts to lint and compress them directly

public/assets/app.js

@@ -1 +0,0 @@
-!function(){"use strict";let e=new class{constructor(){}async register(){const e=await this.getCreateOptions(),t={challenge:this.base64URLStringToBuffer(e.challenge),rp:{id:e.rp.id,name:e.rp.name},user:{id:(new TextEncoder).encode(window.atob(e.user.id)),name:e.user.name,displayName:e.user.displayName},pubKeyCredParams:e.pubKeyCredParams,excludeCredentials:[],authenticatorSelection:e.authenticatorSelection,timeout:6e4},a=await navigator.credentials.create({publicKey:t});if(!a)throw new Error("Error generating a passkey");const n={id:a.id?a.id:null,type:a.type?a.type:null,rawId:a.rawId?this.bufferToBase64URLString(a.rawId):null,response:{attestationObject:a.response.attestationObject?this.bufferToBase64URLString(a.response.attestationObject):null,clientDataJSON:a.response.clientDataJSON?this.bufferToBase64URLString(a.response.clientDataJSON):null}};if(!(await window.fetch("/admin/passkeys/register",{method:"POST",body:JSON.stringify(n),cache:"no-cache",headers:{"Content-Type":"application/json","X-CSRF-TOKEN":document.querySelector('meta[name="csrf-token"]').getAttribute("content")}})).ok)throw new Error("Error saving the passkey");window.location.reload()}async getCreateOptions(){const e=await fetch("/admin/passkeys/register",{method:"GET"});return await e.json()}async login(){const e=await this.getLoginData(),t=await navigator.credentials.get({publicKey:{challenge:this.base64URLStringToBuffer(e.challenge),userVerification:e.userVerification,timeout:6e4}});if(!t)throw new Error("Authentication failed");const a={id:t.id?t.id:"",type:t.type?t.type:"",rawId:t.rawId?this.bufferToBase64URLString(t.rawId):"",response:{authenticatorData:t.response.authenticatorData?this.bufferToBase64URLString(t.response.authenticatorData):"",clientDataJSON:t.response.clientDataJSON?this.bufferToBase64URLString(t.response.clientDataJSON):"",signature:t.response.signature?this.bufferToBase64URLString(t.response.signature):"",userHandle:t.response.userHandle?this.bufferToBase64URLString(t.response.userHandle):""}};if(!(await window.fetch("/login/passkey",{method:"POST",body:JSON.stringify(a),headers:{"Content-Type":"application/json","X-CSRF-TOKEN":document.querySelector('meta[name="csrf-token"]').getAttribute("content")}})).ok)throw new Error("Login failed");window.location.assign("/admin")}async getLoginData(){const e=await fetch("/login/passkey",{method:"GET"});return await e.json()}base64URLStringToBuffer(e){const t=e.replace(/-/g,"+").replace(/_/g,"/"),a=(4-t.length%4)%4,n=t.padEnd(t.length+a,"="),r=window.atob(n),i=new ArrayBuffer(r.length),s=new Uint8Array(i);for(let e=0;e<r.length;e++)s[e]=r.charCodeAt(e);return i}bufferToBase64URLString(e){const t=new Uint8Array(e);let a="";for(const e of t)a+=String.fromCharCode(e);return btoa(a).replace(/\+/g,"-").replace(/\//g,"_").replace(/=/g,"")}};document.querySelectorAll(".add-passkey").forEach((t=>{t.addEventListener("click",(()=>{e.register()}))})),document.querySelectorAll(".login-passkey").forEach((t=>{t.addEventListener("click",(()=>{e.login()}))}))}();

public/assets/css/app.css

@@ -0,0 +1,7 @@
+@import url('variables.css');
+@import url('fonts.css');
+@import url('layout.css');
+@import url('colours.css');
+@import url('code.css');
+@import url('content.css');
+@import url('notes.css');

public/assets/css/code.css

@@ -0,0 +1,3 @@
+.hljs {
+  border-radius: .5rem;
+}

public/assets/css/colours.css

@@ -0,0 +1,28 @@
+body {
+  background-color: var(--color-secondary);
+  color: var(--color-primary);
+}
+
+a {
+  color: var(--color-link);
+
+  &:visited {
+    color: var(--color-link-visited);
+  }
+
+  &.auth:visited {
+    color: var(--color-link);
+  }
+}
+
+#site-header {
+  & a:visited {
+    color: var(--color-link);
+  }
+
+  & .rss-icon {
+    & svg {
+      color: var(--rss-color-link);
+    }
+  }
+}

public/assets/css/content.css

@@ -0,0 +1,64 @@
+@import url('h-card.css');
+
+.h-entry {
+  border-inline-start: 1px solid var(--color-primary);
+  padding-inline-start: .5rem;
+
+  & .reply-to {
+    font-style: italic;
+  }
+
+  & .post-info {
+    & a {
+      text-decoration: none;
+    }
+  }
+
+  & .note-metadata {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+
+    & .replies,
+    & .likes,
+    & .reposts {
+      display: inline-flex;
+      flex-direction: row;
+      gap: .5rem;
+      align-items: center;
+    }
+
+    & .syndication-links {
+      flex-flow: row wrap;
+
+      & a {
+        text-decoration: none;
+
+        & svg {
+          width: 1rem;
+          height: 1rem;
+        }
+      }
+    }
+  }
+}
+
+.feather {
+  width: 24px;
+  height: 24px;
+  stroke: currentcolor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  fill: none;
+}
+
+.sr-only {
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

public/assets/css/fonts.css

@@ -0,0 +1,17 @@
+body {
+  font-family: var(--font-family-body);
+  font-size: var(--font-size-md);
+}
+
+code {
+  font-family: var(--font-family-monospace);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-headings);
+}

public/assets/css/h-card.css

@@ -0,0 +1,32 @@
+.h-card {
+  & .hovercard {
+    display: none;
+    position: absolute;
+    z-index: 100;
+    padding: 1rem;
+    border-radius: 1rem;
+    box-shadow: 0 .5rem .5rem .5rem var(--color-primary-shadow);
+    background-color: var(--color-secondary);
+    width: fit-content;
+    transition: opacity 0.5s ease-in-out;
+    opacity: 0;
+    flex-direction: column;
+    gap: .5rem;
+
+    & .u-photo {
+      max-width: 6rem;
+    }
+
+    & .social-icon {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
+  &:hover {
+    & .hovercard {
+      display: flex;
+      opacity: 1;
+    }
+  }
+}

public/assets/css/layout.css

@@ -0,0 +1,55 @@
+.grid {
+  display: grid;
+  grid-template-columns: 5vw 1fr 5vw;
+  grid-template-rows: min-content 1fr min-content;
+  row-gap: 1rem;
+}
+
+#site-header {
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+
+  & .rss-icon {
+    & svg {
+      width: auto;
+      height: 1rem;
+    }
+  }
+}
+
+main {
+  grid-column: 2 / 3;
+  grid-row: 2 / 3;
+}
+
+.h-feed {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+
+.h-entry {
+  & p:first-of-type,
+  & h1:first-of-type {
+    margin-block-start: 0;
+  }
+}
+
+.pagination {
+  margin-block-start: 1rem;
+}
+
+footer {
+  grid-column: 2 / 3;
+  grid-row: 3 / 4;
+
+  & .iwc-logo {
+    max-width: 85vw;
+  }
+
+  & .footer-actions {
+    display: flex;
+    flex-direction: row;
+    gap: 1rem;
+  }
+}

public/assets/css/notes.css

@@ -0,0 +1,38 @@
+main {
+  & > .u-comment {
+    margin-block-start: 2rem;
+    margin-inline-start: 2rem;
+    border-inline-start: 1px solid var(--color-primary);
+    padding-inline-start: .5rem;
+
+    & .mini-h-card {
+      display: inline-flex;
+      flex-direction: row;
+      align-items: baseline;
+
+      & .u-photo {
+        width: 2rem;
+        height: 2rem;
+        border-radius: 50%;
+        margin-block-end: 0.5rem;
+      }
+    }
+  }
+
+  & .notes-subtitle {
+    font-size: 1.2rem;
+    font-weight: 600;
+  }
+
+  & .webmentions-author-list {
+    display: flex;
+    flex-flow: row wrap;
+    gap: 1rem;
+
+    & img {
+      width: 4rem;
+      height: 4rem;
+      border-radius: 50%;
+    }
+  }
+}

public/assets/css/variables.css

@@ -0,0 +1,23 @@
+:root {
+  /* Font Family */
+  --font-family-headings: "Archer SSm A", "Archer SSm B", serif;
+  --font-family-body: "Verlag A", "Verlag B", sans-serif;
+  --font-family-monospace: "Operator Mono SSm A", "Operator Mono SSm B", monospace;
+
+  /* Font Size */
+  --font-size-sm: 0.75rem;   /* 12px */
+  --font-size-base: 1rem;    /* 16px, base */
+  --font-size-md: 1.25rem;   /* 20px */
+  --font-size-lg: 1.5rem;    /* 24px */
+  --font-size-xl: 1.75rem;   /* 28px */
+  --font-size-xxl: 2rem;     /* 32px */
+  --font-size-xxxl: 2.25rem; /* 36px */
+
+  /* Colours */
+  --color-primary: oklch(36.8% 0.1 125.505deg);
+  --color-secondary: oklch(96.3% 0.1 125.505deg);
+  --color-link: oklch(48.09% 0.146 241.41deg);
+  --color-link-visited: oklch(70.44% 0.21 304.41deg);
+  --color-primary-shadow: oklch(19.56% 0.054 125.505deg / 40%);
+  --rss-color-link: oklch(67.59% 0.189 42.04deg);
+}

public/assets/frontend/normalize.css

@@ -1,349 +0,0 @@
-/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
-
-/* Document
-   ========================================================================== */
-
-/**
- * 1. Correct the line height in all browsers.
- * 2. Prevent adjustments of font size after orientation changes in iOS.
- */
-
-html {
-  line-height: 1.15; /* 1 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/* Sections
-   ========================================================================== */
-
-/**
- * Remove the margin in all browsers.
- */
-
-body {
-  margin: 0;
-}
-
-/**
- * Render the `main` element consistently in IE.
- */
-
-main {
-  display: block;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-pre {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * Remove the gray background on active links in IE 10.
- */
-
-a {
-  background-color: transparent;
-}
-
-/**
- * 1. Remove the bottom border in Chrome 57-
- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
- */
-
-abbr[title] {
-  border-bottom: none; /* 1 */
-  text-decoration: underline; /* 2 */
-  text-decoration: underline dotted; /* 2 */
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10.
- */
-
-img {
-  border-style: none;
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change the font styles in all browsers.
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit; /* 1 */
-  font-size: 100%; /* 1 */
-  line-height: 1.15; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-[type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Correct the padding in Firefox.
- */
-
-fieldset {
-  padding: 0.35em 0.75em 0.625em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Remove the default vertical scrollbar in IE 10+.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10.
- * 2. Remove the padding in IE 10.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding in Chrome and Safari on macOS.
- */
-
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}
-
-/* Interactive
-   ========================================================================== */
-
-/*
- * Add the correct display in Edge, IE 10+, and Firefox.
- */
-
-details {
-  display: block;
-}
-
-/*
- * Add the correct display in all browsers.
- */
-
-summary {
-  display: list-item;
-}
-
-/* Misc
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 10+.
- */
-
-template {
-  display: none;
-}
-
-/**
- * Add the correct display in IE 10.
- */
-
-[hidden] {
-  display: none;
-}

public/assets/js/app.js

@@ -0,0 +1,15 @@
+import { Auth } from './auth.js';
+
+let auth = new Auth();
+
+document.querySelectorAll('.add-passkey').forEach((el) => {
+  el.addEventListener('click', () => {
+    auth.register();
+  });
+});
+
+document.querySelectorAll('.login-passkey').forEach((el) => {
+  el.addEventListener('click', () => {
+    auth.login();
+  });
+});

public/assets/js/auth.js

@@ -0,0 +1,167 @@
+class Auth {
+  constructor() {}
+
+  async register() {
+    const createOptions = await this.getCreateOptions();
+
+    const publicKeyCredentialCreationOptions = {
+      challenge: this.base64URLStringToBuffer(createOptions.challenge),
+      rp: {
+        id: createOptions.rp.id,
+        name: createOptions.rp.name,
+      },
+      user: {
+        id: new TextEncoder().encode(window.atob(createOptions.user.id)),
+        name: createOptions.user.name,
+        displayName: createOptions.user.displayName,
+      },
+      pubKeyCredParams: createOptions.pubKeyCredParams,
+      excludeCredentials: [],
+      authenticatorSelection: createOptions.authenticatorSelection,
+      timeout: 60000,
+    };
+
+    const credential = await navigator.credentials.create({
+      publicKey: publicKeyCredentialCreationOptions
+    });
+    if (!credential) {
+      throw new Error('Error generating a passkey');
+    }
+
+    const authenticatorAttestationResponse = {
+      id: credential.id ? credential.id : null,
+      type: credential.type ? credential.type : null,
+      rawId: credential.rawId ? this.bufferToBase64URLString(credential.rawId) : null,
+      response: {
+        attestationObject: credential.response.attestationObject ? this.bufferToBase64URLString(credential.response.attestationObject) : null,
+        clientDataJSON: credential.response.clientDataJSON ? this.bufferToBase64URLString(credential.response.clientDataJSON) : null,
+      }
+    };
+
+    const registerCredential = await window.fetch('/admin/passkeys/register', {
+      method: 'POST',
+      body: JSON.stringify(authenticatorAttestationResponse),
+      cache: 'no-cache',
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+      },
+    });
+
+    if (!registerCredential.ok) {
+      throw new Error('Error saving the passkey');
+    }
+
+    window.location.reload();
+  }
+
+  async getCreateOptions() {
+    const response = await fetch('/admin/passkeys/register', {
+      method: 'GET',
+    });
+
+    return await response.json();
+  }
+
+  async login() {
+    const loginData = await this.getLoginData();
+
+    const publicKeyCredential = await navigator.credentials.get({
+      publicKey: {
+        challenge: this.base64URLStringToBuffer(loginData.challenge),
+        userVerification: loginData.userVerification,
+        timeout: 60000,
+      }
+    });
+
+    if (!publicKeyCredential) {
+      throw new Error('Authentication failed');
+    }
+
+    const authenticatorAttestationResponse = {
+      id: publicKeyCredential.id ? publicKeyCredential.id : '',
+      type: publicKeyCredential.type ? publicKeyCredential.type : '',
+      rawId: publicKeyCredential.rawId ? this.bufferToBase64URLString(publicKeyCredential.rawId) : '',
+      response: {
+        authenticatorData: publicKeyCredential.response.authenticatorData ? this.bufferToBase64URLString(publicKeyCredential.response.authenticatorData) : '',
+        clientDataJSON: publicKeyCredential.response.clientDataJSON ? this.bufferToBase64URLString(publicKeyCredential.response.clientDataJSON) : '',
+        signature: publicKeyCredential.response.signature ? this.bufferToBase64URLString(publicKeyCredential.response.signature) : '',
+        userHandle: publicKeyCredential.response.userHandle ? this.bufferToBase64URLString(publicKeyCredential.response.userHandle) : '',
+      },
+    };
+
+    const loginAttempt = await window.fetch('/login/passkey', {
+      method: 'POST',
+      body: JSON.stringify(authenticatorAttestationResponse),
+      headers: {
+        'Content-Type': 'application/json',
+        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
+      },
+    });
+
+    if (!loginAttempt.ok) {
+      throw new Error('Login failed');
+    }
+
+    window.location.assign('/admin');
+  }
+
+  async getLoginData() {
+    const response = await fetch('/login/passkey', {
+      method: 'GET',
+    });
+
+    return await response.json();
+  }
+
+  /**
+   * Convert a base64 URL string to a buffer.
+   *
+   * Sourced from https://github.com/MasterKale/SimpleWebAuthn/blob/master/packages/browser/src/helpers/base64URLStringToBuffer.ts#L8
+   *
+   * @param {string} base64URLString
+   * @returns {ArrayBuffer}
+   */
+  base64URLStringToBuffer(base64URLString) {
+    // Convert from Base64URL to Base64
+    const base64 = base64URLString.replace(/-/g, '+').replace(/_/g, '/');
+    /**
+     * Pad with '=' until it's a multiple of four
+     * (4 - (85 % 4 = 1) = 3) % 4 = 3 padding
+     * (4 - (86 % 4 = 2) = 2) % 4 = 2 padding
+     * (4 - (87 % 4 = 3) = 1) % 4 = 1 padding
+     * (4 - (88 % 4 = 0) = 4) % 4 = 0 padding
+     */
+    const padLength = (4 - (base64.length % 4)) % 4;
+    const padded = base64.padEnd(base64.length + padLength, '=');
+    // Convert to a binary string
+    const binary = window.atob(padded);
+    // Convert binary string to buffer
+    const buffer = new ArrayBuffer(binary.length);
+    const bytes = new Uint8Array(buffer);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return buffer;
+  }
+
+  /**
+   * Convert a buffer to a base64 URL string.
+   *
+   * Sourced from https://github.com/MasterKale/SimpleWebAuthn/blob/master/packages/browser/src/helpers/bufferToBase64URLString.ts#L7
+   *
+   * @param {ArrayBuffer} buffer
+   * @returns {string}
+   */
+  bufferToBase64URLString(buffer) {
+    const bytes = new Uint8Array(buffer);
+    let str = '';
+    for (const charCode of bytes) {
+      str += String.fromCharCode(charCode);
+    }
+    const base64String = btoa(str);
+    return base64String.replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '');
+  }
+}
+
+export { Auth };