From 17a5b2a2e2df39e6960874ffc71d8cb6116634b5 Mon Sep 17 00:00:00 2001 From: Tuan Hoang Date: Thu, 14 Jun 2018 12:01:09 +1000 Subject: [PATCH 1/8] Keystone 4 website clean up and fixing stuff * Home page clean up, inclulding Header redesign * Doc page clean up, refactor the navigation * Mobile optimisations * A lot of minor polishes --- .../{ => Database}/application-updates.md | 0 website/.eslintrc.js | 43 + website/components/Container.js | 9 +- website/components/GithubButton.js | 89 + website/components/Header.js | 167 + website/components/Navbar/Item.js | 60 +- website/components/Navbar/index.js | 2 +- .../components/Navbar/utils/makeSection.js | 101 +- website/data/navigation.js | 4 +- website/gatsby-config.js | 18 +- website/package.json | 13 +- .../pages/components/home/AdminInterface.js | 26 +- .../components/home/CommunityResponse.js | 49 +- website/src/pages/components/home/Footer.js | 14 +- website/src/pages/components/home/Hero.js | 214 + .../src/pages/components/home/ValueProps.js | 172 +- .../src/pages/components/home/ValueProps2.js | 48 +- .../src/pages/components/home/WhereNext.js | 47 +- .../pages/components/home/header/Header.js | 136 - website/src/pages/index.js | 4 +- website/theme.js | 3 +- website/utils/typography.js | 37 +- website/yarn.lock | 9568 +++++++++++++++++ yarn.lock | 205 +- 24 files changed, 10463 insertions(+), 566 deletions(-) rename docs/documentation/{ => Database}/application-updates.md (100%) create mode 100644 website/.eslintrc.js create mode 100644 website/components/GithubButton.js create mode 100644 website/components/Header.js create mode 100644 website/src/pages/components/home/Hero.js delete mode 100644 website/src/pages/components/home/header/Header.js create mode 100644 website/yarn.lock diff --git a/docs/documentation/application-updates.md b/docs/documentation/Database/application-updates.md similarity index 100% rename from docs/documentation/application-updates.md rename to docs/documentation/Database/application-updates.md diff --git a/website/.eslintrc.js b/website/.eslintrc.js new file mode 100644 index 0000000000..6e7e4c1409 --- /dev/null +++ b/website/.eslintrc.js @@ -0,0 +1,43 @@ +module.exports = { + parser: 'babel-eslint', + env: { + browser: true, + es6: true, + node: true, + jest: true + }, + plugins: ['react', 'jest'], + rules: { + curly: ['error', 'multi-line'], + 'no-shadow': 'warn', + 'no-trailing-spaces': 'error', + 'no-undef': 'error', + 'no-underscore-dangle': 'error', + 'no-unused-expressions': 'error', + 'no-unused-vars': [ + 'error', + { + args: 'after-used', + ignoreRestSiblings: true, + vars: 'all', + }, + ], + 'object-curly-spacing': ['error', 'always'], + quotes: ['error', 'single', 'avoid-escape'], + 'react/jsx-boolean-value': 'warn', + 'react/jsx-no-undef': 'error', + 'react/jsx-uses-vars': 'error', + 'react/jsx-wrap-multilines': 'warn', + 'react/no-did-mount-set-state': 'warn', + 'react/no-did-update-set-state': 'warn', + 'react/no-unknown-property': 'warn', + 'react/react-in-jsx-scope': 'error', + 'react/self-closing-comp': 'warn', + 'react/sort-prop-types': 'warn', + 'react/react-in-jsx-scope': 'off', + semi: 'error', + strict: 'off', + 'quote-props': 'off', + }, + "extends": ["plugin:jest/recommended"] +}; diff --git a/website/components/Container.js b/website/components/Container.js index 08d94b3790..73f37e0370 100644 --- a/website/components/Container.js +++ b/website/components/Container.js @@ -6,12 +6,13 @@ const styles = { boxSizing: 'border-box', marginLeft: 'auto', marginRight: 'auto', - paddingLeft: '1em', - paddingRight: '1em', + paddingLeft: '1rem', + paddingRight: '1rem', + position: 'relative', [theme.breakpoint.mediumUp]: { - paddingLeft: '2em', - paddingRight: '2em', + paddingLeft: '2rem', + paddingRight: '2rem', }, }, }; diff --git a/website/components/GithubButton.js b/website/components/GithubButton.js new file mode 100644 index 0000000000..3a3f7a1927 --- /dev/null +++ b/website/components/GithubButton.js @@ -0,0 +1,89 @@ +import React from 'react'; + +type Props = { count: number, repo: string }; + +const StarButton = ({ count, repo }: Props) => ( +
+ + + Star + + 0 ? 1 : 0, + 'padding': '0.3125rem 0.625rem', + 'position': 'relative', + 'textDecoration': 'none', + 'transition': 'opacity 200ms', + + '&:before': { + border: '4px solid transparent', + borderRightColor: 'white', + content: ' ', + height: 0, + left: -8, + top: '50%', + marginTop: -4, + position: 'absolute', + width: 0, + }, + }} + href={`${repo}/stargazers`} + target="_blank"> + {count && count.toLocaleString()} + +
+); + +export default StarButton; diff --git a/website/components/Header.js b/website/components/Header.js new file mode 100644 index 0000000000..5f4e676594 --- /dev/null +++ b/website/components/Header.js @@ -0,0 +1,167 @@ +import React, { Component } from 'react'; +import { compose } from 'glamor'; +import fetch from 'unfetch'; +import Link from 'gatsby-link'; +import GithubButton from './GithubButton'; +import logo from '../images/logo-inverted.svg'; +import theme from '../theme'; + +const apiUrl = 'https://api.github.com/repos/keystonejs/keystone'; + +export default class Header extends Component { + state = { stars: 0 }; + + componentDidMount () { + this.getStarCount(); + } + + getStarCount = () => { + fetch(apiUrl) + .then(res => res.json()) + .then(data => { + const stars = data.stargazers_count; + this.setState({ stars }); + }) + .catch(err => { + console.error('Error retrieving data', err); + }); + }; + render () { + return ( +
+
+ KeystoneJS + KeystoneJS +
+ +
+ +
+
+ ); + } +} + +const styles = { + navBar: { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + color: 'white', + height: '3rem', + [theme.breakpoint.smallOnly]: { + flexWrap: 'wrap', + height: 'auto', + }, + }, + navBarSide: { + height: '3rem', + display: 'flex', + alignItems: 'center', + position: 'absolute', + top: 0, + }, + navBarSideLeft: { + left: 0, + [theme.breakpoint.mediumDown]: { + left: '2rem', + }, + }, + navBarSideRight: { + right: 0, + [theme.breakpoint.mediumDown]: { + right: '2rem', + }, + }, + navBarCenter: { + flex: 1, + listStyle: 'none', + margin: 0, + padding: 0, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + + [theme.breakpoint.smallOnly]: { + marginTop: '4rem', + flexWrap: 'noWrap', + overflow: 'scroll', + marginLeft: '-1rem', + marginRight: '-1rem', + padding: '0 1rem', + justifyContent: 'flex-start', + }, + }, + navItem: { + margin: '0 0.625em', + padding: 0, + lineHeight: 1.4, + }, + navItemLink: { + color: 'inherit', + opacity: 0.75, + textDecoration: 'none', + whiteSpace: 'noWrap', + ':hover': { + opacity: 1, + }, + }, + logo: { + height: '3rem', + margin: '0 1rem 0 0', + }, + logoText: { + fontSize: '1.3em', + }, +}; diff --git a/website/components/Navbar/Item.js b/website/components/Navbar/Item.js index 8124e2dd00..b6cfe0aacb 100644 --- a/website/components/Navbar/Item.js +++ b/website/components/Navbar/Item.js @@ -1,20 +1,21 @@ import React, { PropTypes } from 'react'; import Link from 'gatsby-link'; -export default function Item ({ depth, title, url }) { +export default function Item ({ title, url, isActive, depth }) { return ( -
  • - - {title} - -
    • + + {title} + ); -}; +} Item.propTypes = { depth: PropTypes.number.isRequired, @@ -24,18 +25,11 @@ Item.propTypes = { /* eslint quote-props: ["error", "as-needed"] */ const styles = { - // item - item: { - fontWeight: 300, - margin: '0 0 2px', - // marginLeft: '20px', - }, link: { - // borderBottomRightRadius: 3, - // borderTopRightRadius: 3, + display: 'flex', + alignItems: 'center', color: 'white', - display: 'block', - padding: `0.5em 1rem`, + padding: '0.3125rem 1rem', textDecoration: 'none', transition: 'opacity 100ms', @@ -43,13 +37,25 @@ const styles = { backgroundColor: 'rgba(255, 255, 255, 0.1)', }, }, - link__active: { + linkActive: { backgroundColor: 'rgba(0, 0, 0, 0.15)', - opacity: 1, + fontWeight: '600', + ':hover': { + backgroundColor: 'rgba(0, 0, 0, 0.15)', + }, }, - // depth - link__2: { - paddingLeft: '2rem', + depth__1: { + fontSize: '1rem', + marginLeft: '1.875rem', + marginTop: '0.3125rem', + }, + depth__2: { + fontSize: '0.85rem', + marginLeft: '2.875rem', + borderLeft: '2px solid rgba(255,255,255,0.2)', + }, + depth__2__active: { + borderColor: 'rgba(255,255,255,0.8)', }, }; diff --git a/website/components/Navbar/index.js b/website/components/Navbar/index.js index 9865be9bb9..ff45208d4c 100644 --- a/website/components/Navbar/index.js +++ b/website/components/Navbar/index.js @@ -52,7 +52,6 @@ class Navbar extends Component { GitHub - */}
    {sections.map(s => ( @@ -60,6 +59,7 @@ class Navbar extends Component { ))}
    + */}
    - +
    ); diff --git a/website/components/Navbar/utils/makeSection.js b/website/components/Navbar/utils/makeSection.js index dee3a5a905..3d600fb5b2 100644 --- a/website/components/Navbar/utils/makeSection.js +++ b/website/components/Navbar/utils/makeSection.js @@ -2,13 +2,11 @@ import React from 'react'; import Link from 'gatsby-link'; import Item from '../Item'; -export default function makeSection (currentPath, layer) { +export default function makeSection (currentPath, layer, pathname) { return layer.map((section, idx) => { - const locationArray = window.location.pathname.split('/'); + const locationArray = pathname.split('/'); const currentSection = locationArray[locationArray.length - 1]; - console.log('Current section', currentSection); - const menuItems = section.items.map((item, i) => { const newPath = currentPath + section.slug; diff --git a/website/templates/template-doc-layout.js b/website/templates/template-doc-layout.js index 00d389e9d2..025419bfdb 100644 --- a/website/templates/template-doc-layout.js +++ b/website/templates/template-doc-layout.js @@ -60,7 +60,7 @@ export default class DocumentLayout extends React.Component { return (
    - + Date: Thu, 14 Jun 2018 12:25:28 +1000 Subject: [PATCH 3/8] Add React Helmet --- website/src/pages/components/home/Hero.js | 5 ++++- website/src/pages/index.js | 9 ++++++++- 2 files changed, 12 insertions(+), 2 deletions(-) diff --git a/website/src/pages/components/home/Hero.js b/website/src/pages/components/home/Hero.js index aa75db2d94..2f432aa632 100644 --- a/website/src/pages/components/home/Hero.js +++ b/website/src/pages/components/home/Hero.js @@ -41,6 +41,7 @@ const Intro = () => ( Try the demo @@ -58,7 +59,9 @@ const LatestRelease = () => ( + style={{ color: 'white' }} + target="_blank" + > See what's new diff --git a/website/src/pages/index.js b/website/src/pages/index.js index c16cf77adf..f552aff9df 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import Helmet from 'react-helmet'; import Hero from './components/home/Hero'; import ValueProps from './components/home/ValueProps'; @@ -12,6 +13,12 @@ export default class HomePage extends Component { render () { return (
    + + + + + + @@ -22,4 +29,4 @@ export default class HomePage extends Component {
    ); } -}; +} From b77b7004820ecb47571113a1f2e6cd8cceb26f7d Mon Sep 17 00:00:00 2001 From: Tuan Hoang Date: Thu, 14 Jun 2018 14:38:17 +1000 Subject: [PATCH 4/8] Add Twitter Butotn --- website/components/TwitterButton.js | 41 ++++++++++++++++ website/gatsby-config.js | 2 +- website/src/html.js | 47 +++++++++++++++++++ .../components/home/CommunityResponse.js | 45 +++++++++++------- website/src/pages/components/home/Hero.js | 31 ++++++------ 5 files changed, 132 insertions(+), 34 deletions(-) create mode 100644 website/components/TwitterButton.js create mode 100644 website/src/html.js diff --git a/website/components/TwitterButton.js b/website/components/TwitterButton.js new file mode 100644 index 0000000000..58071de2ae --- /dev/null +++ b/website/components/TwitterButton.js @@ -0,0 +1,41 @@ +import React from 'react'; + +const TwitterButton = ({ href }) => ( + +); + +export default TwitterButton; diff --git a/website/gatsby-config.js b/website/gatsby-config.js index f3748dcaac..37d78fb5fe 100644 --- a/website/gatsby-config.js +++ b/website/gatsby-config.js @@ -5,6 +5,7 @@ module.exports = { plugins: [ 'gatsby-plugin-react-helmet', 'gatsby-plugin-glamor', + 'gatsby-transformer-remark', { resolve: 'gatsby-source-filesystem', options: { @@ -19,7 +20,6 @@ module.exports = { path: `${__dirname}/../fields/types`, }, }, - 'gatsby-transformer-remark', { resolve: 'gatsby-plugin-typography', options: { diff --git a/website/src/html.js b/website/src/html.js new file mode 100644 index 0000000000..0e1d0a6800 --- /dev/null +++ b/website/src/html.js @@ -0,0 +1,47 @@ +import React from 'react'; + +let stylesStr; +if (process.env.NODE_ENV === 'production') { + try { + stylesStr = require('!raw-loader!../public/styles.css'); + } catch (e) { + console.log(e); + } +} + +module.exports = class HTML extends React.Component { + render () { + let css; + if (process.env.NODE_ENV === 'production') { + css = ( +