add top guilds

package.json

@@ -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",

src/lib/HomeMenu.svelte

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

src/lib/UserAbout.svelte

@@ -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}

src/lib/backend.ts

@@ -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 = {

src/routes/+page.svelte

@@ -1,41 +1,55 @@
 <script lang="ts">
-    import type { PostEntry } from "$lib/backend";
+  import AsideCard from "$lib/AsideCard.svelte";
-    import Centered from "$lib/Centered.svelte";
+  import type { GuildEntry, PostEntry } from "$lib/backend";
-    import Feed from "$lib/Feed.svelte";
+  import Centered from "$lib/Centered.svelte";
-    import { activePostCount, activeUserCount, appName, getMe } from "$lib/globals.svelte";
+  import Feed from "$lib/Feed.svelte";
-    import SLayout from "$lib/SLayout.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 me = getMe();
-    let { data } : { data: { feed: PostEntry[] } } = $props();
+  let { data } : { data: { feed: PostEntry[], top_guilds: GuildEntry[] } } = $props();
-    let feed: PostEntry[] = $state(Array.prototype.slice.call(data.feed, 0));
+  let { feed } : { feed: PostEntry[] } = $derived(data);
-    let feedIndex = $state(0);
+  let { top_guilds }: { top_guilds: GuildEntry[] } = $derived(data);
 
-    // $effect(() => {
+  // $effect(() => {
-    //     if (me && data?.feed) {
+  //     if (me && data?.feed) {
-    //         feed.push(...data.feed.slice(feedIndex));
+  //         feed.push(...data.feed.slice(feedIndex));
-    //         feedIndex += feed.length;
+  //         feedIndex += feed.length;
-    //     } else if (me) {
+  //     } else if (me) {
-    //         console.log('data.feed is', data?.feed)
+  //         console.log('data.feed is', data?.feed)
-    //     }
+  //     }
-    // });
+  // });
 </script>
 
 {#if me}
 <SLayout title={appName()}>
-    <Feed posts={feed} /> 
+  <Feed posts={feed} /> 
 
-    {#snippet left()}
+  {#snippet left()}
-        ...
+    <HomeMenu />
-    {/snippet}
+  {/snippet}
 
-    {#snippet right()}
+  {#snippet right()}
-        ...
+    {#if top_guilds}
-    {/snippet}
+    <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 />
+  <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>
+    <a href="/login">Log in</a> or (sign up) to see {activePostCount()} posts and talk with {activeUserCount()} users right now!</p>
 </Centered>
 {/if}
 

src/routes/+page.ts

@@ -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 };
 }