Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add filtering with tags #23

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: add filtering with tags #23

wants to merge 1 commit into from

Conversation

dvmhmdsd
Copy link

@dvmhmdsd dvmhmdsd commented Dec 29, 2024 •
edited
Loading

As mentioned in issue #21 , this PR is only a POC for the idea.

The idea behind the PR:

  1. Added the TagsFilter component which filters the content of the current page according to its class list.
  2. Added the tags.json file to add the supported tags across the website. e.g. devops, fronend, ...etc.
  3. Wrap every section with div element that has class tag-section and also the tags supported. For example, when the user clicks on the frontend button and the section has class fronend, then it will render only the sections that contains the class frontend.

Please note that i didn't add any styling as this is only a POC till the idea is approved.

closes #21

@aabouzaid
Copy link
Contributor

@dvmhmdsd Thanks a lot for your contribution 🙌

In general, I like the approach; I'd only like to simplify it a bit.

Here is my idea for it:

roadmap_audience

  • When the user toggles the switch, it will change the opacity of the advanced DevOps topics.
  • When the user hovers over the audience, it will show the target audience in more detail.
  • Nice to have: When the user clicks on the audience item (e.g. Software Roles in the section), it will change opacity for other items.

The code will be something like this:

<AudienceSwitch />

## Section Title

### Audience

<Audience roles={['devops', 'software']} />

### What you need to know 

- Lorem Ipsum
- Lorem Ipsum

<DevOpsRoleTopics>

- Lorem Ipsum
- Lorem Ipsum

</DevOpsRoleTopics>

@dvmhmdsd dvmhmdsd changed the title feat: add filtering with tags closes feat: add filtering with tags Jan 1, 2025
@dvmhmdsd
Copy link
Author

dvmhmdsd commented Jan 1, 2025

Great idea
So, the topics will only be classified as advanced and beginners?

@aabouzaid
Copy link
Contributor

@dvmhmdsd In general, yes, it will be just two categories.

But I'd avoid relying on the name advanced as that part of the roadmap is called foundations.
Maybe call it detailed or so.

@aabouzaid aabouzaid added the enhancement New feature or request label Jan 1, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@dvmhmdsd dvmhmdsd

Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Enable tagging and filtering of content
2 participants
@dvmhmdsd @aabouzaid