Added HTML header data for all Steem pages

I had neglected custom HTML head tags for all pages except posts. This has been corrected for all Steem related pages, which have custom titles and descriptions.
KrNel · May 24, 2019 · 8dbfbb2 · 8dbfbb2
1 parent 981e53a
commit 8dbfbb2
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 29 deletions.
diff --git a/client/src/components/pages/Steem/AuthorCatgoryTime.js b/client/src/components/pages/Steem/AuthorCatgoryTime.js
@@ -19,33 +19,32 @@ import './AuthorCatgoryTime.css';
  *  @param {number} payoutValue Post payout value
  *  @param {string} createdFromNow Time since post was created
  */
-const AuthorCatgoryTime = ({ author, authorReputation, category, created, permlink }) => {
-  return (
-    <div className='authorCatTime'>
-      <ul className="info">
-        <li className="item avatar"><Avatar author={author} height='30px' width='30px' /></li>
-        <li className="item author" data-author={author}>
-          {'\u00A0'}
-          <AuthorReputation author={author} reputation={authorReputation} />
-        </li>
-        <li className="item tag">
-          {'\u00A0in\u00A0'}
-          <Category category={category} />
-        </li>
-        <li className="item timeago">
-          {`\u00A0\u2022\u00A0`}
-          <PostLink
-            author={author}
-            category={category}
-            permlink={permlink}
-            title={standard(created)}
-            text={<LongNowDate date={created} />}
-          />
-        </li>
-      </ul>
-    </div>
-  )
-}
+const AuthorCatgoryTime = ({ author, authorReputation, category, created, permlink }) => (
+  <div className='authorCatTime'>
+    <ul className="info">
+      <li className="item avatar"><Avatar author={author} height='30px' width='30px' /></li>
+      <li className="item author" data-author={author}>
+        {'\u00A0'}
+        <AuthorReputation author={author} reputation={authorReputation} />
+      </li>
+      <li className="item tag">
+        {'\u00A0in\u00A0'}
+        <Category category={category} />
+      </li>
+      <li className="item timeago">
+        {`\u00A0\u2022\u00A0`}
+        <PostLink
+          author={author}
+          category={category}
+          permlink={permlink}
+          title={standard(created)}
+          text={<LongNowDate date={created} />}
+        />
+      </li>
+    </ul>
+  </div>
+)
+
 
 AuthorCatgoryTime.propTypes = {
   author: PropTypes.string,

diff --git a/client/src/components/pages/Steem/Post/Comment.js b/client/src/components/pages/Steem/Post/Comment.js
@@ -172,7 +172,7 @@ class Comment extends Component {
     const id = comment.id;
     const author = comment.author;
     const permlink = comment.permlink;
-    const created = comment.created;
+    const created = `${comment.created}Z`;
     const anchorLink = `#@${author}/${permlink}`;
     const activeVotes = comment.active_votes;
     const totalPayout =

diff --git a/client/src/components/pages/Steem/Post/PostDetails.js b/client/src/components/pages/Steem/Post/PostDetails.js
@@ -225,7 +225,7 @@ class PostDetails extends Component {
           <meta property="og:url" content={url} />
           <meta property="og:image" content={image} />
           <meta property="og:description" content={desc} />
-          <meta property="og:site_name" content="Kure" />
+          <meta property="og:site_name" content="KURE" />
           <meta property="article:tag" content={category} />
           <meta property="article:published_time" content={new Date(created).toDateString()} />
         </Helmet>

diff --git a/client/src/components/pages/Steem/Posts.js b/client/src/components/pages/Steem/Posts.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Header, Label, Grid, Icon } from 'semantic-ui-react';
 import { withRouter, Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
 
 import PostsSummaryGrid from './PostsSummaryGrid';
 import PostsSummaryList from './PostsSummaryList';
@@ -23,6 +24,7 @@ import FollowButton from './FollowButton';
 import Follows from './Follows';
 
 import './Posts.css';
+import defaultImage from '../../../images/steemkure-600.png';
 
 /**
  *  Gets the Steem blockchain content and displays a list of post
@@ -357,6 +359,7 @@ class Posts extends Component {
       props: {
         match: {
           path,
+          url,
         },
         user,
         csrf,
@@ -460,8 +463,46 @@ class Posts extends Component {
       );
     }
 
+    let pageTitle = '';
+    let desc = '';
+
+    if (page === 'blog') {
+      pageTitle = `${author}'s Blog`;
+      desc = `Check out the latest content from ${author}.`;
+    }else if (page === 'feed') {
+      pageTitle = `${author}'s Feed`;
+      desc = `Look at ${author}'s feed of posts around Steem.`;
+    }else if (path === '/@:author/followers') {
+      pageTitle = `${author}'s Followers`;
+      desc = `Look at ${author}'s followers on Steem.`;
+    }else if (path === '/@:author/following') {
+      pageTitle = `${author}'s Following`;
+      desc = `Look at who ${author} is following on Steem.`;
+    }else {
+      let filterPage = this.selectedFilter.charAt(0).toUpperCase() + this.selectedFilter.slice(1);
+      filterPage = filterPage.indexOf('Created') === 0 ? 'New' : filterPage;
+      pageTitle = `${filterPage} Steem Posts`;
+      desc = `Check out the latest ${filterPage} content on Steem.`;
+    }
+
+    const metaUrl = `https://thekure.net${url}`;
+    const metaTitle = `${pageTitle} - KURE`;
+    const image = `https://thekure.net${defaultImage}`;
+
     return (
       <React.Fragment>
+        <Helmet>
+          <title>{pageTitle}</title>
+          <link rel="canonical" href={metaUrl} />
+          <link rel="amphtml" href={metaUrl} />
+          <meta property="description" content={desc} />
+          <meta property="og:title" content={metaTitle} />
+          <meta property="og:type" content="page" />
+          <meta property="og:url" content={metaUrl} />
+          <meta property="og:image" content={image} />
+          <meta property="og:description" content={desc} />
+          <meta property="og:site_name" content="KURE" />
+        </Helmet>
         <ModalGroup
           modalOpen={modalOpenAddPost}
           onModalClose={onModalCloseAddPost}