Hacktoberfest 2026: as issues que os mantenedores marcaram para outubro, abertas e boas para iniciantes. Ver issues do Hacktoberfest

Add new card-style OG image templates

Aberta
  • Algo errado?
#5 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

Ninguém assumiu esta issue ainda.

Avaliação

Dificuldade
3/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
45/100
Tipo de issue
Funcionalidade
Clareza
Razoavelmente clara
Status de atividade
Estagnada
Stack de tecnologia
typescript
Domínio
design

Direção de pesquisa

This is a tracker: pick one of the linked template issues (#60 to #73), comment there to get assigned, then work from the steps here. Each template goes in src/templates/{category}/{name}.ts, is re-exported from that category's index.ts, and is added to the array in src/templates/registry.ts, with shared fields from src/templates/utils.ts. Done means the template renders in the /create/{category} editor preview, passes npm run check and npm run test, and the PR to dev includes a screenshot and Closes #<issue>.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

feature good first issue hacktoberfest templates

This is the tracker for new templates this Hacktoberfest. Each idea below has its own issue, so pick one, comment on that issue to get assigned, and build it.

Template issues

  • #60 Add the Series Part blog template (blog-series-part)
  • #61 Add the Blog Summary Card template (blog-summary-card)
  • #62 Add the Open to Work developer template (developer-open-to-work)
  • #63 Add the Coupon Code e-commerce template (ecommerce-coupon-code)
  • #64 Add the Event Agenda template (event-agenda)
  • #65 Add the GitHub Issue Card template (github-issue-card)
  • #66 Add the Contributors Wall template (github-contributors-wall)
  • #67 Add the Open Roles job template (job-open-roles)
  • #68 Add the Subscribe Card newsletter template (newsletter-subscribe-card)
  • #69 Add the Conversation podcast template (podcast-conversation)
  • #70 Add the Shortcut Tip product template (product-shortcut-tip)
  • #71 Add the Sticky Note quote template (quote-sticky-note)
  • #72 Add the Uptime Status SaaS template (saas-uptime-status)
  • #73 Add the Quiz Card tutorial template (tutorial-quiz-card)

Check your template in the editor's live preview, and with the Download PNG button too: the preview renders in the browser and the download renders on the server.

How to add a template

  1. Create src/templates/{category}/{name}.ts default-exporting a TemplateDefinition. The id must be {category}-{name} (for example, blog/minimal-dark.ts has id blog-minimal-dark).
  2. Re-export it in src/templates/{category}/index.ts.
  3. Import it and add it to the category's array in src/templates/registry.ts (append at the end of the block).
  4. Run npm run dev, open http://localhost:4321/create/{category}, pick your template, and try long text and empty optional fields.
  5. Run npm run check and npm run test. You do not need to update README counts.

Template checklist

  • Root element is width: '1200px', height: '630px'
  • Every div has display: 'flex', inline styles only, flexbox only (no grid)
  • Fonts: Inter (400/500/600/700), Playfair Display (400/700), JetBrains Mono (400/700)
  • No emoji or remote images in defaults (no emoji font is bundled)
  • Long text handled with truncate() / autoFontSize(); empty optional fields are hidden cleanly
  • Still readable on a light background: try bgColor #ffffff with a dark textColor. If the template mixes its own colors (chips, badges, muted text), isLightColor() in src/templates/utils.ts helps pick ones that work on both
  • Number and toggle params parsed defensively, since API values arrive as strings: Number(params.x), params.x === true || params.x === 'true'
  • No Math.random() or dates in render (images are cached, so output must be deterministic)
  • Clear description and 4 to 6 tags (used by the editor search and the AI template search)
  • Reuse commonFields from src/templates/utils.ts where possible
  • PR targets dev, includes a screenshot, says Closes #<issue>, and fills in the "How I Tested This" and "AI Assistance" sections

Have another idea? Open a template request and mention it here.

Linguagem predominante
TypeScript
Estrelas
8
Forks
4
Merge médio
5h 19min
PRs com merge (30d)
99

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de codercops/ogcops

Todas as issues de codercops/ogcops

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.