yusur/vigil
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add top guilds

Browse source
This commit is contained in:
Yusur 2025-10-07 09:36:42 +02:00
parent a13c7cbc22
commit 55455c1693
6 changed files with 82 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,7 +1,7 @@
{
"name": "@yusurko/vigil",
"private": true,
"version": "0.1.0-dev37",
"version": "0.1.0-dev40",
"type": "module",
"scripts": {
"dev": "vite dev",

10
src/lib/HomeMenu.svelte Normal file
View file

@ -0,0 +1,10 @@
<script lang="ts">
import { RiHome2Line } from 'svelte-remixicon';
</script>
<ul class="column">
<li>
<a href="/"><RiHome2Line /> Home</a>
</li>
</ul>

7
src/lib/UserAbout.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { browser } from "$app/environment";
import { getMe } from "$lib/globals.svelte";
import AsideCard from "./AsideCard.svelte";
import { RiCake2Line, RiCakeLine, RiInfoCardLine, RiShieldStarLine } from 'svelte-remixicon';
import { RiCake2Line, RiCakeLine, RiFlowerLine, RiInfoCardLine, RiShieldStarLine } from 'svelte-remixicon';
import { DateTime } from 'luxon';
import type { UserEntry } from "./backend";
@ -24,6 +24,9 @@ let { badges = [] } = user;
{#if user.joined_at}
<li><RiCakeLine /> Cake day: {DateTime.fromISO(user.joined_at).toFormat('d LLL yyyy')}</li>
{/if}
{#if user.id === getMe()?.id && user.karma}
<li><RiFlowerLine /> {user.karma} karma</li>
{/if}
{#if badges.indexOf('administrator') >= 0}
<li><RiShieldStarLine /> Administrator</li>
{/if}

4
src/lib/backend.ts
View file

@ -18,7 +18,9 @@ export type GuildEntry = {
name: string,
display_name?: string,
description?: string,
created_at?: string
created_at?: string,
subscriber_count?: number,
post_count?: number
};
export type PostEntry = {

66
src/routes/+page.svelte
View file

@ -1,41 +1,55 @@
<script lang="ts">
import type { PostEntry } from "$lib/backend";
import Centered from "$lib/Centered.svelte";
import Feed from "$lib/Feed.svelte";
import { activePostCount, activeUserCount, appName, getMe } from "$lib/globals.svelte";
import SLayout from "$lib/SLayout.svelte";
import AsideCard from "$lib/AsideCard.svelte";
import type { GuildEntry, PostEntry } from "$lib/backend";
import Centered from "$lib/Centered.svelte";
import Feed from "$lib/Feed.svelte";
import { activePostCount, activeUserCount, appName, getMe } from "$lib/globals.svelte";
import HomeMenu from "$lib/HomeMenu.svelte";
import SLayout from "$lib/SLayout.svelte";
let me = getMe();
let { data } : { data: { feed: PostEntry[] } } = $props();
let feed: PostEntry[] = $state(Array.prototype.slice.call(data.feed, 0));
let feedIndex = $state(0);
let me = getMe();
let { data } : { data: { feed: PostEntry[], top_guilds: GuildEntry[] } } = $props();
let { feed } : { feed: PostEntry[] } = $derived(data);
let { top_guilds }: { top_guilds: GuildEntry[] } = $derived(data);
// $effect(() => {
// if (me && data?.feed) {
// feed.push(...data.feed.slice(feedIndex));
// feedIndex += feed.length;
// } else if (me) {
// console.log('data.feed is', data?.feed)
// }
// });
// $effect(() => {
// if (me && data?.feed) {
// feed.push(...data.feed.slice(feedIndex));
// feedIndex += feed.length;
// } else if (me) {
// console.log('data.feed is', data?.feed)
// }
// });
</script>
{#if me}
<SLayout title={appName()}>
<Feed posts={feed} />
<Feed posts={feed} />
{#snippet left()}
...
{/snippet}
{#snippet left()}
<HomeMenu />
{/snippet}
{#snippet right()}
...
{/snippet}
{#snippet right()}
{#if top_guilds}
<AsideCard title="Top Communities">
<ul>
{#each top_guilds as gu}
<li>
<a href="/+{gu.name}">+{gu.name}</a> -
<strong>{gu.post_count ?? 0}</strong> posts -
<strong>{gu.subscriber_count ?? 0}</strong> subscribers
</li>
{/each}
</ul>
</AsideCard>
{/if}
{/snippet}
</SLayout>
{:else}
<Centered>
<p>{appName()} is a social media platform made by people like you.<br />
<a href="/login">Log in</a> or (sign up) to see {activePostCount()} posts and talk with {activeUserCount()} users right now!</p>
<p>{appName()} is a social media platform made by people like you.<br />
<a href="/login">Log in</a> or (sign up) to see {activePostCount()} posts and talk with {activeUserCount()} users right now!</p>
</Centered>
{/if}

27
src/routes/+page.ts
View file

@ -1,4 +1,4 @@
import { backend, type PostEntry } from '$lib/backend.js';
import { backend, type GuildEntry, type PostEntry } from '$lib/backend.js';
import { getMe } from '$lib/globals.svelte.js';
import type { LoadEvent } from '@sveltejs/kit';
@ -19,16 +19,35 @@ async function loadFeed (event: LoadEvent): Promise<PostEntry[] | null> {
} catch (e) {
return null;
}
}
export async function load(event): Promise<{feed: PostEntry[] | null}> {
async function loadTopGuilds (event: LoadEvent): Promise<GuildEntry[] | null> {
const resp = await backend.withEvent(event).fetch('top/guilds');
if ([200].indexOf(resp.status) < 0) {
console.error(`fetch top_guilds returned status ${resp.status}`);
return null;
}
try {
const respJ = await resp.json();
const { has: top_guilds } : { has: GuildEntry[] } = respJ;
console.log('top_guilds is', top_guilds);
return top_guilds;
} catch (e) {
return null;
}
}
export async function load(event): Promise<{feed: PostEntry[] | null, top_guilds?: GuildEntry[] | null}> {
let feed = null;
let me = getMe();
let top_guilds = null;
if (me) {
feed = await loadFeed(event);
top_guilds = await loadTopGuilds(event);
}
return { feed };
return { feed, top_guilds };
}