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

components/posts/post.tsx

@@ -21,7 +21,7 @@ import type { TinaMarkdownContent, Components } from "tinacms/dist/rich-text";
 import { PostType } from "../../pages/posts/[filename]";
 import { tinaField } from "tinacms/dist/react";
 
-const components: Components<{
+export const components: Components<{
   BlockQuote: {
     children: TinaMarkdownContent;
     authorName: string;

content/pages/home.mdx

@@ -9,6 +9,9 @@ blocks:
       text: Découvrez-en plus !
       linkTo: main-page
     _template: carousel
+  - body: |
+      aezaeaezae<DateTime format="iso" />dzds
+    _template: content
   - headline: Welcome to the Tina Starter
     text: >
       This project is set up to show you the basics of working with Tina. You're
@@ -78,4 +81,10 @@ blocks:
 
 
 
+
+
+
+
+
+
 

pages/[filename].tsx

@@ -19,7 +19,7 @@ export default function HomePage(
 
 export const getStaticProps = async ({ params }) => {
     const tinaProps = await client.queries.contentQuery({
-        relativePath: `${ params.filename }.md`
+        relativePath: `${ params.filename }.mdx`
     });
     const props = {
         ...tinaProps,

tina/config.tsx

@@ -183,6 +183,7 @@ const config = defineConfig({
                 label: "Pages",
                 name: "page",
                 path: "content/pages",
+                format: "mdx",
                 ui: {
                     router: ({ document }) => {
                         if (document._sys.filename === "home") {