Skip to content

feat(website): social preview images and Open Graph tags for every page #12

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
arg1998 merged 1 commit into from
Sep 17, 2026
Merged

feat(website): social preview images and Open Graph tags for every page #12

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
78 changes: 78 additions & 0 deletions website/bun.lock
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 5 additions & 1 deletion website/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,11 @@
"@astrojs/starlight": "0.42.1",
"@fontsource-variable/geist": "5.3.0",
"@fontsource-variable/jetbrains-mono": "5.3.0",
"astro": "7.3.3"
"@fontsource/geist": "5.3.0",
"@fontsource/jetbrains-mono": "5.3.0",
"@resvg/resvg-js": "2.6.2",
"astro": "7.3.3",
"satori": "0.33.4"
},
"devDependencies": {
"@astrojs/check": "0.9.10",
Expand Down
3 changes: 3 additions & 0 deletions website/public/_headers
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,6 @@

/llms*.txt
Access-Control-Allow-Origin: *

/og/*
Cache-Control: public, max-age=86400
8 changes: 8 additions & 0 deletions website/scripts/docs-source.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,14 @@ describe('pages', () => {
expect(page.body.startsWith('The **43**')).toBe(true);
expect(page.description).toBe('The 43 tools, see errors.');
});

it('keeps underscores inside identifiers in the description', () => {
const page = splitPage(
'# A\n\nThe `request_attention` tool is **blocking** and _slow_.\n',
'a',
);
expect(page.description).toBe('The request_attention tool is blocking and slow.');
});
});

describe('links', () => {
Expand Down
2 changes: 1 addition & 1 deletion website/scripts/docs-source.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ function describe(body: string): string | undefined {
if (!para) return undefined;
const text = para
.replace(/\[([^\]]*)\]\([^)]*\)/g, '$1')
.replace(/[`*_]/g, '')
.replace(/`|\*\*|(?<!\w)[*_]|[*_](?!\w)/g, '')
.replace(/\s+/g, ' ')
.trim();
if (!text) return undefined;
Expand Down
20 changes: 17 additions & 3 deletions website/src/layouts/Site.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,23 @@ import '@fontsource-variable/geist';
import '@fontsource-variable/jetbrains-mono';
import '../styles/theme.css';
import LogoMark from '../components/LogoMark.astro';
import { HOME_OG_IMAGE, SITE_NAME, socialImageTags } from '../lib/og.ts';
import { latest } from '../lib/versions.ts';

interface Props {
title: string;
description: string;
/** Social preview image path; defaults to the landing card. */
ogImage?: string;
ogImageAlt?: string;
}
const { title, description } = Astro.props;
const {
title,
description,
ogImage = HOME_OG_IMAGE,
ogImageAlt = 'BrowserHive: a browser hive for your agents',
} = Astro.props;
const imageTags = socialImageTags(new URL(ogImage, Astro.site).href, ogImageAlt);
const canonical = new URL(Astro.url.pathname, Astro.site);
const nav = [
{ label: 'Docs', href: latest.base },
Expand All @@ -33,11 +43,15 @@ const nav = [
<link rel="alternate" type="text/plain" href="/llms.txt" title="llms.txt" />
<meta name="theme-color" content="#07090d" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="BrowserHive" />
<meta property="og:site_name" content={SITE_NAME} />
<meta property="og:locale" content="en" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonical} />
<meta name="twitter:card" content="summary" />
{imageTags.map((t) => <meta {...t.attrs} />)}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<script is:inline>
// Same storage key as the docs theme picker, so both halves of the site agree.
(() => {
Expand Down
Loading
Loading