package updates + image optimization + sourcecode beautification

index.ts

@@ -1,12 +1,15 @@
-import SSSG from "sssg";
+import SSSG, { Plugin } from "sssg";
 import Variables from "sssg/src/plugins/variables";
 import Dev from "sssg/src/plugins/dev";
 import TSCompiler from "sssg/src/plugins/ts-compiler";
-import MarkdownMetadata, {parseMetadata} from "sssg/src/plugins/markdown-metadata";
+import MarkdownMetadata, {
+  parseMetadata,
+} from "sssg/src/plugins/markdown-metadata";
 import MarkdownCompiler from "sssg/src/plugins/markdown-compiler";
 import CompileTimeJS from "sssg/src/plugins/compile-time-js";
+import ImageOptimization from "sssg/src/plugins/image-optimization";
 
-import {$} from "bun"
+import { $ } from "bun";
 
 import * as path from "path";
 import * as fs from "fs";
@@ -16,19 +19,27 @@ const sssg = new SSSG({
   inputFolder: path.join(__dirname, "website"),
 });
 
-const gitLogShell = await $`git log --pretty=format:'commit=%H%nauthor=%aN <%aE>%ndate=%ad%nmessage=%s%n=========' -1`.quiet()
+const gitLogShell =
+  await $`git log --pretty=format:'commit=%H%nauthor=%aN <%aE>%ndate=%ad%nmessage=%s%n=========' -1`.quiet();
 const gitLogOutput = gitLogShell.text("utf8");
 const gitLog = JSON.stringify(parseMetadata(gitLogOutput));
+const plugins: Plugin[] = [];
+
+if (process.argv.includes("--dev")) {
+  plugins.push(new Dev(sssg));
+} else {
+  plugins.push(new ImageOptimization());
+}
 
 await sssg.run({
-  plugins: [
+  plugins: plugins.concat([
     new CompileTimeJS(),
     new Variables(() => {
       const variables: Record<string, string> = {
         __BLOG_POSTS__: JSON.stringify(
           fs.readdirSync("./website/blogs").map((z) => z.replace(".md", ""))
         ),
-        __GIT_LOG_OUTPUT__: gitLog
+        __GIT_LOG_OUTPUT__: gitLog,
       };
 
       if (fs.existsSync("./website/templates")) {
@@ -44,8 +55,7 @@ await sssg.run({
     new TSCompiler(),
     new MarkdownMetadata(),
     new MarkdownCompiler(),
-    new Dev(sssg),
+  ]),
-  ],
 });
 
 await sssg.build();

package.json

@@ -2,10 +2,10 @@
   "name": "website2",
   "module": "index.ts",
   "devDependencies": {
-    "@types/bun": "latest"
+    "@types/bun": "^1.1.8"
   },
   "peerDependencies": {
-    "typescript": "^5.0.0"
+    "typescript": "^5.5.3"
   },
   "scripts": {
     "prod": "bun index.ts --prod",
@@ -14,6 +14,6 @@
   "type": "module",
   "dependencies": {
     "@zip.js/zip.js": "^2.7.52",
-    "sssg": "git+https://git.sad.ovh/sophie/sssg#47ac0b329c1617498fc8e795cbb3d7d36483ff67"
+    "sssg": "git+https://git.sad.ovh/sophie/sssg#7b04c35c946e0fc746eb23b7dbd8f5fe22757ce2"
   }
 }

website/scripts/binkies.ts

@@ -22,20 +22,18 @@ const binky = [
   ["https://windigone.nekoweb.org", "windigone.gif"],
   ["https://eye.nekoweb.org", "eye.gif"],
   ["https://yumeo.nekoweb.org", "yumeo.gif"],
-  ["insane.gif", "piracy.gif", "dsb.gif", "universe.gif"]
+  ["insane.gif", "piracy.gif", "dsb.gif", "universe.gif"],
 ];
 
 binky.forEach((z, i) => {
-  if(i == binky.length-1) {
+  if (i == binky.length - 1) {
-    z.forEach(g => {
+    z.forEach((g) => {
       const img = document.createElement("img");
 
       img.src = `/assets/binkies/${g}`;
-      img.width = 88;
-      img.height = 31;
       img.alt = `!! binkie !!`;
       binkies.appendChild(img);
-    })
+    });
     return;
   }
 

website/scripts/commit.ts

@@ -8,21 +8,20 @@ const commit = document.getElementById("commit");
 const a = document.createElement("a");
 a.href = `https://git.sad.ovh/sophie/website/commit/${git.commit}`;
 
-const h2 = document.createElement("h2")
+const h2 = document.createElement("h2");
 h2.innerText = git.message;
 
 a.appendChild(h2);
 
 const p = document.createElement("p");
-p.innerText = `${timeAgo(date)} -- ${git.date}`
+p.innerText = `${timeAgo(date)} -- ${git.date}`;
 
 const p2 = document.createElement("p");
-p2.innerText = `commit by ${git.author.replace(/[^ ]*@.*/, "")}`
+p2.innerText = `commit by ${git.author.replace(/[^ ]*@.*/, "")}`;
-
-commit?.appendChild(a)
-commit?.appendChild(p)
-commit?.appendChild(p2)
 
+commit?.appendChild(a);
+commit?.appendChild(p);
+commit?.appendChild(p2);
 
 //           <h1>More binkies + thinliquid's logo!! tysm :3</h1>
 //<p>20 minutes ago -- 2024-08-29 22:00:36 GMT+3</p>

website/scripts/lastfm.ts

@@ -47,54 +47,60 @@ const lastFM = {
   apiKey: "816cfe50ddeeb73c9987b85de5c19e71",
   constructUrl: (method: string, parameters: Record<string, any>) => {
     const defaultParams = {
-        format: "json",
+      format: "json",
-        api_key: lastFM.apiKey,
+      api_key: lastFM.apiKey,
-        method
+      method,
-    } 
+    };
 
     Object.assign(parameters, defaultParams);
 
-    return "https://ws.audioscrobbler.com/2.0/?" + new URLSearchParams(parameters).toString()
+    return (
+      "https://ws.audioscrobbler.com/2.0/?" +
+      new URLSearchParams(parameters).toString()
+    );
   },
   getRecentTracks: async (user: string): Promise<GetRecentTracksType> => {
-    const request = await fetch(lastFM.constructUrl("User.getrecenttracks", {user, limit: 1}));
+    const request = await fetch(
+      lastFM.constructUrl("User.getrecenttracks", { user, limit: 1 })
+    );
     return await request.json();
   },
 };
 
 (async () => {
-    const recentTracks = await lastFM.getRecentTracks("yourfriendoss");
+  const recentTracks = await lastFM.getRecentTracks("yourfriendoss");
-    const track = recentTracks.recenttracks.track[0];
+  const track = recentTracks.recenttracks.track[0];
-    if(!track) return;
+  if (!track) return;
-    const lastFMElement = document.getElementById("lastfm")!
+  const lastFMElement = document.getElementById("lastfm")!;
-    lastFMElement.innerHTML = "";
+  lastFMElement.innerHTML = "";
-    const img = document.createElement("img");
+  const img = document.createElement("img");
-    img.width = 174
+  img.width = 174;
-    img.height = 174
+  img.height = 174;
-    img.alt = "last.fm album art"
+  img.alt = "last.fm album art";
-    let imageUrl = track.image.find(z => z.size == "large")?.["#text"];
+  let imageUrl = track.image.find((z) => z.size == "large")?.["#text"];
-    if(!imageUrl) imageUrl = track.image.at(-1)?.["#text"]!;
+  if (!imageUrl) imageUrl = track.image.at(-1)?.["#text"]!;
 
-    img.src = imageUrl;
+  img.src = imageUrl;
-    lastFMElement?.appendChild(img);
+  lastFMElement?.appendChild(img);
 
-    const div = document.createElement("div");
+  const div = document.createElement("div");
-    const h1 = document.createElement("h1");
+  const h1 = document.createElement("h1");
-    const spanArtist = document.createElement("span");
+  const spanArtist = document.createElement("span");
-    const spanTitle = document.createElement("span");
+  const spanTitle = document.createElement("span");
 
-    h1.innerText = track["@attr"]?.nowplaying ? "listening to Now" : "listened to " + timeAgo((+track.date?.uts!)*1000)
+  h1.innerText = track["@attr"]?.nowplaying
-    h1.style.margin = "0";
+    ? "listening to Now"
+    : "listened to " + timeAgo(+track.date?.uts! * 1000);
+  h1.style.margin = "0";
 
-    spanArtist.style.fontSize = "xx-large";
+  spanArtist.style.fontSize = "xx-large";
-    spanTitle.style.fontSize = "x-large";
+  spanTitle.style.fontSize = "x-large";
 
-    spanArtist.innerText = track.artist["#text"];
+  spanArtist.innerText = track.artist["#text"];
-    spanTitle.innerText = track.name;
+  spanTitle.innerText = track.name;
-    
-    div.appendChild(h1)
-    div.appendChild(spanArtist)
-    div.appendChild(spanTitle)
-    lastFMElement?.appendChild(div);
 
+  div.appendChild(h1);
+  div.appendChild(spanArtist);
+  div.appendChild(spanTitle);
+  lastFMElement?.appendChild(div);
 })();

website/scripts/particles.ts

@@ -94,17 +94,21 @@ document.documentElement.addEventListener("mousemove", (event) => {
   particles.push(particle);
 });
 
-document.documentElement.addEventListener("touchmove", function(e) {
+document.documentElement.addEventListener(
-  for(let i = 0; i < e.touches.length; i++) {
+  "touchmove",
-    if (Date.now() - lastMoveTimestamp < 50) {
+  function (e) {
-      return;
+    for (let i = 0; i < e.touches.length; i++) {
+      if (Date.now() - lastMoveTimestamp < 50) {
+        return;
+      }
+
+      lastMoveTimestamp = Date.now();
+      const touch = e.touches.item(i);
+      if (!touch) return;
+
+      const particle = new Particle(touch.pageX, touch.pageY);
+      particles.push(particle);
     }
-  
+  },
-    lastMoveTimestamp = Date.now();
+  false
-    const touch = e.touches.item(i);
+);
-    if(!touch) return;
-
-    const particle = new Particle(touch.pageX, touch.pageY);
-    particles.push(particle);
-  }
-}, false);