Merge pull request #1205 from jonnybarnes/1204-simplify-build-steps

Simplify frontend assests and build steps

package.json

@@ -5,41 +5,17 @@
     "repository": "https://github.com/jonnybarnes/jonnybarnes.uk",
     "license": "CC0-1.0",
     "devDependencies": {
-        "@babel/core": "^7.23.6",
-        "@babel/preset-env": "^7.23.6",
-        "@csstools/postcss-oklab-function": "^3.0.8",
-        "autoprefixer": "^10.4.16",
-        "babel-loader": "^9.1.3",
-        "browserlist": "^1.0.1",
-        "compression-webpack-plugin": "^10.0.0",
-        "css-loader": "^6.8.1",
-        "cssnano": "^6.0.2",
         "eslint": "^8.56.0",
-        "eslint-webpack-plugin": "^4.0.1",
-        "mini-css-extract-plugin": "^2.7.6",
-        "postcss": "^8.4.32",
-        "postcss-combine-duplicated-selectors": "^10.0.2",
-        "postcss-combine-media-query": "^1.0.1",
-        "postcss-import": "^15.1.0",
-        "postcss-loader": "^7.3.3",
-        "postcss-nesting": "^12.0.2",
-        "style-loader": "^3.3.3",
-        "stylelint": "^15.11.0",
-        "stylelint-config-standard": "^34.0.0",
-        "stylelint-webpack-plugin": "^4.1.1",
-        "webpack": "^5.89.0",
-        "webpack-cli": "^5.1.4"
+        "stylelint": "^16.0.2",
+        "stylelint-config-standard": "^35.0.0"
     },
     "scripts": {
-        "dev": "webpack --mode=development",
-        "prod": "webpack --mode=production"
+        "eslint": "eslint public/assets/js/*.js",
+        "stylelint": "stylelint public/assets/css/*.css",
+        "lint": "npm run eslint && npm run stylelint",
+        "compress": "./scripts/compress.sh",
+        "build": "npm run lint && npm run compress"
     },
-    "browserslist": [
-        "last 2 versions",
-        "> 1%",
-        "not IE 11",
-        "not IE_Mob 11"
-    ],
     "dependencies": {
         "@11ty/is-land": "^4.0.0",
         "@zachleat/snow-fall": "^1.0.2"

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;
+  }
+}