Description

Add a tag system to MDX resources and create a filtering interface to improve resource discoverability. Users should be able to filter resources by categories like 'beginner', 'javascript', 'career', 'open-source', etc.

Acceptance Criteria

• Add frontmatter tag field to existing MDX resource files
• Create a tagging schema/convention for consistent categorization
• Implement tag extraction logic in resource loading functions
• Build a filtering UI component for the resources page
• Add tag display on individual resource cards/listings
• Ensure tag filtering works with existing search functionality
• Update resource index page to show available tags
• Add documentation for contributors on how to tag new resources

Technical Requirements

• Modify src/util/loadMdx.server.ts to extract and process tags
• Update resource types/interfaces to include tag information
• Create client-side filtering component (consider using React state)
• Style tag badges consistently with existing design system
• Ensure filtering is performant and accessible

Design Considerations

• Tags should be visually distinct but not overwhelming
• Filter interface should be intuitive and responsive
• Consider grouping related tags (e.g., 'Languages', 'Topics', 'Skill Level')
• Maintain existing resource page layout and functionality

Example Tag Categories

• Skill Level: beginner, intermediate, advanced
• Technologies: javascript, typescript, react, node, css, html
• Topics: career, open-source, git, testing, deployment
• Format: tutorial, reference, tool, video

Resources

• Examine existing MDX files in src/content/resources/
• Check how other sites implement tag filtering (Dev.to, GitHub topics)
• Review current resource loading logic in src/util/loadMdx.server.ts

Difficulty: Intermediate

This issue involves both backend data processing and frontend UI development, making it suitable for contributors with some React and Next.js experience.