Adjust container width & adjust ad calls to account for right rail.

packages/global/components/blocks/marko.json

@@ -21,6 +21,9 @@
     "@title": "string",
     "@alias": "string"
   },
+  "<global-recommended-content-block>": {
+    "template": "./recommended-content.marko"
+  },
   "<global-section-cards-block>": {
     "template": "./section-cards.marko",
     "<query-params>": {},

packages/global/components/blocks/recommended-content.marko

@@ -0,0 +1,40 @@
+import { get, getAsArray } from "@parameter1/base-cms-object-path";
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+import shuffle from "../../utils/shuffle-array";
+
+$ const { site, } = out.global;
+$ const idxConfig = site.getAsObject("identityX");
+$ const recommendedQuestionId = get(idxConfig, "options.recommendedQuestionId");
+$ const title = defaultValue(input.title, "Suggested");
+
+<marko-web-identity-x-context|{ user, hasUser }|>
+  $ const customTitle = (hasUser) ? `${title} for ${user.givenName}` : `${title} for You`;
+  <if(hasUser)>
+    $ const userAnswer = user.customSelectFieldAnswers.find(({id, answers}) => answers.length && id === recommendedQuestionId);
+    $ const answers = getAsArray(userAnswer, "answers");
+    <if(answers.length)>
+      $ const answer = shuffle(answers)[0];
+      $ const queryParams = {
+        limit: 4,
+        ...input.queryParams,
+        ...get(idxConfig, `options.answerToQueryParamsMap.${recommendedQuestionId}.${answer.id}.queryParams`),
+      };
+      <theme-latest-content-list-block title=customTitle query-params=queryParams class="recommended-content">
+        <@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX />
+        <@node with-section=true with-dates=false ...input.node />
+      </theme-latest-content-list-block>
+    </if>
+    <else>
+      <theme-latest-content-list-block title=customTitle query-params=input.queryParams class="recommended-content">
+        <@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX />
+        <@node with-section=true with-dates=false ...input.node />
+      </theme-latest-content-list-block>
+    </else>
+  </if>
+  <else>
+    <theme-latest-content-list-block title=customTitle query-params=input.queryParams class="recommended-content">
+      <@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX />
+      <@node with-section=true with-dates=false ...input.node />
+    </theme-latest-content-list-block>
+  </else>
+</marko-web-identity-x-context>

packages/global/components/layouts/website-section/feed.marko

@@ -1,10 +1,13 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
 import { getAsArray } from "@parameter1/base-cms-object-path";
 
 $ const { id, alias, name, pageNode } = input;
+$ const withNativeX = defaultValue(input.withNativeX, true);
 $ const sections = getAsArray(input, "sections");
 
-$ const { pagination: p, req, site } = out.global;
-$ const perPage = 18;
+$ const { pagination: p, site } = out.global;
+$ const newsletterConfig = site.getAsObject('newsletter.signupBannerLarge');
+$ const perPage = 12;
 
 <global-website-section-default-layout
   id=id
@@ -59,71 +62,41 @@ $ const perPage = 18;
       />
     </if>
 
-    <theme-section-feed-block alias=alias display-image=input.displayImage>
-      <@query-params limit=3 skip=p.skip({ perPage }) />
-    </theme-section-feed-block>
-  </@section>
-
-  <@section|{ aliases }|>
-    <theme-gam-define-display-ad
-      name="rotation"
-      position="section_page"
-      aliases=aliases
-      modifiers=["inter-block"]
-    />
-  </@section>
-
-  <@section>
-    <theme-section-feed-block alias=alias display-image=input.displayImage>
-      <@query-params limit=2 skip=p.skip({ perPage, skip: 3 }) />
-    </theme-section-feed-block>
-  </@section>
-
-  <@section>
-    <theme-newsletter-signup-banner-large-block />
-  </@section>
-
-  <@section>
-    <theme-section-feed-block alias=alias display-image=input.displayImage>
-      <@query-params limit=3 skip=p.skip({ perPage, skip: 5 }) />
-    </theme-section-feed-block>
-  </@section>
-
-  <@section|{ aliases }|>
-    <theme-gam-define-display-ad
-      name="rotation"
-      position="section_page"
-      aliases=aliases
-      modifiers=["inter-block"]
-    />
-  </@section>
-
-  <@section>
-    <theme-section-feed-block alias=alias display-image=input.displayImage>
-      <@query-params limit=5 skip=p.skip({ perPage, skip: 8 }) />
-    </theme-section-feed-block>
-  </@section>
-
-  <@section|{ aliases }|>
-    <theme-gam-define-display-ad
-      name="rotation"
-      position="section_page"
-      aliases=aliases
-      modifiers=["inter-block"]
-    />
-  </@section>
-
-  <@section>
-    <theme-section-feed-block alias=alias display-image=input.displayImage>
-      <@query-params limit=5 skip=p.skip({ perPage, skip: 13 }) />
-    </theme-section-feed-block>
-    <theme-section-feed-block|{ totalCount }| alias=alias count-only=true>
-      <theme-pagination-controls
-        per-page=perPage
-        total-count=totalCount
-        path=alias
-      />
-    </theme-section-feed-block>
+    <global-section-feed-wrapper
+        aliases=aliases
+        alias=alias
+        flow=input.feedFlow
+        with-ads=input.withAds
+        query-params=input.queryParams
+        above-the-fold=true
+        ad-name=input.adName
+      >
+        <@node ...input.node />
+        <if(withNativeX)>
+          <@native-x index=[1] name="default" aliases=aliases sectionName="Sponsored" />
+        </if>
+        <@rail>
+          <!-- Remobe sticky top if you add user stuff back. -->
+          <div class="mb-block sticky-top">
+            <theme-gam-define-display-ad
+              name="rail"
+              position="section_page"
+              aliases=input.aliases
+              modifiers=["rotation", "section_page"]
+            />
+          </div>
+          <!-- <marko-web-identity-x-context|{ hasUser }|>
+            <if(!hasUser)>
+              <div class="sticky-top mt-2">
+                <global-identity-x-newsletter-form-inline with-image=false type="inlineContent" />
+              </div>
+            </if>
+          </marko-web-identity-x-context> -->
+        </@rail>
+        <@rail>
+          <theme-client-side-most-popular-list-block class="sticky-top" />
+        </@rail>
+      </global-section-feed-wrapper>
   </@section>
 
   <for|s| of=sections>
@@ -140,8 +113,8 @@ $ const perPage = 18;
     <theme-gam-define-display-ad
       name="rotation"
       position="section_page"
-      aliases=aliases
-      modifiers=["inter-block"]
+      aliases=input.aliases
+      modifiers=["rotation", "inter-block", "section_page"]
     />
   </@section>
 </global-website-section-default-layout>

packages/global/components/marko.json

@@ -1,7 +1,8 @@
 {
   "taglib-imports": [
     "./blocks/marko.json",
-    "./layouts/marko.json"
+    "./layouts/marko.json",
+    "./wrappers/marko.json"
   ],
   "<global-sponsored-label-logo>": {
     "template": "./sponsored-label-logo.marko"

packages/global/components/wrappers/components/section-feed-flow.marko

@@ -0,0 +1,46 @@
+import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value";
+
+$ const { nativeX: nxConfig } = out.global;
+
+$ const { nodes, nativeX } = input;
+
+$ const lazyload = defaultValue(input.lazyload, true);
+$ const adName = defaultValue(input.adName, "rotation");
+$ const withNativeXSection = defaultValue(input.withNativeXSection, true);
+
+<if(nodes && nodes.length)>
+  <if(nativeX && nativeX.index)>
+    $ const nodesBefore = nodes.slice(0, nativeX.index);
+    $ const nodesAfter = nodes.slice(nativeX.index);
+    <theme-section-feed-flow ...input.flow nodes=nodesBefore header=input.header modifiers=input.modifiers>
+      <@node-list inner-justified=false ...input.nodeList />
+      <@node with-dates=false with-section ...input.node />
+    </theme-section-feed-flow>
+    <marko-web-native-x-retrieve|{ wasFound, hasCampaign, campaign, linkAttrs, containerAttrs }| ...nxConfig.getPlacement({ name: nativeX.name, aliases: nativeX.aliases }) section-name=nativeX.sectionName>
+      <if(wasFound && hasCampaign)>
+        <theme-section-feed-flow ...input.flow nodes=[campaign] modifiers=input.modifiers>
+          <@node-list inner-justified=false ...input.nodeList />
+          <@node with-dates=false with-section=true ...input.node container-attrs=containerAttrs link-attrs=linkAttrs />
+        </theme-section-feed-flow>
+      </if>
+    </marko-web-native-x-retrieve>
+    <theme-section-feed-flow ...input.flow nodes=nodesAfter modifiers=input.modifiers>
+      <@node-list inner-justified=false ...input.nodeList />
+      <@node with-dates=false with-section ...input.node />
+    </theme-section-feed-flow>
+  </if>
+  <else>
+    <theme-section-feed-flow ...input.flow nodes=nodes header=input.header modifiers=input.modifiers>
+      <@node-list inner-justified=false ...input.nodeList />
+      <@node with-dates=false with-section ...input.node />
+    </theme-section-feed-flow>
+  </else>
+  <if(input.withAds)>
+    <theme-gam-define-display-ad
+      name="rotation-300"
+      position="content_page"
+      aliases=input.aliases
+      modifiers=["rotation", "inline-section-feed", "content_page"]
+    />
+  </if>
+</if>

packages/global/components/wrappers/marko.json

@@ -0,0 +1,26 @@
+{
+  "taglib-imports": [],
+  "<global-section-feed-wrapper>": {
+    "template": "./section-feed.marko",
+    "<flow>": {},
+    "@rails <rail>[]": {},
+    "@after": {},
+    "@with-pagination": "boolean",
+    "@modifiers": "array",
+    "@with-ads": "boolean",
+    "@ad-name": "string",
+    "@alias": "string",
+    "@header": "string",
+    "@aliases": "array",
+    "@query-name": "string",
+    "@query-params": "object",
+    "@native-x": "object",
+    "@node": "object",
+    "@node-list": "object",
+    "@path": "string",
+    "@above-the-fold": "boolean"
+  },
+  "<global-native-x-section-feed-wrapper>": {
+    "template": "./native-x-section-feed.marko"
+  }
+}

packages/global/components/wrappers/native-x-section-feed.marko

@@ -0,0 +1,58 @@
+import { defaultValue } from "@parameter1/base-cms-marko-web/utils";
+import { getAsArray, getAsObject } from "@parameter1/base-cms-object-path";
+import convertAdToNode from "@parameter1/base-cms-marko-web-native-x/utils/convert-ad-to-node";
+import chunkArray from "../../utils/chunk-array";
+
+$ const { nativeX: nxConfig, i18n } = out.global;
+$ const { section, modifiers } = input;
+$ const limit = defaultValue(input.limit, 6);
+$ const placementName = defaultValue(input.placementName, "default");
+$ const aliases = defaultValue(input.aliases, []);
+$ const cols = input.cols != null ? input.cols : limit;
+$ const viewMore = defaultValue(input.viewMore, false);
+$ const nodeImageInput = getAsObject(input, "node.image");
+$ const aboveTheFold = defaultValue(input.aboveTheFold, false);
+$ const excludeContentIds = getAsArray(input.excludeContentIds);
+$ const displayImage = defaultValue(input.displayImage, true);
+
+$ const uri = nxConfig.getUri();
+$ const placement = nxConfig.getPlacement({ name: placementName, aliases });
+
+<marko-web-native-x-fetch-elements|{ ads }| uri=uri id=placement.id opts={ n: limit }>
+  $ const hasAd = ads && ads.length && ads[0] && ads[0].hasCampaign;
+  <if(hasAd)>
+    $ const nodes = ads.filter(
+      (ad) => ad.hasCampaign).map(
+      (ad) => convertAdToNode(ad, { sectionName: "Brand Insights" }).node).filter(
+      (node) => !excludeContentIds.includes(node.storyId)
+    );
+    $ const nodeGroups = chunkArray(nodes, 3);
+
+    <div class="row">
+      <div class="col-lg-8">
+        <for|nodeGroup, index| of=nodeGroups>
+          $ const header = index === 0 ? input.header : null;
+          $ const flowInput = (index === 0 && aboveTheFold) ? { displayImage, ...input.flow, lazyload: false } : { displayImage, ...input.flow};
+          <section-feed-flow
+            nodes=nodeGroup
+            header=header
+            modifiers=modifiers
+            node=input.node
+            node-list=input.nodeList
+            aliases=aliases
+            with-ads=false
+            flow=flowInput
+          />
+        </for>
+      </div>
+      <div class="col-lg-4">
+        <if(input.rails && input.rails[0])>
+          <${input.rails[0].renderBody} />
+        </if>
+        <else>
+
+        </else>
+      </div>
+    </div>
+  </if>
+</marko-web-native-x-fetch-elements>