feat(MediumPosts): automates pulling in posts from our Medium account (…

…carbon-design-system#2562) * feat(MediumPosts): ta da * feat(MediumPosts): added to the latest news section * feat(MediumPosts): shadow'd component to fix colors
tay1orjones · Oct 6, 2021 · 2f5fc78 · 2f5fc78
1 parent 8257a57
commit 2f5fc78
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 359 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -49,6 +49,7 @@ module.exports = {
           baseUrl: 'https://github.com/carbon-design-system/carbon-website',
           subDirectory: '',
         },
+        mediumAccount: 'carbondesign',
       },
     },
     {

diff --git a/src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.js b/src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { useStaticQuery, graphql } from 'gatsby';
+import PropTypes from 'prop-types';
+import { Column, Row } from 'gatsby-theme-carbon/src/components/Grid';
+import ArticleCard from 'gatsby-theme-carbon/src/components/ArticleCard';
+import { image, cardContainer } from './MediumPosts.module.scss';
+
+const MediumPosts = ({
+  postLimit = 3,
+  cardProps,
+  color = 'white',
+  ...rest
+}) => {
+  const data = useStaticQuery(graphql`
+    query {
+      allMediumFeed(sort: { fields: date, order: DESC }, limit: 10) {
+        edges {
+          node {
+            author
+            date(formatString: "MMMM Do, YYYY")
+            slug
+            thumbnail
+            title
+            link
+          }
+        }
+      }
+    }
+  `);
+
+  const allPosts = data.allMediumFeed.edges.map(({ node }) => node);
+
+  return (
+    <Row {...rest}>
+      {allPosts.slice(0, postLimit).map((latestPost, i) => (
+        <Column
+          colSm={4}
+          colMd={4}
+          colLg={4}
+          noGutterMdLeft
+          key={i}
+          className={cardContainer}>
+          <ArticleCard
+            title={latestPost.title}
+            author={latestPost.author}
+            href={latestPost.link}
+            date={latestPost.date}
+            color={color}
+            {...cardProps}>
+            <img
+              alt={latestPost.title}
+              src={latestPost.thumbnail}
+              className={image}
+            />
+          </ArticleCard>
+        </Column>
+      ))}
+    </Row>
+  );
+};
+
+MediumPosts.propTypes = {
+  cardProps: PropTypes.object,
+  postLimit: PropTypes.number,
+};
+
+export default MediumPosts;
diff --git a/src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.module.scss b/src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.module.scss
@@ -0,0 +1,57 @@
+// Fixes the gutter of the article cards on the homepage
+.card-container {
+  padding-right: 0;
+  padding-left: 0;
+  @include carbon--breakpoint('md') {
+    padding-right: 1rem;
+    padding-left: 1rem;
+  }
+}
+
+// Fixs the breaking type
+
+.card-container h4 {
+  @include carbon--breakpoint('sm') {
+    @include carbon--type-style('productive-heading-03');
+  }
+
+  @include carbon--breakpoint('md') {
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.2rem;
+    letter-spacing: 0;
+  }
+
+  @include carbon--breakpoint('lg') {
+    font-size: 0.75rem;
+    font-weight: 400;
+    line-height: 1rem;
+    letter-spacing: 0;
+  }
+  @include carbon--breakpoint('xlg') {
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.375rem;
+    letter-spacing: 0;
+  }
+}
+
+// Images pulled from the Medium RSS feed are different sizes and aspect ratios. This will make the cards different sizes. The class below fixes that issue.
+
+.image {
+  object-fit: cover;
+  width: 100%;
+
+  @include carbon--breakpoint('sm') {
+    height: 315px;
+  }
+  @include carbon--breakpoint('md') {
+    height: 290px;
+  }
+  @include carbon--breakpoint('lg') {
+    height: 165px;
+  }
+  @include carbon--breakpoint('xlg') {
+    height: 215px;
+  }
+}
diff --git a/src/gatsby-theme-carbon/components/MediumPosts/index.js b/src/gatsby-theme-carbon/components/MediumPosts/index.js
@@ -0,0 +1,3 @@
+import MediumPosts from './MediumPosts';
+
+export default MediumPosts;
diff --git a/src/pages/index.mdx b/src/pages/index.mdx
@@ -126,47 +126,4 @@ building websites and user interfaces.
 
 ### Latest news and articles
 
-<Row>
-<Column colLg={4} colMd={4} noGutterMdLeft>
-
-<ArticleCard
-    color="dark"
-    title="Carbon v11 Beta 1"
-    author="Josh Black"
-    date="August 6, 2021"
-    href="https://medium.com/carbondesign/carbon-v11-beta-1-33488b0280f0"
-    >
-
-![Carbon v11 Beta 1](./homepage/images/carbon_2021-august-update.png)
-
-</ArticleCard>
-</Column>
-<Column colLg={4} colMd={4} noGutterMdLeft>
-
-<ArticleCard
-    color="dark"
-    title="Carbon’s 2021 release: April update"
-    author="Josh Black"
-    date="April 22, 2021"
-    href="https://medium.com/carbondesign/carbons-2021-release-april-update-9d23242b3dea"
-    >
-
-![Carbon's 2021 release: April update](./homepage/images/carbon_2021-april-update.png)
-
-</ArticleCard>
-</Column>
-<Column colLg={4} colMd={4} noGutterMdLeft>
-<ArticleCard
-    color="dark"
-    title="The new Gatsby theme Sketch kit has arrived!"
-    author="Diana Stanciulescu"
-    date="April 1, 2021"
-    href="./designing/design-resources/#gatsby-theme-sketch-kit"
-    >
-
-![Gatsby theme announcement](./homepage/images/gatsby_announcement.png)
-
-</ArticleCard>
-</Column>
-
-</Row>
+<MediumPosts postLimit={3} color="dark" />