Use CMS Content

Signed-off-by: Kipruto <[email protected]>

apps/roboshield/payload-types.ts

@@ -57,9 +57,33 @@ export interface Page {
           }
         | {
             content?:
-              | {
-                  [k: string]: unknown;
-                }[]
+              | (
+                  | {
+                      content: {
+                        [k: string]: unknown;
+                      }[];
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "richtext";
+                    }
+                  | {
+                      image: string | Media;
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "mediaBlock";
+                    }
+                  | {
+                      externalEmbeddFields?: {
+                        embedType?: ("url" | "code") | null;
+                        url?: string | null;
+                        caption?: string | null;
+                        code?: string | null;
+                      };
+                      id?: string | null;
+                      blockName?: string | null;
+                      blockType: "externalEmbedd";
+                    }
+                )[]
               | null;
             id?: string | null;
             blockName?: string | null;
@@ -70,7 +94,7 @@ export interface Page {
             statistics?:
               | {
                   name: string;
-                  value: number;
+                  value: string;
                   description: {
                     [k: string]: unknown;
                   }[];

apps/roboshield/src/components/Content/Content.tsx

@@ -1,14 +1,45 @@
 import { Section } from "@commons-ui/core";
-import RichText, { Children } from "@/roboshield/components/RichText";
 import { Page } from "@/root/payload-types";
-import { ExtractBlockType } from "@/roboshield/utils/blocks";
+import {
+  ExtractBlockType,
+  ExtractNestedBlockType,
+} from "@/roboshield/utils/blocks";
+import LongFormRichText from "@/roboshield/components/LongFormRichText";
+import LongFormMedia from "@/roboshield/components/LongFormMedia";
+import LongFormExternalEmbed from "@/roboshield/components/LongFormExternalEmbed";
 
 type ContentProps = ExtractBlockType<
   NonNullable<Page["blocks"]>[number],
   "content"
 >;
 
+export type ExternalEmbeddBlock = ExtractNestedBlockType<
+  NonNullable<ContentProps["content"]>[number],
+  "externalEmbedd"
+>;
+
+export type RichTextBlock = ExtractNestedBlockType<
+  NonNullable<ContentProps["content"]>[number],
+  "richtext"
+>;
+
+export type MediaBlock = ExtractNestedBlockType<
+  NonNullable<ContentProps["content"]>[number],
+  "mediaBlock"
+>;
+
+type ComponentMap = {
+  richtext: (props: RichTextBlock) => JSX.Element;
+  mediaBlock?: (props: MediaBlock) => JSX.Element;
+  externalEmbedd?: (props: ExternalEmbeddBlock) => JSX.Element;
+};
 export default function Content({ content }: ContentProps) {
+  const COMPONENT_BY_CONTENT_TYPE: ComponentMap = {
+    richtext: LongFormRichText,
+    mediaBlock: LongFormMedia,
+    externalEmbedd: LongFormExternalEmbed,
+  };
+
   return (
     <Section
       component="section"
@@ -18,22 +49,15 @@ export default function Content({ content }: ContentProps) {
         my: 10,
       }}
     >
-      <RichText
-        elements={content as Children}
-        sx={(theme: any) => ({
-          mb: "30px",
-          "& h2": {
-            typography: { xs: "h4", md: "h2" },
-          },
-          "& p,& a, & li": {
-            typography: { xs: "body1", md: "subheading" },
-            mb: 2,
-          },
-          "& a": {
-            textDecorationColor: theme.palette.primary.main,
-          },
-        })}
-      />
+      {content?.map((child) => {
+        const Component = COMPONENT_BY_CONTENT_TYPE[child.blockType];
+
+        if (Component) {
+          return <Component key={child.id} {...child} />;
+        }
+
+        return null;
+      })}
     </Section>
   );
 }

apps/roboshield/src/components/LongFormExternalEmbed/LongFormExternalEmbed.tsx

@@ -0,0 +1,30 @@
+import { RichTypography } from "@commons-ui/core";
+import { Box } from "@mui/material";
+import React from "react";
+import { ExternalEmbeddBlock } from "@/roboshield/components/Content/Content";
+
+export default function LongFormExternalEmbed(props: ExternalEmbeddBlock) {
+  const { externalEmbeddFields: { code = "", caption = "", url = "" } = {} } =
+    props;
+
+  return (
+    <Box
+      sx={{
+        my: 5,
+      }}
+    >
+      {code && <RichTypography>{code}</RichTypography>}
+      {url && (
+        <iframe
+          src={url}
+          title={caption!}
+          style={{
+            width: "100%",
+            height: "500px",
+            border: "none",
+          }}
+        />
+      )}
+    </Box>
+  );
+}

apps/roboshield/src/components/LongFormExternalEmbed/index.ts

@@ -0,0 +1,3 @@
+import LongFormExternalEmbed from "./LongFormExternalEmbed";
+
+export default LongFormExternalEmbed;

apps/roboshield/src/components/LongFormMedia/LongFormMedia.tsx

@@ -0,0 +1,43 @@
+import { Figure } from "@commons-ui/next";
+import { Box } from "@mui/material";
+import React from "react";
+import { MediaBlock } from "@/roboshield/components/Content/Content";
+import { Media } from "@/root/payload-types";
+
+export default function LongFormMedia({ image }: MediaBlock) {
+  const mediaImage = image as Media;
+  return (
+    <Box
+      sx={{
+        my: 5,
+      }}
+    >
+      <Figure
+        ImageProps={{
+          alt: mediaImage.alt,
+          sx: {
+            objectFit: "cover",
+            position: "relative !important",
+          },
+          src: mediaImage.url,
+        }}
+        sx={{
+          height: {
+            xs: "200px",
+            md: "500px",
+          },
+          width: "100%",
+        }}
+      >
+        <figcaption
+          style={{
+            width: "100%",
+            margin: "0 auto",
+          }}
+        >
+          {mediaImage.alt}
+        </figcaption>
+      </Figure>
+    </Box>
+  );
+}

apps/roboshield/src/components/LongFormMedia/index.ts

@@ -0,0 +1,3 @@
+import LongFormMedia from "./LongFormMedia";
+
+export default LongFormMedia;

apps/roboshield/src/components/LongFormRichText/LongFormRichText.tsx

@@ -0,0 +1,78 @@
+import React from "react";
+
+import RichText from "@/roboshield/components/RichText";
+import { RichTextBlock } from "@/roboshield/components/Content/Content";
+
+export default function LongFormRichText({ content }: RichTextBlock) {
+  return (
+    <RichText
+      elements={content}
+      sx={(theme) => ({
+        color: "inherit",
+        "& a, & a:visited, & a:hover": {
+          color: "inherit",
+        },
+        "& h1": {
+          ...theme.typography.h1,
+          mb: 3.75,
+          mt: 5,
+        },
+        "& h2": {
+          mb: 2.5,
+          mt: 5,
+          ...theme.typography.h2,
+        },
+        "& h3": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h3,
+        },
+        "& h4": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h4,
+        },
+        "& h5": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h5Small,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.h5,
+          },
+        },
+        "& h6": {
+          mb: 1.25,
+          mt: 5,
+          ...theme.typography.h6,
+        },
+        "& p": {
+          ...theme.typography.body1,
+          mb: 2,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.body3,
+          },
+        },
+        "& a": {
+          ...theme.typography.body1,
+          mb: 2,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.body3,
+          },
+        },
+        "& ul": {
+          mb: 2,
+        },
+        "& li": {
+          ...theme.typography.body1,
+          mt: 1,
+          [theme.breakpoints.up("md")]: {
+            ...theme.typography.body3,
+          },
+        },
+        "& :last-child": {
+          mb: 0,
+        },
+      })}
+    />
+  );
+}

apps/roboshield/src/components/LongFormRichText/index.ts

@@ -0,0 +1,3 @@
+import LongFormRichText from "./LongFormRichText";
+
+export default LongFormRichText;

apps/roboshield/src/payload/blocks/Content.ts

@@ -1,5 +1,7 @@
 import { Block } from "payload/types";
-import { slateEditor } from "@payloadcms/richtext-slate";
+import { RichText } from "./RichText";
+import { MediaBlock } from "./MediaBlock";
+import { ExternalEmbedd } from "./ExternalEmbedd";
 
 export const Content: Block = {
   slug: "content",
@@ -9,25 +11,9 @@ export const Content: Block = {
   },
   fields: [
     {
+      type: "blocks",
       name: "content",
-      type: "richText",
-      label: "Content",
-      editor: slateEditor({
-        admin: {
-          elements: [
-            "h1",
-            "h2",
-            "h3",
-            "h4",
-            "h5",
-            "h6",
-            "link",
-            "ol",
-            "ul",
-            "indent",
-          ],
-        },
-      }),
+      blocks: [RichText, MediaBlock, ExternalEmbedd],
     },
   ],
 };

apps/roboshield/src/payload/blocks/ExternalEmbedd.ts

@@ -0,0 +1,62 @@
+import { Block } from "payload/types";
+
+export const ExternalEmbedd: Block = {
+  slug: "externalEmbedd",
+  labels: {
+    singular: "External Embedd",
+    plural: "External Embedd",
+  },
+  fields: [
+    {
+      name: "externalEmbeddFields",
+      type: "group",
+      fields: [
+        {
+          type: "row",
+          fields: [
+            {
+              name: "embedType",
+              type: "radio",
+              defaultValue: "url",
+              options: [
+                {
+                  label: "URL",
+                  value: "url",
+                },
+                {
+                  label: "Code",
+                  value: "code",
+                },
+              ],
+            },
+          ],
+        },
+        {
+          name: "url",
+          label: "URL",
+          type: "text",
+          required: true,
+          admin: {
+            condition: (_, siblingData) => siblingData?.embedType === "url",
+          },
+        },
+        {
+          name: "caption",
+          type: "text",
+          localized: true,
+          admin: {
+            condition: (_, siblingData) => siblingData?.embedType === "url",
+          },
+        },
+        {
+          name: "code",
+          type: "code",
+          required: true,
+          admin: {
+            condition: (_, siblingData) => siblingData?.embedType === "code",
+          },
+        },
+      ],
+    },
+  ],
+};