Update Changelog and Recent Publications

Author: Ives van Hoorne

packages/homepage/content/changelog/2018-02-28-vanilla-template.md

@@ -0,0 +1,13 @@
+---
+title: "Vanilla Template"
+authors: ["CompuIves"]
+---
+
+From day one we’ve always tied templates to a CLI. The main reason for this is that we want to keep sandboxes simple, you shouldn’t need to do any configuration to get started. I didn’t want to create a ‘Vanilla’ template because there was no way to create ‘vanilla’ web projects without configuration, until recently.
+
+We now have support for the Parcel template, based on the [Parcel bundler](https://parceljs.org).
+
+Read more about it
+[here](https://hackernoon.com/introducing-the-vanilla-template-to-codesandbox-32244b58acec).
+
+![Parcel Template](./images/parcel.png)

packages/homepage/content/changelog/2018-03-26-codesandbox-live.md

@@ -0,0 +1,15 @@
+---
+title: "CodeSandbox Live"
+authors: ["CompuIves"]
+---
+
+CodeSandbox Live allows you to open up your sandbox for real time collaboration. You can simultaneously edit code, create files, move files and delete files. We also added Classroom mode, which allows you to define who can edit the code.
+
+Read more about it
+[here](https://medium.com/@compuives/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser-6d508cfc70c9).
+
+And watch this video to see a demo of how it works:
+
+`youtube:https://www.youtube.com/embed/DnnJ0sLn28s`
+
+![CodeSandbox Live](./images/codesandbox-live.png)

packages/homepage/content/changelog/images/codesandbox-live.png

@@ -53,14 +53,21 @@ module.exports = {
           'gatsby-remark-autolink-headers',
           `gatsby-remark-prismjs`,
           {
-            resolve: 'gatsby-plugin-nprogress',
+            resolve: 'gatsby-remark-embed-youtube',
             options: {
-              color: '#6CAEDD',
+              width: 740,
+              height: 370,
             },
           },
         ],
       },
     },
+    {
+      resolve: 'gatsby-plugin-nprogress',
+      options: {
+        color: '#6CAEDD',
+      },
+    },
     `gatsby-plugin-styled-components`,
     `gatsby-plugin-react-helmet`,
     `gatsby-plugin-sitemap`,

packages/homepage/content/changelog/images/parcel.png

@@ -15,6 +15,7 @@
     "gatsby-plugin-styled-components": "^2.0.5",
     "gatsby-react-router-scroll": "^1.0.3",
     "gatsby-remark-autolink-headers": "^1.4.10",
+    "gatsby-remark-embed-youtube": "^0.0.7",
     "gatsby-remark-images": "^1.5.34",
     "gatsby-remark-prismjs": "^1.2.11",
     "gatsby-source-filesystem": "^1.5.8",

packages/homepage/gatsby-config.js

@@ -62,6 +62,11 @@ const Content = styled.div`
   *:last-child {
     margin-bottom: 0;
   }
+
+  iframe {
+    border: 0;
+    outline: 0;
+  }
 `;
 
 const GitHubUserContainer = styled.a`
@@ -131,7 +136,10 @@ export default class ChangelogPage extends React.Component {
             of our notable updates here, for smaller updates you can check our{' '}
             <a href="https://github.com/CompuIves/codesandbox-client">
               GitHub repository
-            </a>.
+            </a>{' '}
+            and the Twitter of{' '}
+            <a href="https://twitter.com/@codesandboxapp">@codesandboxapp</a>{' '}
+            and <a href="https://twitter.com/@CompuIves">@CompuIves</a>.
           </Description>
           <Changelogs>
             {posts.map(({ node: post }) => {

packages/homepage/package.json

@@ -3,9 +3,9 @@ import styled from 'styled-components';
 
 import MaxWidth from 'common/components/flex/MaxWidth';
 
-import npmArticleImage from './1-codesandbox2.5.png';
-import codesandbox2Image from './2-codesandbox2.png';
-import zeitTalkImage from './3-zeit-talk.jpg';
+import liveImage from './codesandbox-live.png';
+import codeSandbox25Image from './codesandbox-2.5.png';
+import parcelImage from './parcel.png';
 
 import media from '../../../utils/media';
 
@@ -19,10 +19,18 @@ const Title = styled.h3`
   font-weight: 200;
   font-size: 2rem;
   text-align: center;
-  margin-bottom: 3rem;
+  margin-bottom: 0.5rem;
   color: white;
 `;
 
+const SubTitle = styled.h4`
+  font-weight: 200;
+  font-size: 1.25rem;
+  text-align: center;
+  margin-bottom: 3.5rem;
+  color: rgba(255, 255, 255, 0.8);
+`;
+
 const Items = styled.div`
   display: flex;
   flex-wrap: wrap;
@@ -79,25 +87,36 @@ export default () => (
   <Container>
     <MaxWidth width={1280}>
       <Title>Recent Publications</Title>
-
-      <Items>
+      <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="CodeSandbox 2.5"
-          description="Announcing CodeSandbox 2.5. An editor redesign, Jest support, Babel Plugin support, a Cerebral rewrite and muuuuch more!"
-          url="https://medium.com/@compuives/announcing-codesandbox-2-5-be767d15ffd"
-          image={npmArticleImage}
+          title="CodeSandbox Live"
+          description="Real time code collaboration in the browser. From now on you can open up your sandbox for live editing with others."
+          url="https://medium.com/@compuives/introducing-codesandbox-live-real-time-code-collaboration-in-the-browser-6d508cfc70c9"
+          image={liveImage}
         />
         <PublicationItem
-          title="CodeSandbox 2.0"
-          description="Announcing CodeSandbox 2.0. With GitHub commiting, a new homepage and support for static files."
-          url="https://medium.com/@compuives/announcing-codesandbox-2-0-938cff3a0fcb"
-          image={codesandbox2Image}
+          title="Vanilla Template"
+          description="Introducing the Vanilla template: a template based on Parcel for any kind of web project you like to create."
+          url="https://hackernoon.com/introducing-the-vanilla-template-to-codesandbox-32244b58acec"
+          image={parcelImage}
         />
         <PublicationItem
-          title="The Journey of CodeSandbox"
-          description="Ives explains how CodeSandbox came to be, how it works and what the future holds."
-          url="https://www.youtube.com/watch?v=5lR29NsJKW8"
-          image={zeitTalkImage}
+          title="CodeSandbox 2.5"
+          description="Announcing CodeSandbox 2.5. An editor redesign, Jest support, Babel Plugin support, a Cerebral rewrite and muuuuch more!"
+          url="https://medium.com/@compuives/announcing-codesandbox-2-5-be767d15ffd"
+          image={codeSandbox25Image}
         />
       </Items>
     </MaxWidth>