your personal website on atproto - mirror
blento.app
flo-bit.dev
1import { checkAndUploadImage } from '$lib/helper';
2import type { CardDefinition } from '../types';
3import ImageCard from './ImageCard.svelte';
4import ImageCardSettings from './ImageCardSettings.svelte';
5
6// Common image extensions
7const IMAGE_EXTENSIONS = /\.(jpe?g|png|gif|webp|svg|bmp|ico|avif|tiff?)(\?.*)?$/i;
8
9export const ImageCardDefinition = {
10 type: 'image',
11 contentComponent: ImageCard,
12 createNew: (card) => {
13 card.cardType = 'image';
14 card.cardData = {
15 image: '',
16 alt: '',
17 href: ''
18 };
19 },
20 upload: async (item) => {
21 await checkAndUploadImage(item.cardData, 'image');
22 return item;
23 },
24 settingsComponent: ImageCardSettings,
25
26 canChange: (item) => Boolean(item.cardData.image),
27
28 change: (item) => {
29 return item;
30 },
31
32 onUrlHandler: (url, item) => {
33 // Check if URL points to an image
34 if (IMAGE_EXTENSIONS.test(url)) {
35 item.cardType = 'image';
36 item.cardData.image = url;
37 item.cardData.alt = '';
38 item.cardData.href = '';
39 return item;
40 }
41 return null;
42 },
43 urlHandlerPriority: 3,
44
45 name: 'Image',
46
47 canHaveLabel: true,
48
49 groups: ['Core'],
50
51 icon: `<svg
52 xmlns="http://www.w3.org/2000/svg"
53 fill="none"
54 viewBox="0 0 24 24"
55 stroke-width="2"
56 stroke="currentColor"
57 class="size-4"
58 >
59 <path
60 stroke-linecap="round"
61 stroke-linejoin="round"
62 d="m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z"
63 />
64 </svg>`
65} as CardDefinition & { type: 'image' };