From 6a587e080e01adb6ee0595d467b80eaee358c003 Mon Sep 17 00:00:00 2001 From: philip-ellis-sp Date: Tue, 6 Jun 2023 16:27:02 -0500 Subject: [PATCH] added support for images inline --- .../marketplace/MarketplaceCard/index.js | 3 +- .../MarketplaceCardDetail/index.js | 143 +++++++++++------- .../MarketplaceCardDetail/styles.module.css | 29 +++- .../marketplace/MarketplaceCards/index.js | 127 +++++++++------- static/icons/discourse.svg | 1 + static/icons/github.svg | 1 + 6 files changed, 194 insertions(+), 110 deletions(-) create mode 100644 static/icons/discourse.svg create mode 100644 static/icons/github.svg diff --git a/src/components/marketplace/MarketplaceCard/index.js b/src/components/marketplace/MarketplaceCard/index.js index c7e39d9aa..77ecf9f06 100644 --- a/src/components/marketplace/MarketplaceCard/index.js +++ b/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 (
setFilters(e)}>
diff --git a/src/components/marketplace/MarketplaceCardDetail/index.js b/src/components/marketplace/MarketplaceCardDetail/index.js index 4ff248049..7a762ff26 100644 --- a/src/components/marketplace/MarketplaceCardDetail/index.js +++ b/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' -export default function MarketplaceCardDetail({ - details -}) { - - +import ReactMarkdown from 'react-markdown'; +import BounceLoader from 'react-spinners/BounceLoader'; +export default function MarketplaceCardDetail({details, rawPost}) { const getDivText = (data, id) => { - const requirementPosition = data.indexOf('id="' + id + '"') - const requirementEndPosition = data.indexOf('
', requirementPosition) - if (requirementPosition > 0 && requirementEndPosition > 0) { - return data.substring(requirementPosition + 6 + id.length, requirementEndPosition) - } else { - return "No requirements found for this marketplace item" - } - - } + const requirementPosition = data.indexOf('id="' + id + '"'); + const requirementEndPosition = data.indexOf('
', requirementPosition); + if (requirementPosition > 0 && requirementEndPosition > 0) { + const validContent = data.substring( + requirementPosition + 6 + id.length, + 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 ( +
+
+
{details.title}
+ +
- return ( -
-
-
{details.title}
- + + + Details + Requirements + Support + + + + + {getDivText(rawPost, 'details')} + + + + + + + {getDivText(rawPost, 'requirements')} + + + + + {getDivText(rawPost, 'support')} + + +
- - - - Details - Requirements - Support - - - - {getDivText(details.rawData, "details")} - - - - {getDivText(details.rawData, "requirements")} - - - {getDivText(details.rawData, "support")} - - - -
- ); + ); + } else { + return ( + + ); + } } diff --git a/src/components/marketplace/MarketplaceCardDetail/styles.module.css b/src/components/marketplace/MarketplaceCardDetail/styles.module.css index e24e11f8b..97c7c21b5 100644 --- a/src/components/marketplace/MarketplaceCardDetail/styles.module.css +++ b/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; } \ No newline at end of file diff --git a/src/components/marketplace/MarketplaceCards/index.js b/src/components/marketplace/MarketplaceCards/index.js index 8d6fa7e6f..fc6e88dfc 100644 --- a/src/components/marketplace/MarketplaceCards/index.js +++ b/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 {getMarketplacePosts, getMarketplaceTopic, getMarketplaceTopicRaw} from '../../../services/DiscourseService'; +import { + getMarketplacePosts, + getMarketplaceTopic, + getMarketplaceTopicRaw, +} from '../../../services/DiscourseService'; import MarketplaceCardDetail from '../MarketplaceCardDetail'; -export default function BlogCards({ - filterCallback - }) { +export default function MarketplaceCards({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 (
- {cardData.map(function(a, index){ - return + {cardData.map(function (a, index) { + return ( + + ); })}
-
- -
- { - setDetailsOpen(false); - }} - > - - - - + isOpen={detailsOpen} + className={styles.modal} + contentLabel="Details"> +
+
+ +
+ { + setDetailsOpen(false); + }}> +
+
); } else if (loadingCards) { - return + return ( + + ); } else { - return
No Marketplace Item Found with the Given Search Criteria
; + return ( +
+ {' '} + No Marketplace Item Found with the Given Search Criteria +
+ ); } } 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("…", "") + return excerpt.replace('…', ''); } } else { - return "" + return ''; } - } - diff --git a/static/icons/discourse.svg b/static/icons/discourse.svg new file mode 100644 index 000000000..77a6b1de3 --- /dev/null +++ b/static/icons/discourse.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/icons/github.svg b/static/icons/github.svg new file mode 100644 index 000000000..40e8178e4 --- /dev/null +++ b/static/icons/github.svg @@ -0,0 +1 @@ + \ No newline at end of file