Merge branch 'main' into chatbot/docker-compose-complete

.changeset/lemon-pets-brake.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Add UrlReplaceMapCodec and mapping function

.changeset/little-colts-impress.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix margins and text size of guides and tutorials

.changeset/rare-chefs-pump.md

@@ -0,0 +1,5 @@
+---
+"nextjs-website": patch
+---
+
+Fix tutorial's in page menu

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',

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',

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 => {
               <Typography
                 sx={{
                   color: palette.text.secondary,
-                  fontSize: menuItem.level === 2 ? 18 : 16,
+                  fontSize: getFontSizeByLevel(menuItem.level),
                   fontWeight: 400,
                 }}
               >
@@ -82,7 +96,7 @@ const PartRendererMenu = (props: PartRendererMenuProps): ReactNode | null => {
     })
     .filter(Boolean);
 
-  if (menuItems.length === 0) {
+  if (menuItems.flat().length === 0) {
     return null;
   }
 

apps/nextjs-website/src/components/organisms/GitBookContent/components/Item.tsx

@@ -10,6 +10,7 @@ const Item = ({ children }: ItemProps<ReactNode>) => {
       variant='body1'
       style={{
         wordBreak: 'break-word',
+        margin: '0px 0px 8px',
       }}
       sx={{
         '& div.MuiContainer-root:has(img)': {

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 ?? '',

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',
+    });
+  });
+});

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<typeof UrlReplaceMapCodec>;

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
+);

apps/nextjs-website/src/lib/strapi/makeProps/makeUrlReplaceMap.ts

@@ -0,0 +1,19 @@
+import { StrapiUrlReplaceMap } from '../codecs/UrlReplaceMapCodec';
+
+export type UrlReplaceMap = Record<string, string>;
+
+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;
+}