From ecf6bd8d75e77920752ca031fbaddec5bc529d07 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Tue, 17 Sep 2019 23:54:47 +0200
Subject: [PATCH] Add image meta tags

---
 src/components/Layout.js         |  7 ++---
 src/components/Meta.js           | 50 ++++++++++++++++++++++++++++++++
 src/pages/404.js                 |  4 +--
 src/pages/booking.js             |  4 +--
 src/pages/foreningene.js         |  4 +--
 src/pages/profil.js              |  4 +--
 src/pages/program.js             |  4 +--
 src/templates/association.js     |  9 ++++--
 src/templates/author.js          |  4 +--
 src/templates/blog.js            |  4 +--
 src/templates/category.js        |  4 +--
 src/templates/event-organizer.js |  4 +--
 src/templates/event-type.js      |  4 +--
 src/templates/event.js           | 17 ++++++-----
 src/templates/page.js            | 17 ++++++-----
 src/templates/post.js            | 19 +++++++-----
 src/templates/tag.js             |  4 +--
 src/templates/venue.js           | 11 ++++---
 18 files changed, 119 insertions(+), 55 deletions(-)
 create mode 100644 src/components/Meta.js

diff --git a/src/components/Layout.js b/src/components/Layout.js
index 5275147..9820328 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -1,17 +1,14 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import classNames from 'classnames'
 import Navbar from './Navbar'
 import Footer from './Footer'
+import Meta from './Meta'
 import '../css/main.scss'
 
 const TemplateWrapper = ({ children, classes }) => (
   <div>
-    <Helmet
-      titleTemplate="%s | Det Norske Studentersamfund"
-      defaultTitle="Det Norske Studentersamfund"
-    />
+    <Meta />
     <Navbar />
     <main className={classNames(classes)}>{children}</main>
     <Footer />
diff --git a/src/components/Meta.js b/src/components/Meta.js
new file mode 100644
index 0000000..af93f6f
--- /dev/null
+++ b/src/components/Meta.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Helmet } from 'react-helmet';
+
+const Meta = ({ title, description, image, pathname, article }) => {
+    const imageUrl = image && image.localFile && image.localFile.url
+    const meta = {
+        title: title,
+        description: description,
+        image: imageUrl,
+        url: pathname,
+    }
+    return (
+        <Helmet
+            title={meta.title}
+            titleTemplate="%s | Det Norske Studentersamfund"
+            defaultTitle="Det Norske Studentersamfund"
+        >
+            {meta.description && <meta name="description" content={meta.description} />}
+            {meta.image && <meta name="image" content={meta.image} />}
+            {meta.url && <meta property="og:url" content={meta.url} />}
+            {(article ? true : null) && (
+                <meta property="og:type" content="article" />
+            )}
+            {meta.title && <meta property="og:title" content={meta.title} />}
+            {meta.description && (
+                <meta property="og:description" content={meta.description} />
+            )}
+            {meta.image && <meta property="og:image" content={meta.image} />}
+        </Helmet>
+    )
+}
+
+export default Meta
+
+Meta.propTypes = {
+    title: PropTypes.string,
+    description: PropTypes.string,
+    image: PropTypes.string,
+    pathname: PropTypes.string,
+    article: PropTypes.bool,
+}
+
+Meta.defaultProps = {
+    title: null,
+    description: null,
+    image: null,
+    pathname: null,
+    article: false,
+}
diff --git a/src/pages/404.js b/src/pages/404.js
index eff8d3c..3f5b65b 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 const NotFoundPage = () => (
   <Layout>
-    <Helmet title="Ikke funnet" />
+    <Meta title="Ikke funnet" />
     <section className="page error error-404">
       <h1 className="section-title">404: Denne siden er på grisefest</h1>
       <p>Lykke til videre.</p>
diff --git a/src/pages/booking.js b/src/pages/booking.js
index 63648ca..9dd8dc2 100644
--- a/src/pages/booking.js
+++ b/src/pages/booking.js
@@ -1,7 +1,7 @@
 import React from 'react'
-import Helmet from 'react-helmet'
 import { graphql, useStaticQuery } from 'gatsby'
 import Img from 'gatsby-image'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import { VenueTemplate } from '../templates/venue'
 
@@ -65,7 +65,7 @@ export const BookingPage = () => {
 
   return (
     <Layout>
-      <Helmet title="Utleie" />
+      <Meta title="Utleie" />
       <section className="booking-page">
         <h1 className="page-title">{title}</h1>
         <p className="lead">
diff --git a/src/pages/foreningene.js b/src/pages/foreningene.js
index c805338..93de18b 100644
--- a/src/pages/foreningene.js
+++ b/src/pages/foreningene.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import AssociationList from '../components/AssociationList'
 
@@ -12,7 +12,7 @@ export default class AssociationListPage extends React.Component {
 
     return (
       <Layout>
-        <Helmet title="Foreningene" />
+        <Meta title="Foreningene" />
         <AssociationList associations={associations} title="Foreningene" />
       </Layout>
     )
diff --git a/src/pages/profil.js b/src/pages/profil.js
index ed2535e..bdb720c 100644
--- a/src/pages/profil.js
+++ b/src/pages/profil.js
@@ -1,10 +1,10 @@
 import React from 'react'
-import Helmet from 'react-helmet'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 const DesignManual = () => (
   <Layout>
-    <Helmet title="Profil" />
+    <Meta title="Profil" />
     <section className="page design-manual-page">
       <h1 className="section-title">Profil</h1>
       <p>Hei</p>
diff --git a/src/pages/program.js b/src/pages/program.js
index 02b9500..16d8c70 100644
--- a/src/pages/program.js
+++ b/src/pages/program.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import EventList from '../components/EventList'
 
@@ -12,7 +12,7 @@ export default class EventProgram extends React.Component {
 
     return (
       <Layout>
-        <Helmet title="Program" />
+        <Meta title="Program" />
         <EventList
           events={events}
           preTitle="Program"
diff --git a/src/templates/association.js b/src/templates/association.js
index 2ab0f5d..412faa8 100644
--- a/src/templates/association.js
+++ b/src/templates/association.js
@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 export const AssociationTemplate = ({
@@ -21,8 +22,8 @@ export const AssociationTemplate = ({
           {featuredMedia.localFile.childImageSharp ? (
             <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
           ) : (
-            <img src={featuredMedia.localFile.url} alt={title} />
-          )}
+              <img src={featuredMedia.localFile.url} alt={title} />
+            )}
         </div>
       )}
       {homepage && (
@@ -51,6 +52,10 @@ const AssociationPage = ({ data }) => {
 
   return (
     <Layout>
+      <Meta
+        title={association.title}
+        image={association.featured_media}
+      />
       <AssociationTemplate
         title={association.title}
         content={association.content}
diff --git a/src/templates/author.js b/src/templates/author.js
index 526f17c..b11618d 100644
--- a/src/templates/author.js
+++ b/src/templates/author.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 
@@ -23,7 +23,7 @@ const Author = props => {
 
   return (
     <Layout>
-      <Helmet title={name} />
+      <Meta title={name} />
       <PostList posts={posts} title={title} />
     </Layout>
   )
diff --git a/src/templates/blog.js b/src/templates/blog.js
index 78faa00..e626643 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 import Pagination from '../components/Pagination'
@@ -13,7 +13,7 @@ export default class BlogPage extends React.Component {
 
     return (
       <Layout>
-        <Helmet title="Nyheter" />
+        <Meta title="Nyheter" />
         <PostList posts={posts} title="Nyheter" />
         <Pagination pageContext={pageContext} pathPrefix="/" />
       </Layout>
diff --git a/src/templates/category.js b/src/templates/category.js
index dddd96c..4b3fdd3 100644
--- a/src/templates/category.js
+++ b/src/templates/category.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 
@@ -14,7 +14,7 @@ const Category = props => {
 
   return (
     <Layout>
-      <Helmet title={category} />
+      <Meta title={category} />
       <PostList posts={posts} title={title} />
     </Layout>
   )
diff --git a/src/templates/event-organizer.js b/src/templates/event-organizer.js
index 85f817a..3290c8e 100644
--- a/src/templates/event-organizer.js
+++ b/src/templates/event-organizer.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql, Link } from 'gatsby'
 import moment from 'moment'
 import 'moment/locale/nb'
 
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import EventList from '../components/EventList'
 
@@ -18,7 +18,7 @@ export default class EventOrganizerPage extends React.Component {
 
     return (
       <Layout classes="event-organizer-page">
-        <Helmet title={`${name} | Program`} />
+        <Meta title={`${name} | Program`} />
         <EventList
           events={events}
           preTitle="Program"
diff --git a/src/templates/event-type.js b/src/templates/event-type.js
index c0fedb8..cc111ea 100644
--- a/src/templates/event-type.js
+++ b/src/templates/event-type.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import EventList from '../components/EventList'
 
@@ -13,7 +13,7 @@ export default class EventTypeProgram extends React.Component {
 
     return (
       <Layout>
-        <Helmet title={`Konsept: ${eventTypeName}`} />
+        <Meta title={`Konsept: ${eventTypeName}`} />
         <EventList events={events} title={eventTypeName} />
       </Layout>
     )
diff --git a/src/templates/event.js b/src/templates/event.js
index 8644574..e742ad9 100644
--- a/src/templates/event.js
+++ b/src/templates/event.js
@@ -1,11 +1,11 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql, Link } from 'gatsby'
 import Img from 'gatsby-image'
 import moment from 'moment'
 import 'moment/locale/nb'
 
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 moment.locale('nb')
@@ -120,11 +120,11 @@ export const EventTemplate = ({
                 {featuredMedia.localFile.childImageSharp ? (
                   <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
                 ) : (
-                  <img
-                    src={featuredMedia.localFile.url}
-                    alt={featuredMedia.caption || ''}
-                  />
-                )}
+                    <img
+                      src={featuredMedia.localFile.url}
+                      alt={featuredMedia.caption || ''}
+                    />
+                  )}
               </div>
               {/* {featuredMedia.caption && (
                 <div
@@ -193,7 +193,10 @@ const Event = ({ data }) => {
 
   return (
     <Layout>
-      <Helmet title={`${event.title}`} />
+      <Meta
+        title={event.title}
+        image={event.featured_media}
+      />
       <EventTemplate
         title={event.title}
         content={event.content}
diff --git a/src/templates/page.js b/src/templates/page.js
index 736f825..6c147a7 100644
--- a/src/templates/page.js
+++ b/src/templates/page.js
@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
 import Img from 'gatsby-image'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 export const PageTemplate = ({ title, content, featuredMedia }) => {
@@ -16,11 +16,11 @@ export const PageTemplate = ({ title, content, featuredMedia }) => {
             {featuredMedia.localFile.childImageSharp ? (
               <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
             ) : (
-              <img
-                src={featuredMedia.localFile.url}
-                alt={featuredMedia.caption || ''}
-              />
-            )}
+                <img
+                  src={featuredMedia.localFile.url}
+                  alt={featuredMedia.caption || ''}
+                />
+              )}
           </div>
           {featuredMedia.caption && (
             <div
@@ -51,7 +51,10 @@ const Page = ({ data }) => {
 
   return (
     <Layout>
-      <Helmet title={page.title} />
+      <Meta
+        title={page.title}
+        image={page.featured_media}
+      />
       <PageTemplate
         title={page.title}
         content={page.content}
diff --git a/src/templates/post.js b/src/templates/post.js
index f5cd2d7..f35836f 100644
--- a/src/templates/post.js
+++ b/src/templates/post.js
@@ -1,10 +1,10 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql, Link } from 'gatsby'
 import Img from 'gatsby-image'
 import moment from 'moment'
 import 'moment/locale/nb'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 
 moment.locale('nb')
@@ -23,7 +23,7 @@ export const BlogPostTemplate = ({
     <section
       className={`post-page ${
         hasFeaturedMedia ? 'has-featured-media' : 'no-featured-media'
-      }`}
+        }`}
     >
       <div className="post-hero">
         <div className="post-hero-inner">
@@ -44,11 +44,11 @@ export const BlogPostTemplate = ({
             {featuredMedia.localFile.childImageSharp ? (
               <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
             ) : (
-              <img
-                src={featuredMedia.localFile.url}
-                alt={featuredMedia.caption || ''}
-              />
-            )}
+                <img
+                  src={featuredMedia.localFile.url}
+                  alt={featuredMedia.caption || ''}
+                />
+              )}
             {featuredMedia.caption && (
               <div
                 className="post-hero_image-caption"
@@ -84,7 +84,10 @@ const BlogPost = ({ data }) => {
 
   return (
     <Layout>
-      <Helmet title={`${post.title} | Nyheter`} />
+      <Meta
+        title={`${post.title} | Nyheter`}
+        image={post.featured_media}
+      />
       <BlogPostTemplate
         content={post.content}
         categories={post.categories}
diff --git a/src/templates/tag.js b/src/templates/tag.js
index 41c1f3c..71fd968 100644
--- a/src/templates/tag.js
+++ b/src/templates/tag.js
@@ -1,6 +1,6 @@
 import React from 'react'
-import Helmet from 'react-helmet'
 import { graphql } from 'gatsby'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import PostList from '../components/PostList'
 
@@ -15,7 +15,7 @@ const Tag = props => {
 
   return (
     <Layout>
-      <Helmet title={tag} />
+      <Meta title={tag} />
       <PostList posts={posts} title={title} />
     </Layout>
   )
diff --git a/src/templates/venue.js b/src/templates/venue.js
index f24f517..3151b61 100644
--- a/src/templates/venue.js
+++ b/src/templates/venue.js
@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import Helmet from 'react-helmet'
 import { graphql, Link } from 'gatsby'
 import Img from 'gatsby-image'
 import classNames from 'classnames'
+import Meta from '../components/Meta'
 import Layout from '../components/Layout'
 import Map from '../components/Map'
 
@@ -49,8 +49,8 @@ export class VenueTemplate extends React.Component {
             {featuredMedia.localFile.childImageSharp ? (
               <Img fluid={featuredMedia.localFile.childImageSharp.fluid} />
             ) : (
-              <img src={featuredMedia.localFile.url} alt={title} />
-            )}
+                <img src={featuredMedia.localFile.url} alt={title} />
+              )}
           </div>
         )}
         <div className="venue-text">
@@ -178,7 +178,10 @@ const VenuePage = ({ data }) => {
 
   return (
     <Layout>
-      <Helmet title={venue.title} />
+      <Meta
+        title={venue.title}
+        image={venue.featured_media}
+      />
       <VenueTemplate
         isSingle
         path={venue.path}