Hacktoberfest 2026: los issues que los mantenedores marcaron para octubre, abiertos y aptos para principiantes. Explorar issues de Hacktoberfest

Add new card-style OG image templates

Abierto
  • ¿Algo no está bien?
#5 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
3/5
Tiempo estimado
1-2 días
Aptitud para principiantes
45/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
design

Línea de trabajo

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>.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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
  • 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.

Lenguaje dominante
TypeScript
Estrellas
8
Forks
4
Merge medio
6 h 37 min
PR fusionados (30 d)
58

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de codercops/ogcops

Todos los issues de codercops/ogcops

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.