idk i found the deno lint and fmt commands

.forgejo/workflows/deploy.yaml

···
       - main
       - astra/ci
 
-
 jobs:
   deploy:
     name: Deploy
···
 
       - name: Copy config file to root
         run: cp overrides/config.ts ./config.ts
-      
+
       - name: Setup Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: '20'
+          node-version: "20"
 
       - name: Setup Deno
         uses: https://github.com/denoland/setup-deno@v2

README.md

···
 # pds-dash
 
-A fork of [pds-dash](https://git.witchcraft.systems/scientific-witchery/pds-dash) for [selfhosted.social](https://selfhosted.social). The top part of the readme is about this fork.
-See after [Original Readme](#original-readme) to see the original readme for setup
+A fork of
+[pds-dash](https://git.witchcraft.systems/scientific-witchery/pds-dash) for
+[selfhosted.social](https://selfhosted.social). The top part of the readme is
+about this fork. See after [Original Readme](#original-readme) to see the
+original readme for setup
 
 This fork is much the same but a few differences:
+
 - [New theme](/themes/dark/theme.css)
-- Uses the CDN for loading images and videos instead of `com.atproto.sync.getBlob`
-- Caches a couple of things like did -> handle and PDS user profile lexicon inside localstorage. Not the best, but was simpler and has a expire on get.
+- Uses the CDN for loading images and videos instead of
+  `com.atproto.sync.getBlob`
+- Caches a couple of things like did -> handle and PDS user profile lexicon
+  inside localstorage. Not the best, but was simpler and has a expire on get.
 - The text "Home to x accounts" only shows active accounts.
 - I did add a sponsor button for my GitHub.
 
-An example of a caddy file you can use 
+An example of a caddy file you can use
+
 ```caddyfile
     # Should be all the endpoints a PDS calls
 	@pds {
···
 		try_files {path} /index.html
 		file_server
 	}
-
 ```
-
 
 # Original Readme
 
···
 
 ### installing
 
-clone the repo, copy `config.ts.example` to `config.ts` and edit it to your liking.
+clone the repo, copy `config.ts.example` to `config.ts` and edit it to your
+liking.
 
 then, install dependencies using deno:
 
···
 
 ## deploying
 
-we use our own CI/CD workflow at [`.forgejo/workflows/deploy.yaml`](.forgejo/workflows/deploy.yaml), but it boils down to building the project bundle and deploying it to a web server. it'll probably make more sense to host it on the same domain as your PDS, but it doesn't affect anything if you host it somewhere else.
+we use our own CI/CD workflow at
+[`.forgejo/workflows/deploy.yaml`](.forgejo/workflows/deploy.yaml), but it boils
+down to building the project bundle and deploying it to a web server. it'll
+probably make more sense to host it on the same domain as your PDS, but it
+doesn't affect anything if you host it somewhere else.
 
 ## configuring
 
-[`config.ts`](config.ts) is the main configuration file, you can find more information in the file itself.
+[`config.ts`](config.ts) is the main configuration file, you can find more
+information in the file itself.
 
 ## theming
 
-themes are located in the `themes/` directory, you can create your own theme by copying one of the existing themes and modifying it to your liking.
+themes are located in the `themes/` directory, you can create your own theme by
+copying one of the existing themes and modifying it to your liking.
 
-currently, the name of the theme is determined by the directory name, and the theme itself is defined in `theme.css` inside that directory.
+currently, the name of the theme is determined by the directory name, and the
+theme itself is defined in `theme.css` inside that directory.
 
 you can switch themes by changing the `theme` property in `config.ts`.
 

deno.lock

···
     "npm:@atcute/bluesky@^2.0.2": "2.0.2_@atcute+client@3.0.1",
     "npm:@atcute/client@^3.0.1": "3.0.1",
     "npm:@atcute/identity-resolver@~0.1.2": "0.1.2_@atcute+identity@0.1.3",
+    "npm:@atproto/api@~0.16.9": "0.16.9",
     "npm:@sveltejs/vite-plugin-svelte@^5.0.3": "5.0.3_svelte@5.28.1__acorn@8.14.1_vite@6.3.2__picomatch@4.0.2",
     "npm:@tsconfig/svelte@^5.0.4": "5.0.4",
     "npm:hls.js@^1.6.12": "1.6.12",
···
         "@badrap/valita"
       ]
     },
+    "@atproto/api@0.16.9": {
+      "integrity": "sha512-hXbnBIDEIwXxxyduxxZsf0aP8Z+JKyfG7L47FZqAYOI6uNm8oBTLLrHQ2RmJZZeyMIMM17gvxNtPDoULKQfupw==",
+      "dependencies": [
+        "@atproto/common-web",
+        "@atproto/lexicon",
+        "@atproto/syntax",
+        "@atproto/xrpc",
+        "await-lock",
+        "multiformats",
+        "tlds",
+        "zod"
+      ]
+    },
+    "@atproto/common-web@0.4.3": {
+      "integrity": "sha512-nRDINmSe4VycJzPo6fP/hEltBcULFxt9Kw7fQk6405FyAWZiTluYHlXOnU7GkQfeUK44OENG1qFTBcmCJ7e8pg==",
+      "dependencies": [
+        "graphemer",
+        "multiformats",
+        "uint8arrays",
+        "zod"
+      ]
+    },
+    "@atproto/lexicon@0.5.1": {
+      "integrity": "sha512-y8AEtYmfgVl4fqFxqXAeGvhesiGkxiy3CWoJIfsFDDdTlZUC8DFnZrYhcqkIop3OlCkkljvpSJi1hbeC1tbi8A==",
+      "dependencies": [
+        "@atproto/common-web",
+        "@atproto/syntax",
+        "iso-datestring-validator",
+        "multiformats",
+        "zod"
+      ]
+    },
+    "@atproto/syntax@0.4.1": {
+      "integrity": "sha512-CJdImtLAiFO+0z3BWTtxwk6aY5w4t8orHTMVJgkf++QRJWTxPbIFko/0hrkADB7n2EruDxDSeAgfUGehpH6ngw=="
+    },
+    "@atproto/xrpc@0.7.5": {
+      "integrity": "sha512-MUYNn5d2hv8yVegRL0ccHvTHAVj5JSnW07bkbiaz96UH45lvYNRVwt44z+yYVnb0/mvBzyD3/ZQ55TRGt7fHkA==",
+      "dependencies": [
+        "@atproto/lexicon",
+        "zod"
+      ]
+    },
     "@badrap/valita@0.4.4": {
       "integrity": "sha512-GEhUCk9c4XbNxi+0YZHZsV4fYNd6HejfWuN4Ti4c02DauX+LyX5WY1Y3WfyZ8Pxxl0zqhs+MLtW98cMh86vv6g=="
     },
···
     "aria-query@5.3.2": {
       "integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="
     },
+    "await-lock@2.2.2": {
+      "integrity": "sha512-aDczADvlvTGajTDjcjpJMqRkOF6Qdz3YbPZm/PyW6tKPkx2hlYBzxMhEywM/tU72HrVZjgl5VCdRuMlA7pZ8Gw=="
+    },
     "axobject-query@4.1.0": {
       "integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ=="
     },
···
       "os": ["darwin"],
       "scripts": true
     },
+    "graphemer@1.4.0": {
+      "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag=="
+    },
     "hls.js@1.6.12": {
       "integrity": "sha512-Pz+7IzvkbAht/zXvwLzA/stUHNqztqKvlLbfpq6ZYU68+gZ+CZMlsbQBPUviRap+3IQ41E39ke7Ia+yvhsehEQ=="
     },
···
         "@types/estree"
       ]
     },
+    "iso-datestring-validator@2.2.2": {
+      "integrity": "sha512-yLEMkBbLZTlVQqOnQ4FiMujR6T4DEcCb1xizmvXS+OxuhwcbtynoosRzdMA69zZCShCNAbi+gJ71FxZBBXx1SA=="
+    },
     "kleur@4.1.5": {
       "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ=="
     },
···
     },
     "ms@2.1.3": {
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
+    },
+    "multiformats@9.9.0": {
+      "integrity": "sha512-HoMUjhH9T8DDBNT+6xzkrd9ga/XiBI4xLr58LJACwK6G3HTOPeMz4nB4KJs33L2BelrIJa7P0VuNaVF3hMYfjg=="
     },
     "mutex-ts@1.2.1": {
       "integrity": "sha512-OkcXgf0viuCgYdnm48kiNQ9PzC5OzISQ261svHr/Ybc2vBYC/5xfLXn44hQ+dYRX74v7MCSqV/LKPEbpYdDybw=="
···
         "picomatch"
       ]
     },
+    "tlds@1.260.0": {
+      "integrity": "sha512-78+28EWBhCEE7qlyaHA9OR3IPvbCLiDh3Ckla593TksfFc9vfTsgvH7eS+dr3o9qr31gwGbogcI16yN91PoRjQ==",
+      "bin": true
+    },
     "typescript@5.7.3": {
       "integrity": "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw==",
       "bin": true
+    },
+    "uint8arrays@3.0.0": {
+      "integrity": "sha512-HRCx0q6O9Bfbp+HHSfQQKD7wU70+lydKVt4EghkdOvlK/NlrF90z+eXV34mUd48rNvVJXwkrMSPpCATkct8fJA==",
+      "dependencies": [
+        "multiformats"
+      ]
     },
     "vite@6.3.2_picomatch@4.0.2": {
       "integrity": "sha512-ZSvGOXKGceizRQIZSz7TGJ0pS3QLlVY/9hwxVh17W3re67je1RKYzFHivZ/t0tubU78Vkyb9WnHPENSBCzbckg==",
···
     },
     "zimmerframe@1.1.2": {
       "integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w=="
+    },
+    "zod@3.25.76": {
+      "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ=="
     }
   },
   "workspace": {
···
         "npm:@atcute/bluesky@^2.0.2",
         "npm:@atcute/client@^3.0.1",
         "npm:@atcute/identity-resolver@~0.1.2",
+        "npm:@atproto/api@~0.16.9",
         "npm:@sveltejs/vite-plugin-svelte@^5.0.3",
         "npm:@tsconfig/svelte@^5.0.4",
         "npm:hls.js@^1.6.12",

index.html

···
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Selfhosted.social</title>
-    <meta name="description" content="Landing page for selfhosted.social, a ATProto PDS">
-
+    <meta
+      name="description"
+      content="Landing page for selfhosted.social, an ATProto PDS"
+    >
   </head>
   <body>
     <div id="app"></div>

package.json

···
     "@atcute/bluesky": "^2.0.2",
     "@atcute/client": "^3.0.1",
     "@atcute/identity-resolver": "^0.1.2",
+    "@atproto/api": "^0.16.9",
     "hls.js": "^1.6.12",
     "moment": "^2.30.1",
     "mutex-ts": "^1.2.1",

src/app.css

···
-@import url('./themes/colors.css');
+@import url("./themes/colors.css");
 body {
   background-color: red;
-}
+}

src/lib/AccountComponent.svelte

···
           src="https://cdn.bsky.app/img/feed_thumbnail/plain/{account.did}/{account.avatarCid}@jpeg"
         />
       </span>
-      <div id="accountName">
-        {account.displayName || account.handle || account.did}
+      <div class="name-block" style="margin-left: 12px;">
+        <div id="accountName" style="margin-left: 0;">
+          {account.displayName || account.handle || account.did}
+        </div>
+        {#if nowListeningTo}
+          <div class="now-playing"><span>{nowListeningTo}</span></div>
+        {/if}
       </div>
     {:else}
       <span class="avatar-wrapper">
···
            src="/unknown.png"
           />
       </span>
-      <div id="accountName" class="no-avatar">
-        {account.displayName || account.handle || account.did}
+      <div class="name-block" style="margin-left: 12px;">
+        <div id="accountName" style="margin-left: 0;">
+          {account.displayName || account.handle || account.did}
+        </div>
+        {#if nowListeningTo}
+          <div class="now-playing"><span>{nowListeningTo}</span></div>
+        {/if}
       </div>
     {/if}
   </div>
 </a>
 
 <style>
-  .avatar-wrapper { position: relative; display: inline-block; }
-  .avatar-badge { position: absolute; top: 34px; left: 40px; font-size: 24px; line-height: 1; }
+  .avatar-wrapper {
+      position: relative;
+      display: inline-block;
+  }
+
+  .avatar-badge {
+      position: absolute;
+      top: 34px;
+      left: 40px;
+      font-size: 24px;
+      line-height: 1;
+  }
+
+  .name-block {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      flex: 1;
+  }
+
+  #accountName {
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+  }
+
+  .now-playing {
+      font-size: 0.8em;
+      opacity: 0.8;
+      margin-top: 2px;
+      white-space: nowrap;
+      overflow: hidden;
+  }
+
+  .now-playing > span {
+      display: inline-block;
+      padding-left: 100%;
+      animation: account-now-playing-marquee 25s linear infinite;
+  }
+
+  @keyframes account-now-playing-marquee {
+      from {
+          transform: translateX(0);
+      }
+      to {
+          transform: translateX(-100%);
+      }
+  }
 </style>

src/lib/PostComponent.svelte

···
           .quotingUri.rkey}">quoting {post.quotingUri.repo}</a
       >
     {/if}
-    <div id="postText">{post.text}</div>
+    <div id="postText">
+        {#each post.richText.segments() as segment}
+            {#if segment.mention}
+                <a href="{Config.FRONTEND_URL}/profile/{segment.mention.did}"
+                    >{segment.text}</a
+                >
+            {:else if segment.link}
+                <a style="text-decoration: underline" href="{segment.link.uri}">{segment.text}</a>
+            {:else if segment.text}
+                {segment.text}
+            {/if}
+        {/each}
+    </div>
     {#if post.imagesCid && post.imagesCid.length > 0}
       <div id="carouselContainer">
         <img

src/lib/pdsfetch.ts

···
 import { simpleFetchHandler, XRPC } from "@atcute/client";
 import "@atcute/bluesky/lexicons";
 import type {
-  AppBskyActorDefs,
   AppBskyActorProfile,
+  AppBskyEmbedImages,
   AppBskyFeedPost,
   At,
   ComAtprotoRepoListRecords,
···
   PlcDidDocumentResolver,
   WebDidDocumentResolver,
 } from "@atcute/identity-resolver";
-import { Config } from "../../config";
-import { Mutex } from "mutex-ts"
+import { Config } from "../../config.ts";
+import { Mutex } from "mutex-ts";
 import moment from "moment";
-import type {DidDocument} from "@atcute/client/utils/did";
+import { RichText } from "@atproto/api";
+
 // import { ComAtprotoRepoListRecords.Record } from "@atcute/client/lexicons";
 // import { AppBskyFeedPost } from "@atcute/client/lexicons";
 // import { AppBskyActorDefs } from "@atcute/client/lexicons";
···
   imagesCid: string[] | null;
   videosLinkCid: string | null;
   gifLink: string | null;
+  richText: RichText;
 
   constructor(
     record: ComAtprotoRepoListRecords.Record,
     account: AccountMetadata,
+    richText: RichText,
   ) {
+    this.richText = richText;
     this.postCid = record.cid;
     this.recordName = processAtUri(record.uri).rkey;
     this.authorDid = account.did;
···
     switch (post.embed?.$type) {
       case "app.bsky.embed.images":
         this.imagesCid = post.embed.images.map(
-          (imageRecord: any) => imageRecord.image.ref.$link,
+          (imageRecord: AppBskyEmbedImages.Image) =>
+            imageRecord.image.ref.$link,
         );
         break;
       case "app.bsky.embed.video":
···
   };
 };
 
-
 const rpc = new XRPC({
   handler: simpleFetchHandler({
     service: Config.PDS_URL,
   }),
 });
 
-const slingShot = new XRPC({
-  handler: simpleFetchHandler({
-    service: "https://slingshot.microcosm.blue",
-  }),
-});
-
 const getDidsFromPDS = async (): Promise<At.Did[]> => {
   const { data } = await rpc.get("com.atproto.sync.listRepos", {
     params: {
-        limit: 1000,
+      limit: 1000,
     },
   });
-    return data.repos.filter(x => x.active).map((repo: any) => repo.did).reverse() as At.Did[];
+  return data.repos.filter((x) => x.active).map((repo: Repo) => repo.did)
+    .reverse() as At.Did[];
 };
 const getAccountMetadata = async (
   did: `did:${string}:${string}`,
···
   const localStorageKey = `did-handle:${did}`;
   const cachedResult = cacheGet<string>(localStorageKey);
   if (cachedResult) {
-      return cachedResult;
+    return cachedResult;
   }
   const doc = await identityResolve(did);
   if (doc.alsoKnownAs) {
···
       return postDate >= cutoffDate;
     });
     if (filtered.length > 0) {
-      postAcc.account.currentCursor = processAtUri(filtered[filtered.length - 1].uri).rkey;
+      postAcc.account.currentCursor =
+        processAtUri(filtered[filtered.length - 1].uri).rkey;
     }
     return {
       posts: filtered,
···
       account.currentCursor = postAcc.account.currentCursor;
     }
     return account;
-  }
-  );
+  });
   // throw the records in a big single array
   let records = recordsCutoff.flatMap((postAcc) => postAcc.posts);
   // sort the records by timestamp
···
         `Account with DID ${processAtUri(record.uri).repo} not found`,
       );
     }
-    return new Post(record, account);
+    const post = record.value as AppBskyFeedPost.Record;
+    const richText = new RichText({ text: post.text, facets: post.facets });
+
+    return new Post(record, account, richText);
   });
   // release the mutex
   release();
···
 };
 
 type artists = {
-    artistName: string;
-}
+  artistName: string;
+};
 
 type dietTeal = {
-    artists: artists[];
-    trackName: string;
-    playedTime: number;
-}
+  artists: artists[];
+  trackName: string;
+  playedTime: number;
+};
 
-const getTealNowListeningTo = async  (did: At.Did) => {
-    const { data } = await rpc.get("com.atproto.repo.listRecords", {
-        params: {
-            repo: did as At.Identifier,
-            collection: "fm.teal.alpha.feed.play",
-            limit: 1
-        },
-    });
-    if (data.records.length > 0) {
-        const record = data.records[0] as ComAtprotoRepoListRecords.Record;
-        const value = record.value as dietTeal;
-        const artists = value.artists.map((artist) => artist.artistName).join(", ");
-        const timeStamp = moment(value.playedTime).isBefore(moment().subtract(1, "month"))
-            ? moment(value.playedTime).format("MMM D, YYYY")
-            : moment(value.playedTime).fromNow()
-        return `Listening to ${value.trackName} by ${artists} ${timeStamp}`;
-    }
-    console.log(data);
-    return null;
-}
+const getTealNowListeningTo = async (did: At.Did) => {
+  const { data } = await rpc.get("com.atproto.repo.listRecords", {
+    params: {
+      repo: did as At.Identifier,
+      collection: "fm.teal.alpha.feed.play",
+      limit: 1,
+    },
+  });
+  if (data.records.length > 0) {
+    const record = data.records[0] as ComAtprotoRepoListRecords.Record;
+    const value = record.value as dietTeal;
+    const artists = value.artists.map((artist) => artist.artistName).join(", ");
+    const timeStamp =
+      moment(value.playedTime).isBefore(moment().subtract(1, "month"))
+        ? moment(value.playedTime).format("MMM D, YYYY")
+        : moment(value.playedTime).fromNow();
+    return `Listening to ${value.trackName} by ${artists} ${timeStamp}`;
+  }
+  console.log(data);
+  return null;
+};
 
 type statusSphere = {
-    status: string;
-}
+  status: string;
+};
 
 const getStatusSphere = async (did: At.Did) => {
-    const { data } = await rpc.get("com.atproto.repo.listRecords", {
-        params: {
-            repo: did as At.Identifier,
-            collection: "xyz.statusphere.status",
-            limit: 1
-        },
-    });
-    if (data.records.length > 0) {
-        const record = data.records[0].value as statusSphere;
-        return record.status;
-    }
-    return null;
-}
+  const { data } = await rpc.get("com.atproto.repo.listRecords", {
+    params: {
+      repo: did as At.Identifier,
+      collection: "xyz.statusphere.status",
+      limit: 1,
+    },
+  });
+  if (data.records.length > 0) {
+    const record = data.records[0].value as statusSphere;
+    return record.status;
+  }
+  return null;
+};
 
 type CacheEntry<T> = {
-    data: T;
-    expire_timestamp: number;
-}
-
+  data: T;
+  expire_timestamp: number;
+};
 
 const cacheSet = <T>(key: string, value: T) => {
-    try{
-        const day = 60 * 60 * 24 * 1000;
-        const cacheData: CacheEntry<T> = {
-            data: value,
-            expire_timestamp: Date.now() + day
-        }
-        localStorage.setItem(key, JSON.stringify(cacheData));
-    }
-    catch(e){
-        console.error("Error caching data:", e);
-        //Going just clear the cache and assume it's full.
-        localStorage.clear();
-    }
-}
+  try {
+    const day = 60 * 60 * 24 * 1000;
+    const cacheData: CacheEntry<T> = {
+      data: value,
+      expire_timestamp: Date.now() + day,
+    };
+    localStorage.setItem(key, JSON.stringify(cacheData));
+  } catch (e) {
+    console.error("Error caching data:", e);
+    //Going just clear the cache and assume it's full.
+    localStorage.clear();
+  }
+};
 
 const cacheGet = <T>(key: string): T | null => {
-    try{
-        const cachedData = localStorage.getItem(key);
-        if (cachedData) {
-            const parsedData = JSON.parse(cachedData) as CacheEntry<T>;
-            if (parsedData.expire_timestamp > Date.now() ) {
-                return parsedData.data;
-            } else {
-                localStorage.removeItem(key);
-            }
-        }
-        //Return null if empty or expired
-        return null;
-    }catch(e){
-        console.error("Error fetching data from cache:", e);
-        return null;
+  try {
+    const cachedData = localStorage.getItem(key);
+    if (cachedData) {
+      const parsedData = JSON.parse(cachedData) as CacheEntry<T>;
+      if (parsedData.expire_timestamp > Date.now()) {
+        return parsedData.data;
+      } else {
+        localStorage.removeItem(key);
+      }
     }
-}
+    //Return null if empty or expired
+    return null;
+  } catch (e) {
+    console.error("Error fetching data from cache:", e);
+    return null;
+  }
+};
 
-export { getAllMetadataFromPds, getNextPosts, Post, blueskyHandleFromDid, getTealNowListeningTo, getStatusSphere };
+export {
+  blueskyHandleFromDid,
+  getAllMetadataFromPds,
+  getNextPosts,
+  getStatusSphere,
+  getTealNowListeningTo,
+  Post,
+};
 export type { AccountMetadata };

themes/dark/theme.css

···
   --header-background-color: var(--color-base-200);
   --content-background-color: var(--color-base-200);
   --text-color: var(--color-base-content);
-  --text-secondary-color: color-mix(in oklab, var(--color-base-content) 70%, var(--color-base-100));
+  --text-secondary-color: color-mix(
+    in oklab,
+    var(--color-base-content) 70%,
+    var(--color-base-100)
+  );
   --border-color: var(--color-base-300);
   --link-color: var(--color-primary);
   --link-hover-color: var(--color-primary-content);
···
   --indicator-active-color: var(--color-primary);
 
   /* Subtle hover background for dark */
-  --button-hover: color-mix(in oklab, var(--color-base-200) 80%, var(--color-base-content));
+  --button-hover: color-mix(
+    in oklab,
+    var(--color-base-200) 80%,
+    var(--color-base-content)
+  );
 }
-
 
 body {
   margin: 0;
···
   min-width: 320px;
   min-height: 100vh;
   background-color: var(--background-color);
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  font-family:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 18px;
   line-height: 1.5;
   color: var(--text-color);
···
 
 #postContainer:hover {
   transform: translateY(-2px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
 #postHeader {
···
   object-fit: cover;
   border-radius: 50%;
   border: 2px solid white;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 /* App.Svelte Layout */
···
   --header-background-color: var(--color-base-200);
   --content-background-color: var(--color-base-200);
   --text-color: var(--color-base-content);
-  --text-secondary-color: color-mix(in oklab, var(--color-base-content) 70%, var(--color-base-100));
+  --text-secondary-color: color-mix(
+    in oklab,
+    var(--color-base-content) 70%,
+    var(--color-base-100)
+  );
   --border-color: var(--color-base-300);
   --link-color: var(--color-primary);
   --link-hover-color: var(--color-primary-content);
···
   --indicator-active-color: var(--color-primary);
 
   /* Subtle hover background for dark */
-  --button-hover: color-mix(in oklab, var(--color-base-200) 80%, var(--color-base-content));
+  --button-hover: color-mix(
+    in oklab,
+    var(--color-base-200) 80%,
+    var(--color-base-content)
+  );
 }

themes/default/theme.css

···
   --border-color: #e2e8f0;
   --indicator-inactive-color: #cbd5e1;
   --indicator-active-color: #6366f1;
-  
+
   /* Modern shadows */
   --button-hover: #f3f4f6;
 }
-
 
 body {
   margin: 0;
···
   min-width: 320px;
   min-height: 100vh;
   background-color: var(--background-color);
-  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
+  font-family:
+    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
   font-size: 18px;
   line-height: 1.5;
   color: var(--text-color);
···
 
 #postContainer:hover {
   transform: translateY(-2px);
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 
 #postHeader {
···
   object-fit: cover;
   border-radius: 50%;
   border: 2px solid white;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 /* App.Svelte Layout */
···
     padding: 12px;
     margin-top: 0;
   }
-  
+
   #Account {
     width: calc(100% - 32px);
     padding: 16px;
···
     height: auto;
     order: -1;
   }
-  
+
   #Feed {
     width: 100%;
     margin: 0;
     padding: 0;
     overflow-y: visible;
   }
-  
+
   #spacer {
     height: 5vh;
   }
···
   -ms-overflow-style: none; /* IE and Edge */
   -webkit-overflow-scrolling: touch;
   -webkit-scrollbar: none; /* Safari */
-}
+}

themes/express/theme.css

···
 }
 
 .no-avatar {
-    margin-left: 40px !important;
+  margin-left: 40px !important;
 }
 
 /* App.Svelte */

themes/witchcraft/theme.css

···
 :root {
   /* Color overrides, edit to whatever you want */
   --primary-h: 260; /* Hue */
-  
+
   --link-color: hsl(calc(var(--primary-h) - 30), 75%, 60%);
   --link-hover-color: hsl(calc(var(--primary-h) - 30), 75%, 50%);
   --background-color: hsl(var(--primary-h), 75%, 10%);
···
   --indicator-inactive-color: #4a4a4a;
   --indicator-active-color: var(--border-color);
 }
-
 
 a {
   font-weight: 500;
···
   white-space: nowrap;
 }
 
-
 .no-avatar {
-    margin-left: 70px !important;
+  margin-left: 70px !important;
 }
 
 /* App.Svelte */
···
   -ms-overflow-style: none; /* IE and Edge */
   -webkit-overflow-scrolling: touch;
   -webkit-scrollbar: none; /* Safari */
-}
+}

theming.ts

···
-import { Plugin } from 'vite';
-import { Config } from './config';
-
+import { Plugin } from "vite";
+import { Config } from "./config";
 
 // Replaces app.css with the contents of the file specified in the
 // config file.
 export const themePlugin = (): Plugin => {
-    const themeFolder = Config.THEME;
-    console.log(`Using theme folder: ${themeFolder}`);
-    return {
-        name: 'theme-generator',
-        enforce: 'pre', // Ensure this plugin runs first
-        transform(code, id) {
-            if (id.endsWith('app.css')) {
-                // Read the theme file and replace the contents of app.css with it
-                // Needs full path to the file
-                const themeCode = Deno.readTextFileSync(Deno.cwd() + '/themes/' + themeFolder + '/theme.css');
-                // Replace the contents of app.css with the theme code
+  const themeFolder = Config.THEME;
+  console.log(`Using theme folder: ${themeFolder}`);
+  return {
+    name: "theme-generator",
+    enforce: "pre", // Ensure this plugin runs first
+    transform(_code, id) {
+      if (id.endsWith("app.css")) {
+        // Read the theme file and replace the contents of app.css with it
+        // Needs full path to the file
+        //@ts-ignore Deno
+        const themeCode = Deno.readTextFileSync(
+          //@ts-ignore Deno
+          Deno.cwd() + "/themes/" + themeFolder + "/theme.css",
+        );
+        // Replace the contents of app.css with the theme code
 
-                // and add a comment at the top
-                const themeComment = `/* Generated from ${themeFolder} */\n`;
-                const themeCodeWithComment = themeComment + themeCode;
-                // Return the theme code as the new contents of app.css
-                return {
-                    code: themeCodeWithComment,
-                    map: null,
-                };
-            }
-            return null;
-        }
-    };
-};
+        // and add a comment at the top
+        const themeComment = `/* Generated from ${themeFolder} */\n`;
+        const themeCodeWithComment = themeComment + themeCode;
+        // Return the theme code as the new contents of app.css
+        return {
+          code: themeCodeWithComment,
+          map: null,
+        };
+      }
+      return null;
+    },
+  };
+};

vite.config.ts

···
 import { defineConfig } from "vite";
 import { svelte } from "@sveltejs/vite-plugin-svelte";
-import { themePlugin } from "./theming";
+import { themePlugin } from "./theming.ts";
 
 // https://vite.dev/config/
 export default defineConfig({