button now filters and updates class

src/components/blog/BlogCard/styles.module.css

@@ -9,11 +9,13 @@
   border: 1px solid var(--dev-card-background);
   border-radius: 40px;
   opacity: 1;
+  transition: all  0.3s;
+  max-width: 600px;
 }
 
 .card:hover {
   cursor: pointer;
-  top: -2px;
+  transform: translate(0px, -5px);
   box-shadow: var(--dev-card-selected);
 }
 
@@ -29,6 +31,7 @@
   left: 0;
 }
 
+
 .cardTitle {
   font-size: 22px;
   font-weight: 700;
@@ -45,7 +48,7 @@
   font-size: 16px;
   font-weight: 500;
   color: var(--dev-secondary-text);
-  background-color: #eaeef1;
+  background-color: var(--dev-tag-highlight);
   padding: 0px 8px;
 }
 

src/components/blog/BlogCards/index.js

@@ -3,30 +3,30 @@ import styles from './styles.module.css';
 import BlogCard from '../BlogCard';
 
 import {getBlogPosts, getTopic} from '../../../services/DiscourseService';
-export default function BlogCards() {
+export default function BlogCards({
-  const [ans, setAns] = React.useState();
+  filterCallback
+  }) {
+  const [cardData, setCardData] = React.useState();
 
   const getPosts = async () => {
-    const data = await getBlogPosts();
+    const data = await getBlogPosts(filterCallback);
     console.log(data.topics)
     const resultset = []
-    let i = 0;
     for (const topic of data.topics) {
-      resultset.push(await getPostList(topic))
+        resultset.push(await getPostList(topic))
-      i++
     }
-    setAns(resultset);
+    setCardData(resultset);
   };
 
   React.useEffect(() => {
     getPosts();
-  }, []);
+  }, [filterCallback]);
 
-  if (ans) {
+  if (cardData) {
     return (
       <div className={styles.center}>
         <div className={styles.gridContainer}>
-          {ans.map(function(a, index){
+          {cardData.map(function(a, index){
             return <BlogCard 
             key={a.link}
             id={index + a.link}

src/components/blog/BlogSidebar/BlogSidebarButton/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+
+export default function BlogSidebarButton({
+    filterCallback,
+    text
+  }) {
+  const [isActive, setIsActive] = React.useState(false);
+  const activeClass = isActive ? styles.tagSelected : ''
+  function setFilters(e, f) {
+    console.log(e)
+    filterCallback(f)
+    setIsActive(current => !current);
+  }
+  return <div key={text} onClick={(e) => setFilters(e, text)} className={activeClass + ' ' + styles.tag}>{text}</div>
+
+}

src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css

@@ -0,0 +1,32 @@
+
+.tag {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--dev-secondary-text);
+  padding: 8px;
+  margin: 5px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--dev-text-color-normal);
+  transition: background-color 500ms;
+}
+
+.tagSelected {
+  font-size: 16px;
+  font-weight: 500;
+  background-color: var(--dev-secondary-text);
+  color: var(--dev-card-background);
+  padding: 8px;
+  margin: 5px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--dev-text-color-normal);
+  transition: background-color 500ms;
+}
+
+.tag:hover {
+  cursor: pointer;
+  background-color: var(--dev-text-color-normal);
+  color: var(--dev-card-background);
+}
+

src/components/blog/BlogSidebar/index.js

@@ -3,17 +3,60 @@ import clsx from 'clsx';
 import styles from './styles.module.css';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import Link from '@docusaurus/Link';
+import { getTags } from '../../../services/DiscourseService';
+import BlogSidebarButton from './BlogSidebarButton';
 
-export default function BlogSidebar() {
+export default function BlogSidebar({
-  return (
+  filterCallback
-    <div>
+  }) {
+  const [tagProductData, setTagProductData] = React.useState();
+  const [tagTechnologyData, setTagTechnologyData] = React.useState();
+  const [filteredProduct, setFilteredProduct] = React.useState();
 
-      <div className={styles.sideBarContainer}>
+  const getTagData = async () => {
-        sidebar Works!
+    const data = await getTags();
-      </div >
+    console.log(data.extras.tag_groups)
+    const tagTechnologyResultset = []
+    const tagProductResultset = []
+    for (const tagGroup of data.extras.tag_groups) {
+      if (tagGroup.id === 20) {
+        for (const tag of tagGroup.tags) {
+          tagProductResultset.push(tag.text)
+        }
+      }
+      if (tagGroup.id === 17) {
+        for (const tag of tagGroup.tags) {
+          tagTechnologyResultset.push(tag.text)
+        }
+      }
+    }
+    setTagProductData(tagProductResultset)
+    setTagTechnologyData(tagTechnologyResultset)
+  };
 
+  React.useEffect(() => {
+    getTagData();
+  }, []);
 
+  function setFilters(e, f) {
+    e.currentTarget.classList.toggle('selected');
+    console.log(e)
+    filterCallback(f)
+  }
 
-    </div>
+  if (tagProductData && tagTechnologyData) {
-  );
+    return (
+      <div className={styles.sidebar}>
+        <div className={styles.tagHeader}>Posts by Product</div>
+        <div className={styles.tagContainer}>
+            {tagProductData.map(function(a, index){
+              return <BlogSidebarButton key={a} text={a} filterCallback={filterCallback}></BlogSidebarButton>
+              // return <div key={a} onClick={(e) => setFilters(e, a)} className={styles.tag}>{a}</div>
+            })}
+        </div>
+      </div>
+    );
+  } else {
+    return <div></div>;
+  }
 }

src/components/blog/BlogSidebar/styles.module.css

@@ -1,7 +1,34 @@
 
-
+.sidebar {
-
-.sideBarContainer {
   width: 300px;
   height: 100%;
-}
+  margin: 50px;
+}
+
+.tagHeader {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.tagContainer {
+  display: flex;
+}
+
+.tag {
+  font-size: 16px;
+  font-weight: 500;
+  color: var(--dev-secondary-text);
+  padding: 8px;
+  margin: 5px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--dev-text-color-normal);
+  transition: background-color 500ms;
+}
+
+.tag:hover {
+  cursor: pointer;
+  background-color: var(--dev-text-color-normal);
+  color: var(--dev-card-background);
+}
+

src/css/custom.css

@@ -244,6 +244,7 @@
   --dev-text-color-secondary: #0033a1;
 
   --dev-secondary-text: #415364;
+  --dev-tag-highlight: #eaeef1;
 
   --text-on-primary: #ffffff;
 
@@ -286,6 +287,7 @@
   --dev-card-shadow: 0 4px 5px rgba(0, 0, 0, 0.2);
   --dev-card-selected: 0 5px 5px rgba(107, 107, 107, 0.2);
   --dev-secondary-text: #dae1e9;
+  --dev-tag-highlight: #00000075;
 
   /*main hero card*/
   --main-hero-card-background: #202122;

src/pages/blog.js

@@ -10,14 +10,22 @@ import BlogCards from '../components/blog/BlogCards';
 import BlogSidebar from '../components/blog/BlogSidebar';
 
 export default function Blog() {
+  const [filteredProduct, setFilteredProduct] = React.useState();
+
   const {siteConfig} = useDocusaurusContext();
+
+  const handleClick = (data) => {
+    console.log(data)
+    
+    setFilteredProduct(data)
+  };
   return (
     <Layout description="The SailPoint Developer Community has everything you need to build, extend, and automate scalable identity solutions.">
       <main>
       <BlogBanner />
       <div className={styles.blogContainer}>
-          <div className={styles.blogSidbarContainer}><BlogSidebar/></div>
+          <div className={styles.blogSidbarContainer}><BlogSidebar filterCallback={handleClick}/></div>
-          <div className={styles.blogCardContainer}><BlogCards/></div>
+          <div className={styles.blogCardContainer}><BlogCards filterCallback={filteredProduct}/></div>
       </div>
       
       </main>

src/pages/blog.module.css

@@ -3,9 +3,9 @@
 }
 
 .blogSidbarContainer {
-    flex: 10%;
+    flex: 5%;
 }
 
 .blogCardContainer {
-    flex: 90%;
+    flex: 95%;
 }

src/services/DiscourseService.js

@@ -9,10 +9,16 @@ export async function getTopPosts() {
   }
 }
 
-export async function getBlogPosts() {
+export async function getBlogPosts(tags) {
+  let url = ''
+  if (tags) {
+    url = 'https://developer.sailpoint.com/discuss/search.json?q=category:blog+tags:' + tags
+  } else {
+    url = 'https://developer.sailpoint.com/discuss/search.json?q=category:blog'
+  }
   try {
     const response = await fetch(
-      'https://developer.sailpoint.com/discuss/search.json?q=category:blog',
+      url,
     );
     return await response.json();
   } catch (error) {
@@ -30,3 +36,14 @@ export async function getTopic(id) {
     return [];
   }
 }
+
+export async function getTags() {
+  try {
+    const response = await fetch(
+      'https://developer.sailpoint.com/discuss/tags.json',
+    );
+    return await response.json();
+  } catch (error) {
+    return [];
+  }
+}