{"id":28300506,"url":"https://github.com/webbertakken/thembastribe-nl","last_synced_at":"2025-06-16T22:31:10.161Z","repository":{"id":287278048,"uuid":"962609566","full_name":"webbertakken/thembastribe-nl","owner":"webbertakken","description":"The story about Themba, the Rhodesian Ridgeback","archived":false,"fork":false,"pushed_at":"2025-05-22T17:15:48.000Z","size":80574,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-30T19:49:56.766Z","etag":null,"topics":["blog","dogs","litter","puppies","rhodesian","ridgeback"],"latest_commit_sha":null,"homepage":"https://thembastribe.nl","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/webbertakken.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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},"funding":{"github":"webbertakken","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2025-04-08T12:11:39.000Z","updated_at":"2025-05-22T17:15:51.000Z","dependencies_parsed_at":"2025-05-10T16:38:32.963Z","dependency_job_id":null,"html_url":"https://github.com/webbertakken/thembastribe-nl","commit_stats":null,"previous_names":["webbertakken/thembastribe-nl"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webbertakken/thembastribe-nl","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbertakken%2Fthembastribe-nl","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbertakken%2Fthembastribe-nl/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbertakken%2Fthembastribe-nl/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbertakken%2Fthembastribe-nl/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webbertakken","download_url":"https://codeload.github.com/webbertakken/thembastribe-nl/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webbertakken%2Fthembastribe-nl/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260251200,"owners_count":22980988,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["blog","dogs","litter","puppies","rhodesian","ridgeback"],"created_at":"2025-05-23T17:25:32.771Z","updated_at":"2025-06-16T22:31:10.153Z","avatar_url":"https://github.com/webbertakken.png","language":"JavaScript","funding_links":["https://github.com/sponsors/webbertakken"],"categories":[],"sub_categories":[],"readme":"# Themba's Tribe\n\nWebsite about Rhodesian Ridgeback Themba and her puppies.\n\n## 📝 Project Description\n\nThis website tells the story of Themba, a beautiful Rhodesian Ridgeback, and her upcoming litter of puppies. The site contains information about Themba, her partner Motsi van de Palsenborghœve, the Rhodesian Ridgeback breed, and updates about the puppies.\n\n## 🚀 Technology\n\n- [Astro](https://astro.build/) - Web framework\n- [Tailwind CSS](https://tailwindcss.com/) - For styling\n- [React](https://reactjs.org/) - For interactive components\n- [Framer Motion](https://www.framer.com/motion/) - For animations\n\n## 🧞 Commands\n\n| Command                  | Action                                             |\n| :----------------------- | :------------------------------------------------- |\n| `pnpm install`           | Install dependencies                               |\n| `pnpm dev`               | Start local dev server at `localhost:4321`         |\n| `pnpm build`             | Build your production site to `./dist/`            |\n| `pnpm preview`           | Preview your build locally, before deploying       |\n| `pnpm astro ...`         | Run CLI commands like `astro add`, `astro check`   |\n| `pnpm astro -- --help`   | Get help using the Astro CLI                       |\n\n## 📂 Project Structure\n\n```\n/\n├── public/\n│   └── favicon.svg\n├── src/\n│   ├── content/\n│   │   └── photos/\n│   │       └── *.json\n│   ├── layouts/\n│   │   └── Layout.astro\n│   ├── pages/\n│   │   ├── index.astro\n│   │   ├── verhaal.astro\n│   │   ├── pups.astro\n│   │   └── fotos.astro\n│   └── styles/\n│       └── global.css\n└── package.json\n```\n\nAstro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.\n\nAny static assets, like images, can be placed in the `public/` directory.\n\n## 👀 Want to learn more?\n\nFeel free to check [Astro documentation](https://docs.astro.build) or join their [Discord server](https://astro.build/chat).\n\n## Image Optimization\n\nThis project uses several methods to optimize images:\n\n### 1. Astro's Built-in Image Optimization\n\nThe website uses Astro's Image component for optimized image delivery:\n\n- Automatic WebP format conversion\n- Responsive sizing\n- Lazy loading\n- Width and height attributes to prevent layout shifts\n\n### 2. Image Processing Scripts\n\nThere are two utility scripts for bulk image processing:\n\n#### Optimize Images\n\nConverts all images to optimized WebP format with appropriate compression:\n\n```bash\nnpm run optimize-images\n```\n\n- Resizes very large images (\u003e1920px wide)\n- Applies different compression levels based on file size\n- Converts all images to WebP format\n- Reports size reduction statistics\n\n#### Generate Thumbnails\n\nCreates smaller thumbnail versions for gallery previews:\n\n```bash\nnpm run generate-thumbnails\n```\n\n- Creates 300x200px thumbnails\n- Uses WebP format with 70% quality\n- Names files with \"thumb-\" prefix\n\n### Image Asset Organization\n\nImages are stored in three directories:\n\n- `src/assets/images/` - Original imported images\n- `src/assets/optimized/` - Optimized WebP versions\n- `src/assets/thumbnails/` - Small preview thumbnails\n\n### Best Practices\n\nWhen adding new images:\n\n1. Place the original images in `src/assets/images/`\n2. Run optimization scripts: `npm run optimize-images \u0026\u0026 npm run generate-thumbnails`\n3. Import and use the optimized images in your components\n4. Specify width, height, and format in Astro Image components\n5. Use the `loading=\"lazy\"` attribute for below-the-fold images\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebbertakken%2Fthembastribe-nl","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebbertakken%2Fthembastribe-nl","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebbertakken%2Fthembastribe-nl/lists"}