Merge pull request #5181 from topcoder-platform/seo-fix

Smoke Testing 2020/11/10 - SEO Challenge Listing and Details

Author: luizrrodrigues

.circleci/config.yml

@@ -237,7 +237,7 @@ workflows:
           filters:
             branches:
               only:                
-                - apollo-site
+                - free
       # This is alternate dev env for parallel testing
       - "build-qa":
           context : org-global      

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

@@ -27,7 +27,6 @@ import Terms from 'containers/Terms';
 import termsActions from 'actions/terms';
 import ChallengeCheckpoints from 'components/challenge-detail/Checkpoints';
 import React from 'react';
-import htmlToText from 'html-to-text';
 import PT from 'prop-types';
 import { connect } from 'react-redux';
 import challengeDetailsActions, { TABS as DETAIL_TABS }
@@ -376,15 +375,8 @@ class ChallengeDetailPageContainer extends React.Component {
       prizesStr = challenge.prizes.map(p => `$${p}`).join('/');
       prizesStr = `[${prizesStr}] - `;
     }
-    const title = challenge.name;
-
-    let description = challenge.description || challenge.detailedRequirements;
-    description = description ? description.slice(0, 256) : '';
-    description = htmlToText.fromString(description, {
-      singleNewLineParagraphs: true,
-      wordwrap: false,
-    });
-    description = description.replace(/\n/g, ' ');
+    const title = 'Topcoder Challenge | Topcoder Community | Topcoder';
+    const description = 'Browse the challenges currently available on Topcoder. Search by type of challenge, then find those of interest to register for and compete in today.';
 
     const results2 = resultsLoadedForChallengeId === _.toString(challengeId)
       ? results : null;
@@ -432,10 +424,10 @@ class ChallengeDetailPageContainer extends React.Component {
             !isEmpty
             && (
               <MetaTags
-                description={description.slice(0, 155)}
+                description={description}
                 image={getOgImage(challenge)}
                 siteName="Topcoder"
-                socialDescription={description.slice(0, 200)}
+                socialDescription={description}
                 socialTitle={`${prizesStr}${title}`}
                 title={title}
               />

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

@@ -37,8 +37,6 @@ const { mapToBackend } = challengeUtils.filter;
 
 let mounted = false;
 
-const SEO_PAGE_TITLE = 'Topcoder Challenges';
-
 export class ListingContainer extends React.Component {
   componentDidMount() {
     const {
@@ -368,7 +366,6 @@ export class ListingContainer extends React.Component {
       challengesUrl,
       challengeTags,
       communityFilters,
-      communityId,
       communityName,
       defaultCommunityId,
       expanding,
@@ -494,7 +491,8 @@ export class ListingContainer extends React.Component {
     let communityFilter = communityFilters.find(item => item.communityId === selectedCommunityId);
     if (communityFilter) communityFilter = communityFilter.challengeFilter;
 
-    const description = 'Join Topcoder and compete in these challenges, to learn and earn!';
+    const title = 'Topcoder Challenge Listings | Topcoder Community | Topcoder';
+    const description = 'Browse the challenges currently available on Topcoder. Search by type of challenge, then find those of interest to register for and compete in today.';
 
     let banner;
     if (!listingOnly) {
@@ -520,7 +518,7 @@ export class ListingContainer extends React.Component {
           description={description}
           image={ogImage}
           siteName="Topcoder"
-          title={communityId ? `${communityName} Challenges` : SEO_PAGE_TITLE}
+          title={title}
         />
         {banner}
         <ChallengeListing

src/shared/routes/Topcoder/ChallengeListing.jsx

@@ -5,11 +5,11 @@
 
 import _ from 'lodash';
 import LoadingIndicator from 'components/LoadingIndicator';
-// import path from 'path';
+import path from 'path';
 import qs from 'qs';
 import React from 'react';
-// import { StaticRouter } from 'react-router-dom';
-import { AppChunk } from 'topcoder-react-utils';
+import { StaticRouter } from 'react-router-dom';
+import { AppChunk, webpack } from 'topcoder-react-utils';
 
 export default function ChallengeListingRoute() {
   return (
@@ -39,13 +39,14 @@ export default function ChallengeListingRoute() {
       /*
         TODO: Making server-side rendering work demands some more efforts
         with reducers coding.
+      */
       renderServer={(renderProps) => {
-        const p = resolveWeak('containers/challenge-listing/Listing');
-        const ChallengeListing = requireWeak(path.resolve(__dirname, p));
+        const p = webpack.resolveWeak('containers/challenge-listing/Listing');
+        const ChallengeListing = webpack.requireWeak(path.resolve(__dirname, p));
         /* TODO: Choice of currency and prize mode should be moved to
-           * Redux actions / reducers. *//*
-        const query = renderProps.location.search ?
-          qs.parse(renderProps.location.search.slice(1)) : null;
+           * Redux actions / reducers. */
+        const query = renderProps.location.search
+          ? qs.parse(renderProps.location.search.slice(1)) : null;
         const currencyFromUrl = _.get(query, 'currency');
         const prizeMode = currencyFromUrl && `money-${currencyFromUrl}`;
         return (
@@ -61,7 +62,6 @@ export default function ChallengeListingRoute() {
           </StaticRouter>
         );
       }}
-      */
     />
   );
 }