Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

Add new card-style OG image templates

Offen
  • Stimmt etwas nicht?
#5 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
3/5
Geschätzter Aufwand
1-2 Tage
Anfängerfreundlichkeit
45/100
Issue-Typ
Feature
Klarheit
Größtenteils klar
Aktivitätsstatus
Veraltet
Tech-Stack
typescript
Bereich
design

Rechercherichtung

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

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

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.

Vorherrschende Sprache
TypeScript
Sterne
8
Forks
4
Ø Merge
6 Std. 9 Min.
Gemergte PRs (30 T.)
66

Entwicklungsumgebung

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus codercops/ogcops

Alle Issues in codercops/ogcops

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.