added: allow the audience to filter content based on relevancy

[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 ?

[aabouzaid]

@dvmhmdsd We just need 2 things:

• Style the checkbox as a switch box (see it in the first mock image).
• The audience roles should be clickable (it should work the same as the checkbox, for example, when the user clicks on the Software Roles under the Audience section, it should hide the DevOps Roles section).
• Also, it would be nice if the audience role itself gets the same effect as the text (in the mock image, when the user clicks on the Software Roles, it changes the DevOps Roles opacity, too).

[dvmhmdsd]

Yes I got your point, but I have a small question: what should happen when the user clicks on devops roles btn?

[dvmhmdsd]

@aabouzaid I have applied the changes and made the switch to be synced with the button. So, if user clicked on the Software roles button the switch will be switched also.

[aabouzaid]

@dvmhmdsd It looks great 🙌
I made some enhancements here and there, like:

• Switch to TypeScript for all added files.
• Grouped the component files.
• Added all as a catch-up for all other roles, even nontech roles (also, the opacity change is disabled when all is there).
• Unified the styling.
• Enhanced the module header.
• Enhanced the tooltips.

The only thing I'd like to make, but my basic JS skill might not help me, is to disable opacity change from the top-level switch if all is part of the TargetAudience roles.

BTH, it will take much time from my side to think about it 😁
So, if it's not easy, then we are fine for now, and we can merge.

[dvmhmdsd]

@aabouzaid Great job 👏 ok let me handle this.

[aabouzaid]

@dvmhmdsd Great 🙌
I will merge this PR now to start tagging the content, and you can create another PR for that enhancement.