From c9126bc3e44e78bf99fcefeae8fdcd316c7e9a08 Mon Sep 17 00:00:00 2001 From: raulG Date: Wed, 3 Apr 2019 12:24:49 +0200 Subject: [PATCH] Birkir 3.0.2 Updated to work with gatsby-source-prismic-plugin@3.0.2 along with a functional refactor to handle the new approach for creating new pages from a template. --- .npmrc | 2 +- README.md | 2 +- gatsby-browser.js | 4 +- gatsby-config.js | 13 +- gatsby-node.js | 319 ---------------------------------- gatsby-ssr.js | 7 - package-lock.json | 137 ++++++++++++--- package.json | 2 +- src/pages/blog.js | 92 ++++++++++ src/pages/index.js | 182 +++++++++++++++++++ src/pages/products.js | 96 ++++++++++ src/templates/blogPost.js | 132 ++++++++------ src/templates/homepage.js | 94 ---------- src/templates/product.js | 218 +++++++++++++---------- src/templates/productsHome.js | 72 -------- 15 files changed, 706 insertions(+), 666 deletions(-) delete mode 100644 gatsby-node.js delete mode 100644 gatsby-ssr.js create mode 100644 src/pages/blog.js create mode 100644 src/pages/index.js create mode 100644 src/pages/products.js delete mode 100644 src/templates/homepage.js delete mode 100644 src/templates/productsHome.js diff --git a/.npmrc b/.npmrc index ae64359..778eed5 100644 --- a/.npmrc +++ b/.npmrc @@ -1 +1 @@ -//registry.npmjs.org/:_authToken=${NPM_TOKEN} +# registry.npmjs.org/:_authToken=${NPM_TOKEN} diff --git a/README.md b/README.md index 9f2c83f..ceac84b 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Example website demo that shows how to use the new Gatsby plugin for Prismic. Yo 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://www.npmjs.com/package/@prismicio/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. +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. A deployment demo is available in Netlify: https://gatsby-coffee-demo-alpha.netlify.com/ diff --git a/gatsby-browser.js b/gatsby-browser.js index f8a8341..3f56a45 100644 --- a/gatsby-browser.js +++ b/gatsby-browser.js @@ -1,4 +1,4 @@ -const { registerResolvers } = require('@prismicio/gatsby-source-prismic-graphql'); +const { registerLinkResolver } = require('gatsby-source-prismic-graphql'); const { linkResolver } = require('./src/utils/linkResolver'); -registerResolvers(linkResolver); \ No newline at end of file +registerLinkResolver(linkResolver); \ No newline at end of file diff --git a/gatsby-config.js b/gatsby-config.js index 851d690..f63ab31 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -7,11 +7,22 @@ module.exports = { plugins: [ `gatsby-plugin-react-helmet`, { - resolve: `@prismicio/gatsby-source-prismic-graphql`, + resolve: `gatsby-source-prismic-graphql`, options: { repositoryName: `prismic-gatsby-coffee`, path: '/preview', previews: true, + pages: [{ + type: 'Product', + match: '/products/:uid', + path: '/products', + component: require.resolve('./src/templates/product.js') + },{ + type: 'Blog_post', + match: '/blog/:uid', + path: '/blog/', + component: require.resolve('./src/templates/blogPost.js') + }] } }, `gatsby-plugin-sass`, diff --git a/gatsby-node.js b/gatsby-node.js deleted file mode 100644 index 22d2732..0000000 --- a/gatsby-node.js +++ /dev/null @@ -1,319 +0,0 @@ -const path = require('path') -const { createPages } = require('@prismicio/gatsby-source-prismic-graphql') - -exports.createPages = createPages(async ({ graphql, actions }) => { - const { createPrismicPage } = actions - - const homepage = await graphql(` - { - prismic{ - allHomepages(uid:null){ - edges{ - node{ - _meta{ - uid - id - type - } - title - banner_image - banner_text - body { - __typename - ... on PRISMIC_HomepageBodyFeatured_items { - type - primary { - section_title - button_label - button_link{ - __typename - ... on PRISMIC_Products { - title - _meta { - uid - id - lang - type - tags - } - } - } - } - fields { - link_to_product { - __typename - _linkType - ... on PRISMIC_Product { - product_name - product_image - sub_title - _meta{ - uid - id - lang - type - tags - } - } - } - } - } - ... on PRISMIC_HomepageBodyCta_banner { - type - primary { - image_banner - banner_title - banner_text - cta_label - cta_link { - __typename - ... on PRISMIC__ExternalLink { - url - } - } - } - } - ... on PRISMIC_HomepageBodyBig_bullet_item { - type - primary { - title_section - } - fields { - description_paragraph - } - } - ... on PRISMIC_HomepageBodySeparator { - type - } - ... on PRISMIC_HomepageBodyText_block { - type - primary { - title1 - paragraph - } - } - } - } - } - } - } - } - `) - if (homepage.errors) { - Promise.reject(homepage.errors) - } - - homepage.data.prismic.allHomepages.edges.forEach(({ node }) => { - createPrismicPage({ - pattern: `/`, - component: path.resolve(`./src/templates/homepage.js`), - context: { - data: node - }, - }) - }) - - const products = await graphql(` - { - prismic{ - allProducts{ - edges{ - node{ - _meta{ - type - id - uid - } - product_name - product_image - sub_title - rich_content - button_link{ - __typename - ... on PRISMIC__ExternalLink{ - url - } - } - button_label - title - product_description - related_products_title - related_products{ - product1{ - __typename - ... on PRISMIC_Product{ - product_image - product_name - sub_title - _meta{ - uid - id - type - } - } - } - } - } - } - } - } - } - `) - if(products.errors) { - Promise.reject(products.errors) - } - - products.data.prismic.allProducts.edges.forEach(({ node }) => { - createPrismicPage({ - pattern: `/products/:uid`, - params: { - uid: node._meta.uid - }, - component: path.resolve(`./src/templates/product.js`), - context: { - data: node - } - }) - }) - - const productHome = await graphql(` - { - prismic{ - allProductss(uid:null){ - edges{ - node{ - title - meta_title - meta_description - _meta{ - uid - id - type - } - } - } - } - allProducts{ - edges{ - node{ - _meta{ - type - id - uid - } - product_name - product_image - sub_title - } - } - } - } - } - `) - if(productHome.errors) { - Promise.reject(productHome.errors) - } - - productHome.data.prismic.allProductss.edges.forEach(({ node }) => { - createPrismicPage({ - pattern: `/products/`, - component: path.resolve(`./src/templates/productsHome.js`), - context: { - data: node, - extra: productHome.data.prismic.allProducts.edges - } - }) - }) - - const blogPosts = await graphql(` - { - prismic{ - allBlog_posts{ - edges{ - node{ - _meta{ - uid - id - } - author{ - _linkType - ... on PRISMIC_Author{ - name - bio - picture - } - } - image - title - rich_content - } - } - } - } - } - `) - if(blogPosts.error) { - Promise.reject(blogPosts.error) - } - - blogPosts.data.prismic.allBlog_posts.edges.forEach(({ node }) => { - createPrismicPage({ - pattern: `/blog/:uid`, - params: { - uid: node._meta.uid - }, - component: path.resolve(`./src/templates/blogPost.js`), - context: { - data: node - } - }) - }) - - const blogHome = await graphql(` - { - prismic{ - allBlog_homes(uid:null){ - edges{ - node{ - meta_title - _meta{ - uid - id - type - } - } - } - } - allBlog_posts{ - edges{ - node{ - _meta{ - uid - id - type - } - title - image - rich_content - } - } - } - } - } - `) - if (blogHome.errors) { - Promise.reject(blogHome.errors) - } - - blogHome.data.prismic.allBlog_homes.edges.forEach(({ node }) => { - createPrismicPage({ - pattern: `/blog/`, - component: path.resolve(`./src/templates/blogHome.js`), - context: { - data: node, - extra: blogHome.data.prismic.allBlog_posts.edges - } - }) - }) - -}) \ No newline at end of file diff --git a/gatsby-ssr.js b/gatsby-ssr.js deleted file mode 100644 index b17b8fc..0000000 --- a/gatsby-ssr.js +++ /dev/null @@ -1,7 +0,0 @@ -/** - * Implement Gatsby's SSR (Server Side Rendering) APIs in this file. - * - * See: https://www.gatsbyjs.org/docs/ssr-apis/ - */ - -// You can delete this file if you're not using it diff --git a/package-lock.json b/package-lock.json index a35fe48..a1048b9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -854,6 +854,24 @@ "to-fast-properties": "^2.0.0" } }, + "@emotion/is-prop-valid": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz", + "integrity": "sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==", + "requires": { + "@emotion/memoize": "0.7.1" + } + }, + "@emotion/memoize": { + "version": "0.7.1", + "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.1.tgz", + "integrity": "sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==" + }, + "@emotion/unitless": { + "version": "0.7.3", + "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.3.tgz", + "integrity": "sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==" + }, "@gatsbyjs/relay-compiler": { "version": "2.0.0-printer-fix.2", "resolved": "https://registry.npmjs.org/@gatsbyjs/relay-compiler/-/relay-compiler-2.0.0-printer-fix.2.tgz", @@ -891,21 +909,6 @@ "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz", "integrity": "sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==" }, - "@prismicio/gatsby-source-prismic-graphql": { - "version": "0.0.6", - "resolved": "https://registry.npmjs.org/@prismicio/gatsby-source-prismic-graphql/-/gatsby-source-prismic-graphql-0.0.6.tgz", - "integrity": "sha512-mtH5HmTGNWFENciE8xQxLUTwOURAuNAx6mejUYCwAHtFX8a9ljGTCGY7kd+xCxN1ESirNLA+XxkWcEm4R62AWg==", - "requires": { - "apollo-boost": "^0.1.23", - "apollo-link-context": "^1.0.12", - "apollo-link-http-common": "^0.2.8", - "gatsby-source-graphql-universal": "^2.0.0", - "lodash": "^4.17.11", - "prismic-javascript": "^2.0.1", - "traverse": "^0.6.6", - "url-pattern": "^1.0.3" - } - }, "@reach/router": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@reach/router/-/router-1.2.1.tgz", @@ -1916,11 +1919,27 @@ "resolved": "https://registry.npmjs.org/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-2.6.2.tgz", "integrity": "sha512-JrYM0ACSMmt27PeMtwp+5N5c8S1pJkCYWI+Jt+12ERqW3bYKWGCJsdEky2lQRLezLFCiJE7+mXANc91yMGf+HQ==" }, + "babel-plugin-styled-components": { + "version": "1.10.0", + "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.10.0.tgz", + "integrity": "sha512-sQVKG8irFXx14ZfaK1bBePirfkacl3j8nZwSZK+ZjsbnadRHKQTbhXbe/RB1vT6Vgkz45E+V95LBq4KqdhZUNw==", + "requires": { + "@babel/helper-annotate-as-pure": "^7.0.0", + "@babel/helper-module-imports": "^7.0.0", + "babel-plugin-syntax-jsx": "^6.18.0", + "lodash": "^4.17.10" + } + }, "babel-plugin-syntax-dynamic-import": { "version": "6.18.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-dynamic-import/-/babel-plugin-syntax-dynamic-import-6.18.0.tgz", "integrity": "sha1-jWomIpyDdFqZgqRBBRVyyqF5sdo=" }, + "babel-plugin-syntax-jsx": { + "version": "6.18.0", + "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz", + "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=" + }, "babel-plugin-syntax-object-rest-spread": { "version": "6.13.0", "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz", @@ -2576,6 +2595,11 @@ } } }, + "camelize": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz", + "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=" + }, "caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -3228,6 +3252,11 @@ "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz", "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=" }, + "css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=" + }, "css-color-names": { "version": "0.0.4", "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz", @@ -3334,6 +3363,16 @@ } } }, + "css-to-react-native": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-2.3.0.tgz", + "integrity": "sha512-IhR7bNIrCFwbJbKZOAjNDZdwpsbjTN6f1agXeELHDqg1wHPA8c2QLruttKOW7hgMGetkfraRJCIEMrptifBfVw==", + "requires": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^3.3.0" + } + }, "css-tree": { "version": "1.0.0-alpha.28", "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.28.tgz", @@ -6037,9 +6076,9 @@ }, "dependencies": { "@types/node": { - "version": "9.6.46", - "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.46.tgz", - "integrity": "sha512-W8W76mPzOkN1KuzB25yFIqv1ESj2gp8MILJByUnLcDhOZsuSaDhY8vXLEP9+6OWCqNe7W+3zh2L+rb8kg9rsFA==" + "version": "9.6.47", + "resolved": "https://registry.npmjs.org/@types/node/-/node-9.6.47.tgz", + "integrity": "sha512-56wEJWXZs+3XXoTe/OCpdZ6czrONhy+6hT0GdPOb7HvudLTMJ1T5tuZPs37K5cPR5t+J9+vLPFDQgUQ8NWJE1w==" }, "apollo-link": { "version": "1.2.1", @@ -6054,9 +6093,9 @@ } }, "gatsby-source-graphql-universal": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/gatsby-source-graphql-universal/-/gatsby-source-graphql-universal-2.0.4.tgz", - "integrity": "sha512-ni9ipTrR5RFBpPz/JEEftGf2Xv8IxOYYlS0BM6OPRfzGxLXlRhBGc4CZlF3OwIO0Q7IRWY1N81GkCWNVSoNnPQ==", + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/gatsby-source-graphql-universal/-/gatsby-source-graphql-universal-3.0.5.tgz", + "integrity": "sha512-zOFIQlWLAbOdThPkCqNDrteIycq4phwu7ejHYruKNx0er8WY3UtSAzDiHW/k7tWspJkqESUFdTDyVQTBgDK6EQ==", "requires": { "@babel/runtime": "^7.0.0", "@types/graphql": "^14.0.4", @@ -6066,6 +6105,7 @@ "graphql-tag": "^2.10.0", "graphql-tools": "^4.0.3", "lodash.clonedeep": "4.5.0", + "lodash.get": "^4.4.2", "traverse": "^0.6.6" }, "dependencies": { @@ -6083,6 +6123,28 @@ } } }, + "gatsby-source-prismic-graphql": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/gatsby-source-prismic-graphql/-/gatsby-source-prismic-graphql-3.0.2.tgz", + "integrity": "sha512-ozZTS2TWjvLCx9gGJ8KjLmPSnlzxAuBmhZ47245XeGIlV2PAAG38zRu7qX+32DeeLS0+GX3FZDc2mu+EfHBr6g==", + "requires": { + "apollo-link-context": "^1.0.17", + "gatsby-source-graphql": "^2.0.15", + "gatsby-source-graphql-universal": "^3.0.5", + "path-to-regexp": "^3.0.0", + "prismic-javascript": "^2.0.1", + "styled-components": "^4.1.3", + "traverse": "^0.6.6", + "url-pattern": "^1.0.3" + }, + "dependencies": { + "path-to-regexp": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-3.0.0.tgz", + "integrity": "sha512-ZOtfhPttCrqp2M1PBBH4X13XlvnfhIwD7yCLx+GoGoXRPQyxGOTdQMpIzPSPKXAJT/JQrdfFrgdJOyAzvgpQ9A==" + } + } + }, "gauge": { "version": "2.7.4", "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz", @@ -7806,6 +7868,11 @@ "mimic-fn": "^1.0.0" } }, + "memoize-one": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.2.tgz", + "integrity": "sha512-o7lldN4fs/axqctc03NF+PMhd2veRrWeJ2n2GjEzUPBD4F9rmNg4A+bQCACIzwjHJEXuYv4aFFMaH35KZfHUrw==" + }, "memory-fs": { "version": "0.4.1", "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz", @@ -11740,6 +11807,24 @@ "schema-utils": "^0.4.5" } }, + "styled-components": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-4.2.0.tgz", + "integrity": "sha512-L/LzkL3ZbBhqIVHdR7DbYujy4tqvTNRfc+4JWDCYyhTatI+8CRRQUmdaR0+ARl03DWsfKLhjewll5uNLrqrl4A==", + "requires": { + "@babel/helper-module-imports": "^7.0.0", + "@emotion/is-prop-valid": "^0.7.3", + "@emotion/unitless": "^0.7.0", + "babel-plugin-styled-components": ">= 1", + "css-to-react-native": "^2.2.2", + "memoize-one": "^5.0.0", + "prop-types": "^15.5.4", + "react-is": "^16.6.0", + "stylis": "^3.5.0", + "stylis-rule-sheet": "^0.0.10", + "supports-color": "^5.5.0" + } + }, "stylehacks": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz", @@ -11772,6 +11857,16 @@ } } }, + "stylis": { + "version": "3.5.4", + "resolved": "https://registry.npmjs.org/stylis/-/stylis-3.5.4.tgz", + "integrity": "sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==" + }, + "stylis-rule-sheet": { + "version": "0.0.10", + "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz", + "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==" + }, "supports-color": { "version": "5.5.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", diff --git a/package.json b/package.json index 675e398..b82c509 100644 --- a/package.json +++ b/package.json @@ -5,12 +5,12 @@ "version": "0.1.0", "author": "Raul Gonzalez @raulg", "dependencies": { - "@prismicio/gatsby-source-prismic-graphql": "^0.0.6", "gatsby": "^2.1.32", "gatsby-plugin-manifest": "^2.0.24", "gatsby-plugin-offline": "^2.0.25", "gatsby-plugin-react-helmet": "^3.0.9", "gatsby-plugin-sass": "^2.0.11", + "gatsby-source-prismic-graphql": "^3.0.2", "node-sass": "^4.11.0", "prismic-javascript": "^2.0.1", "prismic-reactjs": "^0.3.2", diff --git a/src/pages/blog.js b/src/pages/blog.js new file mode 100644 index 0000000..369e97b --- /dev/null +++ b/src/pages/blog.js @@ -0,0 +1,92 @@ +import React from 'react' +import { RichText } from 'prismic-reactjs' +import { linkResolver } from '../utils/linkResolver' +import { Link, graphql } from 'gatsby' +import { Helmet } from 'react-helmet' + +import Layout from '../components/layouts' + +export const query = graphql` +{ + prismic{ + allBlog_homes(uid:null){ + edges{ + node{ + meta_title + _meta{ + uid + id + type + } + } + } + } + allBlog_posts{ + edges{ + node{ + _meta{ + uid + id + type + } + title + image + rich_content + } + } + } + } +} +` + +const RenderPosts = ({ posts }) => { + return posts.map((item) => +
+
+ {item.node.image.alt} +

+ {RichText.asText(item.node.title)} +

+

+ {RichText.asText(item.node.rich_content).substring(0, 158)} … +

+
+ + Read post + +
+
+
+ ) +} + +const RenderBody = ({ blogHome, posts }) => ( + +
+
+
+ +
+
+ +
+
+ +
+ +) + +export default ({ data }) => { + const doc = data.prismic.allBlog_homes.edges.slice(0,1).pop(); + if(!doc) return null; + + return( + + + + {RichText.asText(doc.node.meta_title)} + + + + ); +} \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js new file mode 100644 index 0000000..3575619 --- /dev/null +++ b/src/pages/index.js @@ -0,0 +1,182 @@ +import React from 'react' +import { RichText } from 'prismic-reactjs' +import { linkResolver } from '../utils/linkResolver' +import { graphql } from 'gatsby'; +import { CTABanner, FeaturedItems, NumberedItems, Separator, TextBlock } from '../components/slices' + +import Layout from '../components/layouts' + +export const query = graphql` +{ + prismic{ + allHomepages(uid:null){ + edges{ + node{ + _meta{ + uid + id + type + } + title + banner_image + banner_text + body { + __typename + ... on PRISMIC_HomepageBodyFeatured_items { + type + primary { + section_title + button_label + button_link{ + __typename + ... on PRISMIC_Products { + title + _meta { + uid + id + lang + type + tags + } + } + } + } + fields { + link_to_product { + __typename + _linkType + ... on PRISMIC_Product { + product_name + product_image + sub_title + _meta{ + uid + id + lang + type + tags + } + } + } + } + } + ... on PRISMIC_HomepageBodyCta_banner { + type + primary { + image_banner + banner_title + banner_text + cta_label + cta_link { + __typename + ... on PRISMIC__ExternalLink { + url + } + } + } + } + ... on PRISMIC_HomepageBodyBig_bullet_item { + type + primary { + title_section + } + fields { + description_paragraph + } + } + ... on PRISMIC_HomepageBodySeparator { + type + } + ... on PRISMIC_HomepageBodyText_block { + type + primary { + title1 + paragraph + } + } + } + } + } + } + } +} +` + +const RenderSlices = ({ slices }) => { + return slices.map((slice, index) => { + const res = (() => { + switch(slice.type) { + case 'cta_banner': return ( +
+ +
+ ) + + case 'featured_items': return ( +
+ +
+ ) + + case 'big_bullet_item': return ( +
+ +
+ ) + + case 'separator': return ( +
+ +
+ ) + + case 'text_block': return ( +
+ +
+ ) + + default: return + } + })(); + return res; + }) +} + +const RenderBody = ({ home }) => ( + +
+
+
+ {RichText.render(home.title, linkResolver)} +
+
+
+ +
+ {home.banner_image.alt} +
+
+ {RichText.render(home.banner_text, linkResolver)} +
+
+
+ +
+ +
+ +); + +export default ({ data }) => { + const doc = data.prismic.allHomepages.edges.slice(0,1).pop(); + if(!doc) return null; + + return( + + + + ) + +} + diff --git a/src/pages/products.js b/src/pages/products.js new file mode 100644 index 0000000..00c9008 --- /dev/null +++ b/src/pages/products.js @@ -0,0 +1,96 @@ +import React from 'react' +import { RichText } from 'prismic-reactjs' +import { linkResolver } from '../utils/linkResolver' +import { Link, graphql } from 'gatsby' +import { Helmet } from 'react-helmet' + +import Layout from '../components/layouts' + +export const query = graphql` +{ + prismic{ + allProductss(uid:null){ + edges{ + node{ + title + meta_title + meta_description + _meta{ + uid + id + type + } + } + } + } + allProducts{ + edges{ + node{ + _meta{ + type + id + uid + } + product_name + product_image + sub_title + } + } + } + } +} +` + +const RenderProductList = ({ products }) => { + return products.map((item) => +
+ + {item.node.product_image.alt}/ +

+ {RichText.asText(item.node.product_name)} +

+ +

{RichText.asText(item.node.sub_title)}

+
+ ) +} + +const RenderBody = ({ productHome, products }) => ( + +
+
+
+ +
+
+
+
+ {RichText.render(productHome.title, linkResolver)} +
+
+
+
+ +
+
+ +
+ +) + + +export default ({ data }) => { + const doc = data.prismic.allProductss.edges.slice(0,1).pop(); + if(!doc) return null; + + return ( + + + + {RichText.asText(doc.node.title)} + + + + ); +} + diff --git a/src/templates/blogPost.js b/src/templates/blogPost.js index 214d9df..c367e16 100644 --- a/src/templates/blogPost.js +++ b/src/templates/blogPost.js @@ -1,72 +1,92 @@ import React from 'react' import { RichText } from 'prismic-reactjs' import { linkResolver } from '../utils/linkResolver' -import { withPreview } from '@prismicio/gatsby-source-prismic-graphql' import { Helmet } from 'react-helmet' +import { graphql } from 'gatsby' import Layout from '../components/layouts' -class BlogPost extends React.Component { - constructor(props){ - super(props); - this.state = { - doc: this.props.pageContext.data +export const query = graphql` +{ + prismic{ + allBlog_posts{ + edges{ + node{ + _meta{ + uid + id + } + author{ + _linkType + ... on PRISMIC_Author{ + name + bio + picture + } + } + image + title + rich_content + } + } } } +} +` - renderBody(){ - return ( - -
-
-
+const RenderBody = ({ blogPost }) => ( + +
+
+
-
-
-
- {this.state.doc.image.alt}/ -
-
- {RichText.render(this.state.doc.title, linkResolver)} -
-
- {RichText.render(this.state.doc.rich_content, linkResolver)} -
-
- {this.state.doc.author && this.state.doc.author.picture - ? {this.state.doc.author.picture.alt} - : '' - } -
- {this.state.doc.author && this.state.doc.author.name - ?

{RichText.asText(this.state.doc.author.name)}

- : '' - } - {this.state.doc.author && this.state.doc.author.bio - ?

{RichText.asText(this.state.doc.author.bio)}

- : '' - } -
-
+
+
+
+ {blogPost.image.alt}/ +
+
+ {RichText.render(blogPost.title, linkResolver)} +
+
+ {RichText.render(blogPost.rich_content, linkResolver)} +
+
+ {blogPost.author && blogPost.author.picture + ? {blogPost.author.picture.alt} + : '' + } +
+ {blogPost.author && blogPost.author.name + ?

{RichText.asText(blogPost.author.name)}

+ : '' + } + {blogPost.author && blogPost.author.bio + ?

{RichText.asText(blogPost.author.bio)}

+ : '' + }
-
+
+ +
-
- - ) - } +
+ +) - render() { - return( - - - - {RichText.asText(this.state.doc.title)} - - {this.renderBody()} - - ); - } +const BlogPost = props => { + const doc = props.data.prismic.allBlog_posts.edges.slice(0,1).pop(); + if(!doc) return null; + + return( + + + + {RichText.asText(doc.node.title)} + + + + ) } -export default withPreview(BlogPost) \ No newline at end of file +export default BlogPost; \ No newline at end of file diff --git a/src/templates/homepage.js b/src/templates/homepage.js deleted file mode 100644 index e1a8f13..0000000 --- a/src/templates/homepage.js +++ /dev/null @@ -1,94 +0,0 @@ -import React from 'react' -import { RichText } from 'prismic-reactjs' -import { linkResolver } from '../utils/linkResolver' -import { CTABanner, FeaturedItems, NumberedItems, Separator, TextBlock } from '../components/slices' -import { withPreview } from '@prismicio/gatsby-source-prismic-graphql' - -import Layout from '../components/layouts' - -class HomePage extends React.Component { - constructor(props) { - super(props); - this.state = { - doc: this.props.pageContext.data - } - } - - renderSlices(slices){ - return slices.map((slice, index) => { - const res = (() => { - switch(slice.type) { - case 'cta_banner': return ( -
- -
- ) - - case 'featured_items': return ( -
- -
- ) - - case 'big_bullet_item': return ( -
- -
- ) - - case 'separator': return ( -
- -
- ) - - case 'text_block': return ( -
- -
- ) - - default: return - } - })(); - return res; - }) - } - - renderBody() { - return ( - -
-
-
- {RichText.render(this.state.doc.title, linkResolver)} -
-
-
- -
- {this.state.doc.banner_image.alt} -
-
- {RichText.render(this.state.doc.banner_text, linkResolver)} -
-
-
- -
- {this.renderSlices(this.state.doc.body)} -
- - ); - } - - render() { - return ( - - {this.renderBody()} - - ); - } -} - -export default withPreview(HomePage) \ No newline at end of file diff --git a/src/templates/product.js b/src/templates/product.js index 5646f86..343f78c 100644 --- a/src/templates/product.js +++ b/src/templates/product.js @@ -1,117 +1,153 @@ import React from 'react' import { RichText } from 'prismic-reactjs' import { linkResolver } from '../utils/linkResolver' -import { Link } from 'gatsby' -import { withPreview } from '@prismicio/gatsby-source-prismic-graphql' +import { Link, graphql } from 'gatsby' import { Helmet } from 'react-helmet' import Layout from '../components/layouts' -class Product extends React.Component { - constructor(props){ - super(props); - this.state = { - doc: this.props.pageContext.data +export const query = graphql` +{ + prismic{ + allProducts{ + edges{ + node{ + _meta{ + type + id + uid + } + product_name + product_image + sub_title + rich_content + button_link{ + __typename + ... on PRISMIC__ExternalLink{ + url + } + } + button_label + title + product_description + related_products_title + related_products{ + product1{ + __typename + ... on PRISMIC_Product{ + product_image + product_name + sub_title + _meta{ + uid + id + type + } + } + } + } + } + } } } +} +` +function handleClickAddCart(event) { + event.preventDefault() + window.alert(`No. Not today.\nWe're integrating the GraphQL API at the moment, so coffee delivery is temporarily unavailable.`) +} - handleClickAddCart(event) { - event.preventDefault() - window.alert(`No. Not today.\nWe're integrating the GraphQL API at the moment, so coffee delivery is temporarily unavailable.`) - } +const RenderRelatedProducts = ({ related }) => { + return related.map((item) => +
+ {item.product1.product_image.alt}/ +

+ + {RichText.asText(item.product1.product_name)} + +

+

{RichText.asText(item.product1.sub_title)}

+
+ ) +} - renderRelatedProducts(related) { - return related.map((item) => -
- {item.product1.product_image.alt}/ -

- - {RichText.asText(item.product1.product_name)} - -

-

{RichText.asText(item.product1.sub_title)}

-
- ) - } +const RenderBody = ({ product }) => ( + +
+
+
- renderBody() { - return ( - +
+
-
-
- -
- -
-
-
- {this.state.doc.product_image.alt} -
-
- {RichText.render(this.state.doc.product_name, linkResolver)} -
-
- {RichText.render(this.state.doc.rich_content, linkResolver)} -
- -
+
+ {product.product_image.alt} +
+
+ {RichText.render(product.product_name, linkResolver)}
-
-
- -
-
-
- {RichText.render(this.state.doc.title, linkResolver)} +
+ {RichText.render(product.rich_content, linkResolver)}
-
- {RichText.render(this.state.doc.product_description, linkResolver)} +
-
+
+
+ -
-
-
-
+
+
+
+ {RichText.render(product.title, linkResolver)}
+
+ {RichText.render(product.product_description, linkResolver)} +
+
+
-
-
-
-
- {RichText.render(this.state.doc.related_products_title, linkResolver)} -
-
-
-
- {this.renderRelatedProducts(this.state.doc.related_products)} -
-
+
+
+
+
+
+
+
+
+
+ {RichText.render(product.related_products_title, linkResolver)} +
+
+
+ +
+
-
- - ); - } +
- render() { - return ( - - - - {RichText.asText(this.state.doc.product_name)} - - {this.renderBody()} - - ); - } +
+ +) + +const Product = props => { + const doc = props.data.prismic.allProducts.edges.slice(0,1).pop(); + if(!doc) return null; + + return ( + + + + {RichText.asText(doc.node.product_name)} + + + + ) } -export default withPreview(Product) \ No newline at end of file +export default Product \ No newline at end of file diff --git a/src/templates/productsHome.js b/src/templates/productsHome.js deleted file mode 100644 index f569dab..0000000 --- a/src/templates/productsHome.js +++ /dev/null @@ -1,72 +0,0 @@ -import React from 'react' -import { RichText } from 'prismic-reactjs' -import { linkResolver } from '../utils/linkResolver' -import { withPreview } from '@prismicio/gatsby-source-prismic-graphql' -import { Link } from 'gatsby' -import { Helmet } from 'react-helmet' - -import Layout from '../components/layouts' - -class ProductsHome extends React.Component { - constructor(props){ - super(props); - this.state = { - doc: this.props.pageContext.data, - products: this.props.pageContext.extra - } - } - - renderProductList() { - return this.state.products.map((item) => -
- - {item.node.product_image.alt}/ -

- {RichText.asText(item.node.product_name)} -

- -

{RichText.asText(item.node.sub_title)}

-
- ) - } - - renderBody() { - return ( - -
-
-
- -
-
-
-
- {RichText.render(this.state.doc.title, linkResolver)} -
-
-
-
- {this.renderProductList()} -
-
- -
- - ) - } - - - render() { - return ( - - - - {RichText.asText(this.state.doc.title)} - - {this.renderBody()} - - ); - } -} - -export default withPreview(ProductsHome) \ No newline at end of file