feat(metatags): added metatags support and example in Article's page

TallerWebSolutions · Jul 16, 2019 · b575ef9 · b575ef9
1 parent c0a1148
commit b575ef9
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 19 deletions.
diff --git a/next.config.js b/next.config.js
@@ -12,7 +12,8 @@ module.exports = (phase, info) => {
     distDir: 'build/client',
     serverRuntimeConfig: {},
     publicRuntimeConfig: {
-      GRAPHQL_HOST: process.env.GRAPHQL_HOST
+      GRAPHQL_HOST: process.env.GRAPHQL_HOST,
+      APP_HOST: process.env.APP_HOST
     }
   }
 

diff --git a/src/client/modules/drupal/modules/metatags/README.md b/src/client/modules/drupal/modules/metatags/README.md
@@ -0,0 +1,8 @@
+# Metatags
+
+Use Metatags from Drupal on pages.
+
+**Requires to install:**
+
+- [Drupal Metatag module](https://www.drupal.org/project/metatag)
+- [Drupal GraphQL Metatag module](https://www.drupal.org/project/graphql_metatag)
diff --git a/src/client/modules/drupal/modules/metatags/containers/Metatags/index.js b/src/client/modules/drupal/modules/metatags/containers/Metatags/index.js
@@ -0,0 +1,95 @@
+import React from 'react'
+import { Query } from 'react-apollo'
+import { array, string } from 'prop-types'
+import {
+  pipe,
+  find,
+  propEq,
+  map,
+  propOr,
+  lensProp,
+  allPass,
+  path,
+  over,
+  replace,
+  when
+} from 'ramda'
+import Head from 'next/head'
+import env from '~source/env'
+
+import query from './query.gql'
+
+export const META_PROPERTY = 'MetaProperty'
+const META_VALUE = 'MetaValue'
+export const META_LINK = 'MetaLink'
+
+const onlyMetaProperty = propEq('__typename', META_PROPERTY)
+const onlyMetaValue = propEq('__typename', META_VALUE)
+const onlyMetaLink = allPass([
+  propEq('__typename', META_LINK),
+  propEq('key', 'canonical')
+])
+
+const setAppHost = when(
+  onlyMetaLink,
+  over(
+    lensProp('value'),
+    replace(/^https?:\/\/[^#?/]+/, env('APP_HOST', 'http://localhost:3000'))
+  )
+)
+
+const normalizeMetatags = pipe(
+  path(['route', 'entity', 'entityMetatags']),
+  map(setAppHost)
+)
+
+const FALLBACK_TITLE = 'Next on Drupal'
+const getTitle = pipe(
+  find(propEq('key', 'title')),
+  propOr(FALLBACK_TITLE, 'value')
+)
+
+const Metatags = ({ metatags }) => {
+  const pageTitle = getTitle(metatags)
+
+  return (
+    <Head>
+      { metatags.filter(onlyMetaLink).map(({ key, value }) => (
+        <link rel={ key } key={ key } href={ value } />
+      )) }
+
+      { metatags.filter(onlyMetaProperty).map(({ key, value }) => (
+        <meta key={ key } property={ key } content={ value } />
+      )) }
+
+      { metatags.filter(onlyMetaValue).map(({ key, value }) => (
+        <meta key={ key } name={ key } content={ value } />
+      )) }
+
+      { pageTitle && <title key='title'>{ pageTitle }</title> }
+    </Head>
+  )
+}
+
+Metatags.propTypes = {
+  metatags: array
+}
+
+const MetatagsContainer = ({ path: urlPath }) => (
+  <Query query={ query } variables={ { path: urlPath } }>
+    { ({ error, data, loading }) => {
+      if (error) throw error
+      if (loading) return null
+
+      const metatags = normalizeMetatags(data)
+
+      return <Metatags metatags={ metatags } />
+    } }
+  </Query>
+)
+
+MetatagsContainer.propTypes = {
+  path: string.isRequired
+}
+
+export default MetatagsContainer
diff --git a/src/client/modules/drupal/modules/metatags/containers/Metatags/query.gql b/src/client/modules/drupal/modules/metatags/containers/Metatags/query.gql
@@ -0,0 +1,12 @@
+query CurrentPageMetatags($path: String!) {
+  route(path: $path) {
+    ... on EntityCanonicalUrl {
+      entity {
+        entityMetatags {
+          key
+          value
+        }
+      }
+    }
+  }
+}
diff --git a/src/client/pages/drupal/node/article/index.js b/src/client/pages/drupal/node/article/index.js
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Fragment } from 'react'
 import { shape, string } from 'prop-types'
 import { Query } from 'react-apollo'
 
@@ -11,25 +11,29 @@ import BlockRegionContainer from '~drupal/modules/layout/containers/BlockRegionC
 import HtmlText from '~drupal/modules/content/components/HtmlText'
 
 import query from './query.gql'
+import MetatagsContainer from 'client/modules/drupal/modules/metatags/containers/Metatags'
 
-const NodeArticlePage = ({ route: { entity } }) => (
-  <Query query={ query } variables={ entity }>
-    { ({ data: { node }, loading, error }) => {
-      if (loading) return <LoadingPublicPage />
-      if (error) return <ErrorPage500 />
-      if (!node) return <ErrorPage404 />
+const NodeArticlePage = ({ route: { entity, path } }) => (
+  <Fragment>
+    <MetatagsContainer path={ path } />
+    <Query query={ query } variables={ entity }>
+      { ({ data: { node }, loading, error }) => {
+        if (loading) return <LoadingPublicPage />
+        if (error) return <ErrorPage500 />
+        if (!node) return <ErrorPage404 />
 
-      return (
-        <PublicPage title={ `%base | ${node.title}` }>
-          <h1>{ node.title }</h1>
-          <BlockRegionContainer region='header' />
-          <main>
-            <HtmlText html={ node.body && node.body.value } />
-          </main>
-        </PublicPage>
-      )
-    } }
-  </Query>
+        return (
+          <PublicPage title={ `%base | ${node.title}` }>
+            <h1>{ node.title }</h1>
+            <BlockRegionContainer region='header' />
+            <main>
+              <HtmlText html={ node.body && node.body.value } />
+            </main>
+          </PublicPage>
+        )
+      } }
+    </Query>
+  </Fragment>
 )
 
 NodeArticlePage.propTypes = {