Skip to content

Generate catalog thumbnails from skill assets #45

Description

@jongio

Summary

Each skill thumbnail is committed twice: once as the installable skills/<name>/thumbnail.png asset and again as site/public/images/thumb-<name>.png for the Astro catalog. The copies are byte identical and can drift.

Description

Keep each installable skill thumbnail as the source of truth. Generate the catalog copies during local development and site builds instead of tracking duplicate binary files. Apply the change to all six current skills rather than fixing only DNS Doctor.

This work was deferred from #44 so that the DNS Doctor feature can merge without an unrelated catalog build refactor.

Technical details

The catalog currently reads thumbnail paths from site/src/content/skills/*.md. site/src/components/SkillCard.astro and site/src/pages/catalog/[slug].astro resolve those paths from Astro's public asset space. skills/eli5/test/registration.test.mjs also requires the catalog copy to exist and verifies byte parity with the installable asset.

Add a dependency-free Node script under site/scripts/ that discovers catalog entries, validates their repoPath and thumb fields, and copies each skills/<name>/thumbnail.png into the declared catalog path. Run it before astro dev and astro build. Ignore generated catalog thumbnails in Git, remove the six tracked copies, and update the registration test to validate the source mapping and sync behavior without requiring committed duplicates.

Do not use committed symbolic links because Windows checkouts may not materialize them reliably.

Acceptance criteria

  • skills/*/thumbnail.png remains the only tracked source for each skill thumbnail.
  • The site development and build commands generate every declared catalog thumbnail before Astro starts.
  • Missing sources, duplicate destinations, invalid paths, and catalog mapping errors fail with actionable messages.
  • Generated thumbnails are ignored and no longer tracked.
  • All six current catalog entries render the correct thumbnail.
  • Tests cover successful synchronization and relevant failure paths.
  • Existing skill tests and the site build pass.

Quality gates

  • Zero lint or type errors.
  • All existing and new tests pass.
  • Max quality checks pass cleanly.
  • Architecture review finds no new boundary violations.
  • The implementation introduces no dependency or unnecessary abstraction.

Done definition

This issue is complete when every acceptance criterion and quality gate passes, and the deployed catalog serves all six thumbnails from generated build assets.

Related

Current feature: #44

Affected paths: skills/*/thumbnail.png, site/public/images/thumb-*.png, site/src/content/skills/*.md, site/package.json, and skills/eli5/test/registration.test.mjs.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions