Playing around with moving OJs into main content

src/app/pages/ArticlePage/ArticlePage.jsx

@@ -20,6 +20,7 @@
 import ComscoreAnalytics from '#containers/ComscoreAnalytics';
 import articleMediaPlayer from '#containers/ArticleMediaPlayer';
 import SocialEmbedContainer from '#containers/SocialEmbed';
+import TopStoriesSection from './PagePromoSections/TopStoriesSection';
 
 import {
   getArticleId,
@@ -88,7 +89,24 @@
   const lastPublished = getLastPublished(pageData);
   const aboutTags = getAboutTags(pageData);
   const topics = path(['metadata', 'topics'], pageData);
-  const blocks = pathOr([], ['content', 'model', 'blocks'], pageData);
+  let blocks = pathOr([], ['content', 'model', 'blocks'], pageData);
+
+  // start top stories spike
+  // q: there is currently no consideration of isAmp and so this is running on all routes using the ArticlePage page.
+  // again, is there a place where isAmp could be mapped to a prop to vary on higher up the chain? maybe the `getInitialData` function?
+  const topStoriesContent = path(['secondaryColumn', 'topStories'], pageData);
+  // q: is there any concept of transformers/transformation in Simorgh. We could create an experimentalTopStories block instead of copying the code from the secondary column
+  // we might want to experiment on more than the position such as the title of the block, number of top stories shown
+  const topStoriesBlock = { type: 'topStories', model: topStoriesContent, id: 'topStories', position: 0, blockGroupType: 'topStories', blockGroupIndex: 0 }; // these should be made more programatically
+  const halfway = parseInt(blocks.length / 2) + 1; // randomly picked halfway through the article (we might want to vary this value with Optimizely)
+
+  // stolen from the articles transformer as we have done this kind of messing with block order there.
+  // There might be a more Simorgh way of doing this?
+  const blocksBeforeInsertIndex = blocks.slice(0, halfway);
+  const blocksAfterInsertIndex = blocks.slice(halfway, blocks.length);
+  blocks = [...blocksBeforeInsertIndex, topStoriesBlock, ...blocksAfterInsertIndex]
+  // end top stories spike
+
   const startsWithHeading = propEq('type', 'headline')(blocks[0] || {});
 
   const bylineBlock = blocks.find(block => block.type === 'byline');
@@ -165,6 +183,15 @@
       <Disclaimer {...props} increasePaddingOnDesktop={false} />
     ),
     podcastPromo: () => (podcastPromoEnabled ? <InlinePodcastPromo /> : null),
+    // this works, but I wonder if we would prefer a more explicit approach to make sure this is clear as an experiment
+    topStories: () => (topStoriesContent ? (
+      <div
+        css={styles.topStoriesAndFeaturesSection}
+        data-testid="top-stories"
+      >
+        <TopStoriesSection content={topStoriesContent} />
+      </div>
+    ) : null),
   };
 
   const visuallyHiddenBlock = {

src/server/index.jsx

@@ -329,7 +329,7 @@ server.get(
           `https://www.bbcweb3hytmzhn5d532owbu6oqadra5z3ar726vq5kgwwn6aucdccrad.onion${urlPath}`,
         );
 
-        const mvtVaryHeaders = !isAmp && getMvtVaryHeaders(mvtExperiments);
+        const mvtVaryHeaders = !isAmp && getMvtVaryHeaders(mvtExperiments); // does this mean AMP cannot do experiments?
 
         if (mvtVaryHeaders) res.set('vary', mvtVaryHeaders);
         res.status(status).send(result.html);