@mjhls/mjh-framework 1.0.683 → 1.0.684-beta.0

package/dist/esm/View.js

@@ -6,7 +6,7 @@ import './_iter-detect-59409a32.js';
 import { _ as _toConsumableArray } from './toConsumableArray-725434a0.js';
 import './core.get-iterator-method-54d2e411.js';
 import './_object-pie-71ac75a4.js';
-import { _ as _extends, a as _Object$assign } from './extends-cc5da797.js';
+import { a as _Object$assign, _ as _extends } from './extends-cc5da797.js';
 import './_object-sap-4d59d5bd.js';
 import './inherits-7ee3e0c1.js';
 import './define-property-de3fc946.js';
@@ -14,19 +14,19 @@ import './web.dom.iterable-8956f9a5.js';
 import { _ as _typeof } from './typeof-08f2c380.js';
 import './_is-array-49698029.js';
 import React__default, { useState, useRef, useEffect } from 'react';
-import { l as lib_3 } from './index-93ec3c59.js';
+import { l as lib_3 } from './index-0e45a0b2.js';
 import 'prop-types';
 import 'react-bootstrap/Row';
 import 'react-bootstrap/Col';
-import { m as moment } from './moment-12415288.js';
+import { m as moment } from './moment-e2f9b20c.js';
 import { useRouter } from 'next/router';
 import './isSymbol-807e927e.js';
 import './debounce-1a993acf.js';
-import { I as InfiniteScroll } from './index.es-938a3a58.js';
+import { I as InfiniteScroll } from './index.es-29c1cef5.js';
 import 'react-dom';
-import './index-51a80699.js';
+import './index-73819142.js';
 import './index-5f9f807a.js';
-import { m as main_39 } from './main-0465b2a0.js';
+import { m as main_36 } from './main-5d1e4bd3.js';
 import './entities-7cc3bf45.js';
 import { _ as _JSON$stringify } from './stringify-008c8802.js';
 import { a as _getIterator, _ as _slicedToArray } from './slicedToArray-7021e5df.js';
@@ -34,7 +34,7 @@ import { a as _asyncToGenerator, r as regenerator } from './asyncToGenerator-7c6
 import './_set-species-cede29f8.js';
 import './beam-681a9749.js';
 import DFPAdSlot from './AdSlot.js';
-import { B as BlockContent } from './BlockContent-a614acdf.js';
+import { B as BlockContent } from './BlockContent-e9b4ddcf.js';
 import './smoothscroll-4b699764.js';
 import './GroupDeck.js';
 import 'react-bootstrap';
@@ -42,7 +42,7 @@ import './iconBase-602d52fe.js';
 import Button from 'react-bootstrap/Button';
 import { _ as _defineProperty } from './defineProperty-b798470d.js';
 import Form from 'react-bootstrap/Form';
-import { I as InscreenSensor, r as renderAuthor, g as getSerializers } from './index-5505d4f9.js';
+import { I as InscreenSensor, r as renderAuthor, g as getSerializers } from './index-85783f24.js';
 import './util-7700fc59.js';
 import './brightcove-react-player-loader.es-83f53e4e.js';
 import 'react-bootstrap/Pagination';
@@ -54,9 +54,9 @@ import { _ as _Object$keys } from './keys-fc2d4c34.js';
 import 'react-bootstrap/Dropdown';
 import { b as FaMinus, c as FaPlus } from './index.esm-cf08bf18.js';
 import getSeriesDetail from './getSeriesDetail.js';
-import 'nookies';
-import getQuery from './getQuery.js';
+import './index-db3bb315.js';
 import getRelatedArticle from './getRelatedArticle.js';
+import getQuery from './getQuery.js';
 import { g as getTargeting, a as getContentPlacementUrl } from './getTargeting-2acdec91.js';
 import getKeywords from './getKeywords.js';
 import urlFor from './urlFor.js';
@@ -137,9 +137,9 @@ var DocumentGroup = function DocumentGroup(_ref) {
       style: { display: 'flex', flexDirection: 'column', padding: '0 1rem', justifyContent: thumbnailUrl ? 'center' : 'flex-start', alignItems: 'center' } },
     thumbnailUrl && React__default.createElement('img', { style: { maxWidth: '220px', maxHeight: '100px', marginTop: '1rem' }, src: thumbnailUrl, alt: name }),
     !thumbnailUrl && React__default.createElement('p', {
-      style: { maxWidth: '315px', margin: '0', color: 'var(--primary)', textAlign: thumbnailUrl ? 'center' : main_39 ? 'left' : 'right', marginTop: '.25rem' },
+      style: { maxWidth: '315px', margin: '0', color: 'var(--primary)', textAlign: thumbnailUrl ? 'center' : main_36 ? 'left' : 'right', marginTop: '.25rem' },
       dangerouslySetInnerHTML: { __html: name } }),
-    main_39 && !thumbnailUrl && React__default.createElement(
+    main_36 && !thumbnailUrl && React__default.createElement(
       'style',
       { jsx: 'true' },
       '\n          a.doc-group {\n            display: block !important;\n            padding: 0!important;\n          }\n        '
@@ -246,7 +246,7 @@ var ISI = function ISI(props) {
   );
 };
 
-var css = ".RelatedArticles-module_mediaContainer__10h9k {\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: nowrap;\r\n  margin: 0 -1rem;\r\n}\r\n.RelatedArticles-module_mediaCard__3wQbn {\r\n  margin: 0 1rem 1rem;\r\n  width: calc(33% - 1rem);\r\n  display: column;\r\n  flex-direction: row;\r\n  margin-bottom: 0.75rem;\r\n  padding-bottom: 0.75rem;\r\n  border-bottom: none;\r\n}\r\n.RelatedArticles-module_mediaCard__3wQbn:last-child {\r\n  border-bottom: none;\r\n}\r\n.RelatedArticles-module_cardTitle__3P-Ib {\r\n  font-weight: bold;\r\n  color: #252525;\r\n  margin-bottom: 0.25rem;\r\n  font-size: 15px;\r\n}\r\n.RelatedArticles-module_authorListing__1EFg4 span.RelatedArticles-module_text-muted__3b0zX {\r\n  color: #000;\r\n  font-weight: bold;\r\n}\r\n.RelatedArticles-module_cardDate__1wOR5 {\r\n  color: var(--dark);\r\n  display: block;\r\n  background: #fff !important;\r\n  margin-bottom: 0;\r\n}\r\n.RelatedArticles-module_imgWrapper__5Jx_4 {\r\n  display: block;\r\n  text-align: center;\r\n  margin-bottom: 0.5rem;\r\n}\r\n.RelatedArticles-module_imgWrapper__5Jx_4 img {\r\n  height: 135px;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  object-position: center;\r\n}\r\n@media screen and (max-width: 1064px) {\r\n}\r\n@media screen and (max-width: 968px) {\r\n  .RelatedArticles-module_mediaContainer__10h9k {\r\n    flex-wrap: wrap;\r\n  }\r\n  .RelatedArticles-module_mediaCard__3wQbn {\r\n    width: 100%;\r\n  }\r\n  .RelatedArticles-module_imgWrapper__5Jx_4 img {\r\n    width: 100%;\r\n    height: auto;\r\n\r\n    max-height: 175px;\r\n    object-fit: contain;\r\n    margin-bottom: 1rem;\r\n  }\r\n}\r\n";
+var css = ".RelatedArticles-module_mediaContainer__10h9k {\r\n  display: flex;\r\n  flex-direction: row;\r\n  flex-wrap: nowrap;\r\n  margin: 0 -1rem;\r\n}\r\n.RelatedArticles-module_mediaCard__3wQbn {\r\n  margin: 0 1rem 1rem;\r\n  width: calc(33% - 1rem);\r\n  display: column;\r\n  flex-direction: row;\r\n  margin-bottom: 0.75rem;\r\n  border-bottom: none;\r\n}\r\n.RelatedArticles-module_mediaCard__3wQbn:last-child {\r\n  border-bottom: none;\r\n}\r\n.RelatedArticles-module_cardTitle__3P-Ib {\r\n  font-weight: bold;\r\n  color: #252525;\r\n  margin-bottom: 0.25rem;\r\n  font-size: 15px;\r\n}\r\n.RelatedArticles-module_authorListing__1EFg4 span.RelatedArticles-module_text-muted__3b0zX {\r\n  color: #000;\r\n  font-weight: bold;\r\n}\r\n.RelatedArticles-module_cardDate__1wOR5 {\r\n  color: var(--dark);\r\n  display: block;\r\n  background: #fff !important;\r\n  margin-bottom: 0;\r\n}\r\n.RelatedArticles-module_imgWrapper__5Jx_4 {\r\n  display: block;\r\n  text-align: center;\r\n  margin-bottom: 0.5rem;\r\n}\r\n.RelatedArticles-module_imgWrapper__5Jx_4 img {\r\n  height: 135px;\r\n  width: 100%;\r\n  object-fit: cover;\r\n  object-position: center;\r\n}\r\n@media screen and (max-width: 1064px) {\r\n}\r\n@media screen and (max-width: 968px) {\r\n  .RelatedArticles-module_mediaContainer__10h9k {\r\n    flex-wrap: wrap;\r\n  }\r\n  .RelatedArticles-module_mediaCard__3wQbn {\r\n    width: 100%;\r\n    background-color: #cccccc;\r\n    margin-bottom: 0.5rem;\r\n    padding: 0.5rem;\r\n    border-radius: 0.25rem;\r\n  }\r\n  .RelatedArticles-module_imgWrapper__5Jx_4 {\r\n    display: none;\r\n  }\r\n}\r\n";
 var styles = { "mediaContainer": "RelatedArticles-module_mediaContainer__10h9k", "mediaCard": "RelatedArticles-module_mediaCard__3wQbn", "cardTitle": "RelatedArticles-module_cardTitle__3P-Ib", "authorListing": "RelatedArticles-module_authorListing__1EFg4", "text-muted": "RelatedArticles-module_text-muted__3b0zX", "cardDate": "RelatedArticles-module_cardDate__1wOR5", "imgWrapper": "RelatedArticles-module_imgWrapper__5Jx_4" };
 styleInject(css);
 
@@ -291,6 +291,22 @@ var RelatedArticle = function RelatedArticle(_ref) {
   );
 };
 
+var defaults = { nonTextBehavior: 'remove' };
+
+var blocksToText = function blocksToText(blocks) {
+  var opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  var options = _Object$assign({}, defaults, opts);
+  return blocks.map(function (block) {
+    if (block._type !== 'block' || !block.children) {
+      return options.nonTextBehavior === 'remove' ? '' : '[' + block._type + ' block]';
+    }
+    return block.children.map(function (child) {
+      return child.text;
+    }).join('');
+  }).join('\n\n');
+};
+
 var Article = function Article(props) {
   var onVote = function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee(nodeKey, selectedChoice) {
@@ -482,10 +498,56 @@ var Article = function Article(props) {
   };
 
   var RelevantTopics = function RelevantTopics() {
-    if (content_placement && content_placement.length > 0 || documentGroupMapping) {
+    if (content_placement && content_placement.length > 0 || documentGroupMapping && documentGroupMapping.length > 0) {
+      var relatedLinks = [];
+      if (documentGroupMapping && documentGroupMapping.length > 0) {
+        documentGroupMapping.forEach(function (documentGroup) {
+          if (documentGroup.parent) {
+            relatedLinks = [].concat(_toConsumableArray(relatedLinks), [{ label: documentGroup.name, href: cpModificationRequired ? '/' + documentGroup.parent.identifier.current + '/' + documentGroup.path : '/' + documentGroup.path }]);
+          }
+        });
+      }
+      if (content_placement && content_placement.length > 0) {
+        content_placement.filter(function (item) {
+          return item.path !== 'news';
+        }).forEach(function (cp) {
+          var cp_url = cpModificationRequired ? getContentPlacementUrl(cp) : cp.path;
+          var href = '/' + cp_url;
+          relatedLinks = [].concat(_toConsumableArray(relatedLinks), [{ label: cp.name, href: href }]);
+        });
+      }
+      if (relatedLinks && relatedLinks.length > 0) {
+        return React__default.createElement(
+          'div',
+          null,
+          relatedLinks.map(function (relatedLink, index) {
+            return React__default.createElement(
+              'span',
+              { key: index, className: 'related-link' },
+              React__default.createElement(
+                'a',
+                { className: 'related-links', style: { color: 'blue' }, href: relatedLink.href },
+                relatedLink.label
+              ),
+              React__default.createElement(
+                'style',
+                { jsx: 'true' },
+                '\n                      .related-link:not(:first-child):before {\n                        content: \' | \';\n                      }\n                    '
+              )
+            );
+          })
+        );
+      }
+      return null;
+    }
+    return null;
+  };
+
+  var RelatedContent = function RelatedContent() {
+    if (showRelatedArticles) {
       return React__default.createElement(
-        'div',
-        { style: { color: '#262626' } },
+        'section',
+        { className: 'related-content-section' },
         React__default.createElement(
           'p',
           { className: 'mb-0' },
@@ -495,47 +557,17 @@ var Article = function Article(props) {
             'Related Content:'
           )
         ),
-        documentGroupMapping && documentGroupMapping.map(function (documentGroup) {
-          if (!documentGroup.parent) {
-            return null;
-          }
-
-          return React__default.createElement(
-            React__default.Fragment,
-            null,
-            React__default.createElement(
-              'span',
-              { className: '' },
-              React__default.createElement(
-                'a',
-                {
-                  className: 'related-links',
-                  style: { color: 'blue' },
-                  href: cpModificationRequired ? '/' + documentGroup.parent.identifier.current + '/' + documentGroup.path : '/' + documentGroup.path },
-                documentGroup.name
-              )
-            ),
-            content_placement && content_placement.length ? ' | ' : null
-          );
-        }),
-        content_placement && content_placement.length > 0 ? content_placement.map(function (cp, index) {
-          var cp_url = cpModificationRequired ? getContentPlacementUrl(cp) : cp.path;
-          var href = '/' + cp_url;
-          return React__default.createElement(
-            React__default.Fragment,
-            { key: index },
-            React__default.createElement(
-              'span',
-              null,
-              React__default.createElement(
-                'a',
-                { className: 'related-links', key: index, href: href, style: { color: 'blue' } },
-                cp.name
-              )
-            ),
-            content_placement.length > index + 1 ? ' | ' : null
-          );
-        }) : null
+        React__default.createElement(RelevantTopics, null),
+        React__default.createElement(
+          'div',
+          { className: 'pt-2' },
+          React__default.createElement(RelatedArticle, { articles: article.relatedContentArticles, client: client })
+        ),
+        React__default.createElement(
+          'style',
+          { jsx: 'true' },
+          '\n              .related-content-section {\n                margin: 0.5rem 0 0.5rem 0;\n                padding: 0.5rem;\n                background-color: #e6e6e6;\n                border-radius: 0.25rem;\n              }\n            '
+        )
       );
     }
     return null;
@@ -624,12 +656,36 @@ var Article = function Article(props) {
           setContextualADFlag(true);
         }
       };
+
+      //Start: Generating intemediate Section if available
+      var blockContentSection1 = articleBody.slice(0, selectedIndex);
+      var blockContentSection2 = articleBody.slice(selectedIndex);
+      var blockContentIntermediateSection = [];
+      var rearrangeSections = function rearrangeSections(arr, index) {
+        var item = arr[index];
+        if (item && item._type) {
+          if (item._type === 'block' && blocksToText([item]) === '') {
+            rearrangeSections(arr, index + 1);
+          }
+          if (item._type !== 'block') {
+            var _selectedIndex = arr.findIndex(function (item1) {
+              return item1._key === item._key;
+            });
+            blockContentIntermediateSection = [].concat(_toConsumableArray(blockContentIntermediateSection), _toConsumableArray(arr.slice(0, _selectedIndex + 1)));
+            blockContentSection2 = blockContentSection2.slice(_selectedIndex + 1);
+            rearrangeSections(blockContentSection2, 0);
+          }
+        }
+      };
+      rearrangeSections(blockContentSection2, 0);
+      //End: Generating intemediate Section if available
+
       return React__default.createElement(
         React__default.Fragment,
         null,
         React__default.createElement(BlockContent, _extends({
           serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, contextualADFlag, null, null, targeting),
-          blocks: [].concat(_toConsumableArray(articleBody.slice(0, selectedIndex))),
+          blocks: blockContentSection1,
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
         React__default.createElement('span', { className: 'clearfix' }),
@@ -644,9 +700,20 @@ var Article = function Article(props) {
           { id: 'contextual-video-ad-' + payload._id, className: 'contextual-video-ad' },
           React__default.createElement(DFPAdSlot, _extends({}, payload.contextualVideoAD, { refreshFlag: false, checkIsAdFound: checkIsVideoAdFound }))
         ),
+        blockContentIntermediateSection.length > 0 && React__default.createElement(
+          React__default.Fragment,
+          null,
+          React__default.createElement(BlockContent, _extends({
+            serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, contextualADFlag, null, null, targeting),
+            blocks: blockContentIntermediateSection,
+            imageOptions: { w: 320, h: 240, fit: 'max' }
+          }, client.config())),
+          React__default.createElement('span', { className: 'clearfix' })
+        ),
+        React__default.createElement(RelatedContent, null),
         React__default.createElement(BlockContent, _extends({
           serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, null, null, null, targeting),
-          blocks: [].concat(_toConsumableArray(articleBody.slice(selectedIndex))),
+          blocks: blockContentSection2,
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config()))
       );
@@ -665,7 +732,7 @@ var Article = function Article(props) {
           }, { viewport: [0, 0], sizes: ['fluid', [300, 100]] }] : { viewport: [0, 0], sizes: ['fluid', [300, 100]] }
         })
       });
-      var _selectedIndex = indexes[1] + 1;
+      var _selectedIndex2 = indexes[1] + 1;
 
       var _checkIsAdFound = function _checkIsAdFound(isFound, adData) {
         if (!isFound) {
@@ -696,12 +763,35 @@ var Article = function Article(props) {
         }
       };
 
+      //Start: Generating intemediate Section if available
+      var _blockContentSection = articleBody.slice(0, _selectedIndex2);
+      var _blockContentSection2 = articleBody.slice(_selectedIndex2);
+      var _blockContentIntermediateSection = [];
+      var _rearrangeSections = function _rearrangeSections(arr, index) {
+        var item = arr[index];
+        if (item && item._type) {
+          if (item._type === 'block' && blocksToText([item]) === '') {
+            _rearrangeSections(arr, index + 1);
+          }
+          if (item._type !== 'block') {
+            var _selectedIndex3 = arr.findIndex(function (item1) {
+              return item1._key === item._key;
+            });
+            _blockContentIntermediateSection = [].concat(_toConsumableArray(_blockContentIntermediateSection), _toConsumableArray(arr.slice(0, _selectedIndex3 + 1)));
+            _blockContentSection2 = _blockContentSection2.slice(_selectedIndex3 + 1);
+            _rearrangeSections(_blockContentSection2, 0);
+          }
+        }
+      };
+      _rearrangeSections(_blockContentSection2, 0);
+      //End: Generating intemediate Section if available
+
       return React__default.createElement(
         React__default.Fragment,
         null,
         React__default.createElement(BlockContent, _extends({
           serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, contextualADFlag, null, null, targeting),
-          blocks: [].concat(_toConsumableArray(articleBody.slice(0, _selectedIndex))),
+          blocks: _blockContentSection,
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
         contextualADFlag && React__default.createElement('span', { className: 'clearfix' }),
@@ -711,9 +801,20 @@ var Article = function Article(props) {
           React__default.createElement(DFPAdSlot, _extends({}, payload.contextualAD, { refreshFlag: false, checkIsAdFound: previewAd ? null : _checkIsAdFound }))
         ),
         contextualADFlag && React__default.createElement('span', { className: 'clearfix' }),
+        _blockContentIntermediateSection.length > 0 && React__default.createElement(
+          React__default.Fragment,
+          null,
+          React__default.createElement(BlockContent, _extends({
+            serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, contextualADFlag, null, null, targeting),
+            blocks: _blockContentIntermediateSection,
+            imageOptions: { w: 320, h: 240, fit: 'max' }
+          }, client.config())),
+          React__default.createElement('span', { className: 'clearfix' })
+        ),
+        React__default.createElement(RelatedContent, null),
         React__default.createElement(BlockContent, _extends({
           serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, null, null, null, targeting),
-          blocks: [].concat(_toConsumableArray(articleBody.slice(_selectedIndex))),
+          blocks: _blockContentSection2,
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config()))
       );
@@ -723,7 +824,7 @@ var Article = function Article(props) {
           slotId: (payload.contextualVideoAD.slotId || 'in-context_video') + '-' + payload._id
         })
       });
-      var _selectedIndex2 = indexes[1] + 1;
+      var _selectedIndex4 = indexes[1] + 1;
 
       var _checkIsAdFound2 = function _checkIsAdFound2(isFound) {
         if (!isFound) {
@@ -739,12 +840,35 @@ var Article = function Article(props) {
         }
       };
 
+      //Start: Generating intemediate Section if available
+      var _blockContentSection3 = articleBody.slice(0, _selectedIndex4);
+      var _blockContentSection4 = articleBody.slice(_selectedIndex4);
+      var _blockContentIntermediateSection2 = [];
+      var _rearrangeSections2 = function _rearrangeSections2(arr, index) {
+        var item = arr[index];
+        if (item && item._type) {
+          if (item._type === 'block' && blocksToText([item]) === '') {
+            _rearrangeSections2(arr, index + 1);
+          }
+          if (item._type !== 'block') {
+            var _selectedIndex5 = arr.findIndex(function (item1) {
+              return item1._key === item._key;
+            });
+            _blockContentIntermediateSection2 = [].concat(_toConsumableArray(_blockContentIntermediateSection2), _toConsumableArray(arr.slice(0, _selectedIndex5 + 1)));
+            _blockContentSection4 = _blockContentSection4.slice(_selectedIndex5 + 1);
+            _rearrangeSections2(_blockContentSection4, 0);
+          }
+        }
+      };
+      _rearrangeSections2(_blockContentSection4, 0);
+      //End: Generating intemediate Section if available
+
       return React__default.createElement(
         React__default.Fragment,
         null,
         React__default.createElement(BlockContent, _extends({
           serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, contextualADFlag, null, null, targeting),
-          blocks: [].concat(_toConsumableArray(articleBody.slice(0, _selectedIndex2))),
+          blocks: _blockContentSection3,
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config())),
         React__default.createElement('span', { className: 'clearfix' }),
@@ -753,9 +877,61 @@ var Article = function Article(props) {
           { id: 'contextual-video-ad-' + payload._id, className: 'contextual-video-ad' },
           React__default.createElement(DFPAdSlot, _extends({}, payload.contextualVideoAD, { refreshFlag: false, checkIsAdFound: _checkIsAdFound2 }))
         ),
+        _blockContentIntermediateSection2.length > 0 && React__default.createElement(
+          React__default.Fragment,
+          null,
+          React__default.createElement(BlockContent, _extends({
+            serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, contextualADFlag, null, null, targeting),
+            blocks: _blockContentIntermediateSection2,
+            imageOptions: { w: 320, h: 240, fit: 'max' }
+          }, client.config())),
+          React__default.createElement('span', { className: 'clearfix' })
+        ),
+        React__default.createElement(RelatedContent, null),
+        React__default.createElement(BlockContent, _extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, null, null, null, targeting),
+          blocks: _blockContentSection4,
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config()))
+      );
+    } else if (indexes.length >= 2 && body.length > 3 && showRelatedArticles) {
+      var _selectedIndex6 = indexes[1] + 1;
+
+      //Start: Rearranging sections
+      var _blockContentSection5 = articleBody.slice(0, _selectedIndex6);
+      var _blockContentSection6 = articleBody.slice(_selectedIndex6);
+      var _rearrangeSections3 = function _rearrangeSections3(arr, index) {
+        var item = arr[index];
+        if (item && item._type) {
+          if (item._type === 'block' && blocksToText([item]) === '') {
+            _rearrangeSections3(arr, index + 1);
+          }
+          if (item._type !== 'block') {
+            var _selectedIndex7 = arr.findIndex(function (item1) {
+              return item1._key === item._key;
+            });
+            _blockContentSection5 = [].concat(_toConsumableArray(_blockContentSection5), _toConsumableArray(arr.slice(0, _selectedIndex7 + 1)));
+            _blockContentSection6 = _blockContentSection6.slice(_selectedIndex7 + 1);
+            _rearrangeSections3(_blockContentSection6, 0);
+          }
+        }
+      };
+      _rearrangeSections3(_blockContentSection6, 0);
+      //End: Rearranging sections
+
+      return React__default.createElement(
+        React__default.Fragment,
+        null,
+        React__default.createElement(BlockContent, _extends({
+          serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, contextualADFlag, null, null, targeting),
+          blocks: _blockContentSection5,
+          imageOptions: { w: 320, h: 240, fit: 'max' }
+        }, client.config())),
+        React__default.createElement('span', { className: 'clearfix' }),
+        React__default.createElement(RelatedContent, null),
         React__default.createElement(BlockContent, _extends({
           serializers: getSerializers(client, pageview, videoAccountIDs, onVote, true, drupalLeadSettings, currentPage, false, null, null, null, targeting),
-          blocks: [].concat(_toConsumableArray(articleBody.slice(_selectedIndex2))),
+          blocks: _blockContentSection6,
           imageOptions: { w: 320, h: 240, fit: 'max' }
         }, client.config()))
       );
@@ -946,7 +1122,7 @@ var Article = function Article(props) {
             React__default.createElement(
               'div',
               { className: 'ad-box', style: { textAlign: 'center' } },
-              main_39 && !sponsoredFlag && props.article.Ads && props.article.Ads.length > 0 && props.article.Ads.map(function (ad, index) {
+              main_36 && !sponsoredFlag && props.article.Ads && props.article.Ads.length > 0 && props.article.Ads.map(function (ad, index) {
                 if (index === 0) {
                   return React__default.createElement(
                     'div',
@@ -998,21 +1174,7 @@ var Article = function Article(props) {
                 issue.name
               )
             ),
-            React__default.createElement('div', { className: 'clearfix', style: { minHeight: '1px' } }),
-            showRelatedArticles && !showIsi && React__default.createElement(
-              React__default.Fragment,
-              null,
-              React__default.createElement(
-                'div',
-                null,
-                React__default.createElement(RelevantTopics, null)
-              ),
-              React__default.createElement(
-                'div',
-                { className: 'pt-2' },
-                React__default.createElement(RelatedArticle, { articles: article.relatedArticle, client: client })
-              )
-            )
+            React__default.createElement('div', { className: 'clearfix', style: { minHeight: '1px' } })
           ),
           renderIsiContent(props.article)
         ),
@@ -1025,7 +1187,7 @@ var Article = function Article(props) {
           })
         )
       ),
-      main_39 && !sponsoredFlag && props.article.Ads && props.article.Ads.length > 0 && props.article.Ads.map(function (ad, index) {
+      main_36 && !sponsoredFlag && props.article.Ads && props.article.Ads.length > 0 && props.article.Ads.map(function (ad, index) {
         if (index > 0) {
           return React__default.createElement(
             'div',
@@ -1065,6 +1227,201 @@ var Article = function Article(props) {
 
 var _this = undefined;
 
+var getRelatedContentArticles = function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/regenerator.mark(function _callee() {
+    var client = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    var article = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var prevUrl = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '/';
+    var articleCount = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : 0;
+
+    var _article$url, url, content_placement, documentGroupMapping, issueGroup, references, params, articles, relatedContentQuery;
+
+    return regenerator.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            _article$url = article.url;
+            _article$url = _article$url === undefined ? {
+              current: null
+            } : _article$url;
+            url = _article$url.current, content_placement = article.content_placement, documentGroupMapping = article.documentGroupMapping, issueGroup = article.issueGroup;
+            references = [];
+
+            if (content_placement && content_placement.length > 0) {
+              content_placement.forEach(function (_ref2) {
+                var path = _ref2.path,
+                    _id = _ref2._id;
+
+                if (!_id || typeof _id == 'undefined') {
+                  return null;
+                }
+                var prev_url_to_check = prevUrl;
+                if (prev_url_to_check.includes('?')) {
+                  prev_url_to_check = prev_url_to_check.split('?')[0];
+                }
+                if (prev_url_to_check.endsWith(path) && _id) references.push(_id);
+              });
+              if (references.length === 0) {
+                content_placement.filter(function (_ref3) {
+                  var identifier = _ref3.identifier;
+                  return identifier !== 'news';
+                }).forEach(function (_ref4) {
+                  var _id = _ref4._id;
+
+                  if (_id) references.push(_id);
+                });
+              }
+            }
+
+            if (documentGroupMapping && documentGroupMapping.length > 0) {
+              documentGroupMapping.forEach(function (_ref5) {
+                var _id = _ref5._id;
+
+                if (_id) references.push(_id);
+              });
+            }
+
+            if (issueGroup && issueGroup._ref) {
+              references.push(issueGroup._ref);
+            }
+
+            params = { url: url, references: references };
+            articles = [];
+
+            if (!(params.references && params.references.length > 0)) {
+              _context.next = 20;
+              break;
+            }
+
+            relatedContentQuery = '*[\n      _type == "article"\n      && defined(title)\n      && defined(url)\n      && !(_id in path("drafts.**"))\n      && is_visible == true\n      && passwordLock != true\n      && taxonomyMapping[].disableAds != \'true\'\n      && contentCategory.name != \'Poll\'\n      && contentCategory.name != \'Slideshows\'\n    \t&& contentCategory.disableAds != \'true\'\n      && ExcludeFromInfiniteScroll != true\n      && url.current != $url\n      && !defined(body[].videos)\n      && dateTime(published) <= dateTime(now())\n      && references($references)\n    ]| order(published desc)[' + articleCount + ']\n    {\n      title,\n      url,\n      thumbnail\n    }';
+            _context.prev = 11;
+            _context.next = 14;
+            return client.fetch(relatedContentQuery, params);
+
+          case 14:
+            articles = _context.sent;
+            _context.next = 20;
+            break;
+
+          case 17:
+            _context.prev = 17;
+            _context.t0 = _context['catch'](11);
+
+            console.error(_context.t0);
+
+          case 20:
+            return _context.abrupt('return', articles);
+
+          case 21:
+          case 'end':
+            return _context.stop();
+        }
+      }
+    }, _callee, _this, [[11, 17]]);
+  }));
+
+  return function getRelatedContentArticles() {
+    return _ref.apply(this, arguments);
+  };
+}();
+
+// const getRelatedContents = async (ctx = null, client = null, article = {}, prevUrl = '/', articleCount = 0) => {
+//   const {
+//     url: { current: url } = {
+//       current: null
+//     },
+//     content_placement,
+//     documentGroupMapping,
+//     issueGroup
+//   } = article
+//   let params = { url }
+//   let conditions = ''
+
+//   if (content_placement && content_placement.length > 0) {
+//     let taxonomy = []
+//     content_placement.forEach(({ path, _id }) => {
+//       if (!_id || typeof _id == 'undefined') {
+//         return null
+//       }
+//       let prev_url_to_check = prevUrl
+//       if (prev_url_to_check.includes('?')) {
+//         prev_url_to_check = prev_url_to_check.split('?')[0]
+//       }
+//       if (prev_url_to_check.endsWith(path) && _id) taxonomy.push(_id)
+//     })
+//     if (taxonomy.length === 0) {
+//       content_placement
+//         .filter(({ identifier }) => identifier !== 'news')
+//         .forEach(({ _id }) => {
+//           if (_id) taxonomy.push(_id)
+//         })
+//     }
+//     if (taxonomy.length > 0) {
+//       params = { ...params, taxonomy }
+//       conditions = `&& taxonomyMapping[]._ref in $taxonomy`
+//     }
+//   }
+
+//   if (documentGroupMapping && documentGroupMapping.length > 0) {
+//     let documentGroup = []
+//     documentGroupMapping.forEach(({ _id }) => {
+//       if (_id) documentGroup.push(_id)
+//     })
+//     if (params.taxonomy && documentGroup.length > 0) {
+//       params = { ...params, documentGroup }
+//       conditions = `&& (taxonomyMapping[]._ref in $taxonomy || documentGroupMapping[]._ref in $documentGroup)`
+//     }
+//   }
+
+//   if (issueGroup && issueGroup._ref) {
+//     if (params.taxonomy && params.documentGroup) {
+//       params = { ...params, issueAssociation: issueGroup._ref }
+//       conditions = `&& (taxonomyMapping[]._ref in $taxonomy || documentGroupMapping[]._ref in $documentGroup || issueGroup._ref == $issueAssociation )`
+//     } else if (params.taxonomy) {
+//       params = { ...params, issueAssociation: issueGroup._ref }
+//       conditions = `&& (taxonomyMapping[]._ref in $taxonomy || issueGroup._ref == $issueAssociation )`
+//     }
+//   }
+
+//   let articles = []
+//   if (params.taxonomy && params.taxonomy.length > 0) {
+//     const relatedContentQuery = `*[
+//       _type == "article"
+//       && defined(title)
+//       && defined(url)
+//       && !(_id in path("drafts.**"))
+//       && is_visible == true
+//       && passwordLock != true
+//       && taxonomyMapping[].disableAds != 'true'
+//       && contentCategory.name != 'Poll'
+//       && contentCategory.name != 'Slideshows'
+//     	&& contentCategory.disableAds != 'true'
+//       && ExcludeFromInfiniteScroll != true
+//       && url.current != $url
+//       && !defined(body[].videos)
+//       && published <= '${new Date().toISOString()}'
+//       ${conditions}
+//     ]| order(published desc)[${articleCount}]
+//     {
+//       title,
+//       url,
+//       thumbnail
+//     }`
+
+//     try {
+//       articles = await client.fetch(relatedContentQuery, params)
+//     } catch (error) {
+//       console.error(error)
+//     }
+//   }
+
+//   return articles
+// }
+
+// export default getRelatedContents
+
+var _this$1 = undefined;
+
 var ArticleQueue = function ArticleQueue(props) {
   var _props$prevUrl = props.prevUrl,
       prevUrl = _props$prevUrl === undefined ? '/' : _props$prevUrl,
@@ -1098,7 +1455,7 @@ var ArticleQueue = function ArticleQueue(props) {
     });
     var targeting = getTargeting({ article: activeArticle, cpModificationRequired: cpModificationRequired, position: props.position, prevUrl: prevUrl });
 
-    if (!main_39) {
+    if (!main_36) {
       lib_3.getGoogletag().then(function (googletag) {
         if (window.googletag && googletag.pubadsReady) {
           var slots = googletag.pubads().getSlots();
@@ -1116,7 +1473,7 @@ var ArticleQueue = function ArticleQueue(props) {
       });
     }
     //Refresh leaderboard ad on mobile
-    if (main_39) {
+    if (main_36) {
       var leaderboardSlotId = '';
       lib_3.getGoogletag().then(function (googletag) {
         if (window.googletag && googletag.pubadsReady) {
@@ -1190,7 +1547,7 @@ var ArticleQueue = function ArticleQueue(props) {
               switch (_context.prev = _context.next) {
                 case 0:
                   if (!(article && article._id)) {
-                    _context.next = 9;
+                    _context.next = 12;
                     break;
                   }
 
@@ -1202,17 +1559,22 @@ var ArticleQueue = function ArticleQueue(props) {
 
                 case 5:
                   article.relatedArticle = _context.sent;
+                  _context.next = 8;
+                  return getRelatedContentArticles(null, props.client, article, prevUrl, startingIndex + '..' + endingIndex);
+
+                case 8:
+                  article.relatedContentArticles = _context.sent;
                   targeting = getTargeting({ article: article, cpModificationRequired: cpModificationRequired, prevUrl: prevUrl });
 
                   article.Ads = Ads.getRightItems(targeting);
                   setQueueData([].concat(_toConsumableArray(queueData), [article]));
 
-                case 9:
+                case 12:
                 case 'end':
                   return _context.stop();
               }
             }
-          }, _callee, _this);
+          }, _callee, _this$1);
         }));
 
         return function (_x) {
@@ -1360,7 +1722,7 @@ var Articles = function Articles(props) {
   }, _defineProperty(_extends2, 'pageview', pageview), _defineProperty(_extends2, 'onVote', function onVote() {}), _defineProperty(_extends2, 'ISIContent', ISIContent), _defineProperty(_extends2, 'videoAccountIDs', videoAccountIDs), _defineProperty(_extends2, 'sponsoredTaxonomies', []), _defineProperty(_extends2, 'cpModificationRequired', cpModificationRequired), _defineProperty(_extends2, 'Settings', Settings), _defineProperty(_extends2, 'canonicalTag', canonicalTag), _extends2), props));
 };
 
-var _this$1 = undefined;
+var _this$2 = undefined;
 
 var View = function View(props) {
   var router = useRouter();
@@ -1619,12 +1981,12 @@ View.returnGetInitialProps = function () {
             }
 
             article.relatedArticle = null;
-            _context.next = 20;
+            _context.next = 23;
             break;
 
           case 16:
             if (!article) {
-              _context.next = 20;
+              _context.next = 23;
               break;
             }
 
@@ -1633,8 +1995,13 @@ View.returnGetInitialProps = function () {
 
           case 19:
             article.relatedArticle = _context.sent;
+            _context.next = 22;
+            return getRelatedContentArticles(context, client, article, prevUrl, '0..2');
 
-          case 20:
+          case 22:
+            article.relatedContentArticles = _context.sent;
+
+          case 23:
             return _context.abrupt('return', {
               url: url,
               sao: sao,
@@ -1645,12 +2012,12 @@ View.returnGetInitialProps = function () {
               sponsoredFlag: sponsoredFlag
             });
 
-          case 21:
+          case 24:
           case 'end':
             return _context.stop();
         }
       }
-    }, _callee, _this$1);
+    }, _callee, _this$2);
   }));
 
   return function (_x, _x2, _x3, _x4, _x5) {