Dynamic titles

gatsby-config.js

@@ -1,8 +1,8 @@
 module.exports = {
   siteMetadata: {
-    title: `Gatsby Default Starter`,
-    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
-    author: `@gatsbyjs`,
+    title: `Coffee Shop Demo`,
+    description: `Gatsby + Prismic!`,
+    author: `@raulg`,
   },
   plugins: [
     `gatsby-plugin-react-helmet`,
@@ -14,13 +14,6 @@ module.exports = {
         previews: true,
       }
     },
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
-      },
-    },
     `gatsby-plugin-sass`,
     {
       resolve: `gatsby-plugin-manifest`,

gatsby-node.js

@@ -275,6 +275,7 @@ exports.createPages = createPages(async ({ graphql, actions }) => {
         allBlog_homes(uid:null){
           edges{
             node{
+              meta_title
               _meta{
                 uid
                 id

src/components/layouts/index.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { Link, StaticQuery, graphql } from 'gatsby'
 import { linkResolver } from '../../utils/linkResolver'
+import { Helmet } from 'react-helmet'
 
 import '../../stylesheets/main.scss'
 
@@ -10,13 +11,13 @@ class Layout extends React.Component {
     const layoutData = data.prismic.allLayouts.edges[0].node;
 
     const headerItems = layoutData.header_nav_items.map((item) =>
-      <Link className="header-nav-link" to={linkResolver(item.link._meta)}>
+      <Link key={item.link._meta.id} className="header-nav-link" to={linkResolver(item.link._meta)}>
         {item.text}
       </Link>
     )
 
     const navItems = layoutData.footer_nav_items.map((item) =>
-      <Link className="footer-nav-link" to={linkResolver(item.link._meta)}>
+      <Link key={item.link._meta.id} className="footer-nav-link" to={linkResolver(item.link._meta)}>
         {item.text}
       </Link>
     )
@@ -35,6 +36,10 @@ class Layout extends React.Component {
 
     return(
       <React.Fragment>
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>{layoutData.site_name}</title>
+        </Helmet>
         <div className="header" id="header">
           <div className="header-inner">
             <Link className="header-name" to="/">
@@ -84,12 +89,14 @@ export default props => (
                     ... on PRISMIC_Products{
                       _meta{
                         uid
+                        id
                         type
                       }
                     }
                     ... on PRISMIC_Blog_home{
                       _meta{
                         uid
+                        id
                         type
                       }
                     }
@@ -101,12 +108,14 @@ export default props => (
                     ... on PRISMIC_Products{
                       _meta{
                         uid
+                        id
                         type
                       }
                     }
                     ... on PRISMIC_Blog_home{
                       _meta{
                         uid
+                        id
                         type
                       }
                     }

src/components/slices/FeaturedItems.js

@@ -8,7 +8,7 @@ function renderProducts(slice) {
     <div key={index} className="products-grid-item-wrapper">
       <img className="products-grid-item-image" src={item.link_to_product.product_image.url} alt={item.link_to_product.product_image.alt}/>
       <p className="products-grid-item-name">
-        <Link to={linkResolver(item.link_to_product)}>
+        <Link to={linkResolver(item.link_to_product._meta)}>
           {RichText.asText(item.link_to_product.product_name)}
         </Link>
       </p>

src/templates/blogHome.js

@@ -4,6 +4,7 @@ import { linkResolver } from '../utils/linkResolver'
 import { withPreview } from '@prismicio/gatsby-source-prismic-graphql'
 import { Link } from 'gatsby'
 import Layout from '../components/layouts'
+import { Helmet } from 'react-helmet'
 
 class BlogHome extends React.Component {
   constructor(props){
@@ -56,6 +57,10 @@ class BlogHome extends React.Component {
   render() {
     return (
       <Layout>
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>{RichText.asText(this.state.doc.meta_title)}</title>
+        </Helmet>
         {this.renderBody()}
       </Layout>
     );

src/templates/blogPost.js

@@ -2,6 +2,8 @@ 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 Layout from '../components/layouts'
 
 class BlogPost extends React.Component {
@@ -57,6 +59,10 @@ class BlogPost extends React.Component {
   render() {
     return(
       <Layout>
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>{RichText.asText(this.state.doc.title)}</title>
+        </Helmet>
         {this.renderBody()}
       </Layout>
     );

src/templates/homepage.js

@@ -3,6 +3,7 @@ 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 {

src/templates/product.js

@@ -3,6 +3,8 @@ import { RichText } from 'prismic-reactjs'
 import { linkResolver } from '../utils/linkResolver'
 import { Link } from 'gatsby'
 import { withPreview } from '@prismicio/gatsby-source-prismic-graphql'
+import { Helmet } from 'react-helmet'
+
 import Layout from '../components/layouts'
 
 class Product extends React.Component {
@@ -102,6 +104,10 @@ class Product extends React.Component {
   render() {
     return (
       <Layout>
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>{RichText.asText(this.state.doc.product_name)}</title>
+        </Helmet>
         {this.renderBody()}
       </Layout>
     );

src/templates/productsHome.js

@@ -3,6 +3,8 @@ 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 {
@@ -57,6 +59,10 @@ class ProductsHome extends React.Component {
   render() {
     return (
       <Layout>
+        <Helmet>
+          <meta charSet="utf-8" />
+          <title>{RichText.asText(this.state.doc.title)}</title>
+        </Helmet>
         {this.renderBody()}
       </Layout>
     );