Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

Add new card-style OG image templates

Đang mở
  • Có gì không ổn?
#5 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
3/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
45/100
Loại issue
Tính năng
Độ rõ ràng
Khá rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
design

Hướng nghiên cứu

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

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.

Ngôn ngữ chính
TypeScript
Star
8
Fork
4
Merge trung bình
5 giờ 44 phút
Pull request đã merge (30 ngày)
83

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của codercops/ogcops

Tất cả issue của codercops/ogcops

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.