Covers and social cards

Three exports carry a title outside the page it belongs to. The post cover sits at the head of a blog post and on its card in the index. The social card is the image X, LinkedIn and Slack draw when someone shares a link. The X banner is the header of the General Translation profile. Each one is a still at a fixed size, made in a dark and a light version at the same framing.

GeneratorCopy Anchor Link

Type a title and pick a field and a theme. The plate draws the post cover, the social card and the X banner from it, each at its export aspect ratio.

Every length inside a frame is written in the export's own pixels, so the type, the mark and the rules keep their export sizes at any preview width. The field takes one side of the frame and the type sits on solid ground: a dithered cover shades one large form on a quiet ground and keeps the type on solid ink or paper. The dither field is the sign-in globe at the settings of the partnership globes, with cells of 6 export px drawn at each frame's scale. The glyph field is the glyph rain, and the horizon is the careers page's horizon in its still frame. The card keeps the rails and rules of the site's own card, and the banner keeps the shipped banner's split, with the field on the left 30 percent.

The exportsCopy Anchor Link

The typeCopy Anchor Link

A cover at the head of a post is about 700 px wide in the article column, so a 1920 px cover shows at about 0.36x. The 80 px title then reads at 29 px.

Social cardCopy Anchor Link

The site draws its social card on request at GET /og with next/og. Type a title and a description, and the plate asks the route for the card a page with those fields carries.

seoRoute() builds each page's card address with cardPath(), and the route parses it with parseCard(), so the two always agree. The card is a pure function of its query, and v changes whenever the design changes, so each card is cached for a year. A title over 90 characters and a description over 200 are cut on a word with an ellipsis. A direction's card also draws that direction's dark capture in the right half of its body.

Import and propsCopy Anchor Link

import { cardPath } from '@/lib/seo/card-url';

const src = cardPath({
  title: 'Covers and social cards',
  description: 'Post covers, social cards and banners generated from a title and a field.',
  section: 'Docs',
  kind: 'page',
  path: '/docs/components/covers-and-cards',
});
// /og?v=1&t=Covers+and+social+cards&s=Docs&d=…&k=page&p=%2Fdocs%2Fcomponents%2Fcovers-and-cards

The card's numbersCopy Anchor Link

Fallback coverCopy Anchor Link

A blog post without a cover image gets a motif plate: one word from its title, cut out of a ramp of Bayer coverage tiers. Type a post title to see the word and the ramp it picks.

motifFor reads the title first and the tags second. A release title such as gt-react@11.1.2 speaks its package name. A topic speaks its word, from SEO, Next.js, i18n, JSX, AI, plurals and React, and any other post about localization speaks 語. The word is sized by its length to fill the 400 by 225 plate, and the ramp turns by an angle seeded from the slug, so every post keeps its own plate.

Import and propsCopy Anchor Link

import BlogFeatureDither, { motifFor } from '@/app/d/production/sections/BlogFeatureDither';

<BlogFeatureDither id='plurals-in-react' motif={motifFor({ slug, title, tags })} />;

The ramp's numbersCopy Anchor Link

Post covers on the blogCopy Anchor Link

PostCover draws a post's cover at the head of the post. When the post has a light cover too, both images are in the document and the stylesheet shows the one for the current theme, so a theme switch swaps them without a request. The optimizer serves each at the width it is shown from the 3840 px master, at quality 95. BlogPostCover is the index card's cover on the shipped blog: the post's own image when the frontmatter names one, and the fallback cover when it does not.

import PostCover from '@/components/blog/PostCover';

<PostCover post={{ image: '/static/blogs/post-dark.webp', imageLight: '/static/blogs/post-light.webp' }} priority />;