Merge pull request #35 from citrusbyte/experiment-splash

Create Experiment Intro page/app

lerna.json

@@ -0,0 +1,7 @@
+{
+  "lerna": "2.4.0",
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.0.0"
+}

package.json

@@ -1,48 +1,5 @@
 {
-  "name": "thicket",
-  "description": "Create GIFs and share them with your friends, without any middlemen",
-  "keywords": [
-    "gif",
-    "vine",
-    "offline first",
-    "progressive web app",
-    "decentralized web"
-  ],
-  "contributors": [
-    "Gorka Ludlow <[email protected]> (http://aquigorka.com/)",
-    "Chad Ostrowski <[email protected]> (https://chadoh.com/)"
-  ],
-  "version": "0.1.0",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/citrusbyte/thicket"
-  },
-  "homepage": "https://thicket.citrusbyte.com",
-  "dependencies": {
-    "gifshot": "^0.3.2",
-    "ipfs": "^0.26.0",
-    "ipfs-pubsub-room": "^0.3.0",
-    "localforage": "^1.5.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
-    "react-router-dom": "^4.2.2",
-    "react-scripts": "1.0.14",
-    "react-spinkit": "^3.0.0",
-    "safe-buffer": "^5.1.1"
-  },
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test --env=jsdom",
-    "eject": "react-scripts eject",
-    "deploy": "scripts/deploy.sh"
-  },
-  "engines": {
-    "node": "8.6.0",
-    "npm": "5.4.2"
-  },
   "devDependencies": {
-    "surge": "^0.19.0"
+    "lerna": "^2.4.0"
   }
 }

packages/thicket-intro/.babelrc

@@ -0,0 +1,3 @@
+{
+  "extends": "react-static/.babelrc"
+}

packages/thicket-intro/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: 'react-tools',
+  rules: {
+    "react/no-unescaped-entities": "off"
+    "no-confusing-arrow": "off"
+  }
+}

packages/thicket-intro/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

packages/thicket-intro/.npmignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

packages/thicket-intro/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "react-static-starter",
+  "version": "1.0.0",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "react-static start",
+    "build": "react-static build",
+    "serve": "serve dist -p 3000"
+  },
+  "dependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-static": "^1.x.x",
+    "styled-components": "2.2.0"
+  },
+  "devDependencies": {
+    "eslint-config-react-tools": "^1.0.6",
+    "eslint-plugin-import": "^2.7.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-react": "^7.4.0",
+    "serve": "^6.1.0"
+  }
+}

packages/thicket-intro/public/robots.txt

@@ -0,0 +1 @@
+User-agent: *

packages/thicket-intro/src/App/GifCreator/index.js

@@ -0,0 +1,119 @@
+import React from 'react'
+import styled from 'styled-components'
+
+import { dark } from '../colors'
+import noWifi from './no-wifi.svg'
+
+const Wrapper = styled.div`
+  min-height: 100vh;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+`
+
+const Explanation = styled.div`
+  margin: 0 auto;
+  padding 1em;
+  max-width: 30em;
+`
+
+const Button = styled.button`
+  background-color: transparent;
+  border: 1px solid white;
+  color: white;
+  font-size: 1em;
+  margin: 1em;
+	padding: 0.5em 2.5em;
+`
+
+const GreyTooltipButton = styled(Button)`
+  border: 1px solid darkgrey;
+  color: darkgrey;
+  position: relative;
+  z-index: 2;
+  &:before, &:after {
+    visibility: hidden;
+    opacity: 0;
+    pointer-events: none;
+  }
+  &:before {
+    position: absolute;
+    padding: 0.5em 0;
+    width: 100%;
+    background-color: ${dark};
+    border: 1px solid white;
+    content: '${props => props.tip}';
+    color: white;
+
+    margin-top: 10px;
+    top: 100%;
+    left: 0;
+  }
+  &:after {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -10px;
+    width: 0;
+    border-bottom: 10px solid white;
+    border-right: 10px solid transparent;
+    border-left: 10px solid transparent;
+    content: " ";
+    font-size: 0;
+    line-height: 0;
+  }
+  &:hover {
+    &:before, &:after {
+      visibility: visible;
+      opacity: 1;
+    }
+  }
+`
+
+const DisabledButton = ({ tip, children}) => (
+  <GreyTooltipButton disabled tip={tip}>
+    {children}
+  </GreyTooltipButton>
+)
+
+export default class GifCreator extends React.Component {
+
+  state = { online: true }
+
+  componentDidMount() {
+    window.addEventListener('online', this.goOnline, false)
+    window.addEventListener('offline', this.goOffline, false)
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('online', this.goOnline, false)
+    window.removeEventListener('offline', this.goOffline, false)
+  }
+
+  goOnline = () => this.setState({ online: true })
+  goOffline = () => this.setState({ online: false })
+
+  render() {
+    const { id } = this.props
+    const { online } = this.state
+
+    return (
+      <Wrapper id={id}>
+        <Explanation>
+          <img src={noWifi} alt="" style={{ height: '2.5em' }}/>
+          <h2>Let's get started. Turn off that WiFi!</h2>
+          <p>
+            Before we can begin, please turn off your WiFi connection. This may
+            sound crazy, but Thicket is actually built around the idea of Offline
+            First. Once you turn off your connection, click the button below.
+          </p>
+          {online
+            ? <DisabledButton tip="🙅 📶">Create GIF</DisabledButton>
+            : <Button>Create GIF</Button>
+          }
+        </Explanation>
+      </Wrapper>
+    )
+  }
+}

packages/thicket-intro/src/App/Hero/Nav/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import styled from 'styled-components'
+import citrusbyte from './citrusbyte.svg'
+
+const Nav = styled.nav`
+  padding: 1em 1em 0;
+`
+
+export default () => (
+  <Nav>
+    <a href="https://citrusbyte.com">
+      <img src={citrusbyte} alt="Citrusbyte" style={{ height: '1.5em' }} />
+    </a>
+  </Nav>
+)