fix metadata and add browser api usage

README.md

@@ -1,3 +1,5 @@
+!['GatherContent & Gatsby'](hero.png)
+
 # gatsby-starter-gathercontent
 
 ## Getting Started
@@ -46,8 +48,14 @@ You can manually rebuild the project by re-running `npm run develop` or you can
 
 By using the refresh command, you won't need to manually restart your development server saving you time 👍
 
+### Query guide
+
+The GatherContent source plugin includes a [guide on sourcing data](https://github.com/gathercontent/gatsby-source-gathercontent/blob/main/docs/sourcing-from-gathercontent.md) from GatherContent. 
+
+It is recommended that you read the guide to better understand the schema.
+
 ## More reading
 
+- [Sourcing from GatherContent](https://github.com/gathercontent/gatsby-source-gathercontent/blob/main/docs/sourcing-from-gathercontent.md) - a guide on querying with GatherContent.
 - [GatherContent source plugin](https://github.com/gathercontent/gatsby-source-gathercontent)
-- [Sourcing from GatherContent](https://github.com/gathercontent/gatsby-source-gathercontent/docs/sourcing-from-gathercontent.md) - a guide on querying with GatherContent.
 - [gathercontent.js](https://github.com/gathercontent/gathercontent.js) - a helper library for getting content from GatherContent

gatsby-browser.js

@@ -0,0 +1,6 @@
+const React = require('react');
+const { Site } = require('./src/components/Site');
+
+exports.wrapPageElement = ({ element, props }) => {
+  return <Site {...props}>{element}</Site>
+}

gatsby-config.js

@@ -5,6 +5,7 @@ require("dotenv").config({
 module.exports = {
     flags: { PRESERVE_WEBPACK_CACHE: true },
     plugins: [
+        `gatsby-plugin-react-helmet`,
         `gatsby-plugin-postcss`,
         {
             resolve: "gatsby-source-gathercontent",
@@ -13,16 +14,6 @@ module.exports = {
                 apiKey: process.env.GATSBY_GC_API_KEY,
                 projectId: process.env.GATSBY_GC_PROJECT_ID,
             },
-        },
-        {
-            resolve: `gatsby-plugin-page-creator`,
-            options: {
-                path: `${__dirname}/src/pages`,
-                ignore: {
-                    // Example: Ignore `file.example.js`, `dir/s/file.example.tsx`
-                    patterns: [`node_modules`],
-                },
-            },
-        },
+        }
     ]
 }

package.json

@@ -23,12 +23,13 @@
     "@tailwindui/react": "^0.1.1",
     "classnames": "^2.2.6",
     "gatsby": "^3.1.2",
-    "gatsby-plugin-page-creator": "^3.1.0",
     "gatsby-plugin-postcss": "^4.1.0",
+    "gatsby-plugin-react-helmet": "^4.2.0",
     "gatsby-source-gathercontent": "^0.2.3",
     "postcss": "^8.2.8",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
+    "react-helmet": "^6.1.0",
     "tailwindcss": "^2.0.3"
   },
   "devDependencies": {

src/components/CourseContent.js

@@ -16,7 +16,7 @@ const Content = ({ content }) => (
       dangerouslySetInnerHTML={{ __html: content }}
       className="prose lg:prose-xl"
     />
-    <style jsx>{`
+    <style>{`
       .content :global(p) {
         margin-bottom: 1rem;
         font-size: 1.125rem;

src/components/Header.js

@@ -136,7 +136,7 @@ function Header({ shadow = false }) {
         </div>
       </div>
 
-      <style jsx>{`
+      <style>{`
         .logo {
           line-height: 20px;
         }

src/components/Layout.js

@@ -1,25 +1,23 @@
 import * as React from "react"
-import { Site } from './Site';
 import { Header } from './Header';
 import { Footer } from './Footer';
 
 import '../tailwind-setup.css';
 
-function Layout({ children, siteMetadata }) {
-  console.log(siteMetadata);
+function Layout({ children }) {
   return (
-    <Site siteMetadata={siteMetadata}>
+    <>
       <Header />
       <main>{children}</main>
       <Footer />
 
-      <style global jsx>{`
+      <style>{`
       body {
         font-family: 'IBM Plex Sans', sans-serif;
         color: #29333d;
       }
     `}</style>
-    </Site>
+    </>
   );
 }
 

src/components/Site.js

@@ -1,25 +1,28 @@
 import * as React from 'react';
+import { Helmet } from "react-helmet"
 
 const defaultMetadata = {
-  title: 'GatherContent University',
-  description: '',
-  keywords: '',
+  metadata: {
+    title: 'GatherContent University',
+    description: '',
+    keywords: '',
+  }
 }
 
-function Site({ children, siteMetadata = defaultMetadata }) {
+function Site({ children, data }) {
+  const { metadata } = data?.gathercontentItems?.itemContent || defaultMetadata;
+
   return (
-    <html lang="en">
-      <head>
-        <title>{siteMetadata?.title}</title>
-        <meta name="description" content={siteMetadata?.description} />
-        <meta name="keywords" content={siteMetadata?.keywords} />
+    <>
+      <Helmet>
+        <title>{metadata?.title}</title>
+        <meta name="description" content={metadata?.description} />
+        <meta name="keywords" content={metadata?.keywords} />
         <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      </head>
-      <body>
-        {children}
-      </body>
-    </html>
+      </Helmet>
+      {children}
+    </>
   )
 }
 

src/pages/courses/{gathercontentFolders.slug}.js

@@ -26,6 +26,12 @@ function CoursesPage({ data }) {
             pageHeading={pageContent.pageHeading}
             intro={pageContent.description}
           />
+          <div className="grid grid-cols-12 text-left font-medium px-4 uppercase text-base-1">
+            <div className="col-span-6 text-xs">Course Name</div>
+            <div className="col-span-2 text-xs">Credits</div>
+            <div className="col-span-2 text-xs">Hours</div>
+            <div className="col-span-2 text-xs">Weeks</div>
+          </div>
           <ul className="mb-8">
             {data.allGathercontentItems.nodes.map((course) => (
               <li key={course.id} className="">
@@ -73,7 +79,7 @@ export const query = graphql`
         }
       }
     }
-    allGathercontentItems(filter: {template: {slug: {eq: "course-record"}}, folder: {slug: {eq: $slug}}, status: {slug: {eq: "live-and-ready-for-review"}}}) {
+    allGathercontentItems(filter: {template: {slug: {eq: "course-record"}}, folder: {slug: {eq: $slug}}, status: {slug: {eq: "live"}}}) {
       nodes {
         id
         name

src/pages/index.js

@@ -34,7 +34,7 @@ function IndexPage({ data }) {
                 </h2>
               </Link>
               {edges.map((child) => (
-                <div key={child.id}>
+                <div key={child.node.id}>
                   <div>
                     <div className="grid grid-cols-12 text-left font-medium px-4 uppercase text-base-1">
                       <div className="col-span-6 text-xs">Course Name</div>
@@ -70,7 +70,7 @@ function IndexPage({ data }) {
         </Main>
       </Wrapper>
 
-      <style jsx>{`
+      <style>{`
         .id-header {
           scroll-margin-top: 1.5rem;
         }
@@ -91,9 +91,14 @@ export const query = graphql`
             optimisedImageUrl
           }
         }
+        metadata {
+          title
+          keywords
+          description
+        }
       }
     }
-    allGathercontentItems(sort: {fields: position}, filter: {status: {slug: {eq: "live-and-ready-for-review"}}, itemContent: {taxonomy: {tags: {elemMatch: {label: {eq: "Promotion"}}}}}}) {
+    allGathercontentItems(sort: {fields: position}, filter: {status: {slug: {eq: "live"}}, itemContent: {taxonomy: {tags: {elemMatch: {label: {eq: "Promotion"}}}}}}) {
       group(field: folder___id) {
         edges {
           node {