Repository navigation
Add new card-style OG image templates #5
Description
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
- Add the Series Part blog template (
blog-series-part) #60 Add the Series Part blog template (blog-series-part) - Add the Blog Summary Card template (
blog-summary-card) #61 Add the Blog Summary Card template (blog-summary-card) - Add the Open to Work developer template (
developer-open-to-work) #62 Add the Open to Work developer template (developer-open-to-work) - Add the Coupon Code e-commerce template (
ecommerce-coupon-code) #63 Add the Coupon Code e-commerce template (ecommerce-coupon-code) - Add the Event Agenda template (
event-agenda) #64 Add the Event Agenda template (event-agenda) - Add the GitHub Issue Card template (
github-issue-card) #65 Add the GitHub Issue Card template (github-issue-card) - Add the Contributors Wall template (
github-contributors-wall) #66 Add the Contributors Wall template (github-contributors-wall) - Add the Open Roles job template (
job-open-roles) #67 Add the Open Roles job template (job-open-roles) - Add the Subscribe Card newsletter template (
newsletter-subscribe-card) #68 Add the Subscribe Card newsletter template (newsletter-subscribe-card) - Add the Conversation podcast template (
podcast-conversation) #69 Add the Conversation podcast template (podcast-conversation) - Add the Shortcut Tip product template (
product-shortcut-tip) #70 Add the Shortcut Tip product template (product-shortcut-tip) - Add the Sticky Note quote template (
quote-sticky-note) #71 Add the Sticky Note quote template (quote-sticky-note) - Add the Uptime Status SaaS template (
saas-uptime-status) #72 Add the Uptime Status SaaS template (saas-uptime-status) - Add the Quiz Card tutorial template (
tutorial-quiz-card) #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
- Create
src/templates/{category}/{name}.tsdefault-exporting aTemplateDefinition. The id must be{category}-{name}(for example,blog/minimal-dark.tshas idblog-minimal-dark). - Re-export it in
src/templates/{category}/index.ts. - Import it and add it to the category's array in
src/templates/registry.ts(append at the end of the block). - Run
npm run dev, openhttp://localhost:4321/create/{category}, pick your template, and try long text and empty optional fields. - Run
npm run checkandnpm run test. You do not need to update README counts.
Template checklist
- Root element is
width: '1200px', height: '630px' - Every
divhasdisplay: '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#ffffffwith a darktextColor. If the template mixes its own colors (chips, badges, muted text),isLightColor()insrc/templates/utils.tshelps 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 inrender(images are cached, so output must be deterministic) - Clear
descriptionand 4 to 6tags(used by the editor search and the AI template search) - Reuse
commonFieldsfromsrc/templates/utils.tswhere possible - PR targets
dev, includes a screenshot, saysCloses #<issue>, and fills in the "How I Tested This" and "AI Assistance" sections
Have another idea? Open a template request and mention it here.
Activity
Saifjafri212213 commentedon Oct 26, 2026
Hi @anurag629, I'm @Saifjafri212213. All my PRs are merged and I have no open issue right now (the last were #220, #236 and #265 here, and a few in toolbelt). If you have another template or issue ready, I'd be glad to take it. I can build a template or pick up a bug in any of the three repos, whichever is most useful.
anurag629 commentedon Oct 26, 2026
Hey @Saifjafri212213, I opened #272 (Rescheduled) for you. Drop a comment there and I'll assign it.
Saifjafri212213 commentedon Oct 26, 2026
Hi @anurag629, thanks for #272 and the earlier ones. I'm @Saifjafri212213, and all my ogcops and toolbelt PRs are merged. If you have another template, guide or bug ready, I'd be glad to take it. I've also asked for the Urdu translation in chatcops #55, so I have room for one more.
anurag629 commentedon Oct 26, 2026
Hey @Saifjafri212213, I opened toolbelt #364 (a Markdown tables guide) for you. Drop a comment there and I'll assign it.
Saifjafri212213 commentedon Oct 27, 2026
Hi @anurag629, I'm @Saifjafri212213. I have one open PR (toolbelt #369) and no other open issue, so I have room for one more. If you have another template, guide, bug or small task ready in ogcops, toolbelt or chatcops, I'd be glad to take it. Thanks for the earlier ones.
anurag629 commentedon Oct 27, 2026
Hey @Saifjafri212213, I opened toolbelt #370 (a cron expression guide) for you. Drop a comment there and I'll assign it.
Saifjafri212213 commentedon Oct 27, 2026
Hi @anurag629, thanks for #370, I've opened the PR for it (toolbelt #371). I'm @Saifjafri212213 and I have no other open issue, so I have room for one more. If you have another template, guide, bug or small task ready in ogcops, toolbelt or chatcops, I'd be glad to take it.
anurag629 commentedon Oct 27, 2026
Hey @Saifjafri212213, I opened toolbelt #372 (a guide to camelCase, snake_case and kebab-case) for you. Drop a comment there and I'll assign it.
sank8-2 commentedon Oct 27, 2026
Hi @anurag629, I'm @sank8-2. My last ogcops PR (#276, the waitlist template) merged earlier today, so I have no open issue or PR in any of the codercops repos right now and one slot free.
If there's another template, guide or bug ready in ogcops, toolbelt or chatcops, I'd be glad to take it. Happy to wait if the queue is full.
anurag629 commentedon Oct 27, 2026
Hey @sank8-2, I opened #282 (an Incident Update template) for you. Drop a comment there and I'll assign it.
sank8-2 commentedon Oct 27, 2026
Hi @anurag629, I'm @sank8-2. #284 (the Incident Update template) merged a little while ago after your own-property fix review, so I have no open issue or PR in any of the codercops repos and one slot free.
If there's another template, guide or bug ready in ogcops, toolbelt or chatcops, I'd be glad to take it. Happy to wait if the queue is full.
anurag629 commentedon Oct 27, 2026
Hey @sank8-2, I opened #289 (an Updated Post template) for you. Drop a comment there and I'll assign it.
anurag2787 commentedon Oct 27, 2026
Hi @anurag629 is their is any other issue i can work on?
anurag629 commentedon Oct 28, 2026
Hey @anurag2787, I opened #293 (a Members Only template) for you. Drop a comment there and I'll assign it.
anurag2787 commentedon Oct 28, 2026
Hi @anurag629 is their is more issue i can work on?
anurag629 commentedon Oct 28, 2026
Hey @anurag2787, I opened #297 (a Maintainers Wanted template) for you. Drop a comment there and I'll assign it.