From 2f5fc789f6b224924dfaa1218135dbc8fd213dea Mon Sep 17 00:00:00 2001 From: Scott Strubberg Date: Wed, 6 Oct 2021 12:04:05 -0500 Subject: [PATCH] feat(MediumPosts): automates pulling in posts from our Medium account (#2562) * feat(MediumPosts): ta da * feat(MediumPosts): added to the latest news section * feat(MediumPosts): shadow'd component to fix colors --- gatsby-config.js | 1 + .../components/MediumPosts/MediumPosts.js | 67 ++++ .../MediumPosts/MediumPosts.module.scss | 57 ++++ .../components/MediumPosts/index.js | 3 + src/pages/index.mdx | 45 +-- .../news-and-articles/index.mdx | 316 +----------------- 6 files changed, 130 insertions(+), 359 deletions(-) create mode 100644 src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.js create mode 100644 src/gatsby-theme-carbon/components/MediumPosts/MediumPosts.module.scss create mode 100644 src/gatsby-theme-carbon/components/MediumPosts/index.js diff --git a/gatsby-config.js b/gatsby-config.js index 19b61677333..4db646f2117 100644 --- 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 new file mode 100644 index 00000000000..28c704f4e53 --- /dev/null +++ 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 ( + + {allPosts.slice(0, postLimit).map((latestPost, i) => ( + + + {latestPost.title} + + + ))} + + ); +}; + +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 new file mode 100644 index 00000000000..bbcb3959cf7 --- /dev/null +++ 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 new file mode 100644 index 00000000000..22a8e56fbd2 --- /dev/null +++ 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 index 6ebbf792fb2..054853f7bc7 100755 --- a/src/pages/index.mdx +++ b/src/pages/index.mdx @@ -126,47 +126,4 @@ building websites and user interfaces. ### Latest news and articles - - - - - -![Carbon v11 Beta 1](./homepage/images/carbon_2021-august-update.png) - - - - - - - -![Carbon's 2021 release: April update](./homepage/images/carbon_2021-april-update.png) - - - - - - -![Gatsby theme announcement](./homepage/images/gatsby_announcement.png) - - - - - + diff --git a/src/pages/whats-happening/news-and-articles/index.mdx b/src/pages/whats-happening/news-and-articles/index.mdx index 29b42a1b5fb..b4dc6f5e2a9 100644 --- a/src/pages/whats-happening/news-and-articles/index.mdx +++ b/src/pages/whats-happening/news-and-articles/index.mdx @@ -19,321 +19,7 @@ about design systems. ## Latest news - - - - -![Carbon's 2021 release: April update](/images/carbon_2021-april-update.png) - - - - - - -![Gatsby theme announcement](/images/gatsby_announcement.png) - - - - - - -![Carbon 2021 release](/images/carbon_2021.png) - - - - - - - -![Color palettes and accessibility for data viz](/images/2020_dataviz.png) - - - - - - -![Hacktoberfest 2020](/images/2020_hacktoberfest.png) - - - - - - -![Component index](/images/component_index.png) - - - - - - - -![New information architecture](/images/new_IA.png) - - - - - - - -![](/images/patterns_announcement.png) - - - - - - -![Adobe and IBM partnership](/images/xd_kit_img.png) - - - - - - - -![](/images/v10.7-release.png) - - - - - - -![](/images/hacktoberfest.png) - - - - - - -![](/images/because-colors.png) - - - - - - -![](/images/october_release.png) - - - - - - -![](/images/security_pic.png) - - - - - - -![](/images/Aug_preview_rev_2.png) - - - - - - -![](/images/june_option_3.png) - - - - - - -![](/images/10_3-image.png) - - - - - - -![](/images/code_palette.png) - - - - - - -![](/images/mono_repo_teal.png) - - - - - - -![](/images/carbon_themes.png) - - - - - - -![](/images/bee_70.png) - - - - - - -![](/images/designing_with_carbon.png) - - - - - - -![](/images/minimal_css.png) - - - - - - -![](/images/Carbon_what_to_expect.png) - - - - - - -![](/images/Article_02.png) - - - - - - -![](/images/Article_03.png) - - - - + ## Books and articles