Introduce Essays Collection, and Reader Page with dynamic tag filtering
Summary
Implemented tag-based filtering for essays, fixed Astro frontmatter syntax, and ensured DRY, maintainable code across tag and index pages.
Why Care
This update enables users to view the "Essays" collection, founded in the content repository(
content/essays
), and filter essays by tag, improving SEO, navigation, and discoverability.Implementation
Changes Made
- Created pages for Essays collection, including
/site/src/pages/read/index.astro
and/site/src/pages/read/more-on/[tag].astro
. - Added tag-based filtering logic to
/site/src/pages/read/more-on/[tag].astro
replicating the robust filtering, sorting, and mapping from the main index page. - Ensured consistent data structure for essay items and DRY code between index and tag-filtered pages.
- Created and updated:
/site/src/pages/read/index.astro
/site/src/pages/read/more-on/[tag].astro
/site/components/articles/ArticleListColumn.astro
src/pages/read/essays/[...slug].astro
/site/astro.config.mjs
- Staged and committed all code changes, and pushed to the remote repository.
Technical Details
- All filtering, mapping, and sorting logic is now inside the Astro frontmatter for compliance and maintainability.
- Tag filtering is case-insensitive and only published essays are included.
- Debug output (
console.log(essayItems)
) is available for inspection in the browser console. - No new dependencies were added; all changes are within the existing Astro/TypeScript stack.
Integration Points
- TagChip and ArticleListColumn components are reused for DRY rendering.
- The new tag-filtered page integrates seamlessly with the unified routing and essay data structure.
- No migration steps required; no breaking changes introduced.