{"id":41510194,"url":"https://github.com/jongalloway/thumbnail-generator","last_synced_at":"2026-01-23T19:43:35.699Z","repository":{"id":332690592,"uuid":"1134573625","full_name":"jongalloway/thumbnail-generator","owner":"jongalloway","description":null,"archived":false,"fork":false,"pushed_at":"2026-01-15T05:55:27.000Z","size":28419,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-01-15T08:42:59.112Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://jongalloway.github.io/thumbnail-generator/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jongalloway.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-01-14T22:45:02.000Z","updated_at":"2026-01-15T05:35:40.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/jongalloway/thumbnail-generator","commit_stats":null,"previous_names":["jongalloway/thumbnail-generator"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/jongalloway/thumbnail-generator","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongalloway%2Fthumbnail-generator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongalloway%2Fthumbnail-generator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongalloway%2Fthumbnail-generator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongalloway%2Fthumbnail-generator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jongalloway","download_url":"https://codeload.github.com/jongalloway/thumbnail-generator/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jongalloway%2Fthumbnail-generator/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28699285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-23T17:25:48.045Z","status":"ssl_error","status_checked_at":"2026-01-23T17:25:47.153Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-01-23T19:43:34.917Z","updated_at":"2026-01-23T19:43:35.695Z","avatar_url":"https://github.com/jongalloway.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blog Thumbnail Generator\n\nA static, client-side thumbnail generator for blog posts. Create consistent blog thumbnails using predefined backgrounds, customizable text, and logos.\n\n![Blog Thumbnail Generator](./docs/preview.png)\n\n## Features\n\n- 🎨 Multiple background options (dark, light, and colored gradients)\n- ✏️ Customizable title, subtitle, and pill/badge text\n- 🏷️ Support for 1-3 logos displayed in white circles (stacked layout)\n- 📤 Upload your own logos\n- 💾 Export as JPG (default), PNG, WEBP, or SVG\n- 📱 Multiple resolution options (default: 1920×1080)\n- ♿ Accessible UI with keyboard navigation\n- 🚀 Runs entirely in the browser - no server required\n\n## Getting Started\n\n### Development\n\n```bash\n# Install dependencies\nnpm install\n\n# Start development server\nnpm run dev\n```\n\n### Production Build\n\n```bash\n# Build for production\nnpm run build\n\n# Preview production build\nnpm run preview\n```\n\n### Deploy to GitHub Pages\n\nThe site is configured to deploy to GitHub Pages. Simply push to the main branch and the GitHub Actions workflow will build and deploy automatically.\n\n## Adding New Backgrounds\n\nTo add a new background, add an image (SVG, PNG, JPG/JPEG, GIF, or WEBP) to `public/backgrounds/`. The app automatically discovers all images in this directory - no manifest or code changes required!\n\n**Tip:** Include \"light\" in the filename (e.g., `my-light-background.svg`) to automatically set the text variant to dark text for light backgrounds.\n\n## Adding New Logos\n\nTo add a new logo, add an image (SVG, PNG, JPG/JPEG, GIF, or WEBP) to `public/logos/`. The app automatically discovers all images in this directory - no manifest or code changes required!\n\n**Logo rendering notes:**\n\n- Up to 3 logos can be selected.\n- Logos are clipped inside a circular area and sized to avoid cutting off square-ish logos.\n\n## Additional Assets\n\nAdditional logos (Azure, Copilot, Visual Studio, NuGet, .NET) are available in the `assets` branch. You can copy individual files to your `public/logos/` directory as needed.\n\n## Example Templates\n\nThe `docs/examples/` directory contains reference SVG templates showing different layout styles:\n\n- `title-and-pill.svg` - Simple pill badge with title\n- `one-logo.svg`, `two-logos.svg`, `three-logos.svg` - Layouts with logo circles\n- `circle-image.svg` - Layout with circular image placeholder\n- `split-image.svg` - Split layout with image on right side\n- `overlay-image.svg` - Overlay layout style\n\n## Project Structure\n\n```text\npublic/\n  logos/              # Logo images (auto-discovered)\n\n  templates/          # Per-template assets (auto-discovered)\n    dotnet-blog/\n      backgrounds/\n    dotnet-community-standup/\n      backgrounds/\n      *.svg           # SVG layout templates\n\ndocs/examples/         # Reference SVG templates\n\nsrc/\n  App.jsx             # Main React component\n  App.css             # Component styles\n  index.css           # Global styles\n  main.jsx            # React entry point\n\nindex.html            # HTML entry point\nvite.config.js        # Vite configuration\n```\n\n## Technology Stack\n\n- **React** - UI framework\n- **Vite** - Build tool and dev server\n- **Vanilla CSS** - Styling (no Tailwind)\n- **SVG** - Thumbnail composition format\n\n## Export Options\n\n- **JPG (default)** - Small file sizes; good for most sharing scenarios\n- **PNG** - Lossless; good when you need crisp edges or transparency (if you add it later)\n- **WEBP** - Usually smaller than JPG/PNG; great when supported by your target platform\n- **SVG** - Best for high-quality scaling and further editing\n\n**Notes:**\n\n- Raster export inlines referenced images (backgrounds/logos) before rendering, so exported files consistently include all assets.\n- Backgrounds are stretched to fill the export resolution (no letterboxing).\n\n## Layout Behavior\n\n- When logos are present, the title/subtitle wrap to the left side to avoid colliding with the logo stack.\n- The subtitle is bottom-aligned with a consistent margin.\n- The pill/badge sizing is measured using the actual font metrics to better fit the text.\n\n## Accessibility\n\n- All form inputs are properly labeled\n- Keyboard navigation supported\n- Color contrast meets WCAG guidelines\n- Focus states clearly visible\n\n## License\n\nMIT License - see [LICENSE](./LICENSE) for details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongalloway%2Fthumbnail-generator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjongalloway%2Fthumbnail-generator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjongalloway%2Fthumbnail-generator/lists"}