feat: automatically supply meta-data to head (carbon-design-system#133)

feat: automatically supply meta-data to head

packages/example/gatsby-config.js

@@ -1,6 +1,8 @@
 module.exports = {
   siteMetadata: {
     title: 'Gatsby Theme Carbon',
+    description: 'A Gatsby theme for the carbon design system',
+    keywords: 'gatsby,theme,carbon',
   },
   plugins: [
     {

packages/gatsby-theme-carbon/gatsby-config.js

@@ -8,6 +8,9 @@ module.exports = themeOptions => {
     siteMetadata: {
       isSearchEnabled,
       title: 'Gatsby Theme Carbon',
+      description:
+        'Add a description by supplying it to siteMetadata in your gatsby-config.js file.',
+      keywords: 'gatsby,theme,carbon,design',
     },
     pathPrefix: `/gatsby-theme-carbon`,
     plugins: [

packages/gatsby-theme-carbon/src/components/Meta.js

@@ -3,20 +3,18 @@ import { Helmet } from 'react-helmet';
 import { useMetadata } from '../util/hooks';
 
 const Meta = () => {
-  const siteMetadata = useMetadata();
+  const { title, description, keywords } = useMetadata();
   return (
     <Helmet
-      title={siteMetadata.title}
+      title={title}
       meta={[
         {
           name: 'description',
-          content:
-            'Carbon is the design system for IBM web and product. It is a series of individual styles, components, and guidelines used for creating unified UI.',
+          content: description,
         },
         {
           name: 'keywords',
-          content:
-            'IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud',
+          content: keywords,
         },
       ]}
     />

packages/gatsby-theme-carbon/src/util/hooks/useMetadata.js

@@ -6,6 +6,8 @@ const useMetadata = () => {
       site {
         siteMetadata {
           title
+          description
+          keywords
           isSearchEnabled
         }
       }