Add new card-style OG… | codercops/ogcops

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

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

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).
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, open http://localhost:4321/create/{category}, pick your template, and try long text and empty optional fields.
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.

Add new card-style OG image templates

评估

调研方向

描述

Template issues

How to add a template

Template checklist

环境准备

从这里开始

codercops/ogcops 的其他 Issue

相似的 Issue

Add new card-style OG image templates

哪里不对？

评估

调研方向

描述

Template issues

How to add a template

Template checklist

环境准备

从这里开始

codercops/ogcops 的其他 Issue

哪里不对？

哪里不对？

哪里不对？

哪里不对？

哪里不对？

相似的 Issue

哪里不对？

哪里不对？

哪里不对？

哪里不对？

哪里不对？

把新 issue 发到你的邮箱