minor refactors and additional logs

This reverts commit 5b6dbd327d.

.env.EXAMPLE

@@ -1,9 +1,12 @@
 HASHTAG_FILTER = ichlausche,music,musik,nowplaying,tunetuesday,nowlistening
-URL_FILTER = song.link,album.link,spotify.com,music.apple.com,bandcamp.com
 YOUTUBE_API_KEY = CHANGE_ME
+ODESLI_API_KEY = CHANGE_ME
 MASTODON_INSTANCE = 'metalhead.club'
+MASTODON_ACCESS_TOKEN = 'YOUR_ACCESS_TOKEN_HERE'
 BASE_URL = 'https://moshingmammut.phlaym.net'
 VERBOSE = false
+IGNORE_USERS = @moshhead@metalhead.club
+WEBSUB_HUB = 'http://pubsubhubbub.superfeedr.com'
 
 PUBLIC_REFRESH_INTERVAL = 10000
 PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME = 'Metalhead.club'

.eslintrc.cjs

@@ -1,16 +1,25 @@
 module.exports = {
   root: true,
   parser: '@typescript-eslint/parser',
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+  extends: ['plugin:svelte/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-  plugins: ['svelte3', '@typescript-eslint'],
+  plugins: ['@typescript-eslint'],
   ignorePatterns: ['*.cjs'],
-  overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  ],
   settings: {
     'svelte3/typescript': () => require('typescript')
   },
   parserOptions: {
     sourceType: 'module',
-    ecmaVersion: 2020
+    ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte']
   },
   env: {
     browser: true,

.gitignore

@@ -4,6 +4,8 @@ playbook.yml
 inventory.yml
 ansible.cfg
 
+avatars/*
+thumbnails/*
 node_modules
 /build
 /.svelte-kit

.nova/Configuration.json

@@ -1,7 +1,11 @@
 {
-  "apexskier.typescript.config.formatDocumentOnSave": "true",
+  "apexskier.eslint.config.eslintConfigPath" : ".eslintrc.cjs",
-  "apexskier.typescript.config.isEnabledForJavascript": "Enable",
+  "apexskier.eslint.config.eslintPath" : "node_modules\/@eslint\/eslintrc\/dist\/eslintrc.cjs",
-  "apexskier.typescript.config.organizeImportsOnSave": "true",
+  "apexskier.eslint.config.fixOnSave" : "Enable",
-  "apexskier.typescript.config.userPreferences.quotePreference": "single",
+  "apexskier.typescript.config.formatDocumentOnSave" : "false",
-  "apexskier.typescript.config.userPreferences.useLabelDetailsInCompletionEntries": true
+  "apexskier.typescript.config.isEnabledForJavascript" : "Enable",
+  "apexskier.typescript.config.organizeImportsOnSave" : "true",
+  "apexskier.typescript.config.userPreferences.quotePreference" : "single",
+  "apexskier.typescript.config.userPreferences.useLabelDetailsInCompletionEntries" : true,
+  "prettier.format-on-save" : "Global Default"
 }

.prettierignore

@@ -6,6 +6,7 @@ node_modules
 .env
 .env.*
 !.env.example
+/.nova
 
 # Ignore files for PNPM, NPM and YARN
 pnpm-lock.yaml

README.md

@@ -11,8 +11,8 @@ Having a quick overview over what is being posted can be a great way to discover
 
 This is fairly simple from a technical point of view! metalhead.club's local timeline is being watched using the
 Mastodon Streaming API over a Websocket. Every time a new post arrives, it is checked if it contains any music by
-checking included hashtags and URLs. A list of tags and URLs can be found in [the configuration](.env.EXAMPLE).
+checking included hashtags and URLs. A list of tags can be found in [the configuration](.env.EXAMPLE).
-Additionally, lins to YouTube are queried, if they are music or other videos using the YouTube API.
+Additionally, links are vetted if they are music by checking if https://song.link finds info on them.
 
 If a post passes this check it is saved to a SQLite database.
 
@@ -33,12 +33,12 @@ I can see that there are plenty of posts using only descriptions and links witho
 be missed. This isn't a great solution.
 
 Another idea was to store only URLs of posts and resolve the content and account information live.
-This would be better, but I'm *still* storing post information while also slowing the app down and introduce more code
+This would be better, but I'm _still_ storing post information while also slowing the app down and introduce more code
 complexity. I'm willing to make this change if people prefer this though.
 
 Additionally, I ended up adding a few things which turned out to be not needed:
 The `tags` table (tags are included in the post's content and I don't do anything separately with tags) and
-`accounts.username` and `accounts.avatar_static`. I will keep these in until the initial wave of feedback arrives, and
+~~`accounts.username`~~ (s being used for #18) ~~and `accounts.avatar_static`~~ (has been removed). I will keep these in until the initial wave of feedback arrives, and
 remove it if no new features required them.
 
 I'll gladly accept any help in coming up with a good solution which doesn't need to store anything at all!
@@ -51,7 +51,6 @@ By default, NVM is used to install NodeJS, but you can install it any way you wa
 
 This is based on [SvelteKit's instructions](https://kit.svelte.dev/docs/adapter-node#deploying) and [How To Deploy Node.js Applications Using Systemd and Nginx](https://www.digitalocean.com/community/tutorials/how-to-deploy-node-js-applications-using-systemd-and-nginx)
 
-
 #### On your server
 
 Install Apache2 if not already installed.
@@ -78,7 +77,6 @@ Enter `$APP_DIR`.
 Place `package-lock.json` and `start.sh.EXAMPLE` in this directory.
 Run `npm ci --omit dev` to install the dependencies.
 
-
 Rename `start.sh.EXAMPLE` to `start.sh` and set the path to your NVM.
 
 If you do not have NVM installed, simply remove the line and make sure your node executable can be found either by
@@ -90,15 +88,27 @@ Copy `apache2.conf.EXAMPLE` to `/etc/apache2/sites-available/moshingmammut.conf`
 Domain. If you do not need or want SSL support, remove the whole `<IfModule mod_ssl.c>` block.
 If you do, add the path to your SSLCertificateFile and SSLCertificateKeyFile.
 
+Modify DocumentRoot and the two Alias and Directory statements, so that thumbnails and avatars are served directly by apache.
+
 Copy `moshing-mammut.service.EXAMPLE` to `/etc/systemd/system/moshing-mammut.service`
 and set your `User`, `Group`, `ExecStart` and `WorkingDirectory` accordingly.
 
-
 #### On your development machine
 
-Copy `.env.EXAMPLE` to `.env` and add your `YOUTUBE_API_KEY`.
+Copy `.env.EXAMPLE` to `.env` and add your `YOUTUBE_API_KEY` and `ODESLI_API_KEY`.
 To obtain one follow [YouTube's guide](https://developers.google.com/youtube/registering_an_application) to create an
-*API key*. As soon as #13 is implemented, this will be optional!
+_API key_.
+If `YOUTUBE_API_KEY` is unset, no playlist will be updated. Also, _all_ YouTube links will be treated as music videos,
+because the API is the only way to check if a YouTube link leads to music or something else.
+
+If `ODESLI_API_KEY` is unset, your rate limit to the song.link API will be lower.
+
+Add `MASTODON_ACCESS_TOKEN` as well, see [Creating our application
+
+](https://docs.joinmastodon.org/client/token/#app) in the Mastodon documentation.
+`read:statuses` is the only required scope. An access token will be displayed in your settings. Use that!
+
+There are currently no plans to implement an actual authentication flow.
 
 Run `npm run build` and copy the output folder, usually `build` to `$APP_DIR` on your server.
 

apache2.conf.EXAMPLE

@@ -15,6 +15,23 @@
 
     Include /etc/letsencrypt/options-ssl-apache.conf
 
+    DocumentRoot /home/moshing-mammut/app/
+
+    ProxyPass /avatars/ !
+    ProxyPass /thumbnails/ !
+    Alias /avatars/ /home/moshing-mammut/app/avatars/
+    Alias /thumbnails/ /home/moshing-mammut/app/thumbnails/
+
+    <Directory "/home/moshing-mammut/app/avatars/">
+      Require all granted
+      Header set Cache-Control "public,max-age=31536000,immutable"
+    </Directory>
+
+    <Directory "/home/moshing-mammut/app/thumbnails/">
+      Require all granted
+      Header set Cache-Control "public,max-age=31536000,immutable"
+    </Directory>
+
     ProxyPass / http://localhost:3000/
     ProxyPassReverse / http://localhost:3000/
 

faviconDescription.json

@@ -1,4 +1,3 @@
-
 {
   "masterPicture": "./icon.svg",
   "iconsPath": "/static",

package.json

@@ -1,10 +1,11 @@
 {
   "name": "moshing-mammut",
-  "version": "1.1.0",
+  "version": "1.3.2",
   "private": true,
   "license": "LGPL-3.0-or-later",
   "scripts": {
     "dev": "vite dev",
+    "devn": "vite dev --host",
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
@@ -13,29 +14,35 @@
     "format": "prettier --plugin-search-dir . --write ."
   },
   "devDependencies": {
-    "@sveltejs/adapter-node": "^1.2.3",
+    "@sveltejs/adapter-node": "^5.0.0",
-    "@sveltejs/kit": "^1.5.0",
+    "@sveltejs/kit": "^2.0.0",
-    "@types/sqlite3": "^3.1.8",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
-    "@types/ws": "^8.5.4",
+    "@types/node": "^22.6.1",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@types/sqlite3": "^3.0.0",
-    "@typescript-eslint/parser": "^5.45.0",
+    "@types/ws": "^8.5.0",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "@zerodevx/svelte-toast": "^0.9.3",
-    "eslint": "^8.28.0",
+    "eslint": "^9.11.1",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-svelte3": "^4.0.0",
+    "eslint-plugin-svelte": "^2.0.0",
-    "prettier": "^2.8.0",
+    "prettier": "^3.0.0",
-    "prettier-plugin-svelte": "^2.8.1",
+    "prettier-plugin-svelte": "^3.0.0",
-    "svelte": "^3.54.0",
+    "svelte": "^4.0.0",
-    "svelte-check": "^3.0.1",
+    "svelte-check": "^4.0.0",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
+    "typescript": "^5.0.0",
-    "vite": "^4.0.0"
+    "vite": "^5.0.0"
   },
   "type": "module",
   "dependencies": {
     "dotenv": "^16.0.3",
     "feed": "^4.2.2",
-    "sqlite3": "^5.1.6",
+    "sharp": "^0.33.0",
-    "ws": "^8.13.0"
+    "sqlite3": "^5.0.0",
+    "ws": "^8.18.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
   }
 }

src/app.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
@@ -10,23 +10,66 @@
     <meta name="apple-mobile-web-app-title" content="Moshing Mammut" />
     <meta name="application-name" content="Moshing Mammut" />
     <meta name="msapplication-TileColor" content="#2e0b78" />
-		<meta name="theme-color" content="#2e0b78" />
+    <meta
-		<link rel="stylesheet" href="%sveltekit.assets%/style.css" />
+      name="description"
-		<meta name="viewport" content="width=device-width" />
+      content="A collection of music recommendations and now-listenings by the users of metalhead.club"
-		<meta name="theme-color" content="#2E0B78" media="(prefers-color-scheme: dark)" />
+    />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+    <meta name="theme-color" content="#17063b" media="(prefers-color-scheme: dark)" />
     <meta name="theme-color" content="#BCB9B2" media="(prefers-color-scheme: light)" />
     <link rel="alternate" type="application/atom+xml" href="/feed.xml" title="Atom Feed" />
+    <link rel="hub" href="https://pubsubhubbub.superfeedr.com" />
     %sveltekit.head%
     <style>
       body {
-				--color-text: #2F0C7A;
+        --color-blue: hsl(259, 82%, 26%);
-				--color-bg: white;
+        --color-blue-dark: hsl(259, 82%, 13%);
-				--color-border: #17063B;
+        --color-lavender: hsl(253, 82%, 33%);
-				--color-link: #563ACC;
+        --color-mauve: hsl(273, 82%, 38%);
-				--color-link-visited: #858AFA;
+
+        --color-grey: hsl(44, 7%, 41%);
+        --color-grey-translucent: hsla(44, 7%, 41%, 0.2);
+        --color-grey-light: hsl(0, 0%, 98%);
+
+        --color-red: hsl(7, 100%, 56%);
+        --color-red-light: hsl(7, 100%, 61%);
+        --color-red-lighter: hsl(7, 100%, 68%);
+        --color-red-dark: hsl(7, 100%, 48%);
+        --color-red-desat: hsl(7, 20%, 56%);
+        --color-red-desat-dark: hsl(7, 20%, 30%);
+        --color-red-desat-desat: hsl(7, 8%, 56%);
+
+        --color-text: var(--color-blue-dark);
+        --color-border: var(--color-grey);
+        --color-link: var(--color-mauve);
+        --color-link-visited: var(--color-lavender);
+        --color-bg: var(--color-grey-light);
+        --color-bg-translucent: hsla(42, 7%, 72%, 0.5);
+        --color-button: var(--color-red-light);
+        --color-button-shadow: var(--color-red-desat-dark);
+        --color-button-hover: var(--color-red);
+        --color-button-deactivated: var(--color-red-desat-desat);
+        --color-button-text: var(--color-blue-dark);
 
         color: var(--color-text);
         background-color: var(--color-bg);
+        font-family:
+          system-ui,
+          -apple-system,
+          BlinkMacSystemFont,
+          'Segoe UI',
+          Roboto,
+          Oxygen-Sans,
+          Ubuntu,
+          Cantarell,
+          'Helvetica Neue',
+          Helvetica,
+          Arial,
+          sans-serif,
+          'Apple Color Emoji',
+          'Segoe UI Emoji',
+          'Segoe UI Symbol';
       }
 
       a {
@@ -38,11 +81,20 @@
 
       @media (prefers-color-scheme: dark) {
         body {
-					--color-text: white;
+          --color-lavender: hsl(273, 43%, 65%);
-					--color-bg: #17063B;
+          --color-mauve: hsl(286, 73%, 81%);
-					--color-border: white;
+
-					--color-link: #8A9BF0;
+          --color-text: var(--color-grey-light);
-					--color-link-visited: #C384FB;
+          --color-border: var(--color-grey-light);
+          --color-link: var(--color-lavender);
+          --color-link-visited: var(--color-mauve);
+          --color-bg: var(--color-blue-dark);
+          --color-bg-translucent: hsla(259, 82%, 26%, 0.5);
+          --color-button: var(--color-red-light);
+          --color-button-shadow: var(--color-red-desat);
+          --color-button-hover: var(--color-red);
+          --color-button-deactivated: var(--color-red-desat-desat);
+          --color-button-text: var(--color-blue-dark);
         }
       }
     </style>

src/hooks.server.ts

@@ -1,22 +1,22 @@
+import { log } from '$lib/log';
 import { TimelineReader } from '$lib/server/timeline';
-import type { HandleServerError } from '@sveltejs/kit';
+import type { Handle, HandleServerError } from '@sveltejs/kit';
+import { error } from '@sveltejs/kit';
 import fs from 'fs/promises';
 
+log.log('App startup');
 TimelineReader.init();
 
 export const handleError = (({ error }) => {
   if (error instanceof Error) {
-    console.error('Something went wrong: ', error.name, error.message);
+    log.error('Something went wrong: ', error.name, error.message);
   }
 
   return {
-    message: 'Whoops!',
+    message: `Something went wrong! ${error}`
-    code: (error as any)?.code ?? 'UNKNOWN'
   };
 }) satisfies HandleServerError;
 
-import type { Handle } from '@sveltejs/kit';
-
 export const handle = (async ({ event, resolve }) => {
   // Reeder *insists* on checking /feed instead of /feed.xml
   if (event.url.pathname === '/feed') {
@@ -24,10 +24,36 @@ export const handle = (async ({ event, resolve }) => {
   }
   if (event.url.pathname === '/feed.xml') {
     const f = await fs.readFile('feed.xml', { encoding: 'utf8' });
-    return new Response(
+    return new Response(f, { headers: [['Content-Type', 'application/atom+xml']] });
-      f,
+  }
-      { headers: [['Content-Type', 'application/atom+xml']] }
+
-    );
+  // Ideally, this would be served by apache
+  if (event.url.pathname.startsWith('/avatars/')) {
+    const fileName = event.url.pathname.split('/').pop() ?? 'unknown.jpeg';
+    const suffix = fileName.split('.').pop() ?? 'jpeg';
+    try {
+      //This should work, but doesn't yet. See: https://github.com/nodejs/node/issues/45853
+      /*
+      const stat = await fs.stat('avatars/' + fileName);
+      const fd = await fs.open('avatars/' + fileName);
+      const readStream = fd
+        .readableWebStream()
+        .getReader({ mode: 'byob' }) as ReadableStream<Uint8Array>;
+      log.info('sending. size: ', stat.size);
+      return new Response(readStream, {
+        headers: [
+          ['Content-Type', 'image/' + suffix],
+          ['Content-Length', stat.size.toString()]
+        ]
+      });
+      */
+
+      const f = await fs.readFile('avatars/' + fileName);
+      return new Response(f, { headers: [['Content-Type', 'image/' + suffix]] });
+    } catch (e) {
+      log.error('no stream', e);
+      error(404);
+    }
   }
 
   const response = await resolve(event);

src/lib/components/AccountComponent.svelte

@@ -4,4 +4,4 @@
   export let account: Account;
 </script>
 
-<a href="{account.url}" target="_blank">{account.display_name} @{account.acct}</a>
+<a href={account.url} target="_blank">{account.display_name} @{account.acct}</a>

src/lib/components/AvatarComponent.svelte

@@ -3,18 +3,52 @@
 
   export let account: Account;
   let avatarDescription: string;
-  $: avatarDescription = `Avatar for ${account.acct}`
+  let sourceSetHtml: string;
+  $: avatarDescription = `Avatar for ${account.acct}`;
+  $: {
+    // Sort thumbnails by file type. This is important, because the order of the srcset entries matter.
+    // We need the best format to be first
+    const formatPriority = new Map<string, number>([
+      ['avif', 0],
+      ['webp', 1],
+      ['jpg', 99],
+      ['jpeg', 99]
+    ]);
+    const resizedAvatars = (account.resizedAvatars ?? []).sort((a, b) => {
+      const extensionA = a.file.split('.').pop() ?? '';
+      const extensionB = b.file.split('.').pop() ?? '';
+      const prioA = formatPriority.get(extensionA) ?? 3;
+      const prioB = formatPriority.get(extensionB) ?? 3;
+      return prioA - prioB;
+    });
+    const m = new Map<string, string[]>();
+    for (const resizedAvatar of resizedAvatars) {
+      const extension = resizedAvatar.file.split('.').pop();
+      const mime = extension ? `image/${extension}` : 'application/octet-stream';
+      const sourceSetEntry = `${resizedAvatar.file} ${resizedAvatar.sizeDescriptor}`;
+      m.set(mime, [...(m.get(mime) || []), sourceSetEntry]);
+    }
+    let html = '';
+    for (const entry of m.entries()) {
+      const srcset = entry[1].join(', ');
+      html += `<source srcset="${srcset}" type="${entry[0]}" />`;
+    }
+    sourceSetHtml = html;
+  }
 </script>
 
-<img src="{account.avatar}" alt={avatarDescription}/>
+<picture>
+  {@html sourceSetHtml}
+  <img src={account.avatar} alt={avatarDescription} loading="lazy" width="50" height="50" />
+</picture>
 
 <style>
-img {
+  img {
-  max-width: 50px;
+    max-width: 100%;
-  max-height: 50px;
+    max-height: 100%;
-  width: auto;
+    width: 50px;
-  height: auto;
+    height: 50px;
     object-fit: contain;
-  border-radius: 3px;;
+    border-radius: 3px;
-}
+  }
 </style>

src/lib/components/FooterComponent.svelte

@@ -5,21 +5,25 @@
 
 <div class="footer">
   <div>
-        <span>Made with &#x1F918; by&nbsp;</span>
+    <span class="label"
-        <a href="https://metalhead.club/@aymm" rel="me">@aymm@metalhead.club</a>
+      >Made<span class="secretIngredient">&nbsp;with &#x1F918;</span>&nbsp;by&nbsp;</span
+    >
+    <a href="https://metalhead.club/@aymm" rel="me"
+      >@aymm<span class="mastodonInstance">@metalhead.club</span></a
+    >
   </div>
   |
   <div>
     <a href="https://phlaym.net/git/phlaym/moshing-mammut">
       <img alt="Git branch" src={git} class="icon" />
-            Source Code
+      <span class="label">Source Code</span>
     </a>
   </div>
   |
   <div>
     <a href="/feed.xml">
       <img alt="RSS" src={rss} class="icon" />
-            RSS Feed
+      <span class="label">RSS<span class="feedSuffix">&nbsp;Feed</span></span>
     </a>
   </div>
 </div>
@@ -38,12 +42,14 @@
     padding: 0.3em 1em;
     margin: 0 -8px;
     border-radius: 3px;
+    padding-bottom: env(safe-area-inset-bottom);
   }
   .icon {
     position: relative;
     top: 0.25em;
     color: white;
     height: 1em;
+    width: 1em;
   }
   @media (prefers-color-scheme: dark) {
     .icon {
@@ -53,4 +59,27 @@
       background-color: var(--color-grey-translucent);
     }
   }
+  @media only screen and (max-width: 620px) {
+    .mastodonInstance,
+    .feedSuffix {
+      display: none;
+    }
+    .footer {
+      justify-content: center;
+    }
+  }
+
+  @media only screen and (max-width: 430px) {
+    .mastodonInstance,
+    .feedSuffix,
+    .secretIngredient {
+      display: none;
+    }
+  }
+
+  @media only screen and (max-width: 370px) {
+    .label {
+      display: none;
+    }
+  }
 </style>

src/lib/components/LoadMoreComponent.svelte

@@ -2,8 +2,8 @@
   import { createEventDispatcher } from 'svelte';
   import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
 
-  export let moreAvailable: boolean = false;
+  export let moreAvailable = false;
-  export let isLoading: boolean = false;
+  export let isLoading = false;
   let displayText = '';
   let title = '';
   let disabled: boolean;
@@ -14,11 +14,13 @@
     displayText = 'You reached the end';
   } else {
     displayText = 'Load More';
-  };
+  }
   $: disabled = !moreAvailable || isLoading;
   $: title = moreAvailable ? 'Load More' : 'There be dragons!';
 
-  const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher<{
+    loadOlderPosts: string;
+  }>();
 
   function loadOlderPosts() {
     dispatch('loadOlderPosts');
@@ -27,7 +29,7 @@
 
 <button on:click={loadOlderPosts} {disabled} {title}>
   <div class="loading" class:collapsed={!isLoading}>
-      <LoadingSpinnerComponent size='0.5em' thickness='6px' />
+    <LoadingSpinnerComponent size="0.5em" thickness="6px" />
   </div>
   <span>{displayText}</span>
 </button>

src/lib/components/LoadingSpinnerComponent.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  export let size: string = '64px';
+  export let size = '64px';
-  export let thickness: string = '6px';
+  export let thickness = '6px';
 </script>
 
-<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>
+<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}" />
+
 <style>
   .lds-dual-ring {
     display: inline-block;
@@ -11,7 +12,7 @@
     height: 100%;
   }
   .lds-dual-ring:after {
-    content: " ";
+    content: ' ';
     display: block;
     width: var(--size);
     height: var(--size);
@@ -34,5 +35,4 @@
       transform: rotate(360deg);
     }
   }
-
 </style>

src/lib/components/PostComponent.svelte

@@ -1,57 +1,256 @@
 <script lang="ts">
-  import type { Post } from '$lib/mastodon/response';
+  import { type Post, SongThumbnailImageKind } from '$lib/mastodon/response';
+  import type { SongInfo } from '$lib/odesliResponse';
   import AvatarComponent from '$lib/components/AvatarComponent.svelte';
   import AccountComponent from '$lib/components/AccountComponent.svelte';
   import { secondsSince, relativeTime } from '$lib/relativeTime';
-  import { onMount } from "svelte";
+  import { onMount } from 'svelte';
 
   export let post: Post;
   let displayRelativeTime = false;
   const absoluteDate = new Date(post.created_at).toLocaleString();
   let dateCreated = absoluteDate;
   const timePassed = secondsSince(new Date(post.created_at));
-  $: if(displayRelativeTime) {
+  $: if (displayRelativeTime) {
     dateCreated = relativeTime($timePassed) ?? absoluteDate;
   }
 
+  const songs = filterDuplicates(post.songs ?? []);
+
+  function filterDuplicates(songs: SongInfo[]): SongInfo[] {
+    return songs.filter((obj, index, arr) => {
+      return arr.map((mapObj) => mapObj.pageUrl).indexOf(obj.pageUrl) === index;
+    });
+  }
+
+  function getThumbnailSize(song: SongInfo): {
+    width?: number;
+    height?: number;
+    widthSmall?: number;
+    heightSmall?: number;
+  } {
+    if (song.thumbnailWidth === undefined || song.thumbnailHeight === undefined) {
+      return { width: undefined, height: undefined, widthSmall: undefined, heightSmall: undefined };
+    }
+    const factor = 200 / song.thumbnailWidth;
+    const smallFactor = 60 / song.thumbnailHeight;
+    const height = song.thumbnailHeight * factor;
+    return {
+      width: 200,
+      height: height,
+      widthSmall: smallFactor * song.thumbnailWidth,
+      heightSmall: 60
+    };
+  }
+
+  // Blurred thumbs aren't generated (yet, unclear of they ever will)
+  // So blurred forces using the small one, by skipping the others and removing its media query.
+  // This is technically unnecessary - the blurred one will only show if it matches the small media query,
+  // but this makes it more explicit
+  function getSourceSetHtml(song: SongInfo, isBlurred = false): string {
+    const small = new Map<string, string[]>();
+    const large = new Map<string, string[]>();
+
+    // Sort thumbnails by file type. This is important, because the order of the srcset entries matter.
+    // We need the best format to be first
+    const formatPriority = new Map<string, number>([
+      ['avif', 0],
+      ['webp', 1],
+      ['jpg', 99],
+      ['jpeg', 99]
+    ]);
+    const thumbs = (song.resizedThumbnails ?? []).sort((a, b) => {
+      const extensionA = a.file.split('.').pop() ?? '';
+      const extensionB = b.file.split('.').pop() ?? '';
+      const prioA = formatPriority.get(extensionA) ?? 3;
+      const prioB = formatPriority.get(extensionB) ?? 3;
+      return prioA - prioB;
+    });
+
+    for (const resizedThumb of thumbs) {
+      if (isBlurred && resizedThumb.kind !== SongThumbnailImageKind.Small) {
+        continue;
+      }
+      const extension = resizedThumb.file.split('.').pop();
+      const mime = extension ? `image/${extension}` : 'application/octet-stream';
+      const sourceSetEntry = `${resizedThumb.file} ${resizedThumb.sizeDescriptor}`;
+      switch (resizedThumb.kind) {
+        case SongThumbnailImageKind.Big:
+          large.set(mime, [...(large.get(mime) || []), sourceSetEntry]);
+          break;
+        case SongThumbnailImageKind.Small:
+          small.set(mime, [...(small.get(mime) || []), sourceSetEntry]);
+          break;
+        case SongThumbnailImageKind.Blurred: // currently not generated
+          break;
+      }
+    }
+    let html = '';
+    const { width, height, widthSmall, heightSmall } = getThumbnailSize(song);
+    const mediaAttribute = isBlurred ? '' : 'media="(max-width: 650px)"';
+    for (const entry of small.entries()) {
+      const srcset = entry[1].join(', ');
+      html += `<source srcset="${srcset}" type="${entry[0]}" ${mediaAttribute} width="${widthSmall}" height="${heightSmall}" />`;
+    }
+    html += '\n';
+    for (const entry of large.entries()) {
+      const srcset = entry[1].join(', ');
+      html += `<source srcset="${srcset}" type="${entry[0]}" width="${width}" height="${height}"/>`;
+    }
+    return html;
+  }
+
   onMount(() => {
     // Display relative time only after mount:
     // When JS is disabled the server-side rendered absolute date will be shown,
     // otherwise the relative date would be outdated very quickly
     displayRelativeTime = true;
-  })
+  });
 </script>
 
-
 <div class="wrapper">
   <div class="avatar"><AvatarComponent account={post.account} /></div>
-  <div class="post">
+  <div class="account"><AccountComponent account={post.account} /></div>
   <div class="meta">
-      <AccountComponent account={post.account} />
+    <small><a href={post.url} target="_blank" title={absoluteDate}>{dateCreated}</a></small>
-      <small><a href={post.url} target="_blank" title="{absoluteDate}">{dateCreated}</a></small>
   </div>
   <div class="content">{@html post.content}</div>
+  <div class="song">
+    {#if post.songs}
+      {#each songs as song (song.pageUrl)}
+        <div class="info-wrapper">
+          <picture>
+            {@html getSourceSetHtml(song)}
+            <img class="bgimage" src={song.thumbnailUrl} loading="lazy" alt="Blurred cover" />
+          </picture>
+          <a href={song.pageUrl ?? song.postedUrl} target="_blank">
+            <div class="info">
+              <picture>
+                {@html getSourceSetHtml(song)}
+                <img
+                  src={song.thumbnailUrl}
+                  class="cover"
+                  alt="Cover for {song.artistName} - {song.title}"
+                  loading="lazy"
+                  width={song.thumbnailWidth}
+                  height={song.thumbnailHeight}
+                />
+              </picture>
+              <span class="text">{song.artistName} - {song.title}</span>
+            </div>
+          </a>
+        </div>
+      {/each}
+    {/if}
   </div>
 </div>
 
 <style>
   .wrapper {
-    display: flex;
+    display: grid;
-  }
+    grid-template-columns: 50px 1fr auto auto;
-  .post {
+    grid-template-rows: auto 1fr auto;
-    display: flex;
+    grid-template-areas:
-    flex-direction: column;
+      'avatar account account meta'
-    flex-grow: 2;
+      'avatar content content song'
-  }
+      '. content content song';
-  .meta {
+    grid-column-gap: 6px;
-    display: flex;
+    column-gap: 6px;
-    justify-content: space-between;
+    grid-row-gap: 6px;
+    row-gap: 6px;
   }
   .avatar {
-    margin-right: 1em;
+    grid-area: avatar;
+    max-width: 50px;
+    max-height: 50px;
+  }
+  .account {
+    grid-area: account;
+  }
+  .meta {
+    grid-area: meta;
+    justify-self: end;
   }
   .content {
-    max-width: calc(600px - 1em - 50px);
+    grid-area: content;
-    overflow-x: auto;
+    word-break: break-word;
+    translate: 0 -0.5em;
+  }
+  .song {
+    grid-area: song;
+    align-self: center;
+    justify-self: center;
+    max-width: 200px;
+  }
+  .cover {
+    max-width: 200px;
+    display: block;
+    border-radius: 3px;
+    margin-bottom: 3px;
+  }
+  .bgimage {
+    display: none;
+    background-color: var(--color-bg);
+  }
+  .info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5em;
+    z-index: 1;
+  }
+  .info * {
+    z-index: inherit;
+  }
+  @media only screen and (max-width: 650px) {
+    .wrapper {
+      grid-template-areas:
+        'avatar account account meta'
+        'content content content content'
+        'song song song song';
+      grid-row-gap: 3px;
+      row-gap: 3px;
+    }
+    .song {
+      width: 100%;
+    }
+    .song,
+    .cover {
+      max-width: 100%;
+    }
+    .cover {
+      height: 60px;
+    }
+    .cover:not(.background) {
+      z-index: 1;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+    }
+    .bgimage {
+      display: block;
+      width: 100%;
+      height: 60px;
+      z-index: 0;
+      filter: blur(10px);
+      background-repeat: no-repeat;
+      background-size: cover;
+      background-position: center;
+    }
+    .info {
+      position: relative;
+      top: -60px;
+      flex-direction: row;
+    }
+    .info-wrapper {
+      margin-bottom: -50px;
+    }
+    .text {
+      padding: 3px;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      border-radius: 3px;
+      background-color: var(--color-bg-translucent);
+      color: var(--color-text);
+    }
   }
 </style>

src/lib/log.ts

@@ -0,0 +1,32 @@
+import { env } from '$env/dynamic/private';
+import { isTruthy } from '$lib/truthyString';
+const { DEV } = import.meta.env;
+
+export const enableVerboseLog = isTruthy(env.VERBOSE);
+
+export const log = {
+  verbose: (...params: any[]) => {
+    if (!enableVerboseLog) {
+      return;
+    }
+    console.debug(new Date().toISOString(), ...params);
+  },
+  debug: (...params: any[]) => {
+    if (!DEV) {
+      return;
+    }
+    console.debug(new Date().toISOString(), ...params);
+  },
+  log: (...params: any[]) => {
+    console.log(new Date().toISOString(), ...params);
+  },
+  info: (...params: any[]) => {
+    console.info(new Date().toISOString(), ...params);
+  },
+  warn: (...params: any[]) => {
+    console.warn(new Date().toISOString(), ...params);
+  },
+  error: (...params: any[]) => {
+    console.error(new Date().toISOString(), ...params);
+  }
+};

src/lib/mastodon/response.ts

@@ -1,29 +1,60 @@
+import type { SongInfo } from '$lib/odesliResponse';
+
 export interface TimelineEvent {
-  event: string,
+  event: string;
-  payload: string
+  payload: string;
 }
 
 export interface Post {
-  id: string,
+  id: string;
-  created_at: string,
+  created_at: string;
-  tags: Tag[],
+  tags: Tag[];
-  url: string,
+  url: string;
-  content: string,
+  content: string;
-  account: Account
+  account: Account;
+  card?: PreviewCard;
+  songs?: SongInfo[];
+}
 
+export interface PreviewCard {
+  url: string;
+  title: string;
+  image?: string;
+  blurhash?: string;
+  width: number;
+  height: number;
 }
 
 export interface Tag {
-  name: string,
+  name: string;
-  url: string
+  url: string;
 }
 
 export interface Account {
-  id: string,
+  id: string;
-  acct: string,
+  acct: string;
-  username: string,
+  username: string;
-  display_name: string,
+  display_name: string;
-  url: string,
+  url: string;
-  avatar: string,
+  avatar: string;
-  avatar_static: string
+  resizedAvatars?: AccountAvatar[];
 }
+
+export type AccountAvatar = {
+  accountUrl: string;
+  file: string;
+  sizeDescriptor: string;
+};
+
+export enum SongThumbnailImageKind {
+  Big = 1,
+  Small,
+  Blurred
+}
+
+export type SongThumbnailImage = {
+  songThumbnailUrl: string;
+  file: string;
+  sizeDescriptor: string;
+  kind: SongThumbnailImageKind;
+};

src/lib/odesliResponse.ts

@@ -0,0 +1,149 @@
+import type { SongThumbnailImage } from '$lib/mastodon/response';
+
+export type SongInfo = {
+  pageUrl: string;
+  youtubeUrl?: string;
+  type: 'song' | 'album';
+  title?: string;
+  artistName?: string;
+  thumbnailUrl?: string;
+  postedUrl: string;
+  resizedThumbnails?: SongThumbnailImage[];
+  thumbnailWidth?: number;
+  thumbnailHeight?: number;
+};
+
+export type SongwhipReponse = {
+  type: 'track' | 'album';
+  name: string;
+  image?: string;
+  url: string;
+};
+
+export type OdesliResponse = {
+  /**
+   * The unique ID for the input entity that was supplied in the request. The
+   * data for this entity, such as title, artistName, etc. will be found in
+   * an object at `nodesByUniqueId[entityUniqueId]`
+   */
+  entityUniqueId: string;
+
+  /**
+   * The userCountry query param that was supplied in the request. It signals
+   * the country/availability we use to query the streaming platforms. Defaults
+   * to 'US' if no userCountry supplied in the request.
+   *
+   * NOTE: As a fallback, our service may respond with matches that were found
+   * in a locale other than the userCountry supplied
+   */
+  userCountry: string;
+
+  /**
+   * A URL that will render the Songlink page for this entity
+   */
+  pageUrl: string;
+
+  /**
+   * A collection of objects. Each key is a platform, and each value is an
+   * object that contains data for linking to the match
+   */
+  linksByPlatform: {
+    /**
+     * Each key in `linksByPlatform` is a Platform. A Platform will exist here
+     * only if there is a match found. E.g. if there is no YouTube match found,
+     * then neither `youtube` or `youtubeMusic` properties will exist here
+     */
+    [k in Platform]: {
+      /**
+       * The unique ID for this entity. Use it to look up data about this entity
+       * at `entitiesByUniqueId[entityUniqueId]`
+       */
+      entityUniqueId: string;
+
+      /**
+       * The URL for this match
+       */
+      url: string;
+
+      /**
+       * The native app URI that can be used on mobile devices to open this
+       * entity directly in the native app
+       */
+      nativeAppUriMobile?: string;
+
+      /**
+       * The native app URI that can be used on desktop devices to open this
+       * entity directly in the native app
+       */
+      nativeAppUriDesktop?: string;
+    };
+  };
+
+  // A collection of objects. Each key is a unique identifier for a streaming
+  // entity, and each value is an object that contains data for that entity,
+  // such as `title`, `artistName`, `thumbnailUrl`, etc.
+  entitiesByUniqueId: {
+    [entityUniqueId: string]: {
+      // This is the unique identifier on the streaming platform/API provider
+      id: string;
+
+      type: 'song' | 'album';
+
+      title?: string;
+      artistName?: string;
+      thumbnailUrl?: string;
+      thumbnailWidth?: number;
+      thumbnailHeight?: number;
+
+      // The API provider that powered this match. Useful if you'd like to use
+      // this entity's data to query the API directly
+      apiProvider: APIProvider;
+
+      // An array of platforms that are "powered" by this entity. E.g. an entity
+      // from Apple Music will generally have a `platforms` array of
+      // `["appleMusic", "itunes"]` since both those platforms/links are derived
+      // from this single entity
+      platforms: Platform[];
+    };
+  };
+};
+
+export type Platform =
+  | 'spotify'
+  | 'itunes'
+  | 'appleMusic'
+  | 'youtube'
+  | 'youtubeMusic'
+  | 'google'
+  | 'googleStore'
+  | 'pandora'
+  | 'deezer'
+  | 'tidal'
+  | 'amazonStore'
+  | 'amazonMusic'
+  | 'soundcloud'
+  | 'napster'
+  | 'yandex'
+  | 'spinrilla'
+  | 'audius'
+  | 'audiomack'
+  | 'anghami'
+  | 'boomplay';
+
+export type APIProvider =
+  | 'spotify'
+  | 'itunes'
+  | 'youtube'
+  | 'google'
+  | 'pandora'
+  | 'deezer'
+  | 'tidal'
+  | 'amazon'
+  | 'soundcloud'
+  | 'napster'
+  | 'yandex'
+  | 'spinrilla'
+  | 'audius'
+  | 'audiomack'
+  | 'anghami'
+  | 'boomplay';

src/lib/relativeTime.ts

@@ -11,10 +11,7 @@ export const time = readable(new Date(), function start(set) {
 });
 
 export function secondsSince(date: Date): Readable<number> {
-  return derived(
+  return derived(time, ($time) => Math.round(($time.getTime() - date.getTime()) / 1000));
-    time,
-    $time => Math.round(($time.getTime() - date.getTime()) / 1000)
-  );
 }
 
 export function relativeTime(seconds: number): string | null {
@@ -30,7 +27,7 @@ export function relativeTime(seconds: number): string | null {
 
   const day = hour * 24;
   if (seconds < day) {
-    return `${(Math.floor(seconds / hour))}h`;
+    return `${Math.floor(seconds / hour)}h`;
   }
   const maxRelative = day * 31;
   if (seconds < maxRelative) {

src/lib/server/db.ts

@@ -1,66 +1,189 @@
-import { env } from '$env/dynamic/private';
+import { IGNORE_USERS, MASTODON_INSTANCE } from '$env/static/private';
-import type { Account, Post, Tag } from '$lib/mastodon/response';
+import { enableVerboseLog, log } from '$lib/log';
+import type { Account, AccountAvatar, Post, SongThumbnailImage, Tag } from '$lib/mastodon/response';
+import type { SongInfo } from '$lib/odesliResponse';
+import { TimelineReader } from '$lib/server/timeline';
 import sqlite3 from 'sqlite3';
-const { DEV } = import.meta.env;
+
+type FilterParameter = {
+  $limit?: number | undefined | null;
+  $since?: string | undefined | null;
+  $before?: string | undefined | null;
+  [x: string]: string | number | undefined | null;
+};
+
+type PostRow = {
+  id: string;
+  content: string;
+  created_at: string;
+  url: string;
+  account_id: string;
+  acct: string;
+  username: string;
+  display_name: string;
+  account_url: string;
+  avatar: string;
+};
+
+type PostTagRow = {
+  post_id: string;
+  tag: string;
+  url: string;
+};
+
+type SongRow = {
+  post_url: string;
+  postedUrl: string;
+  overviewUrl?: string;
+  type: 'album' | 'song';
+  youtubeUrl?: string;
+  title?: string;
+  artistName?: string;
+  thumbnailUrl?: string;
+  thumbnailWidth?: number;
+  thumbnailHeight?: number;
+};
+
+type AccountAvatarRow = {
+  account_url: string;
+  file: string;
+  sizeDescriptor: string;
+};
+
+type SongThumbnailAvatarRow = {
+  song_thumbnailUrl: string;
+  file: string;
+  sizeDescriptor: string;
+  kind: number;
+};
+
+type Migration = {
+  id: number;
+  name: string;
+  statement: string;
+};
 
 const db: sqlite3.Database = new sqlite3.Database('moshingmammut.db');
+// for the local masto instance, the instance name is *not* saved
+// as part of the username or acct, so it needs to be stripped
+const ignoredUsers: string[] =
+  IGNORE_USERS === undefined
+    ? []
+    : IGNORE_USERS.split(',')
+        .map((u) => (u.startsWith('@') ? u.substring(1) : u))
+        .map((u) =>
+          u.endsWith('@' + MASTODON_INSTANCE)
+            ? u.substring(0, u.length - ('@' + MASTODON_INSTANCE).length)
+            : u
+        );
+let databaseReady = false;
 
-if (DEV && env.VERBOSE === 'true') {
+if (enableVerboseLog) {
   sqlite3.verbose();
   db.on('change', (t, d, table, rowid) => {
-    console.debug('DB change event', t, d, table, rowid);
+    log.verbose('DB change event', t, d, table, rowid);
-  })
+  });
 
   db.on('trace', (sql) => {
-    console.debug('Running', sql);
+    log.verbose('Running', sql);
   });
 
   db.on('profile', (sql) => {
-    console.debug('Finished', sql);
+    log.verbose('Finished', sql);
   });
 }
 
-interface Migration {
+function applyDbMigration(migration: Migration): Promise<void> {
-  id: number,
+  return new Promise((resolve, reject) => {
-  name: string,
+    db.exec(migration.statement, (err) => {
-  statement: string
+      if (err !== null) {
+        log.error(`Failed to apply migration ${migration.name}`, err);
+        reject(err);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+async function applyMigration(migration: Migration) {
+  if (migration.id === 4) {
+    // When this is run, no posts will have added song data,
+    // so filtering won't help
+    const posts = await getPostsInternal(null, null, 10000);
+    let current = 0;
+    const total = posts.length.toString().padStart(4, '0');
+    for (const post of posts) {
+      current++;
+      if (post.songs && post.songs.length) {
+        continue;
+      }
+      log.info(
+        `Fetching songs for existing post ${current.toString().padStart(4, '0')} of ${total}`,
+        post.url
+      );
+      const songs = await TimelineReader.getSongInfoInPost(post);
+      await saveSongInfoData(post.url, songs);
+      log.debug(`Fetched ${songs.length} songs for existing post`, post.url);
+    }
+    log.debug(`Finished fetching songs`);
+  } else {
+    await applyDbMigration(migration);
+  }
 }
 
 db.on('open', () => {
-  console.log('Opened database');
+  log.info('Opened database');
   db.serialize();
   db.run('CREATE TABLE IF NOT EXISTS "migrations" ("id" integer,"name" TEXT, PRIMARY KEY (id))');
-  db.all('SELECT id FROM migrations', (err, rows) => {
+  db.all('SELECT id FROM migrations', (err, rows: Migration[]) => {
     if (err !== null) {
-      console.error('Could not fetch existing migrations', err);
+      log.error('Could not fetch existing migrations', err);
+      databaseReady = true;
       return;
     }
-    console.debug('Already applied migrations', rows);
+    log.debug('Already applied migrations', rows);
-    const appliedMigrations: Set<number> = new Set(rows.map((row: any) => row['id']));
+    const appliedMigrations: Set<number> = new Set(rows.map((row) => row['id']));
-    const toApply = getMigrations().filter(m => !appliedMigrations.has(m.id));
+    const toApply = getMigrations().filter((m) => !appliedMigrations.has(m.id));
-    for (let migration of toApply) {
+    let remaining = toApply.length;
-      db.exec(migration.statement, (err) => {
+    if (remaining === 0) {
-        if (err !== null) {
+      databaseReady = true;
-          console.error(`Failed to apply migration ${migration.name}`, err);
       return;
     }
-        db.run('INSERT INTO migrations (id, name) VALUES(?, ?)', [migration.id, migration.name], (e: Error) => {
+    for (const migration of toApply) {
+      applyMigration(migration).then(() => {
+        remaining--;
+        // This will set databaseReady to true before the migration has been inserted as applies,
+        // but that doesn't matter. It's only important that is has been applied
+        if (remaining === 0) {
+          databaseReady = true;
+        }
+        if (err !== null) {
+          log.error(`Failed to apply migration ${migration.name}`, err);
+          return;
+        }
+        db.run(
+          'INSERT INTO migrations (id, name) VALUES(?, ?)',
+          [migration.id, migration.name],
+          (e: Error) => {
             if (e !== null) {
-            console.error(`Failed to mark migration ${migration.name} as applied`, e);
+              log.error(`Failed to mark migration ${migration.name} as applied`, e);
               return;
             }
-          console.info(`Applied migration ${migration.name}`);
+            log.info(`Applied migration ${migration.name}`);
-        });
+          }
+        );
       });
     }
   });
 });
 db.on('error', (err) => {
-  console.error('Error opening database', err);
+  log.error('Error opening database', err);
 });
 
 function getMigrations(): Migration[] {
-  return [{
+  return [
+    {
       id: 1,
       name: 'initial',
       statement: `
@@ -89,82 +212,209 @@ function getMigrations(): Migration[] {
         FOREIGN KEY (post_id) REFERENCES posts(id),
         FOREIGN KEY (tag_url) REFERENCES tags(url)
       )`
-  }];
+    },
+    {
+      id: 2,
+      name: 'urls as keys',
+      statement: `
+      CREATE TABLE accounts_new (
+        id TEXT NOT NULL,
+        acct TEXT,
+        username TEXT,
+        display_name TEXT,
+        url TEXT NOT NULL PRIMARY KEY,
+        avatar TEXT
+      );
+      INSERT INTO accounts_new (id, acct, username, display_name, url, avatar)
+         SELECT id, acct, username, display_name, url, avatar
+         FROM accounts;
+      DROP TABLE accounts;
+      ALTER TABLE accounts_new RENAME TO accounts;
+
+      CREATE TABLE posts_new (
+        id TEXT NOT NULL,
+        content TEXT,
+        created_at TEXT,
+        url TEXT NOT NULL PRIMARY KEY,
+        account_id TEXT NOT NULL,
+        FOREIGN KEY (account_id) REFERENCES accounts(url)
+      );
+      INSERT INTO posts_new (id, content, created_at, url, account_id)
+         SELECT p.id, p.content, p.created_at, p.url, accounts.url
+         FROM posts as p
+         JOIN accounts ON accounts.id = p.account_id;
+      DROP TABLE posts;
+      ALTER TABLE posts_new RENAME TO posts;
+
+      CREATE TABLE poststags_new (
+        id integer PRIMARY KEY,
+        post_id TEXT NOT NULL,
+        tag_url TEXT NOT NULL,
+        FOREIGN KEY (post_id) REFERENCES posts(url),
+        FOREIGN KEY (tag_url) REFERENCES tags(url)
+      );
+
+      INSERT INTO poststags_new (id, post_id, tag_url)
+         SELECT pt.id, posts.url, pt.tag_url
+         FROM poststags as pt
+         JOIN posts ON posts.id = pt.post_id;
+      DROP TABLE poststags;
+      ALTER TABLE poststags_new RENAME TO poststags;
+      `
+    },
+    {
+      id: 3,
+      name: 'song info for posts',
+      statement: `
+      CREATE TABLE songs (
+        id integer PRIMARY KEY,
+        postedUrl TEXT NOT NULL,
+        overviewUrl TEXT,
+        type TEXT CHECK ( type in ('album', 'song') ),
+        youtubeUrl TEXT,
+        title TEXT,
+        artistName TEXT,
+        thumbnailUrl TEXT,
+        post_url TEXT,
+        FOREIGN KEY (post_url) REFERENCES posts(url)
+      );`
+    },
+    {
+      id: 4,
+      name: 'song info for existing posts',
+      statement: ``
+    },
+    {
+      id: 5,
+      name: 'resized avatars',
+      statement: `
+      CREATE TABLE accountsavatars (
+        file TEXT NOT NULL PRIMARY KEY,
+        account_url TEXT NOT NULL,
+        sizeDescriptor TEXT NOT NULL,
+        FOREIGN KEY (account_url) REFERENCES accounts(url)
+      );`
+    },
+    {
+      id: 6,
+      name: 'resized song thumbnails',
+      statement: `
+      CREATE TABLE songsthumbnails (
+        file TEXT NOT NULL PRIMARY KEY,
+        song_thumbnailUrl TEXT NOT NULL,
+        sizeDescriptor TEXT NOT NULL,
+        kind INTEGER NOT NULL,
+        FOREIGN KEY (song_thumbnailUrl) REFERENCES songs(thumbnailUrl)
+      );`
+    },
+    {
+      id: 7,
+      name: 'song thumbnail size',
+      statement: `
+      ALTER TABLE songs ADD COLUMN thumbnailWidth INTEGER NULL;
+      ALTER TABLE songs ADD COLUMN thumbnailHeight INTEGER NULL;`
+    }
+  ];
 }
 
-export async function savePost(post: Post): Promise<undefined> {
+async function waitReady(): Promise<void> {
-  return new Promise((resolve, reject) => {
+  // Simpler than a semaphore and is really only needed on startup
-    console.debug(`Saving post ${post.url}`);
+  return new Promise((resolve) => {
-    const account = post.account;
+    const interval = setInterval(() => {
-    db.run(`
+      log.verbose('Waiting for database to be ready');
-      INSERT INTO accounts (id, acct, username, display_name, url, avatar, avatar_static)
+      if (databaseReady) {
-      VALUES(?, ?, ?, ?, ?, ?, ?)
+        log.verbose('DB is ready');
-      ON CONFLICT(id)
+        clearInterval(interval);
+        resolve();
+      }
+    }, 100);
+  });
+}
+
+function saveAccountData(account: Account): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    db.run(
+      `
+      INSERT INTO accounts (id, acct, username, display_name, url, avatar)
+      VALUES(?, ?, ?, ?, ?, ?)
+      ON CONFLICT(url)
       DO UPDATE SET
       acct=excluded.acct,
       username=excluded.username,
       display_name=excluded.display_name,
-      url=excluded.url,
+      id=excluded.id,
-      avatar=excluded.avatar,
+      avatar=excluded.avatar;`,
-      avatar_static=excluded.avatar_static;`,
       [
         account.id,
         account.acct,
         account.username,
         account.display_name,
         account.url,
-        account.avatar,
+        account.avatar
-        account.avatar_static
       ],
       (err) => {
         if (err !== null) {
-          console.error(`Could not insert/update account ${account.id}`, err);
+          log.error(`Could not insert/update account ${account.id}`, err);
           reject(err);
           return;
         }
-        db.run(`
+        resolve();
+      }
+    );
+  });
+}
+
+function savePostData(post: Post): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    db.run(
+      `
     INSERT INTO posts (id, content, created_at, url, account_id)
-          VALUES (?, ?, ?, ?, ?) ON CONFLICT(id) DO UPDATE SET
+    VALUES (?, ?, ?, ?, ?) ON CONFLICT(url) DO UPDATE SET
     content=excluded.content,
     created_at=excluded.created_at,
-          url=excluded.url,
+    id=excluded.id,
     account_id=excluded.account_id;`,
-          [
+      [post.id, post.content, post.created_at, post.url, post.account.url],
-            post.id,
-            post.content,
-            post.created_at,
-            post.url,
-            post.account.id
-          ],
       (postErr) => {
         if (postErr !== null) {
-              console.error(`Could not insert post ${post.url}`, postErr);
+          log.error(`Could not insert post ${post.url}`, postErr);
           reject(postErr);
           return;
         }
+        resolve();
+      }
+    );
+  });
+}
+
+function savePostTagData(post: Post): Promise<void> {
+  return new Promise<void>((resolve, reject) => {
+    if (!post.tags.length) {
+      resolve();
+      return;
+    }
 
     db.parallelize(() => {
       let remaining = post.tags.length;
-              for (let tag of post.tags) {
+      for (const tag of post.tags) {
-                db.run(`
+        db.run(
+          `
           INSERT INTO tags (url, tag) VALUES (?, ?)
           ON CONFLICT(url) DO UPDATE SET
           tag=excluded.tag;`,
-                  [
+          [tag.url, tag.name],
-                    tag.url,
-                    tag.name
-                  ],
           (tagErr) => {
             if (tagErr !== null) {
-                      console.error(`Could not insert/update tag ${tag.url}`, tagErr);
+              log.error(`Could not insert/update tag ${tag.url}`, tagErr);
               reject(tagErr);
               return;
             }
-                    db.run('INSERT INTO poststags (post_id, tag_url) VALUES (?, ?)',
+            db.run(
-                      [post.id, tag.url],
+              'INSERT INTO poststags (post_id, tag_url) VALUES (?, ?)',
+              [post.url, tag.url],
               (posttagserr) => {
                 if (posttagserr !== null) {
-                          console.error(`Could not insert poststags ${tag.url}, ${post.url}`, posttagserr);
+                  log.error(`Could not insert poststags ${tag.url}, ${post.url}`, posttagserr);
                   reject(posttagserr);
                   return;
                 }
@@ -172,7 +422,7 @@ export async function savePost(post: Post): Promise<undefined> {
                 remaining--;
                 // Only resolve after all have been inserted
                 if (remaining === 0) {
-                          resolve(undefined);
+                  resolve();
                 }
               }
             );
@@ -181,75 +431,301 @@ export async function savePost(post: Post): Promise<undefined> {
       }
     });
   });
-      });
-  });
 }
 
-export async function getPosts(since: string | null, before: string | null, limit: number) {
+function saveSongInfoData(postUrl: string, songs: SongInfo[]): Promise<void> {
-  let promise = await new Promise<Post[]>((resolve, reject) => {
+  return new Promise<void>((resolve, reject) => {
-    let filter_query;
+    if (songs.length === 0) {
-    let params: any = { $limit: limit };
+      resolve();
-    if (since === null && before === null) {
+      return;
-      filter_query = '';
-    } else if (since !== null) {
-      filter_query = 'WHERE posts.created_at > $since';
-      params.$since = since;
-    } else if (before !== null) {
-      // Setting both, before and since doesn't make sense, so this case is not explicitly handled
-      filter_query = 'WHERE posts.created_at < $before';
-      params.$before = before;
     }
+    db.parallelize(() => {
+      let remaining = songs.length;
+      for (const song of songs) {
+        db.run(
+          `
+          INSERT INTO songs (postedUrl, overviewUrl, type, youtubeUrl, title, artistName, thumbnailUrl, post_url, thumbnailWidth, thumbnailHeight)
+          VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+          `,
+          [
+            song.postedUrl,
+            song.pageUrl,
+            song.type,
+            song.youtubeUrl,
+            song.title,
+            song.artistName,
+            song.thumbnailUrl,
+            postUrl,
+            song.thumbnailWidth,
+            song.thumbnailHeight
+          ],
+          (songErr) => {
+            if (songErr !== null) {
+              log.error(`Could not insert song ${song.postedUrl}`, songErr);
+              reject(songErr);
+              return;
+            }
+            // Don't decrease on fail
+            remaining--;
+            // Only resolve after all have been inserted
+            if (remaining === 0) {
+              resolve();
+            }
+          }
+        );
+      }
+    });
+  });
+}
+
+export async function savePost(post: Post, songs: SongInfo[]) {
+  log.debug(`Saving post ${post.url}`);
+  if (!databaseReady) {
+    await waitReady();
+  }
+
+  const account = post.account;
+  await saveAccountData(account);
+  log.debug(`Saved account data ${post.url}`);
+  await savePostData(post);
+  log.debug(`Saved post data ${post.url}`);
+  await savePostTagData(post);
+  log.debug(`Saved ${post.tags.length} tag data ${post.url}`);
+  await saveSongInfoData(post.url, songs);
+  log.debug(
+    `Saved ${songs.length} song info data ${post.url}`,
+    songs.map((s) => s.thumbnailHeight)
+  );
+}
+
+function getPostData(filterQuery: string, params: FilterParameter): Promise<PostRow[]> {
   const sql = `SELECT posts.id, posts.content, posts.created_at, posts.url,
   accounts.id AS account_id, accounts.acct, accounts.username, accounts.display_name,
   accounts.url AS account_url, accounts.avatar
   FROM posts
-    JOIN accounts ON posts.account_id = accounts.id
+  JOIN accounts ON posts.account_id = accounts.url
-    ${filter_query}
+  ${filterQuery}
   ORDER BY created_at DESC
   LIMIT $limit`;
-    db.all(
+
-      sql,
+  return new Promise((resolve, reject) => {
-      params,
+    db.all(sql, params, (err, rows: PostRow[]) => {
-      (err, rows: any[]) => {
       if (err != null) {
-          console.error('Error loading posts', err);
+        log.error('Error loading posts', err);
         reject(err);
         return;
       }
-        if (rows.length === 0) {
+      resolve(rows);
-          // No need to check for tags
+    });
-          resolve([]);
+  });
-          return;
+}
-        }
+
-        const postIdsParams = rows.map(() => '?').join(', ');
+function getTagData(postIdsParams: string, postIds: string[]): Promise<Map<string, Tag[]>> {
+  return new Promise((resolve, reject) => {
     db.all(
       `SELECT post_id, tags.url, tags.tag
       FROM poststags
       JOIN tags ON poststags.tag_url = tags.url
       WHERE post_id IN (${postIdsParams});`,
-          rows.map((r: any) => r.id),
+      postIds,
-          (tagErr, tagRows: any[]) => {
+      (tagErr, tagRows: PostTagRow[]) => {
         if (tagErr != null) {
-              console.error('Error loading post tags', tagErr);
+          log.error('Error loading post tags', tagErr);
           reject(tagErr);
           return;
         }
-            const tagMap: Map<string, Tag[]> = tagRows.reduce(
+        const tagMap: Map<string, Tag[]> = tagRows.reduce((result: Map<string, Tag[]>, item) => {
-              (result: Map<string, Tag[]>, item) => {
           const tag: Tag = {
             url: item.url,
             name: item.tag
           };
-                result.set(item.post_id, [...result.get(item.post_id) || [], tag]);
+          result.set(item.post_id, [...(result.get(item.post_id) || []), tag]);
           return result;
         }, new Map());
-            const posts = rows.map(row => {
+        resolve(tagMap);
+      }
+    );
+  });
+}
+
+function getSongData(postIdsParams: string, postIds: string[]): Promise<Map<string, SongInfo[]>> {
+  return new Promise((resolve, reject) => {
+    db.all(
+      `SELECT post_url, songs.postedUrl, songs.overviewUrl, songs.type, songs.youtubeUrl,
+      songs.title, songs.artistName, songs.thumbnailUrl, songs.post_url, songs.thumbnailWidth, songs.thumbnailHeight
+      FROM songs
+      WHERE post_url IN (${postIdsParams});`,
+      postIds,
+      (tagErr, tagRows: SongRow[]) => {
+        if (tagErr != null) {
+          log.error('Error loading post songs', tagErr);
+          reject(tagErr);
+          return;
+        }
+        const songMap: Map<string, SongInfo[]> = tagRows.reduce(
+          (result: Map<string, SongInfo[]>, item) => {
+            const info = {
+              pageUrl: item.overviewUrl,
+              youtubeUrl: item.youtubeUrl,
+              type: item.type,
+              title: item.title,
+              artistName: item.artistName,
+              thumbnailUrl: item.thumbnailUrl,
+              postedUrl: item.postedUrl,
+              thumbnailHeight: item.thumbnailHeight,
+              thumbnailWidth: item.thumbnailWidth
+            } as SongInfo;
+            result.set(item.post_url, [...(result.get(item.post_url) || []), info]);
+            return result;
+          },
+          new Map()
+        );
+        log.verbose('songMap', songMap);
+        resolve(songMap);
+      }
+    );
+  });
+}
+
+function getAvatarData(
+  accountUrlsParams: string,
+  accountUrls: string[]
+): Promise<Map<string, AccountAvatar[]>> {
+  return new Promise((resolve, reject) => {
+    db.all(
+      `SELECT account_url, file, sizeDescriptor
+      FROM accountsavatars
+      WHERE account_url IN (${accountUrlsParams});`,
+      accountUrls,
+      (err, rows: AccountAvatarRow[]) => {
+        if (err != null) {
+          log.error('Error loading avatars', err);
+          reject(err);
+          return;
+        }
+        const avatarMap: Map<string, AccountAvatar[]> = rows.reduce(
+          (result: Map<string, AccountAvatar[]>, item) => {
+            const info: AccountAvatar = {
+              accountUrl: item.account_url,
+              file: item.file,
+              sizeDescriptor: item.sizeDescriptor
+            };
+            result.set(item.account_url, [...(result.get(item.account_url) || []), info]);
+            return result;
+          },
+          new Map()
+        );
+        resolve(avatarMap);
+      }
+    );
+  });
+}
+
+function getSongThumbnailData(
+  thumbUrlsParams: string,
+  thumbUrls: string[]
+): Promise<Map<string, SongThumbnailImage[]>> {
+  return new Promise((resolve, reject) => {
+    db.all(
+      `SELECT song_thumbnailUrl, file, sizeDescriptor, kind
+      FROM songsthumbnails
+      WHERE song_thumbnailUrl IN (${thumbUrlsParams});`,
+      thumbUrls,
+      (err, rows: SongThumbnailAvatarRow[]) => {
+        if (err != null) {
+          log.error('Error loading avatars', err);
+          reject(err);
+          return;
+        }
+        const thumbnailMap: Map<string, SongThumbnailImage[]> = rows.reduce(
+          (result: Map<string, SongThumbnailImage[]>, item) => {
+            const info: SongThumbnailImage = {
+              songThumbnailUrl: item.song_thumbnailUrl,
+              file: item.file,
+              sizeDescriptor: item.sizeDescriptor,
+              kind: item.kind
+            };
+            result.set(item.song_thumbnailUrl, [
+              ...(result.get(item.song_thumbnailUrl) || []),
+              info
+            ]);
+            return result;
+          },
+          new Map()
+        );
+        resolve(thumbnailMap);
+      }
+    );
+  });
+}
+
+export async function getPosts(
+  since: string | null,
+  before: string | null,
+  limit: number
+): Promise<Post[]> {
+  if (!databaseReady) {
+    await waitReady();
+  }
+  return await getPostsInternal(since, before, limit);
+}
+
+async function getPostsInternal(
+  since: string | null,
+  before: string | null,
+  limit: number
+): Promise<Post[]> {
+  let filterQuery = '';
+  const params: FilterParameter = { $limit: limit };
+  if (since === null && before === null) {
+    filterQuery = '';
+  } else if (since !== null) {
+    filterQuery = 'WHERE posts.created_at > $since';
+    params.$since = since;
+  } else if (before !== null) {
+    // Setting both, before and since doesn't make sense, so this case is not explicitly handled
+    filterQuery = 'WHERE posts.created_at < $before';
+    params.$before = before;
+  }
+
+  ignoredUsers.forEach((ignoredUser, index) => {
+    const userParam = `$user_${index}`;
+    const acctParam = userParam + 'a';
+    const usernameParam = userParam + 'u';
+    const prefix = filterQuery === '' ? ' WHERE' : ' AND';
+    filterQuery += `${prefix} acct != ${acctParam} AND username != ${usernameParam} `;
+    params[acctParam] = ignoredUser;
+    params[usernameParam] = ignoredUser;
+  });
+
+  const rows = await getPostData(filterQuery, params);
+  if (rows.length === 0) {
+    // No need to check for tags and songs
+    return [];
+  }
+
+  const postIdsParams = rows.map(() => '?').join(', ');
+  const postIds = rows.map((r: PostRow) => r.url);
+  const tagMap = await getTagData(postIdsParams, postIds);
+  const songMap = await getSongData(postIdsParams, postIds);
+  for (const entry of songMap) {
+    for (const songInfo of entry[1]) {
+      const thumbs = await getSongThumbnails(songInfo);
+      songInfo.resizedThumbnails = thumbs;
+    }
+  }
+
+  const accountUrls = [...new Set(rows.map((r: PostRow) => r.account_url))];
+  const accountUrlsParams = accountUrls.map(() => '?').join(', ');
+
+  const avatars = await getAvatarData(accountUrlsParams, accountUrls);
+  const posts = rows.map((row) => {
     return {
       id: row.id,
       content: row.content,
       created_at: row.created_at,
       url: row.url,
-                tags: tagMap.get(row.id) || [],
+      tags: tagMap.get(row.url) || [],
       account: {
         id: row.account_id,
         acct: row.acct,
@@ -257,16 +733,133 @@ export async function getPosts(since: string | null, before: string | null, limi
         display_name: row.display_name,
         url: row.account_url,
         avatar: row.avatar,
-                  avatar_static: ''
+        resizedAvatars: avatars.get(row.account_url) || []
-                } as Account
+      } as Account,
-              } as Post
+      songs: songMap.get(row.url) || []
+    } as Post;
   });
-            resolve(posts);
+  return posts;
-          }
-        );
-      }
-    );
-  });
-  return promise;
 }
 
+export async function removeAvatars(accountUrl: string): Promise<void> {
+  const params: FilterParameter = { $account: accountUrl };
+  const sql = `
+  DELETE
+  FROM accountsavatars
+  WHERE account_url = $account`;
+  await waitReady();
+  return new Promise((resolve, reject) => {
+    db.run(sql, params, (err) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+export async function saveSongThumbnail(thumb: SongThumbnailImage): Promise<void> {
+  // Will be null if file already existed
+  if (thumb.file === null) {
+    return;
+  }
+  const params: FilterParameter = {
+    $songId: thumb.songThumbnailUrl,
+    $file: thumb.file,
+    $sizeDescriptor: thumb.sizeDescriptor,
+    $kind: thumb.kind.valueOf()
+  };
+  const sql = `
+  INSERT INTO songsthumbnails
+  (song_thumbnailUrl, file, sizeDescriptor, kind) VALUES ($songId, $file, $sizeDescriptor, $kind)
+  ON CONFLICT(file) DO UPDATE SET
+  song_thumbnailUrl=excluded.song_thumbnailUrl,
+  sizeDescriptor=excluded.sizeDescriptor,
+  kind=excluded.kind;`;
+  await waitReady();
+  return new Promise((resolve, reject) => {
+    db.run(sql, params, (err) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+export async function saveAvatar(avatar: AccountAvatar): Promise<void> {
+  // Will be null if file already existed
+  if (avatar.file === null) {
+    return;
+  }
+  const params: FilterParameter = {
+    $accountUrl: avatar.accountUrl,
+    $file: avatar.file,
+    $sizeDescriptor: avatar.sizeDescriptor
+  };
+  const sql = `
+  INSERT INTO accountsavatars
+  (account_url, file, sizeDescriptor) VALUES ($accountUrl, $file, $sizeDescriptor)
+  ON CONFLICT(file) DO UPDATE SET
+  account_url=excluded.account_url,
+  sizeDescriptor=excluded.sizeDescriptor;`;
+  await waitReady();
+  return new Promise((resolve, reject) => {
+    db.run(sql, params, (err) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+export async function getAvatars(
+  accountUrl: string,
+  limit: number | undefined
+): Promise<AccountAvatar[]> {
+  // TODO: Refactor to use `getAvatarData`
+  await waitReady();
+  let limitFilter = '';
+  const params: FilterParameter = {
+    $account: accountUrl,
+    $limit: 100
+  };
+  if (limit !== undefined) {
+    limitFilter = 'LIMIT $limit';
+    params.$limit = limit;
+  }
+  const sql = `
+  SELECT account_url, file, sizeDescriptor
+  FROM accountsavatars
+  WHERE account_url = $account
+  ${limitFilter};`;
+  return new Promise((resolve, reject) => {
+    db.all(sql, params, (err, rows: AccountAvatarRow[]) => {
+      if (err) {
+        reject(err);
+        return;
+      }
+      resolve(
+        rows.map((r) => {
+          return {
+            accountUrl: r.account_url,
+            file: r.file,
+            sizeDescriptor: r.sizeDescriptor
+          } as AccountAvatar;
+        })
+      );
+    });
+  });
+}
+
+export async function getSongThumbnails(song: SongInfo): Promise<SongThumbnailImage[]> {
+  if (!song.thumbnailUrl) {
+    return [];
+  }
+  const rows = await getSongThumbnailData('?', [song.thumbnailUrl]);
+  return rows.get(song.thumbnailUrl) ?? [];
+}

src/lib/server/rss.ts

@@ -1,11 +1,13 @@
-import { BASE_URL } from '$env/static/private';
+import { BASE_URL, WEBSUB_HUB } from '$env/static/private';
 import { PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME } from '$env/static/public';
 import type { Post } from '$lib//mastodon/response';
+import { log } from '$lib/log';
 import { Feed } from 'feed';
 import fs from 'fs/promises';
 
 export function createFeed(posts: Post[]): Feed {
   const baseUrl = BASE_URL.endsWith('/') ? BASE_URL : BASE_URL + '/';
+  const hub = WEBSUB_HUB ? WEBSUB_HUB : undefined;
   const feed = new Feed({
     title: `${PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music feed`,
     description: `Posts about music on ${PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME}`,
@@ -19,27 +21,45 @@ export function createFeed(posts: Post[]): Feed {
     feedLinks: {
       atom: `${BASE_URL}/feed.xml`
     },
+    hub: hub,
     author: {
       name: '@aymm',
       link: 'https://metalhead.club/@aymm'
-    },
+    }
   });
-  posts.forEach(p => {
+  posts.forEach((p) => {
     feed.addItem({
       title: p.content,
       id: p.url,
       link: p.url,
       content: p.content,
-      author: [{
+      author: [
+        {
           name: p.account.acct,
           link: p.account.url
-      }],
+        }
+      ],
       date: new Date(p.created_at)
-    })
+    });
   });
   feed.addCategory('Music');
+
   return feed;
 }
 export async function saveAtomFeed(feed: Feed) {
   await fs.writeFile('feed.xml', feed.atom1(), { encoding: 'utf8' });
+  if (!WEBSUB_HUB) {
+    return;
+  }
+  try {
+    const params = new URLSearchParams();
+    params.append('hub.mode', 'publish');
+    params.append('hub.url', `${BASE_URL}/feed.xml`);
+    await fetch(WEBSUB_HUB, {
+      method: 'POST',
+      body: params
+    });
+  } catch (e) {
+    log.error('Failed to update WebSub hub', e);
+  }
 }

src/lib/server/timeline.ts

@@ -1,19 +1,56 @@
-import { HASHTAG_FILTER, MASTODON_INSTANCE, URL_FILTER, YOUTUBE_API_KEY } from '$env/static/private';
+import {
-import type { Post, Tag, TimelineEvent } from '$lib/mastodon/response';
+  HASHTAG_FILTER,
-import { getPosts, savePost } from '$lib/server/db';
+  MASTODON_ACCESS_TOKEN,
+  MASTODON_INSTANCE,
+  ODESLI_API_KEY,
+  YOUTUBE_API_KEY
+} from '$env/static/private';
+import { log } from '$lib/log';
+import type {
+  Account,
+  AccountAvatar,
+  Post,
+  SongThumbnailImage,
+  Tag,
+  TimelineEvent
+} from '$lib/mastodon/response';
+import { SongThumbnailImageKind } from '$lib/mastodon/response';
+import type { OdesliResponse, Platform, SongInfo } from '$lib/odesliResponse';
+import {
+  getAvatars,
+  getPosts,
+  getSongThumbnails,
+  removeAvatars,
+  saveAvatar,
+  savePost,
+  saveSongThumbnail
+} from '$lib/server/db';
 import { createFeed, saveAtomFeed } from '$lib/server/rss';
-import { WebSocket } from "ws";
+import { sleep } from '$lib/sleep';
+import crypto from 'crypto';
+import fs from 'fs/promises';
+import sharp from 'sharp';
+import { WebSocket } from 'ws';
 
-const YOUTUBE_REGEX = new RegExp(/https?:\/\/(www\.)?youtu((be.com\/.*?v=)|(\.be\/))(?<videoId>[a-zA-Z_0-9-]+)/gm);
+const URL_REGEX = new RegExp(/href="(?<postUrl>[^>]+?)" target="_blank"/gm);
+const INVIDIOUS_REGEX = new RegExp(/invidious.*?watch.*?v=(?<videoId>[a-zA-Z_0-9-]+)/gm);
+const YOUTUBE_REGEX = new RegExp(
+  /https?:\/\/(www\.)?youtu((be.com\/.*?v=)|(\.be\/))(?<videoId>[a-zA-Z_0-9-]+)/gm
+);
 
 export class TimelineReader {
   private static _instance: TimelineReader;
 
   private static async isMusicVideo(videoId: string) {
+    if (!YOUTUBE_API_KEY || YOUTUBE_API_KEY === 'CHANGE_ME') {
+      // Assume that it *is* a music link when no YT API key is provided
+      return true;
+    }
     const searchParams = new URLSearchParams([
       ['part', 'snippet'],
       ['id', videoId],
-      ['key', YOUTUBE_API_KEY]]);
+      ['key', YOUTUBE_API_KEY]
+    ]);
     const youtubeVideoUrl = new URL(`https://www.googleapis.com/youtube/v3/videos?${searchParams}`);
     const resp = await fetch(youtubeVideoUrl);
     const respObj = await resp.json();
@@ -23,82 +60,363 @@ export class TimelineReader {
     }
 
     const item = respObj.items[0];
-    if (item.tags?.includes('music')) {
+    if (!item.snippet) {
+      console.warn('Could not load snippet for video', videoId, item);
+      return false;
+    }
+    if (item.snippet.tags?.includes('music')) {
       return true;
     }
 
     const categorySearchParams = new URLSearchParams([
       ['part', 'snippet'],
-      ['id', item.categoryId],
+      ['id', item.snippet.categoryId],
-      ['key', YOUTUBE_API_KEY]]);
+      ['key', YOUTUBE_API_KEY]
-    const youtubeCategoryUrl = new URL(`https://www.googleapis.com/youtube/v3/videoCategories?${categorySearchParams}`);
+    ]);
-    const categoryTitle: string = await fetch(youtubeCategoryUrl).then(r => r.json()).then(r => r.items[0]?.title);
+    const youtubeCategoryUrl = new URL(
+      `https://www.googleapis.com/youtube/v3/videoCategories?${categorySearchParams}`
+    );
+    const categoryTitle: string = await fetch(youtubeCategoryUrl)
+      .then((r) => r.json())
+      .then((r) => r.items[0]?.snippet?.title);
     return categoryTitle === 'Music';
   }
 
-  private static async checkYoutubeMatches(postContent: string): Promise<boolean> {
+  public static async getSongInfoInPost(post: Post): Promise<SongInfo[]> {
-    const matches = postContent.matchAll(YOUTUBE_REGEX);
+    const urlMatches = post.content.matchAll(URL_REGEX);
-    for (let match of matches) {
+    const songs: SongInfo[] = [];
+    for (const match of urlMatches) {
       if (match === undefined || match.groups === undefined) {
+        log.warn('Match listed in allMatches, but either it or its groups are undefined', match);
         continue;
       }
-      const videoId = match.groups.videoId.toString();
+      const urlMatch = match.groups.postUrl.toString();
+      let url: URL;
       try {
-        const isMusic = await TimelineReader.isMusicVideo(videoId);
+        url = new URL(urlMatch);
-        if (isMusic) {
-          return true;
-        }
       } catch (e) {
-        console.error('Could not check if', videoId, 'is a music video', e);
+        log.error('URL found via Regex does not seem to be a valud url', urlMatch, e);
-      }
+        continue;
-    }
-    return false;
       }
 
-  private constructor() {
+      // Check *all* found url and let odesli determine if it is music or not
-    const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
+      log.debug(`Checking ${url} if it contains song data`);
-    socket.onopen = (_event) => {
+      const info = await TimelineReader.getSongInfo(url);
-      socket.send('{ "type": "subscribe", "stream": "public:local"}');
+      log.debug(`Found song info for ${url}?`, info);
+      if (info) {
+        songs.push(info);
+      }
+    }
+    return songs;
+  }
+
+  private static async getSongInfo(url: URL, remainingTries = 6): Promise<SongInfo | null> {
+    if (remainingTries === 0) {
+      log.error('No tries remaining. Lookup failed!');
+      return null;
+    }
+    if (url.hostname === 'songwhip.com') {
+      // song.link doesn't support songwhip links and songwhip themselves will provide metadata if you pass in a
+      // Apple Music/Spotify/etc link, but won't when provided with their own link, so no way to extract song info
+      // except maybe scraping their HTML
+      return null;
+    }
+
+    const videoId = INVIDIOUS_REGEX.exec(url.href)?.groups?.videoId;
+    const urlString =
+      videoId !== undefined ? `https://youtube.com/watch?v=${videoId}` : url.toString();
+
+    const odesliParams = new URLSearchParams();
+    odesliParams.append('url', urlString);
+    odesliParams.append('userCountry', 'DE');
+    odesliParams.append('songIfSingle', 'true');
+    if (ODESLI_API_KEY && ODESLI_API_KEY !== 'CHANGE_ME') {
+      odesliParams.append('key', ODESLI_API_KEY);
+    }
+    const odesliApiUrl = `https://api.song.link/v1-alpha.1/links?${odesliParams}`;
+    try {
+      const response = await fetch(odesliApiUrl);
+      if (response.status === 429) {
+        throw new Error('Rate limit reached', { cause: 429 });
+      }
+      const odesliInfo: OdesliResponse = await response.json();
+      if (!odesliInfo || !odesliInfo.entitiesByUniqueId || !odesliInfo.entityUniqueId) {
+        return null;
+      }
+      const info = odesliInfo.entitiesByUniqueId[odesliInfo.entityUniqueId];
+      const platform: Platform = 'youtube';
+      if (info.platforms.includes(platform)) {
+        const youtubeId =
+          videoId ??
+          YOUTUBE_REGEX.exec(url.href)?.groups?.videoId ??
+          new URL(odesliInfo.pageUrl).pathname.split('/y/').pop();
+        if (youtubeId === undefined) {
+          log.warn('Looks like a youtube video, but could not extract a video id', url, odesliInfo);
+          return null;
+        }
+        const isMusic = await TimelineReader.isMusicVideo(youtubeId);
+        if (!isMusic) {
+          log.debug('Probably not a music video', url);
+          return null;
+        }
+      }
+      return {
+        ...info,
+        pageUrl: odesliInfo.pageUrl,
+        youtubeUrl: odesliInfo.linksByPlatform[platform]?.url,
+        postedUrl: url.toString()
+      } as SongInfo;
+    } catch (e) {
+      if (e instanceof Error && e.cause === 429) {
+        log.warn('song.link rate limit reached. Trying again in 10 seconds');
+        await sleep(10_000);
+        return await this.getSongInfo(url, remainingTries - 1);
+      }
+      log.error(`Failed to load ${url} info from song.link`, e);
+      return null;
+    }
+  }
+
+  private static async resizeAvatar(
+    baseName: string,
+    size: number,
+    suffix: string,
+    folder: string,
+    sharpAvatar: sharp.Sharp
+  ): Promise<string | null> {
+    const fileName = `${folder}/${baseName}_${suffix}`;
+    const exists = await fs
+      .access(fileName, fs.constants.F_OK)
+      .then(() => true)
+      .catch(() => false);
+    if (exists) {
+      log.debug('File already exists', fileName);
+      return null;
+    }
+    log.debug('Saving avatar', fileName);
+    await sharpAvatar.resize(size).toFile(fileName);
+    return fileName;
+  }
+
+  private static resizeAvatarPromiseMaker(
+    avatarFilenameBase: string,
+    baseSize: number,
+    maxPixelDensity: number,
+    accountUrl: string,
+    formats: string[],
+    avatar: ArrayBuffer
+  ): Promise<void>[] {
+    const sharpAvatar = sharp(avatar);
+    const promises: Promise<void>[] = [];
+    for (let i = 1; i <= maxPixelDensity; i++) {
+      promises.push(
+        ...formats.map((f) =>
+          TimelineReader.resizeAvatar(
+            avatarFilenameBase,
+            baseSize * i,
+            `${i}x.${f}`,
+            'avatars',
+            sharpAvatar
+          )
+            .then(
+              (fn) =>
+                ({
+                  accountUrl: accountUrl,
+                  file: fn,
+                  sizeDescriptor: `${i}x`
+                }) as AccountAvatar
+            )
+            .then(saveAvatar)
+        )
+      );
+    }
+    return promises;
+  }
+
+  private static resizeThumbnailPromiseMaker(
+    filenameBase: string,
+    baseSize: number,
+    maxPixelDensity: number,
+    songThumbnailUrl: string,
+    formats: string[],
+    image: ArrayBuffer,
+    kind: SongThumbnailImageKind
+  ): Promise<void>[] {
+    const sharpAvatar = sharp(image);
+    const promises: Promise<void>[] = [];
+    for (let i = 1; i <= maxPixelDensity; i++) {
+      promises.push(
+        ...formats.map((f) =>
+          TimelineReader.resizeAvatar(
+            filenameBase,
+            baseSize * i,
+            `${i}x.${f}`,
+            'thumbnails',
+            sharpAvatar
+          )
+            .then(
+              (fn) =>
+                ({
+                  songThumbnailUrl: songThumbnailUrl,
+                  file: fn,
+                  sizeDescriptor: `${i}x`,
+                  kind: kind
+                }) as SongThumbnailImage
+            )
+            .then(saveSongThumbnail)
+        )
+      );
+    }
+    return promises;
+  }
+
+  private static async saveAvatar(account: Account) {
+    try {
+      const existingAvatars = await getAvatars(account.url, 1);
+      const existingAvatarBase = existingAvatars.shift()?.file.split('/').pop()?.split('_').shift();
+      const avatarFilenameBase =
+        new URL(account.avatar).pathname.split('/').pop()?.split('.').shift() ?? account.acct;
+
+      // User's avatar changed. Remove the old one!
+      if (existingAvatarBase && existingAvatarBase !== avatarFilenameBase) {
+        await removeAvatars(account.url);
+        const avatarsToDelete = (await fs.readdir('avatars'))
+          .filter((x) => x.startsWith(existingAvatarBase + '_'))
+          .map((x) => {
+            log.debug('Removing existing avatar file', x);
+            return x;
+          })
+          .map((x) => fs.unlink('avatars/' + x));
+        await Promise.allSettled(avatarsToDelete);
+      }
+      const avatarResponse = await fetch(account.avatar);
+      const avatar = await avatarResponse.arrayBuffer();
+      await Promise.all(
+        TimelineReader.resizeAvatarPromiseMaker(
+          avatarFilenameBase,
+          50,
+          3,
+          account.url,
+          ['webp', 'avif', 'jpeg'],
+          avatar
+        )
+      );
+    } catch (e) {
+      console.error('Could not resize and save avatar for', account.acct, account.avatar, e);
+    }
+  }
+
+  private static async saveSongThumbnails(songs: SongInfo[]) {
+    for (const song of songs) {
+      if (!song.thumbnailUrl) {
+        continue;
+      }
+      try {
+        const existingThumbs = await getSongThumbnails(song);
+        if (existingThumbs.length) {
+          continue;
+        }
+        const fileBaseName = crypto.createHash('sha256').update(song.thumbnailUrl).digest('hex');
+        const imageResponse = await fetch(song.thumbnailUrl);
+        const avatar = await imageResponse.arrayBuffer();
+        await Promise.all(
+          TimelineReader.resizeThumbnailPromiseMaker(
+            fileBaseName + '_large',
+            200,
+            3,
+            song.thumbnailUrl,
+            ['webp', 'avif', 'jpeg'],
+            avatar,
+            SongThumbnailImageKind.Big
+          )
+        );
+        await Promise.all(
+          TimelineReader.resizeThumbnailPromiseMaker(
+            fileBaseName + '_small',
+            60,
+            3,
+            song.thumbnailUrl,
+            ['webp', 'avif', 'jpeg'],
+            avatar,
+            SongThumbnailImageKind.Small
+          )
+        );
+      } catch (e) {
+        console.error(
+          'Could not resize and save song thumbnail for',
+          song.pageUrl,
+          song.thumbnailUrl,
+          e
+        );
+      }
+    }
+  }
+
+  private startWebsocket() {
+    const socket = new WebSocket(
+      `wss://${MASTODON_INSTANCE}/api/v1/streaming?type=subscribe&stream=public:local&access_token=${MASTODON_ACCESS_TOKEN}`
+    );
+    socket.onopen = () => {
+      log.log('Connected to WS');
     };
-    socket.onmessage = (async (event) => {
+    socket.onmessage = async (event) => {
       try {
         const data: TimelineEvent = JSON.parse(event.data.toString());
         if (data.event !== 'update') {
+          log.log('Ignoring ES event', data.event);
           return;
         }
         const post: Post = JSON.parse(data.payload);
+
         const hashttags: string[] = HASHTAG_FILTER.split(',');
         const found_tags: Tag[] = post.tags.filter((t: Tag) => hashttags.includes(t.name));
 
-        const urls: string[] = URL_FILTER.split(',');
+        const songs = await TimelineReader.getSongInfoInPost(post);
-        const found_urls = urls.filter(t => post.content.includes(t));
 
         // If we don't have any tags or non-youtube urls, check youtube
         // YT is handled separately, because it requires an API call and therefore is slower
-        if (found_urls.length === 0 &&
+        if (songs.length === 0 && found_tags.length === 0) {
-          found_tags.length === 0 &&
+          log.log('Ignoring post', post.url);
-          !await TimelineReader.checkYoutubeMatches(post.content)) {
           return;
         }
-        await savePost(post);
+
+        await savePost(post, songs);
+
+        await TimelineReader.saveAvatar(post.account);
+        await TimelineReader.saveSongThumbnails(songs);
+
+        log.debug('Saved post', post.url);
+
         const posts = await getPosts(null, null, 100);
         await saveAtomFeed(createFeed(posts));
-
       } catch (e) {
-        console.error("error message", event, event.data, e)
+        log.error('error message', event, event.data, e);
       }
-
+    };
-    });
     socket.onclose = (event) => {
-      console.log("Closed", event, event.code, event.reason)
+      log.warn(
+        `Websocket connection to ${MASTODON_INSTANCE} closed. Code: ${event.code}, reason: '${event.reason}'`,
+        event
+      );
+      setTimeout(() => {
+        log.info(`Attempting to reconenct to WS`);
+        this.startWebsocket();
+      }, 10000);
     };
     socket.onerror = (event) => {
-      console.log("error", event, event.message, event.error)
+      log.error(
+        `Websocket connection to ${MASTODON_INSTANCE} failed. ${event.type}: ${event.error}, message: '${event.message}'`
+      );
     };
+  }
 
+  private constructor() {
+    log.log('Constructing timeline object');
+    this.startWebsocket();
   }
 
   public static init() {
+    log.log('Timeline object init');
     if (this._instance === undefined) {
       this._instance = new TimelineReader();
     }

src/lib/sleep.ts

@@ -0,0 +1,5 @@
+export function sleep(timeInMs: number): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, timeInMs);
+  });
+}

src/lib/truthyString.ts

@@ -0,0 +1,7 @@
+export function isTruthy(value: string | number | boolean | null | undefined): boolean {
+  if (typeof value === 'string') {
+    return value.toLowerCase() === 'true' || !!+value; // here we parse to number first
+  }
+
+  return !!value;
+}

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import FooterComponent from '$lib/components/FooterComponent.svelte'
+  import FooterComponent from '$lib/components/FooterComponent.svelte';
   import { SvelteToast } from '@zerodevx/svelte-toast';
 
   const options = {
@@ -7,6 +7,7 @@
     classes: ['toast']
   };
 </script>
+
 <slot />
 <SvelteToast {options} />
 <div class="footer">
@@ -33,4 +34,9 @@
     align-items: center;
     gap: 10px;
   }
+  @media only screen and (max-width: 620px) {
+    .footer {
+      width: 100%;
+    }
+  }
 </style>

src/routes/+page.svelte

@@ -1,45 +1,48 @@
 <script lang="ts">
-import { onMount } from "svelte";
+  import { onMount } from 'svelte';
-import type { PageData } from './$types';
+  import type { PageData } from './$types';
-import type { Post } from '$lib/mastodon/response';
+  import type { Post } from '$lib/mastodon/response';
-import { PUBLIC_REFRESH_INTERVAL, PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME } from '$env/static/public';
+  import {
-import PostComponent from '$lib/components/PostComponent.svelte';
+    PUBLIC_REFRESH_INTERVAL,
-import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
+    PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME
-import { fly, type FlyParams } from 'svelte/transition';
+  } from '$env/static/public';
-import { cubicInOut } from 'svelte/easing';
+  import PostComponent from '$lib/components/PostComponent.svelte';
-import { errorToast } from '$lib/errorToast'
+  import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
+  import { fly, type FlyParams } from 'svelte/transition';
+  import { cubicInOut } from 'svelte/easing';
+  import { errorToast } from '$lib/errorToast';
 
+  export let data: PageData;
 
-export let data: PageData;
+  interface FetchOptions {
+    since?: string;
+    before?: string;
+    count?: number;
+  }
 
-interface FetchOptions {
+  interface EdgeFlyParams extends FlyParams {
-  since?: string,
+    created_at: string;
-  before?: string,
+  }
-  count?: number
-}
 
-interface EdgeFlyParams extends FlyParams {
+  const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
-  created_at: string
+  let interval: ReturnType<typeof setTimeout> | null = null;
-}
+  let moreOlderPostsAvailable = true;
+  let loadingOlderPosts = false;
 
-const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
+  // Needed, so that edgeFly() can do its thing:
-let interval: NodeJS.Timer | null = null;
+  // To determine whether a newly loaded post is older than the existing ones, is required to know what the oldest
-let moreOlderPostsAvailable = true;
+  // post was, before the fetch happened.
-let loadingOlderPosts = false;
+  let oldestBeforeLastFetch: number | null = null;
 
-// Needed, so that edgeFly() can do its thing:
+  /**
-// To determine whether a newly loaded post is older than the existing ones, is required to know what the oldest
-// post was, before the fetch happened.
-let oldestBeforeLastFetch: number | null = null;
-
-/**
    * Animate either from the top, or the bottom of the window, depending if the post is
    * newer than the existing ones or older.
    */
-function edgeFly(node: Element, opts: EdgeFlyParams) {
+  function edgeFly(node: Element, opts: EdgeFlyParams) {
     const createdAt = new Date(opts.created_at).getTime();
     const diffNewest = Math.abs(new Date(data.posts[0].created_at).getTime() - createdAt);
-  const oldest = oldestBeforeLastFetch !== null
+    const oldest =
+      oldestBeforeLastFetch !== null
         ? oldestBeforeLastFetch
         : new Date(data.posts[data.posts.length - 1].created_at).getTime();
     const diffOldest = Math.abs(oldest - createdAt);
@@ -50,9 +53,9 @@ function edgeFly(node: Element, opts: EdgeFlyParams) {
     let offset = isNaN(paramY) ? 0 : paramY + rect.height;
     opts.y = fromTop ? -offset : window.innerHeight + offset;
     return fly(node, opts);
-}
+  }
 
-async function fetchPosts(options: FetchOptions): Promise<Post[]> {
+  async function fetchPosts(options: FetchOptions): Promise<Post[]> {
     const params = new URLSearchParams();
     if (options?.since !== undefined) {
       params.set('since', options.since);
@@ -66,20 +69,21 @@ async function fetchPosts(options: FetchOptions): Promise<Post[]> {
 
     const response = await fetch(`/api/posts?${params}`);
     return await response.json();
-}
+  }
 
-function filterDuplicates(posts: Post[]): Post[] {
+  function filterDuplicates(posts: Post[]): Post[] {
     return posts.filter((obj, index, arr) => {
-    return arr.map(mapObj => mapObj.url).indexOf(obj.url) === index;
+      return arr.map((mapObj) => mapObj.url).indexOf(obj.url) === index;
     });
-}
+  }
 
-function refresh() {
+  function refresh() {
     let filter: FetchOptions = {};
     if (data.posts.length > 0) {
       filter = { since: data.posts[0].created_at };
     }
-  fetchPosts(filter).then(resp => {
+    fetchPosts(filter)
+      .then((resp) => {
         if (resp.length > 0) {
           // Prepend new posts, filter dupes
           // There shouldn't be any duplicates, but better be safe than sorry
@@ -89,9 +93,9 @@ function refresh() {
       .catch((e: Error) => {
         errorToast('Error loading newest posts: ' + e.message);
       });
-}
+  }
 
-onMount(async () => {
+  onMount(async () => {
     if (data.posts.length > 0) {
       oldestBeforeLastFetch = new Date(data.posts[data.posts.length - 1].created_at).getTime();
     }
@@ -109,12 +113,12 @@ onMount(async () => {
 
     return () => {
       if (interval !== null) {
-      clearInterval(interval)
+        clearInterval(interval);
       }
-  }
+    };
-});
+  });
 
-function loadOlderPosts() {
+  function loadOlderPosts() {
     loadingOlderPosts = true;
     const filter: FetchOptions = { count: 20 };
     if (data.posts.length > 0) {
@@ -123,8 +127,8 @@ function loadOlderPosts() {
       oldestBeforeLastFetch = new Date(before).getTime();
     }
 
-
+    fetchPosts(filter)
-  fetchPosts(filter).then(resp => {
+      .then((resp) => {
         if (resp.length > 0) {
           // Append old posts, filter dupes
           // There shouldn't be any duplicates, but better be safe than sorry
@@ -136,28 +140,32 @@ function loadOlderPosts() {
         }
         loadingOlderPosts = false;
       })
-  .catch(e => {
+      .catch((e) => {
         loadingOlderPosts = false;
         errorToast('Error loading older posts: ' + e.message);
       });
-
+  }
-}
-
 </script>
+
 <svelte:head>
   <title>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</title>
 </svelte:head>
 <h2>{PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME} music list</h2>
 <div class="wrapper">
-  <div></div>
+  <div />
   <div class="posts">
     {#if data.posts.length === 0}
-    Sorry, no posts recommending music aave been found yet
+      Sorry, no posts recommending music have been found yet
     {/if}
     {#each data.posts as post (post.url)}
       <div
         class="post"
-        transition:edgeFly="{{ y: 10, created_at: post.created_at, duration: 300, easing: cubicInOut }}"
+        transition:edgeFly|global={{
+          y: 10,
+          created_at: post.created_at,
+          duration: 300,
+          easing: cubicInOut
+        }}
       >
         <PostComponent {post} />
       </div>
@@ -165,10 +173,12 @@ function loadOlderPosts() {
     <LoadMoreComponent
       on:loadOlderPosts={loadOlderPosts}
       moreAvailable={moreOlderPostsAvailable}
-    isLoading={loadingOlderPosts}/>
+      isLoading={loadingOlderPosts}
-  </div>
+    />
-  <div></div>
   </div>
+  <div />
+</div>
+
 <style>
   .posts {
     display: flex;
@@ -177,7 +187,7 @@ function loadOlderPosts() {
   }
   .post {
     width: 100%;
-    max-width: 600px;
+    max-width: min(800px, 80vw);
     margin-bottom: 1em;
     border-bottom: 1px solid var(--color-border);
     padding: 1em;
@@ -191,4 +201,11 @@ function loadOlderPosts() {
     text-align: center;
     z-index: 100;
   }
+
+  @media only screen and (max-width: 650px) {
+    .post {
+      max-width: calc(100vw - 16px);
+      padding: 1em 0;
+    }
+  }
 </style>

src/routes/+page.ts

@@ -4,6 +4,6 @@ import type { PageLoad } from './$types';
 export const load = (async ({ fetch }) => {
   const p = await fetch('/');
   return {
-        posts: await p.json() as Post[]
+    posts: (await p.json()) as Post[]
   };
 }) satisfies PageLoad;

static/style.css

@@ -1,58 +0,0 @@
-body {
-  --color-blue: hsl(259, 82%, 26%);
-  --color-blue-dark: hsl(259, 82%, 10%);
-  --color-lavender: hsl(273, 43%, 65%);
-  --color-mauve: hsl(286, 73%, 81%);
-
-  --color-grey: hsl(44, 7%, 41%);
-  --color-grey-translucent: hsla(44, 7%, 41%, 0.2);
-  --color-grey-light: hsl(42, 7%, 72%);
-
-  --color-red: hsl(7, 100%, 56%);
-  --color-red-light: hsl(7, 100%, 61%);
-  --color-red-lighter: hsl(7, 100%, 68%);
-  --color-red-dark: hsl(7, 100%, 48%);
-  --color-red-desat: hsl(7, 20%, 56%);
-  --color-red-desat-dark: hsl(7, 20%, 30%);
-  --color-red-desat-desat: hsl(7, 8%, 56%);
-
-
-  --color-text: var(--color-blue);
-  --color-border: var(--color-grey);
-  --color-link: var(--color-mauve);
-  --color-link-visited: var(--color-lavender);
-  --color-bg: var(--color-grey-light);
-  --color-button: var(--color-red-light);
-  --color-button-shadow: var(--color-red-desat-dark);
-  --color-button-hover: var(--color-red);
-  --color-button-deactivated: var(--color-red-desat-desat);
-  --color-button-text: var(--color-blue-dark);
-
-  color: var(--color-text);
-  background-color: var(--color-bg);
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
-  Ubuntu, Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif,
-  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-a {
-  color: var(--color-link);
-}
-a:visited {
-  color: var(--color-link-visited);
-}
-
-@media (prefers-color-scheme: dark) {
-  body {
-    --color-text: var(--color-grey-light);
-    --color-border: var(--color-grey-light);
-    --color-link: var(--color-mauve);
-    --color-link-visited: var(--color-lavender);
-    --color-bg: var(--color-blue);
-    --color-button: var(--color-red-light);
-    --color-button-shadow: var(--color-red-desat);
-    --color-button-hover: var(--color-red);
-    --color-button-deactivated: var(--color-red-desat-desat);
-    --color-button-text: var(--color-blue-dark);
-  }
-}

svelte.config.js

@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-node';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
@@ -12,7 +12,15 @@ const config = {
     // If your environment is not supported or you settled on a specific environment, switch out the adapter.
     // See https://kit.svelte.dev/docs/adapters for more information about adapters.
     adapter: adapter(),
-  },
+
+    csp: {
+      directives: {
+        'script-src': ['self', 'unsafe-inline'],
+        'base-uri': ['self'],
+        'object-src': ['none']
+      }
+    }
+  }
 };
 
 export default config;

vite.config.ts

@@ -1,6 +1,16 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
+import { defineConfig, searchForWorkspaceRoot } from 'vite';
 
 export default defineConfig({
-  plugins: [sveltekit()]
+  plugins: [sveltekit()],
+  server: {
+    fs: {
+      allow: [
+        // search up for workspace root
+        searchForWorkspaceRoot(process.cwd()),
+        // your custom rules
+        'avatars'
+      ]
+    }
+  }
 });