README.md

@@ -33,7 +33,7 @@ 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:
@@ -51,6 +51,7 @@ 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.
@@ -77,6 +78,7 @@ 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
@@ -91,11 +93,12 @@ If you do, add the path to your SSLCertificateFile and SSLCertificateKeyFile.
 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`.
 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*. As soon as #13 is implemented, this will be optional!
 
 Run `npm run build` and copy the output folder, usually `build` to `$APP_DIR` on your server.
 

faviconDescription.json

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

src/app.html

@@ -12,18 +12,18 @@
 		<meta name="msapplication-TileColor" content="#2e0b78" />
 		<meta name="theme-color" content="#2e0b78" />
 		<link rel="stylesheet" href="%sveltekit.assets%/style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#17063b" media="(prefers-color-scheme: dark)" />
+		<meta name="viewport" content="width=device-width" />
+		<meta name="theme-color" content="#2E0B78" 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" />
 		%sveltekit.head%
 		<style>
 			body {
-        --color-text: #2f0c7a;
+				--color-text: #2F0C7A;
 				--color-bg: white;
-        --color-border: #17063b;
-        --color-link: #563acc;
-        --color-link-visited: #858afa;
+				--color-border: #17063B;
+				--color-link: #563ACC;
+				--color-link-visited: #858AFA;
 
 				color: var(--color-text);
 				background-color: var(--color-bg);
@@ -39,10 +39,10 @@
 			@media (prefers-color-scheme: dark) {
 				body {
 					--color-text: white;
-          --color-bg: #17063b;
+					--color-bg: #17063B;
 					--color-border: white;
-          --color-link: #8a9bf0;
-          --color-link-visited: #c384fb;
+					--color-link: #8A9BF0;
+					--color-link-visited: #C384FB;
 				}
 			}
 		</style>

src/hooks.server.ts

@@ -24,7 +24,10 @@ export const handle = (async ({ event, resolve }) => {
   }
   if (event.url.pathname === '/feed.xml') {
     const f = await fs.readFile('feed.xml', { encoding: 'utf8' });
-    return new Response(f, { headers: [['Content-Type', 'application/atom+xml']] });
+    return new Response(
+      f,
+      { headers: [['Content-Type', 'application/atom+xml']] }
+    );
   }
 
   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,10 +3,10 @@
 
   export let account: Account;
   let avatarDescription: string;
-  $: avatarDescription = `Avatar for ${account.acct}`;
+  $: avatarDescription = `Avatar for ${account.acct}`
 </script>
 
-<img src={account.avatar} alt={avatarDescription} />
+<img src="{account.avatar}" alt={avatarDescription}/>
 
 <style>
 img {
@@ -15,6 +15,6 @@
   width: auto;
   height: auto;
   object-fit: contain;
-    border-radius: 3px;
+  border-radius: 3px;;
 }
 </style>

src/lib/components/FooterComponent.svelte

@@ -5,25 +5,21 @@
 
 <div class="footer">
     <div>
-    <span class="label"
-      >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
-    >
+        <span>Made with &#x1F918; by&nbsp;</span>
+        <a href="https://metalhead.club/@aymm" rel="me">@aymm@metalhead.club</a>
     </div>
     |
     <div>
         <a href="https://phlaym.net/git/phlaym/moshing-mammut">
             <img alt="Git branch" src={git} class="icon" />
-      <span class="label">Source Code</span>
+            Source Code
         </a>
     </div>
     |
     <div>
         <a href="/feed.xml">
             <img alt="RSS" src={rss} class="icon" />
-      <span class="label">RSS<span class="feedSuffix">&nbsp;Feed</span></span>
+            RSS Feed
         </a>
     </div>
 </div>
@@ -57,27 +53,4 @@
       background-color: var(--color-grey-translucent);
     }
   }
-  @media only screen and (max-device-width: 620px) {
-    .mastodonInstance,
-    .feedSuffix {
-      display: none;
-    }
-    .footer {
-      justify-content: center;
-    }
-  }
-
-  @media only screen and (max-device-width: 430px) {
-    .mastodonInstance,
-    .feedSuffix,
-    .secretIngredient {
-      display: none;
-    }
-  }
-
-  @media only screen and (max-device-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 = false;
-  export let isLoading = false;
+  export let moreAvailable: boolean = false;
+  export let isLoading: boolean = false;
   let displayText = '';
   let title = '';
   let disabled: boolean;
@@ -14,7 +14,7 @@
       displayText = 'You reached the end';
   } else {
       displayText = 'Load More';
-  }
+  };
   $: disabled = !moreAvailable || isLoading;
   $: title = moreAvailable ? 'Load More' : 'There be dragons!';
 
@@ -27,7 +27,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,10 +1,9 @@
 <script lang="ts">
-  export let size = '64px';
-  export let thickness = '6px';
+  export let size: string = '64px';
+  export let thickness: string = '6px';
 </script>
 
-<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}" />
-
+<div class="lds-dual-ring" style="--size: {size}; --thickness: {thickness}"></div>
 <style>
   .lds-dual-ring {
     display: inline-block;
@@ -12,7 +11,7 @@
     height: 100%;
   }
   .lds-dual-ring:after {
-    content: ' ';
+    content: " ";
     display: block;
     width: var(--size);
     height: var(--size);
@@ -35,4 +34,5 @@
       transform: rotate(360deg);
     }
   }
+
 </style>

src/lib/components/PostComponent.svelte

@@ -3,7 +3,7 @@
   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;
@@ -19,15 +19,16 @@
     // 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="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>

src/lib/mastodon/response.ts

@@ -1,28 +1,29 @@
 export interface TimelineEvent {
-  event: string;
-  payload: string;
+  event: string,
+  payload: string
 }
 
 export interface Post {
-  id: string;
-  created_at: string;
-  tags: Tag[];
-  url: string;
-  content: string;
-  account: Account;
+  id: string,
+  created_at: string,
+  tags: Tag[],
+  url: string,
+  content: string,
+  account: Account
+
 }
 
 export interface Tag {
-  name: string;
-  url: string;
+  name: string,
+  url: string
 }
 
 export interface Account {
-  id: string;
-  acct: string;
-  username: string;
-  display_name: string;
-  url: string;
-  avatar: string;
-  avatar_static: string;
+  id: string,
+  acct: string,
+  username: string,
+  display_name: string,
+  url: string,
+  avatar: string,
+  avatar_static: string
 }

src/lib/relativeTime.ts

@@ -11,7 +11,10 @@ export const time = readable(new Date(), function start(set) {
 });
 
 export function secondsSince(date: Date): Readable<number> {
-  return derived(time, ($time) => Math.round(($time.getTime() - date.getTime()) / 1000));
+  return derived(
+    time,
+    $time => Math.round(($time.getTime() - date.getTime()) / 1000)
+  );
 }
 
 export function relativeTime(seconds: number): string | null {
@@ -27,7 +30,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

@@ -9,7 +9,7 @@ if (DEV && env.VERBOSE === 'true') {
   sqlite3.verbose();
   db.on('change', (t, d, table, rowid) => {
     console.debug('DB change event', t, d, table, rowid);
-  });
+  })
 
   db.on('trace', (sql) => {
     console.debug('Running', sql);
@@ -21,9 +21,9 @@ if (DEV && env.VERBOSE === 'true') {
 }
 
 interface Migration {
-  id: number;
-  name: string;
-  statement: string;
+  id: number,
+  name: string,
+  statement: string
 }
 
 db.on('open', () => {
@@ -37,24 +37,20 @@ db.on('open', () => {
     }
     console.debug('Already applied migrations', rows);
     const appliedMigrations: Set<number> = new Set(rows.map((row: any) => row['id']));
-    const toApply = getMigrations().filter((m) => !appliedMigrations.has(m.id));
-    for (const migration of toApply) {
+    const toApply = getMigrations().filter(m => !appliedMigrations.has(m.id));
+    for (let migration of toApply) {
       db.exec(migration.statement, (err) => {
         if (err !== null) {
           console.error(`Failed to apply migration ${migration.name}`, err);
           return;
         }
-        db.run(
-          'INSERT INTO migrations (id, name) VALUES(?, ?)',
-          [migration.id, migration.name],
-          (e: Error) => {
+        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);
             return;
           }
           console.info(`Applied migration ${migration.name}`);
-          }
-        );
+        });
       });
     }
   });
@@ -64,8 +60,7 @@ db.on('error', (err) => {
 });
 
 function getMigrations(): Migration[] {
-  return [
-    {
+  return [{
     id: 1,
     name: 'initial',
     statement: `
@@ -94,16 +89,14 @@ function getMigrations(): Migration[] {
         FOREIGN KEY (post_id) REFERENCES posts(id),
         FOREIGN KEY (tag_url) REFERENCES tags(url)
       )`
-    }
-  ];
+  }];
 }
 
 export async function savePost(post: Post): Promise<undefined> {
   return new Promise((resolve, reject) => {
     console.debug(`Saving post ${post.url}`);
     const account = post.account;
-    db.run(
-      `
+    db.run(`
       INSERT INTO accounts (id, acct, username, display_name, url, avatar, avatar_static)
       VALUES(?, ?, ?, ?, ?, ?, ?)
       ON CONFLICT(id)
@@ -129,15 +122,20 @@ export async function savePost(post: Post): Promise<undefined> {
           reject(err);
           return;
         }
-        db.run(
-          `
+        db.run(`
           INSERT INTO posts (id, content, created_at, url, account_id)
           VALUES (?, ?, ?, ?, ?) ON CONFLICT(id) DO UPDATE SET
           content=excluded.content,
           created_at=excluded.created_at,
           url=excluded.url,
           account_id=excluded.account_id;`,
-          [post.id, post.content, post.created_at, post.url, post.account.id],
+          [
+            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);
@@ -147,28 +145,26 @@ export async function savePost(post: Post): Promise<undefined> {
 
             db.parallelize(() => {
               let remaining = post.tags.length;
-              for (const tag of post.tags) {
-                db.run(
-                  `
+              for (let tag of post.tags) {
+                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);
                       reject(tagErr);
                       return;
                     }
-                    db.run(
-                      'INSERT INTO poststags (post_id, tag_url) VALUES (?, ?)',
+                    db.run('INSERT INTO poststags (post_id, tag_url) VALUES (?, ?)',
                       [post.id, tag.url],
                       (posttagserr) => {
                         if (posttagserr !== null) {
-                          console.error(
-                            `Could not insert poststags ${tag.url}, ${post.url}`,
-                            posttagserr
-                          );
+                          console.error(`Could not insert poststags ${tag.url}, ${post.url}`, posttagserr);
                           reject(posttagserr);
                           return;
                         }
@@ -184,17 +180,15 @@ export async function savePost(post: Post): Promise<undefined> {
                 );
               }
             });
-          }
-        );
-      }
-    );
+          });
+      });
   });
 }
 
 export async function getPosts(since: string | null, before: string | null, limit: number) {
-  const promise = await new Promise<Post[]>((resolve, reject) => {
+  let promise = await new Promise<Post[]>((resolve, reject) => {
     let filter_query;
-    const params: any = { $limit: limit };
+    let params: any = { $limit: limit };
     if (since === null && before === null) {
       filter_query = '';
     } else if (since !== null) {
@@ -213,7 +207,10 @@ export async function getPosts(since: string | null, before: string | null, limi
     ${filter_query}
     ORDER BY created_at DESC
     LIMIT $limit`;
-    db.all(sql, params, (err, rows: any[]) => {
+    db.all(
+      sql,
+      params,
+      (err, rows: any[]) => {
         if (err != null) {
           console.error('Error loading posts', err);
           reject(err);
@@ -237,15 +234,16 @@ export async function getPosts(since: string | null, before: string | null, limi
               reject(tagErr);
               return;
             }
-          const tagMap: Map<string, Tag[]> = tagRows.reduce((result: Map<string, Tag[]>, item) => {
+            const tagMap: Map<string, Tag[]> = tagRows.reduce(
+              (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) => {
+            const posts = rows.map(row => {
               return {
                 id: row.id,
                 content: row.content,
@@ -261,12 +259,14 @@ export async function getPosts(since: string | null, before: string | null, limi
                   avatar: row.avatar,
                   avatar_static: ''
                 } as Account
-            } as Post;
+              } as Post
             });
             resolve(posts);
           }
         );
-    });
+      }
+    );
   });
   return promise;
 }
+

src/lib/server/rss.ts

@@ -22,22 +22,20 @@ export function createFeed(posts: Post[]): Feed {
     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;

src/lib/server/timeline.ts

@@ -1,17 +1,10 @@
-import {
-  HASHTAG_FILTER,
-  MASTODON_INSTANCE,
-  URL_FILTER,
-  YOUTUBE_API_KEY
-} from '$env/static/private';
+import { HASHTAG_FILTER, MASTODON_INSTANCE, URL_FILTER, YOUTUBE_API_KEY } from '$env/static/private';
 import type { Post, Tag, TimelineEvent } from '$lib/mastodon/response';
 import { getPosts, savePost } from '$lib/server/db';
 import { createFeed, saveAtomFeed } from '$lib/server/rss';
-import { WebSocket } from 'ws';
+import { WebSocket } from "ws";
 
-const YOUTUBE_REGEX = new RegExp(
-  /https?:\/\/(www\.)?youtu((be.com\/.*?v=)|(\.be\/))(?<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;
@@ -20,8 +13,7 @@ export class TimelineReader {
     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();
@@ -38,20 +30,15 @@ export class TimelineReader {
     const categorySearchParams = new URLSearchParams([
       ['part', 'snippet'],
       ['id', item.categoryId],
-      ['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);
+      ['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);
     return categoryTitle === 'Music';
   }
 
   private static async checkYoutubeMatches(postContent: string): Promise<boolean> {
     const matches = postContent.matchAll(YOUTUBE_REGEX);
-    for (const match of matches) {
+    for (let match of matches) {
       if (match === undefined || match.groups === undefined) {
         continue;
       }
@@ -70,10 +57,10 @@ export class TimelineReader {
 
   private constructor() {
     const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
-    socket.onopen = () => {
+    socket.onopen = (_event) => {
       socket.send('{ "type": "subscribe", "stream": "public:local"}');
     };
-    socket.onmessage = async (event) => {
+    socket.onmessage = (async (event) => {
       try {
         const data: TimelineEvent = JSON.parse(event.data.toString());
         if (data.event !== 'update') {
@@ -84,30 +71,31 @@ export class TimelineReader {
         const found_tags: Tag[] = post.tags.filter((t: Tag) => hashttags.includes(t.name));
 
         const urls: string[] = URL_FILTER.split(',');
-        const found_urls = urls.filter((t) => post.content.includes(t));
+        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 (found_urls.length === 0 &&
           found_tags.length === 0 &&
-          !(await TimelineReader.checkYoutubeMatches(post.content))
-        ) {
+          !await TimelineReader.checkYoutubeMatches(post.content)) {
           return;
         }
         await savePost(post);
         const posts = await getPosts(null, null, 100);
         await saveAtomFeed(createFeed(posts));
+
       } catch (e) {
-        console.error('error message', event, event.data, e);
+        console.error("error message", event, event.data, e)
       }
-    };
+
+    });
     socket.onclose = (event) => {
-      console.log('Closed', event, event.code, event.reason);
+      console.log("Closed", event, event.code, event.reason)
     };
     socket.onerror = (event) => {
-      console.log('error', event, event.message, event.error);
+      console.log("error", event, event.message, event.error)
     };
+
   }
 
   public static init() {

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,7 +7,6 @@
     classes: ['toast']
   };
 </script>
-
 <slot />
 <SvelteToast {options} />
 <div class="footer">
@@ -34,9 +33,4 @@
     align-items: center;
     gap: 10px;
   }
-  @media only screen and (max-device-width: 620px) {
-    .footer {
-      width: calc(100% + 16px);
-    }
-  }
 </style>

src/routes/+page.svelte

@@ -1,27 +1,25 @@
 <script lang="ts">
-  import { onMount } from 'svelte';
+import { onMount } from "svelte";
 import type { PageData } from './$types';
 import type { Post } from '$lib/mastodon/response';
-  import {
-    PUBLIC_REFRESH_INTERVAL,
-    PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME
-  } from '$env/static/public';
+import { PUBLIC_REFRESH_INTERVAL, PUBLIC_MASTODON_INSTANCE_DISPLAY_NAME } from '$env/static/public';
 import PostComponent from '$lib/components/PostComponent.svelte';
 import LoadMoreComponent from '$lib/components/LoadMoreComponent.svelte';
 import { fly, type FlyParams } from 'svelte/transition';
 import { cubicInOut } from 'svelte/easing';
-  import { errorToast } from '$lib/errorToast';
+import { errorToast } from '$lib/errorToast'
+
 
 export let data: PageData;
 
 interface FetchOptions {
-    since?: string;
-    before?: string;
-    count?: number;
+  since?: string,
+  before?: string,
+  count?: number
 }
 
 interface EdgeFlyParams extends FlyParams {
-    created_at: string;
+  created_at: string
 }
 
 const refreshInterval = parseInt(PUBLIC_REFRESH_INTERVAL);
@@ -41,8 +39,7 @@
 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);
@@ -73,7 +70,7 @@
 
 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;
   });
 }
 
@@ -82,8 +79,7 @@
   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
@@ -113,9 +109,9 @@
 
   return () => {
     if (interval !== null) {
-        clearInterval(interval);
+      clearInterval(interval)
+    }
   }
-    };
 });
 
 function loadOlderPosts() {
@@ -127,8 +123,8 @@
     oldestBeforeLastFetch = new Date(before).getTime();
   }
 
-    fetchPosts(filter)
-      .then((resp) => {
+
+  fetchPosts(filter).then(resp => {
     if (resp.length > 0) {
       // Append old posts, filter dupes
       // There shouldn't be any duplicates, but better be safe than sorry
@@ -140,19 +136,20 @@
     }
     loadingOlderPosts = false;
   })
-      .catch((e) => {
+  .catch(e => {
     loadingOlderPosts = false;
     errorToast('Error loading older posts: ' + e.message);
   });
-  }
-</script>
 
+}
+
+</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
@@ -160,12 +157,7 @@
   {#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="{{ y: 10, created_at: post.created_at, duration: 300, easing: cubicInOut }}"
       >
         <PostComponent {post} />
       </div>
@@ -173,12 +165,10 @@
   <LoadMoreComponent
     on:loadOlderPosts={loadOlderPosts}
     moreAvailable={moreOlderPostsAvailable}
-      isLoading={loadingOlderPosts}
-    />
+    isLoading={loadingOlderPosts}/>
   </div>
-  <div />
+  <div></div>
   </div>
-
 <style>
   .posts {
     display: flex;
@@ -201,10 +191,4 @@
     text-align: center;
     z-index: 100;
   }
-
-  @media only screen and (max-device-width: 650px) {
-    .post {
-      max-width: 100vw;
-    }
-  }
 </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

@@ -16,6 +16,7 @@ body {
   --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);
@@ -29,9 +30,9 @@ body {
 
   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';
+  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 {

svelte.config.js

@@ -11,8 +11,8 @@ const config = {
     // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
     // 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()
-  }
+    adapter: adapter(),
+  },
 };
 
 export default config;