about page & load more button

src/routes/+page.svelte

@@ -3,7 +3,31 @@
 
     export let data;
 
+    let endOfArticle = false;
+
+
     let { blog } = data;
+    let returnSize = blog.total_articles;
+    let offset = blog.articles.length;
+
+    function loadMore() {
+    if (offset >= returnSize) {
+        endOfArticle = true;
+    } else {
+        fetch(`/getPosts?offset=${offset}`)
+            .then(response => response.json())
+            .then(newArticles => {
+                if (newArticles.length > 0) {
+                    blog.articles = [...blog.articles, ...newArticles];
+                    offset += newArticles.length;
+                    if(offset >= returnSize) endOfArticle = true;
+                } else {
+                    endOfArticle = true;
+                }
+            })
+            .catch(error => console.error('Error loading more articles:', error));
+    }
+    }
 </script>
 
 <div>
@@ -39,6 +63,10 @@
                         </div>
                     </a>
                 {/each}
+
+                {#if !endOfArticle}
+                    <button on:click={loadMore} class="px-8 py-3 bg-gray-200 hover:bg-gray-300 cursor-pointer duration-150 text-gray-900 rounded-lg font-semibold mt-6 mx-auto">Load more</button>
+                {/if}
             </div>
         </div>
     </div>