your personal website on atproto - mirror
blento.app
flo-bit.dev
1import { checkAndUploadImage, validateLink } from '$lib/helper';
2import type { CardDefinition } from '../types';
3import CreateLinkCardModal from './CreateLinkCardModal.svelte';
4import EditingLinkCard from './EditingLinkCard.svelte';
5import LinkCard from './LinkCard.svelte';
6import LinkCardSettings from './LinkCardSettings.svelte';
7
8export const LinkCardDefinition = {
9 type: 'link',
10 contentComponent: LinkCard,
11 editingContentComponent: EditingLinkCard,
12 createNew: (card) => {
13 card.cardData.hasFetched = false;
14 },
15 settingsComponent: LinkCardSettings,
16
17 creationModalComponent: CreateLinkCardModal,
18
19 name: 'Link',
20 canChange: (item) => Boolean(validateLink(item.cardData?.href)),
21 change: (item) => {
22 const href = validateLink(item.cardData?.href);
23 if (!href) return item;
24
25 item.cardData = {
26 ...item.cardData,
27 hasFetched: false
28 };
29 return item;
30 },
31 onUrlHandler: (url, item) => {
32 item.cardData.href = url;
33 item.cardData.domain = new URL(url).hostname;
34 item.cardData.hasFetched = false;
35 return item;
36 },
37 upload: async (item) => {
38 await checkAndUploadImage(item.cardData, 'image');
39 await checkAndUploadImage(item.cardData, 'favicon');
40 return item;
41 },
42 urlHandlerPriority: 0,
43
44 groups: ['Core'],
45
46 icon: `<svg
47xmlns="http://www.w3.org/2000/svg"
48fill="none"
49viewBox="-2 -2 28 28"
50stroke-width="2"
51stroke="currentColor"
52class="size-4"
53>
54<path
55 stroke-linecap="round"
56 stroke-linejoin="round"
57 d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"
58/>
59</svg>`
60} as CardDefinition & { type: 'link' };