fix: Blog Link and Blogs Query on Homepage (codesandbox#2207)

* fix: Blog Link and Blogs Query

* fix: Remove unused utils method

Author: jyash97

packages/app/src/app/pages/common/Modals/Changelog/Dashboard/index.js

@@ -52,7 +52,11 @@ function DashboardChangelog({ signals }) {
       }}
     >
       <div
-        style={{ marginBottom: '1rem', display: 'flex', alignItems: 'center' }}
+        style={{
+          marginBottom: '1rem',
+          display: 'flex',
+          alignItems: 'center',
+        }}
       >
         <h1 style={titleStyles}>
           What
@@ -133,7 +137,7 @@ function DashboardChangelog({ signals }) {
           Close
         </Button>
         <Button
-          href="https://medium.com/@compuives/announcing-codesandbox-dashboard-teams-876f5933160b"
+          href="/post/announcing-codesandbox-dashboard-teams"
           style={{ marginTop: '1rem', marginLeft: '.25rem' }}
           block
           small

packages/common/src/components/Footer.tsx

@@ -91,11 +91,7 @@ export default () => (
             <Title>About</Title>
             <List>
               <li>
-                <a
-                  href="https://medium.com/@compuives"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
+                <a href="/blog" target="_blank" rel="noopener noreferrer">
                   Blog
                 </a>
               </li>

packages/homepage/src/screens/home/RecentPublications/index.js

@@ -90,54 +90,69 @@ export default () => (
   <StaticQuery
     query={graphql`
       query {
-        allMediumPost(limit: 3, sort: { fields: [createdAt], order: DESC }) {
+        allMarkdownRemark(
+          filter: { fileAbsolutePath: { regex: "/articles/" } }
+          limit: 3
+        ) {
           edges {
             node {
               id
-              title
-              uniqueSlug
-              virtuals {
-                subtitle
-                previewImage {
-                  imageId
+              html
+              frontmatter {
+                featuredImage {
+                  publicURL
                 }
+                slug
+                authors
+                photo
+                title
+                description
+                date
               }
             }
           }
         }
       }
     `}
-    render={({ allMediumPost: { edges } }) => (
-      <Container>
-        <MaxWidth width={1280}>
-          <Title>Recent Publications</Title>
-          <SubTitle>
-            You can follow{' '}
-            <a
-              href="https://medium.com/@compuives/"
-              target="_blank"
-              rel="noreferrer noopener"
-              style={{ textDecoration: 'none' }}
-            >
-              our blog
-            </a>{' '}
-            to stay up to date with new publications.
-          </SubTitle>
-          <Items style={{ marginBottom: '2rem' }}>
-            {edges.map(post => (
-              <PublicationItem
-                key={post.node.id}
-                title={post.node.title}
-                description={post.node.virtuals.subtitle}
-                url={`https://medium.com/@compuives/${post.node.uniqueSlug}`}
-                image={`https://cdn-images-1.medium.com/max/2000/${
-                  post.node.virtuals.previewImage.imageId
-                }`}
-              />
-            ))}
-          </Items>
-        </MaxWidth>
-      </Container>
-    )}
+    render={({ allMarkdownRemark }) => {
+      const { edges } = allMarkdownRemark;
+      const posts = edges
+        .map(({ node }) => ({
+          id: node.id,
+          ...node.frontmatter,
+        }))
+        .sort((a, b) => new Date(b.date) - new Date(a.date));
+
+      return (
+        <Container>
+          <MaxWidth width={1280}>
+            <Title>Recent Publications</Title>
+            <SubTitle>
+              You can follow{' '}
+              <a
+                href="/blog"
+                target="_blank"
+                rel="noreferrer noopener"
+                style={{ textDecoration: 'none' }}
+              >
+                our blog
+              </a>{' '}
+              to stay up to date with new publications.
+            </SubTitle>
+            <Items style={{ marginBottom: '2rem' }}>
+              {posts.map(post => (
+                <PublicationItem
+                  key={post.id}
+                  title={post.title}
+                  description={post.description}
+                  url={`/post/${post.slug}`}
+                  image={post.featuredImage.publicURL}
+                />
+              ))}
+            </Items>
+          </MaxWidth>
+        </Container>
+      );
+    }}
   />
 );