From a2e9c105ba24bd749ac8020cee316df8be3fc79a Mon Sep 17 00:00:00 2001 From: Skydust Date: Mon, 4 Sep 2023 00:24:56 +0200 Subject: [PATCH] Added a way to add html to content --- components/blocks/content.tsx | 17 ++++++- components/blocks/main-title.tsx | 45 ++++++++++++++++++ components/inline/image.tsx | 37 +++++++++++++-- components/layout/layout.tsx | 2 +- content/pages/home.mdx | 79 +++++++++++++++++++++++++++++++- package.json | 2 + styles/_styles.scss | 6 ++- styles/image.scss | 15 ++++++ tailwind.config.js | 28 +++++------ yarn.lock | 63 ++++++++++++++++++++++++- 10 files changed, 269 insertions(+), 25 deletions(-) create mode 100644 components/blocks/main-title.tsx create mode 100644 styles/image.scss diff --git a/components/blocks/content.tsx b/components/blocks/content.tsx index c452509..1bd4148 100644 --- 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 ; +}; export const Content: PageBlockFunction = ({ data }) => { return (
- + } } content={ data.body } />
); diff --git a/components/blocks/main-title.tsx b/components/blocks/main-title.tsx new file mode 100644 index 0000000..641e238 --- /dev/null +++ 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 = ({ data }) => { + return ( +
+ + + +
+ ); +}; + +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 + } + ] +}; diff --git a/components/inline/image.tsx b/components/inline/image.tsx index 831552b..94281e6 100644 --- a/components/inline/image.tsx +++ b/components/inline/image.tsx @@ -26,10 +26,41 @@ export interface ImageProps { position: imagePosition } -const Image = (props: ImageProps) => ( -
- + +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 (
+
); +}; export const imageSchema: RichTextTemplate = { name: "Image", diff --git a/components/layout/layout.tsx b/components/layout/layout.tsx index 577e971..d4e7163 100644 --- a/components/layout/layout.tsx +++ b/components/layout/layout.tsx @@ -28,7 +28,7 @@ export const Layout = ({ />
diff --git a/content/pages/home.mdx b/content/pages/home.mdx index 9b58833..356a47c 100644 --- a/content/pages/home.mdx +++ b/content/pages/home.mdx @@ -10,8 +10,52 @@ blocks: linkTo: main-page _template: carousel - body: > - aezaeaezaedzd +
+

Découvrez la PsychARThérapie,

+

Quand l’art dévoile ce qui se cache en vous !

+
+ + + + + + 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: | + + + + + + dfnfdhdhdh + + +
_template: content - headline: Welcome to the Tina Starter text: > @@ -89,6 +133,37 @@ url: home + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/package.json b/package.json index 70d4d3c..d749f74 100644 --- 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", diff --git a/styles/_styles.scss b/styles/_styles.scss index 3ea6460..c73c5af 100644 --- 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); - } \ No newline at end of file diff --git a/styles/image.scss b/styles/image.scss new file mode 100644 index 0000000..7c699a5 --- /dev/null +++ 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; + } +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 05ea883..729c43b 100644 --- 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") } diff --git a/yarn.lock b/yarn.lock index 23d3ba7..fb7077c 100644 --- 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"