your personal website on atproto - mirror
blento.app
1import type { CardDefinition } from '../types';
2import { getRecord, listRecords, parseUri } from '$lib/atproto';
3import PhotoGalleryCard from './PhotoGalleryCard.svelte';
4
5interface GalleryItem {
6 value: {
7 gallery: string;
8 item: string;
9 position?: number;
10 };
11}
12
13export const PhotoGalleryCardDefinition = {
14 type: 'photoGallery',
15 contentComponent: PhotoGalleryCard,
16 createNew: (card) => {
17 // random grain.social url for testing
18 card.cardData.galleryUri =
19 'at://did:plc:tas6hj2xjrqben5653v5kohk/social.grain.gallery/3mclhsljs6h2w';
20
21 card.w = 4;
22 card.mobileW = 8;
23 card.h = 3;
24 card.mobileH = 6;
25 },
26 loadData: async (items) => {
27 const itemsData: Record<string, unknown[]> = {};
28
29 const galleryItems: Record<string, GalleryItem[] | undefined> = {
30 'social.grain.gallery.item': undefined
31 };
32
33 for (const item of items) {
34 if (!item.cardData.galleryUri) continue;
35
36 const { did, collection } = parseUri(item.cardData.galleryUri);
37
38 if (collection === 'social.grain.gallery') {
39 const itemCollection = 'social.grain.gallery.item';
40
41 if (!galleryItems[itemCollection]) {
42 galleryItems[itemCollection] = (await listRecords({
43 did,
44 collection: itemCollection
45 })) as unknown as GalleryItem[];
46 }
47
48 const galleryItemsList = galleryItems['social.grain.gallery.item'];
49 if (!galleryItemsList) continue;
50
51 const images = galleryItemsList
52 .filter((i) => i.value.gallery === item.cardData.galleryUri)
53 .map(async (i) => {
54 const itemData = parseUri(i.value.item);
55 const record = await getRecord(itemData);
56 return { ...record, value: { ...record.value, ...i.value } };
57 });
58
59 itemsData[item.cardData.galleryUri] = await Promise.all(images);
60 }
61 }
62
63 return itemsData;
64 },
65 minW: 4
66 //sidebarButtonText: 'Photo Gallery'
67} as CardDefinition & { type: 'photoGallery' };