Added a way to add html to content

2023-09-04 00:24:56 +02:00
parent 4f5d822e11
commit a2e9c105ba
10 changed files with 269 additions and 25 deletions
--- a/components/blocks/content.tsx
+++ b/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>
    );
--- a/components/blocks/main-title.tsx
+++ b/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
+        }
+    ]
+};
--- a/components/inline/image.tsx
+++ b/components/inline/image.tsx
@@ -26,10 +26,41 @@ export interface ImageProps {
    position: imagePosition
 }

-const Image = (props: ImageProps) => (
-    <div>
-        <img src={ props.imageUrl }/>
+
+const Image = (props: ImageProps) => {
+    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",
--- a/components/layout/layout.tsx
+++ b/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">
--- a/content/pages/home.mdx
+++ b/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"
-      imageUrl="/uploads/etoile.jpg" decorations="default" />
+      <div class="text-center">
+        <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



+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+



--- a/package.json
+++ b/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",
--- a/styles/_styles.scss
+++ b/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);
-
 }
--- a/styles/image.scss
+++ b/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;
+  }
+}
--- a/tailwind.config.js
+++ b/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") },
-                        strong: { color: theme("colors.gray.100") },
+                        a: { color: "var(--primaryColor)" },
+                        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") },
-                        h2: { color: theme("colors.gray.100") },
-                        h3: { color: theme("colors.gray.100") },
-                        h4: { color: theme("colors.gray.100") },
+                        h1: { color: "var(--primaryColor)" },
+                        h2: { color: "var(--primaryColor)" },
+                        h3: { color: "var(--primaryColor)" },
+                        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") }
--- a/yarn.lock
+++ b/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"