Skip to content

Add new card-style OG image templates #5

Description

@anurag629

Description

Add new OG image templates to expand the gallery beyond the current 109 templates across 12 categories.

Current state

  • 109 templates across 12 categories: Blog, Product Launch, SaaS/Landing, GitHub/OSS, Event/Conference, Podcast/Video, Developer/Portfolio, Newsletter, Social/Quote, E-commerce, Job Posting, Tutorial/Course
  • Templates are defined in src/templates/{category}/{id}.ts
  • Each exports a TemplateDefinition (interface in src/templates/types.ts)

Template ideas

  • Profile Card — avatar, name, title, social links on a clean background
  • Product Card — product image placeholder, title, price, and CTA
  • Blog Summary Card — featured image area, title, author, and read time
  • Testimonial Card — quote, avatar, name, and company
  • Stats Card — key metrics with large numbers and labels
  • Changelog — version number, date, and release highlights
  • Comparison — side-by-side feature comparison layout

How to add a template

  1. Create src/templates/{category}/{id}.ts — export a TemplateDefinition
  2. Re-export it from src/templates/{category}/index.ts
  3. Import and register it in src/templates/registry.ts
  4. Run npm run test to verify

Use src/templates/blog/minimal-dark.ts as a reference implementation.
Shared utilities available in src/templates/utils.ts: truncate(), autoFontSize(), commonFields, linearGradient(), contrastText().

Constraints

  • Satori only supports flexbox — no CSS grid
  • Every div must have display: 'flex' explicitly in its style object
  • No CSS classes in satori render functions — inline styles only
  • Font files must be listed in astro.config.mjs includeFiles if adding new fonts

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    featureNew feature requestgood first issueGood for newcomerstemplatesTemplate additions and improvements

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions