added support for images inline

src/components/marketplace/MarketplaceCard/index.js

@@ -11,9 +11,8 @@ export default function MarketplaceCard({
 }) {
 
   function setFilters(e) {
-    openDialogFunc({"rawData": post.raw, "title": post.title, "image": post.image, "link": post.link});
+    openDialogFunc({"title": post.title, "image": post.image, "link": post.link, "id": post.id});
   }
-
   return (
     <div onClick={(e) => setFilters(e)}>
       <div className={styles.card} >

src/components/marketplace/MarketplaceCardDetail/index.js

@@ -4,62 +4,103 @@ import Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import ThemedImage from '@theme/ThemedImage';
 import {addDarkToFileName} from '../../../util/util';
-import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
+import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 import 'react-tabs/style/react-tabs.css';
-import ReactMarkdown from 'react-markdown'
+import ReactMarkdown from 'react-markdown';
-export default function MarketplaceCardDetail({
+import BounceLoader from 'react-spinners/BounceLoader';
-  details
+export default function MarketplaceCardDetail({details, rawPost}) {
-}) {
-
-
   const getDivText = (data, id) => {
-      const requirementPosition = data.indexOf('id="' + id + '"')
+    const requirementPosition = data.indexOf('id="' + id + '"');
-      const requirementEndPosition = data.indexOf('</div>', requirementPosition)
+    const requirementEndPosition = data.indexOf('</div>', requirementPosition);
-      if (requirementPosition > 0 && requirementEndPosition > 0) {
+    if (requirementPosition > 0 && requirementEndPosition > 0) {
-        return data.substring(requirementPosition + 6 + id.length, requirementEndPosition)
+      const validContent = data.substring(
-      } else {
+        requirementPosition + 6 + id.length,
-        return "No requirements found for this marketplace item"
+        requirementEndPosition,
-      }
+      );
-      
+      const incorrectURLPattern = /upload:\/\/([^"]+)/g;
-  }
+      const correctURLPattern =
+        'https://developer.identitysoon.com/discuss/uploads/short-url/$1';
+      return validContent.replace(incorrectURLPattern, correctURLPattern);
+    } else {
+      return 'No requirements found for this marketplace item';
+    }
+    // https://developer.identitysoon.com/discuss/uploads/short-url/f9rlt0eoj7RnpndvL0CHjcEesV0.png?dl=1\
+    // upload://f9rlt0eoj7RnpndvL0CHjcEesV0.png
+  };
 
   const goToLink = (link) => {
-    window.open(link, '_blank')
+    window.open(link, '_blank');
-  }
+  };
 
+  if (details) {
+    return (
+      <div className={styles.detailContainer}>
+        <div className={styles.detailHeader}>
+          <div className={styles.detailTitle}>{details.title}</div>
+          <img
+            className={styles.detailImage}
+            src={useBaseUrl(details.image)}></img>
+        </div>
 
-  return (
+        <Tabs className={styles.detailTabs}>
-    <div className={styles.detailContainer}>
+          <TabList>
-      <div className={styles.detailHeader}>
+            <Tab>Details</Tab>
-        <div className={styles.detailTitle}>{details.title}</div>
+            <Tab>Requirements</Tab>
-        <img className={styles.detailImage} src={useBaseUrl(details.image)}></img>
+            <Tab>Support</Tab>
+          </TabList>
+
+          <TabPanel>
+            <ReactMarkdown className={styles.detailTabContent}>
+              {getDivText(rawPost, 'details')}
+            </ReactMarkdown>
+            <button
+              className={styles.modalButton}
+              onClick={async () => {
+                goToLink(details.link);
+              }}>
+              <div className={styles.modalButtonText}>
+                <img
+                  className={styles.buttonImage}
+                  src={useBaseUrl('/icons/discourse.svg')}></img>
+                  See More
+              </div>
+            </button>
+            <button
+              className={styles.modalButton}
+              onClick={async () => {
+                goToLink(details.link);
+              }}>
+              <div className={styles.modalButtonText}>
+                <img
+                  className={styles.buttonImage}
+                  src={useBaseUrl('/icons/github.svg')}></img>
+                  GitHub
+              </div>
+            </button>
+          </TabPanel>
+          <TabPanel>
+            <ReactMarkdown className={styles.detailTabContent}>
+              {getDivText(rawPost, 'requirements')}
+            </ReactMarkdown>
+          </TabPanel>
+          <TabPanel>
+            <ReactMarkdown className={styles.detailTabContent}>
+              {getDivText(rawPost, 'support')}
+            </ReactMarkdown>
+          </TabPanel>
+        </Tabs>
       </div>
-      
+    );
-      <Tabs className={styles.detailTabs}>
+  } else {
-        <TabList>
+    return (
-          <Tab>Details</Tab>
+      <BounceLoader
-          <Tab>Requirements</Tab>
+        className={styles.spinnerCenter}
-          <Tab>Support</Tab>
+        color={'#0033a1'}
-        </TabList>
+        loading={true}
-
+        size={150}
-        <TabPanel>
+        aria-label="Loading Spinner"
-          <ReactMarkdown className={styles.detailTabContent}>{getDivText(details.rawData, "details")}</ReactMarkdown>
+        data-testid="loader"
-          <button
+      />
-            className={styles.modalButton}
+    );
-            onClick={async () => {
+  }
-              goToLink(details.link);
-            }}>
-            See More
-          </button>
-        </TabPanel>
-        <TabPanel>
-        <ReactMarkdown className={styles.detailTabContent}>{getDivText(details.rawData, "requirements")}</ReactMarkdown>
-        </TabPanel>
-        <TabPanel>
-        <ReactMarkdown className={styles.detailTabContent}>{getDivText(details.rawData, "support")}</ReactMarkdown>
-        </TabPanel>
-      </Tabs>
-
-    </div>
-  );
 }

src/components/marketplace/MarketplaceCardDetail/styles.module.css

@@ -30,7 +30,10 @@
 }
 
 
-
+.modalButtonText {
+  position: relative;
+  top: -2px;
+}
 
 .modalButton {
   border: 1px solid var(--ifm-color-primary);
@@ -40,7 +43,7 @@
   margin: 10px;
   padding: 10px;
   text-align: center;
-  width: 100px;
+  width: 125px;
   background-color: #ffffff31;
 }
 
@@ -50,4 +53,26 @@
   box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4);
   background-color: #dae1e9;
   color: #005fc4;
+}
+
+.spinnerCenter {
+  margin: 30vh 20vh;
+}
+
+@media only screen and (max-width: 768px) {
+  .detailImage {
+    display: none;
+  }
+}
+
+.buttonImage {
+  position: relative;
+  left: -7px;
+  top: 4px;
+  fill: #96a9bb;
+  /* computed from codepen https://codepen.io/sosuke/pen/Pjoqqp */
+  filter: invert(79%) sepia(12%) saturate(484%) hue-rotate(168deg) brightness(84%) contrast(84%);
+  margin-left: 5px;
+  height: 18px;
+  width: 18px;
 }

src/components/marketplace/MarketplaceCards/index.js

@@ -3,37 +3,48 @@ import styles from './styles.module.css';
 import MarketplaceCard from '../MarketplaceCard';
 import Modal from 'react-modal';
 import useBaseUrl from '@docusaurus/useBaseUrl';
-import BounceLoader from "react-spinners/BounceLoader";
+import BounceLoader from 'react-spinners/BounceLoader';
 
-
+import {
-import {getMarketplacePosts, getMarketplaceTopic, getMarketplaceTopicRaw} from '../../../services/DiscourseService';
+  getMarketplacePosts,
+  getMarketplaceTopic,
+  getMarketplaceTopicRaw,
+} from '../../../services/DiscourseService';
 import MarketplaceCardDetail from '../MarketplaceCardDetail';
-export default function BlogCards({
+export default function MarketplaceCards({filterCallback}) {
-  filterCallback
-  }) {
   const [cardData, setCardData] = React.useState();
   const [detailsOpen, setDetailsOpen] = React.useState(false);
-  const [details, setDetails] = React.useState("");
+  const [details, setDetails] = React.useState('');
   const [loadingCards, setLoadingCards] = React.useState(true);
 
   const getPosts = async () => {
     const data = await getMarketplacePosts(filterCallback.join(','));
-    const resultset = []
+    const resultset = [];
     if (data.topics) {
       for (const topic of data.topics) {
-        resultset.push(await getPostList(topic))
+        resultset.push(await getPostList(topic));
       }
       setCardData(resultset);
     } else {
       setCardData(undefined);
     }
-    setLoadingCards(false)
+    setLoadingCards(false);
   };
 
+  const getDetails = async (data) => {
+    const raw = await getMarketplaceTopicRaw(data.id);
+    setDetails({data: data, raw: raw});
+  };
+
+  // callback that gets called when clicking on a card
   const openDialog = (data) => {
-    setDetails(data);
+    setDetails({data: undefined, raw: undefined});
+    getDetails(data);
     setDetailsOpen(true);
-  }
+  };
+
+  React.useEffect(() => {}, [detailsOpen, details]);
+
   Modal.setAppElement('#__docusaurus');
   React.useEffect(() => {
     getPosts();
@@ -41,59 +52,67 @@ export default function BlogCards({
     setLoadingCards(true);
   }, [filterCallback]);
 
+
+  const xImage = useBaseUrl('/icons/circle-xmark-regular.svg')
+
   if (cardData) {
     return (
       <div className={styles.center}>
         <div className={styles.gridContainer}>
-          {cardData.map(function(a, index){
+          {cardData.map(function (a, index) {
-            return <MarketplaceCard 
+            return (
-            post={a}
+              <MarketplaceCard
-            id={index + a.link}
+                post={a}
-            openDialogFunc={openDialog}
+                key={index + a.link}
-            ></MarketplaceCard>
+                openDialogFunc={openDialog}></MarketplaceCard>
+            );
           })}
         </div>
         <Modal
-        isOpen={detailsOpen}
+          isOpen={detailsOpen}
-        className={styles.modal}
+          className={styles.modal}
-        contentLabel="Details">
+          contentLabel="Details">
-        <div>
+          <div>
-          <MarketplaceCardDetail details={details}></MarketplaceCardDetail>
+            <div>
-        </div>
+              <MarketplaceCardDetail
-        <img className={styles.cardExit} src={useBaseUrl('/icons/circle-xmark-regular.svg')} 
+                details={details.data}
-        onClick={async () => {
+                rawPost={details.raw}></MarketplaceCardDetail>
-          setDetailsOpen(false);
+            </div>
-        }}
+            <img
-        ></img>
+              className={styles.cardExit}
-
+              src={xImage}
-      </Modal>
+              onClick={async () => {
-
+                setDetailsOpen(false);
-
+              }}></img>
+          </div>
+        </Modal>
       </div>
     );
   } else if (loadingCards) {
-    return   <BounceLoader
+    return (
-              className={styles.spinnerCenter}
+      <BounceLoader
-              color={"#0033a1"}
+        className={styles.spinnerCenter}
-              loading={true}
+        color={'#0033a1'}
-              size={150}
+        loading={true}
-              aria-label="Loading Spinner"
+        size={150}
-              data-testid="loader"
+        aria-label="Loading Spinner"
-            />
+        data-testid="loader"
+      />
+    );
   } else {
-    return <div className={styles.noFound}> No Marketplace Item Found with the Given Search Criteria</div>;
+    return (
+      <div className={styles.noFound}>
+        {' '}
+        No Marketplace Item Found with the Given Search Criteria
+      </div>
+    );
   }
 }
 
 async function getPostList(topic) {
-  console.log(topic)
   const fullTopic = await getMarketplaceTopic(topic.id);
-  const fullTopicRaw = await getMarketplaceTopicRaw(topic.id);
-  console.log(fullTopic)
-  console.log(fullTopicRaw)
   return {
     id: topic.id,
-    raw: fullTopicRaw,
     name: fullTopic.details.created_by.name,
     excerpt: styleExcerpt(topic.excerpt),
     creatorImage: getavatarURL(fullTopic.details.created_by.avatar_template),
@@ -109,26 +128,24 @@ async function getPostList(topic) {
     liked: topic.like_count,
     replies: fullTopic.posts_count,
     solution: topic.has_accepted_answer,
-    readTime: parseInt(fullTopic.word_count/100),
+    readTime: parseInt(fullTopic.word_count / 100),
   };
 }
 
 function getavatarURL(avatar) {
-  return "https://developer.sailpoint.com" + avatar.replace("{size}", "120")
+  return 'https://developer.sailpoint.com' + avatar.replace('{size}', '120');
 }
 
 function styleExcerpt(excerpt) {
   if (excerpt) {
     // remove any strings that have colons between them
-    excerpt = excerpt.replace(/:[^:]*:/g,"")
+    excerpt = excerpt.replace(/:[^:]*:/g, '');
     if (excerpt.length > 150) {
-      return excerpt.slice(0, 150) + "..."
+      return excerpt.slice(0, 150) + '...';
     } else {
-      return excerpt.replace("&hellip;", "")
+      return excerpt.replace('&hellip;', '');
     }
   } else {
-    return ""
+    return '';
   }
-
 }
-

static/icons/discourse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 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="M225.9 32C103.3 32 0 130.5 0 252.1 0 256 .1 480 .1 480l225.8-.2c122.7 0 222.1-102.3 222.1-223.9C448 134.3 348.6 32 225.9 32zM224 384c-19.4 0-37.9-4.3-54.4-12.1L88.5 392l22.9-75c-9.8-18.1-15.4-38.9-15.4-61 0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128z"/></svg>

static/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 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="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>