Tag Filtering System for Resources

[RounakJoshi09]

Linked Issue

Closes #1409

Description

This PR adds a tag-based filtering system to the resource section of the Virtual Coffee. With this enhancement, users can easily discover more targeted content by selecting tags that match their interests or preferred topics. The filtering logic is applied across all levels of the resource hierarchy, ensuring a consistent and intuitive experience throughout the platform.

Methodology

To support this feature, several updates were made, starting with enhancements to the core logic in loadMdx.server.ts. The key change involves adding a new contentTags property to the MDX file interface. This property is populated during the recursive parsing of MDX files. As we parse the front matter of each MDX file, we extract the associated tags and assign them to the contentTags field, applying this to both individual files and directories. Importantly, each parent MDX file will aggregate the tags from its own front matter as well as those of its child MDX files, ensuring comprehensive tag coverage for hierarchical filtering

The second major update in this PR involves the FileIndex.tsx component, which is responsible for rendering the content of each resource. Previously, this component handled server-side rendering only. Now, it has been enhanced to integrate a client-side component.

Since FileIndex.tsx remains a server-side component, we continue to load all directories for the target path using loadMdxDirectory, as before. Also, MDX files also being processed entirely on the server. This includes extracting all relevant Mdx Files and transforming them into post list items, eliminating the need for complex client-side conversions.

After completing these server-side computations, FileIndex.tsx renders a lazily loaded client-side wrapper component: tagFilteredResourceListWrapper.tsx. This wrapper dynamically loads the tagFilteredResourceList.tsx component, which handles the UI logic for tag filtering. It displays available tags, manages tag selection, and renders only the posts relevant to the selected tags.

I’ve also introduced a few new components to support the tag filtering functionality:

• TagBatch: This component is responsible for rendering individual tags. It supports rendering tags as either buttons or spans, making it versatile for use in both the tag filtering interface and as inline tags displayed alongside each topic.

• tagFilteredResourceList.tsx: This component encapsulates the core business logic for tag-based filtering. It manages the filtering state and renders the list of relevant topics using the PostList component based on the selected tags.

In addition to the component changes, I’ve introduced several utility functions to support tag filtering and organization:

• extractContentTags: This helper function recursively traverses MDX files to extract tags from each MDX Files and there children. It ensures that each parent MDX file aggregates its own tags along with those of all its child MDX files, enabling comprehensive tag inheritance across the resource hierarchy.

• tagCategories.ts: This utility is designed to group tags into meaningful categories. It includes helper functions such as organizeTagsByCategory , which streamline the process of classifying and displaying tags in a structured way.

This CSS file for the components has been included in tag-filter.scss, and a few changes in the CSS of post-list.scss have been made in order to view the relevant tags of the topics along with the header.

I’ve also made updates to the documentation to support the new content tagging system. Specifically:

• I expanded the contributing.md file to include detailed guidance on the tagging mechanism—covering tag categories, how to add new tags, and best practices with examples.
• Additionally, I created a separate tagging-guide.md that presents the same information in a more concise and focused format, highlighting tags and their categories in a quick-reference style.

Both documents are currently included to gather feedback and determine which format works best. Depending on team preference, we can either:

1. Remove the tagging section from contributing.md, or
2. Remove the standalone tagging-guide.md.

The goal is to retain whichever version offers the most clarity and usability for contributors.

Code of Conduct

By submitting this pull request, you agree to follow our Code of Conduct