Add start to image gallery example site

Moocar · Oct 25, 2016 · 637756d · 637756d
1 parent 1ea4f57
commit 637756d
Show file tree

Hide file tree

Showing 26 changed files with 7,658 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -36,3 +36,4 @@ bin/published.js
 test/**/public
 .gatsby-context.js
 .DS_Store
+public/
diff --git a/examples/image-gallery/.babelrc b/examples/image-gallery/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ['react', 'es2015', 'stage-1'],
+  "plugins": ['add-module-exports']
+}
diff --git a/examples/image-gallery/.gitignore b/examples/image-gallery/.gitignore
@@ -0,0 +1,3 @@
+public
+.intermediate-representation
+node_modules
diff --git a/examples/image-gallery/.netlify b/examples/image-gallery/.netlify
@@ -0,0 +1 @@
+{"site_id":"10b8fd01-494b-463f-822c-d1c552cbdc06","path":"public/"}
diff --git a/examples/image-gallery/README.md b/examples/image-gallery/README.md
@@ -0,0 +1,6 @@
+# Gatsby Example site
+
+Demo: https://sales-person-hare-28612.netlify.com/
+
+This relies on not-yet released Gatsby code so you can look but it won't
+run locally yet.
diff --git a/examples/image-gallery/gatsby-config.js b/examples/image-gallery/gatsby-config.js
@@ -0,0 +1,8 @@
+const config = {
+  siteMetadata: {
+    title: 'Gatsby Image Gallery Example',
+  },
+  sources: `${__dirname}/pages/`,
+}
+
+export default config
diff --git a/examples/image-gallery/gatsby-node.js b/examples/image-gallery/gatsby-node.js
@@ -0,0 +1,38 @@
+import _ from 'lodash'
+import Promise from 'bluebird'
+import path from 'path'
+
+exports.createPages = ({ graphql }) => (
+  new Promise((resolve, reject) => {
+    const pages = []
+    const imagePage = path.resolve('templates/image-page.js')
+    graphql(`
+      {
+        allImages(first: 1000) {
+          edges {
+            node {
+              path
+            }
+          }
+        }
+      }
+    `)
+    .then(result => {
+      if (result.errors) {
+        console.log(result.errors)
+        reject(result.errors)
+      }
+
+      // Create blog posts pages.
+      _.each(result.data.allImages.edges, (edge) => {
+        console.log('gatsby-node', edge)
+        pages.push({
+          path: edge.node.path, // required
+          component: imagePage,
+        })
+      })
+
+      resolve(pages)
+    })
+  })
+)
diff --git a/examples/image-gallery/html.js b/examples/image-gallery/html.js
@@ -0,0 +1,36 @@
+import React from 'react'
+import DocumentTitle from 'react-document-title'
+
+import { prefixLink } from 'gatsby-helpers'
+import { GoogleFont, TypographyStyle } from 'react-typography'
+import typography from './utils/typography'
+import HTMLScripts from 'html-scripts'
+import HTMLStyles from 'html-styles'
+
+module.exports = React.createClass({
+  render () {
+    const title = DocumentTitle.rewind()
+
+    return (
+      <html lang="en">
+        <head>
+          <meta charSet="utf-8" />
+          <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
+          <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0"
+          />
+          <title>Image Gallery Gatsby Example Site</title>
+          <TypographyStyle typography={typography} />
+          <GoogleFont typography={typography} />
+          <HTMLStyles />
+          {this.props.headComponents}
+        </head>
+        <body>
+          <div id="react-mount" dangerouslySetInnerHTML={{ __html: this.props.body }} />
+          <HTMLScripts scripts={this.props.scripts} />
+        </body>
+      </html>
+    )
+  },
+})
diff --git a/examples/image-gallery/layouts/default.js b/examples/image-gallery/layouts/default.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import Link from 'react-router/lib/Link'
+import {rhythm} from 'utils/typography'
+
+const DefaultLayout = ({children}) => {
+  return (
+    <div
+      style={{
+        padding: rhythm(1),
+      }}
+    >
+      <Link to="/"><h1>Image gallery</h1></Link>
+      {children}
+      <p>(images courtesy of Unsplash)</p>
+    </div>
+  )
+}
+
+export default DefaultLayout
diff --git a/examples/image-gallery/package.json b/examples/image-gallery/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "gatsby-example-image-gallery",
+  "description": "Gatsby example site: image gallery",
+  "version": "1.0.0",
+  "author": "Kyle Mathews <mathews.kyle@gmail.com>",
+  "dependencies": {
+    "gatsby": "next",
+    "lodash": "^4.16.4",
+    "react-typography": "^0.14.0",
+    "typography": "^0.14.0"
+  },
+  "keywords": [
+    "gatsby"
+  ],
+  "license": "MIT",
+  "main": "n/a",
+  "scripts": {
+    "lint": "./node_modules/.bin/eslint --ext .js,.jsx --ignore-pattern public .",
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "develop": "gatsby develop",
+    "build": "gatsby build",
+    "deploy": "gatsby build --prefix-links && gh-pages -d public"
+  }
+}
diff --git a/examples/image-gallery/pages/index.js b/examples/image-gallery/pages/index.js
@@ -0,0 +1,55 @@
+import React from 'react'
+import {rhythm} from 'utils/typography'
+import Link from 'react-router/lib/Link'
+
+const ImageIndex = (props) => {
+  console.log(props)
+  return (
+    <div>
+      {props.data.allImages.edges.map((edge) => {
+        const {regular, retina} = edge.node
+        return (
+          <Link
+            to={edge.node.path}
+            key={edge.node.path}
+          >
+            <img
+              src={regular.src}
+              srcSet={`${retina.src} 2x`}
+              style={{
+                display: 'inline',
+                marginRight: rhythm(1/2),
+                marginBottom: rhythm(1/2),
+                height: regular.height,
+                width: regular.width,
+                verticalAlign: 'middle',
+              }}
+            />
+          </Link>
+        )
+      })}
+    </div>
+  )
+}
+
+export default ImageIndex
+
+export const pageQuery = `
+query allImages {
+  allImages {
+    edges {
+      node {
+        path
+        regular: image(width: 290) {
+          src
+          height
+          width
+        }
+        retina: image(width: 580) {
+          src
+        }
+      }
+    }
+  }
+}
+`
diff --git a/examples/image-gallery/pages/index.md b/examples/image-gallery/pages/index.md
@@ -0,0 +1,5 @@
+---
+title: This is a test
+---
+
+People are here to stay.
diff --git a/examples/image-gallery/pages/photo-1415045550139-59b6fafc832f.jpeg b/examples/image-gallery/pages/photo-1415045550139-59b6fafc832f.jpeg
diff --git a/examples/image-gallery/pages/photo-1434441963555-a2f91c3a5f7c.jpeg b/examples/image-gallery/pages/photo-1434441963555-a2f91c3a5f7c.jpeg
diff --git a/examples/image-gallery/pages/photo-1441986300917-64674bd600d8.jpeg b/examples/image-gallery/pages/photo-1441986300917-64674bd600d8.jpeg
diff --git a/examples/image-gallery/pages/photo-1455383333344-451b6147021b.jpeg b/examples/image-gallery/pages/photo-1455383333344-451b6147021b.jpeg
diff --git a/examples/image-gallery/pages/photo-1465146344425-f00d5f5c8f07.jpeg b/examples/image-gallery/pages/photo-1465146344425-f00d5f5c8f07.jpeg
diff --git a/examples/image-gallery/pages/photo-1465447142348-e9952c393450.jpeg b/examples/image-gallery/pages/photo-1465447142348-e9952c393450.jpeg
diff --git a/examples/image-gallery/pages/photo-1468476396571-4d6f2a427ee7.jpeg b/examples/image-gallery/pages/photo-1468476396571-4d6f2a427ee7.jpeg
diff --git a/examples/image-gallery/pages/photo-1472214103451-9374bd1c798e.jpeg b/examples/image-gallery/pages/photo-1472214103451-9374bd1c798e.jpeg
diff --git a/examples/image-gallery/pages/photo-1474739331020-a715a6719403.jpeg b/examples/image-gallery/pages/photo-1474739331020-a715a6719403.jpeg
diff --git a/examples/image-gallery/pages/photo-1474866585491-c646d51dc360.jpeg b/examples/image-gallery/pages/photo-1474866585491-c646d51dc360.jpeg
diff --git a/examples/image-gallery/pages/photo-1476725900547-12eaced871fc.jpeg b/examples/image-gallery/pages/photo-1476725900547-12eaced871fc.jpeg
diff --git a/examples/image-gallery/templates/image-page.js b/examples/image-gallery/templates/image-page.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { rhythm } from 'utils/typography'
+
+const ImagePage = (props) => {
+  console.log(props)
+  const {regular, retina} = props.data.image
+  return (
+    <div>
+      <p>{props.data.image.FileName}</p>
+      <img
+        src={regular.src}
+        srcSet={`${retina.src} 2x`}
+        style={{
+          display: 'inline',
+          marginRight: rhythm(1/2),
+          marginBottom: rhythm(1/2),
+          verticalAlign: 'middle',
+        }}
+      />
+    </div>
+  )
+}
+
+export default ImagePage
+
+export const pageQuery = `
+  query ImagePage($path: String!) {
+    image(path: $path) {
+      FileName
+      regular: image(width: 1000) {
+        src
+      }
+      retina: image(width: 2000) {
+        src
+      }
+    }
+  }
+`
diff --git a/examples/image-gallery/utils/typography.js b/examples/image-gallery/utils/typography.js
@@ -0,0 +1,3 @@
+import Typography from 'typography'
+
+module.exports = new Typography()
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"site_id":"10b8fd01-494b-463f-822c-d1c552cbdc06","path":"public/"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Typography from 'typography'

		module.exports = new Typography()