Skydust/psychartherapie-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

f/basic-mdx-components #9

Merged
Skydust merged 7 commits from f/basic-mdx-components into dev 2023-09-09 23:01:32 +00:00
Conversation 0 Commits 7 Files Changed 29 +269 -25
10 changed files with 269 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a2e9c105ba - Show all commits

17
components/blocks/content.tsx
View File

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

45
components/blocks/main-title.tsx Normal file
View File

@@ -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
}
]
};

37
components/inline/image.tsx
View File

@@ -26,10 +26,41 @@ export interface ImageProps {
position: imagePosition 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>); </div>);
};
export const imageSchema: RichTextTemplate = { export const imageSchema: RichTextTemplate = {
name: "Image", name: "Image",

2
components/layout/layout.tsx
View File

@@ -28,7 +28,7 @@ export const Layout = ({
/> />
</Head> </Head>
<div <div
className={ "min-h-screen flex flex-col font-nunito" } className={ "min-h-screen flex flex-col" }
> >
<Header data={ data?.header } /> <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"> <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">

79
content/pages/home.mdx
View File

@@ -10,8 +10,52 @@ blocks:
linkTo: main-page linkTo: main-page
_template: carousel _template: carousel
- body: > - 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 _template: content
- headline: Welcome to the Tina Starter - headline: Welcome to the Tina Starter
text: > text: >
@@ -89,6 +133,37 @@ url: home

2
package.json
View File

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

6
styles/_styles.scss
View File

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

15
styles/image.scss Normal file
View File

@@ -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;
}
}

28
tailwind.config.js
View File

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

63
yarn.lock
View File

@@ -2831,6 +2831,13 @@
"@types/scheduler" "*" "@types/scheduler" "*"
csstype "^3.0.2" 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@*": "@types/scheduler@*":
version "0.16.3" version "0.16.3"
resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz" 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" domhandler "^4.2.0"
entities "^2.0.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" version "2.3.0"
resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz" resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz"
integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw== integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
@@ -4728,6 +4744,13 @@ domhandler@^4.2.0, domhandler@^4.2.2, domhandler@^4.3.1:
dependencies: dependencies:
domelementtype "^2.2.0" 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: domutils@^2.8.0:
version "2.8.0" version "2.8.0"
resolved "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz" resolved "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz"
@@ -4737,6 +4760,15 @@ domutils@^2.8.0:
domelementtype "^2.2.0" domelementtype "^2.2.0"
domhandler "^4.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: dot-case@^3.0.4:
version "3.0.4" version "3.0.4"
resolved "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz" 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" resolved "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz"
integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q== integrity sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==
entities@^4.4.0: entities@^4.2.0, entities@^4.4.0:
version "4.5.0" version "4.5.0"
resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz" resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz"
integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw== integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
@@ -6089,6 +6121,16 @@ htmlparser2@^7.2.0:
domutils "^2.8.0" domutils "^2.8.0"
entities "^3.0.1" 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: http-errors@2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz" 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" json-parse-even-better-errors "^2.3.0"
lines-and-columns "^1.1.6" 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: parseurl@~1.3.3:
version "1.3.3" version "1.3.3"
resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz" resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
@@ -9788,6 +9835,18 @@ sane@^4.0.3:
minimist "^1.1.1" minimist "^1.1.1"
walker "~1.0.5" 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: sass@^1.66.1:
version "1.66.1" version "1.66.1"
resolved "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz" resolved "https://registry.npmjs.org/sass/-/sass-1.66.1.tgz"