feat: add post count to homepage

This commit is contained in:
Damillora 2025-02-22 14:37:20 +00:00
parent fba053e7b1
commit 675f12935c
2 changed files with 9 additions and 5 deletions

View File

@ -21,7 +21,7 @@
<footer class="footer"> <footer class="footer">
<div class="content has-text-centered"> <div class="content has-text-centered">
<p> <p>
<strong><a href="https://github.com/Damillora/Shioriko">Shioriko</a></strong>: a booru-style image gallery written in Go and Svelte <strong><a href="https://github.com/Damillora/Shioriko">shioriko</a></strong>: a booru-style image gallery written in Go and Svelte
</p> </p>
</div> </div>
</footer> </footer>

View File

@ -8,6 +8,7 @@
let searchTerms: string[] = $state([]); let searchTerms: string[] = $state([]);
let postCount: number = $state(0); let postCount: number = $state(0);
let postCountLoaded: boolean = $state(false);
const onTagChange = (value) => { const onTagChange = (value) => {
searchTerms = value.detail.tags; searchTerms = value.detail.tags;
@ -30,6 +31,7 @@
const getCounts = async () => { const getCounts = async () => {
const response = await getPostCount(); const response = await getPostCount();
postCount = response.postCount; postCount = response.postCount;
postCountLoaded = true;
}; };
onMount(() => { onMount(() => {
getCounts(); getCounts();
@ -42,8 +44,8 @@
<div class="columns is-centered"> <div class="columns is-centered">
<div class="column is-12-tablet is-8-desktop is-8-widescreen"> <div class="column is-12-tablet is-8-desktop is-8-widescreen">
<div class="box has-text-centered"> <div class="box has-text-centered">
<p class="title">Shioriko</p> <p class="title">shioriko</p>
<p class="subtitle">Booru-style gallery written in Go and Svelte</p> <p class="subtitle">a booru-style gallery written in Go and Svelte</p>
<div class="block"> <div class="block">
<form onsubmit={onSearch}> <form onsubmit={onSearch}>
<div class="field"> <div class="field">
@ -66,8 +68,10 @@
</div> </div>
</form> </form>
</div> </div>
{#if postCount > 0} {#if postCountLoaded}
<p class="block">Serving <strong>{postCount}</strong> images</p> <p class="block">serving <span class="is-primary"><strong>{postCount}</strong></span> images</p>
{:else}
<p class="block">serving <span class="is-primary"><strong>...</strong></span> images</p>
{/if} {/if}
</div> </div>
</div> </div>