From 8a2a203778a5313ca6a0467ed9c50e7d18276459 Mon Sep 17 00:00:00 2001 From: tommaso1 Date: Wed, 9 Oct 2024 11:24:01 +0200 Subject: [PATCH 1/3] [DEV-1951] Add urlreplacemap codec, + tests + mapping function (#1166) * add url replace map single type * add changeset * refactor for linting * add codec, fetch and make for urlreplacemap * add required to url * test, populate, refactor * Update apps/nextjs-website/src/lib/strapi/__tests__/urlReplaceMap.test.ts Co-authored-by: marcobottaro <39835990+marcobottaro@users.noreply.github.com> * Update apps/nextjs-website/src/lib/strapi/__tests__/urlReplaceMap.test.ts Co-authored-by: marcobottaro <39835990+marcobottaro@users.noreply.github.com> * fix import * Update apps/nextjs-website/src/lib/strapi/codecs/UrlReplaceMapCodec.ts Co-authored-by: marcobottaro <39835990+marcobottaro@users.noreply.github.com> * Fix test * delete healthy cobras * add icon * rename type * rename type * changeset --------- Co-authored-by: Marcello Bertoli Co-authored-by: t Co-authored-by: MarBert <41899883+MarBert@users.noreply.github.com> Co-authored-by: marcobottaro <39835990+marcobottaro@users.noreply.github.com> --- .changeset/lemon-pets-brake.md | 5 ++ .../strapi/__tests__/urlReplaceMap.test.ts | 79 +++++++++++++++++++ .../lib/strapi/codecs/UrlReplaceMapCodec.ts | 22 ++++++ .../lib/strapi/fetches/fetchUrlReplaceMap.ts | 24 ++++++ .../lib/strapi/makeProps/makeUrlReplaceMap.ts | 19 +++++ 5 files changed, 149 insertions(+) create mode 100644 .changeset/lemon-pets-brake.md create mode 100644 apps/nextjs-website/src/lib/strapi/__tests__/urlReplaceMap.test.ts create mode 100644 apps/nextjs-website/src/lib/strapi/codecs/UrlReplaceMapCodec.ts create mode 100644 apps/nextjs-website/src/lib/strapi/fetches/fetchUrlReplaceMap.ts create mode 100644 apps/nextjs-website/src/lib/strapi/makeProps/makeUrlReplaceMap.ts diff --git a/.changeset/lemon-pets-brake.md b/.changeset/lemon-pets-brake.md new file mode 100644 index 0000000000..b2b8a2a782 --- /dev/null +++ b/.changeset/lemon-pets-brake.md @@ -0,0 +1,5 @@ +--- +"nextjs-website": patch +--- + +Add UrlReplaceMapCodec and mapping function diff --git a/apps/nextjs-website/src/lib/strapi/__tests__/urlReplaceMap.test.ts b/apps/nextjs-website/src/lib/strapi/__tests__/urlReplaceMap.test.ts new file mode 100644 index 0000000000..14436aaa42 --- /dev/null +++ b/apps/nextjs-website/src/lib/strapi/__tests__/urlReplaceMap.test.ts @@ -0,0 +1,79 @@ +import { UrlReplaceMapCodec } from '../codecs/UrlReplaceMapCodec'; +import * as Either from 'fp-ts/lib/Either'; +import { productJson } from './fixtures/product'; +import { makeUrlReplaceMap } from '../makeProps/makeUrlReplaceMap'; +import { pipe } from 'fp-ts/lib/function'; +import { mediaRasterJson } from './fixtures/media'; + +const strapiResponse = { + data: { + id: 1, + attributes: { + createdAt: '2024-09-30T10:12:44.888Z', + updatedAt: '2024-09-30T10:12:45.562Z', + publishedAt: '2024-09-30T10:12:45.561Z', + urlToGuide: [ + { + id: 1, + url: 'aaaa', + version: '2', + guide: { + data: { + id: 1, + attributes: { + title: 'aaa', + slug: 'aaaa', + createdAt: '2024-09-30T10:12:08.182Z', + updatedAt: '2024-09-30T10:12:24.805Z', + publishedAt: '2024-09-30T10:12:24.802Z', + locale: 'en', + image: mediaRasterJson, + mobileImage: mediaRasterJson, + listItems: [ + { id: 1, text: 'rhhtrhrthrt' }, + { id: 2, text: 'fdsafdsagtyhtyh' }, + { id: 3, text: 'hrhrhthrtyrth' }, + ], + product: productJson, + versions: [], + bannerLinks: [], + seo: null, + }, + }, + }, + }, + ], + }, + }, + meta: {}, +}; + +describe('UrlReplaceMapCodec', () => { + it('should decode strapi UrlReplaceMapCodec', () => { + const decodeResponse = UrlReplaceMapCodec.decode(strapiResponse); + expect(Either.isRight(decodeResponse)).toBeTruthy(); + }); + + it('Should correctly convert the map into a record', () => { + const validation = UrlReplaceMapCodec.decode(strapiResponse); + const result = pipe( + validation, + Either.fold( + (left) => { + console.error('Error:', left); + return null; // or handle the error as needed + }, + (right) => { + console.log('Success:', right); + return right; + } + ) + ); + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const urlReplaceMap = makeUrlReplaceMap(result!); + + expect(urlReplaceMap).toEqual({ + aaaa: 'firma-con-io/guides/aaaa/2', + }); + }); +}); diff --git a/apps/nextjs-website/src/lib/strapi/codecs/UrlReplaceMapCodec.ts b/apps/nextjs-website/src/lib/strapi/codecs/UrlReplaceMapCodec.ts new file mode 100644 index 0000000000..705a42a574 --- /dev/null +++ b/apps/nextjs-website/src/lib/strapi/codecs/UrlReplaceMapCodec.ts @@ -0,0 +1,22 @@ +import * as t from 'io-ts/lib'; +import { GuideCodec } from './GuidesCodec'; +import { NullToUndefinedCodec } from './NullToUndefinedCodec'; + +const UrlToGuideCodec = t.strict({ + id: t.number, + url: t.string, + version: t.union([NullToUndefinedCodec, t.string]), + guide: t.strict({ + data: t.union([NullToUndefinedCodec, GuideCodec]), + }), +}); + +export const UrlReplaceMapCodec = t.strict({ + data: t.strict({ + attributes: t.strict({ + urlToGuide: t.array(UrlToGuideCodec), + }), + }), +}); + +export type StrapiUrlReplaceMap = t.TypeOf; diff --git a/apps/nextjs-website/src/lib/strapi/fetches/fetchUrlReplaceMap.ts b/apps/nextjs-website/src/lib/strapi/fetches/fetchUrlReplaceMap.ts new file mode 100644 index 0000000000..5d163c2fce --- /dev/null +++ b/apps/nextjs-website/src/lib/strapi/fetches/fetchUrlReplaceMap.ts @@ -0,0 +1,24 @@ +import { fetchFromStrapi } from '../fetchFromStrapi'; +import { UrlReplaceMapCodec } from '../codecs/UrlReplaceMapCodec'; +import qs from 'qs'; + +const makeStrapiUrlReplaceMapPopulate = () => + qs.stringify({ + populate: [ + 'urlToGuide.guide.*', + 'urlToGuide.guide.image', + 'urlToGuide.guide.mobileImage', + 'urlToGuide.guide.listItems', + 'urlToGuide.guide.product.*', + 'urlToGuide.guide.versions.*', + 'urlToGuide.guide.seo.*', + 'urlToGuide.guide.product.bannerLinks.*', + 'urlToGuide.guide.product.bannerLinks.icon', + ], + }); + +export const fetchUrlReplaceMap = fetchFromStrapi( + 'url-replace-map', + makeStrapiUrlReplaceMapPopulate(), + UrlReplaceMapCodec +); diff --git a/apps/nextjs-website/src/lib/strapi/makeProps/makeUrlReplaceMap.ts b/apps/nextjs-website/src/lib/strapi/makeProps/makeUrlReplaceMap.ts new file mode 100644 index 0000000000..764aa09a07 --- /dev/null +++ b/apps/nextjs-website/src/lib/strapi/makeProps/makeUrlReplaceMap.ts @@ -0,0 +1,19 @@ +import { StrapiUrlReplaceMap } from '../codecs/UrlReplaceMapCodec'; + +export type UrlReplaceMap = Record; + +export function makeUrlReplaceMap( + urlReplacemap: StrapiUrlReplaceMap +): UrlReplaceMap { + const map = urlReplacemap.data.attributes.urlToGuide.reduce((map, obj) => { + return { + ...map, + [obj.url]: `${ + obj.guide.data?.attributes.product.data.attributes.slug + }/guides/${obj.guide.data?.attributes.slug}${ + obj.version ? `/${obj.version}` : '' + }`, + }; + }, {} as UrlReplaceMap); + return map; +} From 6741ec9d1d6eebcd07cbe5f4e301003e8c278994 Mon Sep 17 00:00:00 2001 From: marcobottaro <39835990+marcobottaro@users.noreply.github.com> Date: Wed, 9 Oct 2024 15:23:18 +0200 Subject: [PATCH 2/3] [DEV-1966] Fix tutorial's in page menu (#1188) * Fix tutorial's in page menu * Add changeset * Fix test --- .changeset/rare-chefs-pump.md | 5 +++++ .../parseCkEditorContent.helpers.test.ts | 1 + .../PartRendererMenu/PartRendererMenu.tsx | 18 ++++++++++++++++-- .../helpers/parseCkEditorContent.helpers.ts | 2 +- 4 files changed, 23 insertions(+), 3 deletions(-) create mode 100644 .changeset/rare-chefs-pump.md diff --git a/.changeset/rare-chefs-pump.md b/.changeset/rare-chefs-pump.md new file mode 100644 index 0000000000..845df58177 --- /dev/null +++ b/.changeset/rare-chefs-pump.md @@ -0,0 +1,5 @@ +--- +"nextjs-website": patch +--- + +Fix tutorial's in page menu diff --git a/apps/nextjs-website/src/__tests__/helpers/parseCkEditorContent.helpers.test.ts b/apps/nextjs-website/src/__tests__/helpers/parseCkEditorContent.helpers.test.ts index 5e96428081..31c7d45e9b 100644 --- a/apps/nextjs-website/src/__tests__/helpers/parseCkEditorContent.helpers.test.ts +++ b/apps/nextjs-website/src/__tests__/helpers/parseCkEditorContent.helpers.test.ts @@ -24,6 +24,7 @@ describe('parseCkEditorContent', () => { level: 2, }, { title: 'titolo h3', href: '#ckeditor-titolo-h3', level: 3 }, + { title: 'titolo h4', href: '#ckeditor-titolo-h4', level: 4 }, { title: 'Un esempio: la TARI', href: '#ckeditor-un-esempio:-la-tari', diff --git a/apps/nextjs-website/src/components/molecules/PartRendererMenu/PartRendererMenu.tsx b/apps/nextjs-website/src/components/molecules/PartRendererMenu/PartRendererMenu.tsx index 0bd921ae73..af4b8f9088 100644 --- a/apps/nextjs-website/src/components/molecules/PartRendererMenu/PartRendererMenu.tsx +++ b/apps/nextjs-website/src/components/molecules/PartRendererMenu/PartRendererMenu.tsx @@ -13,6 +13,20 @@ type PartRendererMenuProps = { readonly parts: readonly Part[]; }; +const getFontSizeByLevel = (level: number): number => { + switch (level) { + case 1: + return 24; + case 2: + return 18; + case 3: + return 16; + case 4: + default: + return 14; + } +}; + const PartRendererMenu = (props: PartRendererMenuProps): ReactNode | null => { const { palette } = useTheme(); const menuItems = props.parts @@ -55,7 +69,7 @@ const PartRendererMenu = (props: PartRendererMenuProps): ReactNode | null => { @@ -82,7 +96,7 @@ const PartRendererMenu = (props: PartRendererMenuProps): ReactNode | null => { }) .filter(Boolean); - if (menuItems.length === 0) { + if (menuItems.flat().length === 0) { return null; } diff --git a/apps/nextjs-website/src/helpers/parseCkEditorContent.helpers.ts b/apps/nextjs-website/src/helpers/parseCkEditorContent.helpers.ts index ba8a027f80..cf19076d9d 100644 --- a/apps/nextjs-website/src/helpers/parseCkEditorContent.helpers.ts +++ b/apps/nextjs-website/src/helpers/parseCkEditorContent.helpers.ts @@ -23,7 +23,7 @@ export function parseCkEditorContent(content: string): { wrapper.appendChild(cloned); // eslint-disable-next-line functional/no-expression-statements element.parentNode?.replaceChild(wrapper, element); - if (['h2', 'h3'].includes(element.tagName.toLowerCase())) { + if (['h2', 'h3', 'h4'].includes(element.tagName.toLowerCase())) { // eslint-disable-next-line functional/immutable-data,functional/no-expression-statements menuItems.push({ title: cloned.textContent ?? '', From 3881914f91e44ca1704603d3460549608afd41e9 Mon Sep 17 00:00:00 2001 From: marcobottaro <39835990+marcobottaro@users.noreply.github.com> Date: Wed, 9 Oct 2024 17:37:38 +0200 Subject: [PATCH 3/3] Fix margins and text size of guides and tutorials (#1187) --- .changeset/little-colts-impress.md | 5 +++++ .../molecules/CkEditorPart/CkEditorPart.tsx | 13 ++++++++++--- .../organisms/GitBookContent/components/Item.tsx | 1 + 3 files changed, 16 insertions(+), 3 deletions(-) create mode 100644 .changeset/little-colts-impress.md diff --git a/.changeset/little-colts-impress.md b/.changeset/little-colts-impress.md new file mode 100644 index 0000000000..f9dad20c93 --- /dev/null +++ b/.changeset/little-colts-impress.md @@ -0,0 +1,5 @@ +--- +"nextjs-website": patch +--- + +Fix margins and text size of guides and tutorials diff --git a/apps/nextjs-website/src/components/molecules/CkEditorPart/CkEditorPart.tsx b/apps/nextjs-website/src/components/molecules/CkEditorPart/CkEditorPart.tsx index d787d4ff47..a366dde48f 100644 --- a/apps/nextjs-website/src/components/molecules/CkEditorPart/CkEditorPart.tsx +++ b/apps/nextjs-website/src/components/molecules/CkEditorPart/CkEditorPart.tsx @@ -20,6 +20,9 @@ const CkEditorPart = ({ content }: CkEditorPartProps) => { const scrollOffset = SITE_HEADER_HEIGHT + PRODUCT_HEADER_HEIGHT; const ckEditorStyles = { + '&': { + fontSize: '1rem', + }, '& .menuAnchor': { marginTop: `-${scrollOffset}px`, paddingTop: `${scrollOffset}px`, @@ -36,13 +39,14 @@ const CkEditorPart = ({ content }: CkEditorPartProps) => { fontWeight: typography.fontWeightRegular, }, '& p': { - margin: '0px 0px 40px', + fontSize: '1rem', + margin: '0px 0px 16px', }, '& pre': { background: '#F2F2F2', borderRadius: '0.375rem', lineHeight: '1.5em', - margin: '0.5em 0', + margin: '0.5em 0 1.5rem 0', overflow: 'auto', padding: '1.25em 3em 1.25em 1em', position: 'relative', @@ -65,6 +69,9 @@ const CkEditorPart = ({ content }: CkEditorPartProps) => { wordBreak: 'break-all', whiteSpace: 'pre-wrap', }, + '& figure.image': { + margin: '0 1.5rem 1.5rem 1.5rem', + }, '& img': { display: 'block', margin: '0 auto', @@ -112,7 +119,7 @@ const CkEditorPart = ({ content }: CkEditorPartProps) => { '& > p': { margin: 0 }, }, '& ol li, & ul li': { - margin: '0px 0px 12px', + margin: '0px 0px 8px', }, '& ol li li': { 'list-style-type': 'lower-alpha', diff --git a/apps/nextjs-website/src/components/organisms/GitBookContent/components/Item.tsx b/apps/nextjs-website/src/components/organisms/GitBookContent/components/Item.tsx index 6185ae4b58..6996f6aa68 100644 --- a/apps/nextjs-website/src/components/organisms/GitBookContent/components/Item.tsx +++ b/apps/nextjs-website/src/components/organisms/GitBookContent/components/Item.tsx @@ -10,6 +10,7 @@ const Item = ({ children }: ItemProps) => { variant='body1' style={{ wordBreak: 'break-word', + margin: '0px 0px 8px', }} sx={{ '& div.MuiContainer-root:has(img)': {