From cd07afc5f6ae2398846650997e0bb0e1f4bbe71b Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 12:47:16 -0700 Subject: [PATCH 01/16] First iteration on new website * Purpleize * Start to new homepage * New Container component so can do full width bleeds + move sidebars to left. * SVG icon --- CONTRIBUTING.md | 4 +- docs/docs/api-specification.md | 4 +- www/gatsby-config.js | 2 +- www/src/components/container.js | 23 +++++++++++ www/src/components/sidebar-body.js | 7 +++- www/src/components/tutorial-sidebar.js | 2 +- www/src/gatsby-negative.svg | 16 ++++++++ www/src/gatsby-positive.svg | 11 +++++ www/src/layouts/index.js | 33 ++++++++------- www/src/pages/blog/index.js | 16 ++------ www/src/pages/docs/bound-action-creators.js | 10 +++-- www/src/pages/docs/browser-apis.js | 9 +++-- www/src/pages/docs/index.js | 9 +++-- www/src/pages/docs/node-apis.js | 9 +++-- www/src/pages/docs/ssr-apis.js | 9 +++-- www/src/pages/index.js | 45 ++++++++++++++++++--- www/src/pages/tutorial.js | 7 ++-- www/src/templates/template-blog-post.js | 16 ++------ www/src/templates/template-docs-markdown.js | 9 +++-- www/src/templates/template-docs-packages.js | 7 ++-- www/src/utils/presets.js | 4 ++ www/src/utils/typography.js | 14 +++---- 22 files changed, 183 insertions(+), 83 deletions(-) create mode 100644 www/src/components/container.js create mode 100644 www/src/gatsby-negative.svg create mode 100644 www/src/gatsby-positive.svg diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 262b8743dccf1..e806b3bb9984d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,4 +1,6 @@ -# How to contribute +--- +title: How to contribute +--- ## Filing an issue diff --git a/docs/docs/api-specification.md b/docs/docs/api-specification.md index 588e957207be0..0fd5963d0d43b 100644 --- a/docs/docs/api-specification.md +++ b/docs/docs/api-specification.md @@ -1,4 +1,6 @@ -# API specification +--- +title: API specification +--- Gatsby's APIs are tailored conceptually to some extent after React.js which makes sense as users of Gatsby will necessarily also be users of React.js. I diff --git a/www/gatsby-config.js b/www/gatsby-config.js index 8b85e3c3dba17..97d4a020b0b70 100644 --- a/www/gatsby-config.js +++ b/www/gatsby-config.js @@ -31,7 +31,7 @@ module.exports = { resolve: `gatsby-remark-responsive-image`, options: { maxWidth: 690, - backgroundColor: `#f7f0eb`, + backgroundColor: `#ffffff`, }, }, { diff --git a/www/src/components/container.js b/www/src/components/container.js new file mode 100644 index 0000000000000..1ee600f5d7c36 --- /dev/null +++ b/www/src/components/container.js @@ -0,0 +1,23 @@ +import React from "react" +import presets from "../utils/presets" + +import { rhythm, scale } from "../utils/typography" + +export default ({ children, className, hasSideBar = true }) => +
+ {children} +
diff --git a/www/src/components/sidebar-body.js b/www/src/components/sidebar-body.js index 95de16bd8419d..2c8b6e0eba179 100644 --- a/www/src/components/sidebar-body.js +++ b/www/src/components/sidebar-body.js @@ -15,7 +15,12 @@ class SidebarBody extends React.Component { ? scale(2 / 5).fontSize : scale(1 / 5).fontSize return ( -
+
{menu.map(section =>
+
{menu.map(section =>
+ + + + + + + + + diff --git a/www/src/gatsby-positive.svg b/www/src/gatsby-positive.svg new file mode 100644 index 0000000000000..4f918628b6afb --- /dev/null +++ b/www/src/gatsby-positive.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js index 8b5e7292f90ff..c22d618f665cb 100644 --- a/www/src/layouts/index.js +++ b/www/src/layouts/index.js @@ -6,7 +6,7 @@ import PencilIcon from "react-icons/lib/go/pencil" import PersonIcon from "react-icons/lib/md/person" import Helmet from "react-helmet" -import logo from "../../static/images/gatsby-monogram.jpg" +import logo from "../gatsby-negative.svg" import typography, { rhythm, scale } from "../utils/typography" import SidebarBody from "../components/sidebar-body" import TutorialSidebarBody from "../components/tutorial-sidebar" @@ -53,13 +53,14 @@ module.exports = React.createClass({ />
edge.node ) return ( -
-

Blog

+ +

Blog

{blogPosts.map(post => { const avatar = post.frontmatter.author.avatar.childImageSharp.responsiveResolution @@ -83,7 +75,7 @@ class BlogPostsIndex extends React.Component {
) })} -
+ ) } } diff --git a/www/src/pages/docs/bound-action-creators.js b/www/src/pages/docs/bound-action-creators.js index be9ae1bf51577..04e882c831269 100644 --- a/www/src/pages/docs/bound-action-creators.js +++ b/www/src/pages/docs/bound-action-creators.js @@ -2,13 +2,15 @@ import React from "react" import Functions from "../../components/function-list" import { rhythm, scale } from "../../utils/typography" +import Container from "../../components/container" class ActionCreatorsDocs extends React.Component { render() { - console.log(this.props) return ( -
-

Bound Action Creators

+ +

+ Bound Action Creators +

Gatsby uses {` `} @@ -30,7 +32,7 @@ class ActionCreatorsDocs extends React.Component {

Reference

-
+ ) } } diff --git a/www/src/pages/docs/browser-apis.js b/www/src/pages/docs/browser-apis.js index 108103ea6f2e5..605eb7e0d9ed9 100644 --- a/www/src/pages/docs/browser-apis.js +++ b/www/src/pages/docs/browser-apis.js @@ -2,12 +2,15 @@ import React from "react" import Functions from "../../components/function-list" import { rhythm, scale } from "../../utils/typography" +import Container from "../../components/container" class BrowserAPIDocs extends React.Component { render() { return ( -
-

Gatsby Browser APIs

+ +

+ Gatsby Browser APIs +

APIs

    {this.props.data.allDocumentationJs.edges.map(({ node }, i) => @@ -20,7 +23,7 @@ class BrowserAPIDocs extends React.Component {

    Reference

    -
+ ) } } diff --git a/www/src/pages/docs/index.js b/www/src/pages/docs/index.js index 1565541734ddd..f00fc3269017f 100644 --- a/www/src/pages/docs/index.js +++ b/www/src/pages/docs/index.js @@ -3,13 +3,16 @@ import Link from "gatsby-link" import typography, { rhythm } from "../../utils/typography" import SidebarBody from "../../components/sidebar-body" +import Container from "../../components/container" import presets from "../../utils/presets" class IndexRoute extends React.Component { render() { return ( -
-

Getting started

+ +

+ Getting started +

Gatsby lets you transform plain text into dynamic blogs and websites using the @@ -99,7 +102,7 @@ class IndexRoute extends React.Component {

Documentation

-
+ ) } } diff --git a/www/src/pages/docs/node-apis.js b/www/src/pages/docs/node-apis.js index b0c6935b2bf57..a47dadbf46783 100644 --- a/www/src/pages/docs/node-apis.js +++ b/www/src/pages/docs/node-apis.js @@ -2,12 +2,15 @@ import React from "react" import Functions from "../../components/function-list" import { rhythm, scale } from "../../utils/typography" +import Container from "../../components/container" class NodeAPIDocs extends React.Component { render() { return ( -
-

Gatsby Node APIs

+ +

+ Gatsby Node APIs +

Gatsby gives plugins and site builders many APIs for controlling your site. @@ -24,7 +27,7 @@ class NodeAPIDocs extends React.Component {

Reference

-
+ ) } } diff --git a/www/src/pages/docs/ssr-apis.js b/www/src/pages/docs/ssr-apis.js index 6b52fbd778983..3e1e2528757d5 100644 --- a/www/src/pages/docs/ssr-apis.js +++ b/www/src/pages/docs/ssr-apis.js @@ -2,12 +2,15 @@ import React from "react" import Functions from "../../components/function-list" import { rhythm, scale } from "../../utils/typography" +import Container from "../../components/container" class SSRAPIs extends React.Component { render() { return ( -
-

Gatsby Server Rendering APIs

+ +

+ Gatsby Server Rendering APIs +

APIs

    {this.props.data.allDocumentationJs.edges.map(({ node }, i) => @@ -20,7 +23,7 @@ class SSRAPIs extends React.Component {

    Reference

    -
+ ) } } diff --git a/www/src/pages/index.js b/www/src/pages/index.js index c9914ee4913bf..fb5f905ba91db 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -1,14 +1,49 @@ import React from "react" import Link from "gatsby-link" +import { rhythm, scale, options } from "../utils/typography" +import Container from "../components/container" +import presets from "../utils/presets" const IndexRoute = React.createClass({ render() { return ( -
-

Gatsby website 0.0.0.3

- - Docs - +
+ +

+ Blazing fast React.js static site generator +

+
+ + Get Started + +
+
) }, diff --git a/www/src/pages/tutorial.js b/www/src/pages/tutorial.js index fef71620b17a5..2a66192b4ba95 100644 --- a/www/src/pages/tutorial.js +++ b/www/src/pages/tutorial.js @@ -1,9 +1,10 @@ import React from "react" import Link from "gatsby-link" +import Container from "../components/container" export default () => -
-

Gatsby.js Tutorial

+ +

Gatsby.js Tutorial

Hi! We’re so happy you decided to try using Gatsby. This tutorial has (or @@ -34,4 +35,4 @@ export default () => put the finishing touches on a website project. -

+ diff --git a/www/src/templates/template-blog-post.js b/www/src/templates/template-blog-post.js index 2d5f898d10287..5f0c1f60c2dd7 100644 --- a/www/src/templates/template-blog-post.js +++ b/www/src/templates/template-blog-post.js @@ -3,6 +3,7 @@ import Helmet from "react-helmet" import presets from "../utils/presets" import typography, { rhythm, scale } from "../utils/typography" +import Container from "../components/container" const BlogPostTemplate = React.createClass({ render() { @@ -24,16 +25,7 @@ const BlogPostTemplate = React.createClass({ {children}

return ( -
+ {/* Add long list of social meta tags */} @@ -166,7 +158,7 @@ const BlogPostTemplate = React.createClass({ __html: this.props.data.markdownRemark.html, }} /> -
+ ) }, }) diff --git a/www/src/templates/template-docs-markdown.js b/www/src/templates/template-docs-markdown.js index ee649d10129fc..69f5808e7bd9c 100644 --- a/www/src/templates/template-docs-markdown.js +++ b/www/src/templates/template-docs-markdown.js @@ -1,18 +1,21 @@ import React from "react" import { rhythm } from "../utils/typography" +import Container from "../components/container" const DocsTemplate = React.createClass({ render() { return ( -
-

{this.props.data.markdownRemark.frontmatter.title}

+ +

+ {this.props.data.markdownRemark.frontmatter.title} +

-
+ ) }, }) diff --git a/www/src/templates/template-docs-packages.js b/www/src/templates/template-docs-packages.js index f237276aa72fa..b8334e8fe6814 100644 --- a/www/src/templates/template-docs-packages.js +++ b/www/src/templates/template-docs-packages.js @@ -2,12 +2,13 @@ import React from "react" import { rhythm, scale } from "../utils/typography" import presets from "../utils/presets" +import Container from "../components/container" const DocsTemplate = React.createClass({ render() { const packageName = this.props.data.markdownRemark.fields.title return ( -
+ -
+ ) }, }) diff --git a/www/src/utils/presets.js b/www/src/utils/presets.js index b2e79d819ea8c..c5d6edb209d99 100644 --- a/www/src/utils/presets.js +++ b/www/src/utils/presets.js @@ -9,4 +9,8 @@ module.exports = { Desktop: `@media (min-width: 1000px)`, hd: `(min-width: 1200px)`, Hd: `@media (min-width: 1200px)`, + maxWidth: 36, + maxWidthWithSidebar: 26, + purple: `#744c9e`, + lightPurple: `#ede2fe`, } diff --git a/www/src/utils/typography.js b/www/src/utils/typography.js index 44840f3b4c64a..b118796c430a6 100644 --- a/www/src/utils/typography.js +++ b/www/src/utils/typography.js @@ -1,5 +1,6 @@ import Typography from "typography" import CodePlugin from "typography-plugin-code" +import presets from "./presets" import { MOBILE_MEDIA_QUERY, TABLET_MEDIA_QUERY, @@ -17,9 +18,6 @@ const options = { plugins: [new CodePlugin()], overrideStyles: ({ rhythm, scale }, options) => { return { - body: { - background: `#f7f0eb`, - }, "h1,h2,h4,h5,h6": { lineHeight: 1.075, marginTop: rhythm(1.5), @@ -64,7 +62,7 @@ const options = { lineHeight: 1.32, }, "pre code span.highlight-code-line": { - background: `pink`, + background: `#f3cbbe`, marginLeft: rhythm(-options.blockMarginBottom), paddingRight: rhythm(options.blockMarginBottom), borderLeft: `${rhythm( @@ -78,11 +76,13 @@ const options = { color: `inherit`, textDecoration: `none`, transition: `background 0.4s ease-out`, - borderBottom: `1px solid #d7e7ee`, - boxShadow: `inset 0 -5px 0px 0px #d7e7ee`, + borderBottom: `1px solid ${presets.lightPurple}`, + boxShadow: `inset 0 -5px 0px 0px ${presets.lightPurple}`, + // borderBottom: `1px solid #d7e7ee`, + // boxShadow: `inset 0 -5px 0px 0px #d7e7ee`, }, ".main-body a:hover": { - background: `#d7e7ee`, + background: presets.lightPurple, }, ".main-body a.anchor": { color: `inherit`, From 7964301bd760fd8ce2b6b2ad7ffd607c4e7e89e0 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 13:03:44 -0700 Subject: [PATCH 02/16] Lighten mobile tab bar background purple more --- www/src/layouts/index.js | 2 +- www/src/utils/presets.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/www/src/layouts/index.js b/www/src/layouts/index.js index c22d618f665cb..2c07fe6851069 100644 --- a/www/src/layouts/index.js +++ b/www/src/layouts/index.js @@ -288,7 +288,7 @@ module.exports = React.createClass({ right: 0, height: rhythm(2.5), // borderTop: `1px solid ${presets.purple}`, - background: presets.lightPurple, + background: presets.veryLightPurple, fontFamily: typography.options.headerFontFamily.join(`,`), [presets.Tablet]: { display: `none`, diff --git a/www/src/utils/presets.js b/www/src/utils/presets.js index c5d6edb209d99..09f1ce257da29 100644 --- a/www/src/utils/presets.js +++ b/www/src/utils/presets.js @@ -13,4 +13,5 @@ module.exports = { maxWidthWithSidebar: 26, purple: `#744c9e`, lightPurple: `#ede2fe`, + veryLightPurple: `#f5eefe`, } From 7f1e682d7cbf2838622872dac08b901dec5db3de Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 13:06:10 -0700 Subject: [PATCH 03/16] Update the theme_color to our purple --- www/gatsby-config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/gatsby-config.js b/www/gatsby-config.js index 97d4a020b0b70..5da2517cd1fd5 100644 --- a/www/gatsby-config.js +++ b/www/gatsby-config.js @@ -63,7 +63,7 @@ module.exports = { short_name: `GatsbyJS`, start_url: `/`, background_color: `#f7f0eb`, - theme_color: `#a2466c`, + theme_color: `#744c9e`, display: `minimal-ui`, }, }, From 0fb263719737c6722d8fa54c2f6b36c8a6a90b22 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 13:06:46 -0700 Subject: [PATCH 04/16] Use presets --- www/gatsby-config.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/www/gatsby-config.js b/www/gatsby-config.js index 5da2517cd1fd5..f03e7b644fd72 100644 --- a/www/gatsby-config.js +++ b/www/gatsby-config.js @@ -1,3 +1,5 @@ +import presets from "./src/utils/presets" + module.exports = { siteMetadata: { title: `Gatsby`, @@ -63,7 +65,7 @@ module.exports = { short_name: `GatsbyJS`, start_url: `/`, background_color: `#f7f0eb`, - theme_color: `#744c9e`, + theme_color: presets.purple, display: `minimal-ui`, }, }, From 377cde029c42f2a649cf5488db4fe043740e2ae4 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 13:27:51 -0700 Subject: [PATCH 05/16] Use latest node --- www/.nvmrc | 1 + 1 file changed, 1 insertion(+) create mode 100644 www/.nvmrc diff --git a/www/.nvmrc b/www/.nvmrc new file mode 100644 index 0000000000000..3cb432e906db6 --- /dev/null +++ b/www/.nvmrc @@ -0,0 +1 @@ +v8.1.1 From 7fa7cc5cecebeb7cc8877462abba4b8f8209df73 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 17:04:52 -0700 Subject: [PATCH 06/16] Use generated colors --- www/src/css/prism-coy.css | 70 ++++++++++++++++++------------------- www/src/gatsby-negative.svg | 2 +- www/src/layouts/index.js | 3 +- www/src/pages/index.js | 11 +++++- www/src/utils/presets.js | 8 +++-- www/src/utils/typography.js | 43 +++++++++++++++++++---- 6 files changed, 89 insertions(+), 48 deletions(-) diff --git a/www/src/css/prism-coy.css b/www/src/css/prism-coy.css index b254116d9216c..0921e58078d45 100644 --- a/www/src/css/prism-coy.css +++ b/www/src/css/prism-coy.css @@ -4,46 +4,46 @@ * @author Tim Shedor */ -.token.comment, -.token.block-comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: #52ad9f; -} +/* .token.comment, */ +/* .token.block-comment, */ +/* .token.prolog, */ +/* .token.doctype, */ +/* .token.cdata { */ + /* color: #52ad9f; */ +/* } */ -.token.punctuation { - color: #5F6364; -} +/* .token.punctuation { */ + /* color: #5F6364; */ +/* } */ -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.function-name, -.token.constant, -.token.symbol, -.token.deleted { - color: #a285d8; -} +/* .token.property, */ +/* .token.tag, */ +/* .token.boolean, */ +/* .token.number, */ +/* .token.function-name, */ +/* .token.constant, */ +/* .token.symbol, */ +/* .token.deleted { */ + /* color: #a285d8; */ +/* } */ -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.function, -.token.builtin, -.token.inserted { - color: #a2466c; -} +/* .token.selector, */ +/* .token.attr-name, */ +/* .token.string, */ +/* .token.char, */ +/* .token.function, */ +/* .token.builtin, */ +/* .token.inserted { */ + /* color: #a2466c; */ +/* } */ -.token.operator, .token.entity, .token.url, .token.variable { - color: #c18b99; -} +/* .token.operator, .token.entity, .token.url, .token.variable { */ + /* color: #c18b99; */ +/* } */ -.token.atrule, .token.attr-value, .token.keyword, .token.class-name { - color: #a285d8; -} +/* .token.atrule, .token.attr-value, .token.keyword, .token.class-name { */ + /* color: #a285d8; */ +/* } */ .token.regex, .token.important { color: #d88489; diff --git a/www/src/gatsby-negative.svg b/www/src/gatsby-negative.svg index 1eafdc235e21d..ea9bcbc3a3672 100644 --- a/www/src/gatsby-negative.svg +++ b/www/src/gatsby-negative.svg @@ -2,7 +2,7 @@ + fill="#5c2965" width="1200px" height="1200px" viewBox="0 0 1200 1200" enable-background="new 0 0 1200 1200" xml:space="preserve"> diff --git a/www/src/pages/index.js b/www/src/pages/index.js index fb5f905ba91db..989f97ea3d390 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -3,11 +3,20 @@ import Link from "gatsby-link" import { rhythm, scale, options } from "../utils/typography" import Container from "../components/container" import presets from "../utils/presets" +import colors from "../utils/colors" const IndexRoute = React.createClass({ render() { return ( -
+

Date: Wed, 14 Jun 2017 17:06:08 -0700 Subject: [PATCH 07/16] remove nvmrc --- www/.nvmrc | 1 - 1 file changed, 1 deletion(-) delete mode 100644 www/.nvmrc diff --git a/www/.nvmrc b/www/.nvmrc deleted file mode 100644 index 3cb432e906db6..0000000000000 --- a/www/.nvmrc +++ /dev/null @@ -1 +0,0 @@ -v8.1.1 From 8a05ace2b44fd4892ac5d9c2b5f5e2f5d2026613 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 17:18:58 -0700 Subject: [PATCH 08/16] Add missing colors module + argyle background pattern --- www/src/argyle.png | Bin 0 -> 1769 bytes www/src/pages/colors.js | 25 ++++++++++++++ www/src/pages/index.js | 3 ++ www/src/utils/colors.js | 73 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 101 insertions(+) create mode 100644 www/src/argyle.png create mode 100644 www/src/pages/colors.js create mode 100644 www/src/utils/colors.js diff --git a/www/src/argyle.png b/www/src/argyle.png new file mode 100644 index 0000000000000000000000000000000000000000..cd21d6c501615c0956e576e1fa4628deeaa1af5e GIT binary patch literal 1769 zcmVh3V8Sc00s?7 zL_t(|UY(iia@#r#gh7gwD4C*U*|L)~C$^LKf5+1cIWz(6Ow*m|j}C&_pvA|fBpT`a z^8R0%$e_}ZR#fVHR9WeWN`|c0E5n`kK`(X2fF^&YhXW-`7L;Bh%|S0s#!Px8Sc)%t zX|`nTpq3s);2*=ApBmNDPDHxZXn$F`1ARva^IP9+a=)!?FH3_jYa=uo1IF@QSpcEl z{;{%REdR(Gaqg6%z*t>bqq~Wx8T4XnM&WUD+D5FSe77}5J|0fKmhL#?psbOTmu9uuTj z2A7h(z$&H8u^v^|e8cr@U&?Dlg^)>D|5*tBvKc%-)l-=`4?B_8x^*l{?^=!aBg15?05} z@;sK=dt!5?6VGFry>@wTt ztma_$o{q)fc!GI6Gpp@Ztiq?|8Y;a^d&=W&GLI|0Ot&pt-Gag~qIb<>Evv#YqBq>+ zS}=}B^DPaGUcMG7s)YkQlH8nQO6rh@l8VWayker)QskcaxEYxiNMHY%K0aP4} z#C2H`j7SHJ!iB;os14+S)xNG9D2+4%tJ{(C0Vw3^0jL~%B0 zyOa9Thz${4x4*J}*E;2tJ}1cpL6 zQmmGyFcNxMX8B*_P%`qD#_DTh^vahA@?j)I_)?*ATpvb=-FD?8R`;A#R<4MA<=Jwa zK0{+=-`*L$^3o|6{2Cd(+NCqR+14smj63+y!((c$7>lMlRbp1);Q(+9=mif5!s@nE zdeyP)QG02@7M(AAyeU@OjnPYtX!Uj`q!^%8B&72j zv`TmQmUDN=YCglM?h#r|0lwwLciq9lx16B|R*YW3F%W2y!9^^46KOK|v2M&|slf7> z*iavuS06IRV5sY?5&S3|ORF*efYjczJZ9P3?<93gERTuP`{IQ+8@4={VzD;4o? zQ-x!a^!nz@h(C7?$B5p2psL~SCC6lC_PXaT-;_p1Z&mM~t&+@ROJXQ2&M|Aka@9&? z?*|oKWgZvtrYmdb_i9qJ_a)?}Ilw%gh+CEYi7#p%6Qh^?x1I;cacPnZ^f01StPBYq zGlHuu_3%s5I^&hhZ2Dt0sl`Y{GyZI*C$G(o>IIb0qCXrBJ044K+It%A zD33|poa-8eSuc%p(d)v#L;_ + +

Colors

+
+
+ {colors.a.map(a => +
+ )} +
+
+ {colors.b.map(a => +
+ )} +
+
+ {colors.c.map(a => +
+ )} +
+
+ diff --git a/www/src/pages/index.js b/www/src/pages/index.js index 989f97ea3d390..a62c213300d3e 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -4,6 +4,7 @@ import { rhythm, scale, options } from "../utils/typography" import Container from "../components/container" import presets from "../utils/presets" import colors from "../utils/colors" +import fabricPattern from "../argyle.png" const IndexRoute = React.createClass({ render() { @@ -12,6 +13,8 @@ const IndexRoute = React.createClass({ css={{ // background: `#744c9e`, background: presets.purple, + backgroundImage: `url("${fabricPattern}")`, + // backgroundImage: `url("http://www.transparenttextures.com/patterns/argyle.png")`, // backgroundImage: `linear-gradient(135deg,${colors.b[14]},${colors // .b[13]},${colors.b[12]})`, paddingBottom: rhythm(1), diff --git a/www/src/utils/colors.js b/www/src/utils/colors.js new file mode 100644 index 0000000000000..9aca6aa931aa9 --- /dev/null +++ b/www/src/utils/colors.js @@ -0,0 +1,73 @@ +const colorStr = ` +#281505 +#042b1b +#2e1740 +#3a2407 +#073e2e +#452054 +#48340a +#0d4f43 +#5c2965 +#53450e +#165e5a +#743272 +#5c5815 +#216c72 +#8a3d7d +#636a1e +#2f798a +#9f4984 +#697d2a +#4084a1 +#b3568b +#6f8f39 +#538eb6 +#c36490 +#75a14b +#6998c9 +#d17494 +#7db15f +#7fa1d9 +#dd859a +#86c076 +#96abe6 +#e598a1 +#91ce8e +#adb6f0 +#ecabaa +#a0daa6 +#c2c2f7 +#f1beb6 +#b1e5be +#d6cffb +#f4d1c6 +#c6eed5 +#e7defe +#f8e4d9 +#def6ea +#f5eefe +#fcf6f0 +` + +const colors = { a: [], b: [], c: [] } + +let pointer = `a` +colorStr.split(`\n`).reverse().forEach(c => { + if (c === ``) return + console.log(c, `pointer`, pointer) + colors[pointer].push(c) + switch (pointer) { + case `a`: + pointer = `b` + break + case `b`: + pointer = `c` + break + case `c`: + pointer = `a` + break + } +}) + +console.log(colors) +module.exports = colors From 6aa5dce4d32ade1be68a2aa7a70c11fb0c37cf5d Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 17:23:34 -0700 Subject: [PATCH 09/16] Try debugging why things not building --- www/gatsby-node.js | 1 + 1 file changed, 1 insertion(+) diff --git a/www/gatsby-node.js b/www/gatsby-node.js index 65183be16913b..cc22eb0728d36 100644 --- a/www/gatsby-node.js +++ b/www/gatsby-node.js @@ -31,6 +31,7 @@ exports.createPages = ({ graphql, boundActionCreators }) => { } ` ).then(result => { + console.log(JSON.stringify(result, null, 4)) if (result.errors) { reject(result.errors) } From ac0e833d16b94b250d7b5d6364124e9d1fd0f6c8 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 17:31:31 -0700 Subject: [PATCH 10/16] Don't pull in presets --- www/gatsby-config.js | 4 +--- www/gatsby-node.js | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/www/gatsby-config.js b/www/gatsby-config.js index f03e7b644fd72..411cc48e48349 100644 --- a/www/gatsby-config.js +++ b/www/gatsby-config.js @@ -1,5 +1,3 @@ -import presets from "./src/utils/presets" - module.exports = { siteMetadata: { title: `Gatsby`, @@ -65,7 +63,7 @@ module.exports = { short_name: `GatsbyJS`, start_url: `/`, background_color: `#f7f0eb`, - theme_color: presets.purple, + theme_color: `#5c2965`, display: `minimal-ui`, }, }, diff --git a/www/gatsby-node.js b/www/gatsby-node.js index cc22eb0728d36..65183be16913b 100644 --- a/www/gatsby-node.js +++ b/www/gatsby-node.js @@ -31,7 +31,6 @@ exports.createPages = ({ graphql, boundActionCreators }) => { } ` ).then(result => { - console.log(JSON.stringify(result, null, 4)) if (result.errors) { reject(result.errors) } From 821d832421992e169dd1bab74f42a245844437af Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 19:00:04 -0700 Subject: [PATCH 11/16] Simple grid front page + first draft for copy --- www/src/pages/index.js | 166 +++++++++++++++++++++++++++++++---------- 1 file changed, 125 insertions(+), 41 deletions(-) diff --git a/www/src/pages/index.js b/www/src/pages/index.js index a62c213300d3e..7e743d5975610 100644 --- a/www/src/pages/index.js +++ b/www/src/pages/index.js @@ -9,51 +9,135 @@ import fabricPattern from "../argyle.png" const IndexRoute = React.createClass({ render() { return ( -
- -

- Blazing fast React.js static site generator -

-
- +
+ +

- Get Started - + Blazing-fast React.js static site generator +

+
+ + Get Started + +
+ +
+ +
+
+

Modern web tech without the headache

+

+ Enjoy all the power of the latest web technologies without + the headache. React.js, webpack, modern JavaScript and + CSS and more are 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. 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 Progessive 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 slow + geography-bound servers, your site is lifted into a global + cloud of servers ready to be delivered instantly to your users + wherever they are. +

+
From bdc1905954c028d0b50cfffce0b0f56617391746 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 22:16:40 -0700 Subject: [PATCH 12/16] Slip in a joinPath fix --- packages/gatsby/src/utils/webpack.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gatsby/src/utils/webpack.config.js b/packages/gatsby/src/utils/webpack.config.js index cdb1f245a5802..8adee966cf9ba 100644 --- a/packages/gatsby/src/utils/webpack.config.js +++ b/packages/gatsby/src/utils/webpack.config.js @@ -293,7 +293,7 @@ module.exports = async ( modulesDirectories: [ joinPath(directory, `node_modules`), `node_modules`, - `node_modules/gatsby/node_modules`, + joinPath(directory, `node_modules`, `gatsby`, `node_modules`), ], } } From adf308d7c5bb25a120e209f5ca0f5b36232510d4 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 22:17:04 -0700 Subject: [PATCH 13/16] More replacing of static colors with our autogenerated colors --- www/src/pages/blog/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/www/src/pages/blog/index.js b/www/src/pages/blog/index.js index 6872757ba92b7..9a0785e06a7f4 100644 --- a/www/src/pages/blog/index.js +++ b/www/src/pages/blog/index.js @@ -1,5 +1,6 @@ import React from "react" import Link from "gatsby-link" +import colors from "../../utils/colors" import { rhythm, scale } from "../../utils/typography" import presets from "../../utils/presets" @@ -28,7 +29,7 @@ class BlogPostsIndex extends React.Component {

{post.excerpt} @@ -56,7 +57,7 @@ class BlogPostsIndex extends React.Component { >

@@ -64,7 +65,7 @@ class BlogPostsIndex extends React.Component {
From 0a4ed7aad64bfe4162fbb199e4f29b1c196d92f1 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 22:17:26 -0700 Subject: [PATCH 14/16] Label color columns --- www/src/pages/colors.js | 12 ++++++++---- www/src/utils/typography.js | 6 ++++-- 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/www/src/pages/colors.js b/www/src/pages/colors.js index a479fe30c9d2c..4546c4f03b586 100644 --- a/www/src/pages/colors.js +++ b/www/src/pages/colors.js @@ -1,22 +1,26 @@ import React from "react" import colors from "../utils/colors" +import { rhythm } from "../utils/typography" import Container from "../components/container" export default () =>

Colors

-
-
+
+
+

a

{colors.a.map(a =>
)}
-
+
+

b

{colors.b.map(a =>
)}
-
+
+

c

{colors.c.map(a =>
)} diff --git a/www/src/utils/typography.js b/www/src/utils/typography.js index 912573a16a13c..8cdf8bd7a643f 100644 --- a/www/src/utils/typography.js +++ b/www/src/utils/typography.js @@ -12,8 +12,10 @@ const options = { bodyFontFamily: [`Tex Gyre Schola`, `serif`], baseFontSize: `18px`, baseLineHeight: 1.4, - headerColor: `#44421f`, - bodyColor: `#44421f`, + // headerColor: `#44421f`, + headerColor: colors.c[15], + // bodyColor: `#44421f`, + bodyColor: colors.c[14], blockMarginBottom: 0.65, scaleRatio: 2.15, plugins: [new CodePlugin()], From 3f84a5b9e5e8a8c189c61e494cecb90e68b20db8 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 22:27:38 -0700 Subject: [PATCH 15/16] Add index label --- www/src/pages/colors.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/www/src/pages/colors.js b/www/src/pages/colors.js index 4546c4f03b586..4bfe031a9506c 100644 --- a/www/src/pages/colors.js +++ b/www/src/pages/colors.js @@ -1,12 +1,32 @@ import React from "react" import colors from "../utils/colors" -import { rhythm } from "../utils/typography" +import { rhythm, options } from "../utils/typography" import Container from "../components/container" +import range from "lodash/range" export default () =>

Colors

+
+
+
+
+
+ {range(0, 16).map(a => +
+ {a} +
+ )} +

a

{colors.a.map(a => From 7ac1442306caa900ab387de4dac0514fea9c8555 Mon Sep 17 00:00:00 2001 From: Kyle Mathews Date: Wed, 14 Jun 2017 22:31:24 -0700 Subject: [PATCH 16/16] Add index label --- www/src/pages/colors.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/www/src/pages/colors.js b/www/src/pages/colors.js index 4bfe031a9506c..c18b6c4be1a98 100644 --- a/www/src/pages/colors.js +++ b/www/src/pages/colors.js @@ -6,7 +6,7 @@ import range from "lodash/range" export default () => -

Colors

+

Colors