Better art therapie page

components/blocks-renderer.tsx

@@ -6,6 +6,7 @@ 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";
 
 export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
     return (
@@ -43,6 +44,8 @@ const Block = (block: PageBlocks): ReactElement<PageBlockProps, PageBlockFunctio
             return <Testimonial data={ block } />;
         case "PageBlocksCarousel":
             return <Carousel data={ block } />;
+        case "PageBlocksMainTitle":
+            return <MainTitle data={ block } />;
         default:
             return null;
     }

components/blocks/content.tsx

@@ -9,28 +9,21 @@ import { PageBlockFunction } from "../blocks-renderer";
 import inlineComponents, { richTextTemplates } from "../inline/inline-definitions";
 import sanitizeHtml from "sanitize-html";
 
-const HTMLInline = (props: { value: string }) => {
-    const createSanitizedMarkup = (text: string) => {
-        return { __html: sanitizeHtml(text, {
-            allowedAttributes: {
-                div: [ "class" ]
-            }
-        }) };
-    };
-
-    return <span dangerouslySetInnerHTML={ createSanitizedMarkup(props.value) } />;
-};
-
 export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (
         <Section>
             <Container
-                className={ "prose default-text-color" }
+                className={ "prose default-paragraph-style pb-4 pt-4" }
                 data-tina-field={ tinaField(data, "body") }
-                size="small"
+                size="custom"
                 width="large"
             >
-                <TinaMarkdown components={ { ...inlineComponents, html: props => <HTMLInline { ...props } /> } } content={ data.body } />
+                { data.withTitle ?
+                    <div className={ "main-title" }
+                        data-tina-field={ tinaField(data, "title") }>
+                        { data.title }
+                    </div> : null }
+                <TinaMarkdown components={ inlineComponents } content={ data.body } />
             </Container>
         </Section>
     );
@@ -46,6 +39,16 @@ export const contentBlockSchema: Template = {
         }
     },
     fields: [
+        {
+            type: "boolean",
+            label: "With Title",
+            name: "withTitle"
+        },
+        {
+            type: "string",
+            label: "Title",
+            name: "title"
+        },
         {
 
             type: "rich-text",

components/blocks/main-title.tsx

@@ -1,23 +1,24 @@
 import React from "react";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
-import { TinaMarkdown } from "tinacms/dist/rich-text";
 import type { Template } from "tinacms";
-import { PageBlocksContent } from "../../tina/__generated__/types";
+import { PageBlocksMainTitle } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 import { PageBlockFunction } from "../blocks-renderer";
-import inlineComponents, { richTextTemplates } from "../inline/inline-definitions";
 
-export const MainTitle: PageBlockFunction<PageBlocksContent> = ({ data }) => {
+export const MainTitle: PageBlockFunction<PageBlocksMainTitle> = ({ data }) => {
     return (
         <Section>
             <Container
-                className={ "" }
-                data-tina-field={ tinaField(data, "body") }
-                size="large"
-                width="medium"
+                className={ "prose default-text-color my-2 main-title" }
+
+                size="custom"
+                width="large"
             >
-                <TinaMarkdown components={ inlineComponents } content={ data.body } />
+                <div className={ "main-title" }
+                    data-tina-field={ tinaField(data, "title") }>
+                    { data.title }
+                </div>
             </Container>
         </Section>
     );
@@ -29,17 +30,14 @@ export const mainTitleBlockSchema: Template = {
     ui: {
         previewSrc: "/blocks/content.png",
         defaultItem: {
-            body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
+            title: "Lorem ipsum"
         }
     },
     fields: [
         {
-
-            type: "rich-text",
-            label: "Body",
-            name: "body",
-            templates: richTextTemplates,
-            isBody: true
+            type: "string",
+            label: "Title",
+            name: "title"
         }
     ]
 };

components/inline/date-time.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import format from "date-fns/format";
-import { Template } from "tinacms";
 import { RichTextTemplate } from "@tinacms/schema-tools";
 
 export interface DateTimeProps {

components/inline/image.tsx

@@ -3,6 +3,7 @@ import { RichTextTemplate } from "@tinacms/schema-tools";
 import { tinaField } from "tinacms/dist/react";
 
 enum imageSize {
+    extraSmall = "extra-small",
     small = "small",
     medium = "medium",
     large = "large"
@@ -24,7 +25,9 @@ export interface ImageProps {
     size: imageSize;
     imageUrl: string,
     decorations: imageDecorations,
-    position: imagePosition
+    position: imagePosition,
+    inline: boolean,
+    alt: string
 }
 
 
@@ -42,6 +45,8 @@ const Image = (props: ImageProps) => {
 
     const getSizeTypeClass = (): string | undefined => {
         switch (props.size) {
+            case imageSize.extraSmall:
+                return "xs-size";
             case imageSize.small:
                 return "sm-size";
             case imageSize.medium:
@@ -56,11 +61,11 @@ const Image = (props: ImageProps) => {
     const getPositionTypeClass = (): string | undefined => {
         switch (props.position) {
             case imagePosition.left:
-                return "float-left mr-2";
+                return (props.inline) ? "float-left mr-2" : "flex justify-start";
             case imagePosition.middle:
                 return "flex justify-center";
             case imagePosition.right:
-                return "float-right ml-2";
+                return (props.inline) ? "float-right ml-2" : "flex justify-end";
             default:
                 return undefined;
         }
@@ -77,6 +82,7 @@ const Image = (props: ImageProps) => {
     return (<div className={ `not-prose inline-image${ getClassNameWithSpace(positionTypeClass) }` }>
         <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ getClassNameWithSpace(sizeTypeClass) }` }
             data-tina-field={ tinaField(props, "imageUrl") }
+            alt={ props.alt }
             src={ props.imageUrl }/>
     </div>);
 };
@@ -84,7 +90,6 @@ const Image = (props: ImageProps) => {
 export const imageSchema: RichTextTemplate = {
     name: "Image",
     label: "Image",
-    inline: true,
     ui: {
         defaultItem: {
             size: Object.values(imageSize)[0],
@@ -109,11 +114,21 @@ export const imageSchema: RichTextTemplate = {
             label: "Image",
             type: "image"
         },
+        {
+            name: "inline",
+            label: "Inline",
+            type: "boolean"
+        },
         {
             name: "decorations",
             label: "Decorations",
             type: "string",
             options: Object.values(imageDecorations)
+        },
+        {
+            name: "alt",
+            label: "Alt",
+            type: "string"
         }
     ] };
 

components/inline/inline-definitions.tsx

@@ -6,6 +6,19 @@ import { Prism } from "tinacms/dist/rich-text/prism";
 import React from "react";
 import Image, { ImageProps, imageSchema } from "./image";
 import { RichTextTemplate } from "@tinacms/schema-tools";
+import sanitizeHtml from "sanitize-html";
+
+const HTMLInline = (props: { value: string }) => {
+    const createSanitizedMarkup = (text: string) => {
+        return { __html: sanitizeHtml(text, {
+            allowedAttributes: {
+                div: [ "class" ]
+            }
+        }) };
+    };
+
+    return <span dangerouslySetInnerHTML={ createSanitizedMarkup(props.value) } />;
+};
 
 const inlineComponents: Components<{
     BlockQuote: BlockQuoteProps;
@@ -14,14 +27,18 @@ const inlineComponents: Components<{
     Image: ImageProps;
 }> = {
     code_block: (props) => <Prism { ...props } />,
-    BlockQuote,
-    DateTime,
-    NewsletterSignup,
+    html: HTMLInline,
     img: (props) => (
         <span className="flex items-center justify-center">
             <img src={ props.url } alt={ props.alt } />
         </span>
     ),
+    li: (props) => (
+        <li>{ props.children }</li>
+    ),
+    BlockQuote,
+    DateTime,
+    NewsletterSignup,
     Image
 };
 

components/inline/newsletter-signup.tsx

@@ -1,6 +1,5 @@
 import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
 import React from "react";
-import format from "date-fns/format";
 import { RichTextTemplate } from "@tinacms/schema-tools";
 
 export interface NewsletterSignupProps {