feat: add audience and check filter

DevOpsHiveHQ · Jan 5, 2025 · 9bf0cdc · 9bf0cdc
1 parent 7526253
commit 9bf0cdc
Show file tree

Hide file tree

Showing 5 changed files with 59 additions and 30 deletions.
diff --git a/docs/getting-started/README.md b/docs/getting-started/README.md
@@ -11,16 +11,18 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 import DetailedIndex from './_detailed-index.mdx';
 import {HomepageFeaturesModulesOnly as QuickIndex} from '@site/src/components/HomepageFeaturesModules';
-import tags from '../tags.json';
 import TagsFilter from '@site/src/components/TagsFilter';
+import Audience from '@site/src/components/Audience';
+import roles from '../roles.json';
 
 <p align="center">
   <img class="page-cover-image" title="Dynamic DevOps Roadmap Modules" alt="Dynamic DevOps Roadmap Modules" border="0" src="/img/dynamic-devops-roadmap-modules.png" />
 </p>
 
-<TagsFilter tags={tags} />
+<TagsFilter />
+<Audience roles={roles} />
 
-<div class="tag-section frontend backend">
+<div class="tag-section devops">
 
 ## Before you start
 
@@ -33,7 +35,7 @@ Here is a pre-start checklist:
 
 </div>
 
-<div class="tag-section devops">
+<div class="tag-section">
 
 ## How to use this roadmap?
 
@@ -89,7 +91,7 @@ This roadmap is `polymorphic`, which means it's designed to work in different mo
 
 </div>
 
-<div class="tag-section devops">
+<div class="tag-section">
 
 ## Roadmap Index
 

diff --git a/docs/roles.json b/docs/roles.json
@@ -0,0 +1,10 @@
+[
+    {
+        "name": "DevOps Engineer",
+        "details": "Devops engineers with a broad skill set who are able to work in the DevOps and Software Development Life Cycle (SDLC)."
+    },
+    {
+        "name": "Software Engineer",
+        "details": "Software engineers with a broad skill set who are able to work in the SDLC."
+    }
+]
diff --git a/docs/tags.json b/docs/tags.json
diff --git a/src/components/Audience.js b/src/components/Audience.js
@@ -0,0 +1,23 @@
+import React from 'react';
+
+function Audience({roles}) {
+
+  return (
+    <div style={{
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '1rem'
+    }}>
+      {roles.map(role => (
+        <p title={role.details} style={{
+          background: 'var(--ifm-color-light)',
+          color: 'var(--ifm-color-primary)',
+          padding: '0.5rem',
+          borderRadius: '0.5rem'
+        }}>{role.name}</p>
+      ))}
+    </div>
+  );
+}
+
+export default Audience;
diff --git a/src/components/TagsFilter.js b/src/components/TagsFilter.js
@@ -1,32 +1,27 @@
 import React from 'react';
 
-function TagsFilter({ tags }) {
-  const filterSections = (tag) => {
-    const sections = document.querySelectorAll('.tag-section');
-    sections.forEach((section) => {
-      section.style.display = 'block';
-    });
-
-    if (tag === 'all') {
-      return;
+function TagsFilter() {
+  const filterSections = (e) => {
+    if (e.target.checked) {
+      document.querySelectorAll('.tag-section').forEach(section => {
+        if (section.classList.contains('devops')) {
+          section.style.opacity = 0.4;
+        } else {
+          section.style.opacity = 1;
+        }
+      })
+    } else {
+      document.querySelectorAll('.tag-section').forEach(section => {
+        section.style.opacity = 1;
+      })
     }
-
-    sections.forEach((section) => {
-      if (section.classList.contains(tag)) {
-        section.style.display = 'block';
-      } else {
-        section.style.display = 'none';
-      }
-    });
   }
+
   return (
-    <div>
-      {tags.map((tag) => (
-        <button key={tag} onClick={() => filterSections(tag)}>
-          {tag}
-        </button>
-      ))}
-    </div>
+    <label for="filter">
+      <input type="checkbox" id="filter" onChange={filterSections} />
+      <span>Hide Detailed Devops topics</span>
+    </label>
   );
 }