From 03caecf4f1337cc9faa4bfc75c06c9c62c9d8a36 Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Fri, 1 Dec 2023 13:35:44 -0600 Subject: [PATCH 01/14] Add section feed wrapper components --- packages/global/components/marko.json | 3 +- .../components/section-feed-flow.marko | 46 +++++ .../global/components/wrappers/marko.json | 26 +++ .../wrappers/native-x-section-feed.marko | 58 ++++++ .../components/wrappers/section-feed.marko | 167 ++++++++++++++++++ 5 files changed, 299 insertions(+), 1 deletion(-) create mode 100644 packages/global/components/wrappers/components/section-feed-flow.marko create mode 100644 packages/global/components/wrappers/marko.json create mode 100644 packages/global/components/wrappers/native-x-section-feed.marko create mode 100644 packages/global/components/wrappers/section-feed.marko diff --git a/packages/global/components/marko.json b/packages/global/components/marko.json index 3ebd7ca1..c3c54758 100644 --- a/packages/global/components/marko.json +++ b/packages/global/components/marko.json @@ -1,7 +1,8 @@ { "taglib-imports": [ "./blocks/marko.json", - "./layouts/marko.json" + "./layouts/marko.json", + "./wrappers/marko.json" ], "": { "template": "./sponsored-label-logo.marko" diff --git a/packages/global/components/wrappers/components/section-feed-flow.marko b/packages/global/components/wrappers/components/section-feed-flow.marko new file mode 100644 index 00000000..7d3f008a --- /dev/null +++ b/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); + + + + $ const nodesBefore = nodes.slice(0, nativeX.index); + $ const nodesAfter = nodes.slice(nativeX.index); + + <@node-list inner-justified=false ...input.nodeList /> + <@node with-dates=false with-section ...input.node /> + + + + + <@node-list inner-justified=false ...input.nodeList /> + <@node with-dates=false with-section=true ...input.node container-attrs=containerAttrs link-attrs=linkAttrs /> + + + + + <@node-list inner-justified=false ...input.nodeList /> + <@node with-dates=false with-section ...input.node /> + + + + + <@node-list inner-justified=false ...input.nodeList /> + <@node with-dates=false with-section ...input.node /> + + + + + + diff --git a/packages/global/components/wrappers/marko.json b/packages/global/components/wrappers/marko.json new file mode 100644 index 00000000..c7b004a7 --- /dev/null +++ b/packages/global/components/wrappers/marko.json @@ -0,0 +1,26 @@ +{ + "taglib-imports": [], + "": { + "template": "./section-feed.marko", + "": {}, + "@rails []": {}, + "@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" + }, + "": { + "template": "./native-x-section-feed.marko" + } +} diff --git a/packages/global/components/wrappers/native-x-section-feed.marko b/packages/global/components/wrappers/native-x-section-feed.marko new file mode 100644 index 00000000..1e64dc35 --- /dev/null +++ b/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 }); + + + $ const hasAd = ads && ads.length && ads[0] && ads[0].hasCampaign; + + $ 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); + +
+
+ + $ const header = index === 0 ? input.header : null; + $ const flowInput = (index === 0 && aboveTheFold) ? { displayImage, ...input.flow, lazyload: false } : { displayImage, ...input.flow}; + + +
+
+ + <${input.rails[0].renderBody} /> + + + + +
+
+ + diff --git a/packages/global/components/wrappers/section-feed.marko b/packages/global/components/wrappers/section-feed.marko new file mode 100644 index 00000000..d7f18d19 --- /dev/null +++ b/packages/global/components/wrappers/section-feed.marko @@ -0,0 +1,167 @@ +import defaultValue from "@parameter1/base-cms-marko-core/utils/default-value"; +import queryFragment from "@parameter1/base-cms-marko-web-theme-monorail/graphql/fragments/section-feed-block"; + +$ const { pagination: p, req } = out.global; + +$ const withPagination = defaultValue(input.withPagination, true); +$ const perPage = 12; +$ const skip = p.skip({ perPage }); + +$ const { modifiers } = input; +$ const path = input.path || input.alias || req.path; +$ const withAds = defaultValue(input.withAds, true); +$ const aboveTheFold = defaultValue(input.aboveTheFold, false); + +$ const queryName = input.queryName ? input.queryName : "website-scheduled-content"; +$ const queryParams = { + queryFragment, + ...input.queryParams, + ...(new Set(["website-scheduled-content", "website-optioned-content"]).has(queryName) && { + sectionAlias: input.alias, + }), +}; + +$ const chunkLengths = [3, 3, 3, 3]; +$ const limit = chunkLengths.reduce((n, length) => (n + length), 0); +$ const params = { ...queryParams, limit, skip }; + + + $ const nodeGroups = chunkLengths.reduce((chunked, length, index) => { + const start = length * index; + const end = start + length; + chunked.push(nodes.slice(start, end)); + return chunked; + }, []); + + +
+
+ + $ const isLast = index === nodeGroups.length - 1; + $ const header = index === 0 ? input.header : null; + $ const adName = index === 0 ? input.adName || "top-rotation" : input.adName || "rotation"; + $ const flowInput = (index === 0 && aboveTheFold) ? { ...input.flow, lazyload: false } : input.flow; + $ const nativeX = index === 0 ? input.nativeX : undefined; + + + + + <@query-params ...queryParams /> + + + +
+
+ <${input.rails[0].renderBody} /> +
+
+ + + $ const topNodeGroups = nodeGroups.slice(0, 2); + $ const bottomNodeGroups = nodeGroups.slice(2); +
+
+ + $ const header = index === 0 ? input.header : null; + $ const adName = index === 0 ? input.adName || "rotation" : null; + $ const flowInput = (index === 0 && aboveTheFold) ? { ...input.flow, lazyload: false } : input.flow; + $ const nativeX = index === 0 ? input.nativeX : undefined; + + +
+
+ + <${input.rails[0].renderBody} /> + + + + + + + + + +
+
+ +
+
+ + $ const isLast = index === bottomNodeGroups.length - 1; + + + + + <@query-params ...queryParams /> + + + +
+
+ + <${input.rails[1].renderBody} /> + + + + +
+
+ + From 40e25df802103b442fa49f29c27123c6f1126c93 Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Fri, 1 Dec 2023 13:36:04 -0600 Subject: [PATCH 02/14] Add DE specific recommend content block --- packages/global/components/blocks/marko.json | 3 ++ .../blocks/recommended-content.marko | 35 +++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 packages/global/components/blocks/recommended-content.marko diff --git a/packages/global/components/blocks/marko.json b/packages/global/components/blocks/marko.json index 36e17094..8a3e7d8a 100644 --- a/packages/global/components/blocks/marko.json +++ b/packages/global/components/blocks/marko.json @@ -18,6 +18,9 @@ "@title": "string", "@alias": "string" }, + "": { + "template": "./recommended-content.marko" + }, "": { "template": "./section-cards.marko", "": {}, diff --git a/packages/global/components/blocks/recommended-content.marko b/packages/global/components/blocks/recommended-content.marko new file mode 100644 index 00000000..3d415da0 --- /dev/null +++ b/packages/global/components/blocks/recommended-content.marko @@ -0,0 +1,35 @@ +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, "Recommended"); + + + $ const customTitle = (hasUser) ? `${title} for ${user.givenName}` : title; + + $ const userAnswer = user.customSelectFieldAnswers.find(({id, answers}) => answers.length && id === recommendedQuestionId); + $ const answers = getAsArray(userAnswer, "answers"); + $ const answer = shuffle(answers)[0]; + $ console.log(input.queryParams) + $ const queryParams = { + limit: 4, + ...input.queryParams, + ...get(idxConfig, `options.answerToQueryParamsMap.${recommendedQuestionId}.${answer.id}.queryParams`), + }; + $ const title = user.givenName ? `Suggested for ${user.givenName}` : 'Suggested for You'; + + + <@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX /> + <@node with-section=true with-dates=false ...input.node /> + + + + + <@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX /> + <@node with-section=true with-dates=false ...input.node /> + + + From 52dac14db021bebf6452a9c1e4c78b8fa5da60f8 Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Fri, 1 Dec 2023 13:36:59 -0600 Subject: [PATCH 03/14] Adjust feed section layout with wider two col layout --- .../layouts/website-section/feed.marko | 113 +++++++----------- 1 file changed, 43 insertions(+), 70 deletions(-) diff --git a/packages/global/components/layouts/website-section/feed.marko b/packages/global/components/layouts/website-section/feed.marko index 892a191b..bc222746 100644 --- a/packages/global/components/layouts/website-section/feed.marko +++ b/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 } = out.global; -$ const perPage = 18; +$ const { pagination: p, site } = out.global; +$ const newsletterConfig = site.getAsObject('newsletter.signupBannerLarge'); +$ const perPage = 12; - <@section|{ aliases }| modifiers=["first"]> + <@section|{ aliases }| modifiers=["break-container", "first"]> - - <@query-params limit=3 skip=p.skip({ perPage }) /> - - - - <@section|{ aliases }|> - - - - <@section> - - <@query-params limit=2 skip=p.skip({ perPage, skip: 3 }) /> - - - - <@section> - - - - <@section> - - <@query-params limit=3 skip=p.skip({ perPage, skip: 5 }) /> - - - - <@section|{ aliases }|> - - - - <@section> - - <@query-params limit=5 skip=p.skip({ perPage, skip: 8 }) /> - - - - <@section|{ aliases }|> - - - - <@section> - - <@query-params limit=5 skip=p.skip({ perPage, skip: 13 }) /> - - - - + + <@node ...input.node /> + + <@native-x index=[1] name="default" aliases=aliases sectionName="Sponsored" /> + + <@rail> + +
+ +
+ + + <@rail> + + + @@ -135,8 +108,8 @@ $ const perPage = 18; From 6cbff2ad1b42d65aede64e94b00759aa4724617b Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Fri, 1 Dec 2023 13:37:18 -0600 Subject: [PATCH 04/14] Adjust default content layout with wider two col layout --- .../components/layouts/content/default.marko | 331 ++++++++++-------- 1 file changed, 182 insertions(+), 149 deletions(-) diff --git a/packages/global/components/layouts/content/default.marko b/packages/global/components/layouts/content/default.marko index 19bd0072..0e671fb1 100644 --- a/packages/global/components/layouts/content/default.marko +++ b/packages/global/components/layouts/content/default.marko @@ -23,6 +23,7 @@ $ const displayNewsletterSignup = ["contact"].includes(type) || showOverlay ? fa $ const shouldInjectAds = ["article", "video", "news", "podcast"].includes(type); $ const excludeFromSidebarsLabel = ["Scholar Profile"]; $ const isOnTheMoveSection = new Set([83113]).has(primarySection.id); +$ const withRecommended = defaultValue(input.withRecommended, true); $ const { primarySection } = content; -
- - - - - - - - - - - - - - - $ let forceDisplay; - $ if (type === "contact") forceDisplay = "left"; - $ if (type === "video") forceDisplay = "none"; - - +
+
+
+ + + + + + + + + + + + + + + $ let forceDisplay; + $ if (type === "contact") forceDisplay = "left"; + $ if (type === "video") forceDisplay = "none"; + + - - - Transcript - - + + + Transcript + + - $ const contentRequiresRegistration = get(content, "userRegistration.isCurrentlyRequired"); - $ const requiresRegistration = contentRequiresRegistration || cmRestrictContentByReg(contentMeterState, content); - $ const accessLevels = getAsArray(content, "userRegistration.accessLevels"); + $ const contentRequiresRegistration = get(content, "userRegistration.isCurrentlyRequired"); + $ const requiresRegistration = contentRequiresRegistration || cmRestrictContentByReg(contentMeterState, content); + $ const accessLevels = getAsArray(content, "userRegistration.accessLevels"); - - $ const lazyloadFirstImage = displayPrimaryImage && content.primaryImage; - $ const bodyModifiers = isOnTheMoveSection ? ['on-the-move'] : [] - - $ const body = showOverlay ? getContentPreview({ body: content.body, selector: "p:lt(7)" }) : getContentPreview({ body: content.body, selector: "p:nth-of-type(1)" }); - + + $ const lazyloadFirstImage = displayPrimaryImage && content.primaryImage; + $ const bodyModifiers = isOnTheMoveSection ? ['on-the-move'] : [] + + $ const body = showOverlay ? getContentPreview({ body: content.body, selector: "p:lt(7)" }) : getContentPreview({ body: content.body, selector: "p:nth-of-type(1)" }); + -
- - - - - - $ const body = getContentPreview({ body: content.body, selector: "p:nth-of-type(1)" }); - +
+ + + + + + $ const body = getContentPreview({ body: content.body, selector: "p:nth-of-type(1)" }); + -
- - - - - - -
- - Transcript - +
+ + + + -
- + +
+ + Transcript + + +
+ - - - <${input.afterBody} - aliases=aliases - block-name=blockName - content=content - /> - + + + <${input.afterBody} + aliases=aliases + block-name=blockName + content=content + /> + - $ const profiles = getAsArray(content, 'profiles'); - - - $!{profile.body} - - + $ const profiles = getAsArray(content, 'profiles'); + + + $!{profile.body} + + - - - - - + + + + + - $ const sidebars = getAsArray(content, "sidebars").map((sidebar) => sidebar.body); - + $ const sidebars = getAsArray(content, "sidebars").map((sidebar) => sidebar.body); + - - - <@wufoo user-name=site.get("wufoo.userName") /> - <@link class="btn btn-primary" /> - - + + + <@wufoo user-name=site.get("wufoo.userName") /> + <@link class="btn btn-primary" /> + + - - - + + + - - - - + + + + + + - - - - - - - - + + + + + + +
+
+
+ +
+ +
+ +
@@ -266,7 +278,7 @@ $ const isOnTheMoveSection = new Set([83113]).has(primarySection.id); - <@section|{ content }|> + + + <@section|{ content, aliases }|> + + <@header>More in ${content.primarySection.name} + <@query-params excludeContentIds=[content.id] /> + <@native-x index=[1] name="default" aliases=aliases sectionName="Sponsored" /> + <@rail> +
+ +
+ + <@rail> + + + From b2fc1b82f17b430e020704f796d4a31fcc7d3488 Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Fri, 1 Dec 2023 13:37:35 -0600 Subject: [PATCH 05/14] adjust core gam template and ad sizes --- packages/global/config/gam.js | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/global/config/gam.js b/packages/global/config/gam.js index 934b8354..3afecb5b 100644 --- a/packages/global/config/gam.js +++ b/packages/global/config/gam.js @@ -33,18 +33,24 @@ module.exports = ({ { viewport: [300, 0], size: [[300, 50], [300, 100], [300, 250]] }, ], }) + .setTemplate('ROTATION-300', { + size: [[300, 50], [300, 100], [300, 250]], + sizeMapping: [ + { viewport: [750, 0], size: [[300, 250]] }, + { viewport: [300, 0], size: [[300, 50], [300, 100], [300, 250]] }, + ], + }) .setTemplate('INLINE-CONTENT-MOBILE', { - size: [[970, 90], [728, 90]], + size: [[300, 250], [300, 100], [300, 50]], sizeMapping: [ { viewport: [980, 0], size: [] }, { viewport: [300, 0], size: [[300, 50], [300, 100], [300, 250]] }, ], }) .setTemplate('INLINE-CONTENT-DESKTOP', { - size: [[970, 90], [728, 90]], + size: [[300, 250], [300, 100]], sizeMapping: [ - { viewport: [980, 0], size: [[970, 90], [728, 90]] }, - { viewport: [750, 0], size: [[728, 90], [300, 250]] }, + { viewport: [750, 0], size: [[300, 250], [300, 100]] }, { viewport: [0, 0], size: [] }, ], }); From 414691424a0da0462e022a62db6d06acd9d07a7a Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Fri, 1 Dec 2023 13:37:58 -0600 Subject: [PATCH 06/14] add css variable to widen container --- packages/global/scss/_variables.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/global/scss/_variables.scss b/packages/global/scss/_variables.scss index 22efa81c..d858553b 100644 --- a/packages/global/scss/_variables.scss +++ b/packages/global/scss/_variables.scss @@ -12,3 +12,7 @@ $theme-site-navbar-secondary-font-size: 16px !default; $leaderboard-min-height-mobile: 100px !default; $leaderboard-min-height-desktop: 250px !default; $rail-ad-bg-color: #fff !default; + +// Container widths +$marko-web-document-container-max-width: 1300px; +$skin-content-body-max-width: 1000px !default; From 2dbb9f20da3b441a52321ffb75afb967e1e33d47 Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Fri, 1 Dec 2023 13:38:12 -0600 Subject: [PATCH 07/14] Adjust inbody ad styles to only have borders --- packages/global/scss/components/_ads.scss | 26 +++++++++++++++++++++++ packages/global/scss/core.scss | 4 ++++ 2 files changed, 30 insertions(+) create mode 100644 packages/global/scss/components/_ads.scss diff --git a/packages/global/scss/components/_ads.scss b/packages/global/scss/components/_ads.scss new file mode 100644 index 00000000..a0d8f305 --- /dev/null +++ b/packages/global/scss/components/_ads.scss @@ -0,0 +1,26 @@ +.col-lg-8 { + .ad-container { + &--inline-content { + background-color: none; + margin-left: 0; + margin-right: 0; + } + } + // prevent stacking with the bottom of left column bottom ad on mobile + + .col-lg-4 .sticky-top:first-child .ad-container:first-child { + @include media-breakpoint-down(lg) { + display: none + } + } +} +.ad-container { + &--inline-content, + &--inline-section-feed { + background-color: #fff; + & > :first-child { + border-bottom: 3px solid #f0f1f2; + border-top: 3px solid #f0f1f2; + padding-bottom: 30px; + } + } +} diff --git a/packages/global/scss/core.scss b/packages/global/scss/core.scss index cf8c12b3..64050fa8 100644 --- a/packages/global/scss/core.scss +++ b/packages/global/scss/core.scss @@ -327,6 +327,10 @@ a { @import "./components/blocks/section-card"; /*! critical:start|end */ +/*! critical:start */ +@import "./components/ads"; +/*! critical:end */ + /*! critical:start */ body { -webkit-font-smoothing: antialiased; From ccf4c32f55897b92af63921402b4ef1a940d42f3 Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Fri, 1 Dec 2023 13:38:48 -0600 Subject: [PATCH 08/14] Adjust page header width to better match the new container --- packages/global/scss/core.scss | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/global/scss/core.scss b/packages/global/scss/core.scss index 64050fa8..ff622c9d 100644 --- a/packages/global/scss/core.scss +++ b/packages/global/scss/core.scss @@ -501,6 +501,11 @@ label { margin-top: map-get($spacers, block); margin-bottom: map-get($spacers, block); } - + .content-page-header, + .section-feed-content-node__body { + max-width: none; + margin-right: 0; + margin-left: 0; + } } /*! critical:end */ From c967d2724e167aa8ebe04d920599a28cad5cf535 Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Fri, 1 Dec 2023 13:40:49 -0600 Subject: [PATCH 09/14] Add rotation-300 to site gam configs --- sites/ccnewsnow.com/config/gam.js | 2 ++ sites/diverseeducation.com/config/gam.js | 2 ++ sites/diversemilitary.net/config/gam.js | 2 ++ sites/divhealth.net/config/gam.js | 2 ++ 4 files changed, 8 insertions(+) diff --git a/sites/ccnewsnow.com/config/gam.js b/sites/ccnewsnow.com/config/gam.js index f4332ccd..bcbac9de 100644 --- a/sites/ccnewsnow.com/config/gam.js +++ b/sites/ccnewsnow.com/config/gam.js @@ -14,6 +14,7 @@ config { name: 'leaderboard', templateName: 'LEADERBOARD', path: 'leaderboard' }, { name: 'rail', templateName: 'RAIL', path: 'rotation' }, { name: 'rotation', templateName: 'ROTATION', path: 'rotation' }, + { name: 'rotation-300', templateName: 'ROTATION-300', path: 'rotation' }, { name: 'inline-content-mobile', templateName: 'INLINE-CONTENT-MOBILE', path: 'rotation' }, { name: 'inline-content-desktop', templateName: 'INLINE-CONTENT-DESKTOP', path: 'rotation' }, ]); @@ -26,6 +27,7 @@ aliases.forEach((alias) => config.setAliasAdUnits(alias, [ { name: 'leaderboard', templateName: 'LEADERBOARD', path: `${alias}-leaderboard` }, { name: 'rail', templateName: 'RAIL', path: `${alias}-rotation` }, { name: 'rotation', templateName: 'ROTATION', path: `${alias}-rotation` }, + { name: 'rotation-300', templateName: 'ROTATION-300', path: `${alias}-rotation` }, { name: 'inline-content-mobile', templateName: 'INLINE-CONTENT-MOBILE', path: `${alias}-rotation` }, { name: 'inline-content-desktop', templateName: 'INLINE-CONTENT-DESKTOP', path: `${alias}-rotation` }, ])); diff --git a/sites/diverseeducation.com/config/gam.js b/sites/diverseeducation.com/config/gam.js index 9b4614b3..ad78acc4 100644 --- a/sites/diverseeducation.com/config/gam.js +++ b/sites/diverseeducation.com/config/gam.js @@ -14,6 +14,7 @@ config { name: 'leaderboard', templateName: 'LEADERBOARD', path: 'leaderboard' }, { name: 'rail', templateName: 'RAIL', path: 'rotation' }, { name: 'rotation', templateName: 'ROTATION', path: 'rotation' }, + { name: 'rotation-300', templateName: 'ROTATION-300', path: 'rotation' }, { name: 'inline-content-mobile', templateName: 'INLINE-CONTENT-MOBILE', path: 'rotation' }, { name: 'inline-content-desktop', templateName: 'INLINE-CONTENT-DESKTOP', path: 'rotation' }, ]); @@ -26,6 +27,7 @@ aliases.forEach((alias) => config.setAliasAdUnits(alias, [ { name: 'leaderboard', templateName: 'LEADERBOARD', path: `${alias}-leaderboard` }, { name: 'rail', templateName: 'RAIL', path: `${alias}-rotation` }, { name: 'rotation', templateName: 'ROTATION', path: `${alias}-rotation` }, + { name: 'rotation-300', templateName: 'ROTATION-300', path: `${alias}-rotation` }, { name: 'inline-content-mobile', templateName: 'INLINE-CONTENT-MOBILE', path: `${alias}-rotation` }, { name: 'inline-content-desktop', templateName: 'INLINE-CONTENT-DESKTOP', path: `${alias}-rotation` }, ])); diff --git a/sites/diversemilitary.net/config/gam.js b/sites/diversemilitary.net/config/gam.js index cd5eedb8..371f6a64 100644 --- a/sites/diversemilitary.net/config/gam.js +++ b/sites/diversemilitary.net/config/gam.js @@ -14,6 +14,7 @@ config { name: 'leaderboard', templateName: 'LEADERBOARD', path: 'leaderboard' }, { name: 'rail', templateName: 'RAIL', path: 'rotation' }, { name: 'rotation', templateName: 'ROTATION', path: 'rotation' }, + { name: 'rotation-300', templateName: 'ROTATION-300', path: 'rotation' }, { name: 'inline-content-mobile', templateName: 'INLINE-CONTENT-MOBILE', path: 'rotation' }, { name: 'inline-content-desktop', templateName: 'INLINE-CONTENT-DESKTOP', path: 'rotation' }, ]); @@ -26,6 +27,7 @@ aliases.forEach((alias) => config.setAliasAdUnits(alias, [ { name: 'leaderboard', templateName: 'LEADERBOARD', path: `${alias}-leaderboard` }, { name: 'rail', templateName: 'RAIL', path: `${alias}-rotation` }, { name: 'rotation', templateName: 'ROTATION', path: `${alias}-rotation` }, + { name: 'rotation-300', templateName: 'ROTATION-300', path: `${alias}-rotation` }, { name: 'inline-content-mobile', templateName: 'INLINE-CONTENT-MOBILE', path: `${alias}-rotation` }, { name: 'inline-content-desktop', templateName: 'INLINE-CONTENT-DESKTOP', path: `${alias}-rotation` }, ])); diff --git a/sites/divhealth.net/config/gam.js b/sites/divhealth.net/config/gam.js index f1e070a3..6f3af19b 100644 --- a/sites/divhealth.net/config/gam.js +++ b/sites/divhealth.net/config/gam.js @@ -14,6 +14,7 @@ config { name: 'leaderboard', templateName: 'LEADERBOARD', path: 'leaderboard' }, { name: 'rail', templateName: 'RAIL', path: 'rotation' }, { name: 'rotation', templateName: 'ROTATION', path: 'rotation' }, + { name: 'rotation-300', templateName: 'ROTATION-300', path: 'rotation' }, { name: 'inline-content-mobile', templateName: 'INLINE-CONTENT-MOBILE', path: 'rotation' }, { name: 'inline-content-desktop', templateName: 'INLINE-CONTENT-DESKTOP', path: 'rotation' }, ]); @@ -26,6 +27,7 @@ aliases.forEach((alias) => config.setAliasAdUnits(alias, [ { name: 'leaderboard', templateName: 'LEADERBOARD', path: `${alias}-leaderboard` }, { name: 'rail', templateName: 'RAIL', path: `${alias}-rotation` }, { name: 'rotation', templateName: 'ROTATION', path: `${alias}-rotation` }, + { name: 'rotation-300', templateName: 'ROTATION-300', path: `${alias}-rotation` }, { name: 'inline-content-mobile', templateName: 'INLINE-CONTENT-MOBILE', path: `${alias}-rotation` }, { name: 'inline-content-desktop', templateName: 'INLINE-CONTENT-DESKTOP', path: `${alias}-rotation` }, ])); From 5f96c1351a29091961bc1a8c012e9b8f2429bb92 Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Fri, 1 Dec 2023 14:31:44 -0600 Subject: [PATCH 10/14] udpate recomended block with if answered check --- .../blocks/recommended-content.marko | 31 ++++++++++++------- 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/packages/global/components/blocks/recommended-content.marko b/packages/global/components/blocks/recommended-content.marko index 3d415da0..0c327b58 100644 --- a/packages/global/components/blocks/recommended-content.marko +++ b/packages/global/components/blocks/recommended-content.marko @@ -12,19 +12,26 @@ $ const title = defaultValue(input.title, "Recommended"); $ const userAnswer = user.customSelectFieldAnswers.find(({id, answers}) => answers.length && id === recommendedQuestionId); $ const answers = getAsArray(userAnswer, "answers"); - $ const answer = shuffle(answers)[0]; - $ console.log(input.queryParams) - $ const queryParams = { - limit: 4, - ...input.queryParams, - ...get(idxConfig, `options.answerToQueryParamsMap.${recommendedQuestionId}.${answer.id}.queryParams`), - }; - $ const title = user.givenName ? `Suggested for ${user.givenName}` : 'Suggested for You'; + + $ const answer = shuffle(answers)[0]; + $ const queryParams = { + limit: 4, + ...input.queryParams, + ...get(idxConfig, `options.answerToQueryParamsMap.${recommendedQuestionId}.${answer.id}.queryParams`), + }; + $ const title = user.givenName ? `Suggested for ${user.givenName}` : 'Suggested for You'; - - <@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX /> - <@node with-section=true with-dates=false ...input.node /> - + + <@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX /> + <@node with-section=true with-dates=false ...input.node /> + + + + + <@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX /> + <@node with-section=true with-dates=false ...input.node /> + + From 8a3884bcba57b49fa1a19b00d5d342dd54d343f0 Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Mon, 4 Dec 2023 08:13:18 -0600 Subject: [PATCH 11/14] Put relatedTo in vs section feed block in at bottom of content --- .../components/layouts/content/default.marko | 40 +++++-------------- 1 file changed, 9 insertions(+), 31 deletions(-) diff --git a/packages/global/components/layouts/content/default.marko b/packages/global/components/layouts/content/default.marko index 0e671fb1..26402660 100644 --- a/packages/global/components/layouts/content/default.marko +++ b/packages/global/components/layouts/content/default.marko @@ -278,37 +278,15 @@ $ const withRecommended = defaultValue(input.withRecommended, true); - + <@section|{ content }|> + + - <@section|{ content, aliases }|> + <@section|{ blockName, content, aliases }| modifiers=s.modifiers> From 3c88f8aab43acba6e3ba82d3623e04894560f08a Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Wed, 6 Dec 2023 08:23:38 -0600 Subject: [PATCH 12/14] Fix Suggested for You/User name & style --- .../components/blocks/recommended-content.marko | 10 +++++----- packages/global/scss/core.scss | 15 +++++++++++++++ 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/packages/global/components/blocks/recommended-content.marko b/packages/global/components/blocks/recommended-content.marko index 0c327b58..5c9624b2 100644 --- a/packages/global/components/blocks/recommended-content.marko +++ b/packages/global/components/blocks/recommended-content.marko @@ -3,12 +3,12 @@ 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, "Recommended"); +$ const idxConfig = site.getAsObject("identityX"); +$ const recommendedQuestionId = get(idxConfig, "options.recommendedQuestionId"); +$ const title = defaultValue(input.title, "Suggested"); - $ const customTitle = (hasUser) ? `${title} for ${user.givenName}` : title; + $ const customTitle = (hasUser) ? `${title} for ${user.givenName}` : `${title} for You`; $ const userAnswer = user.customSelectFieldAnswers.find(({id, answers}) => answers.length && id === recommendedQuestionId); $ const answers = getAsArray(userAnswer, "answers"); @@ -19,7 +19,7 @@ $ const title = defaultValue(input.title, "Recommended"); ...input.queryParams, ...get(idxConfig, `options.answerToQueryParamsMap.${recommendedQuestionId}.${answer.id}.queryParams`), }; - $ const title = user.givenName ? `Suggested for ${user.givenName}` : 'Suggested for You'; + $ const title = user.givenName ? `${title} for ${user.givenName}` : `${title} for You`; <@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX /> diff --git a/packages/global/scss/core.scss b/packages/global/scss/core.scss index ff622c9d..0d6df14c 100644 --- a/packages/global/scss/core.scss +++ b/packages/global/scss/core.scss @@ -416,9 +416,24 @@ label { } .node-list { + $self: &; &__header { padding-bottom: 0; } + &--latest-content-list { + #{ $self } { + &__header { + padding-bottom: 10px; + margin-bottom: 24px; + + border-bottom: 1px solid $gray-700; + @include media-breakpoint-up(md) { + margin-bottom: 0; + } + @include skin-typography($style: "section-header-small", $link-style: "primary"); + } + } + } } .card-deck-flow { From 1e9adee0c3e60e1eacb74e5abcd1490903567b7b Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Wed, 6 Dec 2023 08:29:44 -0600 Subject: [PATCH 13/14] remove resettting of title --- packages/global/components/blocks/recommended-content.marko | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/global/components/blocks/recommended-content.marko b/packages/global/components/blocks/recommended-content.marko index 5c9624b2..af0447c6 100644 --- a/packages/global/components/blocks/recommended-content.marko +++ b/packages/global/components/blocks/recommended-content.marko @@ -19,8 +19,6 @@ $ const title = defaultValue(input.title, "Suggested"); ...input.queryParams, ...get(idxConfig, `options.answerToQueryParamsMap.${recommendedQuestionId}.${answer.id}.queryParams`), }; - $ const title = user.givenName ? `${title} for ${user.givenName}` : `${title} for You`; - <@native-x indexes=[0] name="default" aliases=input.aliases ...input.nativeX /> <@node with-section=true with-dates=false ...input.node /> From 7481e21d441a87db2845b3d27156928b752086be Mon Sep 17 00:00:00 2001 From: Brian Miller Date: Wed, 6 Dec 2023 09:29:43 -0600 Subject: [PATCH 14/14] ensure page-rail node-list__header styles match --- packages/global/scss/core.scss | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/global/scss/core.scss b/packages/global/scss/core.scss index 0d6df14c..579b1111 100644 --- a/packages/global/scss/core.scss +++ b/packages/global/scss/core.scss @@ -435,6 +435,13 @@ label { } } } +.page-rail { + .node-list { + .node-list__header { + @include skin-typography($style: "section-header-small", $link-style: "primary"); + } + } +} .card-deck-flow { $self: &;