flo-bit.dev
your personal website on atproto - mirror
blento.app
fixed attribution
+32
-31
.claude/settings.local.json
+32
-31
.claude/settings.local.json
···
1
{
2
-
"permissions": {
3
-
"allow": [
4
-
"Bash(pnpm check:*)",
5
-
"mcp__ide__getDiagnostics",
6
-
"mcp__plugin_svelte_svelte__svelte-autofixer",
7
-
"mcp__plugin_svelte_svelte__list-sections",
8
-
"Bash(pkill:*)",
9
-
"Bash(timeout 8 pnpm dev:*)",
10
-
"Bash(git checkout:*)",
11
-
"Bash(npx svelte-kit:*)",
12
-
"Bash(ls:*)",
13
-
"Bash(pnpm format:*)",
14
-
"Bash(pnpm add:*)",
15
-
"WebSearch",
16
-
"WebFetch(domain:github.com)",
17
-
"WebFetch(domain:flipclockjs.com)",
18
-
"WebFetch(domain:codepen.io)",
19
-
"WebFetch(domain:flo-bit.dev)",
20
-
"Bash(pnpm install)",
21
-
"Bash(pnpm install:*)",
22
-
"Bash(pnpm config:*)",
23
-
"Bash(lsof:*)",
24
-
"Bash(pnpm dev)",
25
-
"Bash(pnpm exec svelte-kit:*)",
26
-
"Bash(pnpm build:*)",
27
-
"Bash(pnpm remove:*)",
28
-
"Bash(grep:*)",
29
-
"Bash(find:*)",
30
-
"Bash(npx prettier:*)"
31
-
]
32
-
}
33
}
···
1
{
2
+
"permissions": {
3
+
"allow": [
4
+
"Bash(pnpm check:*)",
5
+
"mcp__ide__getDiagnostics",
6
+
"mcp__plugin_svelte_svelte__svelte-autofixer",
7
+
"mcp__plugin_svelte_svelte__list-sections",
8
+
"Bash(pkill:*)",
9
+
"Bash(timeout 8 pnpm dev:*)",
10
+
"Bash(git checkout:*)",
11
+
"Bash(npx svelte-kit:*)",
12
+
"Bash(ls:*)",
13
+
"Bash(pnpm format:*)",
14
+
"Bash(pnpm add:*)",
15
+
"WebSearch",
16
+
"WebFetch(domain:github.com)",
17
+
"WebFetch(domain:flipclockjs.com)",
18
+
"WebFetch(domain:codepen.io)",
19
+
"WebFetch(domain:flo-bit.dev)",
20
+
"Bash(pnpm install)",
21
+
"Bash(pnpm install:*)",
22
+
"Bash(pnpm config:*)",
23
+
"Bash(lsof:*)",
24
+
"Bash(pnpm dev)",
25
+
"Bash(pnpm exec svelte-kit:*)",
26
+
"Bash(pnpm build:*)",
27
+
"Bash(pnpm remove:*)",
28
+
"Bash(grep:*)",
29
+
"Bash(find:*)",
30
+
"Bash(npx prettier:*)",
31
+
"Bash(node -e:*)"
32
+
]
33
+
}
34
}
+35
-1
src/lib/cards/core/MapCard/Map.svelte
+35
-1
src/lib/cards/core/MapCard/Map.svelte
···
5
let { item = $bindable() }: { item: Item } = $props();
6
7
let center = $state({ lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) });
8
</script>
9
10
<div class="absolute inset-0 isolate h-full w-full">
···
13
style="https://tiles.openfreemap.org/styles/liberty"
14
zoom={item.cardData.zoom}
15
{center}
16
-
attributionControl={{ compact: true }}
17
dragPan={false}
18
dragRotate={false}
19
keyboard={false}
···
33
{/snippet}
34
</Marker>
35
</MapLibre>
36
</div>
···
5
let { item = $bindable() }: { item: Item } = $props();
6
7
let center = $state({ lng: parseFloat(item.cardData.lon), lat: parseFloat(item.cardData.lat) });
8
+
let showAttribution = $state(false);
9
</script>
10
11
<div class="absolute inset-0 isolate h-full w-full">
···
14
style="https://tiles.openfreemap.org/styles/liberty"
15
zoom={item.cardData.zoom}
16
{center}
17
+
attributionControl={false}
18
dragPan={false}
19
dragRotate={false}
20
keyboard={false}
···
34
{/snippet}
35
</Marker>
36
</MapLibre>
37
+
38
+
{#snippet infoIcon()}
39
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill-rule="evenodd" viewBox="0 0 20 20">
40
+
<path d="M4 10a6 6 0 1 0 12 0 6 6 0 1 0-12 0m5-3a1 1 0 1 0 2 0 1 1 0 1 0-2 0m0 3a1 1 0 1 1 2 0v3a1 1 0 1 1-2 0" />
41
+
</svg>
42
+
{/snippet}
43
+
44
+
{#snippet attributionText()}
45
+
<a href="https://openfreemap.org" target="_blank" rel="noopener noreferrer" class="text-black/75 no-underline hover:underline" onclick={(e) => e.stopPropagation()}>OpenFreeMap</a> <a href="https://openmaptiles.org" target="_blank" rel="noopener noreferrer" class="text-black/75 no-underline hover:underline" onclick={(e) => e.stopPropagation()}>© OpenMapTiles</a> Data from <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noopener noreferrer" class="text-black/75 no-underline hover:underline" onclick={(e) => e.stopPropagation()}>OpenStreetMap</a>
46
+
{/snippet}
47
+
48
+
{#if showAttribution}
49
+
<div class="absolute right-2.5 bottom-2.5 z-10 rounded-xl bg-white text-black" style="width: calc(100% - 20px); max-width: 12rem;">
50
+
<button
51
+
class="float-right flex size-6 cursor-pointer items-center justify-center rounded-full shadow-[0_0_6px_rgba(59,130,246,0.6)]"
52
+
onclick={() => (showAttribution = false)}
53
+
aria-label="Toggle attribution"
54
+
>
55
+
{@render infoIcon()}
56
+
</button>
57
+
<div class="p-2 text-left text-xs leading-snug text-black/75">
58
+
{@render attributionText()}
59
+
</div>
60
+
</div>
61
+
{:else}
62
+
<button
63
+
class="absolute right-2.5 bottom-2.5 z-10 flex size-6 items-center justify-center rounded-full bg-white text-black"
64
+
onclick={() => (showAttribution = true)}
65
+
aria-label="Toggle attribution"
66
+
>
67
+
{@render infoIcon()}
68
+
</button>
69
+
{/if}
70
</div>