TemaDeveloper / TemaDeveloper/personal_planner
feat(notes): real image covers for templates (replace gradient placeholders)
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 2
- Forks
- 4
- PR merge metrics
- No merged PRs in 30d
Description
The Notes template gallery shows a representative cover per template, but it's a deterministic gradient + the template icon (templateCover() in src/lib/notes/templates.ts), not a real illustration like Notion.
We can't copy Notion's proprietary cover art, but we could:
- Add an optional
cover(image URL) field onNotesTemplateand render it in the gallery card + the preview pane when present, falling back to the gradient otherwise. - Curate a small set of freely-licensed images (or simple SVG illustrations) per template.
Files: src/lib/notes/templates.ts, src/components/notes/template-gallery.tsx, src/components/notes/template-preview.tsx.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with templateCover() in src/lib/notes/templates.ts, then trace how templates are displayed in src/components/notes/template-gallery.tsx and src/components/notes/template-preview.tsx. Add optional cover data and ensure present covers render in both views while templates without one retain the gradient fallback; curate only freely licensed images or simple SVG illustrations.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 70/100