components/blocks/content.tsx

@@ -7,17 +7,30 @@ import { PageBlocksContent } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 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 prose-lg" }
+                className={ "" }
                 data-tina-field={ tinaField(data, "body") }
                 size="large"
                 width="medium"
             >
-                <TinaMarkdown components={ inlineComponents } content={ data.body } />
+                <TinaMarkdown components={ { ...inlineComponents, html: props => <HTMLInline { ...props } /> } } content={ data.body } />
             </Container>
         </Section>
     );

components/blocks/main-title.tsx

@@ -0,0 +1,45 @@
+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 { tinaField } from "tinacms/dist/react";
+import { PageBlockFunction } from "../blocks-renderer";
+import inlineComponents, { richTextTemplates } from "../inline/inline-definitions";
+
+export const MainTitle: PageBlockFunction<PageBlocksContent> = ({ data }) => {
+    return (
+        <Section>
+            <Container
+                className={ "" }
+                data-tina-field={ tinaField(data, "body") }
+                size="large"
+                width="medium"
+            >
+                <TinaMarkdown components={ inlineComponents } content={ data.body } />
+            </Container>
+        </Section>
+    );
+};
+
+export const mainTitleBlockSchema: Template = {
+    name: "mainTitle",
+    label: "Main title",
+    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."
+        }
+    },
+    fields: [
+        {
+
+            type: "rich-text",
+            label: "Body",
+            name: "body",
+            templates: richTextTemplates,
+            isBody: true
+        }
+    ]
+};

components/inline/image.tsx

@@ -26,10 +26,41 @@ export interface ImageProps {
     position: imagePosition
 }
 
-const Image = (props: ImageProps) => (
+
-    <div>
+const Image = (props: ImageProps) => {
-        <img src={ props.imageUrl }/>
+    const getDecorationTypeClass = (): string | undefined => {
+        switch (props.decorations) {
+            case imageDecorations.default:
+                return "default-border";
+            case imageDecorations.noStyle:
+                return undefined;
+            default:
+                return undefined;
+        }
+    };
+
+    const getSizeTypeClass = (): string | undefined => {
+        switch (props.size) {
+            case imageSize.small:
+                return "sm-size";
+            case imageSize.medium:
+                return "md-size";
+            case imageSize.large:
+                return "lg-size";
+            default:
+                return undefined;
+        }
+    };
+
+    const decorationTypeClass = getDecorationTypeClass();
+
+    const sizeTypeClass = getSizeTypeClass();
+
+    return (<div className={ "inline-image" }>
+        <img className={ `${ decorationTypeClass ? `${ decorationTypeClass }` : "" }${ sizeTypeClass ? ` ${ sizeTypeClass }` : "" }` }
+            src={ props.imageUrl }/>
     </div>);
+};
 
 export const imageSchema: RichTextTemplate = {
     name: "Image",

components/layout/layout.tsx

@@ -28,7 +28,7 @@ export const Layout = ({
                 />
             </Head>
             <div
-                className={ "min-h-screen flex flex-col font-nunito" }
+                className={ "min-h-screen flex flex-col" }
             >
                 <Header data={ data?.header } />
                 <div className="flex-1 text-gray-800 bg-gradient-to-br from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000 flex flex-col">

content/pages/home.mdx

@@ -10,8 +10,52 @@ blocks:
       linkTo: main-page
     _template: carousel
   - body: >
-      aezaeaezae<DateTime format="iso" />dzd <Image size="small" position="left"
+      <div class="text-center">
-      imageUrl="/uploads/etoile.jpg" decorations="default" />
+        <h1>Découvrez la PsychARThérapie,</h1>
+        <h1>Quand l’art dévoile ce qui se cache en vous !</h1>
+      </div>
+
+
+      <Image size="medium" position="middle" imageUrl="/uploads/etoile.jpg"
+      decorations="default" />
+
+
+      PsychARThérapie est l’alliance entre la psychologie intégrative et
+      l’art-thérapie, autrement dit, en tant que psychopraticienne en
+      art-thérapie, je m’adapte à vos besoins, à votre rythme, pour vous
+      accompagner vers là où vous souhaitez aller.
+
+
+      Les médiations artistiques (peinture, dessin, écriture, photographie) vont
+      pouvoir vous aider à accéder à votre but par le jeu, la création, l’image,
+      le symbole, et un tout nouveau moyen d’expression, votre propre langage.
+
+
+      Voulez-vous être accompagné/soutenu lors d’un événement difficile à gérer
+      pour vous ?
+
+
+      Voulez-vous découvrir l’artiste qui sommeille en vous et qui veut recréer
+      son histoire ?
+
+
+      Voulez-vous explorer vos capacités, vos ressources intérieures grâce à
+      l’art-thérapie ?
+
+
+      Tentez l’expérience et entrez dans votre espace de création et de liberté
+      !
+    _template: content
+  - body: |
+      <DateTime />
+
+      <Image size="small" decorations="default" />
+
+      <NewsletterSignup placeholder="Enter your email" buttonText="Notify Me">
+        dfnfdhdhdh
+      </NewsletterSignup>
+
+      <BlockQuote />
     _template: content
   - headline: Welcome to the Tina Starter
     text: >
@@ -89,6 +133,37 @@ url: home
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 

package.json

@@ -16,6 +16,7 @@
     "@types/js-cookie": "^3.0.0",
     "@types/node": "^16.11.7",
     "@types/react": "^17.0.35",
+    "@types/sanitize-html": "^2.9.0",
     "@types/styled-components": "^5.1.15",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^6.5.0",
@@ -35,6 +36,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-icons": "^4.2.0",
+    "sanitize-html": "^2.11.0",
     "sass": "^1.66.1",
     "styled-jsx": "^3.2.5",
     "tailwindcss": "^3.2.4",

styles/_styles.scss

@@ -3,6 +3,7 @@
 @import "header";
 @import "anchoring";
 @import "carousel";
+@import "image";
 
 @tailwind base;
 @tailwind components;
@@ -18,8 +19,11 @@ html {
     scroll-padding-top: var(--header-Height);
 }
 
+.font {
+    font-family: 'Questrial', sans-serif;
+}
+
 body {
     font-family: 'Questrial', sans-serif;
     background-color: var(--body-BackgroundColor);
-
 }

styles/image.scss

@@ -0,0 +1,15 @@
+.inline-image {
+  .default-border {
+    border: var(--primaryColor) solid .25rem;
+    border-radius: 1rem;
+  }
+  .sm-size {
+    height: 15rem;
+  }
+  .md-size {
+    height: 25rem;
+  }
+  .lg-size {
+    height: 40rem;
+  }
+}

tailwind.config.js

@@ -106,7 +106,7 @@ module.exports = {
                 DEFAULT: {
                     css: {
                         pre: {
-                            color: theme("colors.gray.700"),
+                            color: "var(--primaryColor)",
                             backgroundColor: theme("colors.gray.100"),
                             lineHeight: 1.5
                         },
@@ -157,9 +157,9 @@ module.exports = {
                 },
                 dark: {
                     css: {
-                        color: theme("colors.gray.200"),
+                        color: "var(--primaryColor)",
                         "[class~=\"lead\"]": { color: theme("colors.gray.400") },
-                        a: { color: theme("colors.gray.100") },
+                        a: { color: "var(--primaryColor)" },
                         strong: { color: theme("colors.gray.100") },
                         "ul > li::before": { backgroundColor: theme("colors.gray.700") },
                         hr: { borderColor: theme("colors.gray.800") },
@@ -177,11 +177,11 @@ module.exports = {
                         },
                         "a code": { color: theme("colors.gray.100") },
                         pre: {
-                            color: theme("colors.gray.200"),
+                            color: "var(--primaryColor)",
                             backgroundColor: theme("colors.gray.900")
                         },
                         thead: {
-                            color: theme("colors.gray.100"),
+                            color: "var(--primaryColor)",
                             borderBottomColor: theme("colors.gray.700")
                         },
                         "tbody tr": { borderBottomColor: theme("colors.gray.800") }
@@ -189,31 +189,31 @@ module.exports = {
                 },
                 primary: {
                     css: {
-                        color: theme("colors.gray.50"),
+                        color: "var(--primaryColor)",
                         "[class~=\"lead\"]": { color: theme("colors.gray.400") },
-                        a: { color: theme("colors.gray.100") },
+                        a: { color: "var(--primaryColor)" },
-                        strong: { color: theme("colors.gray.100") },
+                        strong: { color: "var(--primaryColor)" },
                         "ul > li::before": { backgroundColor: theme("colors.gray.700") },
                         hr: { borderColor: theme("colors.gray.800") },
                         blockquote: {
                             color: theme("colors.gray.100"),
                             borderLeftColor: theme("colors.gray.800")
                         },
-                        h1: { color: theme("colors.gray.100") },
+                        h1: { color: "var(--primaryColor)" },
-                        h2: { color: theme("colors.gray.100") },
+                        h2: { color: "var(--primaryColor)" },
-                        h3: { color: theme("colors.gray.100") },
+                        h3: { color: "var(--primaryColor)" },
-                        h4: { color: theme("colors.gray.100") },
+                        h4: { color: "var(--primaryColor)" },
                         code: {
                             color: theme("colors.gray.100"),
                             backgroundColor: "rgba(0,0,0,0.15)"
                         },
                         "a code": { color: theme("colors.gray.100") },
                         pre: {
-                            color: theme("colors.gray.200"),
+                            color: "var(--primaryColor)",
                             backgroundColor: "rgba(0,0,0,0.15)"
                         },
                         thead: {
-                            color: theme("colors.gray.100"),
+                            color: "var(--primaryColor)",
                             borderBottomColor: theme("colors.gray.700")
                         },
                         "tbody tr": { borderBottomColor: theme("colors.gray.800") }

yarn.lock

@@ -2831,6 +2831,13 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/sanitize-html@^2.9.0":
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/@types/sanitize-html/-/sanitize-html-2.9.0.tgz#5b609f7592de22ef80a0930c39670329753dca1b"
+  integrity sha512-4fP/kEcKNj2u39IzrxWYuf/FnCCwwQCpif6wwY6ROUS1EPRIfWJjGkY3HIowY1EX/VbX5e86yq8AAE7UPMgATg==
+  dependencies:
+    htmlparser2 "^8.0.0"
+
 "@types/scheduler@*":
   version "0.16.3"
   resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz"
@@ -4716,7 +4723,16 @@ dom-serializer@^1.0.1:
     domhandler "^4.2.0"
     entities "^2.0.0"
 
-domelementtype@^2.0.1, domelementtype@^2.2.0:
+dom-serializer@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-2.0.0.tgz#e41b802e1eedf9f6cae183ce5e622d789d7d8e53"
+  integrity sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.2"
+    entities "^4.2.0"
+
+domelementtype@^2.0.1, domelementtype@^2.2.0, domelementtype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz"
   integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
@@ -4728,6 +4744,13 @@ domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
+domhandler@^5.0.2, domhandler@^5.0.3:
+  version "5.0.3"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-5.0.3.tgz#cc385f7f751f1d1fc650c21374804254538c7d31"
+  integrity sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==
+  dependencies:
+    domelementtype "^2.3.0"
+
 domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz"
@@ -4737,6 +4760,15 @@ domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
+domutils@^3.0.1:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-3.1.0.tgz#c47f551278d3dc4b0b1ab8cbb42d751a6f0d824e"
+  integrity sha512-H78uMmQtI2AhgDJjWeQmHwJJ2bLPD3GMmO7Zja/ZZh84wkm+4ut+IUnUdRa8uCGX88DiVx1j6FRe1XfxEgjEZA==
+  dependencies:
+    dom-serializer "^2.0.0"
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz"
@@ -4830,7 +4862,7 @@ entities@^3.0.1:
   resolved "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz"
   integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
 
-entities@^4.4.0:
+entities@^4.2.0, entities@^4.4.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -6089,6 +6121,16 @@ htmlparser2@^7.2.0:
     domutils "^2.8.0"
     entities "^3.0.1"
 
+htmlparser2@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-8.0.2.tgz#f002151705b383e62433b5cf466f5b716edaec21"
+  integrity sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==
+  dependencies:
+    domelementtype "^2.3.0"
+    domhandler "^5.0.3"
+    domutils "^3.0.1"
+    entities "^4.4.0"
+
 http-errors@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz"
@@ -8727,6 +8769,11 @@ parse-json@^5.0.0:
     json-parse-even-better-errors "^2.3.0"
     lines-and-columns "^1.1.6"
 
+parse-srcset@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
+  integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
+
 parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
@@ -9788,6 +9835,18 @@ sane@^4.0.3:
     minimist "^1.1.1"
     walker "~1.0.5"
 
+sanitize-html@^2.11.0:
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/sanitize-html/-/sanitize-html-2.11.0.tgz#9a6434ee8fcaeddc740d8ae7cd5dd71d3981f8f6"
+  integrity sha512-BG68EDHRaGKqlsNjJ2xUB7gpInPA8gVx/mvjO743hZaeMCZ2DwzW7xvsqZ+KNU4QKwj86HJ3uu2liISf2qBBUA==
+  dependencies:
+    deepmerge "^4.2.2"
+    escape-string-regexp "^4.0.0"
+    htmlparser2 "^8.0.0"
+    is-plain-object "^5.0.0"
+    parse-srcset "^1.0.2"
+    postcss "^8.3.11"
+
 sass@^1.66.1:
   version "1.66.1"
   resolved "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz"