Merge pull request #6 from pvpg/master

Migration to gatsby-source-prismic

.eslintrc.json

@@ -0,0 +1,36 @@
+{
+    "env": {
+      "browser": true,
+      "es6": true
+    },
+    "extends": [
+      "plugin:react/recommended",
+      "airbnb"
+    ],
+    "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+    },
+    "parserOptions": {
+      "ecmaFeatures": {
+        "jsx": true
+      },
+      "ecmaVersion": 2018,
+      "sourceType": "module"
+    },
+    "plugins": [
+      "react"
+    ],
+    "rules": {
+      "no-underscore-dangle": "off",
+      "no-use-before-define": "off",
+      "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+      "react/no-array-index-key": "off",
+      "react/prop-types": "off",
+      "semi": ["error", "never"],
+      "react/destructuring-assignment": "off",
+      "jsx-a11y/click-events-have-key-events":"off",
+      "jsx-a11y/no-static-element-interactions":"off",
+      "react/no-access-state-in-setstate":"off"
+    }
+  }

.prettierrc

@@ -1,7 +1,7 @@
 {
   "endOfLine": "lf",
   "semi": false,
-  "singleQuote": false,
+  "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5"
 }

README.md

@@ -1,30 +1,37 @@
+##  Example website with Prismic and Gatsby
 
-<div align="center">
-  <a href="https://www.gatsbyjs.org">
-    <img alt="Gatsby" src="https://www.gatsbyjs.org/monogram.svg" width="60" />
-  </a>
-  <h3><strong>+</strong></h3>
-  <a href="https://prismic.io">
-    <img alt="Prismic" src="https://prismic.io/website-assets/images/logo-dark.svg">
-  </a>
-</div>
-<h1 align="center">
-  Integrating Prismic data sources in Gatsby
-</h1>
-
-Example website demo that shows how to use the new Gatsby plugin for Prismic. You will require to have GraphQL enabled in your repository if you wish to use it _once it's widely available_.
+Example website demo that shows how to use the `gatsby-source-prismic` plugin.
 
 It showcases how a website for a coffee store could be designed and built, as well as the techniques you will have to use to generate pages dynamically when using a Prismic repository as a data source, while also being able to use the **preview** and **release** features.
 
-Based on the gatsby default starter and uses the [gatsby-source-prismic-graphql](https://github.com/birkir/gatsby-source-prismic-graphql) plugin for creating pages that can be drafted and previewed. Refer to its documentation for more details on how to use it.
+For more information, refer to the [official Prismic and Gatsby documentation](https://prismic.io/docs/technologies/gatsby).
 
-A deployment demo is available in Netlify: https://gatsby-coffee-demo.netlify.com/
+#
+## Demo website
 
-### Running locally 
+A deployment demo is available in Netlify: [https://gatsby-coffee-demo.netlify.com/](https://gatsby-coffee-demo.netlify.com/)
+#
+
+## 1. Launch the project
+
+### Install the CLI
 ```
-gatsby develop
+npm install -g prismic-cli
 ```
 
+### Run the theme command
+navigate where you want to create your new project folder and run the following command:
+```
+prismic theme --theme-url https://github.com/prismicio/prismic-gatsby-coffee-sample --conf prismic-configuration.js
+```
+This will create a new Prismic content repository, set up the custom types, create a few documents, and install the project code.
+
+## 1. Run the project 
+```
+gatsby develop
+```
+Your site should now be running locally at [http://localhost:8000](http://localhost:8000)!
+#
 ### Building
 
 ```

gatsby-browser.js

@@ -1,4 +1,8 @@
-const { registerLinkResolver } = require('gatsby-source-prismic-graphql');
-const { linkResolver } = require('./src/utils/linkResolver');
-
-registerLinkResolver(linkResolver);
+import * as React from 'react'
+import { PreviewStoreProvider } from 'gatsby-source-prismic'
+
+const wrapRootElement = ({ element }) => (
+  <PreviewStoreProvider>{element}</PreviewStoreProvider>
+)
+
+export default wrapRootElement

gatsby-config.js

@@ -1,49 +1,63 @@
-const { apiEndpoint } = require('./prismic-configuration');
-var repo = /([^\/]+)\.prismic\.io/.exec(apiEndpoint);
+const { prismicRepo, releaseID, accessToken } = require('./prismic-configuration')
+const linkResolver = require('./src/utils/linkResolver')
+
+const repoName = process.env.PRISMIC_REPO_NAME || prismicRepo
+const apiKey = process.env.PRISMIC_API_KEY || accessToken
+const prismicReleaseID = process.env.PRISMIC_RELEASE_ID || releaseID
+
+const authorSchema = require('./custom_types/author.json')
+const blogHomeSchema = require('./custom_types/blog_home.json')
+const blogPostSchema = require('./custom_types/blog_post.json')
+const homepageSchema = require('./custom_types/homepage.json')
+const landingPageSchema = require('./custom_types/landing_page.json')
+const layoutSchema = require('./custom_types/layout.json')
+const productSchema = require('./custom_types/product.json')
+const productsSchema = require('./custom_types/products.json')
+
+const gastbySourcePrismicConfig = {
+  resolve: 'gatsby-source-prismic',
+  options: {
+    repositoryName: repoName,
+    accessToken: apiKey,
+    releaseID: prismicReleaseID,
+    prismicToolbar: true,
+    linkResolver: () => linkResolver,
+    schemas: {
+      author: authorSchema,
+      blog_home: blogHomeSchema,
+      blog_post: blogPostSchema,
+      homepage: homepageSchema,
+      landing_page: landingPageSchema,
+      layout: layoutSchema,
+      product: productSchema,
+      products: productsSchema,
+    },
+  },
+}
 
 module.exports = {
   siteMetadata: {
-    title: `Coffee Shop Demo`,
-    description: `Gatsby + Prismic!`,
-    author: `@raulg`,
+    title: 'Coffee Shop Demo',
+    description: 'Gatsby + Prismic!',
+  },
+  flags: {
+    DEV_SSR: false,
   },
   plugins: [
-    `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-source-prismic-graphql`,
-      options: {
-        repositoryName: repo[1],
-        path: '/preview',
-        previews: true,
-        //accessToken: '...',
-        pages: [{
-          type: 'Product',
-          match: '/products/:uid',
-          path: '/product',
-          component: require.resolve('./src/templates/product.js')
-        },{
-          type: 'Blog_post',
-          match: '/blog/:uid',
-          path: '/blogpost',
-          component: require.resolve('./src/templates/blogPost.js')
-        }]
-      }
-    },
-    `gatsby-plugin-sass`,
+    gastbySourcePrismicConfig,
+    'gatsby-plugin-react-helmet',
+    'gatsby-plugin-sass',
     {
-      resolve: `gatsby-plugin-manifest`,
+      resolve: 'gatsby-plugin-manifest',
       options: {
-        name: `gatsby-starter-default`,
-        short_name: `starter`,
-        start_url: `/`,
-        background_color: `#663399`,
-        theme_color: `#663399`,
-        display: `minimal-ui`,
-        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
+        name: 'gatsby-starter-default',
+        short_name: 'starter',
+        start_url: '/',
+        background_color: '#663399',
+        theme_color: '#663399',
+        display: 'minimal-ui',
+        icon: 'src/images/coffee.png', // This path is relative to the root of the site.
       },
     },
-    // this (optional) plugin enables Progressive Web App + Offline functionality
-    // To learn more, visit: https://gatsby.dev/offline
-    // 'gatsby-plugin-offline',
   ],
 }

gatsby-node.js

@@ -0,0 +1,40 @@
+const path = require('path')
+
+exports.createPages = async ({ graphql, actions }) => {
+  const { createPage } = actions
+
+  const pages = await graphql(`
+    {
+      allPrismicProduct {
+        nodes {
+          uid
+          type
+          url
+        }
+      }
+      allPrismicBlogPost {
+        nodes {
+          uid
+          type
+          url
+        }
+      }
+    }
+  `)
+
+  pages.data.allPrismicProduct.nodes.forEach((page) => {
+    createPage({
+      path: page.url,
+      component: path.resolve(__dirname, 'src/templates/ourProduct.js'),
+      context: { ...page },
+    })
+  })
+
+  pages.data.allPrismicBlogPost.nodes.forEach((page) => {
+    createPage({
+      path: page.url,
+      component: path.resolve(__dirname, 'src/templates/blogPost.js'),
+      context: { ...page },
+    })
+  })
+}

gatsby-ssr.js

@@ -0,0 +1,8 @@
+import * as React from 'react'
+import { PreviewStoreProvider } from 'gatsby-source-prismic'
+
+const wrapRootElement = ({ element }) => (
+  <PreviewStoreProvider>{element}</PreviewStoreProvider>
+)
+
+export default wrapRootElement