diff --git a/components/gql_node_renderer/Recur.jsx b/components/gql_node_renderer/Recur.jsx new file mode 100644 index 0000000000..f82c691b54 --- /dev/null +++ b/components/gql_node_renderer/Recur.jsx @@ -0,0 +1,50 @@ +import { v4 as uuid } from "uuid"; + +import Header from "./nodes/Header"; +import LineBreak from "./nodes/LineBreak"; +import ListItem from "./nodes/ListItem"; +import OrderedList from "./nodes/OrderedList"; +import Paragraph from "./nodes/Paragraph"; +import Text from "./nodes/Text"; +import UnorderedList from "./nodes/UnorderedList"; +import Link from "./nodes/Link"; + +// todo: more components will like need to be added, but for now, these are the only ones returned in the aem json response +const NODES = { + header: Header, + paragraph: Paragraph, + link: Link, + text: Text, + "unordered-list": UnorderedList, + "ordered-list": OrderedList, + "list-item": ListItem, + "line-break": LineBreak, +}; + +export default function Recur(props) { + const Node = NODES[props.node?.nodeType]; + let content = props.node?.content; + + if ( + !Node || + (props.excludeH1 && + props.node?.nodeType === "header" && + props.node?.style === "h1") + ) { + return; + } + + return ( + <> + {content && content.length ? ( + + {content.map((node) => ( + + ))} + + ) : ( + + )} + + ); +} diff --git a/components/gql_node_renderer/Render.jsx b/components/gql_node_renderer/Render.jsx new file mode 100644 index 0000000000..8a12bcba88 --- /dev/null +++ b/components/gql_node_renderer/Render.jsx @@ -0,0 +1,12 @@ +import Recur from "./Recur"; +import { v4 as uuid } from "uuid"; + +export default function Render(props) { + return ( + <> + {props.data.map((node) => ( + + ))} + + ); +} diff --git a/components/gql_node_renderer/nodes/Header.jsx b/components/gql_node_renderer/nodes/Header.jsx new file mode 100644 index 0000000000..63df446603 --- /dev/null +++ b/components/gql_node_renderer/nodes/Header.jsx @@ -0,0 +1,16 @@ +export default function Header(props) { + switch (props.node.style) { + case "h1": + return

{props.children}

; + case "h2": + return

{props.children}

; + case "h3": + return

{props.children}

; + case "h4": + return

{props.children}

; + case "h5": + return
{props.children}
; + default: + return
{props.children}
; + } +} diff --git a/components/gql_node_renderer/nodes/LineBreak.jsx b/components/gql_node_renderer/nodes/LineBreak.jsx new file mode 100644 index 0000000000..9f63d82a58 --- /dev/null +++ b/components/gql_node_renderer/nodes/LineBreak.jsx @@ -0,0 +1,3 @@ +export default function LineBreak() { + return
; +} diff --git a/components/gql_node_renderer/nodes/Link.jsx b/components/gql_node_renderer/nodes/Link.jsx new file mode 100644 index 0000000000..e25ff0a50b --- /dev/null +++ b/components/gql_node_renderer/nodes/Link.jsx @@ -0,0 +1,7 @@ +export default function Link(props) { + return ( + + {props.node.value} + + ); +} diff --git a/components/gql_node_renderer/nodes/ListItem.jsx b/components/gql_node_renderer/nodes/ListItem.jsx new file mode 100644 index 0000000000..6fc838ebec --- /dev/null +++ b/components/gql_node_renderer/nodes/ListItem.jsx @@ -0,0 +1,3 @@ +export default function ListItem(props) { + return
  • {props.children}
  • ; +} diff --git a/components/gql_node_renderer/nodes/OrderedList.jsx b/components/gql_node_renderer/nodes/OrderedList.jsx new file mode 100644 index 0000000000..58aa728139 --- /dev/null +++ b/components/gql_node_renderer/nodes/OrderedList.jsx @@ -0,0 +1,3 @@ +export default function UnorderedList(props) { + return
      {props.children}
    ; +} diff --git a/components/gql_node_renderer/nodes/Paragraph.jsx b/components/gql_node_renderer/nodes/Paragraph.jsx new file mode 100644 index 0000000000..3ae12ff344 --- /dev/null +++ b/components/gql_node_renderer/nodes/Paragraph.jsx @@ -0,0 +1,3 @@ +export default function Paragraph(props) { + return

    {props.children}

    ; +} diff --git a/components/gql_node_renderer/nodes/Text.jsx b/components/gql_node_renderer/nodes/Text.jsx new file mode 100644 index 0000000000..5fc5a9db8b --- /dev/null +++ b/components/gql_node_renderer/nodes/Text.jsx @@ -0,0 +1,11 @@ +export default function Text(props) { + // todo: guessing on italic since I didn't see it, but I'm assuming it exists and will need to be updated + switch (props.node?.format?.variants?.[0]) { + case "strong": + return {props.node.value}; + case "emphasis": + return {props.node.value}; + default: + return <>{props.node.value}; + } +} diff --git a/components/gql_node_renderer/nodes/UnorderedList.jsx b/components/gql_node_renderer/nodes/UnorderedList.jsx new file mode 100644 index 0000000000..ead5300b24 --- /dev/null +++ b/components/gql_node_renderer/nodes/UnorderedList.jsx @@ -0,0 +1,3 @@ +export default function UnorderedList(props) { + return ; +} diff --git a/package.json b/package.json index 34eea1fa13..4e62bff6e4 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,8 @@ "remark-breaks": "^3.0.3", "remark-html": "^15.0.1", "remark-parse": "^10.0.2", - "unified": "^10.1.2" + "unified": "^10.1.2", + "uuid": "^9.0.0" }, "scripts": { "dev": "next dev", diff --git a/pages/projects/benefits-navigator/[id].js b/pages/projects/benefits-navigator/[id].js index bb4633d84f..bf32f1bf1b 100644 --- a/pages/projects/benefits-navigator/[id].js +++ b/pages/projects/benefits-navigator/[id].js @@ -5,6 +5,7 @@ import { useEffect, useState } from "react"; import aemServiceInstance from "../../../services/aemServiceInstance"; import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds"; import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs"; +import Render from "../../../components/gql_node_renderer/Render"; import { Heading } from "../../../components/design-system/Heading"; export default function DynamicBenefitNavigatorPage(props) { @@ -123,14 +124,12 @@ export default function DynamicBenefitNavigatorPage(props) { props.locale === "en" ? pageData.scTitleEn : pageData.scTitleFr } /> - {/* */} + /> - {/* */} + /> {/* Main */} -
    -
    - +
    +
    +
    +
    + +
    +
    -
    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[1].content[0].value - : pageData.scFragments[0].scContentFr.json[1].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[2].content[0].value - : pageData.scFragments[0].scContentFr.json[2].content[0] - .value} - - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[2].content[1] - .value - : pageData.scFragments[0].scContentFr.json[2].content[1] - .value} - - - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[2].content[2] - .value - : pageData.scFragments[0].scContentFr.json[2].content[2] - .value} - -

    - -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[3].content[0].value - : pageData.scFragments[0].scContentFr.json[3].content[0] - .value} -

    - -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[4].content[0].value - : pageData.scFragments[0].scContentFr.json[4].content[0] - .value} -

    - -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[5].content[0].value - : pageData.scFragments[0].scContentFr.json[5].content[0] - .value} -

    - -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[6].content[0].value - : pageData.scFragments[0].scContentFr.json[6].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[7].content[0].value - : pageData.scFragments[0].scContentFr.json[7].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[8].content[0].value - : pageData.scFragments[0].scContentFr.json[8].content[0] - .value} -

    - -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[9].content[0].value - : pageData.scFragments[0].scContentFr.json[9].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[10].content[0] - .value - : pageData.scFragments[0].scContentFr.json[10].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[11].content[0] - .value - : pageData.scFragments[0].scContentFr.json[11].content[0] - .value} -

    - -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[12].content[0] - .value - : pageData.scFragments[0].scContentFr.json[12].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[13].content[0] - .value - : pageData.scFragments[0].scContentFr.json[13].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[14].content[0] - .value - : pageData.scFragments[0].scContentFr.json[14].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[15].content[0] - .value - : pageData.scFragments[0].scContentFr.json[15].content[0] - .value} -

    - -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[16].content[0] - .value - : pageData.scFragments[0].scContentFr.json[16].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[17].content[0] - .value - : pageData.scFragments[0].scContentFr.json[17].content[0] - .value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[18].content[0] - .value - : pageData.scFragments[0].scContentFr.json[18].content[0] - .value} -

    -
      -
    • - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[19].content[0] - .content[0].value - : pageData.scFragments[0].scContentFr.json[19].content[0] - .content[0].value} -
    • -
    • - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[19].content[1] - .content[0].value - : pageData.scFragments[0].scContentFr.json[19].content[1] - .content[0].value} -
    • -
    • - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[19].content[2] - .content[0].value - : pageData.scFragments[0].scContentFr.json[19].content[2] - .content[0].value} -
    • -
    -

    - {props.locale === "en" - ? pageData.scFragments[0].scContentEn.json[20].content[0] - .value - : pageData.scFragments[0].scContentFr.json[20].content[0] - .value} -

    +
    +
    @@ -424,14 +261,10 @@ export async function getStaticPaths() { ); // Get paths for dynamic routes from the page name data const paths = getAllUpdateIds(data.scLabsPagev1List.items); - paths.map((path) => { - path.locale === "en" - ? (path.params.id = path.params.id.slice(32)) - : (path.params.id = path.params.id.slice(35)); - }); + paths.map((path) => (path.params.id = path.params.id.split("/").at(-1))); return { paths, - fallback: false, + fallback: "blocking", }; } @@ -448,8 +281,9 @@ export const getStaticProps = async ({ locale, params }) => { // Return page data that matches the current page being built const pageData = pages.filter((page) => { return ( - page.scPageNameEn.slice(32) === params.id || - page.scPageNameFr.slice(35) === params.id + (locale === "en" ? page.scPageNameEn : page.scPageNameFr) + .split("/") + .at(-1) === params.id ); }); @@ -461,5 +295,6 @@ export const getStaticProps = async ({ locale, params }) => { adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL, ...(await serverSideTranslations(locale, ["common", "vc"])), }, + revalidate: process.env.ENVIRONMENT === "development" ? 10 : false, }; }; diff --git a/pages/projects/oas-benefits-estimator/[id].js b/pages/projects/oas-benefits-estimator/[id].js index 5981068d28..f6306d4807 100644 --- a/pages/projects/oas-benefits-estimator/[id].js +++ b/pages/projects/oas-benefits-estimator/[id].js @@ -7,6 +7,7 @@ import { useEffect, useState } from "react"; import aemServiceInstance from "../../../services/aemServiceInstance"; import { getAllUpdateIds } from "../../../lib/utils/getAllUpdateIds"; import { createBreadcrumbs } from "../../../lib/utils/createBreadcrumbs"; +import Render from "../../../components/gql_node_renderer/Render"; import { CTA } from "../../../components/design-system/CTA"; import { Heading } from "../../../components/design-system/Heading"; @@ -221,199 +222,54 @@ export default function OASUpdatePage(props) { {pageData.scDateModifiedOverwrite}

    + + {/* Main */}
    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[1].content[0].value - : pageData.scFragments[1].scContentFr.json[1].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[2].content[0].value - : pageData.scFragments[1].scContentFr.json[2].content[0].value} -

    -
    +
    -
    +
    {
    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[3].content[0].value - : pageData.scFragments[1].scContentFr.json[3].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[4].content[0].value - : pageData.scFragments[1].scContentFr.json[4].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[5].content[0].value - : pageData.scFragments[1].scContentFr.json[5].content[0].value} -

    -
      -
    • - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[6].content[0] - .content[0].value - : pageData.scFragments[1].scContentFr.json[6].content[0] - .content[0].value} -
    • -
    • - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[6].content[1] - .content[0].value - : pageData.scFragments[1].scContentFr.json[6].content[1] - .content[0].value} -
    • -
    • - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[6].content[2] - .content[0].value - : pageData.scFragments[1].scContentFr.json[6].content[2] - .content[0].value} -
    • -
    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[7].content[0].value - : pageData.scFragments[1].scContentFr.json[7].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[8].content[0].value - : pageData.scFragments[1].scContentFr.json[8].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[9].content[0].value - : pageData.scFragments[1].scContentFr.json[9].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[10].content[0].value - : pageData.scFragments[1].scContentFr.json[10].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[11].content[0].value - : pageData.scFragments[1].scContentFr.json[11].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[12].content[0].value - : pageData.scFragments[1].scContentFr.json[12].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[13].content[0].value - : pageData.scFragments[1].scContentFr.json[13].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[14].content[0].value - : pageData.scFragments[1].scContentFr.json[14].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[15].content[0].value - : pageData.scFragments[1].scContentFr.json[15].content[0].value} -

    -
      -
    • - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[16].content[0] - .content[0].value - : pageData.scFragments[1].scContentFr.json[16].content[0] - .content[0].value} -
    • -
    • - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[16].content[1] - .content[0].value - : pageData.scFragments[1].scContentFr.json[16].content[1] - .content[0].value} -
    • -
    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[17].content[0].value - : pageData.scFragments[1].scContentFr.json[17].content[0].value} -

    -
      -
    • - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[18].content[0] - .content[0].value - : pageData.scFragments[1].scContentFr.json[18].content[0] - .content[0].value} -
    • -
    • - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[18].content[1] - .content[0].value - : pageData.scFragments[1].scContentFr.json[18].content[1] - .content[0].value} -
    • -
    • - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[18].content[2] - .content[0].value - : pageData.scFragments[1].scContentFr.json[18].content[2] - .content[0].value} -
    • -
    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[19].content[0].value - : pageData.scFragments[1].scContentFr.json[19].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[20].content[0].value - : pageData.scFragments[1].scContentFr.json[20].content[0].value} -

    -

    - {props.locale === "en" - ? pageData.scFragments[1].scContentEn.json[21].content[0].value - : pageData.scFragments[1].scContentFr.json[21].content[0].value} -

    - +
    + +
    + + { - path.locale === "en" - ? (path.params.id = path.params.id.slice(36)) - : (path.params.id = path.params.id.slice(38)); - }); + paths.map((path) => (path.params.id = path.params.id.split("/").at(-1))); return { paths, - fallback: false, + fallback: "blocking", }; } @@ -483,8 +335,9 @@ export const getStaticProps = async ({ locale, params }) => { // Return page data that matches the current page being built const pageData = pages.filter((page) => { return ( - page.scPageNameEn.slice(36) === params.id || - page.scPageNameFr.slice(38) === params.id + (locale === "en" ? page.scPageNameEn : page.scPageNameFr) + .split("/") + .at(-1) === params.id ); }); return { @@ -495,5 +348,6 @@ export const getStaticProps = async ({ locale, params }) => { adobeAnalyticsUrl: process.env.ADOBE_ANALYTICS_URL, ...(await serverSideTranslations(locale, ["common", "vc"])), }, + revalidate: process.env.ENVIRONMENT === "development" ? 10 : false, }; }; diff --git a/yarn.lock b/yarn.lock index f52e7b040d..a556b23215 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12303,6 +12303,11 @@ uuid@^8.3.0, uuid@^8.3.2: resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2" integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg== +uuid@^9.0.0: + version "9.0.0" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-9.0.0.tgz#592f550650024a38ceb0c562f2f6aa435761efb5" + integrity sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg== + uvu@^0.5.0: version "0.5.6" resolved "https://registry.yarnpkg.com/uvu/-/uvu-0.5.6.tgz#2754ca20bcb0bb59b64e9985e84d2e81058502df"