diff --git a/www/src/argyle.png b/www/src/argyle.png deleted file mode 100644 index cd21d6c501615..0000000000000 Binary files a/www/src/argyle.png and /dev/null differ diff --git a/www/src/assets/graphql.svg b/www/src/assets/graphql.svg new file mode 100644 index 0000000000000..be89c781481f0 --- /dev/null +++ b/www/src/assets/graphql.svg @@ -0,0 +1,21 @@ + + + graphql logo + + + + + + + + + + + + + + + + + + diff --git a/www/src/assets/js.svg b/www/src/assets/js.svg new file mode 100644 index 0000000000000..3e30ca3932f00 --- /dev/null +++ b/www/src/assets/js.svg @@ -0,0 +1,4 @@ + + + + diff --git a/www/src/assets/logos.js b/www/src/assets/logos.js new file mode 100644 index 0000000000000..de43cee3ae050 --- /dev/null +++ b/www/src/assets/logos.js @@ -0,0 +1,4 @@ +export JSIcon from "./js.svg" +export GraphQLIcon from "./graphql.svg" +export WebpackIcon from "./webpack.svg" +export ReactJSIcon from "./react.svg" diff --git a/www/src/assets/react.svg b/www/src/assets/react.svg new file mode 100644 index 0000000000000..be398a96e2056 --- /dev/null +++ b/www/src/assets/react.svg @@ -0,0 +1,11 @@ + + + react js logo + + + + + + + + diff --git a/www/src/assets/webpack.svg b/www/src/assets/webpack.svg new file mode 100644 index 0000000000000..a518dc869ea2b --- /dev/null +++ b/www/src/assets/webpack.svg @@ -0,0 +1,10 @@ + + + + + diff --git a/www/src/components/card-headline.js b/www/src/components/card-headline.js new file mode 100644 index 0000000000000..5ee1dbea2a1a6 --- /dev/null +++ b/www/src/components/card-headline.js @@ -0,0 +1,27 @@ +import presets from "../utils/presets" +import { rhythm, scale, options } from "../utils/typography" + +const CardHeadline = ({ children }) => +

+ {children} +

+ +export default CardHeadline diff --git a/www/src/components/card.js b/www/src/components/card.js new file mode 100644 index 0000000000000..68831ee752475 --- /dev/null +++ b/www/src/components/card.js @@ -0,0 +1,57 @@ +import presets from "../utils/presets" +import { rhythm, scale, options } from "../utils/typography" +import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" + +const Card = ({ children }) => +
+
+ {children} +
+
+ +export default Card diff --git a/www/src/components/cards.js b/www/src/components/cards.js new file mode 100644 index 0000000000000..00bdf19f81bd7 --- /dev/null +++ b/www/src/components/cards.js @@ -0,0 +1,19 @@ +import presets from "../utils/presets" +import { rhythm, scale, options } from "../utils/typography" +import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" + +const Cards = ({ children }) => +
+ {children} +
+ +export default Cards diff --git a/www/src/components/cta-button.js b/www/src/components/cta-button.js new file mode 100644 index 0000000000000..a2696faa10782 --- /dev/null +++ b/www/src/components/cta-button.js @@ -0,0 +1,51 @@ +import Link from "gatsby-link" +import { rhythm, scale, options } from "../utils/typography" +import presets from "../utils/presets" + +import { css } from "glamor" + +let stripeAnimation = css.keyframes({ + "0%": { backgroundPosition: `0 0` }, + "100%": { backgroundPosition: `30px 60px` }, +}) + +const CtaButton = ({ to, overrideCSS, children }) => + + {children} + + +export default CtaButton diff --git a/www/src/components/diagram.js b/www/src/components/diagram.js new file mode 100644 index 0000000000000..3e44fe5f6b4b9 --- /dev/null +++ b/www/src/components/diagram.js @@ -0,0 +1,313 @@ +import React from "react" +import { css } from "glamor" + +import { rhythm, scale, options } from "../utils/typography" +import presets from "../utils/presets" +import logo from "../gatsby-negative.svg" +import { GraphQLIcon, ReactJSIcon } from "../assets/logos" +import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" +import FuturaParagraph from "../components/futura-paragraph" +import TechWithIcon from "../components/tech-with-icon" + +const stripeColor = `249, 245, 255, 1` +const stripeSize = 15 +const stripeAnimation = css.keyframes({ + "0%": { + backgroundPosition: `${rhythm(stripeSize)} ${rhythm(stripeSize * 2)}`, + }, + "100%": { backgroundPosition: `0 0` }, +}) +const stripeBg = { + backgroundColor: presets.sidebar, + backgroundSize: `${rhythm(stripeSize)} ${rhythm(stripeSize)}`, + backgroundImage: `linear-gradient(45deg, rgba(${stripeColor}) 25%, transparent 25%, transparent 50%, rgba(${stripeColor}) 50%, rgba(${stripeColor}) 75%, transparent 75%, transparent)`, + animation: `${stripeAnimation} 14s linear infinite`, +} +const lineAnimation = css.keyframes({ + to: { + strokeDashoffset: 1000, + }, +}) + +const Segment = ({ className, children }) => +
+ {children} +
+ +const SegmentTitle = ({ children }) => +

+ {children} +

+ +const VerticalLine = () => + + + + +const box = { + border: `1px solid #f4ecfe`, + borderRadius: presets.radiusLg, + padding: `${rhythm(1)} ${rhythm(1)} 0`, + background: presets.sidebar, +} + +const borderAndBoxShadow = { + border: `1px solid ${presets.veryLightPurple}`, + background: `#fff`, + width: `100%`, + boxShadow: `0 5px 15px rgba(0,0,0,0.035)`, + borderRadius: presets.radius, +} + +const SourceItems = ({ children }) => +
+ {children} +
+ +const boxPadding = { padding: `${rhythm(1 / 3)} ${rhythm(2 / 4)}` } + +const SourceItem = ({ children }) => +
+
+ {children} +
+
+ +const ItemTitle = ({ children }) => +

+ {children} +

+ +const ItemDescription = ({ children }) => + + {children} + + +const Gatsby = ({ children }) => +
+ + + + powered by + + + GraphQL + + +
+ +const Diagram = ({ containerCSS }) => +
+

How Gatsby works

+
+ + Gatsby lets you build blazing-fast sites with your data, + whatever the source. Liberate your sites from legacy CMSs and fly into + the future. + +
+ + + Data Sources + + + CMSs + + Contentful, Drupal, WordPress & more + + + + Markdown + Documentation, Posts, etc. + + + Data + + APIs, Databases, YAML, JSON, CSV & more + + + + + + + + Build +
+ + + +
+ + HTML · CSS ·{` `} + + React + + +
+ +
+ + + + + Deploy +
+ Static Web Host + + Amazon S3, Netlify, Github Pages, Surge.sh, Aerobatic, Now.sh… + +
+ +
+ +export default Diagram diff --git a/www/src/components/discord.js b/www/src/components/discord.js new file mode 100644 index 0000000000000..0a24dccfcc231 --- /dev/null +++ b/www/src/components/discord.js @@ -0,0 +1,27 @@ +const DiscordIcon = () => + + + + + + + +export default DiscordIcon diff --git a/www/src/components/futura-paragraph.js b/www/src/components/futura-paragraph.js new file mode 100644 index 0000000000000..188b7ee87f4eb --- /dev/null +++ b/www/src/components/futura-paragraph.js @@ -0,0 +1,28 @@ +import { rhythm, scale, options } from "../utils/typography" +import presets from "../utils/presets" + +const FuturaParagraph = ({ children }) => +

+ {children} +

+ +export default FuturaParagraph diff --git a/www/src/components/gutters.js b/www/src/components/gutters.js new file mode 100644 index 0000000000000..a5d3354fc9882 --- /dev/null +++ b/www/src/components/gutters.js @@ -0,0 +1,7 @@ +import presets from "../utils/presets" +import { rhythm } from "../utils/typography" + +export const vP = rhythm(presets.gutters.default) +export const vPHd = rhythm(presets.gutters.HdR) +export const vPVHd = rhythm(presets.gutters.VHdR) +export const vPVVHd = rhythm(presets.gutters.VVHdR) diff --git a/www/src/components/masthead.js b/www/src/components/masthead.js new file mode 100644 index 0000000000000..17098fd3c25f5 --- /dev/null +++ b/www/src/components/masthead.js @@ -0,0 +1,206 @@ +import Link from "gatsby-link" +import ArrowForwardIcon from "react-icons/lib/md/arrow-forward" + +import { rhythm, scale, options } from "../utils/typography" +import presets from "../utils/presets" +import CtaButton from "./cta-button" +import FuturaParagraph from "./futura-paragraph" +import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" + +const vPOff = rhythm(presets.gutters.default - presets.logoOffset) +const vPHdOff = rhythm(presets.gutters.HdR - presets.logoOffset) +const vPVHdOff = rhythm(presets.gutters.VHdR - presets.logoOffset) +const vPVVHdOff = rhythm(presets.gutters.VVHdR - presets.logoOffset) + +const cover = { + top: 0, + left: 0, + right: 0, + bottom: 0, +} + +const MastheadBgRightPoly = ({ fill }) => + + +const MastheadBgRightGroup = ({ brightOff, darkOff, cssClassName }) => + + + + + + + + + +const MastheadBg = () => +
+
+ + + {/* :-/ */} + {/* works for phones */} + + {/* works for ipad/pro portrait, but not for any phone in portrait mode */} + {/* *} + {/* works for large screens */} + + + + + +
+ +const MastheadContent = () => +
+

+ Blazing-fast static site generator for React +

+ + Get Started + {` `} + + +
+ +const Masthead = () => +
+ + +
+ +export default Masthead diff --git a/www/src/components/sidebar-body.js b/www/src/components/sidebar-body.js index 362e2b1ec4cbf..6d4393a458593 100644 --- a/www/src/components/sidebar-body.js +++ b/www/src/components/sidebar-body.js @@ -38,6 +38,7 @@ class SidebarBody extends React.Component { fontStyle: headerStyle, textTransform: headerTextTransform, marginTop: index === 0 ? 0 : false, + color: presets.brandLight, }} > {section.title} @@ -59,7 +60,17 @@ class SidebarBody extends React.Component { // If the last character is a * then the doc page is still in draft let changedTitle = title - let linkStyle = {} + let linkStyle = { + "&&": { + borderBottom: `none`, + boxShadow: `none`, + ":hover": { + color: `inherit`, + borderBottom: `none`, + boxShadow: `none`, + }, + }, + } if (title.slice(-1) === `*`) { changedTitle = title.slice(0, -1) linkStyle = { @@ -68,12 +79,16 @@ class SidebarBody extends React.Component { "&&": { color: `rgba(0, 0, 0, 0.4)`, borderBottomColor: presets.veryLightPurple, + borderBottom: `none`, boxShadow: `inset 0 -5px 0px 0px ${presets.veryLightPurple}`, + boxShadow: `none`, fontStyle: `italic`, ":hover": { color: `inherit`, borderBottomColor: presets.lightPurple, boxShadow: `inset 0 -5px 0px 0px ${presets.lightPurple}`, + borderBottom: `none`, + boxShadow: `none`, }, }, } diff --git a/www/src/components/tech-with-icon.js b/www/src/components/tech-with-icon.js new file mode 100644 index 0000000000000..3aff70463c1e3 --- /dev/null +++ b/www/src/components/tech-with-icon.js @@ -0,0 +1,20 @@ +import React from "react" + +const TechWithIcon = ({ icon, height, children }) => { + let h = height ? height : `1.2em` + + return ( + + {children}  + + ) +} + +export default TechWithIcon diff --git a/www/src/gatsby-negative.svg b/www/src/gatsby-negative.svg index 1eafdc235e21d..fc48eec17e36e 100644 --- a/www/src/gatsby-negative.svg +++ b/www/src/gatsby-negative.svg @@ -1,6 +1,3 @@ - - - diff --git a/www/src/gatsby-positive.svg b/www/src/gatsby-positive.svg index 4f918628b6afb..6dbc9461d0780 100644 --- a/www/src/gatsby-positive.svg +++ b/www/src/gatsby-positive.svg @@ -1,6 +1,3 @@ - - - +
  • + + {children} + +
    • + const MobileNavItem = ({ linkTo, title, children }) => + + {children} +
    + {title} +
    + + const socialIconsStyles = { + color: presets.brandLight, + [presets.Desktop]: { + color: this.props.location.pathname !== `/` ? false : `white`, + fontSize: scale(0).fontSize, + }, + } return (
    @@ -78,20 +153,21 @@ module.exports = React.createClass({ />
    @@ -128,9 +212,8 @@ module.exports = React.createClass({ css={{ ...scale(2 / 5), display: `inline-block`, - lineHeight: rhythm(1.5), - verticalAlign: `middle`, margin: 0, + verticalAlign: `middle`, }} > Gatsby @@ -140,120 +223,55 @@ module.exports = React.createClass({ css={{ display: `none`, [presets.Tablet]: { - ...scale(-1 / 5), - display: `inline-block`, - lineHeight: rhythm(1.5), + display: `block`, margin: 0, padding: 0, listStyle: `none`, - marginLeft: rhythm(1), - verticalAlign: `bottom`, - position: `relative`, - top: 1, }, }} > -
  • - - Docs - -
    • -
  • Docs + Tutorial + Community + Blog + +
    • -
  • + {` `} + + - - Community - -
    • -
  • + + - - Blog - -
    • - - - Github - + + +
    - +
    Docs
    - - +     + -
    Tutorial
    - - +     + -
    Community
    - - +     + -
    Blog
    - +
    ) diff --git a/www/src/pages/index.js b/www/src/pages/index.js index bbfa9cb2c3000..6cdec0c37cb37 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -1,288 +1,164 @@ import React from "react" import Link from "gatsby-link" + +import presets from "../utils/presets" +import colors from "../utils/colors" import { rhythm, scale, options } from "../utils/typography" +import { JSIcon, WebpackIcon, ReactJSIcon, GraphQLIcon } from "../assets/logos" +import { vP, vPHd, vPVHd, vPVVHd } from "../components/gutters" import Container from "../components/container" +import Masthead from "../components/masthead" +import Cards from "../components/cards" +import Card from "../components/card" +import CardHeadline from "../components/card-headline" +import Diagram from "../components/diagram" import BlogPostPreviewItem from "../components/blog-post-preview-item" -import presets from "../utils/presets" -import colors from "../utils/colors" +import FuturaParagraph from "../components/futura-paragraph" +import CtaButton from "../components/cta-button" +import TechWithIcon from "../components/tech-with-icon" -const mobileBackgroundImage = { - backgroundImage: ` - linear-gradient(-45deg, #744c9e 30%, transparent 30%), - linear-gradient(-45deg, #9d7cbf 40%, transparent 40%), - linear-gradient(45deg, #f5f3f7 33%, white 33%)`, -} -const phabletBackgroundImage = { - backgroundImage: ` - linear-gradient(-45deg, #744c9e 32.5%, transparent 32.5%), - linear-gradient(-45deg, #9d7cbf 47.5%, transparent 47.5%), - linear-gradient(45deg, #f5f3f7 37.5%, white 37.5%)`, -} -const desktopBackgroundImage = { - backgroundImage: ` - linear-gradient(-45deg, #744c9e 40%, transparent 40%), - linear-gradient(-45deg, #9d7cbf 50%, transparent 50%), - linear-gradient(45deg, #f5f3f7 33%, white 33%)`, -} -const FuturaParagraph = ({ children }) => -

    - {children} -

    - -const headerHeight = `55px` -const ctaButtonStyles = { - ...scale(2 / 5), - display: `inline-block`, - fontFamily: options.headerFontFamily.join(`,`), - padding: `${rhythm(1 / 2)} ${rhythm(1)}`, - // Increase specificity - "&&": { - border: `1px solid #744c9e`, - boxShadow: `none`, - color: `#744c9e`, - ":hover": { background: `#744c9e`, color: `white` }, - }, -} const IndexRoute = React.createClass({ render() { console.log(this.props) const blogPosts = this.props.data.allMarkdownRemark return (
    +
    -
    -

    + + Modern web tech without the headache + + Enjoy all the power of the latest web technologies –{` `} + React.js,{` `} + Webpack,{` `} + modern JavaScript and CSS and more – all setup and waiting for + you to start building. + + + + Bring your own data + + Gatsby’s rich data plugin ecosystem lets you build sites with + the data you want – from one or many sources: Pull data from + headless CMSs, SaaS services, APIs, databases, your file system + & more directly into your pages using{` `} + GraphQL. + + + + Scale to the entire internet + + Gatsby.js is Internet Scale. Forget complicated deploys with + databases and servers and their expensive, time-consuming setup + costs, maintenance, and scaling fears. Gatsby.js builds your + site as “static” files which can be deployed easily on dozens of + services. + + + + + Future-proof your website + + + Don't build a website with last decade's tech. The future of the + web is mobile, JavaScript and APIs—the {` `} + JAMstack. Every website is a + web app and every web app is a website. Gatsby.js is the + universal JavaScript framework you’ve been waiting for. + + + + + + Static + + {` `} + Progressive Web Apps + + + Gatsby.js is a static PWA (Progressive Web App) generator. You + get code and data splitting out-of-the-box. Gatsby loads an HTML + file that’s a server rendered version of your React.js page then + makes it live with JavaScript. Code and data for other pages get + preloaded so clicking around the site feels incredibly fast. + + + + Speed past the competition + + Gatsby.js builds the fastest possible website. Instead of + waiting to generate pages when requested, pre-build pages and + lift them into a global cloud of servers—ready to be delivered + instantly to your users wherever they are. + + + + - Blazing-fast static site generator for React -

    -
    - - Get Started - -
    -
    -
    - -
    -
    -
    -

    Modern web tech without the headache

    - - Enjoy all the power of the latest web technologies. React.js, - webpack, modern JavaScript and CSS and more are all setup and - waiting for you to install and start building. - -
    -
    -

    Bring your own data

    - - Gatsby’s rich data plugin ecosystem lets you build sites with - the data you want. Integrate data from one or many sources: - headless CMSs, SaaS services, APIs, databases, your file - system, and more. Pull data directly into your pages using - GraphQL. - -
    -
    -
    -
    -

    Scale to the entire internet

    - - Gatsby.js is Internet Scale. Forget complicated deploys with - databases and servers and their expensive, time-consuming - setup costs, maintenance, and scaling fears. Gatsby.js builds - your site as “static” files which can be deployed easily on - dozens of services. - -
    -
    -

    Future-proof your website

    - - Don't build a website with last decade's tech. The future of - the web is mobile, JavaScript and APIs—the {` `} - JAMstack. Every website is - a web app and every web app is a website. Gatsby.js is the - universal JavaScript framework you’ve been waiting for. - -
    -
    -
    -
    -

    - Static Progressive Web Apps -

    - - Gatsby.js is a static PWA (Progressive Web App) generator. You - get code and data splitting out-of-the-box. Gatsby loads an - HTML file that’s a server rendered version of your React.js - page then makes it live with JavaScript. Code and data for - other pages get preloaded so clicking around the site feels - incredibly fast. - -
    -
    -

    Speed past the competition

    - - Gatsby.js builds the fastest possible website. Instead of - waiting to generate pages when requested, pre-build pages and - lift them into a global cloud of servers—ready to be delivered - instantly to your users wherever they are. - -
    -
    -
    -
    -

    How Gatsby works

    - -
    -
    -

    Curious yet?

    - - It only takes a few minutes to get up and running! - - - Get Started - -
    -     -
    - -

    + +
    +

    Curious yet?

    + + It only takes a few minutes to get up and running! + + + Get Started + +
    +     +

    + +
    - Latest from the Gatsby blog - - {blogPosts.edges.map(({ node }) => - - )} - + + {` `} +

    + Latest from the Gatsby blog +

    + {blogPosts.edges.map(({ node }) => + + )} +     +
    +
    ) @@ -309,7 +185,7 @@ export const pageQuery = graphql` } allMarkdownRemark( sort: { order: DESC, fields: [frontmatter___date] } - limit: 2 + limit: 3 filter: { frontmatter: { draft: { ne: true } } fileAbsolutePath: { regex: "/blog/" } diff --git a/www/src/utils/presets.js b/www/src/utils/presets.js index 8bad387cb2db3..4f021431b9d02 100644 --- a/www/src/utils/presets.js +++ b/www/src/utils/presets.js @@ -18,4 +18,22 @@ module.exports = { purple: colors.a[13], lightPurple: colors.b[2], veryLightPurple: colors.b[0], + sidebar: `#fcfaff`, + brand: `#744C9E`, + brandLight: `#9D7CBF`, + brandLighter: `#F5F3F7`, // @SachaG's original color + //brandLighter: `#f9f5ff`, + brandDark: `#744C9E`, + // bolder palette by @ArchieHicklin + // @see https://github.com/gatsbyjs/gatsby/issues/1173#issuecomment-309415650 + accent: `#ffb238`, // "Mustard" + radius: 2, + radiusLg: 4, + gutters: { + default: 1.5, + HdR: 2.5, + VHdR: 3.5, + VVHdR: 4.5, + }, + logoOffset: 1.7, } diff --git a/www/src/utils/typography.js b/www/src/utils/typography.js index 0b080fd1f62be..73f7a3a65d528 100644 --- a/www/src/utils/typography.js +++ b/www/src/utils/typography.js @@ -58,7 +58,7 @@ const options = { // background: `hsla(23, 60%, 97%, 1)`, background: colors.a[0], border: `1px solid ${colors.a[1]}`, - borderRadius: `3px`, + borderRadius: `${presets.radius}px`, padding: rhythm(options.blockMarginBottom), marginBottom: rhythm(options.blockMarginBottom), overflow: `auto`,