[v2] image processing example

examples/image-processing/gatsby-config.js

@@ -39,5 +39,12 @@ module.exports = {
         trackingId: `UA-93349937-2`,
       },
     },
+    {
+      resolve: `gatsby-plugin-typography`,
+      options: {
+        pathToConfigModule: `src/utils/typography.js`,
+        omitGoogleFont: true,
+      },
+    },
   ],
 }

examples/image-processing/package.json

@@ -5,15 +5,18 @@
   "version": "1.0.0",
   "author": "Florian Kissling <sechskilo@gmail.com>",
   "dependencies": {
-    "gatsby": "latest",
-    "gatsby-image": "^1.0.24",
-    "gatsby-plugin-google-analytics": "^1.0.12",
-    "gatsby-plugin-offline": "latest",
-    "gatsby-plugin-sharp": "^1.6.20",
-    "gatsby-source-drupal": "^1.3.7",
-    "gatsby-source-filesystem": "^1.5.8",
-    "gatsby-transformer-sharp": "^1.6.13",
-    "react-typography": "^0.15.0",
+    "gatsby": "next",
+    "gatsby-image": "next",
+    "gatsby-plugin-google-analytics": "next",
+    "gatsby-plugin-offline": "next",
+    "gatsby-plugin-sharp": "next",
+    "gatsby-plugin-typography": "next",
+    "gatsby-source-drupal": "next",
+    "gatsby-source-filesystem": "next",
+    "gatsby-transformer-sharp": "next",
+    "react": "^16.4.0",
+    "react-dom": "^16.4.0",
+    "react-typography": "^0.16.13",
     "typography": "^0.15.8",
     "typography-theme-bootstrap": "^0.15.10"
   },
@@ -27,4 +30,4 @@
     "develop": "gatsby develop",
     "build": "gatsby build"
   }
-}
+}

examples/image-processing/src/layouts/index.js

@@ -2,31 +2,27 @@ import React from "react"
 
 import { rhythm } from "../utils/typography"
 
-class DefaultLayout extends React.Component {
-  render() {
-    return (
-      <div
-        style={{
-          margin: `0 auto`,
-          marginTop: rhythm(1.5),
-          marginBottom: rhythm(1.5),
-          maxWidth: 650,
-          paddingLeft: rhythm(3 / 4),
-          paddingRight: rhythm(3 / 4),
-        }}
-      >
-        <h1
-          style={{
-            marginBottom: rhythm(1.5),
-            fontWeight: `normal`,
-          }}
-        >
-          Image Processing with <code>gatsby-transformer-sharp</code>
-        </h1>
-        {this.props.children()}
-      </div>
-    )
-  }
-}
+const MainLayout = ({ children }) => (
+  <div
+    style={{
+      margin: `0 auto`,
+      marginTop: rhythm(1.5),
+      marginBottom: rhythm(1.5),
+      maxWidth: 650,
+      paddingLeft: rhythm(3 / 4),
+      paddingRight: rhythm(3 / 4),
+    }}
+  >
+    <h1
+      style={{
+        marginBottom: rhythm(1.5),
+        fontWeight: `normal`,
+      }}
+    >
+      Image Processing with <code>gatsby-transformer-sharp</code>
+    </h1>
+    {children}
+  </div>
+)
 
-export default DefaultLayout
+export default MainLayout

examples/image-processing/src/pages/index.js

@@ -1,6 +1,6 @@
 import React from "react"
 import Img from "gatsby-image"
-
+import Layout from "../layouts"
 import { rhythm } from "../utils/typography"
 
 class Index extends React.Component {
@@ -20,7 +20,7 @@ class Index extends React.Component {
     const sizesDuotone = this.props.data.sizesDuotone.childImageSharp.sizes
 
     return (
-      <div>
+      <Layout>
         <p>
           <a href="https://www.gatsbyjs.org/packages/gatsby-transformer-sharp/">
             <code>gatsby-transformer-sharp</code>
@@ -97,7 +97,7 @@ class Index extends React.Component {
         <ul style={{ ...styles.ul, ...styles.row }}>
           {images.map(image => (
             <li style={styles.column20} key={image.node.resize.src}>
-              <img src={image.node.resize.src} />
+              <img src={image.node.resize.src} alt={image.node.resize.originalName}/>
             </li>
           ))}
         </ul>
@@ -127,26 +127,26 @@ class Index extends React.Component {
 
         <ul style={{ ...styles.ul, ...styles.row }}>
           <li style={styles.column25}>
-            <img src={cropDefault.src} />
+            <img src={cropDefault.src} alt={`File ${cropDefault.originalName} with a default crop`} />
           </li>
           <li style={styles.column25}>
-            <img src={cropBottomLeft.src} />
+            <img src={cropBottomLeft.src} alt={`File ${cropBottomLeft.originalName} cropped to the bottom left`} />
             <p>
               <small>
                 <code>cropFocus: SOUTHWEST</code>
               </small>
             </p>
           </li>
           <li style={styles.column25}>
-            <img src={cropEntropy.src} />
+            <img src={cropEntropy.src} alt={`File ${cropEntropy.originalName} with an "entropy" crop`} />
             <p>
               <small>
                 <code>cropFocus: ENTROPY</code>
               </small>
             </p>
           </li>
           <li style={styles.column25}>
-            <img src={cropCenter.src} />
+            <img src={cropCenter.src} alt={`File ${cropCenter.originalName} cropped to the centre`} />
             <p>
               <small>
                 <code>cropFocus: CENTER</code>
@@ -314,7 +314,7 @@ class Index extends React.Component {
         </p>
 
         <Img resolutions={resolutions} />
-      </div>
+      </Layout>
     )
   }
 }

examples/image-processing/src/utils/typography.js

@@ -1,8 +1,7 @@
 import Typography from "typography"
+import theme from "typography-theme-bootstrap"
 
-let theme = require(`typography-theme-bootstrap`).default
-
-theme.overrideThemeStyles = ({ rhythm, scale }) => {
+theme.overrideThemeStyles = ({ rhythm, scale }, options) => {
   return {
     "h1, h2, h3": {
       ...scale(1 / 6),
@@ -56,9 +55,9 @@ theme.overrideThemeStyles = ({ rhythm, scale }) => {
 
 const typography = new Typography(theme)
 
-// Hot reload typography in development.
-if (process.env.NODE_ENV !== `production`) {
-  typography.injectStyles()
-}
-
+// Back out the below once Typography is upgraded for es6
 export default typography
+
+export const rhythm = typography.rhythm
+export const scale = typography.scale
+export const options = typography.options