From ae1943d87bc98b060930f37432ee9547a4da7d64 Mon Sep 17 00:00:00 2001
From: Iain Johnston <iainrj18@gmail.com>
Date: Mon, 29 Apr 2024 10:52:57 +0100
Subject: [PATCH] Playing around with moving OJs into main content

---
 src/app/pages/ArticlePage/ArticlePage.jsx | 29 ++++++++++++++++++++++-
 src/server/index.jsx                      |  2 +-
 2 files changed, 29 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/ArticlePage/ArticlePage.jsx b/src/app/pages/ArticlePage/ArticlePage.jsx
index 377608198a4..6981fadbf2a 100644
--- a/src/app/pages/ArticlePage/ArticlePage.jsx
+++ b/src/app/pages/ArticlePage/ArticlePage.jsx
@@ -20,6 +20,7 @@ import Timestamp from '#containers/ArticleTimestamp';
 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 ArticlePage = ({ pageData }) => {
   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 @@ const ArticlePage = ({ pageData }) => {
       <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 = {
diff --git a/src/server/index.jsx b/src/server/index.jsx
index f2ea72d47b8..0243cb7e33a 100644
--- a/src/server/index.jsx
+++ b/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);