Smoke Testing 2020/11/24 - SEO fix

.circleci/config.yml

@@ -231,7 +231,6 @@ workflows:
             branches:
               only:
                 - develop
-                - submission-review
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
@@ -261,7 +260,6 @@ workflows:
             branches:
               only:
                 - develop
-                - submission-review
       # Production builds are exectuted 
       # when PR is merged to the master
       # Don't change anything in this configuration

src/shared/components/Contentful/Route.jsx

@@ -7,7 +7,7 @@ import _ from 'lodash';
 import ContentfulLoader from 'containers/ContentfulLoader';
 import Error404 from 'components/Error404';
 import LoadingIndicator from 'components/LoadingIndicator';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import PT from 'prop-types';
 import React from 'react';
 import { Route, Switch } from 'react-router-dom';

src/shared/components/MetaTags.jsx

@@ -0,0 +1,82 @@
+/**
+ * Auxiliary wrapper around React Helmet that helps to generate meta tags for
+ * generic use cases.
+ *
+ * NOTE: This component relies on `domain` path of Redux store to hold
+ * the current app domain, which will serve as the base path for the bundled
+ * images.
+ */
+
+import PT from 'prop-types';
+import React from 'react';
+import { connect } from 'react-redux';
+import { Helmet } from 'react-helmet';
+
+function MetaTags({
+  description,
+  domain,
+  image,
+  siteName,
+  socialDescription,
+  socialTitle,
+  title,
+  url,
+}) {
+  const img = `${domain}${image}`;
+  const socTitle = socialTitle || title;
+  const socDesc = socialDescription || description;
+  return (
+    <Helmet>
+      {/* General tags. */}
+      <title>
+        {title}
+      </title>
+      <meta name="description" content={description} />
+
+      {/* Twitter cards. */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={socTitle} />
+      <meta name="twitter:description" content={socDesc} />
+      { image ? <meta name="twitter:image" content={img} /> : null }
+      {
+        siteName ? (
+          <meta name="twitter:site" content={`@${siteName}`} />
+        ) : null
+      }
+
+      {/* Open Graph data. */}
+      <meta property="og:title" content={socTitle} />
+      { image ? <meta property="og:image" content={img} /> : null }
+      { image ? <meta property="og:image:alt" content={socTitle} /> : null }
+      <meta property="og:description" content={socDesc} />
+      {
+        siteName ? (<meta property="og:sitename" content={siteName} />) : null
+      }
+      { url ? (<meta property="og:url" content={url} />) : null }
+    </Helmet>
+  );
+}
+
+MetaTags.defaultProps = {
+  image: null,
+  siteName: null,
+  socialDescription: null,
+  socialTitle: null,
+  url: null,
+};
+
+MetaTags.propTypes = {
+  description: PT.string.isRequired,
+  domain: PT.string.isRequired,
+  image: PT.string,
+  siteName: PT.string,
+  socialDescription: PT.string,
+  socialTitle: PT.string,
+  title: PT.string.isRequired,
+  url: PT.string,
+};
+
+/* TODO: It is not good to depend on the domain written into redux state here,
+ * better pass it via the renderer context at the server side, and get it from
+ * the location at the frontend side, or something similar? */
+export default connect(state => ({ domain: state.domain }))(MetaTags);

src/shared/components/Settings/index.jsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import PT from 'prop-types';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 
 import { TABS } from 'actions/page/settings';
 

src/shared/containers/EDU/Home.jsx

@@ -3,7 +3,7 @@
  */
 import React from 'react';
 import { config } from 'topcoder-react-utils';
-import { Helmet } from 'react-helmet';
+import MetaTags from 'components/MetaTags';
 import Viewport from 'components/Contentful/Viewport';
 import SearchBar from 'components/Contentful/SearchBar/SearchBar';
 import { getService } from 'services/contentful';
@@ -44,15 +44,15 @@ export default class EDUHome extends React.Component {
 
   render() {
     const { taxonomy } = this.state;
+    const title = 'Topcoder Thrive | Topcoder Community | Topcoder';
+    const description = 'Thrive is our vault of content that we have been gathering over the years. It is full of tutorials and workshops that matter. Grow with us!';
+
     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>
+        <MetaTags
+          description={description}
+          title={title}
+        />
         {/* Banner */}
         <div className={homeTheme.bannerContainer}>
           <div className={homeTheme.bannerImage} />

src/shared/containers/EDU/Search.jsx

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import React from 'react';
 import { config, isomorphy } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import Viewport from 'components/Contentful/Viewport';
 import SearchBar from 'components/Contentful/SearchBar/SearchBar';
 import { getService } from 'services/contentful';
@@ -13,7 +14,6 @@ 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
@@ -87,18 +87,28 @@ export default class EDUSearch extends React.Component {
     const {
       taxonomy, query, tree, isShowFilter,
     } = this.state;
+    const title = 'Topcoder Thrive | Topcoder Community | Topcoder';
+    const description = 'Thrive is our vault of content that we have been gathering over the years. It is full of tutorials and workshops that matter. Grow with us!';
+
+    const metaTags = (
+      <MetaTags
+        description={description}
+        title={title}
+      />
+    );
     // This container needs at least those variables
     // to be able to render meaningful data
-    if (!taxonomy) return <LoadingIndicator />;
+    if (!taxonomy) {
+      return (
+        <React.Fragment>
+          { metaTags }
+          <LoadingIndicator />;
+        </React.Fragment>
+      );
+    }
     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>
+        { metaTags }
         {/* Banner */}
         <div className={searchTheme.bannerContainer}>
           <div className={searchTheme.searchBarWrapp}>

src/shared/containers/EDU/Tracks.jsx

@@ -5,6 +5,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import React from 'react';
 import { config, isomorphy } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import Viewport from 'components/Contentful/Viewport';
 import SearchBar from 'components/Contentful/SearchBar/SearchBar';
 import { getService } from 'services/contentful';
@@ -14,7 +15,6 @@ 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';
@@ -163,18 +163,28 @@ export default class EDUTracks extends React.Component {
       taxonomy, query, tree, isShowFilter,
       articleCnt, videoCnt, forumCnt,
     } = this.state;
+    const title = 'Topcoder Thrive | Topcoder Community | Topcoder';
+    const description = 'Thrive is our vault of content that we have been gathering over the years. It is full of tutorials and workshops that matter. Grow with us!';
+
+    const metaTags = (
+      <MetaTags
+        description={description}
+        title={title}
+      />
+    );
     // This container needs at least those variables
     // to be able to render meaningful data
-    if (!taxonomy) return <LoadingIndicator />;
+    if (!taxonomy) {
+      return (
+        <React.Fragment>
+          { metaTags }
+          <LoadingIndicator />;
+        </React.Fragment>
+      );
+    }
     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>
+        { metaTags }
         {/* Banner */}
         <div
           className={tracksTheme.bannerContainer}

src/shared/containers/EDU/styles/home.scss

@@ -2,8 +2,9 @@
 
 .container {
   display: flex;
+  flex: 1;
   flex-direction: column;
-  overflow: hidden;
+  width: 100%;
 
   .bannerContainer {
     background-image: linear-gradient(98.81deg, #8b41b0 0%, #ef476f 100%);

src/shared/containers/EDU/styles/search.scss

@@ -2,8 +2,9 @@
 
 .container {
   display: flex;
+  flex: 1;
   flex-direction: column;
-  overflow: hidden;
+  width: 100%;
 
   .bannerContainer {
     background-color: #2a2a2a;

src/shared/containers/EDU/styles/tracks.scss

@@ -2,8 +2,9 @@
 
 .container {
   display: flex;
+  flex: 1;
   flex-direction: column;
-  overflow: hidden;
+  width: 100%;
 
   .bannerContainer {
     min-height: 475px;

src/shared/containers/GigsPages.jsx

@@ -9,16 +9,18 @@ import Viewport from 'components/Contentful/Viewport';
 import { config } from 'topcoder-react-utils';
 import RecruitCRMJobDetails from 'containers/Gigs/RecruitCRMJobDetails';
 import { Helmet } from 'react-helmet';
+import MetaTags from 'components/MetaTags';
 
 
 export default function GigsPagesContainer(props) {
   const { match } = props;
   const { id } = match.params;
   const isApply = `${config.GIGS_PAGES_PATH}/${id}/apply` === match.url;
+  const title = 'Gig Work | Topcoder Community | Topcoder';
+  const description = 'Compete and build up your profiles and skills! Topcoder members become eligible to work on Gig Work projects by first proving themselves in various skill sets through Topcoder competitions.';
   return (
     <div>
       <Helmet>
-        <title>Topcoder - Gig Work Opportunities</title>
         <script type="text/javascript">{`
 window._chatlio = window._chatlio||[];
 !function(){ var t=document.getElementById("chatlio-widget-embed");if(t&&window.ChatlioReact&&_chatlio.init)return void _chatlio.init(t,ChatlioReact);for(var e=function(t){return function(){_chatlio.push([t].concat(arguments)) }},i=["configure","identify","track","show","hide","isShown","isOnline", "page", "open", "showOrHide"],a=0;a<i.length;a++)_chatlio[i[a]]||(_chatlio[i[a]]=e(i[a]));var n=document.createElement("script"),c=document.getElementsByTagName("script")[0];n.id="chatlio-widget-embed",n.src="https://w.chatlio.com/w.chatlio-widget.js",n.async=!0,n.setAttribute("data-embed-version","2.3");
@@ -28,6 +30,10 @@ window._chatlio = window._chatlio||[];
         `}
         </script>
       </Helmet>
+      <MetaTags
+        description={description}
+        title={title}
+      />
       <Header />
       {
         id ? (

src/shared/containers/Profile.jsx

@@ -7,7 +7,7 @@ import PT from 'prop-types';
 import { connect } from 'react-redux';
 
 import { actions } from 'topcoder-react-lib';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import Error404 from 'components/Error404';
 import LoadingIndicator from 'components/LoadingIndicator';
 import ProfilePage from 'components/ProfilePage';

src/shared/containers/ProfileStats.jsx

@@ -9,7 +9,7 @@ import Error404 from 'components/Error404';
 import LoadingIndicator from 'components/LoadingIndicator';
 import ProfileStatsPage from 'components/ProfilePage/Stats';
 import { shouldShowGraph, isValidTrack } from 'utils/memberStats';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import _ from 'lodash';
 import qs from 'qs';
 

src/shared/containers/challenge-detail/index.jsx

@@ -39,7 +39,8 @@ import {
   SUBTRACKS,
   CHALLENGE_STATUS,
 } from 'utils/tc';
-import { config, MetaTags } from 'topcoder-react-utils';
+import { config } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import { actions } from 'topcoder-react-lib';
 import { getService } from 'services/contentful';
 // import {
@@ -369,10 +370,17 @@ class ChallengeDetailPageContainer extends React.Component {
 
     const isLoggedIn = !_.isEmpty(auth.tokenV3);
 
+    const { prizeSets } = challenge;
+    let challengePrizes = [];
+    const placementPrizes = _.find(prizeSets, { type: 'placement' });
+    if (placementPrizes) {
+      challengePrizes = _.filter(placementPrizes.prizes, p => p.value > 0);
+    }
+
     /* Generation of data for SEO meta-tags. */
-    let prizesStr;
-    if (challenge.prizes && challenge.prizes.length) {
-      prizesStr = challenge.prizes.map(p => `$${p}`).join('/');
+    let prizesStr = '';
+    if (!_.isEmpty(challengePrizes)) {
+      prizesStr = challengePrizes.map(p => `$${p.value}`).join('/');
       prizesStr = `[${prizesStr}] - `;
     }
     const title = 'Topcoder Challenge | Topcoder Community | Topcoder';
@@ -398,18 +406,10 @@ class ChallengeDetailPageContainer extends React.Component {
       hasFirstPlacement = _.some(winners, { placement: 1, handle: userHandle });
     }
 
-
     const submissionEnded = status === CHALLENGE_STATUS.COMPLETED
     || (!_.some(phases, { name: 'Submission', isOpen: true })
       && !_.some(phases, { name: 'Checkpoint Submission', isOpen: true }));
 
-    const { prizeSets } = challenge;
-    let challengePrizes = [];
-    const placementPrizes = _.find(prizeSets, { type: 'placement' });
-    if (placementPrizes) {
-      challengePrizes = placementPrizes.prizes;
-    }
-
     return (
       <div styleName="outer-container">
         <div styleName="challenge-detail-container" role="main">

src/shared/containers/challenge-listing/Listing/index.jsx

@@ -25,7 +25,7 @@ import sidebarActions from 'actions/challenge-listing/sidebar';
 import communityActions from 'actions/tc-communities';
 // import SORT from 'utils/challenge-listing/sort';
 import { BUCKETS, filterChanged, sortChangedBucket } from 'utils/challenge-listing/buckets';
-import { MetaTags } from 'topcoder-react-utils';
+import MetaTags from 'components/MetaTags';
 import { USER_GROUP_MAXAGE } from 'config';
 import { updateChallengeType } from 'utils/challenge';