tangled
alpha
login
or
join now
flo-bit.dev
/
blento
your personal website on atproto - mirror
blento.app
20
fork
atom
overview
issues
pulls
pipelines
fixes
Florian
2 days ago
bea93078
be65e4c1
+19
-2
2 changed files
expand all
collapse all
unified
split
src
lib
cards
social
NpmxLikesCard
NpmxLikesCard.svelte
website
ThemeScript.svelte
+2
-2
src/lib/cards/social/NpmxLikesCard/NpmxLikesCard.svelte
···
2
2
import type { Item } from '$lib/types';
3
3
import { onMount } from 'svelte';
4
4
import { getAdditionalUserData, getDidContext, getHandleContext } from '$lib/website/context';
5
5
-
import { CardDefinitionsByType } from '../..';
5
5
+
import { NpmxLikesCardDefinition } from '.';
6
6
import { RelativeTime } from '@foxui/time';
7
7
8
8
interface NpmxLike {
···
25
25
onMount(async () => {
26
26
if (feed) return;
27
27
28
28
-
feed = (await CardDefinitionsByType[item.cardType]?.loadData?.([], {
28
28
+
feed = (await NpmxLikesCardDefinition.loadData?.([], {
29
29
did,
30
30
handle
31
31
})) as NpmxLike[] | undefined;
+17
src/lib/website/ThemeScript.svelte
···
1
1
<script lang="ts">
2
2
+
import { browser } from '$app/environment';
3
3
+
2
4
let {
3
5
accentColor = 'pink',
4
6
baseColor = 'stone'
···
7
9
baseColor?: string;
8
10
} = $props();
9
11
12
12
+
const allAccentColors = [
13
13
+
'red', 'orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal',
14
14
+
'cyan', 'sky', 'blue', 'indigo', 'violet', 'purple', 'fuchsia', 'pink', 'rose'
15
15
+
];
16
16
+
const allBaseColors = ['gray', 'stone', 'zinc', 'neutral', 'slate'];
17
17
+
10
18
const safeJson = (v: string) => JSON.stringify(v).replace(/</g, '\\u003c');
11
19
20
20
+
// SSR: inline script for initial page load (no FOUC)
12
21
let script = $derived(
13
22
`<script>(function(){document.documentElement.classList.add(${safeJson(accentColor)},${safeJson(baseColor)});})();<` +
14
23
'/script>'
15
24
);
25
25
+
26
26
+
// Client: reactive effect for client-side navigations
27
27
+
$effect(() => {
28
28
+
if (!browser) return;
29
29
+
const el = document.documentElement;
30
30
+
el.classList.remove(...allAccentColors, ...allBaseColors);
31
31
+
el.classList.add(accentColor, baseColor);
32
32
+
});
16
33
</script>
17
34
18
35
<svelte:head>