flo-bit.dev
your personal website on atproto - mirror
blento.app
1<script lang="ts">
2 import {
3 getAdditionalUserData,
4 getCanEdit,
5 getDidContext,
6 getHandleContext
7 } from '$lib/website/context';
8 import { onMount } from 'svelte';
9 import { CardDefinitionsByType } from '../..';
10 import type { ContentComponentProps } from '../../types';
11 import BlogEntry from './BlogEntry.svelte';
12 import { Button } from '@foxui/core';
13
14 let { item }: ContentComponentProps = $props();
15
16 const data = getAdditionalUserData();
17 // svelte-ignore state_referenced_locally
18 let feed = $state(data[item.cardType] as any);
19
20 let did = getDidContext();
21 let handle = getHandleContext();
22
23 let canEdit = getCanEdit();
24
25 onMount(async () => {
26 if (!feed) {
27 feed = (await CardDefinitionsByType[item.cardType]?.loadData?.([item], {
28 did,
29 handle
30 })) as any;
31
32 data[item.cardType] = feed;
33 }
34 });
35</script>
36
37<div class="flex h-full flex-col gap-10 overflow-y-scroll p-8">
38 {#if feed && feed.length > 0}
39 {#each feed as document (document.uri)}
40 <BlogEntry
41 title={document.value.title}
42 description={document.value.description}
43 date={document.value.publishedAt}
44 href={document.value.href}
45 />
46 {/each}
47 {:else if feed}
48 <div class="z-50 flex h-full flex-col items-center justify-center gap-4 text-center text-sm">
49 <span class="text-lg font-semibold">No blog posts found.</span>
50
51 {#if canEdit()}
52 <span>
53 Create some for example on <Button
54 href="https://leaflet.pub"
55 target="_blank"
56 rel="noopener noreferrer"
57 class="">Leaflet</Button
58 >
59 or
60 <Button href="https://pckt.pub" target="_blank" rel="noopener noreferrer" class=""
61 >Pckt</Button
62 >
63 </span>
64 {/if}
65 </div>
66 {:else}
67 <div
68 class="text-base-500 dark:text-base-400 accent:text-white/60 flex h-full items-center justify-center text-center text-sm"
69 >
70 Loading blog posts...
71 </div>
72 {/if}
73</div>