Auto reconnect to Mastodon WebSocket if it fails

.env.EXAMPLE

@@ -6,6 +6,7 @@ MASTODON_INSTANCE = 'metalhead.club'
 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'

src/app.html

@@ -15,6 +15,7 @@
     <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 {

src/lib/components/FooterComponent.svelte

@@ -58,7 +58,7 @@
       background-color: var(--color-grey-translucent);
     }
   }
-  @media only screen and (max-device-width: 620px) {
+  @media only screen and (max-width: 620px) {
     .mastodonInstance,
     .feedSuffix {
       display: none;
@@ -68,7 +68,7 @@
     }
   }
 
-  @media only screen and (max-device-width: 430px) {
+  @media only screen and (max-width: 430px) {
     .mastodonInstance,
     .feedSuffix,
     .secretIngredient {
@@ -76,7 +76,7 @@
     }
   }
 
-  @media only screen and (max-device-width: 370px) {
+  @media only screen and (max-width: 370px) {
     .label {
       display: none;
     }

src/lib/server/db.ts

@@ -196,7 +196,7 @@ export async function savePost(post: Post): Promise<undefined> {
   if (!databaseReady) {
     await waitReady();
   }
-  return new Promise((resolve, reject) => {
+  return await new Promise<undefined>((resolve, reject) => {
     console.debug(`Saving post ${post.url}`);
     const account = post.account;
     db.run(

src/lib/server/rss.ts

@@ -1,4 +1,4 @@
-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 { Feed } from 'feed';
@@ -6,6 +6,7 @@ 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,6 +20,7 @@ export function createFeed(posts: Post[]): Feed {
     feedLinks: {
       atom: `${BASE_URL}/feed.xml`
     },
+    hub: hub,
     author: {
       name: '@aymm',
       link: 'https://metalhead.club/@aymm'
@@ -40,8 +42,23 @@ export function createFeed(posts: Post[]): Feed {
     });
   });
   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) {
+    console.error('Failed to update WebSub hub', e);
+  }
 }

src/lib/server/timeline.ts

@@ -78,7 +78,7 @@ export class TimelineReader {
     return false;
   }
 
-  private constructor() {
+  private startWebsocket() {
     const socket = new WebSocket(`wss://${MASTODON_INSTANCE}/api/v1/streaming`);
     socket.onopen = () => {
       socket.send('{ "type": "subscribe", "stream": "public:local"}');
@@ -113,13 +113,25 @@ export class TimelineReader {
       }
     };
     socket.onclose = (event) => {
-      console.log('Closed', event, event.code, event.reason);
+      console.warn(
+        `Websocket connection to ${MASTODON_INSTANCE} closed. Code: ${event.code}, reason: '${event.reason}'`
+      );
+      setTimeout(() => {
+        console.info(`Attempting to reconenct to WS`);
+        this.startWebsocket();
+      }, 10000);
     };
     socket.onerror = (event) => {
-      console.log('error', event, event.message, event.error);
+      console.error(
+        `Websocket connection to ${MASTODON_INSTANCE} failed. ${event.type}: ${event.error}, message: '${event.message}'`
+      );
     };
   }
 
+  private constructor() {
+    this.startWebsocket();
+  }
+
   public static init() {
     if (this._instance === undefined) {
       this._instance = new TimelineReader();

src/routes/+layout.svelte

@@ -34,9 +34,9 @@
     align-items: center;
     gap: 10px;
   }
-  @media only screen and (max-device-width: 620px) {
+  @media only screen and (max-width: 620px) {
     .footer {
-      width: calc(100% + 16px);
+      width: 100%;
     }
   }
 </style>

src/routes/+page.svelte

@@ -202,9 +202,10 @@
     z-index: 100;
   }
 
-  @media only screen and (max-device-width: 650px) {
+  @media only screen and (max-width: 650px) {
     .post {
-      max-width: 100vw;
+      max-width: calc(100vw - 16px);
+      padding: 1em 0;
     }
   }
 </style>