Improve formatting

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,18 @@
 
   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 {
-  max-width: 50px;
-  max-height: 50px;
-  width: auto;
-  height: auto;
-  object-fit: contain;
-  border-radius: 3px;;
-}
-</style>
+  img {
+    max-width: 50px;
+    max-height: 50px;
+    width: auto;
+    height: auto;
+    object-fit: contain;
+    border-radius: 3px;
+  }
+</style>

src/lib/components/LoadMoreComponent.svelte

@@ -2,19 +2,19 @@
   import { createEventDispatcher } from 'svelte';
   import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
 
-  export let moreAvailable: boolean = false;
-  export let isLoading: boolean = false;
+  export let moreAvailable = false;
+  export let isLoading = false;
   let displayText = '';
   let title = '';
   let disabled: boolean;
 
   $: if (isLoading) {
-      displayText = 'Loading...';
+    displayText = 'Loading...';
   } else if (!moreAvailable) {
-      displayText = 'You reached the end';
+    displayText = 'You reached the end';
   } else {
-      displayText = 'Load More';
-  };
+    displayText = 'Load More';
+  }
   $: disabled = !moreAvailable || isLoading;
   $: title = moreAvailable ? 'Load More' : 'There be dragons!';
 
@@ -26,10 +26,10 @@
 </script>
 
 <button on:click={loadOlderPosts} {disabled} {title}>
-    <div class="loading" class:collapsed={!isLoading}>
-      <LoadingSpinnerComponent size='0.5em' thickness='6px' />
-    </div>
-    <span>{displayText}</span>
+  <div class="loading" class:collapsed={!isLoading}>
+    <LoadingSpinnerComponent size="0.5em" thickness="6px" />
+  </div>
+  <span>{displayText}</span>
 </button>
 
 <style>
@@ -78,4 +78,4 @@
     max-width: 0;
     margin-right: 0;
   }
-</style>
+</style>

src/lib/components/LoadingSpinnerComponent.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-  export let size: string = '64px';
-  export let thickness: string = '6px';
+  export let size = '64px';
+  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>
+</style>

src/lib/components/PostComponent.svelte

@@ -3,14 +3,14 @@
   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;
   }
 
@@ -19,16 +19,15 @@
     // 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>
@@ -54,4 +53,4 @@
     max-width: calc(600px - 1em - 50px);
     overflow-x: auto;
   }
-</style>
+</style>