your personal website on atproto - mirror blento.app
26
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix some og image edge-cases

Florian 12e5f7b9 d22b0d17

+20 -4
+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
··· 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
··· 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;