Used MDX for pages to include components

components/blocks/content.tsx

@@ -6,6 +6,7 @@ import type { Template, TinaTemplate } from "tinacms";
 import { PageBlocksCarousel, PageBlocksContent } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 import { PageBlockFunction } from "../blocks-renderer";
+import { components } from "../posts/post";
 
 export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (
@@ -18,7 +19,7 @@ export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
                 size="large"
                 width="medium"
             >
-                <TinaMarkdown content={ data.body } />
+                <TinaMarkdown components={ components } content={ data.body } />
             </Container>
         </Section>
     );
@@ -35,9 +36,74 @@ export const contentBlockSchema: Template = {
     },
     fields: [
         {
+
             type: "rich-text",
             label: "Body",
-            name: "body"
+            name: "body",
+            templates: [
+                {
+                    name: "DateTime",
+                    label: "Date & Time",
+                    inline: true,
+                    fields: [
+                        {
+                            name: "format",
+                            label: "Format",
+                            type: "string",
+                            options: ["utc", "iso", "local"]
+                        }
+                    ]
+                },
+                {
+                    name: "BlockQuote",
+                    label: "Block Quote",
+                    fields: [
+                        {
+                            name: "children",
+                            label: "Quote",
+                            type: "rich-text"
+                        },
+                        {
+                            name: "authorName",
+                            label: "Author",
+                            type: "string"
+                        }
+                    ]
+                },
+                {
+                    name: "NewsletterSignup",
+                    label: "Newsletter Sign Up",
+                    fields: [
+                        {
+                            name: "children",
+                            label: "CTA",
+                            type: "rich-text"
+                        },
+                        {
+                            name: "placeholder",
+                            label: "Placeholder",
+                            type: "string"
+                        },
+                        {
+                            name: "buttonText",
+                            label: "Button Text",
+                            type: "string"
+                        },
+                        {
+                            name: "disclaimer",
+                            label: "Disclaimer",
+                            type: "rich-text"
+                        }
+                    ],
+                    ui: {
+                        defaultItem: {
+                            placeholder: "Enter your email",
+                            buttonText: "Notify Me"
+                        }
+                    }
+                }
+            ],
+            isBody: true
         },
         {
             type: "string",