Mm leaderboard theme

__tests__/shared/components/__snapshots__/TopcoderFooter.jsx.snap

@@ -495,7 +495,7 @@ exports[`Matches shallow shapshot 1`] = `
         className="src-shared-components-TopcoderFooter-___style__mobile-navi-col___3BcW4"
       >
         <a
-          href="https://www.topcoder-dev.com/ommunity/admins"
+          href="https://www.topcoder-dev.com/community/admins"
         >
           ABOUT
         </a>

src/server/routes/feeds.js

@@ -26,6 +26,7 @@ routes.get('/thrive', async (req, res, next) => {
       limit: 20,
       order: '-sys.createdAt',
       include: 2,
+      'sys.firstPublishedAt[exists]': true,
     });
     const feed = new RSS({
       title: 'Topcoder Thrive',
@@ -45,8 +46,8 @@ routes.get('/thrive', async (req, res, next) => {
         feed.item({
           title: entry.fields.title,
           description: ReactDOMServer.renderToString(md(entry.fields.content)),
-          url: `https://topcoder.com/thrive/articles/${entry.fields.slug || encodeURIComponent(entry.fields.title)}?utm_source=community&utm_campaign=thrive-feed&utm_medium=promotion`,
-          date: entry.fields.creationDate,
+          url: `https://topcoder.com/thrive/articles/${entry.fields.slug || encodeURIComponent(entry.fields.title)}?utm_source=thrive&utm_campaign=thrive-feed&utm_medium=rss-feed`,
+          date: entry.sys.createdAt,
           categories: entry.fields.tags,
           author: entry.fields.contentAuthor[0].fields.name,
         });

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

@@ -170,6 +170,7 @@ class Article extends React.Component {
           <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}` : DEFAULT_BANNER_IMAGE} />
           <meta name="twitter:image" content={fields.featuredImage ? `https:${subData.assets.items[fields.featuredImage.sys.id].fields.file.url}` : DEFAULT_BANNER_IMAGE} />
+          <link rel="alternate" type="application/rss+xml" title="Topcoder Thrive - RSS feed" href="https://topcoder.com/api/feeds/thrive" />
         </Helmet>
         <div className={theme.wrapper}>
           {/* Banner */}

src/shared/components/Contentful/Image/Image.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable max-len */
 /**
  * The core image rendering.
  */
@@ -68,12 +69,10 @@ export class ImageInner extends React.Component {
       theme,
       id,
       image,
-      imageSource,
+      imageSources,
       clipSvg,
       animation,
     } = this.props;
-
-    const imageUrl = _.get(imageSource, 'file.url');
     const clipSvgUrl = _.get(clipSvg, 'file.url');
     const imgStyle = image.extraStylesForImage ? fixStyle(image.extraStylesForImage) : {};
     if (clipSvgUrl) {
@@ -96,25 +95,47 @@ export class ImageInner extends React.Component {
         )}
         {
           animation.animateOnScroll ? (
-            <img
-              src={imageUrl}
-              alt={image.alt || image.name}
-              style={imgStyle}
-              data-aos={animation.animateOnScroll}
-              data-aos-once={animation.animateOnScrollOnce}
-              data-aos-delay={animation.animateOnScrollDelay}
-              data-aos-duration={animation.animateOnScrollDuration}
-              data-aos-easing={animation.animateOnScrollEasing}
-              data-aos-mirror={animation.animateOnScrollMirror}
-              data-aos-anchor-placement={animation.animateOnScrollAnchor}
-              data-aos-offset={animation.animateOnScrollOffset}
-            />
+            <picture>
+              <source srcSet={imageSources.source.file.url} type={imageSources.source.file.contentType} media="(min-width: 769px)" />
+              {
+                imageSources.sourceMobile ? (
+                  <source srcSet={imageSources.sourceMobile.file.url} type={imageSources.sourceMobile.file.contentType} media="(max-width: 768px)" />
+                ) : (
+                  <source srcSet={`${imageSources.source.file.url}?w=768`} type={imageSources.source.file.contentType} media="(max-width: 768px)" />
+                )
+              }
+              <img
+                src={`${imageSources.source.file.url}?fm=png`}
+                alt={image.alt || image.name}
+                style={imgStyle}
+                data-aos={animation.animateOnScroll}
+                data-aos-once={animation.animateOnScrollOnce}
+                data-aos-delay={animation.animateOnScrollDelay}
+                data-aos-duration={animation.animateOnScrollDuration}
+                data-aos-easing={animation.animateOnScrollEasing}
+                data-aos-mirror={animation.animateOnScrollMirror}
+                data-aos-anchor-placement={animation.animateOnScrollAnchor}
+                data-aos-offset={animation.animateOnScrollOffset}
+                loading="lazy"
+              />
+            </picture>
           ) : (
-            <img
-              src={imageUrl}
-              alt={image.alt || image.name}
-              style={imgStyle}
-            />
+            <picture>
+              <source srcSet={imageSources.source.file.url} type={imageSources.source.file.contentType} media="(min-width: 769px)" />
+              {
+                imageSources.sourceMobile ? (
+                  <source srcSet={imageSources.sourceMobile.file.url} type={imageSources.sourceMobile.file.contentType} media="(max-width: 768px)" />
+                ) : (
+                  <source srcSet={`${imageSources.source.file.url}?w=768`} type={imageSources.source.file.contentType} media="(max-width: 768px)" />
+                )
+              }
+              <img
+                src={`${imageSources.source.file.url}?fm=png`}
+                alt={image.alt || image.name}
+                style={imgStyle}
+                loading="lazy"
+              />
+            </picture>
           )
         }
       </div>
@@ -130,7 +151,7 @@ ImageInner.defaultProps = {
 ImageInner.propTypes = {
   id: PT.string.isRequired,
   image: PT.shape().isRequired,
-  imageSource: PT.shape().isRequired,
+  imageSources: PT.shape().isRequired,
   clipSvg: PT.shape(),
   theme: PT.shape({
     'img-wrap': PT.string,

src/shared/components/Contentful/Image/index.jsx

@@ -7,7 +7,6 @@ import LoadingIndicator from 'components/LoadingIndicator';
 import PT from 'prop-types';
 import React from 'react';
 import _ from 'lodash';
-import { useMediaQuery } from 'react-responsive';
 
 import Image from './Image';
 import defaultTheme from './themes/default.scss';
@@ -18,7 +17,7 @@ export default function ImageLoader(props) {
   const {
     id, preview, spaceName, environment,
   } = props;
-  const isTabletOrMobile = useMediaQuery({ maxWidth: 768 });
+  // const isTabletOrMobile = useMediaQuery({ maxWidth: 768 });
   return (
     <ContentfulLoader
       entryIds={id}
@@ -27,9 +26,12 @@ export default function ImageLoader(props) {
       environment={environment}
       render={(data) => {
         const { fields } = data.entries.items[id];
-        const imgId = _.get(fields, isTabletOrMobile && fields.sourceMobile ? 'sourceMobile.sys.id' : 'source.sys.id');
+        const imgId = _.get(fields, 'source.sys.id');
+        const imgIdMobile = _.get(fields, 'sourceMobile.sys.id');
         const clipSvgId = _.get(fields, 'clipSvg.sys.id');
-        const assetIds = _.compact([imgId, clipSvgId]);
+        const assetIds = _.compact(
+          [imgId, imgIdMobile, clipSvgId],
+        );
         const animationId = _.get(fields, 'animationOnScroll.sys.id');
         const entryIds = [];
         if (animationId) {
@@ -45,16 +47,19 @@ export default function ImageLoader(props) {
               environment={environment}
               render={(assetData) => {
                 const { items } = assetData.assets;
-                const imgFields = _.get(items, [imgId, 'fields']);
                 const clipSvgFields = _.get(items, [clipSvgId, 'fields']);
+                const imageSources = {
+                  source: _.get(items, [imgId, 'fields']),
+                  sourceMobile: _.get(items, [imgIdMobile, 'fields']),
+                };
                 let animation = {};
                 if (animationId) {
                   animation = { ...assetData.entries.items[animationId].fields };
                 }
                 return (
                   <Image
                     {...props}
-                    imageSource={imgFields}
+                    imageSources={imageSources}
                     clipSvg={clipSvgFields}
                     image={fields}
                     theme={defaultTheme}

src/shared/components/Contentful/Tabs/themes/vertical.scss

@@ -53,6 +53,7 @@ li.tab {
     padding-right: 20px;
     border-bottom: 5px solid $gray-border-color;
     min-width: auto !important;
+    white-space: nowrap;
 
     &:first-child {
       padding-left: 7px;

src/shared/components/MMatchLeaderboard/index.jsx

@@ -94,6 +94,7 @@ export default class MMLeaderboard extends Component {
                     <div className={defaultStyles.topMemberPhotoAndPlace}>
                       <img src={member.photoUrl || DEFAULT_AVATAR_URL} className={defaultStyles.topMemberPhoto} alt={`Avatar of ${member.createdBy}`} />
                       <div className={defaultStyles[`topMemberRank${indx + 1}`]}>{member.rank}</div>
+                      <a href={`${config.URL.BASE}/members/${member.createdBy}`} target="_blank" rel="noreferrer" style={{ color: getRatingColor(member.rating) }}>{member.createdBy}</a>
                     </div>
                     <div className={defaultStyles.topMemberLink}>
                       <a href={`${config.URL.BASE}/members/${member.createdBy}`} target="_blank" rel="noreferrer" style={{ color: getRatingColor(member.rating) }}>{member.createdBy}</a>
@@ -106,6 +107,7 @@ export default class MMLeaderboard extends Component {
                 <div className={defaultStyles.topMemberPhotoAndPlace}>
                   <img src={data[2].photoUrl || DEFAULT_AVATAR_URL} className={defaultStyles.topMemberPhoto} alt={`Avatar of ${data[2].createdBy}`} />
                   <div className={defaultStyles.topMemberRank3}>{data[2].rank}</div>
+                  <a href={`${config.URL.BASE}/members/${data[2].createdBy}`} target="_blank" rel="noreferrer" style={{ color: getRatingColor(data[2].rating) }}>{data[2].createdBy}</a>
                 </div>
                 <div className={defaultStyles.topMemberLink}>
                   <a href={`${config.URL.BASE}/members/${data[2].createdBy}`} target="_blank" rel="noreferrer" style={{ color: getRatingColor(data[2].rating) }}>{data[2].createdBy}</a>
@@ -135,15 +137,17 @@ export default class MMLeaderboard extends Component {
                   ))}
                   {
                     data.length > 10 && (
-                    <PrimaryButton
-                      to={`${config.URL.BASE}/challenges/${challengeId}?tab=submissions`}
-                      openNewTab
-                      theme={{
-                        button: tc['primary-green-sm'],
-                      }}
-                    >
-                      See Full Leaderbord
-                    </PrimaryButton>
+                      <div className={defaultStyles.moreBtn}>
+                        <PrimaryButton
+                          to={`${config.URL.BASE}/challenges/${challengeId}?tab=submissions`}
+                          openNewTab
+                          theme={{
+                            button: tc['primary-green-sm'],
+                          }}
+                        >
+                          See Full Leaderbord
+                        </PrimaryButton>
+                      </div>
                     )}
                 </div>
                 )}