Skip to content

feat: nicer OG images for docs pages #1443

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 1, 2025
Merged

feat: nicer OG images for docs pages #1443

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0ffe2f9
feat: nicer OG images for docs pages
Ocean-OS Aug 1, 2025
587499e
exclude docs pages from default og image
eltigerchino Aug 1, 2025
e2f71db
deduplicate font files
eltigerchino Aug 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 ...slug]/card.png/DMSerifDisplay-Regular.ttf → .../src/lib/fonts/DMSerifDisplay-Regular.ttf
View file
Open in desktop
File renamed without changes.
0 ...blog/[slug]/card.png/FiraSans-Regular.ttf → ...te.dev/src/lib/fonts/FiraSans-Regular.ttf
View file
Open in desktop
File renamed without changes.
2 changes: 1 addition & 1 deletion apps/svelte.dev/src/routes/+layout.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
</script>

<svelte:head>
{#if !page.route.id?.startsWith('/blog/')}
{#if !page.route.id || !page.route.id.startsWith('/blog/') || !/^\/docs\/[^\/]+\/[^\/]+$/.test(page.route.id)}
<meta name="twitter:card" content="summary" />
<meta name="twitter:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
<meta name="og:image" content="https://svelte.dev/images/twitter-thumbnail.jpg" />
Expand Down
4 changes: 2 additions & 2 deletions apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@ import { read } from '$app/server';
import satori from 'satori';
import { html as toReactNode } from 'satori-html';
import Card from './Card.svelte';
import DMSerifDisplay from './DMSerifDisplay-Regular.ttf?url';
import FiraSans from './FiraSans-Regular.ttf?url';
import DMSerifDisplay from '$lib/fonts/DMSerifDisplay-Regular.ttf?url';
import FiraSans from '$lib/fonts/FiraSans-Regular.ttf?url';
import { blog_posts } from '$lib/server/content';
import type { ServerlessConfig } from '@sveltejs/adapter-vercel';

Expand Down
10 changes: 10 additions & 0 deletions apps/svelte.dev/src/routes/docs/[topic]/[...path]/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import PageControls from '$lib/components/PageControls.svelte';
import { goto } from '$app/navigation';
import { escape_html } from '$lib/utils/escape';
import { page } from '$app/state';

let { data } = $props();

Expand Down Expand Up @@ -64,7 +65,16 @@
name="twitter:description"
content="{data.document.metadata.title} • Svelte documentation"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="Description" content="{data.document.metadata.title} • Svelte documentation" />
<meta
name="twitter:image"
content="https://svelte.dev/docs/{page.params.topic}/{page.params.path}/card.png"
/>
<meta
name="og:image"
content="https://svelte.dev/docs/{page.params.topic}/{page.params.path}/card.png"
/>
</svelte:head>

<div id="docs-content" use:legacy_details>
Expand Down
79 changes: 79 additions & 0 deletions apps/svelte.dev/src/routes/docs/[topic]/[...path]/card.png/+server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import { render } from 'svelte/server';
import { Resvg } from '@resvg/resvg-js';
import { error } from '@sveltejs/kit';
import { read } from '$app/server';
import satori from 'satori';
import { html as toReactNode } from 'satori-html';
import Card from './Card.svelte';
import DMSerifDisplay from '$lib/fonts/DMSerifDisplay-Regular.ttf?url';
import FiraSans from '$lib/fonts/FiraSans-Regular.ttf?url';
import { docs } from '$lib/server/content';
import type { ServerlessConfig } from '@sveltejs/adapter-vercel';

export const config: ServerlessConfig = {
isr: {
expiration: false
}
};

export function entries() {
return Object.keys(docs.pages).map((doc) => {
const full = doc.slice(5); // removes 'docs/' prefix
const [topic, ...path] = full.split('/');
return {
topic,
path: path.join('/')
};
});
}

const height = 630;
const width = 1200;
const dm_serif_display = await read(DMSerifDisplay).arrayBuffer();
const fira_sans = await read(FiraSans).arrayBuffer();

export async function GET({ params }) {
const document = docs.pages[`docs/${params.topic}/${params.path}`];

if (!document) error(404);

const result = render(Card, {
props: { title: document.metadata.title, breadcrumbs: document.breadcrumbs.slice(1) }
});
const element = toReactNode(`<head>${result.head}</head>${result.body}`);

const svg = await satori(element, {
fonts: [
{
name: 'DMSerif Display',
data: dm_serif_display,
style: 'normal',
weight: 400
},
{
name: 'Fira Sans',
data: fira_sans,
style: 'normal',
weight: 400
}
],
height,
width
});

const resvg = new Resvg(svg, {
fitTo: {
mode: 'width',
value: width
}
});

const image = resvg.render();

return new Response(image.asPng(), {
headers: {
'content-type': 'image/png',
'cache-control': 'public, max-age=600' // cache for 10 minutes
}
});
}
64 changes: 64 additions & 0 deletions apps/svelte.dev/src/routes/docs/[topic]/[...path]/card.png/Card.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<svelte:options css="injected" />

<script lang="ts">
let { title, breadcrumbs }: { title: string; breadcrumbs: Array<{ title: string }> } = $props();
</script>

<div class="card">
<img src="https://sveltejs.github.io/assets/artwork/svelte-machine.png" alt="Svelte Machine" />

<div class="text">
<span class="breadcrumbs">
<!-- for some reason `{#each}` doesn't work with satori here -->
Docs • {breadcrumbs.map(({ title }) => title).join(' • ')}
</span>
<h1>{title}</h1>
</div>
</div>

<style>
.card {
display: flex;
width: 100%;
height: 100%;
background: white;
}

img {
position: absolute;
width: 125%;
height: 100%;
top: 5%;
left: 0;
object-fit: cover;
}

.text {
display: flex;
position: absolute;
left: 80px;
width: 55%;
height: 80%;
display: flex;
flex-direction: column;
justify-content: center;
}

h1 {
font-size: 72px;
margin: 0;
color: #222;
font-weight: 400;
line-height: 80px;
margin: 0 0 0.5em 0;
font-family: 'DM Serif Display';
}

.breadcrumbs {
font-size: 32px;
margin: 0;
color: #555;
text-transform: uppercase;
font-family: 'Fira Sans';
}
</style>