diff --git a/packages/homepage/.eslintignore b/packages/homepage/.eslintignore new file mode 100644 index 00000000000..46509c25709 --- /dev/null +++ b/packages/homepage/.eslintignore @@ -0,0 +1,3 @@ +.cache/ +node_modules +public diff --git a/packages/homepage/gatsby-config.js b/packages/homepage/gatsby-config.js index 1cd6dfff11f..828275c175d 100644 --- a/packages/homepage/gatsby-config.js +++ b/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: { diff --git a/packages/homepage/package.json b/packages/homepage/package.json index 0a84763f7eb..88f1fb12a34 100644 --- a/packages/homepage/package.json +++ b/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", diff --git a/packages/homepage/src/components/Cube.js b/packages/homepage/src/components/Cube.js index dc1a27df20b..6ee45cff0f9 100644 --- a/packages/homepage/src/components/Cube.js +++ b/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 }) => diff --git a/packages/homepage/src/components/layout.js b/packages/homepage/src/components/layout.js index 4f03009c64a..4dd1bccf592 100644 --- a/packages/homepage/src/components/layout.js +++ b/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 (
diff --git a/packages/homepage/src/screens/home/Animation/Cubes.js b/packages/homepage/src/screens/home/Animation/Cubes.js index 061134bda87..4893cd23929 100644 --- a/packages/homepage/src/screens/home/Animation/Cubes.js +++ b/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 => { diff --git a/packages/homepage/src/screens/home/Animation/canvas/index.js b/packages/homepage/src/screens/home/Animation/canvas/index.js index 55805c6e9ee..7cd32d7638d 100644 --- a/packages/homepage/src/screens/home/Animation/canvas/index.js +++ b/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; } diff --git a/packages/homepage/src/screens/home/CycleFeature/index.js b/packages/homepage/src/screens/home/CycleFeature/index.js index f6b0b4f11cf..9cacc250283 100644 --- a/packages/homepage/src/screens/home/CycleFeature/index.js +++ b/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." /> @@ -422,7 +422,7 @@ export default class CycleFeatures extends React.PureComponent { noAnimation size={90} offset={40} - color={theme.secondary} + color={Theme.secondary} style={{ position: 'absolute', top: 0 }} /> @@ -467,7 +467,7 @@ export default class CycleFeatures extends React.PureComponent { Deploying... - + https://csb-921ywn9qrw-emlplxhibt.now.sh/ diff --git a/packages/homepage/src/screens/home/Frameworks/index.js b/packages/homepage/src/screens/home/Frameworks/index.js index 85cb7d05fd5..9d64823e1ee 100644 --- a/packages/homepage/src/screens/home/Frameworks/index.js +++ b/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 ( {template.name} - . + + .
Supported Loaders diff --git a/packages/homepage/src/screens/home/NPMFeature/SearchInput/Hit.js b/packages/homepage/src/screens/home/NPMFeature/SearchInput/Hit.js index 95cf0d4c162..bd7d8e4c667 100644 --- a/packages/homepage/src/screens/home/NPMFeature/SearchInput/Hit.js +++ b/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` diff --git a/packages/homepage/src/screens/home/NPMFeature/SearchInput/index.js b/packages/homepage/src/screens/home/NPMFeature/SearchInput/index.js index b9060f8f443..7b439db4639 100644 --- a/packages/homepage/src/screens/home/NPMFeature/SearchInput/index.js +++ b/packages/homepage/src/screens/home/NPMFeature/SearchInput/index.js @@ -47,7 +47,9 @@ export default class SearchInput extends React.PureComponent {
Dependency
Sandbox Count
- {this.state.hits.map((hit, i) => )} + {this.state.hits.map(hit => ( + + ))} 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 }) => ( - {title} + {title} {description} ); export default () => ( - - - Recent Publications - - You can follow{' '} - - our blog - {' '} - to stay up to date with new publications. - - - ". This is a list of unique features that distinguishes CodeSandbox.`} - url="https://medium.com/@compuives/whats-unique-about-codesandbox-f1791d867e48" - image={firstImage} - /> - - - - - + ( + + + Recent Publications + + You can follow{' '} + + our blog + {' '} + to stay up to date with new publications. + + + {edges.map(post => ( + + ))} + + + + )} + /> ); diff --git a/packages/homepage/src/screens/home/RecentPublications/parcel.png b/packages/homepage/src/screens/home/RecentPublications/parcel.png deleted file mode 100644 index 46b30d85ca9..00000000000 Binary files a/packages/homepage/src/screens/home/RecentPublications/parcel.png and /dev/null differ diff --git a/packages/homepage/src/screens/home/RecentPublications/unique.png b/packages/homepage/src/screens/home/RecentPublications/unique.png deleted file mode 100644 index eb7f01a9f1b..00000000000 Binary files a/packages/homepage/src/screens/home/RecentPublications/unique.png and /dev/null differ diff --git a/yarn.lock b/yarn.lock index 3374d110a17..29faad33adc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3393,6 +3393,14 @@ axios@^0.16.2: follow-redirects "^1.2.3" is-buffer "^1.1.5" +axios@^0.18.0: + version "0.18.0" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102" + integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI= + dependencies: + follow-redirects "^1.3.0" + is-buffer "^1.1.5" + axobject-query@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-0.1.0.tgz#62f59dbc59c9f9242759ca349960e7a2fe3c36c0" @@ -7134,7 +7142,7 @@ debug@2, debug@2.6.9, debug@^2.1.2, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, de dependencies: ms "2.0.0" -debug@3.1.0, debug@~3.1.0: +debug@3.1.0, debug@=3.1.0, debug@~3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/debug/-/debug-3.1.0.tgz#5bb5a0672628b64149566ba16819e61518c67261" dependencies: @@ -9209,6 +9217,13 @@ follow-redirects@^1.0.0, follow-redirects@^1.2.3: dependencies: debug "^3.1.0" +follow-redirects@^1.3.0: + version "1.6.1" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.6.1.tgz#514973c44b5757368bad8bddfe52f81f015c94cb" + integrity sha512-t2JCjbzxQpWvbhts3l6SH1DKzSrx8a+SsaVf4h6bG4kOXUuPYS/kg2Lr4gQSb7eemaHqJkOThF1BGyjlUkO1GQ== + dependencies: + debug "=3.1.0" + fontfaceobserver@^2.0.13: version "2.0.13" resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.0.13.tgz#47adbb343261eda98cb44db2152196ff124d3221" @@ -9639,6 +9654,14 @@ gatsby-source-filesystem@^2.0.10: valid-url "^1.0.9" xstate "^3.1.0" +gatsby-source-medium@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/gatsby-source-medium/-/gatsby-source-medium-2.0.2.tgz#d17c488c5525f1bfc5770d19380566f035f849a2" + integrity sha512-vIXNOAmxQd9Y6/n7a08ja7qfK8fFjsWIHAjo8S9hijy02C8XvYotvXkfc1S9GTFdudkrl409YFykMFFHKdodng== + dependencies: + "@babel/runtime" "^7.0.0" + axios "^0.18.0" + gatsby-transformer-remark@^2.1.15: version "2.1.15" resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-2.1.15.tgz#c744bebdcb94017409826011a3f78af8c1e0ff1c" @@ -20680,10 +20703,11 @@ terser-webpack-plugin@^1.0.2, terser-webpack-plugin@^1.1.0: webpack-sources "^1.1.0" worker-farm "^1.5.2" -terser@^3.10.13, terser@^3.8.1: - name uglify-es - version "3.11.0" - resolved "https://registry.yarnpkg.com/terser/-/terser-3.11.0.tgz#60782893e1f4d6788acc696351f40636d0e37af0" +terser@^3.14.1, uglify-es@^3.3.4, uglify-es@^3.3.7, uglify-es@^3.3.9: + name terser + version "3.14.1" + resolved "https://registry.yarnpkg.com/terser/-/terser-3.14.1.tgz#cc4764014af570bc79c79742358bd46926018a32" + integrity sha512-NSo3E99QDbYSMeJaEk9YW2lTg3qS9V0aKGlb+PlOrei1X02r1wSBHCNX/O+yeTRFSWPKPIGj6MqvvdqV4rnVGw== dependencies: commander "~2.17.1" source-map "~0.6.1" @@ -20698,6 +20722,15 @@ terser@^3.8.0: source-map "~0.6.1" source-map-support "~0.5.6" +terser@^3.8.1: + name uglify-es + version "3.11.0" + resolved "https://registry.yarnpkg.com/terser/-/terser-3.11.0.tgz#60782893e1f4d6788acc696351f40636d0e37af0" + dependencies: + commander "~2.17.1" + source-map "~0.6.1" + source-map-support "~0.5.6" + test-exclude@^4.2.1: version "4.2.1" resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-4.2.1.tgz#dfa222f03480bca69207ca728b37d74b45f724fa" @@ -21316,15 +21349,6 @@ ua-parser-js@^0.7.18, ua-parser-js@^0.7.9: version "0.7.18" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed" -uglify-es@^3.3.4, uglify-es@^3.3.7, uglify-es@^3.3.9, "uglify-es@npm:terser": - version "3.14.1" - resolved "https://registry.yarnpkg.com/terser/-/terser-3.14.1.tgz#cc4764014af570bc79c79742358bd46926018a32" - integrity sha512-NSo3E99QDbYSMeJaEk9YW2lTg3qS9V0aKGlb+PlOrei1X02r1wSBHCNX/O+yeTRFSWPKPIGj6MqvvdqV4rnVGw== - dependencies: - commander "~2.17.1" - source-map "~0.6.1" - source-map-support "~0.5.6" - uglify-js@3.3.x: version "3.3.28" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.28.tgz#0efb9a13850e11303361c1051f64d2ec68d9be06"