added page indicator

src/routes/feed/+page.svelte

@@ -4,14 +4,32 @@
     import TableOfContents from "$lib/components/table-of-contents.svelte";
 
     export let data;
-
-
 </script>
 
 <svelte:head>
     <title>Art Feed | denizk0461</title>
 </svelte:head>
 
+{#snippet pageButtons(currentIndex: number)}
+    <div class="page-button-container blurred-background">
+        {#if currentIndex == 1}
+            <p class="page-button page-button-left">|</p>
+        {:else}
+            <a class="page-button page-button-left page-button-clickable" href="?p={currentIndex - 1}">&lt;</a>
+        {/if}
+
+        {#each { length: data.maxPages }, index}
+            <a class="page-index" href="?p={index + 1}">{index + 1}</a>
+        {/each}
+
+        {#if currentIndex == data.maxPages}
+            <p class="page-button page-button-right">|</p>
+        {:else}
+            <a class="page-button page-button-right page-button-clickable" href="?p={currentIndex + 1}">&gt;</a>
+        {/if}
+    </div>
+{/snippet}
+
 <Content>
     <Banner2
         title="Art & Project Feed"
@@ -21,9 +39,7 @@
         date="2026-04-06"
     />
 
-    <button style="background-color: aqua; padding: 8px;">{data.currentPage - 1}</button>
-    <p>{data.currentPage}</p>
-    <button style="background-color: aqua; padding: 8px;">{data.currentPage + 1}</button>
+    {@render pageButtons(data.currentPage)}
 
     <p>Welcome to my (new) art feed! It is heavily inspired by <a href="https://deathsurplus.com/">DeathSurplus' art blog</a> – definitely go check out his page!</p>
 
@@ -42,7 +58,50 @@
 </Content>
 
 <style>
-    .subtitle {
+    .page-button-container {
+        display: flex;
+        flex-direction: row;
+        align-items: stretch;
+        justify-content: center;
+        border-radius: var(--border-radius);
+        overflow: hidden;
+        width: fit-content;
+        margin: 12px auto;
+        border-top: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+        border-bottom: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+    }
+
+    .page-button, .page-index {
+        font-family: var(--font-mono);
+        padding: 8px 18px;
+        font-weight: 600;
+        margin: 0;
+        transition: background-color var(--duration-animation) var(--anim-curve);
+    }
+
+    .page-button {
+        color: var(--color-text);
+    }
+    .page-button-left {
+        border-right: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+    }
+    .page-button-right {
+        border-left: var(--border-style) var(--border-dash-size) var(--color-highlight-alt);
+    }
+    .page-button-clickable:hover {
+        cursor: pointer;
+    }
+
+    .page-index:link, .page-index:visited {
+        color: var(--color-text)
+    }
+
+    .page-index:hover, .page-button-clickable:hover {
+        text-decoration: none;
+        background-color: var(--color-background-highlight-alt);
+    }
+
+    /* .subtitle {
         font-family: var(--font-mono);
         margin: 0;
         font-size: 1rem;
@@ -58,5 +117,5 @@
 
     .subtitle::after {
         content: " -->";
-    }
+    } */
 </style>

src/routes/feed/+page.ts

@@ -1,6 +1,6 @@
 import { entries } from './feed';
 
-let entriesPerPage = 2;
+let entriesPerPage = 1;
 
 export async function load({ params, url }) {
     // Get page index
@@ -27,9 +27,11 @@ export async function load({ params, url }) {
     }
 
     let currentPage = pageIndex;
+    let maxPages = Math.ceil(entries.length / entriesPerPage);
 
     return {
         currentPage,
+        maxPages,
         contents,
     };
 }