From 922bc5a76a6ac1cc01f53b261c2b8155f73f8c66 Mon Sep 17 00:00:00 2001 From: Maria Robinson Date: Fri, 22 Mar 2024 13:02:09 -0700 Subject: [PATCH 1/4] attempting conscia component sort --- composable-ui/next.config.js | 7 ++++++- composable-ui/package.json | 1 + composable-ui/src/server/api/routers/cms.ts | 2 +- packages/conscia/README.md | 9 +++++++++ packages/conscia/src/types.ts | 6 ++++++ packages/conscia/src/utils/page.ts | 10 +++++++++- pnpm-lock.yaml | 3 +++ 7 files changed, 35 insertions(+), 3 deletions(-) diff --git a/composable-ui/next.config.js b/composable-ui/next.config.js index de19b8a..78c12bd 100644 --- a/composable-ui/next.config.js +++ b/composable-ui/next.config.js @@ -39,7 +39,12 @@ module.exports = () => { '@composable/ui', ], images: { - domains: ['loremflickr.com'], + domains: [ + 'loremflickr.com', + 'images.contentstack.io', + 'images.ctfassets.net', + 'zzyz-001.dx.commercecloud.salesforce.com', + ], formats: ['image/avif', 'image/webp'], minimumCacheTTL: 60 * 60 * 24 * 30, }, diff --git a/composable-ui/package.json b/composable-ui/package.json index 144d10e..9279f1b 100644 --- a/composable-ui/package.json +++ b/composable-ui/package.json @@ -21,6 +21,7 @@ "@chakra-ui/theme-tools": "^2.0.16", "@composable/cms-generic": "workspace:*", "@composable/commerce-generic": "workspace:*", + "@composable/conscia": "workspace:^", "@composable/stripe": "workspace:*", "@composable/types": "workspace:*", "@composable/ui": "workspace:*", diff --git a/composable-ui/src/server/api/routers/cms.ts b/composable-ui/src/server/api/routers/cms.ts index 7a552e1..fd3398c 100644 --- a/composable-ui/src/server/api/routers/cms.ts +++ b/composable-ui/src/server/api/routers/cms.ts @@ -1,4 +1,4 @@ -import { getPage } from '@composable/cms-generic' +import { getPage } from '@composable/conscia' import { PageSchema } from '@composable/types' import { z } from 'zod' import { createTRPCRouter, publicProcedure } from '../trpc' diff --git a/packages/conscia/README.md b/packages/conscia/README.md index 235752b..8fe09ab 100644 --- a/packages/conscia/README.md +++ b/packages/conscia/README.md @@ -36,3 +36,12 @@ In order to use data from Conscia, the `cmsRouter` needs to use the `getPage` da import { getPage } from '@composable/conscia' ``` +:::note +Don't forget to update the `composable-ui/next.config.js` file with the image domains that you will be receiving. For example, + +```json +images: { + domains: ['loremflickr.com', 'images.contentstack.io', ...] +} +``` +::: \ No newline at end of file diff --git a/packages/conscia/src/types.ts b/packages/conscia/src/types.ts index f399e9b..930d007 100644 --- a/packages/conscia/src/types.ts +++ b/packages/conscia/src/types.ts @@ -42,10 +42,12 @@ export type ConsciaHeroBanner = { description: string url: string } + sort_order?: number } export type ConsciaCTABanner = { __typename: BannerFullProps['__typename'] + sort_order?: number containerMarginBottom?: number containerMarginTop?: number containerSize: BannerFullProps['containerSize'] @@ -67,6 +69,7 @@ export type ConsciaCTABanner = { export type ConsciaFeatureCardsHeader = { __typename: BannerTextOnlyProps['__typename'] + sort_order?: number centered: BannerTextOnlyProps['centered'] id: BannerTextOnlyProps['id'] content: BannerTextOnlyProps['content'] @@ -77,6 +80,7 @@ export type ConsciaFeatureCardsHeader = { export interface ConsciaFeaturedProducts { __typename: CommerceConnectorProps['__typename'] + sort_order?: number id: CommerceConnectorProps['id'] title: CommerceConnectorProps['title'] containerMarginBottom?: number @@ -91,6 +95,7 @@ export interface ConsciaFeaturedProducts { export type ConsciaGrid = { __typename: GridProps['__typename'] + sort_order?: number id: GridProps['id'] columns: GridProps['columns'] containerMarginBottom?: number @@ -102,6 +107,7 @@ export type ConsciaGrid = { export type ConsciaTextCard = { __typename: TextCardProps['__typename'] + sort_order?: number id: TextCardProps['id'] title: TextCardProps['title'] image: { diff --git a/packages/conscia/src/utils/page.ts b/packages/conscia/src/utils/page.ts index a75dea9..65084e6 100644 --- a/packages/conscia/src/utils/page.ts +++ b/packages/conscia/src/utils/page.ts @@ -30,7 +30,9 @@ export const transformPage = ({ return { __typename: 'pageSlug', id: pageSlug, - items: Object.values(consciaPage.components).map(transformPageComponent), + items: Object.values(consciaPage.components) + .map(transformPageComponent) + .sort(consciaPage.components.response.sort_order), metaDescription: '', metaKeywords: [], metaTitle: '', @@ -83,6 +85,7 @@ const transformHeroBanner = ( isFullScreen: false, isLazy: false, title: heroBanner.title, + sort_order: heroBanner.sort_order, } } @@ -111,6 +114,7 @@ const transformCTABanner = (ctaBanner: ConsciaCTABanner): BannerFullProps => { imageMobile: image, linkHref1: ctaBanner.linkHref1, linkLabel1: ctaBanner.linkLabel1, + sort_order: ctaBanner.sort_order, } } @@ -125,6 +129,7 @@ const transformFeatureCardsHeader = ( title: featureCardsHeader.title, ctaAlphaLabel: featureCardsHeader.ctaAlphaLabel, ctaAlphaHref: featureCardsHeader.ctaAlphaHref, + sort_order: featureCardsHeader.sort_order, } } @@ -145,6 +150,7 @@ const transformFeaturedProducts = ( img: product.image, })), productListType: 'id', + sort_order: featuredProducts.sort_order, } } @@ -163,6 +169,7 @@ const transformGrid = (grid: ConsciaGrid): GridProps => { return transformTextCard(item) } }), + sort_order: grid.sort_order, } } @@ -181,5 +188,6 @@ const transformTextCard = (textCard: ConsciaTextCard): TextCardProps => { ctaHref: textCard.ctaHref, theme: textCard.theme, textAlign: textCard.textAlign, + sort_order: textCard.sort_order, } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index dca57dd..9125e2f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,6 +41,9 @@ importers: '@composable/commerce-generic': specifier: workspace:* version: link:../packages/commerce-generic + '@composable/conscia': + specifier: workspace:^ + version: link:../packages/conscia '@composable/stripe': specifier: workspace:* version: link:../packages/stripe From 8bd84161a812b5653c3d52da5a284c955bf757aa Mon Sep 17 00:00:00 2001 From: Maria Robinson Date: Fri, 22 Mar 2024 16:13:29 -0700 Subject: [PATCH 2/4] component sort --- packages/conscia/src/utils/page.ts | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/packages/conscia/src/utils/page.ts b/packages/conscia/src/utils/page.ts index 65084e6..e03c03d 100644 --- a/packages/conscia/src/utils/page.ts +++ b/packages/conscia/src/utils/page.ts @@ -31,8 +31,10 @@ export const transformPage = ({ __typename: 'pageSlug', id: pageSlug, items: Object.values(consciaPage.components) - .map(transformPageComponent) - .sort(consciaPage.components.response.sort_order), + .sort((a, b) => { + return (a.response.sort_order ?? 0) - (b.response.sort_order ?? 0) + }) + .map(transformPageComponent), metaDescription: '', metaKeywords: [], metaTitle: '', @@ -85,7 +87,6 @@ const transformHeroBanner = ( isFullScreen: false, isLazy: false, title: heroBanner.title, - sort_order: heroBanner.sort_order, } } @@ -114,7 +115,6 @@ const transformCTABanner = (ctaBanner: ConsciaCTABanner): BannerFullProps => { imageMobile: image, linkHref1: ctaBanner.linkHref1, linkLabel1: ctaBanner.linkLabel1, - sort_order: ctaBanner.sort_order, } } @@ -129,7 +129,6 @@ const transformFeatureCardsHeader = ( title: featureCardsHeader.title, ctaAlphaLabel: featureCardsHeader.ctaAlphaLabel, ctaAlphaHref: featureCardsHeader.ctaAlphaHref, - sort_order: featureCardsHeader.sort_order, } } @@ -150,7 +149,6 @@ const transformFeaturedProducts = ( img: product.image, })), productListType: 'id', - sort_order: featuredProducts.sort_order, } } @@ -169,7 +167,6 @@ const transformGrid = (grid: ConsciaGrid): GridProps => { return transformTextCard(item) } }), - sort_order: grid.sort_order, } } @@ -188,6 +185,5 @@ const transformTextCard = (textCard: ConsciaTextCard): TextCardProps => { ctaHref: textCard.ctaHref, theme: textCard.theme, textAlign: textCard.textAlign, - sort_order: textCard.sort_order, } } From 7b274fbc4daa7a63687077dc403cdebc665b5fc3 Mon Sep 17 00:00:00 2001 From: Maria Robinson Date: Fri, 22 Mar 2024 16:21:27 -0700 Subject: [PATCH 3/4] undoing conscia install changes --- composable-ui/next.config.js | 7 +------ composable-ui/package.json | 1 - composable-ui/src/server/api/routers/cms.ts | 2 +- pnpm-lock.yaml | 3 --- 4 files changed, 2 insertions(+), 11 deletions(-) diff --git a/composable-ui/next.config.js b/composable-ui/next.config.js index 78c12bd..de19b8a 100644 --- a/composable-ui/next.config.js +++ b/composable-ui/next.config.js @@ -39,12 +39,7 @@ module.exports = () => { '@composable/ui', ], images: { - domains: [ - 'loremflickr.com', - 'images.contentstack.io', - 'images.ctfassets.net', - 'zzyz-001.dx.commercecloud.salesforce.com', - ], + domains: ['loremflickr.com'], formats: ['image/avif', 'image/webp'], minimumCacheTTL: 60 * 60 * 24 * 30, }, diff --git a/composable-ui/package.json b/composable-ui/package.json index 9279f1b..144d10e 100644 --- a/composable-ui/package.json +++ b/composable-ui/package.json @@ -21,7 +21,6 @@ "@chakra-ui/theme-tools": "^2.0.16", "@composable/cms-generic": "workspace:*", "@composable/commerce-generic": "workspace:*", - "@composable/conscia": "workspace:^", "@composable/stripe": "workspace:*", "@composable/types": "workspace:*", "@composable/ui": "workspace:*", diff --git a/composable-ui/src/server/api/routers/cms.ts b/composable-ui/src/server/api/routers/cms.ts index fd3398c..7a552e1 100644 --- a/composable-ui/src/server/api/routers/cms.ts +++ b/composable-ui/src/server/api/routers/cms.ts @@ -1,4 +1,4 @@ -import { getPage } from '@composable/conscia' +import { getPage } from '@composable/cms-generic' import { PageSchema } from '@composable/types' import { z } from 'zod' import { createTRPCRouter, publicProcedure } from '../trpc' diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9125e2f..dca57dd 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -41,9 +41,6 @@ importers: '@composable/commerce-generic': specifier: workspace:* version: link:../packages/commerce-generic - '@composable/conscia': - specifier: workspace:^ - version: link:../packages/conscia '@composable/stripe': specifier: workspace:* version: link:../packages/stripe From d6e3c177bff745a7f5a963367a9a135059ae63fe Mon Sep 17 00:00:00 2001 From: Maria Robinson Date: Mon, 25 Mar 2024 13:29:47 -0700 Subject: [PATCH 4/4] updating image domain note --- packages/conscia/README.md | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/conscia/README.md b/packages/conscia/README.md index 8fe09ab..cca06d0 100644 --- a/packages/conscia/README.md +++ b/packages/conscia/README.md @@ -37,11 +37,17 @@ In order to use data from Conscia, the `cmsRouter` needs to use the `getPage` da ``` :::note -Don't forget to update the `composable-ui/next.config.js` file with the image domains that you will be receiving. For example, +Don't forget to update the `composable-ui/next.config.js` file with the image domains that you will be receiving. Please refer to the Next.JS documentation on `remotePatterns` [here](https://nextjs.org/docs/app/api-reference/components/image#remotepatterns). For example, ```json images: { - domains: ['loremflickr.com', 'images.contentstack.io', ...] + remotePatterns: [ + { + protocol: 'https', + hostname: '**.contentstack.io', + port: '', + }, + ], } ``` ::: \ No newline at end of file