├── .gitignore
├── .travis.yml
├── README.md
├── components
    ├── Breakpoint.js
    └── breakpoints.css
├── config.toml
├── css
    ├── github.css
    └── main.css
├── html.js
├── package.json
├── pages
    ├── 404.md
    ├── _template.js
    ├── docs
    │   ├── _template.js
    │   ├── conclusion
    │   │   └── index.md
    │   ├── getting-started
    │   │   └── index.md
    │   ├── how-to-run
    │   │   └── index.md
    │   ├── index.md
    │   ├── some-react-code
    │   │   ├── 0.jpg
    │   │   ├── 1.jpg
    │   │   ├── 2.jpg
    │   │   ├── 3.jpg
    │   │   ├── 4.jpg
    │   │   ├── 5.jpg
    │   │   ├── _Demo.js
    │   │   └── index.js
    │   └── the-next-step
    │   │   └── index.md
    ├── examples
    │   └── index.md
    └── index.md
├── utils
    ├── colors.js
    └── typography.js
├── wrappers
    └── md.js
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | public/
3 | .gatsby-context.js
4 | .DS_Store
5 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | # back to language cpp to try to bypass osx node failure
 2 | language: cpp
 3 | sudo: false
 4 | env:
 5 |   - export NODE_VERSION="0.10"
 6 |   - export NODE_VERSION="0.12"
 7 |   - export NODE_VERSION="4"
 8 |   - export NODE_VERSION="5"
 9 | os:
10 |   - linux
11 |   - osx
12 | # pre-install to bring in the correct version of node via nvm
13 | before_install:
14 |   - git submodule update --init --recursive
15 |   - git clone https://github.com/creationix/nvm.git ./.nvm
16 |   - source ./.nvm/nvm.sh
17 |   - nvm install $NODE_VERSION
18 |   - nvm use $NODE_VERSION
19 |   - npm config set python `which python`
20 |   - if [ $TRAVIS_OS_NAME == "linux" ]; then
21 |       export CC="gcc-4.8";
22 |       export CXX="g++-4.8";
23 |       export LINK="gcc-4.8";
24 |       export LINKXX="g++-4.8";
25 |     fi
26 |   - gcc --version
27 |   - g++ --version
28 | # node 4 depends on gcc 4.8
29 | addons:
30 |   apt:
31 |     sources:
32 |     - ubuntu-toolchain-r-test
33 |     packages:
34 |     - g++-4.8
35 |     - gcc-4.8
36 | # script needed to test, because defaults don't work on osx
37 | script:
38 |   - npm install
39 |   - npm run lint
40 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # This is a v0 starter and won't be ported to v1. Check out other starters @ https://www.gatsbyjs.org/docs/gatsby-starters/
2 | 


--------------------------------------------------------------------------------
/components/Breakpoint.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import './breakpoints.css'
 4 | 
 5 | class Breakpoint extends Component {
 6 |   render () {
 7 |     const { mobile, children } = this.props
 8 | 
 9 |     if (mobile) {
10 |       return (
11 |         <div className="breakpoint-min-width-700">
12 |           {children}
13 |         </div>
14 |       )
15 |     }
16 | 
17 |     return (
18 |       <div className="breakpoint-max-width-700">
19 |         {children}
20 |       </div>
21 |     )
22 |   }
23 | }
24 | 
25 | Breakpoint.propTypes = {
26 |   children: PropTypes.array,
27 |   mobile: PropTypes.bool,
28 | }
29 | 
30 | export default Breakpoint
31 | 


--------------------------------------------------------------------------------
/components/breakpoints.css:
--------------------------------------------------------------------------------
 1 | @media only screen and (min-width: 700px) {
 2 |   .breakpoint-min-width-700 {
 3 |     display: block;
 4 |   }
 5 |   .breakpoint-max-width-700 {
 6 |     display: none;
 7 |   }
 8 | }
 9 | @media only screen and (max-width: 700px) {
10 |   .breakpoint-min-width-700 {
11 |     display: none;
12 |   }
13 |   .breakpoint-max-width-700 {
14 |     display: block;
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/config.toml:
--------------------------------------------------------------------------------
 1 | siteTitle="AlphabetJS"
 2 | baseColor = "#884499"
 3 | linkPrefix = "/gatsby-starter-documentation"
 4 | docPages = [
 5 |   "/docs/",
 6 |   "/docs/getting-started/",
 7 |   "/docs/how-to-run/",
 8 |   "/docs/some-react-code/",
 9 |   "/docs/the-next-step/",
10 |   "/docs/conclusion/",
11 | ]
12 | 


--------------------------------------------------------------------------------
/css/github.css:
--------------------------------------------------------------------------------
 1 | /*
 2 | 
 3 | github.com style (c) Vasily Polovnyov <vast@whiteants.net>
 4 | 
 5 | */
 6 | .hljs-comment,
 7 | .hljs-quote {
 8 |   color: #998;
 9 |   font-style: italic;
10 | }
11 | 
12 | .hljs-keyword,
13 | .hljs-selector-tag,
14 | .hljs-subst {
15 |   color: #333;
16 |   font-weight: bold;
17 | }
18 | 
19 | .hljs-number,
20 | .hljs-literal,
21 | .hljs-variable,
22 | .hljs-template-variable,
23 | .hljs-tag .hljs-attr {
24 |   color: #008080;
25 | }
26 | 
27 | .hljs-string,
28 | .hljs-doctag {
29 |   color: #d14;
30 | }
31 | 
32 | .hljs-title,
33 | .hljs-section,
34 | .hljs-selector-id {
35 |   color: #900;
36 |   font-weight: bold;
37 | }
38 | 
39 | .hljs-subst {
40 |   font-weight: normal;
41 | }
42 | 
43 | .hljs-type,
44 | .hljs-class .hljs-title {
45 |   color: #458;
46 |   font-weight: bold;
47 | }
48 | 
49 | .hljs-tag,
50 | .hljs-name,
51 | .hljs-attribute {
52 |   color: #000080;
53 |   font-weight: normal;
54 | }
55 | 
56 | .hljs-regexp,
57 | .hljs-link {
58 |   color: #009926;
59 | }
60 | 
61 | .hljs-symbol,
62 | .hljs-bullet {
63 |   color: #990073;
64 | }
65 | 
66 | .hljs-built_in,
67 | .hljs-builtin-name {
68 |   color: #0086b3;
69 | }
70 | 
71 | .hljs-meta {
72 |   color: #999;
73 |   font-weight: bold;
74 | }
75 | 
76 | .hljs-deletion {
77 |   background: #fdd;
78 | }
79 | 
80 | .hljs-addition {
81 |   background: #dfd;
82 | }
83 | 
84 | .hljs-emphasis {
85 |   font-style: italic;
86 | }
87 | 
88 | .hljs-strong {
89 |   font-weight: bold;
90 | }
91 | 
92 | 


--------------------------------------------------------------------------------
/css/main.css:
--------------------------------------------------------------------------------
 1 | .demo1-ball {
 2 |   border-radius: 99px;
 3 |   background-color: white;
 4 |   width: 50px;
 5 |   height: 50px;
 6 |   border: 3px solid white;
 7 |   position: absolute;
 8 |   background-size: 50px;
 9 | }
10 | 


--------------------------------------------------------------------------------
/html.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import PropTypes from 'prop-types'
 3 | import DocumentTitle from 'react-document-title'
 4 | 
 5 | import { prefixLink } from 'gatsby-helpers'
 6 | import { TypographyStyle, GoogleFont } from 'react-typography'
 7 | import typography from './utils/typography'
 8 | import { colors } from 'utils/colors'
 9 | 
10 | const BUILD_TIME = new Date().getTime()
11 | 
12 | class Html extends Component {
13 |   render () {
14 |     const title = DocumentTitle.rewind()
15 | 
16 |     let css
17 |     if (process.env.NODE_ENV === 'production') {
18 |       css = <style dangerouslySetInnerHTML={{ __html: require('!raw!./public/styles.css') }} />
19 |     }
20 | 
21 |     return (
22 |       <html lang="en">
23 |         <head>
24 |           <meta charSet="utf-8" />
25 |           <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
26 |           <meta
27 |             name="viewport"
28 |             content="width=device-width, initial-scale=1.0"
29 |           />
30 |           <title>{title}</title>
31 |           <TypographyStyle typography={typography} />
32 |           <GoogleFont typography={typography} />
33 |           {css}
34 |           <style
35 |             dangerouslySetInnerHTML={{
36 |               __html:
37 |                 `
38 |                   a {
39 |                     color: ${colors.bg};
40 |                   }
41 |                   .ball-0 {
42 |                     background-image: url(${prefixLink('/docs/some-react-code/0.jpg')});
43 |                   }
44 |                   .ball-1 {
45 |                     background-image: url(${prefixLink('/docs/some-react-code/1.jpg')});
46 |                   }
47 |                   .ball-2 {
48 |                     background-image: url(${prefixLink('/docs/some-react-code/2.jpg')});
49 |                   }
50 |                   .ball-3 {
51 |                     background-image: url(${prefixLink('/docs/some-react-code/3.jpg')});
52 |                   }
53 |                   .ball-4 {
54 |                     background-image: url(${prefixLink('/docs/some-react-code/4.jpg')});
55 |                   }
56 |                   .ball-5 {
57 |                     background-image: url(${prefixLink('/docs/some-react-code/5.jpg')});
58 |                   }
59 |                 `,
60 |             }}
61 |           />
62 |         </head>
63 |         <body>
64 |           <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
65 |           <script src={prefixLink(`/bundle.js?t=${BUILD_TIME}`)} />
66 |         </body>
67 |       </html>
68 |     )
69 |   }
70 | }
71 | 
72 | Html.propTypes = {
73 |   body: PropTypes.string,
74 | }
75 | 
76 | export default Html
77 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "docs-site",
 3 |   "description": "Gatsby example site",
 4 |   "version": "1.0.0",
 5 |   "author": "Kyle Mathews <mathews.kyle@gmail.com>",
 6 |   "dependencies": {
 7 |     "chroma-js": "^0.7.2",
 8 |     "color-pairs-picker": "^1.3.5",
 9 |     "gatsby": "^0.12.45",
10 |     "lodash": "^4.17.2",
11 |     "prop-types": "^15.5.10",
12 |     "react-document-title": "^2.0.3",
13 |     "react-motion": "^0.1.0",
14 |     "react-responsive-grid": "^0.3.3",
15 |     "react-typography": "^0.15.0",
16 |     "typography": "^0.15.8",
17 |     "typography-plugin-code": "^0.15.9",
18 |     "underscore.string": "^3.2.2"
19 |   },
20 |   "devDependencies": {
21 |     "gh-pages": "^0.12.0"
22 |   },
23 |   "keywords": [
24 |     "gatsby"
25 |   ],
26 |   "license": "MIT",
27 |   "main": "n/a",
28 |   "scripts": {
29 |     "test": "echo \"Error: no test specified\" && exit 1",
30 |     "develop": "gatsby develop",
31 |     "build": "gatsby build",
32 |     "deploy": "gatsby build --prefix-links && gh-pages -d public"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/pages/404.md:
--------------------------------------------------------------------------------
1 | ---
2 | path: /404.html
3 | ---
4 | 
5 | # NOT FOUND
6 | 
7 | You just hit a route that doesn't exist... the sadness.
8 | 


--------------------------------------------------------------------------------
/pages/_template.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import PropTypes from 'prop-types'
  3 | import { Link } from 'react-router'
  4 | import { Container, Grid, Span } from 'react-responsive-grid'
  5 | import { prefixLink } from 'gatsby-helpers'
  6 | import includes from 'underscore.string/include'
  7 | import { colors, activeColors } from 'utils/colors'
  8 | 
  9 | import typography from 'utils/typography'
 10 | import { config } from 'config'
 11 | 
 12 | // Import styles.
 13 | import 'css/main.css'
 14 | import 'css/github.css'
 15 | 
 16 | const { rhythm, adjustFontSizeTo } = typography
 17 | 
 18 | class Template extends Component {
 19 |   render () {
 20 |     const docsActive = includes(this.props.location.pathname, '/docs/')
 21 |     const examplesActive = includes(this.props.location.pathname, '/examples/')
 22 | 
 23 |     return (
 24 |       <div>
 25 |         <div
 26 |           style={{
 27 |             background: colors.bg,
 28 |             color: colors.fg,
 29 |             marginBottom: rhythm(1.5),
 30 |           }}
 31 |         >
 32 |           <Container
 33 |             style={{
 34 |               maxWidth: 960,
 35 |               paddingLeft: rhythm(3/4),
 36 |             }}
 37 |           >
 38 |             <Grid
 39 |               columns={12}
 40 |               style={{
 41 |                 padding: `${rhythm(3/4)} 0`,
 42 |               }}
 43 |             >
 44 |               <Span
 45 |                 columns={4}
 46 |                 style={{
 47 |                   height: 24, // Ugly hack. How better to constrain height of div?
 48 |                 }}
 49 |               >
 50 |                 <Link
 51 |                   to={prefixLink('/')}
 52 |                   style={{
 53 |                     textDecoration: 'none',
 54 |                     color: colors.fg,
 55 |                     fontSize: adjustFontSizeTo('25.5px').fontSize,
 56 |                   }}
 57 |                 >
 58 |                   {config.siteTitle}
 59 |                 </Link>
 60 |               </Span>
 61 |               <Span columns={8} last>
 62 |                 <a
 63 |                   style={{
 64 |                     float: 'right',
 65 |                     color: colors.fg,
 66 |                     textDecoration: 'none',
 67 |                     marginLeft: rhythm(1/2),
 68 |                   }}
 69 |                   href="https://github.com/gatsbyjs/gatsby"
 70 |                 >
 71 |                   Github
 72 |                 </a>
 73 |                 <Link
 74 |                   to={prefixLink('/examples/')}
 75 |                   style={{
 76 |                     background: examplesActive ? activeColors.bg : colors.bg,
 77 |                     color: examplesActive ? activeColors.fg : colors.fg,
 78 |                     float: 'right',
 79 |                     textDecoration: 'none',
 80 |                     paddingLeft: rhythm(1/2),
 81 |                     paddingRight: rhythm(1/2),
 82 |                     paddingBottom: rhythm(3/4),
 83 |                     marginBottom: rhythm(-1),
 84 |                     paddingTop: rhythm(1),
 85 |                     marginTop: rhythm(-1),
 86 |                   }}
 87 |                 >
 88 |                   Examples
 89 |                 </Link>
 90 |                 <Link
 91 |                   to={prefixLink('/docs/')}
 92 |                   style={{
 93 |                     background: docsActive ? activeColors.bg : colors.bg,
 94 |                     color: docsActive ? activeColors.fg : colors.fg,
 95 |                     float: 'right',
 96 |                     textDecoration: 'none',
 97 |                     paddingLeft: rhythm(1/2),
 98 |                     paddingRight: rhythm(1/2),
 99 |                     paddingBottom: rhythm(3/4),
100 |                     marginBottom: rhythm(-1),
101 |                     paddingTop: rhythm(1),
102 |                     marginTop: rhythm(-1),
103 |                   }}
104 |                 >
105 |                   Documentation
106 |                 </Link>
107 |               </Span>
108 |             </Grid>
109 |           </Container>
110 |         </div>
111 |         <Container
112 |           style={{
113 |             maxWidth: 960,
114 |             padding: `${rhythm(1)} ${rhythm(3/4)}`,
115 |             paddingTop: 0,
116 |           }}
117 |         >
118 |           {this.props.children}
119 |         </Container>
120 |       </div>
121 |     )
122 |   }
123 | }
124 | 
125 | Template.propTypes = {
126 |   children: PropTypes.object,
127 | }
128 | 
129 | export default Template
130 | 


--------------------------------------------------------------------------------
/pages/docs/_template.js:
--------------------------------------------------------------------------------
  1 | import React, { Component } from 'react'
  2 | import { Link } from 'react-router'
  3 | import PropTypes from 'prop-types'
  4 | import Breakpoint from 'components/Breakpoint'
  5 | import find from 'lodash/find'
  6 | import { prefixLink } from 'gatsby-helpers'
  7 | import { config } from 'config'
  8 | 
  9 | import typography from 'utils/typography'
 10 | const { rhythm } = typography
 11 | 
 12 | class Template extends Component {
 13 |   handleTopicChange (e) {
 14 |     return this.context.router.push(e.target.value)
 15 |   }
 16 |   render () {
 17 |     const childPages = config.docPages.map((p) => {
 18 |       const page = find(this.props.route.pages, (_p) => _p.path === p)
 19 |       return {
 20 |         title: page.data.title,
 21 |         path: page.path,
 22 |       }
 23 |     })
 24 |     const docOptions = childPages.map((child) =>
 25 |       <option
 26 |         key={prefixLink(child.path)}
 27 |         value={prefixLink(child.path)}
 28 |       >
 29 |         {child.title}
 30 |       </option>
 31 | 
 32 |     )
 33 |     const docPages = childPages.map((child) => {
 34 |       const isActive = prefixLink(child.path) === this.props.location.pathname
 35 |       return (
 36 |         <li
 37 |           key={child.path}
 38 |           style={{
 39 |             marginBottom: rhythm(1/2),
 40 |           }}
 41 |         >
 42 |           <Link
 43 |             to={prefixLink(child.path)}
 44 |             style={{
 45 |               textDecoration: 'none',
 46 |             }}
 47 |           >
 48 |             {isActive ? <strong>{child.title}</strong> : child.title}
 49 |           </Link>
 50 |         </li>
 51 |       )
 52 |     })
 53 |     return (
 54 |       <div>
 55 |         <Breakpoint
 56 |           mobile
 57 |         >
 58 |           <div
 59 |             style={{
 60 |               overflowY: 'auto',
 61 |               paddingRight: `calc(${rhythm(1/2)} - 1px)`,
 62 |               position: 'absolute',
 63 |               width: `calc(${rhythm(8)} - 1px)`,
 64 |               borderRight: '1px solid lightgrey',
 65 |             }}
 66 |           >
 67 |             <ul
 68 |               style={{
 69 |                 listStyle: 'none',
 70 |                 marginLeft: 0,
 71 |                 marginTop: rhythm(1/2),
 72 |               }}
 73 |             >
 74 |               {docPages}
 75 |             </ul>
 76 |           </div>
 77 |           <div
 78 |             style={{
 79 |               padding: `0 ${rhythm(1)}`,
 80 |               paddingLeft: `calc(${rhythm(8)} + ${rhythm(1)})`,
 81 |             }}
 82 |           >
 83 |             {this.props.children}
 84 |           </div>
 85 |         </Breakpoint>
 86 |         <Breakpoint>
 87 |           <strong>Topics:</strong>
 88 |           {' '}
 89 |           <select
 90 |             defaultValue={this.props.location.pathname}
 91 |             onChange={this.handleTopicChange}
 92 |           >
 93 |             {docOptions}
 94 |           </select>
 95 |           <br />
 96 |           <br />
 97 |           {this.props.children}
 98 |         </Breakpoint>
 99 |       </div>
100 |     )
101 |   }
102 | }
103 | 
104 | Template.contextTypes = {
105 |     router: PropTypes.object.isRequired
106 | }
107 | 
108 | Template.propTypes = {
109 |   route: PropTypes.object
110 | }
111 | 
112 | export default Template;
113 | 


--------------------------------------------------------------------------------
/pages/docs/conclusion/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Conclusion
3 | ---
4 | 
5 | You're probably getting pretty good at whatever thing we're explaining
6 | here so good job, carry on, here's some helpful links, and hope you have
7 | a great life.
8 | 


--------------------------------------------------------------------------------
/pages/docs/getting-started/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Getting Started
 3 | ---
 4 | 
 5 | It's not hard, you've just got to give it a try!
 6 | 
 7 | ```javascript
 8 | if (true) {
 9 |   console.log('Yes I can!')
10 | }
11 | ```
12 | 


--------------------------------------------------------------------------------
/pages/docs/how-to-run/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: How to Run
3 | ---
4 | 
5 | Mostly you need to move your legs and arms together in coordinated
6 | fashion faster than you normally would when you're moving your body
7 | around. If you do this and don't look too weird, people will believe
8 | you're running.
9 | 


--------------------------------------------------------------------------------
/pages/docs/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Introduction
3 | ---
4 | 
5 | **AlphabetJS** is the latest and greatest Javascript Framework. It's
6 | amazing and wonderful and you'll probably love it more than all of the
7 | other ones.
8 | 


--------------------------------------------------------------------------------
/pages/docs/some-react-code/0.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gatsbyjs/gatsby-starter-documentation/ef596c57b698951b3efcccadcc9ad2475d5e31b7/pages/docs/some-react-code/0.jpg


--------------------------------------------------------------------------------
/pages/docs/some-react-code/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gatsbyjs/gatsby-starter-documentation/ef596c57b698951b3efcccadcc9ad2475d5e31b7/pages/docs/some-react-code/1.jpg


--------------------------------------------------------------------------------
/pages/docs/some-react-code/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gatsbyjs/gatsby-starter-documentation/ef596c57b698951b3efcccadcc9ad2475d5e31b7/pages/docs/some-react-code/2.jpg


--------------------------------------------------------------------------------
/pages/docs/some-react-code/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gatsbyjs/gatsby-starter-documentation/ef596c57b698951b3efcccadcc9ad2475d5e31b7/pages/docs/some-react-code/3.jpg


--------------------------------------------------------------------------------
/pages/docs/some-react-code/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gatsbyjs/gatsby-starter-documentation/ef596c57b698951b3efcccadcc9ad2475d5e31b7/pages/docs/some-react-code/4.jpg


--------------------------------------------------------------------------------
/pages/docs/some-react-code/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gatsbyjs/gatsby-starter-documentation/ef596c57b698951b3efcccadcc9ad2475d5e31b7/pages/docs/some-react-code/5.jpg


--------------------------------------------------------------------------------
/pages/docs/some-react-code/_Demo.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { Spring } from 'react-motion'
 4 | import range from 'lodash/range'
 5 | 
 6 | class Demo extends Component {
 7 |   constructor () {
 8 |     super()
 9 |     this.state = { mouse: [250, 300] }
10 |   }
11 | 
12 |   componentDidMount () {
13 |     const rect = ReactDOM.findDOMNode(this).getBoundingClientRect()
14 |     this.setState({ // eslint-disable-line react/no-did-mount-set-state
15 |       left: rect.left,
16 |       top: rect.top,
17 |     })
18 |   }
19 | 
20 |   getValues = (currentPositions) => {
21 |     // No currentPositions means it's the first render for Spring
22 |     if (!currentPositions) {
23 |       return { val: range(6).map(() => [0, 0]) }
24 |     }
25 |     const endValue = currentPositions.val.map((_, i) => {
26 |       // hack. We're getting the currentPositions of the previous ball, but in
27 |       // reality it's not really the "current" position. It's the last render's.
28 |       // If we want to get the real current position, we'd have to compute it
29 |       // now, then read into it now. This gets very tedious with this API.
30 |       if (i === 0) {
31 |         return this.state.mouse
32 |       } else {
33 |         return currentPositions.val[i - 1]
34 |       }
35 |     })
36 |     return { val: endValue, config: [120, 17] }
37 |   }
38 | 
39 |   handleMouseMove = ({ pageX, pageY }) => {
40 |     this.setState({ mouse: [pageX-this.state.left, pageY-this.state.top] })
41 |   }
42 | 
43 |   handleTouchMove = ({ touches }) => {
44 |     this.handleMouseMove(touches[0])
45 |   }
46 | 
47 |   render () {
48 |     return (
49 |       <Spring endValue={this.getValues}>
50 |         {({ val }) =>
51 |           <div
52 |             style={{
53 |               height: 400,
54 |             }}
55 |             className="demo1"
56 |             onMouseMove={this.handleMouseMove}
57 |             onTouchMove={this.handleTouchMove}
58 |           >
59 |               {val.map(([x, y], i) =>
60 |                 <div
61 |                   key={i}
62 |                   className={`demo1-ball ball-${i}`}
63 |                   style={{
64 |                     WebkitTransform: `translate3d(${x - 25}px, ${y - 25}px, 0)`,
65 |                     transform: `translate3d(${x - 25}px, ${y - 25}px, 0)`,
66 |                     zIndex: val.length - i,
67 |                   }}
68 |                 />
69 |               )}
70 |           </div>
71 |         }
72 |       </Spring>
73 |     )
74 |   }
75 | }
76 | 
77 | export default Demo
78 | 


--------------------------------------------------------------------------------
/pages/docs/some-react-code/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import Demo from './_Demo'
 3 | import DocumentTitle from 'react-document-title'
 4 | import { config } from 'config'
 5 | 
 6 | exports.data = {
 7 |   title: 'Some React Code',
 8 | }
 9 | 
10 | class SomeReactCode extends Component {
11 | 
12 |   render () {
13 |     const page = this.props.route.page
14 | 
15 |     return (
16 |       <DocumentTitle title={`${page.data.title} | ${config.siteTitle}`}>
17 |         <div>
18 |           <h1>Some React Code</h1>
19 |           <p>
20 |             It's easy to intermix different file types. The other documentation pages
21 |             are all written in Markdown but this page is a normal React.js component.
22 |             Gatsby has built-in support for Markdown, HTML, JSX,
23 |             CJSX (Coffeescript flavored JSX), JSON, YAML, and TOML
24 |             and it's easy to add support for additional file formats.
25 |           </p>
26 |           <p>
27 |             React.js component pages makes it easy to add interactivity or ajax enhancements
28 |             to what is otherwise a static site. In the case of a documentation site,
29 |             it let's you embed sample/runnable code to illustrate your documentation.
30 |             (This demo is from <a href="https://github.com/chenglou/react-motion">React Motion</a>).
31 |           </p>
32 |           <div
33 |             style={{
34 |               height: 500,
35 |             }}
36 |           >
37 |             <Demo />
38 |           </div>
39 |         </div>
40 |       </DocumentTitle>
41 |     )
42 |   }
43 | }
44 | 
45 | export default SomeReactCode
46 | 


--------------------------------------------------------------------------------
/pages/docs/the-next-step/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: The Next Step
 3 | ---
 4 | 
 5 | ## Basically do this
 6 | yeah, a lot of this.
 7 | 
 8 | ## Then do this.
 9 | Ok? Getting the swing of things yet?
10 | 
11 | ## And if you're stuck, try these things
12 | 
13 | 1. first this
14 | 2. this second
15 | 3. if you're really stuck, this.
16 | 4. probably you should give up now.
17 | 


--------------------------------------------------------------------------------
/pages/examples/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Modules used on this site
 3 | ---
 4 | 
 5 | A real documentation site would have live examples here. But since this
 6 | site isn't documenting anything real, here's the list of modules used on
 7 | this site.
 8 | 
 9 | * [React](https://facebook.github.io/react/docs/)
10 | * [GatsbyJS](https://github.com/gatsbyjs/gatsby)
11 | * [TypographyJS](https://kyleamathews.github.io/typography.js/#/)
12 | * [React Router](https://github.com/rackt/react-router)
13 | * [Underscore.String](http://epeli.github.io/underscore.string/)
14 | * [React Responsive Grid](http://kyleamathews.github.io/react-responsive-grid/#/)
15 | * [Color Pairs Picker](http://kyleamathews.github.io/color-pairs-picker/)
16 | * [React Document Title](https://github.com/gaearon/react-document-title)
17 | * [Lodash](https://lodash.com/)
18 | 


--------------------------------------------------------------------------------
/pages/index.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: "AlphabetJS: The latest and greatest Javascript framework"
 3 | ---
 4 | 
 5 | ## Inops magnis Acrisius remisit Circes
 6 | 
 7 | Lorem markdownum *formasque* terram, fatum adnuit memores, stipulis
 8 | virgine,
 9 | ullo vires, potiere proles. Modo [nec Aesacon](http://gifctrl.com/) et
10 | vultum
11 | praeter fata gemitus panda. Factaque sibi repressit saltem, flammaeque
12 | ille per
13 | et opus flecti tellus inter: curru sidus. O iunxit ita erat, frondes,
14 | hac proles
15 | inritaturque?
16 | 
17 | ## Sed videt vestem vagatur
18 | 
19 | Palato rubentis enim, ora fontes lunaria, ventis iacebant pariter. Illa
20 | latet
21 | primae concedimus factis, animo ab nec vagantem praemia sustollit.
22 | Secunda
23 | detque ecce, sua vixque fontes *quantam* aede.
24 | 
25 | ## Cuique in nullum futuri
26 | 
27 | Amphitryoniaden sanguine et nefas lactentis iuvencae scit? Venis et dedi
28 | hoc
29 | thalamoque palmite fata, nec tot. Procorum super [patre aranea
30 | passis](http://reddit.com/r/thathappened) et regemque inque dedimus
31 | [haerent
32 | lumina ponunt](http://stoneship.org/), Rhodopeius lacertis! Conceperat
33 | tellus:
34 | hunc id nymphe en adest evolvere? Auro nescio extemplo triones et
35 | sceleratus
36 | queruntur inpavidus ab suos concutit, Ionio aut, de quo cinisque.
37 | 
38 | ```javascript
39 | import Typography from 'typography'
40 | import CodePlugin from 'typography-plugin-code'
41 | 
42 | const options = {
43 |   baseFontSize: '16px',
44 |   baseLineHeight: 1.5,
45 |   bodyFontFamily: ['Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
46 |   headerFontFamily: ['Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'],
47 |   bodyWeight: 400,
48 |   headerWeight: 700,
49 |   boldWeight: 700,
50 |   scale: 1.618,
51 |   plugins: [
52 |     new CodePlugin(),
53 |   ],
54 | }
55 | 
56 | const typography = new Typography(options)
57 | 
58 | // Hot reload typography in development.
59 | if (process.env.NODE_ENV !== 'production') {
60 |   typography.injectStyles()
61 | }
62 | 
63 | export default typography
64 | ```
65 | 
66 | ## Diu fas tractaque Tethyn vidi exigere
67 | 
68 | Aenea inque est flexo armos et bovis! Naides alta vocisque videt fit
69 | cervum
70 | elusam Macareus vicisse illis unguibus. Multorumque tumulo
71 | **praetemptatque
72 | occidit** ingentique et summas Nili virgo vaticinata facinus positae
73 | vestes,
74 | *exstinguere iuvat* Lycaona postquam.
75 | 
76 | - Multaque in coloque
77 | - Emicuit errandum
78 | - Mitior ego verbis interdum occupat feruntur
79 | - Parili Meleagros fluit et timorem
80 | 
81 | Gemit petit, cingentia quis carens, duxere es sortem corpora quamvis?
82 | **Palmis
83 | visa**, nec deo fuit Amphissos, et sprevere Acmona illa habuissem
84 | **asper**. Et
85 | [nemus](http://reddit.com/r/thathappened) Iunone: et deae!
86 | 


--------------------------------------------------------------------------------
/utils/colors.js:
--------------------------------------------------------------------------------
 1 | import colorPairsPicker from 'color-pairs-picker'
 2 | import chroma from 'chroma-js'
 3 | 
 4 | import { config } from 'config'
 5 | 
 6 | export const colors = colorPairsPicker(config.baseColor, {
 7 |   contrast: 5.5,
 8 | })
 9 | 
10 | const darker = chroma(config.baseColor).darken(10).hex()
11 | export const activeColors = colorPairsPicker(darker, {
12 |   contrast: 7,
13 | })
14 | 


--------------------------------------------------------------------------------
/utils/typography.js:
--------------------------------------------------------------------------------
 1 | import Typography from 'typography'
 2 | import CodePlugin from 'typography-plugin-code'
 3 | 
 4 | const options = {
 5 |   scaleRatio: 1.618,
 6 |   plugins: [
 7 |     new CodePlugin(),
 8 |   ],
 9 | }
10 | 
11 | const typography = new Typography(options)
12 | 
13 | // Hot reload typography in development.
14 | if (process.env.NODE_ENV !== 'production') {
15 |   typography.injectStyles()
16 | }
17 | 
18 | export default typography
19 | 


--------------------------------------------------------------------------------
/wrappers/md.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react'
 2 | import DocumentTitle from 'react-document-title'
 3 | import PropTypes from 'prop-types'
 4 | import { config } from 'config'
 5 | 
 6 | class Md extends Component {
 7 |   render () {
 8 |     const post = this.props.route.page.data
 9 | 
10 |     return (
11 |       <DocumentTitle title={`${post.title} | ${config.siteTitle}`}>
12 |         <div className="markdown">
13 |           <h1>{post.title}</h1>
14 |           <div dangerouslySetInnerHTML={{ __html: post.body }} />
15 |         </div>
16 |       </DocumentTitle>
17 |     )
18 |   }
19 | }
20 | 
21 | Md.propTypes = {
22 |   route: PropTypes.object,
23 | }
24 | 
25 | export default Md;
26 | 


--------------------------------------------------------------------------------