Don't fetch Medium posts anymore

Author: MichaelDeBoey

packages/homepage/gatsby-node.js

@@ -51,38 +51,6 @@ exports.createPages = async ({ graphql, actions }) => {
     toPath: '/',
   });
 
-  const blogsFromMedium = await graphql(`
-    {
-      allFeedMediumBlog {
-        edges {
-          node {
-            id
-            title
-            categories
-          }
-        }
-      }
-    }
-  `);
-
-  blogsFromMedium.data.allFeedMediumBlog.edges.forEach(edge => {
-    const slug = edge.node.title
-      .toLowerCase()
-      .replace(/[^\w ]+/g, '')
-      .replace(/ +/g, '-');
-    const id = edge.node.id;
-
-    // If there are no categories it's a comment
-    if (edge.node.categories) {
-      createPage({
-        path: 'post/' + slug,
-        component: blogTemplate,
-        context: {
-          id,
-        },
-      });
-    }
-  });
   const allMarkdownArticles = await graphql(
     `
       {
@@ -102,21 +70,18 @@ exports.createPages = async ({ graphql, actions }) => {
       }
     `
   );
+  allMarkdownArticles.data.allMarkdownRemark.edges.forEach(edge => {
+    const slug = edge.node.frontmatter.slug;
+    const id = edge.node.id;
 
-  if (allMarkdownArticles.data) {
-    allMarkdownArticles.data.allMarkdownRemark.edges.forEach(edge => {
-      const slug = edge.node.frontmatter.slug;
-      const id = edge.node.id;
-
-      createPage({
-        path: 'post/' + slug,
-        component: blogTemplate,
-        context: {
-          id,
-        },
-      });
+    createPage({
+      path: 'post/' + slug,
+      component: blogTemplate,
+      context: {
+        id,
+      },
     });
-  }
+  });
 
   const allDocs = await graphql(
     `
@@ -137,13 +102,11 @@ exports.createPages = async ({ graphql, actions }) => {
       }
     `
   );
-
   if (allDocs.errors) {
     console.error(allDocs.errors);
 
     throw Error(allDocs.errors);
   }
-
   allDocs.data.allMarkdownRemark.edges.forEach(edge => {
     const slug = edge.node.fields.slug;
     const url = edge.node.fields.url;
@@ -189,7 +152,6 @@ exports.createPages = async ({ graphql, actions }) => {
       }
     `
   );
-
   if (allJobs.data) {
     allJobs.data.allMarkdownRemark.edges.forEach(edge => {
       createPage({

packages/homepage/src/pages/blog.js

@@ -1,15 +1,15 @@
-import React from 'react';
-import { graphql, Link } from 'gatsby';
 import { format } from 'date-fns';
-import TitleAndMetaTags from '../components/TitleAndMetaTags';
-import PageContainer from '../components/PageContainer';
+import { graphql, Link } from 'gatsby';
+import React from 'react';
 
+import PageContainer from '../components/PageContainer';
 import {
-  Title,
-  PostDate,
-  AuthorImage,
   Author,
+  AuthorImage,
+  PostDate,
+  Title,
 } from '../components/PostElements';
+import TitleAndMetaTags from '../components/TitleAndMetaTags';
 
 import {
   Posts,
@@ -28,18 +28,20 @@ import { makeFeed } from '../utils/makePosts';
 // UNCOMMENT AT THE BOTTOM IF IT BREAKS
 // GATSBY DOES NOT LET YOU HAVE FIELDS THAT DON'T EXIST YET
 
-const Info = ({ post, mobile, ...props }) => (
+const Info = ({ mobile, post: { creator, date, photo }, ...props }) => (
   <Aside mobile={mobile} {...props}>
-    <PostDate>{format(post.date, 'MMM DD, YYYY')}</PostDate>
+    <PostDate>{format(date, 'MMM DD, YYYY')}</PostDate>
+
     <section>
-      <AuthorImage src={post.photo} alt={post.creator} />
-      <Author>{post.creator}</Author>
+      <AuthorImage src={photo} alt={creator} />
+
+      <Author>{creator}</Author>
     </section>
   </Aside>
 );
 
-const Blog = ({ data: { allFeedMediumBlog, allMarkdownRemark } }) => {
-  const posts = makeFeed(allFeedMediumBlog, allMarkdownRemark);
+const Blog = ({ data: { allMarkdownRemark } }) => {
+  const posts = makeFeed(allMarkdownRemark);
 
   return (
     <Layout>
@@ -48,28 +50,33 @@ const Blog = ({ data: { allFeedMediumBlog, allMarkdownRemark } }) => {
           description="Here you can find articles written by the team and external contributors"
           title="Blog - CodeSandbox"
         />
+
         <Header>
           <PageTitle>Blog</PageTitle>
+
           <PageSubtitle>
             Welcome to the CodeSandbox blog. Here you can find posts about new
             releases, tips and tricks and how we made CodeSandbox.
           </PageSubtitle>
         </Header>
+
         {posts.map(post => (
           <Wrapper key={post.id}>
             <Info post={post} />
+
             <Posts>
               {post.src && (
                 <Link
                   css={`
-                    text-decoration: none;
                     display: contents;
+                    text-decoration: none;
                   `}
                   to={`post/${post.slug}`}
                 >
-                  <Thumbnail src={post.src} width="340" alt={post.title} />
+                  <Thumbnail alt={post.title} src={post.src} width="340" />
                 </Link>
               )}
+
               <div>
                 <Link
                   css={`
@@ -79,8 +86,10 @@ const Blog = ({ data: { allFeedMediumBlog, allMarkdownRemark } }) => {
                 >
                   <Title>{post.title}</Title>
                 </Link>
+
                 <Subtitle>{post.subtitle}</Subtitle>
               </div>
+
               <Info post={post} mobile />
             </Posts>
           </Wrapper>
@@ -114,20 +123,6 @@ export const query = graphql`
         }
       }
     }
-    allFeedMediumBlog {
-      edges {
-        node {
-          id
-          categories
-          creator
-          title
-          isoDate
-          content {
-            encoded
-          }
-        }
-      }
-    }
   }
 `;
 

packages/homepage/src/templates/post.js

@@ -1,22 +1,22 @@
+import { format } from 'date-fns';
+import { graphql } from 'gatsby';
 import React from 'react';
 
-import { graphql } from 'gatsby';
-import { format } from 'date-fns';
-import TitleAndMetaTags from '../components/TitleAndMetaTags';
 import Layout from '../components/layout';
 import PageContainer from '../components/PageContainer';
-import { mainStyle, Image } from './_post.elements';
-
 import {
+  Author,
+  AuthorImage,
   Container,
-  Title,
   PostDate,
-  AuthorImage,
-  Author,
+  Title,
 } from '../components/PostElements';
+import TitleAndMetaTags from '../components/TitleAndMetaTags';
 import { makePost } from '../utils/makePosts';
 
-export default ({ data: { feedMediumBlog, markdownRemark } }) => {
+import { mainStyle, Image } from './_post.elements';
+
+export default ({ data: { markdownRemark } }) => {
   const {
     creator,
     title,
@@ -25,7 +25,7 @@ export default ({ data: { feedMediumBlog, markdownRemark } }) => {
     photo,
     featuredImage,
     description,
-  } = makePost(markdownRemark, feedMediumBlog);
+  } = makePost(markdownRemark);
 
   const featuredImageUrl = (featuredImage || '').includes('http')
     ? featuredImage
@@ -34,31 +34,37 @@ export default ({ data: { feedMediumBlog, markdownRemark } }) => {
     <Layout>
       <Container style={{ overflowX: 'auto' }}>
         <TitleAndMetaTags
-          title={`${title} - CodeSandbox Blog`}
-          image={featuredImageUrl}
           description={description}
+          image={featuredImageUrl}
+          title={`${title} - CodeSandbox Blog`}
         />
+
         <PageContainer width={800}>
           <Title>{title}</Title>
+
           <aside
             css={`
-              display: flex;
               align-items: center;
+              display: flex;
             `}
           >
             <div
               css={`
-                display: flex;
                 align-items: center;
+                display: flex;
                 flex: 1;
               `}
             >
               <AuthorImage src={photo} alt={creator} />
+
               <Author>{creator}</Author>
             </div>
+
             <PostDate>{format(date, 'MMM DD, YYYY')}</PostDate>
           </aside>
-          {featuredImage ? <Image src={featuredImage} alt={title} /> : null}
+
+          {featuredImage ? <Image alt={title} src={featuredImage} /> : null}
+
           <div
             css={mainStyle}
             dangerouslySetInnerHTML={{
@@ -73,18 +79,6 @@ export default ({ data: { feedMediumBlog, markdownRemark } }) => {
 
 export const pageQuery = graphql`
   query Post($id: String) {
-    feedMediumBlog(id: { eq: $id }) {
-      id
-      categories
-      creator
-      link
-      title
-      pubDate
-      isoDate
-      content {
-        encoded
-      }
-    }
     markdownRemark(id: { eq: $id }) {
       html
       frontmatter {