.eslintrc

@@ -213,7 +213,7 @@
     // disallow deletion of variables
     "no-label-var": 2,
     // disallow labels that share a name with a variable
-    "no-shadow": 2,
+    "no-shadow": "off",
     // disallow declaration of variables already declared in the outer scope
     "no-shadow-restricted-names": 2,
     // disallow shadowing of names such as arguments

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={ "" }
+                className={ "prose default-text-color my-2 main-title" }
-                data-tina-field={ tinaField(data, "body") }
+
-                size="large"
+                size="custom"
-                width="medium"
+                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: "string",
-            type: "rich-text",
+            label: "Title",
-            label: "Body",
+            name: "title"
-            name: "body",
-            templates: richTextTemplates,
-            isBody: true
         }
     ]
 };

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,
+    html: HTMLInline,
-    DateTime,
-    NewsletterSignup,
     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 {

content/global/index.json

@@ -14,7 +14,7 @@
         "label": "Qui suis-je ?"
       },
       {
-        "href": "posts",
+        "href": "art-therapie",
         "label": "Art-thérapie"
       },
       {

content/pages/about.mdx

@@ -1,15 +1,18 @@
 ---
 title: About
 blocks:
-  - body: >
+  - withTitle: true
+    title: Qui suis-je
+    body: >
+      <Image size="small" decorations="default" position="right"
+      imageUrl="/uploads/photo.jpg" inline={true} />
 
-      <Image size="medium" decorations="default" position="right"
+
-      imageUrl="/uploads/photo.jpg" /> Je suis **psychopraticienne en
+      Je suis **psychopraticienne en art-thérapie** et mon approche est issue de
-      art-thérapie** et mon approche est issue de la **psychologie
+      la **psychologie intégrative**, autrement dit, je m’intéresse à l’ensemble
-      intégrative**, autrement dit, je m’intéresse à l’ensemble de la personne :
+      de la personne : sa personnalité, son évolution dans ses différents
-      sa personnalité, son évolution dans ses différents environnements
+      environnements (familial, professionnel, amical) et son fonctionnement à
-      (familial, professionnel, amical) et son fonctionnement à la fois
+      la fois émotionnel, affectif, comportemental, cognitif et relationnel.
-      émotionnel, affectif, comportemental, cognitif et relationnel.
 
 
       Ainsi, je m’adapte à vous en assemblant différentes techniques issues de
@@ -91,3 +94,16 @@ url: aboutt
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+

content/pages/art-therapie.mdx

@@ -0,0 +1,46 @@
+---
+title: Art-thérapie
+blocks:
+  - withTitle: true
+    title: L'Art-Thérapie
+    body: "## Comment se déroule une séance d'art-thérapie ?\n\n<Image size=\"medium\" decorations=\"default\" imageUrl=\"/uploads/chevalet.jpg\" position=\"left\" inline={true} alt=\"Chevalet avec une peinture.\" />\n\nJe vous propose des accompagnements thérapeutiques adaptés à vos demandes et à vos besoins, tout en utilisant l'art-thérapie.\n\nL'art-thérapie est une méthode thérapeutique visant à créer des conditions favorables pour stimuler votre créativité, pour utiliser votre potentiel d'expression artistique, pour mobiliser vos ressources intérieures dans le but de vous aider à dépasser vos difficultés personnelles, de vous exprimer, de vous connaître et d'améliorer votre bien-être.\n\nLa première séance est une séance de découverte de l'art-thérapie, où je réponds à vos questions concernant ma pratique, et où l'on fait également connaissance pour pouvoir définir ensemble la suite des séances selon vos motivations, vos attentes et vos objectifs.\n\nUne séance individuelle dure une heure et il y aura des temps d'échanges, avant et après votre temps de création.\n\nVous n'avez pas besoin de compétences artistiques pour venir en séance d'art-thérapie car ce n'est pas le résultat (votre œuvre, votre production) qui est important ici mais le processus créatif par lequel vous êtes passé, c'est-à-dire ce qui se passe en vous quand vous créez.\n\nEn tant qu'observatrice de ce qui va se jouer durant la séance, il n'y aura de ma part aucun jugement concernant ce que vous ferez.\n\nLa bienveillance et le respect sont essentiels pour vous accompagner à votre rythme.\n\nJe peux vous proposer différentes médiations artistiques\_:\n\n* de la peinture (acrylique, aquarelle),\n* du dessin,\n* du collage,\n* de l'écriture,\n* de la photographie.\n\nIl est possible que vous ne créez pas seulement durant nos séances, mais aussi chez vous, en fonction des objectifs préalablement définis ensemble.\n\nLe matériel artistique est à votre entière disposition au cabinet et les exercices que vous pouvez possiblement faire à la maison ne nécessiteront aucun achat de matériel de votre part car ils vous seront fournis ou bien nous ferons avec le matériel que vous avez déjà chez vous.\n\n<Image size=\"extra-small\" decorations=\"default\" alt=\"Végétation et arbre.\" imageUrl=\"/uploads/arbre.jpg\" position=\"left\" inline={true} />\n\n<Image size=\"extra-small\" decorations=\"default\" alt=\"Troncs.\" imageUrl=\"/uploads/troncs.jpg\" position=\"middle\" inline={true} />\n\n## Pour quels motifs peut-on venir en séance d'art-thérapie\_?\n\nL'art-thérapie est accessible à tous (enfants, adolescents, adultes, personnes âgées) et vous n'avez pas besoin d'être des artistes pour créer\_!\n\nElle est recommandée pour toutes les personnes ayant des difficultés à mettre des mots sur ce qu'ils vivent et ressentent.\n\nEnfants et adultes peuvent développer leurs potentialités et trouver une nouvelle voie pour s'exprimer.\n\nL'art-thérapie peut être indiquée pour les personnes\_:\n\n* En difficulté sociale, psychologique, relationnelle,\n* Souffrant d'anxiété, de stress, d'épisodes dépressifs ou d'émotions négatives,\n* Atteintes de maladies de tout ordre,\n* Souffrant de Stress Post-Traumatique,\n* Atteintes d'un Trouble de Déficit de l'Attention avec ou sans Hyperactivité (TDAH),\n* Zèbres / Haut Potentiel Intellectuel (enfants et adultes) / Hypersensibles\n* En quête de développement personnel, d'un bien-être.\n\nMon accompagnement thérapeutique n'est en aucun cas d'ordre médical et cela ne doit nullement être perçu comme une alternative à votre suivi médical mais comme un complément, un outil supplémentaire.\n\n## Quels sont les bénéfices de l'art-thérapie\_?\n\n<Image size=\"small\" decorations=\"default\" imageUrl=\"/uploads/painting5.jpg\" position=\"right\" inline={true} alt=\"Deux bougies.\" />\n\nL'art-thérapie, en stimulant le corps et l'esprit, permet ainsi de\_:\n\n* Soulager des tensions psychiques,\n* Contribuer à une nouvelle forme d'expression, autrement que par les mots,\n* Se reconnecter à soi-même,\n* Prendre conscience et changer certains comportements,\n* Favoriser l'affirmation et l'estime de soi,\n* Améliorer les relations et la communication,\n* Découvrir sa créativité,\n* Améliorer la qualité de vie, le bien-être,\n* Connaître sa singularité et sa manière d'être face au monde.\n"
+    _template: content
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

styles/_styles.scss

@@ -4,6 +4,7 @@
 @import "anchoring";
 @import "carousel";
 @import "image";
+@import "main-title";
 
 @tailwind base;
 @tailwind components;
@@ -28,6 +29,23 @@ html {
     --tw-prose-bold: #124498;
 }
 
+.default-paragraph-style {
+    color: var(--primaryColor);
+    --tw-prose-bold: #124498;
+    --tw-prose-bullets: #124498;
+    li > div {
+        margin: 0;
+    }
+    h1 {
+        color: var(--primaryColor);
+        font-size: 2.5rem;
+    }
+    h2 {
+        color: var(--primaryColor);
+        font-size: 1.75rem;
+    }
+}
+
 .font {
     font-family: 'Questrial', sans-serif;
 }

styles/image.scss

@@ -3,9 +3,12 @@
     border: var(--primaryColor) solid .25rem;
     border-radius: 1rem;
   }
-  .sm-size {
+  .xs-size {
     max-height: 15rem;
   }
+  .sm-size {
+    max-height: 20rem;
+  }
   .md-size {
     max-height: 25rem;
   }

styles/main-title.scss

@@ -0,0 +1,6 @@
+.main-title {
+  font-size: 2.5rem;
+}
+.main-title + h2 {
+  margin-top: 0;
+}

tina/config.tsx

@@ -7,6 +7,7 @@ import { carouselBlockSchema } from "../components/blocks/carousel";
 import { headerSchema } from "../components/layout/header";
 import { footerSchema } from "../components/layout/footer/footer";
 import { richTextTemplates } from "../components/inline/inline-definitions";
+import { mainTitleBlockSchema } from "../components/blocks/main-title";
 
 const config = defineConfig({
     clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID!,
@@ -155,7 +156,8 @@ const config = defineConfig({
                             featureBlockSchema,
                             contentBlockSchema,
                             testimonialBlockSchema,
-                            carouselBlockSchema
+                            carouselBlockSchema,
+                            mainTitleBlockSchema
                         ]
                     }
                 ]