tangled
alpha
login
or
join now
flo-bit.dev
/
blento
21
fork
atom
your personal website on atproto - mirror
blento.app
21
fork
atom
overview
issues
pulls
pipelines
refactor pt9
Florian
1 month ago
3fedf086
c8f0ca4d
+16
-29
16 changed files
expand all
collapse all
unified
split
src
lib
cards
ATProtoCollectionsCard
ATProtoCollectionsCard.svelte
BlueskyMediaCard
BlueskyMediaCard.svelte
CreateBlueskyMediaCardModal.svelte
GIFCard
GiphySearchModal.svelte
GameCards
DinoGameCard
DinoGameCard.svelte
MapCard
Map.svelte
PopfeedReviews
PopfeedReviewsCard.svelte
SpecialCards
UpdatedBlentos
UpdatedBlentosCard.svelte
StandardSiteDocumentListCard
BlogEntry.svelte
StandardSiteDocumentListCard.svelte
StatusphereCard
EditStatusphereCard.svelte
SettingsStatusphereCard.svelte
TealFMPlaysCard
TealFMPlaysCard.svelte
components
post
embeds
Images.svelte
website
EditableWebsite.svelte
Website.svelte
+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
43
-
{#each collections ?? [] as collection}
43
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
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
7
-
8
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
62
-
{#each mediaList as media}
62
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
143
-
{#each columns() as column}
143
143
+
{#each columns() as column, i (i)}
144
144
<div class="flex w-1/4 flex-col gap-3">
145
145
-
{#each column as gif}
145
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
167
-
<div class="flex h-[300px] items-center justify-center">
167
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
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
19
-
// @ts-ignore
19
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
33
-
{#each feed ?? [] as review}
33
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
16
-
{#each profiles as profile}
16
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
13
-
<div class={'text-base-500 accent:text-accent-950 flex shrink-0 items-center gap-x-4 text-xs'}>
13
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
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
24
-
25
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
33
-
{#each feed ?? [] as document}
30
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
7
-
8
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
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
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
87
-
{#each feed ?? [] as play}
88
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
34
-
{#each data.images as image}
34
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
180
-
const draggedOrigX = draggedOrigPos
181
181
-
? isMobile
182
182
-
? draggedOrigPos.mobileX
183
183
-
: draggedOrigPos.x
184
184
-
: 0;
180
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
738
-
{#each sidebarItems as cardDef}
734
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
56
-
{#each data.cards.toSorted(sortItems) as item}
56
56
+
{#each data.cards.toSorted(sortItems) as item (item.id)}
57
57
<BaseCard {item}>
58
58
<Card {item} />
59
59
</BaseCard>