Merge pull request cerebral#125 from cerebral/workshop2

docs(website): add workshop and introduction video

Author: christianalfoni

packages/overmind-website/src/components/App/elements.tsx

@@ -1,6 +1,6 @@
 import styled from '../../styled-components'
 
 export const Wrapper = styled.div`
-  font-family: 'Source Sans Pro', 'helvetica neue';
+  font-family: 'Code Sans Pro', 'helvetica neue';
   background-color: inherit;
 `

packages/overmind-website/src/components/App/index.tsx

@@ -11,6 +11,7 @@ import Api from '../Api'
 import TopBar from '../TopBar'
 import MobileTopBar from '../MobileTopBar'
 import { Wrapper } from './elements'
+import Workshop from '../Workshop'
 
 const routesMap = {
   '/': FrontPage,
@@ -19,6 +20,7 @@ const routesMap = {
   '/videos': Videos,
   '/videos/:title': Videos,
   '/api/:title': Api,
+  '/workshop': Workshop,
 }
 
 export type TVideo = {

packages/overmind-website/src/components/FrontPage/index.tsx

@@ -18,7 +18,7 @@ class FrontPage extends React.Component {
             this.node = node
           }}
         >
-          <Quickstart>
+          <Quickstart href="/videos/overmind-introduction">
             <Icon>movie</Icon>
             {viewport.isMobile ? null : <span>Video introduction</span>}
           </Quickstart>

packages/overmind-website/src/components/Workshop/elements.tsx

@@ -0,0 +1,46 @@
+import styled from '../../styled-components'
+
+export const Iframe = styled.iframe`
+  margin: ${({ theme }) => theme.padding.small};
+`
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  padding-top: ${({ theme }) => theme.padding.large};
+`
+
+export const Container = styled.div`
+  display: flex;
+`
+
+export const Column = styled.div`
+  display: flex;
+  flex-direction: column;
+`
+
+export const Cell = styled.div`
+  max-width: 400px;
+  color: ${({ theme }) => theme.color.white};
+  padding: ${({ theme }) => theme.padding.normal};
+`
+
+export const Title = styled.div`
+  font-weight: bold;
+  color: ${({ theme }) => theme.color.white};
+  font-size: ${({ theme }) => theme.fontSize.large};
+`
+
+export const List = styled.ul`
+  padding-left: ${({ theme }) => theme.padding.normal};
+  color: ${({ theme }) => theme.color.white};
+`
+
+export const ListItem = styled.li`
+  margin-bottom: ${({ theme }) => theme.padding.small};
+`
+
+export const Link = styled.a`
+  color: ${({ theme }) => theme.color.primary};
+  text-decoration: none;
+`

packages/overmind-website/src/components/Workshop/index.tsx

@@ -0,0 +1,88 @@
+import * as React from 'react'
+import {
+  Wrapper,
+  Container,
+  Column,
+  Title,
+  Cell,
+  List,
+  ListItem,
+  Link,
+  Iframe,
+} from './elements'
+
+const Workshop: React.SFC = () => (
+  <Wrapper>
+    <Container>
+      <Column>
+        <Cell>
+          <Title>introduction</Title>
+          <Iframe
+            width="400"
+            height="225"
+            src="https://www.youtube.com/embed/xk9uS9yc4Ns"
+            frameBorder="0"
+            // @ts-ignore
+            allow="autoplay; encrypted-media"
+            allowFullscreen
+          />
+        </Cell>
+        <Cell>
+          <Title>resources</Title>
+          <List>
+            <ListItem>
+              <Link href="/guides">Overmind guides</Link>
+            </ListItem>
+            <ListItem>
+              <Link href="https://jsonplaceholder.typicode.com/" target="_new">
+                Jsonplaceholder
+              </Link>
+            </ListItem>
+            <ListItem>
+              <Link href="https://visionmedia.github.io/page.js/" target="_new">
+                Page js
+              </Link>
+            </ListItem>
+          </List>
+        </Cell>
+      </Column>
+      <Column>
+        <Cell>
+          <Title>tasks</Title>
+          <List>
+            <ListItem>Create a simple counter application</ListItem>
+            <ListItem>
+              In the same app, go grab some posts from <b>Jsonplaceholder</b>{' '}
+              and show 10 of them in a list
+            </ListItem>
+            <ListItem>
+              Introduce tabs to choose either of the example apps. Hook up a
+              router to the tabs, either using your favorite router or try using
+              the guide
+            </ListItem>
+            <ListItem>
+              In the list of posts, implement a click interaction on a post to
+              open a modal. This interaction should not only open the modal, but
+              also download information about the user from{' '}
+              <b>Jsonplaceholder</b> and display it
+            </ListItem>
+            <ListItem>Create a route for showing the user modal</ListItem>
+          </List>
+        </Cell>
+        <Cell>
+          <Title>feedback</Title>
+          Please provide your feedback by going to the following{' '}
+          <Link
+            href="https://spectrum.chat/?t=ddc61ecd-56c7-4c54-8029-c42118d52975"
+            target="_new"
+          >
+            Spectrum chat
+          </Link>{' '}
+          thread.
+        </Cell>
+      </Column>
+    </Container>
+  </Wrapper>
+)
+
+export default Workshop

packages/overmind-website/videos.json

@@ -1,9 +1,9 @@
 [
   {
-    "title": "My awesome video",
-    "shortName": "my-awesome-video",
-    "url": "https://www.youtube.com/watch?v=RA1_cCgEWws",
+    "title": "Overmind Introduction",
+    "shortName": "overmind-introduction",
+    "url": "https://www.youtube.com/watch?v=xk9uS9yc4Ns",
     "type": "beginner",
-    "duration": "45:00"
+    "duration": "19:52"
   }
 ]