fix #49 enable loading more posts without JS

package.json

@@ -1,6 +1,6 @@
 {
   "name": "moshing-mammut",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "private": true,
   "license": "LGPL-3.0-or-later",
   "scripts": {

src/lib/components/AvatarComponent.svelte

@@ -3,7 +3,7 @@
 
   interface Props {
     account: Account;
-    lazyLoadImages: Boolean;
+    lazyLoadImages?: boolean;
   }
 
   let { account, lazyLoadImages = true }: Props = $props();

src/lib/components/LoadMoreComponent.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
   import LoadingSpinnerComponent from '$lib/components/LoadingSpinnerComponent.svelte';
+  import { page } from '$app/stores';
 
   interface Props {
     moreAvailable?: boolean;
     isLoading?: boolean;
     loadOlderPosts: any;
+    lastPostId?: string;
   }
 
-  let { moreAvailable = false, isLoading = false, loadOlderPosts }: Props = $props();
+  let { moreAvailable = false, isLoading = false, loadOlderPosts, lastPostId }: Props = $props();
   let displayText = $derived.by(() => {
     if (isLoading) {
       return 'Loading...';
@@ -19,23 +21,37 @@
   let title = $derived(moreAvailable ? 'Load More' : 'There be dragons!');
   let disabled: boolean = $derived(!moreAvailable || isLoading);
 
-  /*const dispatch = createEventDispatcher<{
-  loadOlderPosts: string;
-}>();
-
-function loadOlderPosts() {
-  dispatch('loadOlderPosts');
-}*/
+  const currentCount = $page.url.searchParams.get('count');
+  let nextCount = 10;
+  if (currentCount) {
+    const countValue = parseInt(currentCount);
+    if (!isNaN(countValue)) {
+      nextCount = countValue + 5;
+    }
+  }
+  const nextPageUrl = `?count=${nextCount}#${lastPostId}`;
 </script>
 
-<button onclick={() => loadOlderPosts()} {disabled} {title}>
+<a
+  href={nextPageUrl}
+  {disabled}
+  onclick={(event) => {
+    event.preventDefault();
+    loadOlderPosts();
+  }}
+>
+  <button {disabled} {title}>
     <div class="loading" class:collapsed={!isLoading}>
       <LoadingSpinnerComponent size="0.5em" thickness="6px" />
     </div>
     <span>{displayText}</span>
   </button>
+</a>
 
 <style>
+  a {
+    text-decoration: none;
+  }
   button {
     padding: 0.75em;
     border-radius: 3px;

src/lib/components/PostComponent.svelte

@@ -8,7 +8,7 @@
 
   interface Props {
     post: Post;
-    lazyLoadImages: Boolean;
+    lazyLoadImages?: boolean;
   }
 
   let { post, lazyLoadImages = true }: Props = $props();
@@ -116,7 +116,7 @@
   });
 </script>
 
-<div class="wrapper">
+<div class="wrapper" id={post.id}>
   <div class="avatar"><AvatarComponent account={post.account} {lazyLoadImages} /></div>
   <div class="account"><AccountComponent account={post.account} /></div>
   <div class="meta">

src/routes/+page.svelte

@@ -18,6 +18,7 @@
 
   let { data = $bindable() }: Props = $props();
   let posts: Post[] = $state(data.posts);
+  let lastPostId = $derived(posts.length > 0 ? posts[posts.length - 1].id : null);
 
   interface FetchOptions {
     since?: string;
@@ -180,6 +181,7 @@
       {loadOlderPosts}
       moreAvailable={moreOlderPostsAvailable}
       isLoading={loadingOlderPosts}
+      {lastPostId}
     />
   </div>
   <div></div>

src/routes/+page.ts

@@ -1,8 +1,16 @@
 import type { Post } from '$lib/mastodon/response';
 import type { PageLoad } from './$types';
 
-export const load = (async ({ fetch, setHeaders }) => {
-  const p = await fetch('/api/posts?count=5');
+export const load = (async ({ fetch, setHeaders, url }) => {
+  let count = 5;
+  const countParam = url.searchParams.get('count');
+  if (countParam) {
+    const parsed = parseInt(countParam);
+    if (!isNaN(parsed)) {
+      count = parsed;
+    }
+  }
+  const p = await fetch('/api/posts?count=' + count);
   setHeaders({
     'cache-control': 'public,max-age=300'
   });