your personal website on atproto - mirror blento.app

refactor pt9

Florian 3fedf086 c8f0ca4d

+16 -29
+1 -1
src/lib/cards/ATProtoCollectionsCard/ATProtoCollectionsCard.svelte
··· 40 40 {/if} 41 41 </div> 42 42 <div class="flex w-full flex-wrap gap-2 overflow-x-hidden overflow-y-scroll px-4"> 43 - {#each collections ?? [] as collection} 43 + {#each collections ?? [] as collection (collection)} 44 44 <Button target="_blank" href={getLink(collection)} size="sm">{collection}</Button> 45 45 {/each} 46 46 </div>
-3
src/lib/cards/BlueskyMediaCard/BlueskyMediaCard.svelte
··· 1 1 <script lang="ts"> 2 - import { getDidContext } from '$lib/website/context'; 3 2 import type { ContentComponentProps } from '../types'; 4 3 import Video from './Video.svelte'; 5 4 6 5 let { item = $bindable() }: ContentComponentProps = $props(); 7 - 8 - const did = getDidContext(); 9 6 </script> 10 7 11 8 {#if item.cardData.image}
+1 -1
src/lib/cards/BlueskyMediaCard/CreateBlueskyMediaCardModal.svelte
··· 59 59 <div 60 60 class="bg-base-100 dark:bg-base-950 grid h-[50dvh] grid-cols-2 gap-4 overflow-y-scroll rounded-2xl p-4 lg:grid-cols-3" 61 61 > 62 - {#each mediaList as media} 62 + {#each mediaList as media (media.thumbnail || media.playlist)} 63 63 <button 64 64 onclick={() => { 65 65 console.log(media);
+3 -3
src/lib/cards/GIFCard/GiphySearchModal.svelte
··· 140 140 </div> 141 141 {:else if displayResults.length > 0} 142 142 <div class="flex items-start gap-3"> 143 - {#each columns() as column} 143 + {#each columns() as column, i (i)} 144 144 <div class="flex w-1/4 flex-col gap-3"> 145 - {#each column as gif} 145 + {#each column as gif (gif.id)} 146 146 <button 147 147 onclick={() => selectGif(gif)} 148 148 aria-label={gif.title} ··· 164 164 {/each} 165 165 </div> 166 166 {:else if searchQuery} 167 - <div class="flex h-[300px] items-center justify-center"> 167 + <div class="flex h-75 items-center justify-center"> 168 168 <p class="text-base-500">No results found</p> 169 169 </div> 170 170 {/if}
-1
src/lib/cards/GameCards/DinoGameCard/DinoGameCard.svelte
··· 1 1 <script lang="ts"> 2 - import type { ContentComponentProps } from '../../types'; 3 2 import { onMount, onDestroy } from 'svelte'; 4 3 5 4 let canvas: HTMLCanvasElement;
+1 -1
src/lib/cards/MapCard/Map.svelte
··· 16 16 17 17 onMount(async () => { 18 18 try { 19 - // @ts-ignore 19 + // @ts-expect-error this is fine 20 20 leaflet = await import('leaflet'); 21 21 22 22 const location = [parseFloat(item.cardData.lat), parseFloat(item.cardData.lon)];
+1 -1
src/lib/cards/PopfeedReviews/PopfeedReviewsCard.svelte
··· 30 30 </script> 31 31 32 32 <div class="z-10 flex h-full gap-4 overflow-x-scroll p-4"> 33 - {#each feed ?? [] as review} 33 + {#each feed ?? [] as review (review.uri)} 34 34 {#if review.value.rating !== undefined && review.value.posterUrl} 35 35 <a 36 36 rel="noopener noreferrer"
+1 -1
src/lib/cards/SpecialCards/UpdatedBlentos/UpdatedBlentosCard.svelte
··· 13 13 <div class="flex h-full flex-col"> 14 14 <div class="px-4 py-2 text-2xl font-bold">Recently updated blentos</div> 15 15 <div class="flex max-w-full grow items-center gap-4 overflow-x-scroll overflow-y-hidden px-4"> 16 - {#each profiles as profile} 16 + {#each profiles as profile (profile.did)} 17 17 <a 18 18 href="/{profile.handle}" 19 19 class="bg-base-100 dark:bg-base-800 hover:bg-base-200 dark:hover:bg-base-700 accent:bg-accent-200/30 accent:hover:bg-accent-200/50 flex h-52 w-44 min-w-44 flex-col items-center justify-center gap-2 rounded-xl p-2 transition-colors duration-150"
+1 -1
src/lib/cards/StandardSiteDocumentListCard/BlogEntry.svelte
··· 10 10 </script> 11 11 12 12 <article class="group/article relative isolate flex flex-col"> 13 - <div class={'text-base-500 accent:text-accent-950 flex shrink-0 items-center gap-x-4 text-xs'}> 13 + <div class="text-base-500 accent:text-accent-950 flex shrink-0 items-center gap-x-4 text-xs"> 14 14 <DateTime date={new Date(date)} /> 15 15 </div> 16 16 <div class="max-w-xl">
+1 -4
src/lib/cards/StandardSiteDocumentListCard/StandardSiteDocumentListCard.svelte
··· 15 15 let handle = getHandleContext(); 16 16 17 17 onMount(async () => { 18 - console.log(feed); 19 18 if (!feed) { 20 19 feed = (await CardDefinitionsByType[item.cardType]?.loadData?.([item], { 21 20 did, 22 21 handle 23 22 })) as any; 24 - 25 - console.log(feed); 26 23 27 24 data[item.cardType] = feed; 28 25 } ··· 30 27 </script> 31 28 32 29 <div class="flex h-full flex-col gap-10 overflow-y-scroll p-8"> 33 - {#each feed ?? [] as document} 30 + {#each feed ?? [] as document (document.uri)} 34 31 <BlogEntry 35 32 title={document.value.title} 36 33 description={document.value.description}
-2
src/lib/cards/StatusphereCard/EditStatusphereCard.svelte
··· 4 4 import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context'; 5 5 import { CardDefinitionsByType } from '..'; 6 6 import { PopoverEmojiPicker } from '@foxui/social'; 7 - 8 - import icons from './icons.json'; 9 7 import { emojiToNotoAnimatedWebp } from '.'; 10 8 import PlainTextEditor from '../utils/PlainTextEditor.svelte'; 11 9 import { cn } from '@foxui/core';
-1
src/lib/cards/StatusphereCard/SettingsStatusphereCard.svelte
··· 2 2 import type { Item } from '$lib/types'; 3 3 import { getAdditionalUserData } from '$lib/website/context'; 4 4 import { EmojiPicker } from '@foxui/social'; 5 - import { emojiToNotoAnimatedWebp } from '.'; 6 5 7 6 let { item }: { item: Item } = $props(); 8 7
+2 -1
src/lib/cards/TealFMPlaysCard/TealFMPlaysCard.svelte
··· 19 19 } 20 20 21 21 interface Play { 22 + uri: string; 22 23 value: PlayValue; 23 24 } 24 25 ··· 84 85 {/snippet} 85 86 86 87 <div class="z-10 flex h-full w-full flex-col gap-4 overflow-y-scroll p-4"> 87 - {#each feed ?? [] as play} 88 + {#each feed ?? [] as play (play.uri)} 88 89 {#if play.value.originUrl} 89 90 <a href={play.value.originUrl} target="_blank" rel="noopener noreferrer" class="w-full"> 90 91 {@render musicItem(play)}
+1 -1
src/lib/components/post/embeds/Images.svelte
··· 31 31 {@render imageSnippet(data.images[0])} 32 32 {:else} 33 33 <div class="columns-2 gap-4"> 34 - {#each data.images as image} 34 + {#each data.images as image (image.thumb)} 35 35 {@render imageSnippet(image, 'mb-4')} 36 36 {/each} 37 37 </div>
+2 -6
src/lib/website/EditableWebsite.svelte
··· 177 177 178 178 // Get dragged card's original position 179 179 const draggedOrigPos = activeDragElement.originalPositions.get(activeDragElement.item.id); 180 - const draggedOrigX = draggedOrigPos 181 - ? isMobile 182 - ? draggedOrigPos.mobileX 183 - : draggedOrigPos.x 184 - : 0; 180 + 185 181 const draggedOrigY = draggedOrigPos 186 182 ? isMobile 187 183 ? draggedOrigPos.mobileY ··· 735 731 736 732 <Sidebar mobileOnly mobileClasses="lg:block p-4 gap-4"> 737 733 <div class="flex flex-col gap-2"> 738 - {#each sidebarItems as cardDef} 734 + {#each sidebarItems as cardDef (cardDef.type)} 739 735 {#if cardDef.sidebarComponent} 740 736 <cardDef.sidebarComponent onclick={() => newCard(cardDef.type)} /> 741 737 {:else if cardDef.sidebarButtonText}
+1 -1
src/lib/website/Website.svelte
··· 53 53 > 54 54 <div></div> 55 55 <div bind:this={container} class="@container/grid relative col-span-3 px-2 py-8 lg:px-8"> 56 - {#each data.cards.toSorted(sortItems) as item} 56 + {#each data.cards.toSorted(sortItems) as item (item.id)} 57 57 <BaseCard {item}> 58 58 <Card {item} /> 59 59 </BaseCard>