chore: Add demo (#80)

* chore: Add gatsby-image dependencies

* feat: Query content, render data

* chore: Add, initialise tailwindcss

* feat: Grid for the index page

* feat: Build product pages

* feat: Use createResolvers to add formattedPrice field

* feat: Product grid design

* feat: Product page design

demo/gatsby-browser.js

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import Layout from './src/components/layout'
+
+import './src/styles/main.css'
+
+const wrapPageElement = ({ element, props }) => {
+  return <Layout {...props}>{element}</Layout>
+}
+
+export { wrapPageElement }

demo/gatsby-config.js

@@ -2,6 +2,8 @@ require('dotenv').config()
 
 module.exports = {
   plugins: [
+    'gatsby-plugin-postcss',
+    'gatsby-plugin-sharp',
     {
       resolve: 'gatsby-source-graphcms',
       options: {
@@ -10,5 +12,6 @@ module.exports = {
         token: process.env.GRAPHCMS_TOKEN,
       },
     },
+    'gatsby-transformer-sharp',
   ],
 }

demo/gatsby-node.js

@@ -0,0 +1,48 @@
+const path = require('path')
+
+exports.createPages = async ({ actions: { createPage }, graphql }) => {
+  const { data } = await graphql(`
+    {
+      products: allGraphCmsProduct {
+        nodes {
+          description {
+            text
+          }
+          formattedPrice
+          id
+          name
+          slug
+        }
+      }
+    }
+  `)
+
+  data.products.nodes.forEach((product) => {
+    createPage({
+      component: path.resolve(`src/templates/product-page.js`),
+      context: {
+        id: product.id,
+        product,
+      },
+      path: `/products/${product.slug}`,
+    })
+  })
+}
+
+exports.createResolvers = ({ createResolvers }) => {
+  const resolvers = {
+    GraphCMS_Product: {
+      formattedPrice: {
+        type: 'String',
+        resolve: (source) => {
+          return new Intl.NumberFormat('en-US', {
+            currency: 'USD',
+            style: 'currency',
+          }).format(source.price)
+        },
+      },
+    },
+  }
+
+  createResolvers(resolvers)
+}

demo/gatsby-ssr.js

@@ -0,0 +1 @@
+export { wrapPageElement } from './gatsby-browser'

demo/package.json

@@ -9,8 +9,16 @@
   },
   "dependencies": {
     "gatsby": "2.23.22",
+    "gatsby-image": "2.4.13",
+    "gatsby-plugin-postcss": "2.3.11",
+    "gatsby-plugin-sharp": "2.6.19",
     "gatsby-source-graphcms": "2.0.0",
+    "gatsby-transformer-sharp": "2.5.11",
     "react": "16.13.1",
     "react-dom": "16.13.1"
+  },
+  "devDependencies": {
+    "postcss-preset-env": "6.7.0",
+    "tailwindcss": "1.4.6"
   }
 }

demo/postcss.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [require('postcss-preset-env'), require('tailwindcss')],
+}

demo/src/components/layout.js

@@ -0,0 +1,7 @@
+import React from 'react'
+
+function Layout({ children }) {
+  return <div className="max-w-4xl mx-auto px-4 py-8">{children}</div>
+}
+
+export default Layout

demo/src/pages/index.js

@@ -0,0 +1,58 @@
+import React from 'react'
+import { graphql, Link } from 'gatsby'
+import Img from 'gatsby-image'
+
+const IndexPage = ({ data: { products } }) => {
+  return (
+    <ul className="gap-6 grid grid-cols-1 max-w-6xl md:grid-cols-3 mx-auto">
+      {products.nodes.map((product) => {
+        const [mainImage] = product.images
+
+        return (
+          <li key={product.id} className="bg-white rounded-lg shadow">
+            <Link to={`/products/${product.slug}`}>
+              <div className="flex-1 flex flex-col p-8">
+                {mainImage && (
+                  <Img
+                    fluid={mainImage.localFile.childImageSharp.fluid}
+                    fadeIn={false}
+                  />
+                )}
+                <h2 className="my-4 text-gray-900 text-xl leading-5 font-medium">
+                  {product.name}
+                </h2>
+                <p className="font-semibold text-purple-600">
+                  {product.formattedPrice}
+                </p>
+              </div>
+            </Link>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
+export const query = graphql`
+  query PageQuery {
+    products: allGraphCmsProduct {
+      nodes {
+        formattedPrice
+        id
+        images {
+          localFile {
+            childImageSharp {
+              fluid {
+                ...GatsbyImageSharpFluid
+              }
+            }
+          }
+        }
+        name
+        slug
+      }
+    }
+  }
+`
+
+export default IndexPage

demo/src/styles/main.css

@@ -0,0 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+  @apply bg-gray-100;
+}

demo/src/templates/product-page.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import { graphql } from 'gatsby'
+import Img from 'gatsby-image'
+
+const ProductPage = ({ data: { productImages }, pageContext: { product } }) => {
+  const [mainImage] = productImages.nodes
+
+  return (
+    <div className="bg-white flex flex-1 flex-col md:flex-row p-8 rounded-lg shadow">
+      <div className="flex flex-1 flex-col">
+        <h2 className="my-4 text-gray-900 text-3xl leading-5 font-medium">
+          {product.name}
+        </h2>
+        <p className="font-semibold text-purple-600 text-lg">
+          {product.formattedPrice}
+        </p>
+        {product.description && (
+          <React.Fragment>
+            <hr className="my-4" />
+            <p className="leading-relaxed md:text-xl text-lg">
+              {product.description.text}
+            </p>
+          </React.Fragment>
+        )}
+      </div>
+      {mainImage && (
+        <div className="w-full md:w-3/5">
+          <Img
+            fluid={mainImage.localFile.childImageSharp.fluid}
+            fadeIn={false}
+          />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export const query = graphql`
+  query ProductImageQuery($id: String!) {
+    productImages: allGraphCmsAsset(
+      filter: { productImages: { elemMatch: { id: { eq: $id } } } }
+    ) {
+      nodes {
+        localFile {
+          childImageSharp {
+            fluid {
+              ...GatsbyImageSharpFluid
+            }
+          }
+        }
+      }
+    }
+  }
+`
+
+export default ProductPage

demo/tailwind.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+  purge: ['./src/components/**/*.js', './src/pages/**/*.js'],
+  theme: {
+    extend: {},
+  },
+  variants: {},
+  plugins: [],
+}