diff --git a/scripts/render-og-goldens.tsx b/scripts/render-og-goldens.tsx index 932e2644..fdb8d7ba 100644 --- a/scripts/render-og-goldens.tsx +++ b/scripts/render-og-goldens.tsx @@ -7,6 +7,7 @@ import { OgImage } from '../src/pages/_api/api/og-image' export const goldenCases = [ { name: 'short-title', title: 'Tempo', section: 'BUILD', subsection: '' }, + { name: 'blog-index-title', title: 'BLOG', section: 'BLOG', subsection: '' }, { name: 'two-line-title', title: 'Introducing stable-bench-v1', diff --git a/src/lib/og-goldens/blog-index-title.png b/src/lib/og-goldens/blog-index-title.png new file mode 100644 index 00000000..e6d6cb9a Binary files /dev/null and b/src/lib/og-goldens/blog-index-title.png differ diff --git a/src/lib/og-sections.test.ts b/src/lib/og-sections.test.ts index 163a3e46..51d21de7 100644 --- a/src/lib/og-sections.test.ts +++ b/src/lib/og-sections.test.ts @@ -77,4 +77,8 @@ describe('vocs.config ogImageUrl stays in sync with src/lib/og-sections', () => it('omits the unused description param', () => { expect(ogImageUrl('/guide/payments/send-a-payment')).not.toContain('description') }) + + it('uses a clean all-caps title for the blog index thumbnail', () => { + expect(param(ogImageUrl('/blog'), 'title')).toBe('BLOG') + }) }) diff --git a/vocs.config.ts b/vocs.config.ts index 893f8be8..d18e738c 100644 --- a/vocs.config.ts +++ b/vocs.config.ts @@ -210,7 +210,12 @@ export default defineConfig({ v: '3', }).toString() - return `${urlBase}/api/og?title=%title&${extra}` + // The HBSet display font's mixed-case "Blog" wordmark has awkward + // spacing at OG scale. Keep the page title sentence-cased, but use the + // cleaner all-caps treatment in the blog index thumbnail. + const imageTitle = docsPath === '/blog' ? 'BLOG' : '%title' + + return `${urlBase}/api/og?title=${imageTitle}&${extra}` }, openapi: [ {