diff --git a/navbar.js b/navbar.js
index b26f4f92d..56ac30c27 100644
--- a/navbar.js
+++ b/navbar.js
@@ -70,7 +70,7 @@ module.exports = {
{
position: 'left',
label: 'Blog',
- to: 'https://medium.com/sailpointengineering',
+ to: '/blog',
},
{
position: 'left',
diff --git a/package-lock.json b/package-lock.json
index 1ab33f327..481d9c765 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,10 @@
"docusaurus-theme-openapi-docs": "^1.5.1",
"prism-react-renderer": "^1.3.1",
"react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react-dom": "^17.0.2",
+ "react-markdown": "^8.0.7",
+ "react-spinners": "^0.13.8",
+ "react-tabs": "^4.3.0"
},
"devDependencies": {
"@docusaurus/core": "2.2.0",
@@ -11024,8 +11027,9 @@
"license": "MIT"
},
"node_modules/react-markdown": {
- "version": "8.0.5",
- "license": "MIT",
+ "version": "8.0.7",
+ "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz",
+ "integrity": "sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==",
"dependencies": {
"@types/hast": "^2.0.0",
"@types/prop-types": "^15.0.0",
@@ -11302,6 +11306,27 @@
"react": ">=15"
}
},
+ "node_modules/react-spinners": {
+ "version": "0.13.8",
+ "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+ "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+ "peerDependencies": {
+ "react": "^16.0.0 || ^17.0.0 || ^18.0.0",
+ "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0"
+ }
+ },
+ "node_modules/react-tabs": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz",
+ "integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==",
+ "dependencies": {
+ "clsx": "^1.1.0",
+ "prop-types": "^15.5.0"
+ },
+ "peerDependencies": {
+ "react": "^16.8.0 || ^17.0.0-0 || ^18.0.0"
+ }
+ },
"node_modules/react-textarea-autosize": {
"version": "8.4.0",
"dev": true,
@@ -21693,7 +21718,9 @@
"version": "1.0.1"
},
"react-markdown": {
- "version": "8.0.5",
+ "version": "8.0.7",
+ "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-8.0.7.tgz",
+ "integrity": "sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==",
"requires": {
"@types/hast": "^2.0.0",
"@types/prop-types": "^15.0.0",
@@ -21858,6 +21885,21 @@
"tiny-warning": "^1.0.0"
}
},
+ "react-spinners": {
+ "version": "0.13.8",
+ "resolved": "https://registry.npmjs.org/react-spinners/-/react-spinners-0.13.8.tgz",
+ "integrity": "sha512-3e+k56lUkPj0vb5NDXPVFAOkPC//XyhKPJjvcGjyMNPWsBKpplfeyialP74G7H7+It7KzhtET+MvGqbKgAqpZA==",
+ "requires": {}
+ },
+ "react-tabs": {
+ "version": "4.3.0",
+ "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-4.3.0.tgz",
+ "integrity": "sha512-2GfoG+f41kiBIIyd3gF+/GRCCYtamC8/2zlAcD8cqQmqI9Q+YVz7fJLHMmU9pXDVYYHpJeCgUSBJju85vu5q8Q==",
+ "requires": {
+ "clsx": "^1.1.0",
+ "prop-types": "^15.5.0"
+ }
+ },
"react-textarea-autosize": {
"version": "8.4.0",
"dev": true,
diff --git a/package.json b/package.json
index ee1c3aeaa..2976b33c0 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,10 @@
"docusaurus-theme-openapi-docs": "^1.5.1",
"prism-react-renderer": "^1.3.1",
"react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react-dom": "^17.0.2",
+ "react-markdown": "^8.0.7",
+ "react-spinners": "^0.13.8",
+ "react-tabs": "^4.3.0"
},
"overrides": {
"mermaid": "9.1.7"
diff --git a/src/components/blog/BlogBanner/index.js b/src/components/blog/BlogBanner/index.js
new file mode 100644
index 000000000..5f9e5878f
--- /dev/null
+++ b/src/components/blog/BlogBanner/index.js
@@ -0,0 +1,21 @@
+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 BlogBanner() {
+ return (
+
+
+
+
+ SailPoint Developer Blog
+
+
+
+
+
+
+
+
+
})
+
{views}
+
})
+
{replies}
+
})
+
{readTime} minute read
+
+
+
+
})
+
{name}
+
+
+
+
+
})
+
{title}
+
+ {tags?.map((tag, index) => {
+ if (index > 2) {
+ return '';
+ }
+ return
{tag}
;
+ })}
+
+
{excerpt}
+
+
+
+
+
+
+
+ {cardData.map(function(a, index){
+ return
+ })}
+
+
+ {' '}
+ No Blogposts Found with the Given Search Criteria
+
+ );
+ }
+}
+
+async function getPostList(topic) {
+ const fullTopic = await getTopic(topic.id);
+ return {
+ name: fullTopic.details.created_by.name,
+ excerpt: styleExcerpt(topic.excerpt),
+ creatorImage: getavatarURL(fullTopic.details.created_by.avatar_template),
+ tags: topic.tags,
+ image: fullTopic.image_url,
+ link:
+ 'https://developer.sailpoint.com/discuss/t/' +
+ topic.slug +
+ '/' +
+ topic.id,
+ title: topic.title,
+ views: fullTopic.views,
+ liked: topic.like_count,
+ replies: fullTopic.posts_count,
+ solution: topic.has_accepted_answer,
+ readTime: parseInt(fullTopic.word_count/100),
+ };
+}
+
+function getavatarURL(avatar) {
+ return "https://developer.sailpoint.com" + avatar.replace("{size}", "120")
+}
+
+function styleExcerpt(excerpt) {
+ if (excerpt.length > 150) {
+ return excerpt.slice(0, 150) + "..."
+ } else {
+ return excerpt.replace("…", "")
+ }
+}
+
diff --git a/src/components/blog/BlogCards/styles.module.css b/src/components/blog/BlogCards/styles.module.css
new file mode 100644
index 000000000..6dea5ccfc
--- /dev/null
+++ b/src/components/blog/BlogCards/styles.module.css
@@ -0,0 +1,35 @@
+/* Getting Started Card container */
+.gridContainer {
+ display: grid;
+ place-content: center;
+ grid-template-columns: repeat(auto-fit, minmax(345px, 1fr));
+ grid-gap: 40px;
+ margin-left: 40px;
+ margin-right: 40px;
+}
+
+.center {
+ margin: 0px auto;
+ max-width: 1300px;
+ margin-bottom: 50px;
+}
+
+.space {
+ height: 200px;
+}
+
+.noFound {
+ font-size: 28px;
+ font-weight: 500;
+ color: var(--dev-secondary-text);
+ padding: 8px;
+ margin: 50px;
+}
+
+
+
+.spinnerCenter {
+ margin: 100px auto;
+ max-width: 1300px;
+ margin-bottom: 50px;
+}
\ No newline at end of file
diff --git a/src/components/blog/BlogSidebar/BlogSidebarButton/index.js b/src/components/blog/BlogSidebar/BlogSidebarButton/index.js
new file mode 100644
index 000000000..48b9e676a
--- /dev/null
+++ b/src/components/blog/BlogSidebar/BlogSidebarButton/index.js
@@ -0,0 +1,17 @@
+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) {
+ filterCallback(f)
+ setIsActive(current => !current);
+ }
+ return setFilters(e, text)} className={activeClass + ' ' + styles.tag}>{text}
+
+}
diff --git a/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css b/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css
new file mode 100644
index 000000000..7be4bbadc
--- /dev/null
+++ b/src/components/blog/BlogSidebar/BlogSidebarButton/styles.module.css
@@ -0,0 +1,36 @@
+
+.tag {
+ font-size: 16px;
+ font-weight: 500;
+ color: var(--dev-secondary-text);
+ padding: 8px;
+ margin-right: 5px;
+ margin-top: 5px;
+ margin-bottom: 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-right: 5px;
+ margin-bottom: 5px;
+ margin-top: 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);
+}
+
diff --git a/src/components/blog/BlogSidebar/index.js b/src/components/blog/BlogSidebar/index.js
new file mode 100644
index 000000000..e25b75e96
--- /dev/null
+++ b/src/components/blog/BlogSidebar/index.js
@@ -0,0 +1,72 @@
+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 { getTags } from '../../../services/DiscourseService';
+import BlogSidebarButton from './BlogSidebarButton';
+
+export default function BlogSidebar({
+ filterCallback
+ }) {
+ const [tagProductData, setTagProductData] = React.useState();
+ const [tagTechnologyData, setTagTechnologyData] = React.useState();
+ const [filterTags, setFilterTags] = React.useState(true);
+
+ const getTagData = async () => {
+ const data = await getTags();
+ 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)
+ };
+
+ function toggleSeeAll() {
+ filterTags ? setFilterTags(false) : setFilterTags(true)
+ }
+
+
+ React.useEffect(() => {
+ getTagData();
+ }, []);
+
+ const filterText = filterTags ? 'See All Tags' : 'See Less Tags'
+
+ if (tagProductData && tagTechnologyData) {
+ return (
+
+
Posts by Product
+
+ {tagProductData.map(function(a, index){
+ return
+ })}
+
+
Posts by Identity Governance
+
+ {tagTechnologyData.map(function(a, index){
+ return
10 && filterTags ? styles.hidden : ''} >
+ })}
+
+
toggleSeeAll()}>
+ {filterText}
+ {/*
})
*/}
+
+
{tag}
;
+ return {tag}
;
})}
diff --git a/src/components/marketplace/MarketplaceBanner/index.js b/src/components/marketplace/MarketplaceBanner/index.js
new file mode 100644
index 000000000..8c9e2cacd
--- /dev/null
+++ b/src/components/marketplace/MarketplaceBanner/index.js
@@ -0,0 +1,21 @@
+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 MarketplaceBanner() {
+ return (
+
+
+
+
+ SailPoint Developer Marketplace
+
+
+
+
+
+
})
+ );
+ }
+
+
+ return (
+ setFilters(e)}>
+
+
+
+
+
{post.views}
+
+
{post.replies}
+
+
+
+
})
+
{post.name}
+
+
+
+ {badge}
+
+
+
})
+
{post.title}
+
+ {post.tags?.map((tag, index) => {
+ if (index > 2) {
+ return '';
+ }
+ return
{tag}
;
+ })}
+
+
{post.excerpt}
+
+
+
+
+
+
+
+
+
{details.title}
+
})
+
+
+
+
+ Details
+ Requirements
+ Support
+
+
+
+
+ {getDivText(rawPost, 'details')}
+
+
+
+
+
+
+ {getDivText(rawPost, 'requirements')}
+
+
+
+
+ {getDivText(rawPost, 'support')}
+
+
+
+
+
+ {cardData.map(function (a, index) {
+ return (
+
+ );
+ })}
+
+
+
+
+
+
+
{
+ setDetailsOpen(false);
+ }}>
+
+
+ {' '}
+ No Marketplace Item Found with the Given Search Criteria
+
+ );
+ }
+}
+
+async function getPostList(topic) {
+ const fullTopic = await getMarketplaceTopic(topic.id);
+ return {
+ id: topic.id,
+ name: fullTopic.details.created_by.name,
+ excerpt: styleExcerpt(topic.excerpt),
+ creatorImage: getavatarURL(fullTopic.details.created_by.avatar_template),
+ tags: topic.tags,
+ image: fullTopic.image_url,
+ link:
+ 'https://developer.sailpoint.com/discuss/t/' +
+ topic.slug +
+ '/' +
+ topic.id,
+ title: topic.title,
+ views: fullTopic.views,
+ liked: topic.like_count,
+ replies: fullTopic.posts_count,
+ solution: topic.has_accepted_answer,
+ readTime: parseInt(fullTopic.word_count / 100),
+ };
+}
+
+function getavatarURL(avatar) {
+ 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, '');
+ if (excerpt.length > 150) {
+ return excerpt.slice(0, 100) + '...';
+ } else {
+ return excerpt.replace('…', '');
+ }
+ } else {
+ return '';
+ }
+}
diff --git a/src/components/marketplace/MarketplaceCards/styles.module.css b/src/components/marketplace/MarketplaceCards/styles.module.css
new file mode 100644
index 000000000..549642a08
--- /dev/null
+++ b/src/components/marketplace/MarketplaceCards/styles.module.css
@@ -0,0 +1,78 @@
+/* Getting Started Card container */
+.gridContainer {
+ display: grid;
+ place-content: center;
+ grid-template-columns: repeat(auto-fit, minmax(345px, 1fr));
+ grid-gap: 40px;
+ margin-left: 40px;
+ margin-right: 40px;
+}
+
+.center {
+ margin: 0px auto;
+ max-width: 1300px;
+ margin-bottom: 50px;
+}
+
+.space {
+ height: 200px;
+}
+
+.noFound {
+ font-size: 28px;
+ font-weight: 500;
+ color: var(--dev-secondary-text);
+ padding: 8px;
+ margin: 50px;
+}
+
+
+
+
+.modal {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ right: auto;
+ bottom: auto;
+ margin-right: -50%;
+ transform: translate(-50%, -50%);
+ box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.25);
+ border-radius: 20px;
+ background-color: var(--dev-card-background);
+ max-height: 100%;
+ max-width: 90%;
+ min-height: 80%;
+ scroll-behavior: auto;
+ overflow-y: auto;
+}
+
+
+
+
+.cardExit {
+ position: absolute;
+ top: 6px;
+ right: 6px;
+ 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: 24px;
+ width: 24px;
+ transition: all 0.2s;
+}
+
+.cardExit:hover {
+ top: 8px;
+ cursor: pointer;
+ height: 23px;
+ width: 23px;
+}
+
+
+.spinnerCenter {
+ margin: 100px auto;
+ max-width: 1300px;
+ margin-bottom: 50px;
+}
\ No newline at end of file
diff --git a/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/index.js b/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/index.js
new file mode 100644
index 000000000..d6c84eb81
--- /dev/null
+++ b/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+
+export default function MarketplaceSidebarButton({
+ filterCallback,
+ text
+ }) {
+ const [isActive, setIsActive] = React.useState(false);
+ const activeClass = isActive ? styles.tagSelected : ''
+ function setFilters(e, f) {
+ filterCallback(f)
+ setIsActive(current => !current);
+ }
+ return setFilters(e, text)} className={activeClass + ' ' + styles.tag}>{text}
+
+}
diff --git a/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/styles.module.css b/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/styles.module.css
new file mode 100644
index 000000000..7be4bbadc
--- /dev/null
+++ b/src/components/marketplace/MarketplaceSidebar/MarketplaceSidebarButton/styles.module.css
@@ -0,0 +1,36 @@
+
+.tag {
+ font-size: 16px;
+ font-weight: 500;
+ color: var(--dev-secondary-text);
+ padding: 8px;
+ margin-right: 5px;
+ margin-top: 5px;
+ margin-bottom: 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-right: 5px;
+ margin-bottom: 5px;
+ margin-top: 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);
+}
+
diff --git a/src/components/marketplace/MarketplaceSidebar/index.js b/src/components/marketplace/MarketplaceSidebar/index.js
new file mode 100644
index 000000000..f62bdaf67
--- /dev/null
+++ b/src/components/marketplace/MarketplaceSidebar/index.js
@@ -0,0 +1,72 @@
+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 { getTags } from '../../../services/DiscourseService';
+import MarketplaceSidebarButton from './MarketplaceSidebarButton';
+
+export default function MarketplaceSidebar({
+ filterCallback
+ }) {
+ const [tagProductData, setTagProductData] = React.useState();
+ const [tagTechnologyData, setTagTechnologyData] = React.useState();
+ const [filterTags, setFilterTags] = React.useState(true);
+
+ const getTagData = async () => {
+ const data = await getTags();
+ 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)
+ };
+
+ function toggleSeeAll() {
+ filterTags ? setFilterTags(false) : setFilterTags(true)
+ }
+
+
+ React.useEffect(() => {
+ getTagData();
+ }, []);
+
+ const filterText = filterTags ? 'See All Tags' : 'See Less Tags'
+
+ if (tagProductData && tagTechnologyData) {
+ return (
+
+
Items by Product
+
+ {tagProductData.map(function(a, index){
+ return
+ })}
+
+
Items by Identity Governance
+
+ {tagTechnologyData.map(function(a, index){
+ return
10 && filterTags ? styles.hidden : ''} >
+ })}
+
+
toggleSeeAll()}>
+ {filterText}
+ {/*
*/}
+
+