your personal website on atproto - mirror
blento.app
some small improvements
+35
-68
+2
-2
src/lib/cards/_base/BaseCard/BaseCard.svelte
+2
-2
src/lib/cards/_base/BaseCard/BaseCard.svelte
···
45
45
draggable={false}
46
46
class={[
47
47
fillPage
48
-
? 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card relative isolate z-0 h-full w-full outline-offset-2 transition-all duration-200 focus-within:outline-2'
49
-
: 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card absolute isolate z-0 rounded-3xl outline-offset-2 transition-all duration-200 focus-within:outline-2',
48
+
? 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card relative isolate z-0 h-full w-full outline-offset-2 transition-[outline] duration-200 focus-within:outline-2'
49
+
: 'card group/card selection:bg-accent-600/50 focus-within:outline-accent-500 @container/card absolute isolate z-0 rounded-3xl outline-offset-2 transition-[outline] duration-200 focus-within:outline-2',
50
50
!fillPage ? (color ? (colors[color] ?? colors.accent) : colors.base) : '',
51
51
color !== 'accent' && item.color !== 'base' && item.color !== 'transparent' ? color : '',
52
52
showOutline ? 'outline-2' : '',
+7
-15
src/lib/cards/core/MapCard/Map.svelte
+7
-15
src/lib/cards/core/MapCard/Map.svelte
···
5
5
6
6
let { item = $bindable(), isEditing = false }: { item: Item; isEditing?: boolean } = $props();
7
7
8
-
let center = $state({ lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) });
8
+
const center = { lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) };
9
9
let showAttribution = $state(false);
10
10
let map: maplibregl.Map | undefined = $state();
11
11
12
-
const fixedCenter = { lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) };
13
-
14
12
function handleZoom() {
15
-
if (!isEditing && map) {
16
-
map.setCenter(fixedCenter);
13
+
if (map) {
14
+
map.setCenter(center);
17
15
}
18
16
}
19
-
20
-
$effect(() => {
21
-
if (!isEditing && map) {
22
-
map.getCanvas().style.touchAction = 'pan-x pan-y';
23
-
}
24
-
});
25
17
</script>
26
18
27
19
<div
···
38
30
zoom={item.cardData.zoom}
39
31
{center}
40
32
attributionControl={false}
41
-
dragPan={isEditing}
33
+
dragPan={false}
42
34
dragRotate={false}
43
35
keyboard={false}
44
-
touchZoomRotate={true}
45
-
scrollZoom={true}
36
+
touchZoomRotate={isEditing}
37
+
scrollZoom={isEditing}
46
38
boxZoom={false}
47
39
pitchWithRotate={false}
48
40
touchPitch={false}
···
50
42
>
51
43
<Projection type="globe" />
52
44
53
-
<Marker bind:lnglat={center}>
45
+
<Marker lnglat={center}>
54
46
{#snippet content()}
55
47
<div class="from-accent-400 size-10 rounded-full bg-radial via-transparent p-3">
56
48
<div class="bg-accent-500 size-4 rounded-full ring-2 ring-white"></div>
+1
-31
src/routes/[[actor=actor]]/events/+page.svelte
+1
-31
src/routes/[[actor=actor]]/events/+page.svelte
···
1
1
<script lang="ts">
2
2
import type { EventData } from '$lib/cards/social/EventCard';
3
3
import { getCDNImageBlobUrl } from '$lib/atproto';
4
-
import { user } from '$lib/atproto/auth.svelte';
5
-
import { Avatar as FoxAvatar, Badge, Button, toast } from '@foxui/core';
6
-
import { page } from '$app/state';
4
+
import { Avatar as FoxAvatar, Badge, Button } from '@foxui/core';
7
5
import Avatar from 'svelte-boring-avatars';
8
-
import * as TID from '@atcute/tid';
9
-
import { goto } from '$app/navigation';
10
-
11
6
let { data } = $props();
12
7
13
8
let events: (EventData & { rkey: string })[] = $derived(data.events);
···
78
73
return { url, alt: media.alt || event.name };
79
74
}
80
75
81
-
let isOwner = $derived(user.isLoggedIn && user.did === did);
82
-
83
76
let showPast: boolean = $state(false);
84
77
let now = $derived(new Date());
85
78
let filteredEvents = $derived(
···
121
114
<span class="text-base-900 dark:text-base-100 text-sm font-medium">{hostName}</span>
122
115
</a>
123
116
</div>
124
-
</div>
125
-
<div class="flex flex-col items-end gap-2">
126
-
{#if isOwner}
127
-
<Button
128
-
variant="primary"
129
-
onclick={() => {
130
-
const rkey = TID.now();
131
-
const handle =
132
-
user.profile?.handle && user.profile.handle !== 'handle.invalid'
133
-
? user.profile.handle
134
-
: user.did;
135
-
goto(`/${handle}/events/${rkey}/edit`);
136
-
}}>New event</Button
137
-
>
138
-
{/if}
139
-
<Button
140
-
variant="secondary"
141
-
onclick={async () => {
142
-
const calendarUrl = `${page.url.origin}${page.url.pathname.replace(/\/$/, '')}/calendar`;
143
-
await navigator.clipboard.writeText(calendarUrl);
144
-
toast.success('Subscription link copied to clipboard');
145
-
}}>Subscribe</Button
146
-
>
147
117
</div>
148
118
</div>
149
119
+1
-10
src/routes/[[actor=actor]]/rsvp/+page.svelte
+1
-10
src/routes/[[actor=actor]]/rsvp/+page.svelte
···
1
1
<script lang="ts">
2
2
import type { EventData } from '$lib/cards/social/EventCard';
3
3
import { getCDNImageBlobUrl } from '$lib/atproto';
4
-
import { Avatar as FoxAvatar, Badge, Button, toast } from '@foxui/core';
5
-
import { page } from '$app/state';
4
+
import { Avatar as FoxAvatar, Badge } from '@foxui/core';
6
5
import Avatar from 'svelte-boring-avatars';
7
6
import type { CachedProfile } from '$lib/cache';
8
7
···
106
105
<span class="text-base-900 dark:text-base-100 text-sm font-medium">{userName}</span>
107
106
</div>
108
107
</div>
109
-
<Button
110
-
variant="secondary"
111
-
onclick={async () => {
112
-
const calendarUrl = `${page.url.origin}${page.url.pathname.replace(/\/$/, '')}/calendar`;
113
-
await navigator.clipboard.writeText(calendarUrl);
114
-
toast.success('Subscription link copied to clipboard');
115
-
}}>Subscribe</Button
116
-
>
117
108
</div>
118
109
119
110
<!-- Toggle -->