Fixes and Changes

package.json

@@ -17,7 +17,7 @@
 		"ci": "pnpm run clean:dist && pnpm install && pnpm run i18n:sync && pnpm run build"
 	},
 	"devDependencies": {
-		"@astrojs/svelte": "^5.2.0",
+		"@astrojs/svelte": "^5.7.0",
 		"@astrojs/tailwind": "^5.1.0",
 		"@astropub/icons": "^0.2.0",
 		"@types/color": "^3.0.6",
@@ -41,11 +41,11 @@
 		"typescript": "^5.3.3"
 	},
 	"dependencies": {
-		"@astrojs/mdx": "^2.2.0",
+		"@astrojs/mdx": "^3.1.3",
-		"@astrojs/sitemap": "^3.1.1",
+		"@astrojs/sitemap": "^3.1.6",
 		"@codemirror/lang-json": "^6.0.1",
 		"@ddietr/codemirror-themes": "^1.4.2",
-		"astro": "^4.5.1",
+		"astro": "^4.12.2",
 		"astro-i18n": "^2.2.4",
 		"astro-robots-txt": "^1.0.0",
 		"astro-seo": "^0.8.2",

src/components/dashboard/SchematicList.svelte

@@ -20,9 +20,7 @@
 <script lang="ts">
     import {t} from "astro-i18n";
     import {
-        ChevronDoubleLeftOutline,
         ChevronDoubleRightOutline,
-        ChevronLeftOutline, ChevronRightOutline,
         FolderOutline,
         HomeOutline,
         InfoCircleOutline
@@ -35,6 +33,7 @@
     import UploadModal from "./UploadModal.svelte";
     import type {Player} from "@type/data.ts";
     import SWButton from "../styled/SWButton.svelte";
+    import SWPaginator from "@components/styled/SWPaginator.svelte";
 
     const dispatch = createEventDispatcher();
 
@@ -53,24 +52,9 @@
     }
 
     let page = 0;
-    $: maxPage = Math.ceil(schematics.schematics.length / 10);
+    $: maxPage = Math.ceil(schematics.schematics.length / 15);
-    $: pagedSchematics = schematics.schematics.slice(page * 10, (page + 1) * 10);
+    $: pagedSchematics = schematics.schematics.slice(page * 15, (page + 1) * 15);
 
-    $: pages = new Array(maxPage).fill(0)
-        .map((_, i) => i + 1)
-        .slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
-        .map(i => ({
-            name: i.toString(),
-            active: i === page + 1,
-            i: i - 1
-        }));
-
-    const previous = () => {
-        page = Math.max(page - 1, 0);
-    };
-    const next = () => {
-        page = Math.min(page + 1, maxPage - 1);
-    };
 </script>
 
 <div class="flex justify-between">
@@ -147,41 +131,7 @@
     </tbody>
 </table>
 
-<div class="w-full flex justify-center mt-4">
+<SWPaginator bind:page maxPage={maxPage} />
-    <ul class="inline-flex">
-        <li>
-            <button on:click={() => page = 0} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
-                <span class="sr-only">Next</span>
-                <ChevronDoubleLeftOutline class="w-3 h-3" />
-            </button>
-        </li>
-        <li>
-            <button on:click={previous} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
-                <span class="sr-only">Previous</span>
-                <ChevronLeftOutline class="w-3 h-3" />
-            </button>
-        </li>
-        {#each pages as p}
-            <li>
-                <button on:click={() => page = p.i} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
-                    <span>{p.name}</span>
-                </button>
-            </li>
-        {/each}
-        <li>
-            <button on:click={next} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
-                <span class="sr-only">Next</span>
-                <ChevronRightOutline class="w-3 h-3" />
-            </button>
-        </li>
-        <li>
-            <button on:click={() => page = maxPage - 1} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
-                <span class="sr-only">Next</span>
-                <ChevronDoubleRightOutline class="w-3 h-3" />
-            </button>
-        </li>
-    </ul>
-</div>
 
 <UploadModal bind:open={uploadOpen} on:refresh />
 

src/components/styled/SWPaginator.svelte

@@ -0,0 +1,89 @@
+<!--
+  -   This file is a part of the SteamWar software.
+  -
+  -   Copyright (C) 2024 SteamWar.de-Serverteam
+  -
+  -   This program is free software: you can redistribute it and/or modify
+  -   it under the terms of the GNU Affero General Public License as published by
+  -   the Free Software Foundation, either version 3 of the License, or
+  -   (at your option) any later version.
+  -
+  -   This program is distributed in the hope that it will be useful,
+  -   but WITHOUT ANY WARRANTY; without even the implied warranty of
+  -   MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+  -   GNU Affero General Public License for more details.
+  -
+  -   You should have received a copy of the GNU Affero General Public License
+  -   along with this program.  If not, see <https://www.gnu.org/licenses/>.
+  -->
+
+<script lang="ts">
+    import {
+        ChevronDoubleLeftOutline,
+        ChevronDoubleRightOutline,
+        ChevronLeftOutline,
+        ChevronRightOutline,
+    } from "flowbite-svelte-icons";
+
+    export let page: number = 0;
+    export let maxPage: number;
+
+    $: pages = new Array(maxPage).fill(0)
+        .map((_, i) => i + 1)
+        //.slice(Math.max(page - 2, 0) - Math.abs(Math.max(page + 3 - maxPage, 0)), Math.min(page + 3, maxPage) + Math.abs(Math.min(page - 2, 0)))
+        .map(i => ({
+            name: i.toString(),
+            active: i === page + 1,
+            i: i - 1
+        }));
+
+    export let firstUrl: string = "#";
+    export let lastUrl: string = "#";
+    export let previousUrl: string = "#";
+    export let nextUrl: string = "#";
+    export let pagesUrl: (i: number) => string = () => "#";
+
+    const previous = () => {
+        page = Math.max(page - 1, 0);
+    };
+
+    const next = () => {
+        page = Math.min(page + 1, maxPage - 1);
+    };
+</script>
+
+<div class="w-full flex justify-center mt-4">
+    <ul class="inline-flex flex-wrap">
+        <li>
+            <a href={firstUrl} on:click|preventDefault={() => page = 0} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-r-none">
+                <span class="sr-only">Next</span>
+                <ChevronDoubleLeftOutline class="w-3 h-3" />
+            </a>
+        </li>
+        <li>
+            <a href={previousUrl} on:click|preventDefault={previous} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
+                <span class="sr-only">Previous</span>
+                <ChevronLeftOutline class="w-3 h-3" />
+            </a>
+        </li>
+        {#each pages as p}
+            <li>
+                <a href={pagesUrl(p.i)} on:click|preventDefault={() => page = p.i} class="btn h-8 px-3 text-sm flex items-center !m-0 !rounded-none" class:btn-neutral={!p.active}>
+                    <span>{p.name}</span>
+                </a>
+            </li>
+        {/each}
+        <li>
+            <a href={nextUrl} on:click|preventDefault={next} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-none">
+                <span class="sr-only">Next</span>
+                <ChevronRightOutline class="w-3 h-3" />
+            </a>
+        </li>
+        <li>
+            <a href={lastUrl} on:click|preventDefault={() => page = maxPage - 1} class="btn btn-neutral h-8 px-3 text-sm flex items-center !m-0 !rounded-l-none">
+                <span class="sr-only">Next</span>
+                <ChevronDoubleRightOutline class="w-3 h-3" />
+            </a>
+        </li>
+    </ul>
+</div>

src/layouts/NavbarLayout.astro

@@ -29,7 +29,7 @@ const {title, description} = Astro.props;
                 <div class="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col gap-y-4">
                     <div class="footer-card">
                         <h1>Serverstatus</h1>
-                        <ServerStatus transition:persist client:only="svelte" />
+                        <ServerStatus client:only="svelte" />
                     </div>
                     <div class="footer-card">
                         <h1>Links</h1>

src/pages/ankuendigungen/[...page].astro

@@ -1,12 +1,13 @@
 ---
 import {getCollection} from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
-import {astroI18n, t} from "astro-i18n";
+import {astroI18n, createGetStaticPaths, t} from "astro-i18n";
 import PostComponent from "../../components/PostComponent.astro";
 import dayjs from "dayjs";
 import TagComponent from "../../components/TagComponent.astro";
+import SWPaginator from "@components/styled/SWPaginator.svelte";
 
-async function getPosts() {
+export const getStaticPaths = createGetStaticPaths(async (props) => {
     const posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
 
     const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);
@@ -19,8 +20,10 @@ async function getPosts() {
         }
     });
 
-    return posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()).filter((value, index) => index < 20);
+    return props.paginate(posts.sort((a, b) => dayjs(b.data.created).unix() - dayjs(a.data.created).unix()), {
-}
+        pageSize: 5,
+    });
+});
 
 async function getTags() {
     const posts = await getCollection("announcements");
@@ -37,7 +40,7 @@ async function getTags() {
     return Array.from(tags).sort((a, b) => b[1] - a[1]).map(value => value[0]);
 }
 
-const posts = await getPosts();
+const { page } = Astro.props;
 const tags = await getTags();
 ---
 
@@ -47,9 +50,18 @@ const tags = await getTags();
             <TagComponent tag={tag} transition:name={`${tag}-tag-filter`} />
         ))}
     </div>
-    {posts.map((post, index) => (
+    {page.data.map((post) => (
         <div>
             <PostComponent post={post}/>
         </div>
     ))}
+    <SWPaginator
+        maxPage={page.lastPage}
+        page={page.currentPage - 1}
+        nextUrl={page.url.next}
+        previousUrl={page.url.prev}
+        firstUrl={page.url.first}
+        lastUrl={page.url.last}
+        pagesUrl={(i) => i == 0 ? page.url.first : page.currentPage === page.lastPage ? page.url.current.replace(page.lastPage, i + 1) : page.url.last.replace(page.lastPage, i + 1)}
+    />
 </PageLayout>