Fix/issue 317 zotero v2 (#318)

* add ArticleHelmet to edit head metadata from the Article component

* fix date

Author: danieleguido

src/components/ArticleV2/Article.js

@@ -4,6 +4,7 @@ import { useCurrentWindowDimensions } from '../../hooks/graphics'
 import ArticleHeader from '../Article/ArticleHeader'
 import ArticleNote from '../Article/ArticleNote'
 import ArticleFlow from './ArticleFlow'
+import ArticleHelmet from './ArticleHelmet'
 import ArticleBibliography from '../Article/ArticleBibliography'
 import Footer from '../Footer'
 
@@ -12,13 +13,14 @@ const Article = ({
   // Notebook instance, an object containing {cells:[], metadata:{}}
   ipynb,
   url,
+  imageUrl,
   publicationDate = new Date(),
   publicationStatus,
   issue,
-  // plainTitle,
-  // plainContributor = '',
-  // plainKeywords = [],
-  // excerpt,
+  plainTitle,
+  plainContributor = '',
+  plainKeywords = [],
+  excerpt,
   doi,
   binderUrl,
   bibjson,
@@ -40,6 +42,8 @@ const Article = ({
     collaborators,
     disclaimer = []
   } = articleTree.sections
+
+
   console.debug(`[Article] component rendered ${width}x${height}px`)
   console.debug('[Article] loading articleTree anchors:', articleTree.anchors)
 
@@ -51,8 +55,21 @@ const Article = ({
     <ArticleBibliography articleTree={articleTree} noAnchor className="mt-0"/>
   )
   const renderedFooterComponent = (<Footer />)
+
+
+
   return (
     <>
+    <ArticleHelmet
+      url={url}
+      imageUrl={imageUrl}
+      plainTitle={plainTitle}
+      plainContributor={plainContributor}
+      plainKeywords={plainKeywords}
+      publicationDate={publicationDate}
+      issue={issue}
+      excerpt={excerpt}
+    />
     <div className="page">
       <a id="top" className="anchor"></a>
       <ArticleFlow

src/components/ArticleV2/ArticleHelmet.js

@@ -0,0 +1,71 @@
+import React, { useLayoutEffect } from 'react'
+import { Helmet } from 'react-helmet'
+
+const ArticleHelmet = ({
+  url='',
+  imageUrl='',
+  plainTitle='',
+  excerpt='',
+  plainContributor='',
+  plainKeywords=[],
+  issue,
+  publicationDate = new Date()
+}) => {
+  // apply zotero when the DOM is ready
+  useLayoutEffect(() => {
+    console.debug('[ArticleHelmet] @useLayoutEffect')
+    document.dispatchEvent(new Event('ZoteroItemUpdated', {
+      bubbles: true,
+      cancelable: true
+    }))
+  }, [url])
+
+  return (
+    <Helmet>
+      <meta property="og:site_name" content="Journal of Digital history" />
+      <meta property="og:title" content={plainTitle} />
+      <meta property="og:description" content={excerpt} />
+      <meta property="og:type" content="article" />
+      <meta property="og:image" content={imageUrl} />
+      <meta property="og:url" content={window.location} />
+      <meta property="article:author" content={plainContributor} />
+      <meta property="article:published_time" content={publicationDate.toISOString().split('T').shift()} />
+      <meta property="article:section" content={issue?.pid || ''} />
+      {plainKeywords.map((k,i) => (
+        <meta key={i} property="article:tag" content={k} />
+      ))}
+      <meta name="dc.title" content={plainTitle}	/>
+      <meta name="dc.format" content="text/html" />
+      <meta name="dc.publisher" content="DeGruyter" />
+      <meta name="dc.type" content="OriginalPaper" />
+      <meta name="dc.language" content="En" />
+      {plainContributor.split(', ').map((d,i) => (
+        <meta key={i} name="dc.creator" content={d}	/>
+      ))}
+      {/*
+        dc:title     Studying E-Journal User Behavior Using Log Files
+        dc:creator 	  	Yu, L
+        dc:creator 	  	Apps, A
+        dc:subject 	http://purl.org/dc/terms/DDC 	020
+        dc:subject 	http://purl.org/dc/terms/LCC 	Z671
+        dc:publisher 	  	Elsevier
+        dc:type 	http://purl.org/dc/terms/DCMIType 	Text
+        dcterms:issued 	http://purl.org/dc/terms/W3CDTF 	2000
+        dcterms:isPartOf 	  	  	urn:ISSN:0740-8188
+        dcterms:bibliographicCitation
+        */}
+      {plainKeywords.map((k,i) => (
+        <meta key={i} property="dc.subject" content={k} />
+      ))}
+
+      <meta name="citation_journal_title" content="Journal of Digital history"/>
+      <meta name="citation_journal_abbrev" content="JDH"/>
+      <meta name="citation_publisher" content="DeGruyter"/>
+      <meta name="citation_title" content={plainTitle}/>
+      <meta name="citation_issue" content={issue?.pid}/>
+
+    </Helmet>
+  )
+}
+
+export default ArticleHelmet

src/pages/ArticleViewer.js

@@ -79,7 +79,7 @@ const ArticleViewer = ({ match: { params: { pid }}}) => {
       collaborators={collaborators}
       keywords={keywords}
       publicationStatus={article.status}
-      publicationDate={article.publication_date}
+      publicationDate={new Date(article.issue?.publication_date)}
       binderUrl={article.binder_url}
       emailAddress={article.abstract?.contact_email}
       doi={article.doi}