your personal website on atproto - mirror
blento.app
fix some og image edge-cases
+20
-4
+10
-1
src/lib/website/EditableWebsite.svelte
+10
-1
src/lib/website/EditableWebsite.svelte
···
21
21
import { tick, type Component } from 'svelte';
22
22
import type { CardDefinition, CreationModalComponentProps } from '../cards/types';
23
23
import { dev } from '$app/environment';
24
+
import { page } from '$app/state';
24
25
import { setIsCoarse, setIsMobile, setSelectedCardId, setSelectCard } from './context';
25
26
import BaseEditingCard from '../cards/_base/BaseCard/BaseEditingCard.svelte';
26
27
import Context from './Context.svelte';
···
55
56
56
57
// Check if floating login button will be visible (to hide MadeWithBlento)
57
58
const showLoginOnEditPage = $derived(!user.isLoggedIn);
59
+
60
+
const ogImageUrl = $derived.by(() => {
61
+
const origin = page.url.origin;
62
+
if (page.data.customDomain) return `${origin}/og-new.png`;
63
+
const handle = data.profile?.handle;
64
+
const actor = handle && handle !== 'handle.invalid' ? handle : data.did;
65
+
return `${origin}/${actor}/og-new.png`;
66
+
});
58
67
59
68
// Snapshot the original cards so savePage can detect deletions.
60
69
const originalCards: Item[] = structuredClone(data.cards);
···
516
525
<Head
517
526
favicon={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
518
527
title={getName(data)}
519
-
image={'/' + data.handle + '/og-new.png'}
528
+
image={ogImageUrl}
520
529
accentColor={data.publication?.preferences?.accentColor}
521
530
baseColor={data.publication?.preferences?.baseColor}
522
531
/>
+9
-1
src/lib/website/Website.svelte
+9
-1
src/lib/website/Website.svelte
···
47
47
// svelte-ignore state_referenced_locally
48
48
setHandleContext(data.handle as Handle);
49
49
50
+
const ogImageUrl = $derived.by(() => {
51
+
const origin = page.url.origin;
52
+
if (page.data.customDomain) return `${origin}/og-new.png`;
53
+
const handle = data.profile?.handle;
54
+
const actor = handle && handle !== 'handle.invalid' ? handle : data.did;
55
+
return `${origin}/${actor}/og-new.png`;
56
+
});
57
+
50
58
let maxHeight = $derived(
51
59
data.cards.reduce(
52
60
(max, item) => Math.max(max, isMobile ? item.mobileY + item.mobileH : item.y + item.h),
···
60
68
<Head
61
69
favicon={getImage(data.publication, data.did, 'icon') || data.profile.avatar}
62
70
title={getName(data)}
63
-
image={'/' + data.handle + '/og-new.png'}
71
+
image={ogImageUrl}
64
72
description={getDescription(data)}
65
73
accentColor={data.publication?.preferences?.accentColor}
66
74
baseColor={data.publication?.preferences?.baseColor}
+1
-2
src/routes/[[actor=actor]]/og-new.png/+server.ts
+1
-2
src/routes/[[actor=actor]]/og-new.png/+server.ts
···
30
30
});
31
31
}
32
32
33
-
const handle = params.actor ?? publicEnv.PUBLIC_HANDLE;
34
-
const siteUrl = `${publicEnv.PUBLIC_DOMAIN}/${handle}`;
33
+
const siteUrl = `${publicEnv.PUBLIC_DOMAIN}/${actor}`;
35
34
36
35
const accountId = env.CLOUDFLARE_ACCOUNT_ID;
37
36
const apiToken = env.CLOUDFLARE_API_TOKEN;
