added initial blog page

src/components/blog/BlogBanner/index.js

@@ -0,0 +1,25 @@
+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 (
+    <div>
+
+      <div className={styles.imageContainer}>
+        <div className={styles.blogHeaderText}>
+          SailPoint Developer Blog
+        </div>
+        {/* <img
+          className={styles.background}
+          src={useBaseUrl('/blog/blog_banner_template.png')}>
+        </img> */}
+      </div >
+
+
+
+    </div>
+  );
+}

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

@@ -0,0 +1,24 @@
+
+.blogHeaderText {
+  position: relative;
+  color: var(--ifm-color-primary);
+  font-size: 30px;
+  max-width: 396px;
+  font-weight: bold;
+  line-height: 100%;
+  top: 20px;
+  left: 20px;
+}
+
+.background {
+  width: 100%;
+  object-fit: repeat;
+  height: 100%;
+}
+
+.imageContainer {
+  width: 100%;
+  height: 180px;
+  background-image: url('../../../../static/blog/blog_banner_template.png');
+  background-repeat: repeat;
+}

src/components/blog/BlogCard/index.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import styles from './styles.module.css';
+import Link from '@docusaurus/Link';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import ThemedImage from '@theme/ThemedImage';
+import {addDarkToFileName} from '../../../util/util';
+export default function BlogCard({
+  link,
+  title,
+  tags,
+  image,
+  excerpt,
+  name
+}) {
+
+  return (
+    <Link to={link}>
+      <div className={styles.card}>
+
+        <img className={styles.cardFace} src={useBaseUrl(image)}></img>
+        <div className={styles.cardText}>
+          <div className={styles.cardTitle}>{title}</div>
+          <div className={styles.cardBody}>{excerpt}</div>
+        </div>
+        <div className={styles.cardName}>{name}</div>
+
+
+        <div className={styles.tags}>
+          {tags?.map((tag, index) => {
+            if (index > 2) {
+              return '';
+            }
+            return <div className={styles.tag}>{tag}</div>;
+          })}
+        </div>
+      </div>
+    </Link>
+  );
+}

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

@@ -0,0 +1,74 @@
+/* Getting Started Card */
+.card {
+  position: relative;
+  margin-top: 20px;
+  height: 400px;
+  /* 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;
+}
+
+.card:hover {
+  cursor: pointer;
+  top: -2px;
+  box-shadow: var(--dev-card-selected);
+}
+
+.cardText {
+  position: absolute;
+  margin: 22px;
+  min-width: 170px;
+  top: 10px;
+  left: 0;
+}
+
+.cardName {
+  position: absolute;
+  margin: 22px;
+  min-width: 170px;
+  bottom: 0px;
+  left: 80px;
+}
+.cardTitle {
+  font-size: 22px;
+  font-weight: 700;
+}
+
+.cardBody {
+  font-size: 16px;
+  font-weight: 500;
+  top: 10px;
+  left: 0;
+}
+
+
+.tag {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--dev-secondary-text);
+}
+
+.tags {
+  position: absolute;
+  margin: 0px;
+  width: 230px;
+  top: 10px;
+  left: 20px;
+
+  display: grid;
+  grid-template-columns: max-content max-content max-content;
+  grid-gap: 10px;
+}
+
+.cardFace {
+  position: absolute;
+  border-radius: 9999px;
+  bottom: 10px;
+  left: 10px;
+  margin: auto;
+  height: 80px;
+  width: 80px;
+}

src/components/blog/BlogCards/index.js

@@ -0,0 +1,107 @@
+import React from 'react';
+import styles from './styles.module.css';
+import BlogCard from '../BlogCard';
+
+import {getBlogPosts} from '../../../services/DiscourseService';
+export default function BlogCards() {
+  const [ans, setAns] = React.useState();
+
+  const getPosts = async () => {
+    const data = await getBlogPosts();
+    console.log(data)
+    const resultset = [
+      getPostList(data, 0),
+      getPostList(data, 1),
+    ];
+    setAns(resultset);
+  };
+
+  React.useEffect(() => {
+    getPosts();
+  }, []);
+
+  if (ans) {
+    return (
+      <div className={styles.center}>
+
+        <div className={styles.gridContainer}>
+          <BlogCard
+            excerpt={ans[0].excerpt}
+            name={ans[0].name}
+            tags={ans[0].tags}
+            link={ans[0].link}
+            title={ans[0].title}
+            image={ans[0].image}></BlogCard>
+          <BlogCard
+            excerpt={ans[1].excerpt}
+            name={ans[1].name}
+            tags={ans[1].tags}
+            link={ans[1].link}
+            title={ans[1].title}
+            image={ans[1].image}></BlogCard>
+          <BlogCard
+            excerpt={ans[0].excerpt}
+            name={ans[0].name}
+            tags={ans[0].tags}
+            link={ans[0].link}
+            title={ans[0].title}
+            image={ans[0].image}></BlogCard>
+          <BlogCard
+            excerpt={ans[1].excerpt}
+            name={ans[1].name}
+            tags={ans[1].tags}
+            link={ans[1].link}
+            title={ans[1].title}
+            image={ans[1].image}></BlogCard>
+          <BlogCard
+            excerpt={ans[0].excerpt}
+            name={ans[0].name}
+            tags={ans[0].tags}
+            link={ans[0].link}
+            title={ans[0].title}
+            image={ans[0].image}></BlogCard>
+          <BlogCard
+            excerpt={ans[1].excerpt}
+            name={ans[1].name}
+            tags={ans[1].tags}
+            link={ans[1].link}
+            title={ans[1].title}
+            image={ans[1].image}></BlogCard>
+        </div>
+      </div>
+    );
+  } else {
+    return <div></div>;
+  }
+}
+
+function getPostList(posts, index) {
+  return {
+    name: posts.posts[index].name,
+    excerpt: styleExcerpt(posts.topics[index].excerpt),
+    image: getavatarURL(posts.posts[index].avatar_template),
+    tags: posts.topics[index].tags,
+    link:
+      'https://developer.sailpoint.com/discuss/t/' +
+      posts.topics[index].slug +
+      '/' +
+      posts.topics[index].id,
+    title: posts.topics[index].title,
+    views: posts.topics[index].views,
+    liked: posts.topics[index].like_count,
+    solution: posts.topics[index].has_accepted_answer,
+  };
+}
+
+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("&hellip;", "")
+  }
+}
+

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

@@ -0,0 +1,19 @@
+/* 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;
+}

src/pages/blog.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import BlogBanner from '../components/blog/BlogBanner';
+
+import styles from './blog.module.css';
+import BlogCards from '../components/blog/BlogCards';
+
+export default function Blog() {
+  const {siteConfig} = useDocusaurusContext();
+  return (
+    <Layout description="The SailPoint Developer Community has everything you need to build, extend, and automate scalable identity solutions.">
+      <main>
+      <BlogBanner />
+      <BlogCards />
+      </main>
+    </Layout>
+  );
+}