Get latest publications on the homepage from medium

packages/homepage/.eslintignore

@@ -0,0 +1,3 @@
+.cache/
+node_modules
+public

packages/homepage/gatsby-config.js

@@ -78,6 +78,13 @@ module.exports = {
         id: 'GTM-T3L6RFK',
       },
     },
+    {
+      resolve: `gatsby-source-medium`,
+      options: {
+        username: `@compuives`,
+        limit: 200,
+      },
+    },
     {
       resolve: `gatsby-plugin-google-fonts`,
       options: {

packages/homepage/package.json

@@ -40,6 +40,7 @@
     "react-typography": "^0.16.13",
     "slick-carousel": "^1.8.1",
     "styled-components": "^4.1.2",
+    "terser": "^3.14.1",
     "three": "^0.87.1",
     "typography": "^0.16.17",
     "typography-breakpoint-constants": "^0.15.10"
@@ -53,13 +54,14 @@
     "build": "gatsby build",
     "build:clean": "rimraf public",
     "start": "gatsby develop",
-    "lint": "echo TODO && exit 0",
+    "lint": "eslint .",
     "format": "prettier --trailing-comma es5 --single-quote --write 'src/**/*.js'",
     "test": "echo \"Todo: no test specified\" && exit 0"
   },
   "devDependencies": {
     "extract-text-webpack-plugin": "1.0.1",
     "gatsby-plugin-remove-trailing-slashes": "^2.0.6",
+    "gatsby-source-medium": "^2.0.2",
     "prettier": "^1.8.2",
     "rimraf": "^2.6.2",
     "terser": "^3.10.13",

packages/homepage/src/components/Cube.js

@@ -12,18 +12,16 @@ const Cube = styled.div`
   }
 `;
 
-const getAnimation = (offset: number = 0) => {
-  return keyframes`
+const getAnimation = (offset: number = 0) => keyframes`
   0% {
     transform: rotateY(${45 + offset}deg) rotateX(${-37.5 + offset}deg);
   }
   100% {
     transform: rotateY(${45 + offset + 360}deg) rotateX(${-37.5 +
-    offset +
-    360}deg);
+  offset +
+  360}deg);
   }
 `;
-};
 
 const Sides = styled.div`
   ${({ noAnimation, offset, speed }) =>

packages/homepage/src/components/layout.js

@@ -11,7 +11,7 @@ import Footer from './Footer';
 // eslint-disable-next-line
 export default class TemplateWrapper extends React.Component {
   render() {
-    const { children, title } = this.props;
+    const { children } = this.props;
     return (
       <ThemeProvider theme={theme}>
         <div>

packages/homepage/src/screens/home/Animation/Cubes.js

@@ -129,7 +129,7 @@ export default class Cubes extends React.Component {
   }
 
   updateCubePos = () => {
-    if (this.props.canvas) {
+    if (this.props.canvas && this.els[this.props.template.name]) {
       const pos = this.els[this.props.template.name].getBoundingClientRect();
       this.props.canvas.setCubePos(pos.x + 50, pos.y + 70 + getScrollPos().y);
     }
@@ -195,6 +195,8 @@ export default class Cubes extends React.Component {
 
       return this.shrinkTimelines[template.template.name].restart();
     }
+
+    return null;
   };
 
   hoverCube = template => {

packages/homepage/src/screens/home/Animation/canvas/index.js

@@ -130,13 +130,11 @@ class Canvas {
             }
           }
         }
-      } else {
-        if (!this.lowPerf) {
-          this.ctx.clearRect(0, 0, this.stage.width, this.stage.height);
+      } else if (!this.lowPerf) {
+        this.ctx.clearRect(0, 0, this.stage.width, this.stage.height);
 
-          for (let i = 0; i < this.dots.length; i++) {
-            this.dots[i].draw(this.ctx);
-          }
+        for (let i = 0; i < this.dots.length; i++) {
+          this.dots[i].draw(this.ctx);
         }
       }
 
@@ -187,4 +185,6 @@ export default function start(el: HTMLElement) {
     c.loop();
     return c;
   }
+
+  return null;
 }

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

@@ -1,11 +1,11 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
+import styled from 'styled-components';
 import { TimelineMax, Power2 } from 'gsap';
 
 import Centered from 'common/components/flex/Centered';
 import MaxWidth from 'common/components/flex/MaxWidth';
 
-import theme from 'common/theme';
+import Theme from 'common/theme';
 
 import GithubIcon from 'react-icons/lib/go/mark-github';
 import BuildIcon from 'react-icons/lib/go/tools';
@@ -208,9 +208,9 @@ export default class CycleFeatures extends React.PureComponent {
         position: 'absolute',
       })
       .set('#main-cube-side', {
-        backgroundColor: theme.secondary.clearer(0.2)(),
+        backgroundColor: Theme.secondary.clearer(0.2)(),
         zIndex: 1,
-        boxShadow: `0px 0px 150px ${theme.secondary()}`,
+        boxShadow: `0px 0px 150px ${Theme.secondary()}`,
       })
       .set('#progress-text', {
         autoAlpha: 0,
@@ -253,7 +253,7 @@ export default class CycleFeatures extends React.PureComponent {
         },
         'step1'
       )
-      .set('#main-cube-side', { backgroundColor: theme.primary.clearer(0.2)() })
+      .set('#main-cube-side', { backgroundColor: Theme.primary.clearer(0.2)() })
       .to('#addition-cube', 0.6, {
         ease: Power2.easeOut,
         y: -45,
@@ -271,7 +271,7 @@ export default class CycleFeatures extends React.PureComponent {
         '#main-cube-side',
         0.2,
         {
-          boxShadow: `0px 0px 150px ${theme.primary()}`,
+          boxShadow: `0px 0px 150px ${Theme.primary()}`,
         },
         '-=0.6'
       )
@@ -312,8 +312,8 @@ export default class CycleFeatures extends React.PureComponent {
         '-=0.2'
       )
       .to('#main-cube-side', 0.7, {
-        backgroundColor: theme.secondary.clearer(0.2)(),
-        boxShadow: `0px 0px 150px ${theme.secondary()}`,
+        backgroundColor: Theme.secondary.clearer(0.2)(),
+        boxShadow: `0px 0px 150px ${Theme.secondary()}`,
         ease: Power2.easeInOut,
       })
       .to(
@@ -407,7 +407,7 @@ export default class CycleFeatures extends React.PureComponent {
               getY={this.setY}
               Icon={RocketIcon}
               title="Deploy"
-              description="Deploy a production version of your sandbox using ZEIT Now."
+              description="Deploy a production version of your sandbox using ZEIT's Now."
             />
           </Steps>
 
@@ -422,15 +422,15 @@ export default class CycleFeatures extends React.PureComponent {
                 noAnimation
                 size={90}
                 offset={40}
-                color={theme.secondary}
+                color={Theme.secondary}
                 style={{ position: 'absolute', top: 0 }}
               />
               <Cube
                 id="main-cube"
                 noAnimation
                 size={90}
                 offset={40}
-                color={theme.primary}
+                color={Theme.primary}
                 style={{ position: 'absolute', top: 0 }}
               />
             </OffsettedCube>
@@ -467,7 +467,7 @@ export default class CycleFeatures extends React.PureComponent {
                 <span id="progress-text" style={{ textAlign: 'center' }}>
                   Deploying...
                 </span>
-                <span style={{ color: theme.secondary() }} id="deploy-text">
+                <span style={{ color: Theme.secondary() }} id="deploy-text">
                   https://csb-921ywn9qrw-emlplxhibt.now.sh/
                 </span>
                 <Progress id="progress" />

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

@@ -34,7 +34,7 @@ const Container = styled.div`
   transition: 0.3s ease box-shadow;
   border-radius: 2px;
 
-  background-color: ${({ theme }) => theme.background};
+  background-color: ${props => props.theme.background};
 
   box-shadow: 0 3px 200px ${({ color }) => color.clearer(0.8)};
 
@@ -288,6 +288,7 @@ export default class Frameworks extends React.Component {
 
               return (
                 <IconContainer
+                  // eslint-disable-next-line
                   key={i}
                   selected={templates[i] === template}
                   template={templates[i]}
@@ -342,7 +343,8 @@ export default class Frameworks extends React.Component {
                   style={{ color: template.color() }}
                 >
                   {template.name}
-                </a>.
+                </a>
+                .
               </div>
 
               <HeaderTitle>Supported Loaders</HeaderTitle>

packages/homepage/src/screens/home/NPMFeature/SearchInput/Hit.js

@@ -21,11 +21,9 @@ const Container = styled.a`
     box-shadow: 0 8px 8px rgba(0, 0, 0, 0.3);
   }
 
-  ${props => {
-    return css`
-      background-color: ${props.theme.background()};
-    `;
-  }};
+  ${props => css`
+    background-color: ${props.theme.background()};
+  `};
 `;
 
 const Title = styled.div`

packages/homepage/src/screens/home/NPMFeature/SearchInput/index.js

@@ -47,7 +47,9 @@ export default class SearchInput extends React.PureComponent {
           <div>Dependency</div>
           <div>Sandbox Count</div>
         </Legend>
-        {this.state.hits.map((hit, i) => <Hit key={i} hit={hit} />)}
+        {this.state.hits.map(hit => (
+          <Hit key={hit.value} hit={hit} />
+        ))}
         <a
           href="https://www.algolia.com/?utm_source=algoliaclient&utm_medium=website&utm_content=codesandbox.io&utm_campaign=poweredby"
           target="_blank"

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

@@ -1,12 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
+import { StaticQuery, graphql } from 'gatsby';
 
 import MaxWidth from 'common/components/flex/MaxWidth';
 
-import firstImage from './unique.png';
-import dashboardImage from './dashboard.png';
-import secondImage from './containers3.png';
-
 import media from '../../../utils/media';
 
 const Container = styled.div`
@@ -72,54 +69,75 @@ const PublicationDescription = styled.p`
   opacity: 0.6;
 `;
 
+const Image = styled.div`
+  height: 245px;
+  width: 100%;
+  background-image: url('${props => props.bg}');
+    background-position: center center;
+  background-size: cover;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+`;
+
 const PublicationItem = ({ title, image, url, description }) => (
   <Item href={url} target="_blank" rel="noopener noreferrer">
-    <img
-      style={{ boxShadow: '0 4px 8px rgba(0, 0, 0, 0.3)' }}
-      src={image}
-      alt={title}
-    />
+    <Image bg={image} aria-label={title} />
     <PublicationTitle>{title}</PublicationTitle>
     <PublicationDescription>{description}</PublicationDescription>
   </Item>
 );
 
 export default () => (
-  <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' }}>
-        <PublicationItem
-          title="What's Unique About CodeSandbox"
-          description={`I often get asked: "What's the difference between CodeSandbox and <another online editor>". This is a list of unique features that distinguishes CodeSandbox.`}
-          url="https://medium.com/@compuives/whats-unique-about-codesandbox-f1791d867e48"
-          image={firstImage}
-        />
-        <PublicationItem
-          title="CodeSandbox Containers"
-          description="With Containers we execute the code on a server. This allows you to create Node servers and run any kind of web application like Nuxt, Next and Gatsby."
-          url="https://hackernoon.com/codesandbox-containers-5864a8f26715"
-          image={secondImage}
-        />
-        <PublicationItem
-          title="CodeSandbox Dashboard & Teams"
-          description="Announcing Dashboard & Teams, you now have a dashboard to manage your sandboxes. With that you can now also share your sandboxes with your team."
-          url="https://medium.com/@compuives/announcing-codesandbox-dashboard-teams-876f5933160b"
-          image={dashboardImage}
-        />
-      </Items>
-    </MaxWidth>
-  </Container>
+  <StaticQuery
+    query={graphql`
+      query {
+        allMediumPost(limit: 3, sort: { fields: [createdAt], order: DESC }) {
+          edges {
+            node {
+              id
+              title
+              uniqueSlug
+              virtuals {
+                subtitle
+                previewImage {
+                  imageId
+                }
+              }
+            }
+          }
+        }
+      }
+    `}
+    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>
+    )}
+  />
 );