diff --git a/lerna.json b/lerna.json new file mode 100644 index 0000000..a11d4e8 --- /dev/null +++ b/lerna.json @@ -0,0 +1,7 @@ +{ + "lerna": "2.4.0", + "packages": [ + "packages/*" + ], + "version": "0.0.0" +} diff --git a/package.json b/package.json index 8f8005c..e7a5cf0 100644 --- a/package.json +++ b/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 (http://aquigorka.com/)", - "Chad Ostrowski (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" } } diff --git a/packages/thicket-intro/.babelrc b/packages/thicket-intro/.babelrc new file mode 100644 index 0000000..167eaf5 --- /dev/null +++ b/packages/thicket-intro/.babelrc @@ -0,0 +1,3 @@ +{ + "extends": "react-static/.babelrc" +} diff --git a/packages/thicket-intro/.eslintrc.js b/packages/thicket-intro/.eslintrc.js new file mode 100644 index 0000000..1db3d94 --- /dev/null +++ b/packages/thicket-intro/.eslintrc.js @@ -0,0 +1,7 @@ +module.exports = { + extends: 'react-tools', + rules: { + "react/no-unescaped-entities": "off" + "no-confusing-arrow": "off" + } +} diff --git a/packages/thicket-intro/.gitignore b/packages/thicket-intro/.gitignore new file mode 100644 index 0000000..d4b284b --- /dev/null +++ b/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* diff --git a/packages/thicket-intro/.npmignore b/packages/thicket-intro/.npmignore new file mode 100644 index 0000000..0ca39c0 --- /dev/null +++ b/packages/thicket-intro/.npmignore @@ -0,0 +1,3 @@ +node_modules +dist +.DS_Store diff --git a/packages/thicket-intro/package.json b/packages/thicket-intro/package.json new file mode 100644 index 0000000..72384a2 --- /dev/null +++ b/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" + } +} diff --git a/packages/thicket-intro/public/robots.txt b/packages/thicket-intro/public/robots.txt new file mode 100644 index 0000000..7d329b1 --- /dev/null +++ b/packages/thicket-intro/public/robots.txt @@ -0,0 +1 @@ +User-agent: * diff --git a/packages/thicket-intro/src/App/GifCreator/index.js b/packages/thicket-intro/src/App/GifCreator/index.js new file mode 100644 index 0000000..2b5391b --- /dev/null +++ b/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}) => ( + + {children} + +) + +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 ( + + + +

Let's get started. Turn off that WiFi!

+

+ 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. +

+ {online + ? Create GIF + : + } + + + ) + } +} diff --git a/packages/thicket-intro/src/App/GifCreator/no-wifi.svg b/packages/thicket-intro/src/App/GifCreator/no-wifi.svg new file mode 100644 index 0000000..4809b1d --- /dev/null +++ b/packages/thicket-intro/src/App/GifCreator/no-wifi.svg @@ -0,0 +1,12 @@ + +Vector +Created using Figma + + + + + + + + + diff --git a/packages/thicket-intro/src/App/Hero/Nav/citrusbyte.svg b/packages/thicket-intro/src/App/Hero/Nav/citrusbyte.svg new file mode 100644 index 0000000..e2e0c5e --- /dev/null +++ b/packages/thicket-intro/src/App/Hero/Nav/citrusbyte.svg @@ -0,0 +1,62 @@ + +Group +Created using Figma + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/thicket-intro/src/App/Hero/Nav/index.js b/packages/thicket-intro/src/App/Hero/Nav/index.js new file mode 100644 index 0000000..be9b3cd --- /dev/null +++ b/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 () => ( + +) diff --git a/packages/thicket-intro/src/App/Hero/arrow.svg b/packages/thicket-intro/src/App/Hero/arrow.svg new file mode 100644 index 0000000..eae6d6b --- /dev/null +++ b/packages/thicket-intro/src/App/Hero/arrow.svg @@ -0,0 +1,12 @@ + +Icon +Created using Figma + + + + + + + + + diff --git a/packages/thicket-intro/src/App/Hero/earth.svg b/packages/thicket-intro/src/App/Hero/earth.svg new file mode 100644 index 0000000..e91c8a2 --- /dev/null +++ b/packages/thicket-intro/src/App/Hero/earth.svg @@ -0,0 +1,38 @@ + +Earth +Created using Figma + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/thicket-intro/src/App/Hero/index.js b/packages/thicket-intro/src/App/Hero/index.js new file mode 100644 index 0000000..7f65330 --- /dev/null +++ b/packages/thicket-intro/src/App/Hero/index.js @@ -0,0 +1,71 @@ +import React from 'react' +import styled, { keyframes } from 'styled-components' +import Nav from './Nav' +import stars from './stars.svg' +import earth from './earth.svg' +import mars from './mars.svg' +import arrow from './arrow.svg' + +const Hero = styled.header` + height: 100vh; + background-image: url(${mars}), url(${earth}), url(${stars}); + background-repeat: no-repeat, no-repeat, no-repeat; + background-position: center bottom, 75% 75%, 100% 100%; + background-size: 102%, 1em, cover; + + display: flex; + flex-direction: column; + justify-content: space-around; +` + +const PinToTop = styled.div` + position: absolute; + top: 0; +` + +// this is vertically centered by virtue of Hero's 'flex'-related properties +const VerticallyCenter = styled.div` + margin: 0 auto; + padding: 0 1em; + max-width: 30em; + text-align: center; + h1 { + margin-top: 0; + } +` + +const bounce = keyframes` + 0%, 62%, 70%, 82%, 100% { + transform: translateY(0em); + } + 66% { + transform: translateY(1em); + } + 74% { + transform: translateY(0.5em); + } +` +const Arrow = styled.img` + height: 1em; + animation: ${bounce} 4s infinite; +` + +export default ({ scrollTo }) => ( + + +