style updates to video cards and navigation from tile changes

plugins.js

@@ -12,6 +12,7 @@ const routes = videos.map((video) => ({
     title: video.title,
     body: video.body,
     tags: video.tags,
+    id: video.id,
   },
 }));
 

src/components/video-library/VideoCard/index.js

@@ -2,19 +2,31 @@ import React from 'react';
 import styles from './styles.module.css';
 import Link from '@docusaurus/Link';
 
-export default function VideoCard({videoURL, thumbnail, title, body, tags}) {
+export default function VideoCard({
-
+  videoURL,
+  thumbnail,
+  title,
+  body,
+  avatar,
+  tags,
+}) {
   return (
     <Link to={videoURL}>
       <div className={styles.card}>
         <div className={styles.cardText}>
-          <img className={styles.cardImage} src={thumbnail}></img>
+          <div className={styles.thumbContainer}>
-          <div className={styles.cardTitle}>{title}</div>
+            <img className={styles.cardImage} src={thumbnail}></img>
+          </div>
+
+          <div className={styles.cardTitle}>
+            <div className={styles.avatarContainer}>
+              <img className={styles.avatar} src={avatar}></img>
+            </div>
+
+            <div className={styles.titleContainer}>{title}</div>
+          </div>
           <div className={styles.tags}>
             {tags?.map((tag, index) => {
-              // if (index > 2 || tag == 'sailpoint-certified' || tag == 'sailpoint-authored') {
-              //   return '';
-              // }
               return (
                 <div key={tag} className={styles.tag}>
                   {tag}
@@ -22,9 +34,6 @@ export default function VideoCard({videoURL, thumbnail, title, body, tags}) {
               );
             })}
           </div>
-          <div className={styles.cardBody}>
-            {body.length > 100 ? body.substring(0, 97) + '...' : body}
-          </div>
         </div>
       </div>
     </Link>

src/components/video-library/VideoCard/styles.module.css

@@ -1,19 +1,13 @@
 /* Getting Started Card */
 .card {
   position: relative;
-  margin-top: 20px;
+  margin-top: 30px;
-  height: 600px;
-  /* UI Properties */
-  background: var(--dev-card-background);
-  box-shadow: var(--dev-card-shadow);
-  border: 1px solid var(--dev-card-background);
-  border-radius: 40px;
   opacity: 1;
-  transition: all  0.3s;
+  transition: all 0.3s;
-  max-width: 400px;
+  max-width: 300px;
 }
 
-.card:hover {
+.card:hover .thumbContainer {
   cursor: pointer;
   transform: translate(0px, -5px);
   box-shadow: var(--dev-card-selected);
@@ -27,17 +21,63 @@
   margin-bottom: 75px;
 }
 
+.thumbContainer {
+  --tw-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color),
+    0 1px 2px -1px var(--tw-shadow-color);
+  border-radius: 0.5rem;
+  box-shadow: 0 0 transparent, 0 0 transparent, 0 1px 3px 0 rgba(0, 0, 0, 0.1),
+    0 1px 2px -1px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  overflow: hidden;
+  position: relative;
+  height: 144px;
+}
+
 .cardImage {
-  border-radius: 4px;
+  height: auto;
-  justify-content: center;
+  max-width: 100%;
-  aspect-ratio: 16/9;
+  width: 256px;
+  height: 144px;
+  border-radius: 0.5rem;
+}
+
+.avatarContainer {
+  padding-left: 2rem;
+  position: relative;
+  width: 2.125rem;
+}
+
+.avatar {
+  --tw-border-opacity: 1;
+  --w: 2.125rem;
+  border-color: #f1f1e7;
+  border-color: rgb(241 241 231 / var(--tw-border-opacity));
+  border-radius: 9999px;
+  border-width: 2px;
+  left: 0;
+  max-width: 2.125rem;
+  max-width: var(--w);
+  min-width: 2.125rem;
+  min-width: var(--w);
+  position: absolute;
+  width: var(--w);
+  z-index: 10;
+}
+
+.titleContainer {
+  height: 40px;
 }
 
 .cardTitle {
-  margin-top: 25px;
+  font-size: 12px;
-  padding: 10px;
+  font-weight: 400;
-  font-size: 22px;
+  display: flex;
-  font-weight: 700;
+  gap: 1rem;
+  margin-top: 1rem;
+  padding-right: 0.5rem;
+  text-align: left;
 }
 
 .cardBody {
@@ -49,8 +89,8 @@
 }
 
 .tag {
-  font-size: 16px;
+  font-size: 10px;
-  font-weight: 500;
+  font-weight: 300;
   color: var(--dev-secondary-text);
   background-color: var(--dev-tag-highlight);
   padding: 0px 8px;
@@ -64,4 +104,15 @@
   display: flex;
   flex-wrap: wrap;
   margin-bottom: 10px;
+  margin-top: 5px;
+}
+
+@media only screen and (max-width: 550px) {
+  .cardText {
+    margin-bottom: 0px;
+  }
+
+  .tags {
+    margin-top: 2px;
+  }
 }

src/components/video-library/VideoCardDetails/index.js

@@ -19,15 +19,6 @@ const VideoCardDetail = (props) => {
     });
   }, []);
 
-  // const setIframeStyle = () => {
-  //   const iframe = document.getElementById('discourse-embed-frame');
-  //   if (iframe && iframe.contentWindow && iframe.contentWindow.document) {
-  //     const style = document.createElement('style');
-  //     style.textContent = 'html { padding: 2% }';
-  //     iframe.contentWindow.document.head.appendChild(style);
-  //   }
-  // };
-
   return (
     <Layout description="The SailPoint Developer Community has everything you need to build, extend, and automate scalable identity solutions.">
       <main>
@@ -36,13 +27,19 @@ const VideoCardDetail = (props) => {
             source={base + props.route.customProps.uuid}
             container="vidyard"></Video>
           <div>
-            <h1 className={styles.videoTitle}>{props.route.customProps.title}</h1>
+            <h1 className={styles.videoTitle}>
+              {props.route.customProps.title}
+            </h1>
           </div>
           <div>
-            <p>{props.route.customProps.body}</p>
+            <p>
+              {props.route.customProps.body}
+            </p>
           </div>
           <div id="discourseContainer" className={styles.discourseContainer}>
-            <DiscourseEmbed discourseEmbedUrl={props.route.customProps.uuid}></DiscourseEmbed>
+            <DiscourseEmbed
+              discourseEmbedUrl={props.route.customProps.uuid}
+              topicId={props.route.customProps.id}></DiscourseEmbed>
           </div>
         </div>
       </main>

src/components/video-library/VideoCards/index.js

@@ -10,395 +10,7 @@ import BounceLoader from 'react-spinners/BounceLoader';
 import videos from '../../../../static/videos/videos.json';
 import {getVideoPosts} from '../../../services/DiscourseService';
 
-const topicData = {
+export default function VideoCards({filterCallback}) {
-  users: [
-    {
-      id: 1,
-      username: 'jordan_violet',
-      name: 'Jordan Violet',
-      avatar_template:
-        '/discuss/user_avatar/developer.sailpoint.com/jordan_violet/{size}/1657_2.png',
-      primary_group_name: 'developer_relations',
-      flair_name: 'developer_relations',
-      flair_url:
-        'https://global.discourse-cdn.com/sailpoint/original/2X/c/c1c09cb5f47af2124008b081b2e383c0d87302fc.png',
-      flair_bg_color: 'ffffff',
-      flair_group_id: 41,
-      admin: true,
-      trust_level: 3,
-      assign_icon: 'user-plus',
-      assign_path: '/u/jordan_violet/activity/assigned',
-    },
-    {
-      id: 7274,
-      username: 'Darrell',
-      name: 'Darrell Thobe',
-      avatar_template:
-        '/discuss/user_avatar/developer.sailpoint.com/darrell/{size}/5688_2.png',
-      primary_group_name: 'dev_tools_team',
-      flair_name: 'dev_tools_team',
-      flair_url:
-        'https://global.discourse-cdn.com/sailpoint/original/2X/f/f2136700ed5e3703e0b85e02f6be799dacca7735.png',
-      flair_bg_color: 'ffffff',
-      flair_group_id: 96,
-      admin: true,
-      trust_level: 3,
-      assign_icon: 'user-plus',
-      assign_path: '/u/Darrell/activity/assigned',
-    },
-  ],
-  primary_groups: [
-    {id: 41, name: 'developer_relations'},
-    {id: 96, name: 'dev_tools_team'},
-  ],
-  flair_groups: [
-    {
-      id: 41,
-      name: 'developer_relations',
-      flair_url:
-        'https://global.discourse-cdn.com/sailpoint/original/2X/c/c1c09cb5f47af2124008b081b2e383c0d87302fc.png',
-      flair_bg_color: 'ffffff',
-      flair_color: '',
-    },
-    {
-      id: 96,
-      name: 'dev_tools_team',
-      flair_url:
-        'https://global.discourse-cdn.com/sailpoint/original/2X/f/f2136700ed5e3703e0b85e02f6be799dacca7735.png',
-      flair_bg_color: 'ffffff',
-      flair_color: '',
-    },
-  ],
-  topic_list: {
-    can_create_topic: true,
-    per_page: 30,
-    top_tags: [
-      'developer-days-2023',
-      'access-intelligence-center',
-      'identitynow',
-    ],
-    circles: [],
-    topics: [
-      {
-        id: 29911,
-        title: 'Access Intelligence Center: Out of the Box Charts & Dashboards',
-        fancy_title:
-          'Access Intelligence Center: Out of the Box Charts & Dashboards',
-        slug: 'access-intelligence-center-out-of-the-box-charts-dashboards',
-        posts_count: 3,
-        reply_count: 0,
-        highest_post_number: 3,
-        image_url: null,
-        created_at: '2024-02-09T14:00:39.226Z',
-        last_posted_at: '2024-02-09T14:28:39.584Z',
-        bumped: true,
-        bumped_at: '2024-02-09T14:28:39.584Z',
-        archetype: 'regular',
-        unseen: false,
-        last_read_post_number: 3,
-        unread: 0,
-        new_posts: 0,
-        unread_posts: 0,
-        pinned: false,
-        unpinned: null,
-        excerpt:
-          'https://play.vidyard.com/Jd8waVWCZm3bZcNjJhRF2n.html \n\nDescription\nWithin other areas of our documentation, you will find resources that are tailored to specific features of our platform, providing in-depth information…',
-        visible: true,
-        closed: false,
-        archived: false,
-        notification_level: 2,
-        bookmarked: false,
-        liked: false,
-        thumbnails: null,
-        tags: ['identitynow', 'access-intelligence-center'],
-        tags_descriptions: {},
-        views: 5,
-        like_count: 0,
-        has_summary: false,
-        last_poster_username: 'Darrell',
-        category_id: 118,
-        pinned_globally: false,
-        featured_link: null,
-        ratings: [],
-        show_ratings: false,
-        has_accepted_answer: false,
-        can_have_answer: false,
-        can_vote: false,
-        posters: [
-          {
-            extras: null,
-            description: 'Original Poster',
-            user_id: 1,
-            primary_group_id: 41,
-            flair_group_id: 41,
-          },
-          {
-            extras: 'latest',
-            description: 'Most Recent Poster',
-            user_id: 7274,
-            primary_group_id: 96,
-            flair_group_id: 96,
-          },
-        ],
-      },
-      {
-        id: 29908,
-        title: 'About the Videos category',
-        fancy_title: 'About the Videos category',
-        slug: 'about-the-videos-category',
-        posts_count: 1,
-        reply_count: 0,
-        highest_post_number: 1,
-        image_url: null,
-        created_at: '2024-02-09T13:53:25.090Z',
-        last_posted_at: null,
-        bumped: true,
-        bumped_at: '2024-02-09T13:53:25.091Z',
-        archetype: 'regular',
-        unseen: false,
-        last_read_post_number: 1,
-        unread: 0,
-        new_posts: 0,
-        unread_posts: 0,
-        pinned: false,
-        unpinned: true,
-        excerpt: null,
-        visible: true,
-        closed: false,
-        archived: false,
-        notification_level: 1,
-        bookmarked: false,
-        liked: false,
-        thumbnails: null,
-        tags: [],
-        tags_descriptions: {},
-        views: 1,
-        like_count: 0,
-        has_summary: false,
-        last_poster_username: 'jordan_violet',
-        category_id: 118,
-        pinned_globally: false,
-        featured_link: null,
-        ratings: [],
-        show_ratings: false,
-        has_accepted_answer: false,
-        can_have_answer: false,
-        can_vote: false,
-        posters: [
-          {
-            extras: 'latest single',
-            description: 'Original Poster, Most Recent Poster',
-            user_id: 1,
-            primary_group_id: 41,
-            flair_group_id: 41,
-          },
-        ],
-      },
-      {
-        id: 29909,
-        title: 'Automated Documentation Tool for IIQ',
-        fancy_title: 'Automated Documentation Tool for IIQ',
-        slug: 'automated-documentation-tool-for-iiq',
-        posts_count: 1,
-        reply_count: 0,
-        highest_post_number: 1,
-        image_url:
-          'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_1024x576.jpeg',
-        created_at: '2024-02-09T13:57:05.388Z',
-        last_posted_at: '2024-02-09T13:57:05.476Z',
-        bumped: true,
-        bumped_at: '2024-02-09T13:57:05.476Z',
-        archetype: 'regular',
-        unseen: false,
-        pinned: false,
-        unpinned: null,
-        excerpt:
-          'Presenters: @menno_pieters \nPresentation: \nDocumentation Generator for IdentityIQ.pdf (1.4 MB) \nThe tool can be found here: GitHub - menno-pieters-sp/identityiq-documentation-public: IdentityIQ Documentation Tool \nThe me…',
-        visible: true,
-        closed: false,
-        archived: false,
-        bookmarked: null,
-        liked: null,
-        thumbnails: [
-          {
-            max_width: null,
-            max_height: null,
-            width: 1280,
-            height: 720,
-            url: 'https://global.discourse-cdn.com/sailpoint/original/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7.jpeg',
-          },
-          {
-            max_width: 1024,
-            max_height: 1024,
-            width: 1024,
-            height: 576,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_1024x576.jpeg',
-          },
-          {
-            max_width: 800,
-            max_height: 800,
-            width: 800,
-            height: 450,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_800x450.jpeg',
-          },
-          {
-            max_width: 400,
-            max_height: 400,
-            width: 400,
-            height: 225,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_400x225.jpeg',
-          },
-          {
-            max_width: 200,
-            max_height: 200,
-            width: 200,
-            height: 112,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_200x112.jpeg',
-          },
-          {
-            max_width: 100,
-            max_height: 100,
-            width: 100,
-            height: 56,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_100x56.jpeg',
-          },
-          {
-            max_width: 50,
-            max_height: 50,
-            width: 50,
-            height: 28,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_50x28.jpeg',
-          },
-        ],
-        tags: ['developer-days-2023'],
-        tags_descriptions: {},
-        views: 1,
-        like_count: 0,
-        has_summary: false,
-        last_poster_username: 'jordan_violet',
-        category_id: 118,
-        pinned_globally: false,
-        featured_link: null,
-        ratings: [],
-        show_ratings: false,
-        has_accepted_answer: false,
-        can_have_answer: false,
-        can_vote: false,
-        posters: [
-          {
-            extras: 'latest single',
-            description: 'Original Poster, Most Recent Poster',
-            user_id: 1,
-            primary_group_id: 41,
-            flair_group_id: 41,
-          },
-        ],
-      },
-      {
-        id: 29910,
-        title: 'Error at Line 0: Advanced Logging for your IIQ Code',
-        fancy_title: 'Error at Line 0: Advanced Logging for your IIQ Code',
-        slug: 'error-at-line-0-advanced-logging-for-your-iiq-code',
-        posts_count: 1,
-        reply_count: 0,
-        highest_post_number: 1,
-        image_url:
-          'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_1024x576.jpeg',
-        created_at: '2024-02-09T13:57:51.476Z',
-        last_posted_at: '2024-02-09T13:57:51.566Z',
-        bumped: true,
-        bumped_at: '2024-02-09T13:57:51.566Z',
-        archetype: 'regular',
-        unseen: false,
-        pinned: false,
-        unpinned: null,
-        excerpt:
-          'Presenters: @alexander_jakimowic \nPresentation: \nLoggingFramework_Pres_1_2.pptx (3,2 MB) \nHere you can find the code of the Framework (Java and RuleLibrary), The log4j2Admin.jsp page, and some admittedly rudimentary java…',
-        visible: true,
-        closed: false,
-        archived: false,
-        bookmarked: null,
-        liked: null,
-        thumbnails: [
-          {
-            max_width: null,
-            max_height: null,
-            width: 1280,
-            height: 720,
-            url: 'https://global.discourse-cdn.com/sailpoint/original/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa.jpeg',
-          },
-          {
-            max_width: 1024,
-            max_height: 1024,
-            width: 1024,
-            height: 576,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_1024x576.jpeg',
-          },
-          {
-            max_width: 800,
-            max_height: 800,
-            width: 800,
-            height: 450,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_800x450.jpeg',
-          },
-          {
-            max_width: 400,
-            max_height: 400,
-            width: 400,
-            height: 225,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_400x225.jpeg',
-          },
-          {
-            max_width: 200,
-            max_height: 200,
-            width: 200,
-            height: 112,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_200x112.jpeg',
-          },
-          {
-            max_width: 100,
-            max_height: 100,
-            width: 100,
-            height: 56,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_100x56.jpeg',
-          },
-          {
-            max_width: 50,
-            max_height: 50,
-            width: 50,
-            height: 28,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_50x28.jpeg',
-          },
-        ],
-        tags: ['developer-days-2023'],
-        tags_descriptions: {},
-        views: 1,
-        like_count: 0,
-        has_summary: false,
-        last_poster_username: 'jordan_violet',
-        category_id: 118,
-        pinned_globally: false,
-        featured_link: null,
-        ratings: [],
-        show_ratings: false,
-        has_accepted_answer: false,
-        can_have_answer: false,
-        can_vote: false,
-        posters: [
-          {
-            extras: 'latest single',
-            description: 'Original Poster, Most Recent Poster',
-            user_id: 1,
-            primary_group_id: 41,
-            flair_group_id: 41,
-          },
-        ],
-      },
-    ],
-  },
-};
-
-export default function VideoCards(filterCallback) {
   const [cardData, setCardData] = React.useState();
   const [loadingCards, setLoadingCards] = React.useState(true);
 
@@ -409,42 +21,70 @@ export default function VideoCards(filterCallback) {
   function parseVideoDetails(inputStr) {
     // Split the string by the known separator for the description
     const parts = inputStr.split('\n\nDescription\n');
-    const videoUrl = parts[0].trim(); // Get the video URL, trimming any whitespace
+    const videoUrl = parts[0].trim(); // Get the video URL, trimming any whitespace(
+    const lastSegment = videoUrl.split('/').pop();
+    const page = lastSegment.replace('.html', '');
     const description = parts.length > 1 ? parts[1].trim() : ''; // Get the description if it exists
-
+    console.log(videoUrl);
     return {
       videoUrl,
       description,
+      page,
     };
   }
 
+  function shortenTitle(title) {
+    if (title.length > 63) {
+      return title.substring(0, 62) + '...';
+    }
+    return title;
+  }
+
   const getVideoTopics = async () => {
-    console.log(filterCallback);
+    let tags = filterCallback.tags
-    // const data = await getVideoPosts(filterCallback.tags.join('+'));
+    console.log(tags);
-    const data = await topicData;
+    const data = await getVideoPosts(tags ? filterCallback.tags.join('+') : '');
+    // const data = await topicData;
     const resultset = [];
     if (data.topic_list) {
       for (const topic of data.topic_list.topics) {
         if (topic.tags.length > 0) {
-          let {videoUrl, description} = parseVideoDetails(topic.excerpt);
+          let {videoUrl, description, page} = parseVideoDetails(topic.excerpt);
           let thumbnail = videoUrl.replace('.html', '.jpg');
+          let avatar = '';
+          let ogPoster = '';
+          for (const poster of topic.posters) {
+            if (poster.description.includes('Original Poster')) {
+              ogPoster = poster;
+              break;
+            }
+          }
+        
+          for (const user of data.users) {
+            if (user.id === ogPoster.user_id) {
+              avatar = 'https://sea1.discourse-cdn.com/sailpoint' + user.avatar_template.replace('{size}', '45');
+              break;
+            }
+          }
 
-          if (videoUrl && description) {
+          if (videoUrl && description && page) {
             resultset.push({
               key: topic.id,
-              title: topic.title,
+              title: shortenTitle(topic.title),
               tags: topic.tags,
               body: description,
               thumbnail: thumbnail,
-              url: buildTopicUrl(topic.slug, topic.id),
+              avatar: avatar,
+              url: videoBaseURL() + page,
             });
           } else {
             resultset.push({
               key: topic.id,
-              title: topic.title,
+              title: shortenTitle(topic.title),
               tags: topic.tags,
               body: topic.excerpt,
               thumbnail: topic.image_url,
+              avatar: avatar,
               url: buildTopicUrl(topic.slug, topic.id),
             });
           }
@@ -475,6 +115,7 @@ export default function VideoCards(filterCallback) {
                 thumbnail={a.thumbnail}
                 title={a.title}
                 body={a.body}
+                avatar={a.avatar}
                 tags={a.tags}></VideoCard>
             );
           })}

src/components/video-library/VideoCards/styles.module.css

@@ -3,9 +3,9 @@
   display: flex;
   /* place-content: center; */
   flex-wrap: wrap;
-  gap: 40px;
+  gap: 5px;
-  margin-left: 40px;
+  margin-left: 20px;
-  margin-right: 40px;
+ 
 }
 .gridContainer::after {
   content: '';
@@ -21,6 +21,18 @@
   }
 }
 
+@media only screen and (max-width: 550px) {
+  .gridContainer {
+    display: flex;
+    
+    flex-wrap: wrap;
+    gap: 0px;
+    margin-left: 0px;
+    margin-top: -5%;
+   
+  }
+}
+
 .center {
   margin: 0px auto;
   margin-bottom: 50px;

src/components/video-library/VideoComments/index.js

@@ -1,6 +1,6 @@
 import React, {useEffect} from 'react';
 
-const DiscourseEmbed = ({discourseEmbedUrl}) => {
+const DiscourseEmbed = ({discourseEmbedUrl, topicId}) => {
   useEffect(() => {
     const discourseUrl = 'https://developer.sailpoint.com/discuss/';
     const embedUrl = `https://d1vrqvoe9hgpx0.cloudfront.net/videos/${discourseEmbedUrl}/index.html`;
@@ -9,7 +9,7 @@ const DiscourseEmbed = ({discourseEmbedUrl}) => {
    
     window.DiscourseEmbed = {
       discourseUrl,
-      topicId: 24732,
+      topicId: topicId,
        // discourseEmbedUrl: embedUrl,
       className: 'EMBEDDED_BODY',
     };
@@ -26,7 +26,6 @@ const DiscourseEmbed = ({discourseEmbedUrl}) => {
     metaTag.setAttribute('discourse-embed-color', '#00A2E8'); // Add attribute to meta tag for Discourse Embed color (optional)
     document.getElementsByTagName('head')[0].appendChild(metaTag); // Append to head to avoid duplicating if component re-renders
     
-
     // Create and append Discourse embed script
     const scriptTag = document.createElement('script');
     scriptTag.type = 'text/javascript';
@@ -47,7 +46,7 @@ const DiscourseEmbed = ({discourseEmbedUrl}) => {
     <>
       <meta name="discourse-username" content="Darrell-Thobe" />
       <meta name="discourse-embed-url" content={discourseEmbedUrl} />
-      <div id="discourse-comments"></div>
+      <div style={{display: 'flex', paddingBottom: '2%'}} id="discourse-comments"></div>
     </>
   ); // Container for the Discourse comments
 };

src/components/video-library/VideoSidebar/VideoSidebarButton/index.js

@@ -30,22 +30,12 @@ export default function MarketplaceSidebarButton({
   }
   //const activeClass = isActive ? styles.tagSelected : ''
   function setFilters(e, id) {
-    if (isCategory) {
-      if (category === id) {
-        filterCallback({ "category": "colab" })
-        setIsActive(false)
-      } else {
-        filterCallback({ "category": id })
-        setIsActive(true)
-      }
-
-    } else {
       filterCallback({ "tag": id })
       setIsActive(current => !current);
     }
 
 
-  }
+  
   return (
     <div>
       <input onClick={(e) => setFilters(e, id)} id={id} type='checkbox' className={styles.sidebarButton + ' ' + radioClass} checked={activeClass != ''} onChange={handleChange}></input>

src/components/video-library/VideoSidebar/index.js

@@ -1,412 +1,16 @@
 import React from 'react';
-import clsx from 'clsx';
 import styles from './styles.module.css';
-import useBaseUrl from '@docusaurus/useBaseUrl';
-import Link from '@docusaurus/Link';
-import {getCatagories, getTags} from '../../../services/DiscourseService';
 import MarketplaceSidebarButton from './VideoSidebarButton';
-import {
+import {getVideoPosts} from '../../../services/DiscourseService';
-  discourseMarketplaceCatagoryId,
-  discourseProductTag,
-} from '../../../util/util';
 
-const topicData = {
+export default function MarketplaceSidebar({filterCallback}) {
-  users: [
-    {
-      id: 1,
-      username: 'jordan_violet',
-      name: 'Jordan Violet',
-      avatar_template:
-        '/discuss/user_avatar/developer.sailpoint.com/jordan_violet/{size}/1657_2.png',
-      primary_group_name: 'developer_relations',
-      flair_name: 'developer_relations',
-      flair_url:
-        'https://global.discourse-cdn.com/sailpoint/original/2X/c/c1c09cb5f47af2124008b081b2e383c0d87302fc.png',
-      flair_bg_color: 'ffffff',
-      flair_group_id: 41,
-      admin: true,
-      trust_level: 3,
-      assign_icon: 'user-plus',
-      assign_path: '/u/jordan_violet/activity/assigned',
-    },
-    {
-      id: 7274,
-      username: 'Darrell',
-      name: 'Darrell Thobe',
-      avatar_template:
-        '/discuss/user_avatar/developer.sailpoint.com/darrell/{size}/5688_2.png',
-      primary_group_name: 'dev_tools_team',
-      flair_name: 'dev_tools_team',
-      flair_url:
-        'https://global.discourse-cdn.com/sailpoint/original/2X/f/f2136700ed5e3703e0b85e02f6be799dacca7735.png',
-      flair_bg_color: 'ffffff',
-      flair_group_id: 96,
-      admin: true,
-      trust_level: 3,
-      assign_icon: 'user-plus',
-      assign_path: '/u/Darrell/activity/assigned',
-    },
-  ],
-  primary_groups: [
-    {id: 41, name: 'developer_relations'},
-    {id: 96, name: 'dev_tools_team'},
-  ],
-  flair_groups: [
-    {
-      id: 41,
-      name: 'developer_relations',
-      flair_url:
-        'https://global.discourse-cdn.com/sailpoint/original/2X/c/c1c09cb5f47af2124008b081b2e383c0d87302fc.png',
-      flair_bg_color: 'ffffff',
-      flair_color: '',
-    },
-    {
-      id: 96,
-      name: 'dev_tools_team',
-      flair_url:
-        'https://global.discourse-cdn.com/sailpoint/original/2X/f/f2136700ed5e3703e0b85e02f6be799dacca7735.png',
-      flair_bg_color: 'ffffff',
-      flair_color: '',
-    },
-  ],
-  topic_list: {
-    can_create_topic: true,
-    per_page: 30,
-    top_tags: [
-      'developer-days-2023',
-      'access-intelligence-center',
-      'identitynow',
-    ],
-    circles: [],
-    topics: [
-      {
-        id: 29911,
-        title: 'Access Intelligence Center: Out of the Box Charts & Dashboards',
-        fancy_title:
-          'Access Intelligence Center: Out of the Box Charts & Dashboards',
-        slug: 'access-intelligence-center-out-of-the-box-charts-dashboards',
-        posts_count: 3,
-        reply_count: 0,
-        highest_post_number: 3,
-        image_url: null,
-        created_at: '2024-02-09T14:00:39.226Z',
-        last_posted_at: '2024-02-09T14:28:39.584Z',
-        bumped: true,
-        bumped_at: '2024-02-09T14:28:39.584Z',
-        archetype: 'regular',
-        unseen: false,
-        last_read_post_number: 3,
-        unread: 0,
-        new_posts: 0,
-        unread_posts: 0,
-        pinned: false,
-        unpinned: null,
-        excerpt:
-          'https://play.vidyard.com/Jd8waVWCZm3bZcNjJhRF2n.html \n\nDescription\nWithin other areas of our documentation, you will find resources that are tailored to specific features of our platform, providing in-depth information…',
-        visible: true,
-        closed: false,
-        archived: false,
-        notification_level: 2,
-        bookmarked: false,
-        liked: false,
-        thumbnails: null,
-        tags: ['identitynow', 'access-intelligence-center'],
-        tags_descriptions: {},
-        views: 5,
-        like_count: 0,
-        has_summary: false,
-        last_poster_username: 'Darrell',
-        category_id: 118,
-        pinned_globally: false,
-        featured_link: null,
-        ratings: [],
-        show_ratings: false,
-        has_accepted_answer: false,
-        can_have_answer: false,
-        can_vote: false,
-        posters: [
-          {
-            extras: null,
-            description: 'Original Poster',
-            user_id: 1,
-            primary_group_id: 41,
-            flair_group_id: 41,
-          },
-          {
-            extras: 'latest',
-            description: 'Most Recent Poster',
-            user_id: 7274,
-            primary_group_id: 96,
-            flair_group_id: 96,
-          },
-        ],
-      },
-      {
-        id: 29908,
-        title: 'About the Videos category',
-        fancy_title: 'About the Videos category',
-        slug: 'about-the-videos-category',
-        posts_count: 1,
-        reply_count: 0,
-        highest_post_number: 1,
-        image_url: null,
-        created_at: '2024-02-09T13:53:25.090Z',
-        last_posted_at: null,
-        bumped: true,
-        bumped_at: '2024-02-09T13:53:25.091Z',
-        archetype: 'regular',
-        unseen: false,
-        last_read_post_number: 1,
-        unread: 0,
-        new_posts: 0,
-        unread_posts: 0,
-        pinned: false,
-        unpinned: true,
-        excerpt: null,
-        visible: true,
-        closed: false,
-        archived: false,
-        notification_level: 1,
-        bookmarked: false,
-        liked: false,
-        thumbnails: null,
-        tags: [],
-        tags_descriptions: {},
-        views: 1,
-        like_count: 0,
-        has_summary: false,
-        last_poster_username: 'jordan_violet',
-        category_id: 118,
-        pinned_globally: false,
-        featured_link: null,
-        ratings: [],
-        show_ratings: false,
-        has_accepted_answer: false,
-        can_have_answer: false,
-        can_vote: false,
-        posters: [
-          {
-            extras: 'latest single',
-            description: 'Original Poster, Most Recent Poster',
-            user_id: 1,
-            primary_group_id: 41,
-            flair_group_id: 41,
-          },
-        ],
-      },
-      {
-        id: 29909,
-        title: 'Automated Documentation Tool for IIQ',
-        fancy_title: 'Automated Documentation Tool for IIQ',
-        slug: 'automated-documentation-tool-for-iiq',
-        posts_count: 1,
-        reply_count: 0,
-        highest_post_number: 1,
-        image_url:
-          'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_1024x576.jpeg',
-        created_at: '2024-02-09T13:57:05.388Z',
-        last_posted_at: '2024-02-09T13:57:05.476Z',
-        bumped: true,
-        bumped_at: '2024-02-09T13:57:05.476Z',
-        archetype: 'regular',
-        unseen: false,
-        pinned: false,
-        unpinned: null,
-        excerpt:
-          'Presenters: @menno_pieters \nPresentation: \nDocumentation Generator for IdentityIQ.pdf (1.4 MB) \nThe tool can be found here: GitHub - menno-pieters-sp/identityiq-documentation-public: IdentityIQ Documentation Tool \nThe me…',
-        visible: true,
-        closed: false,
-        archived: false,
-        bookmarked: null,
-        liked: null,
-        thumbnails: [
-          {
-            max_width: null,
-            max_height: null,
-            width: 1280,
-            height: 720,
-            url: 'https://global.discourse-cdn.com/sailpoint/original/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7.jpeg',
-          },
-          {
-            max_width: 1024,
-            max_height: 1024,
-            width: 1024,
-            height: 576,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_1024x576.jpeg',
-          },
-          {
-            max_width: 800,
-            max_height: 800,
-            width: 800,
-            height: 450,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_800x450.jpeg',
-          },
-          {
-            max_width: 400,
-            max_height: 400,
-            width: 400,
-            height: 225,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_400x225.jpeg',
-          },
-          {
-            max_width: 200,
-            max_height: 200,
-            width: 200,
-            height: 112,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_200x112.jpeg',
-          },
-          {
-            max_width: 100,
-            max_height: 100,
-            width: 100,
-            height: 56,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_100x56.jpeg',
-          },
-          {
-            max_width: 50,
-            max_height: 50,
-            width: 50,
-            height: 28,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/1/1017066173406adae86f8e3e6028649b05ef3fe7_2_50x28.jpeg',
-          },
-        ],
-        tags: ['developer-days-2023'],
-        tags_descriptions: {},
-        views: 1,
-        like_count: 0,
-        has_summary: false,
-        last_poster_username: 'jordan_violet',
-        category_id: 118,
-        pinned_globally: false,
-        featured_link: null,
-        ratings: [],
-        show_ratings: false,
-        has_accepted_answer: false,
-        can_have_answer: false,
-        can_vote: false,
-        posters: [
-          {
-            extras: 'latest single',
-            description: 'Original Poster, Most Recent Poster',
-            user_id: 1,
-            primary_group_id: 41,
-            flair_group_id: 41,
-          },
-        ],
-      },
-      {
-        id: 29910,
-        title: 'Error at Line 0: Advanced Logging for your IIQ Code',
-        fancy_title: 'Error at Line 0: Advanced Logging for your IIQ Code',
-        slug: 'error-at-line-0-advanced-logging-for-your-iiq-code',
-        posts_count: 1,
-        reply_count: 0,
-        highest_post_number: 1,
-        image_url:
-          'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_1024x576.jpeg',
-        created_at: '2024-02-09T13:57:51.476Z',
-        last_posted_at: '2024-02-09T13:57:51.566Z',
-        bumped: true,
-        bumped_at: '2024-02-09T13:57:51.566Z',
-        archetype: 'regular',
-        unseen: false,
-        pinned: false,
-        unpinned: null,
-        excerpt:
-          'Presenters: @alexander_jakimowic \nPresentation: \nLoggingFramework_Pres_1_2.pptx (3,2 MB) \nHere you can find the code of the Framework (Java and RuleLibrary), The log4j2Admin.jsp page, and some admittedly rudimentary java…',
-        visible: true,
-        closed: false,
-        archived: false,
-        bookmarked: null,
-        liked: null,
-        thumbnails: [
-          {
-            max_width: null,
-            max_height: null,
-            width: 1280,
-            height: 720,
-            url: 'https://global.discourse-cdn.com/sailpoint/original/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa.jpeg',
-          },
-          {
-            max_width: 1024,
-            max_height: 1024,
-            width: 1024,
-            height: 576,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_1024x576.jpeg',
-          },
-          {
-            max_width: 800,
-            max_height: 800,
-            width: 800,
-            height: 450,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_800x450.jpeg',
-          },
-          {
-            max_width: 400,
-            max_height: 400,
-            width: 400,
-            height: 225,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_400x225.jpeg',
-          },
-          {
-            max_width: 200,
-            max_height: 200,
-            width: 200,
-            height: 112,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_200x112.jpeg',
-          },
-          {
-            max_width: 100,
-            max_height: 100,
-            width: 100,
-            height: 56,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_100x56.jpeg',
-          },
-          {
-            max_width: 50,
-            max_height: 50,
-            width: 50,
-            height: 28,
-            url: 'https://global.discourse-cdn.com/sailpoint/optimized/2X/b/b507fc08280d4445f402177d17d5db54c0a6c5aa_2_50x28.jpeg',
-          },
-        ],
-        tags: ['developer-days-2023'],
-        tags_descriptions: {},
-        views: 1,
-        like_count: 0,
-        has_summary: false,
-        last_poster_username: 'jordan_violet',
-        category_id: 118,
-        pinned_globally: false,
-        featured_link: null,
-        ratings: [],
-        show_ratings: false,
-        has_accepted_answer: false,
-        can_have_answer: false,
-        can_vote: false,
-        posters: [
-          {
-            extras: 'latest single',
-            description: 'Original Poster, Most Recent Poster',
-            user_id: 1,
-            primary_group_id: 41,
-            flair_group_id: 41,
-          },
-        ],
-      },
-    ],
-  },
-};
-
-export default function MarketplaceSidebar({filterCallback, selectedCategory}) {
   const [tagProductData, setTagProductData] = React.useState();
   const [filterTags, setFilterTags] = React.useState(true);
 
   const getTagData = async () => {
-    // const data = await getVideoPosts(filterCallback.tags.join('+'));
     const uniqueTags = new Set();
-
+    const data = await getVideoPosts();
-    const data = await topicData;
+    //  const data = await topicData;
     const resultset = [];
     if (data.topic_list) {
       for (const topic of data.topic_list.topics) {
@@ -420,19 +24,15 @@ export default function MarketplaceSidebar({filterCallback, selectedCategory}) {
     setTagProductData(Array.from(uniqueTags));
   };
 
-  // function toggleSeeAll() {
-  //   filterTags ? setFilterTags(false) : setFilterTags(true);
-  // }
-
   function displayText(text) {
-    if (text === 'identitynow') {
+    if (text === 'identity-security-cloud') {
-      return 'IdentityNow';
+      return 'Identity Security Cloud';
     }
     if (text === 'access-intelligence-center') {
       return 'Access Intelligence Center';
     }
-    if (text === 'developer-days-2023') {
+    if (text === 'developer-days-2023-iiq') {
-      return 'Developer Days 2023';
+      return 'Developer Days 2023 iiq';
     }
   }
 
@@ -445,10 +45,10 @@ export default function MarketplaceSidebar({filterCallback, selectedCategory}) {
   if (tagProductData) {
     return (
       <div className={styles.sidebar}>
-        <div className={styles.tagHeader}>Video Search</div>
+        {/* <div className={styles.tagHeader}>Video Search</div>
         <div className={styles.tagContainer}>
-         <input type="text" id="search" placeholder="Search for Video" />
+          <input type="text" id="search" placeholder="Search for Video" />
-        </div>
+        </div> */}
         <div className={styles.tagHeader}>Video Tags</div>
         <div className={styles.tagContainer}>
           {tagProductData.map(function (a, index) {

src/pages/videos.js

@@ -4,11 +4,10 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import VideoCards from '../components/video-library/VideoCards';
 import VideoSidebar from '../components/video-library/VideoSidebar';
 import DiscourseEmbed from '../components/video-library/VideoComments';
-import styles from './exchange.module.css';
+import styles from './videos.module.css';
 
 export default function VideoLibrary() {
   const [filteredProduct, setFilteredProduct] = React.useState({
-    category: 'colab',
     tags: [],
   });
   const {siteConfig} = useDocusaurusContext();
@@ -24,34 +23,24 @@ export default function VideoLibrary() {
         tempFilter.push(data.tag);
       }
     }
-
+    console.log('tempFilter', tempFilter);
-    if (data.category) {
+    setFilteredProduct({tags: tempFilter});
-      setFilteredProduct({category: data.category, tags: tempFilter});
-    } else {
-      setFilteredProduct({
-        category: filteredProduct.category,
-        tags: tempFilter,
-      });
-    }
   };
 
   return (
     <Layout description="The SailPoint Developer Community has everything you need to build, extend, and automate scalable identity solutions.">
       <main>
-        <div className={styles.blogContainer}>
+        <div className={styles.videosContainer}>
-          <div className={styles.blogSidbarContainer}>
+          <div className={styles.videosSidbarContainer}>
             <VideoSidebar
-              selectedCategory={filteredProduct.category}
+              selectedCategory={filteredProduct}
               filterCallback={handleClick}
             />
           </div>
-          <div className={styles.blogCardContainer}>
+          <div className={styles.videosCardContainer}>
             <VideoCards filterCallback={filteredProduct} />
           </div>
         </div>
-        <div id="discourseContainer" className={styles.discourseContainer}>
-          <DiscourseEmbed discourseEmbedUrl={'test'}></DiscourseEmbed>
-        </div>
       </main>
     </Layout>
   );

src/pages/videos.module.css

@@ -0,0 +1,22 @@
+.videosContainer {
+  display: flex;
+}
+
+.videosSidbarContainer {
+  flex: 5%;
+}
+
+@media only screen and (max-width: 870px) {
+  .videosSidbarContainer {
+    display: none;
+  }
+}
+
+.videosCardContainer {
+  flex: 95%;
+}
+
+.discourseContainer {
+  border-radius: 0.5em;
+  height: 100%;
+}

static/videos/videos.json

@@ -4,27 +4,31 @@
     "title": "Out of the Box Charts and Dashboards",
     "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
     "tags": ["identitynow", "access-intelligence-center", "testing", "test"],
-    "path": "/videos/Jd8waVWCZm3bZcNjJhRF2n"
+    "path": "/videos/Jd8waVWCZm3bZcNjJhRF2n",
+    "id": "29911"
   },
   {
     "uuid": "frpStJBTV8xeQaE95wmbHp",
     "title": "Filtering and Responsive UI",
     "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
     "tags": ["identitynow", "access-intelligence-center"],
-    "path": "/videos/frpStJBTV8xeQaE95wmbHp"
+    "path": "/videos/frpStJBTV8xeQaE95wmbHp",
+    "id": "29911"
   },
   {
     "uuid": "1j49GXFzu8Tr5ZmyLEUxam",
     "title": "Authoring and Creating new Sheets",
     "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
     "tags": ["identitynow", "access-intelligence-center"],
-    "path": "/videos/1j49GXFzu8Tr5ZmyLEUxam"
+    "path": "/videos/1j49GXFzu8Tr5ZmyLEUxam",
+    "id": "29911"
   },
   {
     "uuid": "Sk9EaFTUcwKXRQ4efvsyKF",
     "title": "Bookmarking Capabilities",
     "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
     "tags": ["identitynow", "access-intelligence-center"],
-    "path": "/videos/Sk9EaFTUcwKXRQ4efvsyKF"
+    "path": "/videos/Sk9EaFTUcwKXRQ4efvsyKF",
+    "id": "29911"
   }
 ]