Dieser Commit ist enthalten in:
Ursprung
39e4a37ac5
Commit
4d5504ef68
@ -17,7 +17,7 @@
|
|||||||
"ci": "pnpm run clean:dist && pnpm install && pnpm run i18n:sync && pnpm run build"
|
"ci": "pnpm run clean:dist && pnpm install && pnpm run i18n:sync && pnpm run build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@astrojs/svelte": "^5.2.0",
|
"@astrojs/svelte": "^5.7.0",
|
||||||
"@astrojs/tailwind": "^5.1.0",
|
"@astrojs/tailwind": "^5.1.0",
|
||||||
"@astropub/icons": "^0.2.0",
|
"@astropub/icons": "^0.2.0",
|
||||||
"@types/color": "^3.0.6",
|
"@types/color": "^3.0.6",
|
||||||
@ -41,11 +41,11 @@
|
|||||||
"typescript": "^5.3.3"
|
"typescript": "^5.3.3"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"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",
|
"@codemirror/lang-json": "^6.0.1",
|
||||||
"@ddietr/codemirror-themes": "^1.4.2",
|
"@ddietr/codemirror-themes": "^1.4.2",
|
||||||
"astro": "^4.5.1",
|
"astro": "^4.12.2",
|
||||||
"astro-i18n": "^2.2.4",
|
"astro-i18n": "^2.2.4",
|
||||||
"astro-robots-txt": "^1.0.0",
|
"astro-robots-txt": "^1.0.0",
|
||||||
"astro-seo": "^0.8.2",
|
"astro-seo": "^0.8.2",
|
||||||
|
1965
pnpm-lock.yaml
1965
pnpm-lock.yaml
Datei-Diff unterdrückt, da er zu groß ist
Diff laden
@ -20,9 +20,7 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {t} from "astro-i18n";
|
import {t} from "astro-i18n";
|
||||||
import {
|
import {
|
||||||
ChevronDoubleLeftOutline,
|
|
||||||
ChevronDoubleRightOutline,
|
ChevronDoubleRightOutline,
|
||||||
ChevronLeftOutline, ChevronRightOutline,
|
|
||||||
FolderOutline,
|
FolderOutline,
|
||||||
HomeOutline,
|
HomeOutline,
|
||||||
InfoCircleOutline
|
InfoCircleOutline
|
||||||
@ -35,6 +33,7 @@
|
|||||||
import UploadModal from "./UploadModal.svelte";
|
import UploadModal from "./UploadModal.svelte";
|
||||||
import type {Player} from "@type/data.ts";
|
import type {Player} from "@type/data.ts";
|
||||||
import SWButton from "../styled/SWButton.svelte";
|
import SWButton from "../styled/SWButton.svelte";
|
||||||
|
import SWPaginator from "@components/styled/SWPaginator.svelte";
|
||||||
|
|
||||||
const dispatch = createEventDispatcher();
|
const dispatch = createEventDispatcher();
|
||||||
|
|
||||||
@ -53,24 +52,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
let page = 0;
|
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>
|
</script>
|
||||||
|
|
||||||
<div class="flex justify-between">
|
<div class="flex justify-between">
|
||||||
@ -147,41 +131,7 @@
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</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 />
|
<UploadModal bind:open={uploadOpen} on:refresh />
|
||||||
|
|
||||||
|
89
src/components/styled/SWPaginator.svelte
Normale Datei
89
src/components/styled/SWPaginator.svelte
Normale Datei
@ -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>
|
@ -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="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col gap-y-4">
|
||||||
<div class="footer-card">
|
<div class="footer-card">
|
||||||
<h1>Serverstatus</h1>
|
<h1>Serverstatus</h1>
|
||||||
<ServerStatus transition:persist client:only="svelte" />
|
<ServerStatus client:only="svelte" />
|
||||||
</div>
|
</div>
|
||||||
<div class="footer-card">
|
<div class="footer-card">
|
||||||
<h1>Links</h1>
|
<h1>Links</h1>
|
||||||
|
@ -1,12 +1,13 @@
|
|||||||
---
|
---
|
||||||
import {getCollection} from "astro:content";
|
import {getCollection} from "astro:content";
|
||||||
import PageLayout from "../../layouts/PageLayout.astro";
|
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 PostComponent from "../../components/PostComponent.astro";
|
||||||
import dayjs from "dayjs";
|
import dayjs from "dayjs";
|
||||||
import TagComponent from "../../components/TagComponent.astro";
|
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 posts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.locale);
|
||||||
|
|
||||||
const germanPosts = await getCollection("announcements", entry => entry.id.split("/")[0] === astroI18n.fallbackLocale);
|
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() {
|
async function getTags() {
|
||||||
const posts = await getCollection("announcements");
|
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]);
|
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();
|
const tags = await getTags();
|
||||||
---
|
---
|
||||||
|
|
||||||
@ -47,9 +50,18 @@ const tags = await getTags();
|
|||||||
<TagComponent tag={tag} transition:name={`${tag}-tag-filter`} />
|
<TagComponent tag={tag} transition:name={`${tag}-tag-filter`} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
{posts.map((post, index) => (
|
{page.data.map((post) => (
|
||||||
<div>
|
<div>
|
||||||
<PostComponent post={post}/>
|
<PostComponent post={post}/>
|
||||||
</div>
|
</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>
|
</PageLayout>
|
Laden…
In neuem Issue referenzieren
Einen Benutzer sperren