Remade the title block to be multi-purpose and added the facebook widget

components/blocks-renderer.tsx

@@ -6,7 +6,8 @@ import { Testimonial } from "./blocks/testimonial";
 import { tinaField } from "tinacms/dist/react";
 import { Carousel } from "./blocks/carousel";
 import { ReactElement } from "react";
-import { MainTitle } from "./blocks/main-title";
+import { Title } from "./blocks/title";
+import { FacebookPageTimeline } from "./blocks/facebook-page-timeline";
 
 export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
     return (
@@ -44,8 +45,10 @@ const Block = (block: PageBlocks): ReactElement<PageBlockProps, PageBlockFunctio
             return <Testimonial data={ block } />;
         case "PageBlocksCarousel":
             return <Carousel data={ block } />;
-        case "PageBlocksMainTitle":
-            return <MainTitle data={ block } />;
+        case "PageBlocksTitle":
+            return <Title data={ block } />;
+        case "PageBlocksFacebookPageTimeline":
+            return <FacebookPageTimeline data={ block } />;
         default:
             return null;
     }

components/blocks/content.tsx

@@ -17,11 +17,6 @@ export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
                 size="custom"
                 width="large"
             >
-                { data.withTitle ?
-                    <div className={ "main-title" }
-                        data-tina-field={ tinaField(data, "title") }>
-                        { data.title }
-                    </div> : null }
                 <TinaMarkdown components={ inlineComponents } content={ data.body } />
             </Container>
         </Section>
@@ -39,17 +34,6 @@ export const contentBlockSchema: Template = {
     },
     fields: [
         {
-            type: "boolean",
-            label: "With Title",
-            name: "withTitle"
-        },
-        {
-            type: "string",
-            label: "Title",
-            name: "title"
-        },
-        {
-
             type: "rich-text",
             label: "Body",
             name: "body",

components/blocks/facebook-page-timeline.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Container } from "../util/container";
+import { Section } from "../util/section";
+import type { Template } from "tinacms";
+import { PageBlockFunction } from "../blocks-renderer";
+import { PageBlocksFacebookPageTimeline } from "../../tina/__generated__/types";
+
+export const FacebookPageTimeline: PageBlockFunction<PageBlocksFacebookPageTimeline> = ({ data }) => {
+    return (
+        <Section>
+            <Container
+                className={ "mt-2 flex justify-center" }
+                size="custom"
+                width="large"
+            >
+                { data.page &&
+                <iframe
+                    src={ `https://www.facebook.com/plugins/page.php?href=${
+                        encodeURIComponent(data.page)
+                    }&tabs=timeline&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId` }
+                    width="500"
+                    height="500"
+                    style={ { border: "none", overflow: "hidden" } }
+                    scrolling="no"
+                    frameBorder="0"
+                    allowFullScreen={ true }
+                    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"/> }
+            </Container>
+        </Section>
+    );
+};
+
+export const facebookPageTimelineBlockSchema: Template = {
+    name: "facebookPageTimeline",
+    label: "Plugin page facebook",
+    ui: {
+        defaultItem: {
+            page: ""
+        }
+    },
+    fields: [
+        {
+            type: "string",
+            label: "URL Page",
+            name: "page"
+        }
+    ]
+};

components/blocks/title.tsx

@@ -2,20 +2,27 @@ import React from "react";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 import type { Template } from "tinacms";
-import { PageBlocksMainTitle } from "../../tina/__generated__/types";
+import { PageBlocksTitle } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 import { PageBlockFunction } from "../blocks-renderer";
 
-export const MainTitle: PageBlockFunction<PageBlocksMainTitle> = ({ data }) => {
+enum titleSize {
+    h1 = "h1",
+    h2 = "h2",
+    h3 = "h3",
+    h4 = "h4"
+}
+
+export const Title: PageBlockFunction<PageBlocksTitle> = ({ data }) => {
     return (
         <Section>
             <Container
-                className={ "prose default-text-color my-2 main-title" }
+                className={ `prose default-text-color mt-2 title-block${ data?.size ? ` title-size-${ data.size }` : "" }` }
 
                 size="custom"
                 width="large"
             >
-                <div className={ "main-title" }
+                <div className={ "title-block" }
                     data-tina-field={ tinaField(data, "title") }>
                     { data.title }
                 </div>
@@ -24,19 +31,26 @@ export const MainTitle: PageBlockFunction<PageBlocksMainTitle> = ({ data }) => {
     );
 };
 
-export const mainTitleBlockSchema: Template = {
-    name: "mainTitle",
-    label: "Main title",
+export const titleBlockSchema: Template = {
+    name: "title",
+    label: "Titre",
     ui: {
         previewSrc: "/blocks/content.png",
         defaultItem: {
+            size: Object.values(titleSize)[0],
             title: "Lorem ipsum"
         }
     },
     fields: [
         {
             type: "string",
-            label: "Title",
+            label: "Taille",
+            name: "size",
+            options: Object.values(titleSize)
+        },
+        {
+            type: "string",
+            label: "Texte",
             name: "title"
         }
     ]