feat: add filtering with tags

[dvmhmdsd]

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]

@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:

• 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]

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

[aabouzaid]

@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.

[dvmhmdsd]

@aabouzaid I added the toggle button as checkbox for now (till we approve the idea) also i didn't give much attention to styling and focused on the idea itself

The idea now is about wrapping the detailed devops section with

<section class="tag-section devops">
...
</section>

and the other sections with

<section class="tag-section">
...
</section>

and import the <TagsFilter /> component at the top of the .md file. When you check the checkbox, the sections with devops class will have lower opacity.

Also, I added the <Audience roles={[]} /> component, the roles are controlled from docs/roles.json where u can control the roles across the app or u can pass the role to the component like:

<Audience roles={[ 
{name: 'Devops roles', details: 'test details'}, // the name is what is shown to the user, and details is what will be shown on hover 
{name: 'Software roles', details: 'test;}
]} />

[aabouzaid]

@dvmhmdsd There is No need to make something super extendable now.
Let's start with something easy to implement, and if needed, we can change it later. (e.g., let's set the classes inside the components and keep the usage more uncomplicated).

So, I'd say let's stick with my first proposal.

[dvmhmdsd]

Hello @aabouzaid, I implemented your proposal which simplifies the logic, check and let me know. Also, if you want me to help in adding this feature to the rest of the documentation, let me know.

[aabouzaid]

@dvmhmdsd It looks great 🤩

Please go ahead and let's finalize it (style and so on), then I will review it.
I will add it to the modules once this PR is done because I need to go through all the points in the modules and reformat them a bit.

[dvmhmdsd]

@aabouzaid Great 😃
For styling, do u have specific style in mind ?