your personal website on atproto - mirror
blento.app
add first verion of og image to pages
+26
-6
+8
-1
src/lib/Head.svelte
+8
-1
src/lib/Head.svelte
···
1
1
<script lang="ts">
2
-
let { favicon, title }: { favicon: string | null; title: string | null } = $props();
2
+
let { favicon, title, image }: { favicon: string | null; title: string | null; image?: string } =
3
+
$props();
3
4
</script>
4
5
5
6
<svelte:head>
···
9
10
10
11
{#if title}
11
12
<title>{title}</title>
13
+
{/if}
14
+
15
+
{#if image}
16
+
<meta property="og:image" content={image} />
17
+
<meta name="twitter:image" content={image} />
18
+
<meta name="twitter:card" content="summary_large_image" />
12
19
{/if}
13
20
</svelte:head>
+2
-1
src/lib/Profile.svelte
+2
-1
src/lib/Profile.svelte
···
23
23
24
24
<Head
25
25
favicon={'https://cdn.bsky.app/img/avatar/plain/' + did + '/' + profileData?.avatar.ref.$link}
26
-
title={(profileData?.displayName || handle)}
26
+
title={profileData?.displayName || handle}
27
+
image={'https://blento.app/' + handle + '/og.png'}
27
28
/>
28
29
29
30
<!-- lg:fixed lg:h-screen lg:w-1/4 lg:max-w-none lg:px-12 lg:pt-24 xl:w-1/3 -->
+16
-4
src/routes/[handle]/og.png/+server.ts
+16
-4
src/routes/[handle]/og.png/+server.ts
···
1
+
import { loadData } from '$lib/website/load';
1
2
import { ImageResponse } from '@ethercorps/sveltekit-og';
2
3
3
-
export async function GET({ params }) {
4
+
export async function GET({ params, platform }) {
4
5
const handle = params.handle;
6
+
const data = await loadData(params.handle, platform);
7
+
8
+
console.log(data.data['app.bsky.actor.profile'].self);
9
+
const image =
10
+
'https://cdn.bsky.app/img/avatar/plain/' +
11
+
data.did +
12
+
'/' +
13
+
data.data['app.bsky.actor.profile'].self.value.avatar.ref.$link;
14
+
5
15
const htmlString = `
6
-
<div style="display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; background-color: #101011;">
7
-
<h1 style="color: gray; font-size: 80px; margin: 0;">${handle}</h1>
8
-
<p style="color: gray; font-size: 36px; margin-top: 20px;">Your Raw HTML Open Graph Image!</p>
16
+
<div tw="flex flex-col justify-center items-center w-full h-full bg-neutral-900">
17
+
<img src="${image}" width="128" height="128" tw="rounded-full mb-8" />
18
+
19
+
<h1 tw="text-neutral-50 text-7xl m-0">${handle}</h1>
20
+
<p tw="mt-8 text-4xl text-neutral-300">Welcome to my website</p>
9
21
</div>
10
22
`;
11
23
return new ImageResponse(htmlString, {
