added sidebar

src/components/blog/BlogBanner/index.js

@@ -12,10 +12,6 @@ export default function BlogBanner() {
         <div className={styles.blogHeaderText}>
           SailPoint Developer Blog
         </div>
-        {/* <img
-          className={styles.background}
-          src={useBaseUrl('/blog/blog_banner_template.png')}>
-        </img> */}
       </div >
 
 

src/components/blog/BlogCard/index.js

@@ -14,21 +14,21 @@ export default function BlogCard({
   name,
   views,
   replies,
-  id
+  readTime
 }) {
 
   return (
     <Link to={link}>
       <div className={styles.card} >
 
-        <span className={styles.cardData}>
+        <div className={styles.cardData}>
           <img className={styles.cardEye} src={useBaseUrl('/blog/eye-regular.svg')}></img>
-          <span className={styles.cardDataTextAlign}><div>{views}</div></span>
-          <span className={styles.cardDataText}>{views}</span>
+          <div className={styles.cardCommentText}>{views}</div>
           <img className={styles.cardComment} src={useBaseUrl('/blog/comment-light.svg')}></img>
-          <span className={styles.cardDataTextAlign}><div>{replies}</div></span>
-          <span className={styles.cardDataText}>{replies}</span>
-        </span>
+          <div className={styles.cardCommentText}>{replies}</div>
+          <img className={styles.cardComment} src={useBaseUrl('/blog/clock-light.svg')}></img>
+          <div className={styles.cardCommentText}>{readTime} minute read</div>
+        </div>
 
         <div className={styles.cardUser}>
           <img className={styles.cardFace} src={useBaseUrl(creatorImage)}></img>

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

@@ -17,6 +17,10 @@
   box-shadow: var(--dev-card-selected);
 }
 
+
+
+
+
 .cardText {
   position: absolute;
   margin: 22px;
@@ -25,7 +29,6 @@
   left: 0;
 }
 
-
 .cardTitle {
   font-size: 22px;
   font-weight: 700;
@@ -38,7 +41,6 @@
   left: 0;
 }
 
-
 .tag {
   font-size: 16px;
   font-weight: 500;
@@ -56,10 +58,14 @@
   grid-gap: 10px;
 }
 
+
+
+
+
 .cardUser {
   position: absolute;
   bottom: 10px;
-  left: 120px;
+  left: 25px;
   display: flex;
 }
 
@@ -77,10 +83,15 @@
 }
 
 
+
+
+
 .cardData {
   position: absolute;
   bottom: 50px;
   left: 20px;
+  display: flex;
+  align-items: center;
 }
 
 .cardEye {
@@ -92,24 +103,6 @@
   width: 18px;
 }
 
-.cardDataText {
-  color: #96a9ba;
-  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
-  margin-left: 5px;
-  font-size: 16px;
-  text-align: start;
-  visibility: hidden;
-}
-.cardDataTextAlign {
-  color: #96a9ba;
-  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
-  margin-left: 5px;
-  font-size: 16px;
-  text-align: start;
-  position: absolute;
-  top: -3px
-}
-
 .cardComment {
   margin-left: 10px;
   fill: #96a9bb;
@@ -117,12 +110,14 @@
   filter: invert(79%) sepia(12%) saturate(484%) hue-rotate(168deg) brightness(84%) contrast(84%);
   height: 18px;
   width: 18px;
+  margin-bottom: 4px;
 }
 
 .cardCommentText {
   color: #96a9ba;
   /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
   margin-left: 5px;
+  margin-bottom: 5px;
   height: 20px;
   font-size: 16px;
 }

src/components/blog/BlogCards/index.js

@@ -38,6 +38,7 @@ export default function BlogCards() {
             title={a.title}
             views={a.views}
             replies={a.replies}
+            readTime={a.readTime}
             creatorImage={a.creatorImage}></BlogCard>
           })}
         </div>
@@ -67,6 +68,7 @@ async function getPostList(topic) {
     liked: topic.like_count,
     replies: fullTopic.posts_count,
     solution: topic.has_accepted_answer,
+    readTime: parseInt(fullTopic.word_count/100),
   };
 }
 

src/components/blog/BlogSidebar/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from './styles.module.css';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import Link from '@docusaurus/Link';
+
+export default function BlogSidebar() {
+  return (
+    <div>
+
+      <div className={styles.sideBarContainer}>
+        sidebar Works!
+      </div >
+
+
+
+    </div>
+  );
+}

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

@@ -0,0 +1,7 @@
+
+
+
+.sideBarContainer {
+  width: 300px;
+  height: 100%;
+}

src/pages/blog.js

@@ -7,6 +7,7 @@ import BlogBanner from '../components/blog/BlogBanner';
 
 import styles from './blog.module.css';
 import BlogCards from '../components/blog/BlogCards';
+import BlogSidebar from '../components/blog/BlogSidebar';
 
 export default function Blog() {
   const {siteConfig} = useDocusaurusContext();
@@ -14,7 +15,11 @@ export default function Blog() {
     <Layout description="The SailPoint Developer Community has everything you need to build, extend, and automate scalable identity solutions.">
       <main>
       <BlogBanner />
-      <BlogCards />
+      <div className={styles.blogContainer}>
+          <div className={styles.blogSidbarContainer}><BlogSidebar/></div>
+          <div className={styles.blogCardContainer}><BlogCards/></div>
+      </div>
+      
       </main>
     </Layout>
   );

src/pages/blog.module.css

@@ -0,0 +1,11 @@
+.blogContainer {
+    display: flex;
+}
+
+.blogSidbarContainer {
+    flex: 10%;
+}
+
+.blogCardContainer {
+    flex: 90%;
+}

static/blog/clock-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M480 256A224 224 0 1 1 32 256a224 224 0 1 1 448 0zM0 256a256 256 0 1 0 512 0A256 256 0 1 0 0 256zM240 112V256c0 5.3 2.7 10.3 7.1 13.3l96 64c7.4 4.9 17.3 2.9 22.2-4.4s2.9-17.3-4.4-22.2L272 247.4V112c0-8.8-7.2-16-16-16s-16 7.2-16 16z"/></svg>

static/blog/watch-light.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M128 32H256c17.7 0 32 14.3 32 32V89.7C259.8 73.3 227 64 192 64s-67.8 9.3-96 25.7V64c0-17.7 14.3-32 32-32zM64 112h1C25.1 147.2 0 198.7 0 256s25.1 108.8 65 144H64v48c0 35.3 28.7 64 64 64l128 0c35.3 0 64-28.7 64-64V400h-1c39.9-35.2 65-86.7 65-144s-25.1-108.8-65-144h1V64c0-35.3-28.7-64-64-64H128C92.7 0 64 28.7 64 64v48zM288 422.3V448c0 17.7-14.3 32-32 32l-128 0c-17.7 0-32-14.3-32-32V422.3c28.2 16.3 61 25.7 96 25.7s67.8-9.4 96-25.7zM32 256a160 160 0 1 1 320 0A160 160 0 1 1 32 256zm176-80c0-8.8-7.2-16-16-16s-16 7.2-16 16v80c0 5.3 2.7 10.3 7.1 13.3l48 32c7.4 4.9 17.3 2.9 22.2-4.4s2.9-17.3-4.4-22.2L208 247.4V176z"/></svg>