add /explore/

package.json

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

src/lib/HomeMenu.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { RiHome2Line, RiSettings2Line, RiShieldStarLine, RiUserLine } from 'svelte-remixicon';
+  import { RiCompassLine, RiHome2Line, RiSettings2Line, RiShieldStarLine, RiUserLine } from 'svelte-remixicon';
     import MenuLink from './MenuLink.svelte';
 
   let { user = null } = $props();
@@ -7,6 +7,7 @@
 
 <ul class="column">
   <MenuLink href="/" icon={RiHome2Line} label="Home" />
+  <MenuLink href="/explore" icon={RiCompassLine} label="Explore" />
   <MenuLink href="/settings" icon={RiSettings2Line} label="Settings" />
   {#if user}
   <MenuLink href="/@{user.username}" icon={RiUserLine} label="My profile" />
@@ -14,4 +15,6 @@
   {#if user.badges && user.badges.indexOf('administrator') >= 0}
   <MenuLink href="/admin/" icon={RiShieldStarLine} label="Administration" />
   {/if}
+
+  <!-- TODO add /v1/user/@me/guilds (?) -->
 </ul>

src/routes/+page.svelte

@@ -12,6 +12,7 @@
   let { feed } : { feed: PostEntry[] } = $derived(data);
   let { top_guilds }: { top_guilds: GuildEntry[] } = $derived(data);
 
+  // TODO infinite scrolling
   // $effect(() => {
   //     if (me && data?.feed) {
   //         feed.push(...data.feed.slice(feedIndex));

src/routes/+page.ts

@@ -42,7 +42,7 @@ async function loadTopGuilds (event: LoadEvent): Promise<GuildEntry[] | null> {
 export async function load(event): Promise<{feed: PostEntry[] | null, top_guilds?: GuildEntry[] | null}> {
     // delay loading after layout
     if (!isFirstLoad) {
-        await sleep(2000);
+        await sleep(500);
         isFirstLoad = true;
     }
 

src/routes/[x+40][name]/+page.svelte

@@ -4,7 +4,6 @@
     import SLayout from "$lib/SLayout.svelte";
     import UserAbout from "$lib/UserAbout.svelte";
     import UserMenu from "$lib/UserMenu.svelte";
-    import { RiUserLine } from "svelte-remixicon";
 
 let { data } : { data: { user: UserEntry, feed: PostEntry[] } } = $props();
 

src/routes/[x+40][name]/+page.ts

@@ -8,7 +8,7 @@ export async function load(event) {
     
       const resp = await backend.withEvent(event).fetch('user/@' + encodeURIComponent(name) + '/feed');
         
-      if(resp.status === 404) { 
+      if (resp.status === 404) { 
         error(404);
       }
 

src/routes/explore/+page.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+  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 { 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[], top_guilds: GuildEntry[] } } = $props();
+  let { feed } : { feed: PostEntry[] } = $derived(data);
+  let { top_guilds }: { top_guilds: GuildEntry[] } = $derived(data);
+
+  // TODO infinite scrolling
+  // $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>
+
+<SLayout title="Explore">
+  <Feed posts={feed} /> 
+
+  {#snippet left()}
+    <HomeMenu user={me} />
+  {/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>
+
+

src/routes/explore/+page.ts

@@ -0,0 +1,53 @@
+import { backend, type GuildEntry, type PostEntry } from '$lib/backend.js';
+import { getMe, sleep } from '$lib/globals.svelte.js';
+import type { LoadEvent } from '@sveltejs/kit';
+
+
+async function loadFeed (event: LoadEvent): Promise<PostEntry[] | null> {
+    const resp = await backend.withEvent(event).fetch('explore/feed');
+
+    if ([200].indexOf(resp.status) < 0) {
+        console.error(`fetch feed returned status ${resp.status}`);
+        return null;
+    }
+    try {
+        const respJ = await resp.json();
+
+        const { feed } : { feed: PostEntry[] } = respJ;
+
+        return feed;
+    } catch (e) {
+        return 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;
+        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, top_guilds };
+}