Fixes for #4887

Author: kkartunov

src/shared/components/Contentful/Article/Article.jsx

@@ -15,7 +15,10 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import YouTubeVideo from 'components/YouTubeVideo';
 import moment from 'moment';
 import localStorage from 'localStorage';
-import { config, Link, isomorphy } from 'topcoder-react-utils';
+import { Helmet } from 'react-helmet';
+import {
+  config, Link, isomorphy,
+} from 'topcoder-react-utils';
 import qs from 'qs';
 // SVGs and assets
 import GestureIcon from 'assets/images/icon-gesture.svg';
@@ -110,9 +113,27 @@ export default class Article extends React.Component {
     if (isomorphy.isClientSide()) {
       shareUrl = encodeURIComponent(window.location.href);
     }
+    const description = htmlToText.fromString(
+      ReactDOMServer.renderToString(markdown(fields.content)),
+      {
+        ignoreHref: true,
+        ignoreImage: true,
+        singleNewLineParagraphs: true,
+        uppercaseHeadings: false,
+      },
+    ).substring(0, CONTENT_PREVIEW_LENGTH);
 
     return (
       <React.Fragment>
+        <Helmet>
+          <title>{fields.title}</title>
+          <meta name="title" property="og:title" content={fields.title} />
+          <meta name="description" property="og:description" content={description} />
+          <meta name="description" property="description" content={description} />
+          <meta name="twitter:description" content={description} />
+          <meta name="image" property="og:image" content={fields.featuredImage ? `https:${subData.assets.items[fields.featuredImage.sys.id].fields.file.url}` : null} />
+          <meta name="twitter:image" content={fields.featuredImage ? `https:${subData.assets.items[fields.featuredImage.sys.id].fields.file.url}` : null} />
+        </Helmet>
         {/* Banner */}
         {
           fields.featuredImage ? (

src/shared/containers/EDU/Home.jsx

@@ -3,6 +3,7 @@
  */
 import React from 'react';
 import { config } from 'topcoder-react-utils';
+import { Helmet } from 'react-helmet';
 import Viewport from 'components/Contentful/Viewport';
 import SearchBar from 'components/Contentful/SearchBar/SearchBar';
 import { getService } from 'services/contentful';
@@ -45,6 +46,13 @@ export default class EDUHome extends React.Component {
     const { taxonomy } = this.state;
     return (
       <div className={homeTheme.container}>
+        <Helmet>
+          <title>THRIVE - Grow with us. Tutorials and workshops that matter.</title>
+          <meta name="title" property="og:title" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="og:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="twitter:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+        </Helmet>
         {/* Banner */}
         <div className={homeTheme.bannerContainer}>
           <div className={homeTheme.bannerImage} />

src/shared/containers/EDU/Search.jsx

@@ -13,6 +13,7 @@ import { updateQuery } from 'utils/url';
 import qs from 'qs';
 import LoadingIndicator from 'components/LoadingIndicator';
 import SearchPageFilter from 'components/Contentful/SearchPageFilter/SearchPageFilter';
+import { Helmet } from 'react-helmet';
 // Partials
 import ResultTabs from './partials/ResultTabs';
 // CSS
@@ -91,6 +92,13 @@ export default class EDUSearch extends React.Component {
     if (!taxonomy) return <LoadingIndicator />;
     return (
       <div className={searchTheme.container}>
+        <Helmet>
+          <title>THRIVE - Search {`${query.title}`}</title>
+          <meta name="title" property="og:title" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="og:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="twitter:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+        </Helmet>
         {/* Banner */}
         <div className={searchTheme.bannerContainer}>
           <div className={searchTheme.searchBarWrapp}>

src/shared/containers/EDU/Tracks.jsx

@@ -14,6 +14,7 @@ import qs from 'qs';
 import TracksTree from 'components/Contentful/TracksTree/TracksTree';
 import LoadingIndicator from 'components/LoadingIndicator';
 import TracksFilter from 'components/Contentful/TracksFilter/TracksFilter';
+import { Helmet } from 'react-helmet';
 // SVGs & Assets
 import Dev from 'assets/images/img-development.png';
 import Design from 'assets/images/img_design.png';
@@ -167,6 +168,13 @@ export default class EDUTracks extends React.Component {
     if (!taxonomy) return <LoadingIndicator />;
     return (
       <div className={tracksTheme.container}>
+        <Helmet>
+          <title>THRIVE - {`${query.track}`}</title>
+          <meta name="title" property="og:title" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="og:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="description" property="description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+          <meta name="twitter:description" content="THRIVE - Grow with us. Tutorials and workshops that matter." />
+        </Helmet>
         {/* Banner */}
         <div
           className={tracksTheme.bannerContainer}