Renamed inline definitions to rich-text-definitions

.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

.gitea/workflows/test.yml

@@ -0,0 +1,34 @@
+# This defines the name of the workflow as it will appear in the "Actions" tab of the Gitea repository.
+name: A gitea test
+
+#on:
+#  pull_request:
+#    paths:
+#      - '**.js'
+
+jobs:
+  random_test:
+    name: Random test
+
+    runs-on: ubuntu-latest
+
+    env:
+      SSH_USER: ${{ secrets.SSH_USER }}
+      SSH_PASSWORD: ${{ secrets.SSH_PASSWORD }}
+
+    steps:
+      - name: Check out repo's default branch
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.13.x
+          cache: npm
+      - name: Run the "npm ci" command
+        run: npm ci
+      - name: Run the "npm run build" command
+        run: npm run bullshit:build
+      - name: Run script
+        run: |
+          echo "did the build"
+

README.md

@@ -1,42 +1,28 @@
-# Tina Starter 🦙
+# Psycharthérapie V.2
 
-![tina-cloud-starter-demo](https://user-images.githubusercontent.com/103008/130587027-995ccc45-a852-4f90-b658-13e8e0517339.gif)
+### Fonctions
 
-This Next.js starter is powered by [TinaCMS](https://app.tina.io) for you and your team to visually live edit the structured content of your website. ✨
+- [Tina Headless CMS](https://app.tina.io) pour la gestion de contenu.
+- [Vercel](https://vercel.com) pour déployer le site et visuellement éditer le site avec la route `/admin`.
 
-The content is managed through Markdown and JSON files stored in your GitHub repository, and queried through Tina GraphQL API.
+## Développement local
 
-### Features
+Installation des dépendences:
-
-- [Tina Headless CMS](https://app.tina.io) for authentication, content modeling, visual editing and team management.
-- [Vercel](https://vercel.com) deployment to visually edit your site from the `/admin` route.
-- Local development workflow from the filesystem with a local GraqhQL server.
-
-## Requirements
-
-- Git, [Node.js Active LTS](https://nodejs.org/en/about/releases/), Yarn installed for local development.
-- A [TinaCMS](https://app.tina.io) account for live editing.
-
-## Local Development
-
-Install the project's dependencies:
 
 ```
 yarn install
 ```
 
-Run the project locally:
+Lancer le projet localement:
 
 ```
 yarn dev
 ```
 
-### Local URLs
+### URLs locales
 
-- http://localhost:3000 : browse the website
+- http://localhost:3000 : accéder au site
-- http://localhost:3000/admin : connect to Tina Cloud and go in edit mode
+- http://localhost:3000/admin : accès au cloud tina local et permet l'édition
-- http://localhost:3000/exit-admin : log out of Tina Cloud
-- http://localhost:4001/altair/ : GraphQL playground to test queries and browse the API documentation
 
 ### Building the Starter Locally (Using the hosted content API)
 
@@ -53,30 +39,3 @@ Build the project:
 ```bash
 yarn build
 ```
-
-## Getting Help
-
-To get help with any TinaCMS challenges you may have:
-
-- Visit the [documentation](https://tina.io/docs/) to learn about Tina.
-- [Join our Discord](https://discord.gg/zumN63Ybpf) to share feedback.
-- Visit the [community forum](https://community.tinacms.org/) to ask questions.
-- Get support through the chat widget on the TinaCMS Dashboard
-- [Email us](mailto:support@tina.io) to schedule a call with our team and share more about your context and what you're trying to achieve.
-- [Search or open an issue](https://github.com/tinacms/tinacms/issues) if something is not working.
-- Reach out on Twitter at [@tina_cms](https://twitter.com/tina_cms).
-
-## Development tips
-
-### Visual Studio Code GraphQL extension
-
-[Install the GraphQL extension](https://marketplace.visualstudio.com/items?itemName=GraphQL.vscode-graphql) to benefit from type auto-completion.
-
-### Typescript
-
-A good way to ensure your components match the shape of your data is to leverage the auto-generated TypeScript types.
-These are rebuilt when your `tina` config changes.
-
-## LICENSE
-
-Licensed under the [Apache 2.0 license](./LICENSE).

assets/img/scores/lighthouse.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="102" height="20" role="img" aria-label="lighthouse: 88%"><title>lighthouse: 88%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="102" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="67" height="20" fill="#555"/><rect x="67" width="35" height="20" fill="#a4a61d"/><rect width="102" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="345" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="570">lighthouse</text><text x="345" y="140" transform="scale(.1)" fill="#fff" textLength="570">lighthouse</text><text aria-hidden="true" x="835" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="250">88%</text><text x="835" y="140" transform="scale(.1)" fill="#fff" textLength="250">88%</text></g></svg>

assets/img/scores/lighthouse_accessibility.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="180" height="20" role="img" aria-label="lighthouse accessibility: 100%"><title>lighthouse accessibility: 100%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="180" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="137" height="20" fill="#555"/><rect x="137" width="43" height="20" fill="#4c1"/><rect width="180" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="695" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1270">lighthouse accessibility</text><text x="695" y="140" transform="scale(.1)" fill="#fff" textLength="1270">lighthouse accessibility</text><text aria-hidden="true" x="1575" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">100%</text><text x="1575" y="140" transform="scale(.1)" fill="#fff" textLength="330">100%</text></g></svg>

assets/img/scores/lighthouse_best-practices.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="192" height="20" role="img" aria-label="lighthouse best-practices: 100%"><title>lighthouse best-practices: 100%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="192" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="149" height="20" fill="#555"/><rect x="149" width="43" height="20" fill="#4c1"/><rect width="192" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="755" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1390">lighthouse best-practices</text><text x="755" y="140" transform="scale(.1)" fill="#fff" textLength="1390">lighthouse best-practices</text><text aria-hidden="true" x="1695" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">100%</text><text x="1695" y="140" transform="scale(.1)" fill="#fff" textLength="330">100%</text></g></svg>

assets/img/scores/lighthouse_performance.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="184" height="20" role="img" aria-label="lighthouse performance: 100%"><title>lighthouse performance: 100%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="184" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="141" height="20" fill="#555"/><rect x="141" width="43" height="20" fill="#4c1"/><rect width="184" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="715" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="1310">lighthouse performance</text><text x="715" y="140" transform="scale(.1)" fill="#fff" textLength="1310">lighthouse performance</text><text aria-hidden="true" x="1615" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">100%</text><text x="1615" y="140" transform="scale(.1)" fill="#fff" textLength="330">100%</text></g></svg>

assets/img/scores/lighthouse_pwa.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="128" height="20" role="img" aria-label="lighthouse pwa: 42%"><title>lighthouse pwa: 42%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="128" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="93" height="20" fill="#555"/><rect x="93" width="35" height="20" fill="#fe7d37"/><rect width="128" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="475" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="830">lighthouse pwa</text><text x="475" y="140" transform="scale(.1)" fill="#fff" textLength="830">lighthouse pwa</text><text aria-hidden="true" x="1095" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="250">42%</text><text x="1095" y="140" transform="scale(.1)" fill="#fff" textLength="250">42%</text></g></svg>

assets/img/scores/lighthouse_seo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="132" height="20" role="img" aria-label="lighthouse seo: 100%"><title>lighthouse seo: 100%</title><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="132" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#r)"><rect width="89" height="20" fill="#555"/><rect x="89" width="43" height="20" fill="#4c1"/><rect width="132" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><text aria-hidden="true" x="455" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="790">lighthouse seo</text><text x="455" y="140" transform="scale(.1)" fill="#fff" textLength="790">lighthouse seo</text><text aria-hidden="true" x="1095" y="150" fill="#010101" fill-opacity=".3" transform="scale(.1)" textLength="330">100%</text><text x="1095" y="140" transform="scale(.1)" fill="#fff" textLength="330">100%</text></g></svg>

components/blocks-renderer.tsx

@@ -5,6 +5,9 @@ import { Hero } from "./blocks/hero";
 import { Testimonial } from "./blocks/testimonial";
 import { tinaField } from "tinacms/dist/react";
 import { Carousel } from "./blocks/carousel";
+import { ReactElement } from "react";
+import { Title } from "./blocks/title";
+import { FacebookPageTimeline } from "./blocks/facebook-page-timeline";
 
 export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
     return (
@@ -22,7 +25,15 @@ export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
     );
 };
 
-const Block = (block: PageBlocks) => {
+interface PageBlockProps<T = PageBlocks> {
+    data: T
+}
+
+export type PageBlockFunction<T = PageBlocks> = ({
+    data
+}: PageBlockProps<T>) => ReactElement;
+
+const Block = (block: PageBlocks): ReactElement<PageBlockProps, PageBlockFunction> => {
     switch (block.__typename) {
         case "PageBlocksContent":
             return <Content data={ block } />;
@@ -34,6 +45,10 @@ const Block = (block: PageBlocks) => {
             return <Testimonial data={ block } />;
         case "PageBlocksCarousel":
             return <Carousel data={ block } />;
+        case "PageBlocksTitle":
+            return <Title data={ block } />;
+        case "PageBlocksFacebookPageTimeline":
+            return <FacebookPageTimeline data={ block } />;
         default:
             return null;
     }

components/blocks/carousel.tsx

@@ -3,11 +3,38 @@ import { Section } from "../util/section";
 import { PageBlocksCarousel } from "../../tina/__generated__/types";
 import { Anchoring, anchoringSchema } from "../util/anchoring";
 import { Template } from "tinacms";
+import { PageBlockFunction } from "../blocks-renderer";
+import { Carousel as ReactCarousel } from "react-responsive-carousel";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
 
-export const Carousel = ({ data }: { data: PageBlocksCarousel }) => {
+/**
+ * Section carousel used for the main page but can be used everywhere
+ * @param {PageBlocksCarousel} data The data from the carousel
+ * @constructor
+ */
+export const Carousel: PageBlockFunction<PageBlocksCarousel> = ({
+    data
+}: { data: PageBlocksCarousel}): React.ReactElement => {
     return (
         <Section>
-            <div className="carousel flex w-[100%] items-end justify-center" style={ { backgroundImage: `url(${ data?.images?.[0] })` } }>
+            <div className="w-[100%]">
+                <ReactCarousel
+                    showArrows={ false }
+                    showStatus={ false }
+                    showThumbs={ false }
+                    showIndicators={ false }
+                    stopOnHover={ false }
+                    swipeable={ false }
+                    useKeyboardArrows={ false }
+                    autoPlay={ true }
+                    infiniteLoop={ true }
+                    dynamicHeight={ false }
+                    interval={ data.speed || 3000 }>
+                    { data?.images?.map(imageUrl => (
+                        <div key={ imageUrl } className="carousel-image" style={ { backgroundImage: `url(${ imageUrl })` } }/>
+                    )) }
+                </ReactCarousel>
+
                 { data?.link?.enabled && <Anchoring { ...data.link }/> }
             </div>
         </Section>);
@@ -23,6 +50,11 @@ export const carouselBlockSchema: Template = {
         defaultItem: [defaultCarousel, defaultCarousel, defaultCarousel]
     },
     fields: [
+        {
+            type: "number",
+            label: "Vitesse de défilement en millisecondes",
+            name: "speed"
+        },
         {
             type: "image",
             label: "Images du carousel",

components/blocks/content.tsx

@@ -2,22 +2,22 @@ import React from "react";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import type { Template, TinaTemplate } from "tinacms";
+import type { Template } from "tinacms";
 import { PageBlocksContent } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
+import { PageBlockFunction } from "../blocks-renderer";
+import richTextComponents, { richTextTemplates } from "../rich-text/rich-text-definitions";
 
-export const Content = ({ data }: { data: PageBlocksContent }) => {
+export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (
-        <Section color={ data.color }>
+        <Section>
             <Container
-                className={ `prose prose-lg ${
+                className={ "prose default-paragraph-style pb-4 pt-4" }
-                    data.color === "primary" ? "prose-primary" : "dark:prose-dark"
-                }` }
                 data-tina-field={ tinaField(data, "body") }
-                size="large"
+                size="custom"
-                width="medium"
+                width="large"
             >
-                <TinaMarkdown content={ data.body } />
+                <TinaMarkdown components={ richTextComponents } content={ data.body } />
             </Container>
         </Section>
     );
@@ -36,17 +36,9 @@ export const contentBlockSchema: Template = {
         {
             type: "rich-text",
             label: "Body",
-            name: "body"
+            name: "body",
-        },
+            templates: richTextTemplates,
-        {
+            isBody: true
-            type: "string",
-            label: "Color",
-            name: "color",
-            options: [
-                { label: "Default", value: "default" },
-                { label: "Tint", value: "tint" },
-                { label: "Primary", value: "primary" }
-            ]
         }
     ]
 };

components/blocks/facebook-page-timeline.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Container } from "../util/container";
+import { Section } from "../util/section";
+import type { Template } from "tinacms";
+import { PageBlockFunction } from "../blocks-renderer";
+import { PageBlocksFacebookPageTimeline } from "../../tina/__generated__/types";
+
+export const FacebookPageTimeline: PageBlockFunction<PageBlocksFacebookPageTimeline> = ({ data }) => {
+    return (
+        <Section>
+            <Container
+                className={ "mt-2 flex justify-center" }
+                size="custom"
+                width="large"
+            >
+                { data.page &&
+                <iframe
+                    src={ `https://www.facebook.com/plugins/page.php?href=${
+                        encodeURIComponent(data.page)
+                    }&tabs=timeline&width=500&height=500&small_header=false&adapt_container_width=true&hide_cover=false&show_facepile=true&appId` }
+                    width="500"
+                    height="500"
+                    style={ { border: "none", overflow: "hidden" } }
+                    scrolling="no"
+                    frameBorder="0"
+                    allowFullScreen={ true }
+                    allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"/> }
+            </Container>
+        </Section>
+    );
+};
+
+export const facebookPageTimelineBlockSchema: Template = {
+    name: "facebookPageTimeline",
+    label: "Plugin page facebook",
+    ui: {
+        defaultItem: {
+            page: ""
+        }
+    },
+    fields: [
+        {
+            type: "string",
+            label: "URL Page",
+            name: "page"
+        }
+    ]
+};

components/blocks/features.tsx

@@ -8,6 +8,7 @@ import {
 } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
 import { Template } from "tinacms";
+import { PageBlockFunction } from "../blocks-renderer";
 
 export const Feature = ({
     featuresColor,
@@ -49,7 +50,7 @@ export const Feature = ({
     );
 };
 
-export const Features = ({ data }: { data: PageBlocksFeatures }) => {
+export const Features: PageBlockFunction<PageBlocksFeatures> = ({ data }) => {
     return (
         <Section color={ data.color }>
             <Container

components/blocks/hero.tsx

@@ -3,22 +3,12 @@ import { Actions } from "../util/actions";
 import { Container } from "../util/container";
 import { Section } from "../util/section";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import type { Template, TinaTemplate } from "tinacms";
+import type { Template } from "tinacms";
 import { PageBlocksHero } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
+import { PageBlockFunction } from "../blocks-renderer";
 
-export const Hero = ({ data }: { data: PageBlocksHero }) => {
+export const Hero: PageBlockFunction<PageBlocksHero> = ({ data }) => {
-    const headlineColorClasses = {
-        blue: "from-blue-400 to-blue-600",
-        teal: "from-teal-400 to-teal-600",
-        green: "from-green-400 to-green-600",
-        red: "from-red-400 to-red-600",
-        pink: "from-pink-400 to-pink-600",
-        purple: "from-purple-400 to-purple-600",
-        orange: "from-orange-300 to-orange-600",
-        yellow: "from-yellow-400 to-yellow-600"
-    };
-
     return (
         <Section color={ data.color }>
             <Container

components/blocks/testimonial.tsx

@@ -4,55 +4,56 @@ import { Section } from "../util/section";
 import type { Template } from "tinacms";
 import { PageBlocksTestimonial } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
+import { PageBlockFunction } from "../blocks-renderer";
 
-export const Testimonial = ({ data }: { data: PageBlocksTestimonial }) => {
+export const Testimonial: PageBlockFunction<PageBlocksTestimonial> = ({ data }) => {
     return (
-    <Section color={data.color}>
+        <Section color={ data.color }>
             <Container size="large">
                 <blockquote>
                     <div
-            className={`relative z-10 max-w-3xl mx-auto text-4xl lg:text-5xl font-bold tracking-normal text-center title-font ${
+                        className={ `relative z-10 max-w-3xl mx-auto text-4xl lg:text-5xl font-bold tracking-normal text-center title-font ${
                             data.color === "primary"
-                ? `text-white`
+                                ? "text-white"
-                : `text-gray-700 dark:text-gray-50`
+                                : "text-gray-700 dark:text-gray-50"
-            }`}
+                        }` }
                     >
                         <span
-              className={`block opacity-15 text-8xl absolute inset-y-1/2 transform translate-y-2	-left-4 leading-4 -z-1`}
+                            className={ "block opacity-15 text-8xl absolute inset-y-1/2 transform translate-y-2	-left-4 leading-4 -z-1" }
                         >
               &ldquo;
                         </span>
                         <p
-              data-tina-field={tinaField(data, `quote`)}
+                            data-tina-field={ tinaField(data, "quote") }
                             className="relative opacity-95"
                         >
-              {data.quote}
+                            { data.quote }
                         </p>
                         <span
-              className={`block opacity-15 text-8xl absolute inset-y-1/2 transform translate-y-3	-right-4 leading-4 -z-1`}
+                            className={ "block opacity-15 text-8xl absolute inset-y-1/2 transform translate-y-3	-right-4 leading-4 -z-1" }
                         >
               &rdquo;
                         </span>
                     </div>
-          <div className={`my-8 flex-grow-0`}>
+                    <div className={ "my-8 flex-grow-0" }>
                         <span
-              className={`block mx-auto h-0.5 w-1/6 ${
+                            className={ `block mx-auto h-0.5 w-1/6 ${
                                 data.color === "primary"
-                  ? `bg-blue-600`
+                                    ? "bg-blue-600"
-                  : `bg-gray-200 dark:bg-gray-700`
+                                    : "bg-gray-200 dark:bg-gray-700"
-              }`}
+                            }` }
-            ></span>
+                        />
                     </div>
                     <footer className="text-center">
                         <p
-              data-tina-field={tinaField(data, `author`)}
+                            data-tina-field={ tinaField(data, "author") }
-              className={`tracking-wide title-font font-bold text-lg ${
+                            className={ `tracking-wide title-font font-bold text-lg ${
                                 data.color === "primary"
-                  ? `text-blue-200`
+                                    ? "text-blue-200"
-                  : `text-blue-500 dark:text-blue-300`
+                                    : "text-blue-500 dark:text-blue-300"
-              }`}
+                            }` }
                         >
-              {data.author}
+                            { data.author }
                         </p>
                     </footer>
                 </blockquote>
@@ -70,22 +71,22 @@ export const testimonialBlockSchema: Template = {
             quote:
         "There are only two hard things in Computer Science: cache invalidation and naming things.",
             author: "Phil Karlton",
-      color: "primary",
+            color: "primary"
-    },
+        }
     },
     fields: [
         {
             type: "string",
             ui: {
-        component: "textarea",
+                component: "textarea"
             },
             label: "Quote",
-      name: "quote",
+            name: "quote"
         },
         {
             type: "string",
             label: "Author",
-      name: "author",
+            name: "author"
         },
         {
             type: "string",
@@ -94,8 +95,8 @@ export const testimonialBlockSchema: Template = {
             options: [
                 { label: "Default", value: "default" },
                 { label: "Tint", value: "tint" },
-        { label: "Primary", value: "primary" },
+                { label: "Primary", value: "primary" }
-      ],
+            ]
-    },
+        }
-  ],
+    ]
 };

components/blocks/title.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Container } from "../util/container";
+import { Section } from "../util/section";
+import type { Template } from "tinacms";
+import { PageBlocksTitle } from "../../tina/__generated__/types";
+import { tinaField } from "tinacms/dist/react";
+import { PageBlockFunction } from "../blocks-renderer";
+
+enum titleSize {
+    h1 = "h1",
+    h2 = "h2",
+    h3 = "h3",
+    h4 = "h4"
+}
+
+export const Title: PageBlockFunction<PageBlocksTitle> = ({ data }) => {
+    return (
+        <Section>
+            <Container
+                className={ `prose default-text-color mt-2 title-block${ data?.size ? ` title-size-${ data.size }` : "" }` }
+
+                size="custom"
+                width="large"
+            >
+                <div className={ "title-block" }
+                    data-tina-field={ tinaField(data, "title") }>
+                    { data.title }
+                </div>
+            </Container>
+        </Section>
+    );
+};
+
+export const titleBlockSchema: Template = {
+    name: "title",
+    label: "Titre",
+    ui: {
+        previewSrc: "/blocks/content.png",
+        defaultItem: {
+            size: Object.values(titleSize)[0],
+            title: "Lorem ipsum"
+        }
+    },
+    fields: [
+        {
+            type: "string",
+            label: "Taille",
+            name: "size",
+            options: Object.values(titleSize)
+        },
+        {
+            type: "string",
+            label: "Texte",
+            name: "title"
+        }
+    ]
+};

components/layout/footer.tsx

@@ -0,0 +1,182 @@
+import React from "react";
+import { Container } from "../util/container";
+import { ObjectField } from "@tinacms/schema-tools/dist/types";
+import facebookImage from "../../public/icons/facebook.svg";
+import instagramImage from "../../public/icons/instagram.svg";
+import NextImage from "next/image";
+import { tinaField } from "tinacms/dist/react";
+import { TinaMarkdown } from "tinacms/dist/rich-text";
+import { GlobalFooter } from "../../tina/__generated__/types";
+
+export const Footer = ({ data }: { data: GlobalFooter }): React.ReactElement => {
+    return (
+        <footer>
+            <Container className="relative" size="small">
+                <div className={ "flex flex-row justify-between" }>
+                    <div>
+                        <p>
+                            <span data-tina-field={ tinaField(data?.contact, "label") }>
+                                { data?.contact?.label }
+                            </span>
+                            <br/>
+                            <a href={ `mailto:${ data?.contact?.mail }` }
+                                onClick={ () => { /* window.dataLayer.push({ event: "mail-click" });*/ } }
+                                data-tina-field={ tinaField(data?.contact, "mail") }>
+                                { data?.contact?.mail }
+                            </a>
+                            <br/>
+                            <b data-tina-field={ tinaField(data?.contact, "phone") }>
+                                { data?.contact?.phone }
+                            </b>
+                        </p>
+                        <p>
+                            SIRET <span data-tina-field={ tinaField(data?.legals, "siret") }>
+                                { data?.legals?.siret }
+                            </span>
+                            <br/>
+                            <a href={ data?.legals?.link?.url }
+                                data-tina-field={ tinaField(data?.legals, "link") }>
+                                { data?.legals?.link?.label }
+                            </a>
+                        </p>
+                        <div id="socials"
+                            className="flex flex-row"
+                            data-tina-field={ tinaField(data, "social") }>
+                            { data?.social?.facebook &&
+                                <a href={ data?.social?.facebook }
+                                    onClick={ () => { /* window.dataLayer.push({ socials: "fb-click" });*/ } }
+                                    className="py-2 me-2">
+                                    <NextImage src={ facebookImage } alt={ "Facebook" }/>
+                                </a> }
+
+                            { data?.social?.instagram &&
+                                <a href={ data?.social?.instagram }
+                                    onClick={ () => { /* window.dataLayer.push({ socials: "insta-click" });*/ } }
+                                    className="py-2">
+                                    <NextImage src={ instagramImage } alt={ "Facebook" }/>
+                                </a> }
+                        </div>
+                    </div>
+                    <div>
+                        <div className="flex flex-row" data-tina-field={ tinaField(data, "copyright") }>
+                            &copy; { data?.copyright?.year }
+                            { data?.copyright?.subtext?.children?.length > 0 &&
+                                <> &#8211;<span className={ "ml-1" }>
+                                    <TinaMarkdown content={ data.copyright?.subtext } />
+                                </span>
+                                </> }
+                        </div>
+                    </div>
+                </div>
+            </Container>
+        </footer>
+    );
+};
+
+export const footerSchema: ObjectField = {
+    type: "object",
+    label: "Footer",
+    name: "footer",
+    fields: [
+        {
+            type: "object",
+            label: "Contact",
+            name: "contact",
+            defaultItem: {
+                label: "Contact :",
+                mail: "mail@example.com",
+                phone: "00 00 00 00 00"
+            },
+            fields: [
+                {
+                    type: "string",
+                    label: "Label Contact",
+                    name: "label"
+                },
+                {
+                    type: "string",
+                    label: "Mail",
+                    name: "mail"
+                },
+                {
+                    type: "string",
+                    label: "Téléphone",
+                    name: "phone"
+                }
+            ]
+        },
+        {
+            type: "object",
+            label: "Legal",
+            name: "legals",
+            defaultItem: {
+                siret: "000 000 000 00000",
+                link: {
+                    label: "Mentions légales",
+                    url: "/"
+                }
+            },
+            fields: [
+                {
+                    type: "string",
+                    label: "SIRET",
+                    name: "siret"
+                },
+                {
+                    type: "object",
+                    label: "Lien Mentions Légales",
+                    name: "link",
+                    fields: [
+                        {
+                            type: "string",
+                            label: "Texte",
+                            name: "label"
+                        },
+                        {
+                            type: "string",
+                            label: "Url",
+                            name: "url"
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            type: "object",
+            label: "Copyright",
+            name: "copyright",
+            defaultItem: {
+                year: "0000",
+                subtext: "El text"
+            },
+            fields: [
+                {
+                    type: "string",
+                    label: "Année",
+                    name: "year"
+                },
+                {
+                    type: "rich-text",
+                    label: "Sous-texte",
+                    name: "subtext"
+                }
+            ]
+        },
+        {
+            type: "object",
+            label: "Social Links",
+            name: "social",
+            fields: [
+                {
+                    type: "string",
+                    label: "Facebook",
+                    name: "facebook"
+                },
+                {
+                    type: "string",
+                    label: "Instagram",
+                    name: "instagram"
+                }
+            ]
+        }]
+};

components/layout/footer/footer.tsx

@@ -1,146 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa";
-import { AiFillInstagram } from "react-icons/ai";
-import { Container } from "../../util/container";
-import { RawRenderer } from "./rawRenderer";
-import { ObjectField } from "@tinacms/schema-tools/dist/types";
-
-export const Footer = ({ data, rawData }) => {
-    const socialIconClasses = "h-7 w-auto";
-    const socialIconColorClasses = {
-        blue: "text-blue-500 dark:text-blue-400 hover:text-blue-300",
-        teal: "text-teal-500 dark:text-teal-400 hover:text-teal-300",
-        green: "text-green-500 dark:text-green-400 hover:text-green-300",
-        red: "text-red-500 dark:text-red-400 hover:text-red-300",
-        pink: "text-pink-500 dark:text-pink-400 hover:text-pink-300",
-        purple: "text-purple-500 dark:text-purple-400 hover:text-purple-300",
-        orange: "text-orange-500 dark:text-orange-400 hover:text-orange-300",
-        yellow: "text-yellow-500 dark:text-yellow-400 hover:text-yellow-300",
-        primary: "text-white opacity-80 hover:opacity-100"
-    };
-
-    const footerColor = {
-        default:
-      "text-gray-800 from-white to-gray-50 dark:from-gray-900 dark:to-gray-1000",
-        primary: {
-            blue: "text-white from-blue-500 to-blue-700",
-            teal: "text-white from-teal-500 to-teal-600",
-            green: "text-white from-green-500 to-green-600",
-            red: "text-white from-red-500 to-red-600",
-            pink: "text-white from-pink-500 to-pink-600",
-            purple: "text-white from-purple-500 to-purple-600",
-            orange: "text-white from-orange-500 to-orange-600",
-            yellow: "text-white from-yellow-500 to-yellow-600"
-        }
-    };
-
-    const footerColorCss = footerColor.default;
-
-    return (
-        <footer className={ `bg-gradient-to-br ${ footerColorCss }` }>
-            <Container className="relative" size="small">
-                <div className="flex justify-between items-center gap-6 flex-wrap">
-                    <Link
-                        href="/"
-                        className="group mx-2 flex items-center font-bold tracking-tight text-gray-400 dark:text-gray-300 opacity-50 hover:opacity-100 transition duration-150 ease-out whitespace-nowrap"
-                    />
-                    <div className="flex gap-4">
-                        { data.social && data.social.facebook && (
-                            <a
-                                className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
-                                href={ data.social.facebook }
-                                target="_blank"
-                            >
-                                <FaFacebookF
-                                    className={ `${ socialIconClasses } ${
-                                        socialIconColorClasses.primary
-                                    }` }
-                                />
-                            </a>
-                        ) }
-                        { data.social && data.social.twitter && (
-                            <a
-                                className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
-                                href={ data.social.twitter }
-                                target="_blank"
-                            >
-                                <FaTwitter
-                                    className={ `${ socialIconClasses } ${
-                                        socialIconColorClasses.primary
-                                    }` }
-                                />
-                            </a>
-                        ) }
-                        { data.social && data.social.instagram && (
-                            <a
-                                className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
-                                href={ data.social.instagram }
-                                target="_blank"
-                            >
-                                <AiFillInstagram
-                                    className={ `${ socialIconClasses } ${
-                                        socialIconColorClasses.primary
-                                    }` }
-                                />
-                            </a>
-                        ) }
-                        { data.social && data.social.github && (
-                            <a
-                                className="inline-block opacity-80 hover:opacity-100 transition ease-out duration-150"
-                                href={ data.social.github }
-                                target="_blank"
-                            >
-                                <FaGithub
-                                    className={ `${ socialIconClasses } ${
-                                        socialIconColorClasses.primary
-                                    }` }
-                                />
-                            </a>
-                        ) }
-                    </div>
-                    <RawRenderer parentColor={ data.color } rawData={ rawData } />
-                </div>
-                <div
-                    className={ `absolute h-1 bg-gradient-to-r from-transparent ${
-                        data.color === "primary" ? "via-white" : "via-black dark:via-white"
-                    } to-transparent top-0 left-4 right-4 opacity-5` }
-                />
-            </Container>
-        </footer>
-    );
-};
-
-export const footerSchema: ObjectField = {
-    type: "object",
-    label: "Footer",
-    name: "footer",
-    fields: [
-        {
-            type: "object",
-            label: "Social Links",
-            name: "social",
-            fields: [
-                {
-                    type: "string",
-                    label: "Facebook",
-                    name: "facebook"
-                },
-                {
-                    type: "string",
-                    label: "Twitter",
-                    name: "twitter"
-                },
-                {
-                    type: "string",
-                    label: "Instagram",
-                    name: "instagram"
-                },
-                {
-                    type: "string",
-                    label: "Github",
-                    name: "github"
-                }
-            ]
-        }]
-};

components/layout/footer/index.tsx

@@ -1 +0,0 @@
-export { Footer } from "./footer";

components/layout/footer/rawRenderer.tsx

@@ -1,92 +0,0 @@
-import React from "react";
-import { Fragment, useState } from "react";
-import { Dialog, Transition } from "@headlessui/react";
-
-export const RawRenderer = ({ rawData, parentColor }) => {
-    const buttonColorClasses = {
-        blue: "text-blue-500",
-        teal: "text-teal-500",
-        green: "text-green-500",
-        red: "text-red-500",
-        pink: "text-pink-500",
-        purple: "text-purple-500",
-        orange: "text-orange-500",
-        yellow: "text-yellow-600"
-    };
-    const [isOpen, setIsOpen] = useState(false);
-
-    function closeModal() {
-        setIsOpen(false);
-    }
-
-    function openModal() {
-        setIsOpen(true);
-    }
-
-    return (
-        <>
-            <button
-                type="button"
-                onClick={ openModal }
-                className={ `z-10 relative flex items-center px-5 py-2 mx-3 my-2 font-semibold shadow-sm text-sm transition duration-150 ease-out rounded transform focus:shadow-outline focus:outline-none whitespace-nowrap opacity-80 hover:opacity-100 shadow-md ${
-                    buttonColorClasses[buttonColorClasses.blue]
-                }` }
-            >
-        View Raw Data
-                <span
-                    className={ `absolute w-full h-full left-0 top-0 rounded -z-1 ${
-                        parentColor === "primary"
-                            ? "bg-white opacity-80"
-                            : "bg-current opacity-15"
-                    }` }
-                />
-            </button>
-            <Transition appear show={ isOpen } as={ Fragment }>
-                <Dialog
-                    as="div"
-                    className="fixed inset-0 z-10 overflow-y-auto"
-                    onClose={ closeModal }
-                >
-                    <div className="min-h-screen max-h-screen px-4 py-12 text-center flex flex-col items-center justify-center">
-                        <Transition.Child
-                            as={ Fragment }
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0"
-                            enterTo="opacity-100"
-                            leave="ease-out duration-300"
-                            leaveFrom="opacity-100"
-                            leaveTo="opacity-0"
-                        >
-                            <div className="">
-                                <Dialog.Overlay className="fixed inset-0 bg-gradient-to-br from-gray-800 to-gray-1000 opacity-80" />
-                            </div>
-                        </Transition.Child>
-
-                        <Transition.Child
-                            as={ Fragment }
-                            enter="ease-out duration-300"
-                            enterFrom="opacity-0 scale-95"
-                            enterTo="opacity-100 scale-100"
-                            leave="ease-in duration-200"
-                            leaveFrom="opacity-100 scale-100"
-                            leaveTo="opacity-0 scale-95"
-                        >
-                            <div className="flex-1 w-full prose dark:prose-dark max-w-3xl p-6 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-1000 shadow-xl rounded-xl inline-flex flex-col max-h-full">
-                                <pre className="flex-1 overflow-y-auto">
-                                    <code>{ JSON.stringify(rawData, null, 2) }</code>
-                                </pre>
-                                <button
-                                    type="button"
-                                    className="flex-0 font-semibold text-lg transition duration-150 ease-out opacity-80 hover:opacity-100"
-                                    onClick={ closeModal }
-                                >
-                  Great, thanks!
-                                </button>
-                            </div>
-                        </Transition.Child>
-                    </div>
-                </Dialog>
-            </Transition>
-        </>
-    );
-};

components/layout/header.tsx

@@ -1,13 +1,23 @@
-import React from "react";
+import React, { useState } from "react";
 import Link from "next/link";
 import { tinaField } from "tinacms/dist/react";
 import defaultLogo from "../../public/logo.png";
 import { GlobalHeader } from "../../tina/__generated__/types";
 import { ObjectField } from "@tinacms/schema-tools/dist/types";
 
-export const Header = ({ data }: { data: GlobalHeader }) => {
+export const Header = ({ data }: { data: GlobalHeader }): React.ReactElement => {
+    const [expanded, setExpanded] = useState(false);
+    const navbarToggler: React.ReactElement = (
+        <button
+            className="navbar-toggler"
+            type="button"
+            onClick={ () => { setExpanded(!expanded); } }
+            aria-label="Toggle navigation">
+            <span className="navbar-toggler-icon" />
+        </button>
+    );
     return (
-        <nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
+        <nav className={ `navbar${ expanded ? " navbar-expanded": "" } flex flex-wrap content-between sticky top-0 py-2` }>
             <div className="flex grow justify-between px-6 h-full">
                 <div className="flex navbar-brand">
                     <Link
@@ -21,19 +31,10 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                         </div>
                     </Link>
                 </div>
-                <button className="navbar-toggler" type="button" data-bs-toggle="collapse"
+                { navbarToggler }
-                    data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
+                <ul className="navbar-items">
-                    aria-label="Toggle navigation">
-                    <span className="navbar-toggler-icon" />
-                </button>
-                <div className={ "flex items-center" } id="navbarSupportedContent">
-                    <ul className="flex md:flex-row">
                     { data.nav &&
               data.nav.map((item, i) => {
-                  /* const activeItem =
-                  (item.href === ""
-                    ? router.asPath === "/"
-                    : router.asPath.includes(item.href)) && isClient;*/
                   return (
                       <li
                           key={ `${ item.label }-${ i }` }
@@ -43,6 +44,7 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
                               data-tina-field={ tinaField(item, "label") }
                               href={ `${ item.external? "" : "/" }${ item.href }` }
                               className={ `nav-link p-2 ${ item.external ? "external-link-icon" : "" }` }
+                              onClick={ () => setExpanded(false) }
                           >
                               { item.label }
                           </Link>
@@ -51,7 +53,6 @@ export const Header = ({ data }: { data: GlobalHeader }) => {
               }) }
                 </ul>
             </div>
-            </div>
         </nav>
     );
 };

components/layout/index.tsx

@@ -1 +0,0 @@
-export { Layout } from "./layout";

components/layout/layout.tsx

@@ -28,16 +28,13 @@ 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">
+                <div className="flex-1 flex flex-col">
                     { children }
                 </div>
-                <Footer
+                <Footer data={ data?.footer } />
-                    rawData={ rawData }
-                    data={ data?.footer }
-                />
             </div>
         </>
     );

components/posts/post.tsx

@@ -16,116 +16,11 @@ import { Container } from "../util/container";
 import { Section } from "../util/section";
 import format from "date-fns/format";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
-import { Prism } from "tinacms/dist/rich-text/prism";
-import type { TinaMarkdownContent, Components } from "tinacms/dist/rich-text";
 import { PostType } from "../../pages/posts/[filename]";
 import { tinaField } from "tinacms/dist/react";
-
+import richTextComponents from "../rich-text/rich-text-definitions";
-const components: Components<{
-  BlockQuote: {
-    children: TinaMarkdownContent;
-    authorName: string;
-  };
-  DateTime: {
-    format?: string;
-  };
-  NewsletterSignup: {
-    placeholder: string;
-    buttonText: string;
-    children: TinaMarkdownContent;
-    disclaimer?: TinaMarkdownContent;
-  };
-}> = {
-    code_block: (props) => <Prism { ...props } />,
-    BlockQuote: (props: {
-    children: TinaMarkdownContent;
-    authorName: string;
-  }) => {
-        return (
-            <div>
-                <blockquote>
-                    <TinaMarkdown content={ props.children } />
-                    { props.authorName }
-                </blockquote>
-            </div>
-        );
-    },
-    DateTime: (props) => {
-        const dt = React.useMemo(() => {
-            return new Date();
-        }, []);
-
-        switch (props.format) {
-            case "iso":
-                return <span>{ format(dt, "yyyy-MM-dd") }</span>;
-            case "utc":
-                return <span>{ format(dt, "eee, dd MMM yyyy HH:mm:ss OOOO") }</span>;
-            case "local":
-                return <span>{ format(dt, "P") }</span>;
-            default:
-                return <span>{ format(dt, "P") }</span>;
-        }
-    },
-    NewsletterSignup: (props) => {
-        return (
-            <div className="bg-white">
-                <div className="max-w-7xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
-                    <div className="">
-                        <TinaMarkdown content={ props.children } />
-                    </div>
-                    <div className="mt-8 ">
-                        <form className="sm:flex">
-                            <label htmlFor="email-address" className="sr-only">
-                Email address
-                            </label>
-                            <input
-                                id="email-address"
-                                name="email-address"
-                                type="email"
-                                autoComplete="email"
-                                required
-                                className="w-full px-5 py-3 border border-gray-300 shadow-sm placeholder-gray-400 focus:ring-1 focus:ring-teal-500 focus:border-teal-500 sm:max-w-xs rounded-md"
-                                placeholder={ props.placeholder }
-                            />
-                            <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3 sm:flex-shrink-0">
-                                <button
-                                    type="submit"
-                                    className="w-full flex items-center justify-center py-3 px-5 border border-transparent text-base font-medium rounded-md text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500"
-                                >
-                                    { props.buttonText }
-                                </button>
-                            </div>
-                        </form>
-                        <div className="mt-3 text-sm text-gray-500">
-                            { props.disclaimer && <TinaMarkdown content={ props.disclaimer } /> }
-                        </div>
-                    </div>
-                </div>
-            </div>
-        );
-    },
-    img: (props) => (
-        <span className="flex items-center justify-center">
-            <img src={ props.url } alt={ props.alt } />
-        </span>
-    )
-};
 
 export const Post = (props: PostType) => {
-    const titleColorClasses = {
-        blue: "from-blue-400 to-blue-600 dark:from-blue-300 dark:to-blue-500",
-        teal: "from-teal-400 to-teal-600 dark:from-teal-300 dark:to-teal-500",
-        green: "from-green-400 to-green-600",
-        red: "from-red-400 to-red-600",
-        pink: "from-pink-300 to-pink-500",
-        purple:
-      "from-purple-400 to-purple-600 dark:from-purple-300 dark:to-purple-500",
-        orange:
-      "from-orange-300 to-orange-600 dark:from-orange-200 dark:to-orange-500",
-        yellow:
-      "from-yellow-400 to-yellow-500 dark:from-yellow-300 dark:to-yellow-500"
-    };
-
     const date = new Date(props.date);
     let formattedDate = "";
     if (!isNaN(date.getTime())) {
@@ -202,7 +97,7 @@ export const Post = (props: PostType) => {
                     data-tina-field={ tinaField(props, "_body") }
                     className="prose dark:prose-dark w-full max-w-none"
                 >
-                    <TinaMarkdown components={ components } content={ props._body } />
+                    <TinaMarkdown components={ richTextComponents } content={ props._body } />
                 </div>
             </Container>
         </Section>

components/rich-text/block-quote.tsx

@@ -0,0 +1,35 @@
+import { TinaMarkdown, TinaMarkdownContent } from "tinacms/dist/rich-text";
+import { RichTextTemplate } from "@tinacms/schema-tools";
+import React from "react";
+
+export interface BlockQuoteProps {
+    children: TinaMarkdownContent;
+    authorName: string;
+}
+
+const BlockQuote = (props: BlockQuoteProps): React.ReactElement => (
+    <div>
+        <blockquote>
+            <TinaMarkdown content={ props.children } />
+            { props.authorName }
+        </blockquote>
+    </div>);
+
+export const blockQuoteSchema: RichTextTemplate = {
+    name: "BlockQuote",
+    label: "Block Quote",
+    fields: [
+        {
+            name: "children",
+            label: "Quote",
+            type: "rich-text"
+        },
+        {
+            name: "authorName",
+            label: "Author",
+            type: "string"
+        }
+    ]
+};
+
+export default BlockQuote;

components/rich-text/date-time.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import format from "date-fns/format";
+import { RichTextTemplate } from "@tinacms/schema-tools";
+
+export interface DateTimeProps {
+    format?: string;
+}
+
+const DateTime = (props: DateTimeProps) => {
+    const dt = React.useMemo(() => {
+        return new Date();
+    }, []);
+
+    switch (props.format) {
+        case "iso":
+            return <span>{ format(dt, "yyyy-MM-dd") }</span>;
+        case "utc":
+            return <span>{ format(dt, "eee, dd MMM yyyy HH:mm:ss OOOO") }</span>;
+        case "local":
+            return <span>{ format(dt, "P") }</span>;
+        default:
+            return <span>{ format(dt, "P") }</span>;
+    }
+};
+
+export const dateTimeSchema: RichTextTemplate = {
+    name: "DateTime",
+    label: "Date & Time",
+    inline: true,
+    fields: [
+        {
+            name: "format",
+            label: "Format",
+            type: "string",
+            options: ["utc", "iso", "local"]
+        }
+    ] };
+
+export default DateTime;

components/rich-text/image.tsx

@@ -0,0 +1,135 @@
+import { TinaMarkdownContent } from "tinacms/dist/rich-text";
+import { RichTextTemplate } from "@tinacms/schema-tools";
+import { tinaField } from "tinacms/dist/react";
+
+enum imageSize {
+    extraSmall = "extra-small",
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+
+enum imageDecorations {
+    default = "default",
+    noStyle = "no-style"
+}
+
+enum imagePosition {
+    left = "left",
+    middle = "middle",
+    right = "right"
+}
+
+export interface ImageProps {
+    children: TinaMarkdownContent;
+    size: imageSize;
+    imageUrl: string,
+    decorations: imageDecorations,
+    position: imagePosition,
+    inline: boolean,
+    alt: string
+}
+
+
+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.extraSmall:
+                return "xs-size";
+            case imageSize.small:
+                return "sm-size";
+            case imageSize.medium:
+                return "md-size";
+            case imageSize.large:
+                return "lg-size";
+            default:
+                return undefined;
+        }
+    };
+
+    const getPositionTypeClass = (): string | undefined => {
+        switch (props.position) {
+            case imagePosition.left:
+                return (props.inline) ? "float-left mr-2" : "flex justify-start";
+            case imagePosition.middle:
+                return "flex justify-center";
+            case imagePosition.right:
+                return (props.inline) ? "float-right ml-2" : "flex justify-end";
+            default:
+                return undefined;
+        }
+    };
+
+    const getClassNameWithSpace = (className: string): string => `${ className ? ` ${ className }` : "" }`;
+
+    const decorationTypeClass = getDecorationTypeClass();
+
+    const sizeTypeClass = getSizeTypeClass();
+
+    const positionTypeClass = getPositionTypeClass();
+
+    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>);
+};
+
+export const imageSchema: RichTextTemplate = {
+    name: "Image",
+    label: "Advanced Image",
+    ui: {
+        defaultItem: {
+            size: Object.values(imageSize)[0],
+            decorations: Object.values(imageDecorations)[0]
+        }
+    },
+    fields: [
+        {
+            name: "size",
+            label: "Size",
+            type: "string",
+            options: Object.values(imageSize)
+        },
+        {
+            name: "position",
+            label: "Position",
+            type: "string",
+            options: Object.values(imagePosition)
+        },
+        {
+            name: "imageUrl",
+            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"
+        }
+    ] };
+
+export default Image;

components/rich-text/rich-text-definitions.tsx

@@ -0,0 +1,48 @@
+import { Components } from "tinacms/dist/rich-text";
+import BlockQuote, { BlockQuoteProps, blockQuoteSchema } from "./block-quote";
+import DateTime, { DateTimeProps, dateTimeSchema } from "./date-time";
+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 richTextComponents: Components<{
+    BlockQuote: BlockQuoteProps;
+    DateTime: DateTimeProps;
+    Image: ImageProps;
+}> = {
+    code_block: (props) => <Prism { ...props } />,
+    html: HTMLInline,
+    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,
+    Image
+};
+
+export const richTextTemplates: RichTextTemplate[] = [
+    dateTimeSchema,
+    blockQuoteSchema,
+    imageSchema
+];
+
+export default richTextComponents;

components/util/anchoring.tsx

@@ -8,7 +8,12 @@ interface AnchoringProps {
   linkTo?: string // Default: #main-page
 }
 
-export const Anchoring = (props: AnchoringProps) => {
+/**
+ * Made to be used with the carousel
+ * @param {AnchoringProps} props Props for the anchoring.
+ * @return {ReactElement} The function component
+ */
+export const Anchoring: React.FC<AnchoringProps> = (props) => {
     const [opacity, setOpacity] = useState(1);
     const anchoringRef = useRef<HTMLDivElement>(null);
 
@@ -43,7 +48,7 @@ export const Anchoring = (props: AnchoringProps) => {
             ref={ anchoringRef }
             style={ { opacity: opacity } }
         >
-            <a onClick={ handleScrollClick }>
+            <a role="button" onClick={ handleScrollClick }>
                 <h1 data-tina-field={ tinaField(props, "text") }>{ props.text }</h1>
                 <img
                     src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjI1OCAxNi4yNDItNi02YTEuMDUgMS4wNSAwIDEgMSAxLjQ4NC0xLjQ4NEwxMiAxNC4wMTVsNS4yNTgtNS4yNTdhMS4wNSAxLjA1IDAgMSAxIDEuNDg0IDEuNDg0bC02IDZhMS4wNSAxLjA1IDAgMCAxLTEuNDg0IDBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg=="/>

components/util/container.tsx

@@ -17,7 +17,7 @@ export const Container = ({
     const widthClass = {
         small: "max-w-4xl",
         medium: "max-w-5xl",
-        large: "max-w-7xl",
+        large: "container-large",
         custom: ""
     };
 

content/global/index.json

@@ -14,7 +14,7 @@
         "label": "Qui suis-je ?"
       },
       {
-        "href": "posts",
+        "href": "art-therapie",
         "label": "Art-thérapie"
       },
       {
@@ -25,15 +25,25 @@
     ]
   },
   "footer": {
-    "social": {
+    "contact": {
-      "facebook": "/",
+      "label": "Contact :",
-      "twitter": "/",
+      "mail": "psychartherapie@gmail.com",
-      "instagram": "/"
+      "phone": "06 49 23 02 90"
+    },
+    "legals": {
+      "siret": "911 883 338 00012",
+      "link": {
+        "label": "Mentions légales",
+        "url": "/legals"
       }
     },
-  "theme": {
+    "copyright": {
-    "color": "blue",
+      "year": "2023",
-    "font": "sans",
+      "subtext": "Fait avec amour par [Nolwenn Meyer](https://www.linkedin.com/in/nolwenn-meyer/ \"Nolwenn Meyer\")"
-    "darkMode": "system"
+    },
+    "social": {
+      "facebook": "https://www.facebook.com/psychartherapie.gard",
+      "instagram": "https://www.instagram.com/psychartherapie"
+    }
   }
 }

content/pages/about.mdx

@@ -1,8 +1,15 @@
 ---
-title: About
+title: Qui suis-je
 blocks:
-  - body: >
+  - size: h1
-      ![](/uploads/photo.jpg)
+    title: Qui suis-je
+    _template: title
+  - withTitle: false
+    title: ''
+    body: >
+      <Image size="small" decorations="default" position="right"
+      imageUrl="/uploads/photo.jpg" inline={true} />
+
 
       Je suis **psychopraticienne en art-thérapie** et mon approche est issue de
       la **psychologie intégrative**, autrement dit, je m’intéresse à l’ensemble
@@ -80,8 +87,28 @@ blocks:
       Maintenant, c’est à votre tour de vous présenter à moi, si vous le
       souhaitez, n’hésitez pas à me **contacter** par **téléphone, par mail ou
       via les réseaux sociaux** !
-    color: default
     _template: content
+url: aboutt
 ---
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

content/pages/art-therapie.mdx

@@ -0,0 +1,51 @@
+---
+title: L'Art-Thérapie
+blocks:
+  - size: h1
+    title: L'Art-Thérapie
+    _template: title
+  - withTitle: false
+    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
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

content/pages/home.md

@@ -1,81 +0,0 @@
----
-title: Accueil
-blocks:
-  - images:
-      - /uploads/unsplash-75EFpyXu3Wg.jpg
-      - /uploads/tina-cloud-starter-preview.png
-    link:
-      enabled: true
-      text: Découvrez-en plus !
-      linkTo: main-page
-    _template: carousel
-  - headline: Welcome to the Tina Starter
-    text: >
-      This project is set up to show you the basics of working with Tina. You're
-      looking at the landing page, which pulls content from
-      `content/pages/home.md`, components from components/blocks, and puts them
-      all together in `pages/[filename].tsx`, all based on a config
-      `tina/config.tsx`.
-    actions:
-      - label: Get Started
-        type: button
-        icon: true
-        link: /posts
-      - label: Read Blog
-        type: link
-        icon: false
-        link: /posts
-    image:
-      src: /uploads/unsplash-75EFpyXu3Wg.jpg
-      alt: >-
-        Photo of palm trees at sunset by Adam Birkett -
-        unsplash.com/photos/75EFpyXu3Wg
-    color: default
-    _template: hero
-  - items:
-      - icon:
-          name: BiCodeBlock
-          color: red
-          style: float
-        title: Amazing Feature
-        text: >-
-          Aliquam blandit felis rhoncus, eleifend ipsum in, condimentum nibh.
-          Praesent ac faucibus risus, eu lacinia enim.
-      - icon:
-          name: BiLike
-          color: primary
-          style: float
-        title: This Is a Feature
-        text: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
-      - icon:
-          name: BiPalette
-          color: green
-          style: float
-        title: Configurable Theme
-        text: >-
-          Edit global theme configuration with Tina. Change your theme's primary
-          color, font, or icon set.
-    color: tint
-    _template: features
-  - quote: >-
-      There are only two hard things in Computer Science: cache invalidation and
-      naming things.
-    author: Phil Karlton
-    color: primary
-    _template: testimonial
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-

content/pages/home.mdx

@@ -0,0 +1,170 @@
+---
+title: Accueil
+blocks:
+  - speed: 8000
+    images:
+      - /uploads/painting2.jpg
+      - /uploads/painting1.jpg
+      - /uploads/painting10.jpg
+    link:
+      enabled: true
+      text: Découvrez-en plus !
+      linkTo: main-page
+    _template: carousel
+  - body: >
+      <div class="not-prose text-center text-4xl">
+        <h1>Découvrez la PsychARThérapie,<br />Quand l’art dévoile ce qui se cache en vous !</h1>
+      </div>
+
+
+      <Image size="medium" decorations="default" position="middle"
+      imageUrl="/uploads/etoile.jpg" />
+
+
+      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
+  - size: h2
+    title: Tarif et horaires
+    _template: title
+  - body: >
+      Séance individuelle tout public.\
+
+      Séance de 60 minutes d’accompagnement/soutien thérapeutique avec
+      médiations artistiques : **50€**
+    _template: content
+  - size: h2
+    title: Où se trouve mon cabinet ?
+    _template: title
+  - size: h2
+    title: Dernières nouvelles
+    _template: title
+  - page: 'https://www.facebook.com/psychartherapie.gard'
+    _template: facebookPageTimeline
+url: home
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

content/pages/hometwo.mdx

@@ -1,61 +0,0 @@
----
-title: Tina Cloud Starter
-blocks:
-  - headline: Welcome to the Tina Starter
-    text: >
-      This project is set up to show you the basics of working with Tina. You're
-      looking at the landing page, which pulls content from
-      `content/pages/home.md`, components from components/blocks, and puts them
-      all together in `pages/[filename].tsx`, all based on a config
-      `tina/config.tsx`.
-    actions:
-      - label: Get Started
-        type: button
-        icon: true
-        link: /posts
-      - label: Read Blog
-        type: link
-        icon: false
-        link: /posts
-    image:
-      src: /uploads/unsplash-75EFpyXu3Wg.jpg
-      alt: >-
-        Photo of palm trees at sunset by Adam Birkett -
-        unsplash.com/photos/75EFpyXu3Wg
-    color: default
-    _template: hero
-  - items:
-      - icon:
-          name: BiCodeBlock
-          color: red
-          style: float
-        title: Amazing Feature
-        text: >-
-          Aliquam blandit felis rhoncus, eleifend ipsum in, condimentum nibh.
-          Praesent ac faucibus risus, eu lacinia enim.
-      - icon:
-          name: BiLike
-          color: primary
-          style: float
-        title: This Is a Feature
-        text: Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.
-      - icon:
-          name: BiPalette
-          color: green
-          style: float
-        title: Configurable Theme
-        text: >-
-          Edit global theme configuration with Tina. Change your theme's primary
-          color, font, or icon set.
-    color: tint
-    _template: features
-  - quote: >-
-      There are only two hard things in Computer Science: cache invalidation and
-      naming things.
-    author: Phil Karlton
-    color: primary
-    _template: testimonial
----
-
-Yo
-

content/pages/legals.mdx

@@ -0,0 +1,632 @@
+---
+title: Mentions Légales
+blocks:
+  - body: >
+      # RGPD
+
+
+      ## Définitions
+
+
+      **Client :** tout professionnel ou personne physique capable au sens des
+      articles 1123 et suivants du Code civil, ou personne morale, qui visite le
+      Site objet des présentes conditions générales.\
+
+      **Prestations et Services :** [https://www
+      .psychartherapie.fr](https://www.psychartherapie.fr) met à disposition des
+      Clients :
+
+
+      **Contenu :** Ensemble des éléments constituants l’information présente
+      sur le Site, notamment textes – images – vidéos.
+
+
+      **Informations clients :** Ci après dénommé « Information (s) » qui
+      correspondent à l’ensemble des données personnelles susceptibles d’être
+      détenues par
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) pour la
+      gestion de votre compte, de la gestion de la relation client et à des fins
+      d’analyses et de statistiques.
+
+
+      **Utilisateur :** Internaute se connectant, utilisant le site susnommé.
+
+
+      **Informations personnelles :** « Les informations qui permettent, sous
+      quelque forme que ce soit, directement ou non, l'identification des
+      personnes physiques auxquelles elles s'appliquent » (article 4 de la loi
+      n° 78-17 du 6 janvier 1978).
+
+
+      Les termes « données à caractère personnel », « personne concernée », «
+      sous traitant » et « données sensibles » ont le sens défini par le
+      Règlement Général sur la Protection des Données (RGPD : n° 2016-679)
+
+
+      ## 1. Présentation du site internet.
+
+
+      En vertu de l'article 6 de la loi n° 2004-575 du 21 juin 2004 pour la
+      confiance dans l'économie numérique, il est précisé aux utilisateurs du
+      site internet \[https://www.psychartherapie.fr]\(https://www
+
+      .psychartherapie.fr) l'identité des différents intervenants dans le cadre
+      de sa réalisation et de son suivi:
+
+
+      **Propriétaire** : SCOP SARL Pauline Vince – 1b Rue René Cordilhac 30190
+      La Calmette\
+
+      **Responsable publication** : Pauline Vince – psychartherapie@gmail .com\
+
+      Le responsable publication est une personne physique ou une personne
+      morale.\
+
+      **Webmaster** : Alexandre Vince – Reavax@gmail.com\
+
+      **Hébergeur** : ovh – 2 rue Kellermann 59100 Roubaix 1007\
+
+      **Délégué à la protection des données** : Référent RGPD de Mine de Talents
+      – rgpd@minedetalents.fr
+
+
+      ## 2. Conditions générales d’utilisation du site et des services proposés.
+
+
+      Le Site constitue une œuvre de l’esprit protégée par les dispositions du
+      Code de la Propriété Intellectuelle et des Réglementations Internationales
+      applicables. Le Client ne peut en aucune manière réutiliser, céder ou
+      exploiter pour son propre compte tout ou partie des éléments ou travaux du
+      Site.
+
+
+      L’utilisation du site [https://www
+      .psychartherapie.fr](https://www.psychartherapie.fr) implique
+      l’acceptation pleine et entière des conditions générales d’utilisation
+      ci-après décrites. Ces conditions d’utilisation sont susceptibles d’être
+      modifiées ou complétées à tout moment, les utilisateurs du site
+      \[https://www.psychartherapie.fr]\(https://www.psychartherapie
+
+      .fr) sont donc invités à les consulter de manière régulière.
+
+
+      Ce site internet est normalement accessible à tout moment aux
+      utilisateurs. Une interruption pour raison de maintenance technique peut
+      être toutefois décidée par
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr), qui
+      s’efforcera alors de communiquer préalablement aux utilisateurs les dates
+      et heures de l’intervention. Le site web
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) est mis à
+      jour régulièrement par [https://www
+      .psychartherapie.fr](https://www.psychartherapie.fr) responsable. De la
+      même façon, les mentions légales peuvent être modifiées à tout moment :
+      elles s’imposent néanmoins à l’utilisateur qui est invité à s’y référer le
+      plus souvent possible afin d’en prendre connaissance.
+
+
+      ## 3. Description des services fournis.
+
+
+      Le site internet [https://www.psychartherapie
+      .fr](https://www.psychartherapie.fr) a pour objet de fournir une
+      information concernant l’ensemble des activités de la société.
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) s’efforce
+      de fournir sur le site
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) des
+      informations aussi précises que possible. Toutefois, il ne pourra être
+      tenu responsable des oublis, des inexactitudes et des carences dans la
+      mise à jour, qu’elles soient de son fait ou du fait des tiers partenaires
+      qui lui fournissent ces informations.
+
+
+      Toutes les informations indiquées sur le site
+      \[https://www.psychartherapie.fr]\(https://www.psychartherapie
+
+      .fr) sont données à titre indicatif, et sont susceptibles d’évoluer. Par
+      ailleurs, les renseignements figurant sur le site
+      \[https://www.psychartherapie.fr]\(https://www
+
+      .psychartherapie.fr) ne sont pas exhaustifs. Ils sont donnés sous réserve
+      de modifications ayant été apportées depuis leur mise en ligne.
+
+
+      ## 4. Limitations contractuelles sur les données techniques.
+
+
+      Le site utilise la technologie JavaScript. Le site Internet ne pourra être
+      tenu responsable de dommages matériels liés à l’utilisation du site. De
+      plus, l’utilisateur du site s’engage à accéder au site en utilisant un
+      matériel récent, ne contenant pas de virus et avec un navigateur de
+      dernière génération mis-à-jour Le site
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) est
+      hébergé chez un prestataire sur le territoire de l’Union Européenne
+      conformément aux dispositions du Règlement Général sur la Protection des
+      Données (RGPD : n° 2016-679)
+
+
+      L’objectif est d’apporter une prestation qui assure le meilleur taux
+      d’accessibilité. L’hébergeur assure la continuité de son service 24 Heures
+      sur 24, tous les jours de l’année. Il se réserve néanmoins la possibilité
+      d’interrompre le service d’hébergement pour les durées les plus courtes
+      possibles notamment à des fins de maintenance, d’amélioration de ses
+      infrastructures, de défaillance de ses infrastructures ou si les
+      Prestations et Services génèrent un trafic réputé anormal.
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) et
+      l’hébergeur ne pourront être tenus responsables en cas de
+      dysfonctionnement du réseau Internet, des lignes téléphoniques ou du
+      matériel informatique et de téléphonie lié notamment à l’encombrement du
+      réseau empêchant l’accès au serveur.
+
+
+      ## 5. Propriété intellectuelle et contrefaçons.
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) est
+      propriétaire des droits de propriété intellectuelle et détient les droits
+      d’usage sur tous les éléments accessibles sur le site internet, notamment
+      les textes, images, graphismes, logos, vidéos, icônes et sons. Toute
+      reproduction, représentation, modification, publication, adaptation de
+      tout ou partie des éléments du site, quel que soit le moyen ou le procédé
+      utilisé, est interdite, sauf autorisation écrite préalable de :
+      [https://www .psychartherapie.fr](https://www.psychartherapie.fr).
+
+
+      Toute exploitation non autorisée du site ou de l’un quelconque des
+      éléments qu’il contient sera considérée comme constitutive d’une
+      contrefaçon et poursuivie conformément aux dispositions des articles
+      L.335-2 et suivants du Code de Propriété Intellectuelle.
+
+
+      ## 6. Limitations de responsabilité.
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) agit en
+      tant qu’éditeur du site.
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) est
+      responsable de la qualité et de la véracité du Contenu qu’il publie.
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) ne pourra
+      être tenu responsable des dommages directs et indirects causés au matériel
+      de l’utilisateur, lors de l’accès au site internet [https://www
+      .psychartherapie.fr](https://www.psychartherapie.fr), et résultant soit de
+      l’utilisation d’un matériel ne répondant pas aux spécifications indiquées
+      au point 4, soit de l’apparition d’un bug ou d’une incompatibilité.
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) ne pourra
+      également être tenu responsable des dommages indirects (tels par exemple
+      qu’une perte de marché ou perte d’une chance) consécutifs à l’utilisation
+      du site [https://www.psychartherapie.fr](https://www.psychartherapie.fr).
+      Des espaces interactifs (possibilité de poser des questions dans l’espace
+      contact) sont à la disposition des utilisateurs. [https://www
+      .psychartherapie.fr](https://www.psychartherapie.fr) se réserve le droit
+      de supprimer, sans mise en demeure préalable, tout contenu déposé dans cet
+      espace qui contreviendrait à la législation applicable en France, en
+      particulier aux dispositions relatives à la protection des données. Le cas
+      échéant, [https://www.psychartherapie.fr](https://www.psychartherapie.fr)
+      se réserve également la possibilité de mettre en cause la responsabilité
+      civile et/ou pénale de l’utilisateur, notamment en cas de message à
+      caractère raciste, injurieux, diffamant, ou pornographique, quel que soit
+      le support utilisé (texte, photographie ...).
+
+
+      ## 7. Gestion des données personnelles.
+
+
+      Le Client est informé des réglementations concernant la communication
+      marketing, la loi du 21 Juin 2014 pour la confiance dans l’Economie
+      Numérique, la Loi Informatique et Liberté du 06 Août 2004 ainsi que du
+      Règlement Général sur la Protection des Données (RGPD : n° 2016-679).
+
+
+      ### 7.1 Responsables de la collecte des données personnelles
+
+
+      Pour les Données Personnelles collectées dans le cadre de la création du
+      compte personnel de l’Utilisateur et de sa navigation sur le Site, le
+      responsable du traitement des Données Personnelles est : Pauline Vince.
+      [https: //www.psychartherapie.fr](https://www.psychartherapie.fr)est
+      représenté par Pauline Vince, son représentant légal
+
+
+      En tant que responsable du traitement des données qu’il collecte,
+      \[https://www.psychartherapie.fr]\(https://
+
+      www.psychartherapie.fr) s’engage à respecter le cadre des dispositions
+      légales en vigueur. Il lui appartient notamment au Client d’établir les
+      finalités de ses traitements de données, de fournir à ses prospects et
+      clients, à partir de la collecte de leurs consentements, une information
+      complète sur le traitement de leurs données personnelles et de maintenir
+      un registre des traitements conforme à la réalité. Chaque fois que
+      [https://www.psychartherapie .fr](https://www.psychartherapie.fr) traite
+      des Données Personnelles, [https://www
+      .psychartherapie.fr](https://www.psychartherapie.fr) prend toutes les
+      mesures raisonnables pour s’assurer de l’exactitude et de la pertinence
+      des Données Personnelles au regard des finalités pour lesquelles
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) les
+      traite.
+
+
+      ### 7.2 Finalité des données collectées
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) est
+      susceptible de traiter tout ou partie des données :
+
+
+      * pour permettre la navigation sur le Site et la gestion et la traçabilité
+      des prestations et services commandés par l’utilisateur : données de
+      connexion et d’utilisation du Site, facturation, historique des commandes,
+      etc.
+
+      * pour prévenir et lutter contre la fraude informatique (spamming,
+      hacking...) : matériel informatique utilisé pour la navigation, l’adresse
+      IP, le mot de passe (hashé)
+
+      * pour améliorer la navigation sur le Site : données de connexion et
+      d’utilisation
+
+      * pour mener des enquêtes de satisfaction facultatives sur
+      \[https://www.psychartherapie.fr]\(https://www
+        .psychartherapie.fr) : adresse email
+      * pour mener des campagnes de communication (sms, mail) : numéro de
+      téléphone, adresse email
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) ne
+      commercialise pas vos données personnelles qui sont donc uniquement
+      utilisées par nécessité ou à des fins statistiques et d’analyses.
+
+
+      ### 7.3 Droit d’accès, de rectification et d’opposition
+
+
+      Conformément à la réglementation européenne en vigueur, les Utilisateurs
+      de [https://www.psychartherapie.fr](https://www.psychartherapie.fr)
+      disposent des droits suivants :
+
+
+      * droit d'accès (article 15 RGPD) et de rectification (article 16 RGPD),
+      de mise à jour, de complétude des données des Utilisateurs droit de
+      verrouillage ou d’effacement des données des Utilisateurs à caractère
+      personnel (article 17 du RGPD), lorsqu’elles sont inexactes, incomplètes,
+      équivoques, périmées, ou dont la collecte, l'utilisation, la communication
+      ou la conservation est interdite
+
+      * droit de retirer à tout moment un consentement (article 13-2c RGPD)
+
+      * droit à la limitation du traitement des données des Utilisateurs
+      (article 18 RGPD)
+
+      * droit d’opposition au traitement des données des Utilisateurs (article
+      21 RGPD)
+
+      * droit à la portabilité des données que les Utilisateurs auront fournies,
+      lorsque ces données font l’objet de traitements automatisés fondés sur
+      leur consentement ou sur un contrat (article 20 RGPD)
+
+      * droit de définir le sort des données des Utilisateurs après leur mort et
+      de choisir à qui
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) devra
+      communiquer (ou non) ses données à un tiers qu’ils aura préalablement
+      désigné
+
+
+      Dès que [https://www.psychartherapie.fr](https://www.psychartherapie.fr) a
+      connaissance du décès d’un Utilisateur et à défaut d’instructions de sa
+      part, \[https://www.psychartherapie.fr]\(https://
+
+      www.psychartherapie.fr) s’engage à détruire ses données, sauf si leur
+      conservation s’avère nécessaire à des fins probatoires ou pour répondre à
+      une obligation légale.
+
+
+      Si l’Utilisateur souhaite savoir comment
+      \[https://www.psychartherapie.fr]\(https://www.psychartherapie
+
+      .fr) utilise ses Données Personnelles, demander à les rectifier ou
+      s’oppose à leur traitement, l’Utilisateur peut contacter
+      \[https://www.psychartherapie.fr]\(https://www
+
+      .psychartherapie.fr) par écrit à l’adresse suivante : Pauline Vince – DPO,
+      Référent RGPD de Mine de Talents\
+
+      1b Rue René Cordilhac 30190 La Calmette.
+
+
+      Dans ce cas, l’Utilisateur doit indiquer les Données Personnelles qu’il
+      souhaiterait que
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) corrige,
+      mette à jour ou supprime, en s’identifiant précisément avec une copie
+      d’une pièce d’identité (carte d’identité ou passeport).
+
+
+      Les demandes de suppression de Données Personnelles seront soumises aux
+      obligations qui sont imposées à [https://www
+      .psychartherapie.fr](https://www.psychartherapie.fr) par la loi, notamment
+      en matière de conservation ou d’archivage des documents. Enfin, les
+      Utilisateurs de [https://www
+      .psychartherapie.fr](https://www.psychartherapie.fr) peuvent déposer une
+      réclamation auprès des autorités de contrôle, et notamment de la CNIL
+      (https://www.cnil.fr/fr/plaintes).
+
+
+      ### 7.4 Non-communication des données personnelles
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr)
+      s’interdit de traiter, héberger ou transférer les Informations collectées
+      sur ses Clients vers un pays situé en dehors de l’Union européenne ou
+      reconnu comme « non adéquat » par la Commission européenne sans en
+      informer préalablement le client. Pour autant,
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) reste
+      libre du choix de ses sous-traitants techniques et commerciaux à la
+      condition qu’il présentent les garanties suffisantes au regard des
+      exigences du Règlement Général sur la Protection des Données (RGPD : n°
+      2016-679).
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) s’engage
+      à prendre toutes les précautions nécessaires afin de préserver la sécurité
+      des Informations et notamment qu’elles ne soient pas communiquées à des
+      personnes non autorisées. Cependant, si un incident impactant l’intégrité
+      ou la confidentialité des Informations du Client est portée à la
+      connaissance de
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr), celle-ci
+      devra dans les meilleurs délais informer le Client et lui communiquer les
+      mesures de corrections prises. Par ailleurs [https://www
+      .psychartherapie.fr](https://www.psychartherapie.fr) ne collecte aucune «
+      données sensibles ».
+
+
+      Les Données Personnelles de l’Utilisateur peuvent être traitées par des
+      filiales de
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) et des
+      sous-traitants (prestataires de services), exclusivement afin de réaliser
+      les finalités de la présente politique.
+
+
+      Dans la limite de leurs attributions respectives et pour les finalités
+      rappelées ci-dessus, les principales personnes susceptibles d’avoir accès
+      aux données des Utilisateurs de
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) sont
+      principalement les agents de notre service client.
+
+
+      ## 8. Notification d’incident
+
+
+      Quels que soient les efforts fournis, aucune méthode de transmission sur
+      Internet et aucune méthode de stockage électronique n'est complètement
+      sûre. Nous ne pouvons en conséquence pas garantir une sécurité absolue. Si
+      nous prenions connaissance d'une brèche de la sécurité, nous avertirions
+      les utilisateurs concernés afin qu'ils puissent prendre les mesures
+      appropriées. Nos procédures de notification d’incident tiennent compte de
+      nos obligations légales, qu'elles se situent au niveau national ou
+      européen. Nous nous engageons à informer pleinement nos clients de toutes
+      les questions relevant de la sécurité de leur compte et à leur fournir
+      toutes les informations nécessaires pour les aider à respecter leurs
+      propres obligations réglementaires en matière de reporting.
+
+
+      Aucune information personnelle de l'utilisateur du site
+      \[https://www.psychartherapie.fr]\(https://www
+
+      .psychartherapie.fr) n'est publiée à l'insu de l'utilisateur, échangée,
+      transférée, cédée ou vendue sur un support quelconque à des tiers. Seule
+      l'hypothèse du rachat de
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) et de ses
+      droits permettrait la transmission des dites informations à l'éventuel
+      acquéreur qui serait à son tour tenu de la même obligation de conservation
+      et de modification des données vis à vis de l'utilisateur du site
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr).
+
+
+      ### Sécurité
+
+
+      Pour assurer la sécurité et la confidentialité des Données Personnelles et
+      des Données Personnelles de Santé, [https://www.psychartherapie
+      .fr](https://www.psychartherapie.fr) utilise des réseaux protégés par des
+      dispositifs standards tels que par pare-feu, la pseudonymisation,
+      l’encryption et mot de passe.
+
+
+      Lors du traitement des Données Personnelles,
+      \[https://www.psychartherapie.fr]\(https://www.psychartherapie
+
+      .fr)prend toutes les mesures raisonnables visant à les protéger contre
+      toute perte, utilisation détournée, accès non autorisé, divulgation,
+      altération ou destruction.
+
+
+      ## 9. Liens hypertextes « cookies » et balises (“tags”) internet
+
+
+      Le site [https://www.psychartherapie.fr](https://www.psychartherapie.fr)
+      contient un certain nombre de liens hypertextes vers d’autres sites, mis
+      en place avec l’autorisation de
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr).
+      Cependant,
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) n’a pas
+      la possibilité de vérifier le contenu des sites ainsi visités, et
+      n’assumera en conséquence aucune responsabilité de ce fait.
+
+
+      Sauf si vous décidez de désactiver les cookies, vous acceptez que le site
+      puisse les utiliser. Vous pouvez à tout moment désactiver ces cookies et
+      ce gratuitement à partir des possibilités de désactivation qui vous sont
+      offertes et rappelées ci-après, sachant que cela peut réduire ou empêcher
+      l’accessibilité à tout ou partie des Services proposés par le site.
+
+
+      ### 9.1. « COOKIES »
+
+
+      Un « cookie » est un petit fichier d’information envoyé sur le navigateur
+      de l’Utilisateur et enregistré au sein du terminal de l’Utilisateur (ex :
+      ordinateur, smartphone), (ci-après « Cookies »). Ce fichier comprend des
+      informations telles que le nom de domaine de l’Utilisateur, le fournisseur
+      d’accès Internet de l’Utilisateur, le système d’exploitation de
+      l’Utilisateur, ainsi que la date et l’heure d’accès. Les Cookies ne
+      risquent en aucun cas d’endommager le terminal de l’Utilisateur.
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) est
+      susceptible de traiter les informations de l’Utilisateur concernant sa
+      visite du Site, telles que les pages consultées, les recherches
+      effectuées. Ces informations permettent à
+      \[https://www.psychartherapie.fr]\(https://
+
+      www.psychartherapie.fr) d’améliorer le contenu du Site, de la navigation
+      de l’Utilisateur.
+
+
+      Les Cookies facilitant la navigation et/ou la fourniture des services
+      proposés par le Site, l’Utilisateur peut configurer son navigateur pour
+      qu’il lui permette de décider s’il souhaite ou non les accepter de manière
+      à ce que des Cookies soient enregistrés dans le terminal ou, au contraire,
+      qu’ils soient rejetés, soit systématiquement, soit selon leur émetteur.
+      L’Utilisateurpeut également configurer son logiciel de navigation de
+      manière à ce que l’acceptation ou le refus des Cookies lui soient proposés
+      ponctuellement, avant qu’un Cookie soit susceptible d’être enregistré dans
+      son terminal.
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) informe
+      l’Utilisateur que, dans ce cas, il se peut que les fonctionnalités de son
+      logiciel de navigation ne soient pas toutes disponibles.
+
+
+      Si l’Utilisateur refuse l’enregistrement de Cookies dans son terminal ou
+      son navigateur, ou si l’Utilisateur supprime ceux qui y sont enregistrés,
+      l’Utilisateur est informé que sa navigation et son expérience sur le Site
+      peuvent être limitées. Cela pourrait également être le cas lorsque
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) ou l’un
+      de ses prestataires ne peut pas reconnaître, à des fins de compatibilité
+      technique, le type de navigateur utilisé par le terminal, les paramètres
+      de langue et d’affichage ou le pays depuis lequel le terminal semble
+      connecté à Internet.
+
+
+      Le cas échéant,
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) décline
+      toute responsabilité pour les conséquences liées au fonctionnement dégradé
+      du Site et des services éventuellement proposés par
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr),
+      résultant (i) du refus de Cookies par l’Utilisateur (ii) de
+      l’impossibilité pour
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr)
+      d’enregistrer ou de consulter les Cookies nécessaires à leur
+      fonctionnement du fait du choix de l’Utilisateur. Pour la gestion des
+      Cookies et des choix de l’Utilisateur, la configuration de chaque
+      navigateur est différente. Elle est décrite dans le menu d’aide du
+      navigateur, qui permettra de savoir de quelle manière l’Utilisateur peut
+      modifier ses souhaits en matière de Cookies.
+
+
+      À tout moment, l’Utilisateur peut faire le choix d’exprimer et de modifier
+      ses souhaits en matière de Cookies.
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) pourra en
+      outre faire appel aux services de prestataires externes pour l’aider à
+      recueillir et traiter les informations décrites dans cette section.
+
+
+      Enfin, en cliquant sur les icônes dédiées aux réseaux sociaux Twitter,
+      Facebook, Linkedin et Google Plus figurant sur le Site de
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) ou dans
+      son application mobile et si l’Utilisateur a accepté le dépôt de cookies
+      en poursuivant sa navigation sur le Site Internet ou l’application mobile
+      de [https://www.psychartherapie.fr](https://www.psychartherapie.fr),
+      Twitter, Facebook, Linkedin et Google Plus peuvent également déposer des
+      cookies sur vos terminaux (ordinateur, tablette, téléphone portable).
+
+
+      Ces types de cookies ne sont déposés sur vos terminaux qu’à condition que
+      vous y consentiez, en continuant votre navigation sur le Site Internet ou
+      l’application mobile de
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr). À tout
+      moment, l’Utilisateur peut néanmoins revenir sur son consentement à ce que
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) dépose ce
+      type de cookies.
+
+
+      ### Article 9.2. BALISES (“TAGS”) INTERNET
+
+
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) peut
+      employer occasionnellement des balises Internet (également appelées « tags
+      », ou balises d’action, GIF à un pixel, GIF transparents, GIF invisibles
+      et GIF un à un) et les déployer par l’intermédiaire d’un partenaire
+      spécialiste d’analyses Web susceptible de se trouver (et donc de stocker
+      les informations correspondantes, y compris l’adresse IP de l’Utilisateur)
+      dans un pays étranger.
+
+
+      Ces balises sont placées à la fois dans les publicités en ligne permettant
+      aux internautes d’accéder au Site, et sur les différentes pages de
+      celui-ci.
+
+
+      Cette technologie permet à
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) d’évaluer
+      les réponses des visiteurs face au Site et l’efficacité de ses actions
+      (par exemple, le nombre de fois où une page est ouverte et les
+      informations consultées), ainsi que l’utilisation de ce Site par
+      l’Utilisateur.
+
+
+      Le prestataire externe pourra éventuellement recueillir des informations
+      sur les visiteurs du Site et d’autres sites Internet grâce à ces balises,
+      constituer des rapports sur l’activité du Site à l’attention de
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr), et
+      fournir d’autres services relatifs à l’utilisation de celui-ci et
+      d’Internet.
+
+
+      ## 10. Droit applicable et attribution de juridiction.
+
+
+      Tout litige en relation avec l’utilisation du site
+      [https://www.psychartherapie.fr](https://www.psychartherapie.fr) est
+      soumis au droit français. En dehors des cas où la loi ne le permet pas, il
+      est fait attribution exclusive de juridiction aux tribunaux compétents de
+      Alès
+
+
+      ## 11. Autres mentions
+
+
+      Vous avez la possibilité de recourir à un médiateur de la consommation à
+      l’adresse suivante : Cabinet de Médiation, SOLUTION MÉDIATION, **04 34 24
+      28 93**, 451 Avenue des Mineurs, 30430 - BARJAC,
+      [www.solution-mediation.fr](https://www.solution-mediation.fr)
+
+
+      Ce site utilise Google Analytics, un service d’analyse de site internet
+      fourni par Google Inc. (« Google »). Google Analytics utilise des cookies
+      , qui sont des fichiers texte placés sur votre ordinateur, pour aider le
+      site internet à analyser l’utilisation du site par ses utilisateurs. Les
+      données générées par les cookies concernant votre utilisation du site (y
+      compris votre adresse IP) seront transmises et stockées par Google sur des
+      serveurs situés aux Etats-Unis. Google utilisera cette information dans le
+      but d’évaluer votre utilisation du site, de compiler des rapports sur
+      l’activité du site à destination de son éditeur et de fournir d’autres
+      services relatifs à l’activité du site et à l’utilisation d’Internet.
+      Google est susceptible de communiquer ces données à des tiers en cas
+      d’obligation légale ou lorsque ces tiers traitent ces données pour le
+      compte de Google, y compris notamment l’éditeur de ce site. Google ne
+      recoupera pas votre adresse IP avec toute autre donnée détenue par Google.
+      Vous pouvez désactiver l’utilisation de cookies en sélectionnant les
+      paramètres appropriés de votre navigateur. Cependant, une telle
+      désactivation pourrait empêcher l’utilisation de certaines fonctionnalités
+      de ce site. En utilisant ce site internet, vous consentez expressément au
+      traitement de vos données nominatives par Google dans les conditions et
+      pour les finalités décrites ci-dessus.
+    _template: content
+---
+
+
+
+

content/posts/voteForPedro.mdx

@@ -7,7 +7,7 @@ excerpt: >
   vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla
   facilities morbi tempus.
 author: content/authors/pedro.md
-date: "2021-07-03T20:30:00.000Z"
+date: 2021-07-03T20:30:00.000Z
 ---
 
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.
+<DateTime format="iso" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. At imperdiet dui accumsan sit amet nulla facilities morbi tempus.

graphql.config.js

@@ -7,8 +7,8 @@ module.exports = {
                 "tina/__generated__/frags.gql",
                 "tina/queries/queries.gql",
                 "tina/queries/frags.gql",
-        "pages/**/*.{graphql,js,ts,jsx,tsx}",
+                "pages/**/*.{graphql,js,ts,jsx,tsx}"
-      ],
+            ]
-    },
+        }
-  },
+    }
 };

next.config.js

@@ -1,23 +1,15 @@
 module.exports = {
-  webpack(config) {
+    distDir: "build",
-    config.module.rules.push({
-      test: /\.svg$/i,
-      issuer: /\.[jt]sx?$/,
-      use: ["@svgr/webpack"],
-    });
-
-    return config;
-  },
     async rewrites() {
         return [
             {
                 source: "/",
-        destination: "/home",
+                destination: "/home"
             },
             {
                 source: "/admin",
-        destination: "/admin/index.html",
+                destination: "/admin/index.html"
-      },
+            }
         ];
-  },
+    }
 };

package.json

@@ -7,37 +7,40 @@
     "build": "tinacms build && next build",
     "start": "tinacms build && next start",
     "export": "npm run build && next export",
-    "lint": "eslint . --ext .ts,.tsx"
+    "lint": "eslint . --ext .ts,.tsx",
+    "bullshit:build": "tinacms dev -c \"next build\""
   },
   "devDependencies": {
-    "@svgr/webpack": "^6.3.1",
+    "@tinacms/cli": "^1.5.29",
-    "@tinacms/cli": "^1.5.14",
     "@types/js-cookie": "^3.0.0",
     "@types/node": "^16.11.7",
     "@types/react": "^17.0.35",
+    "@types/react-gtm-module": "^2.0.1",
+    "@types/sanitize-html": "^2.9.0",
     "@types/styled-components": "^5.1.15",
-    "@typescript-eslint/eslint-plugin": "^5.20.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.0",
     "@typescript-eslint/parser": "^6.5.0",
-    "autoprefixer": "^10.4.0",
+    "autoprefixer": "^10.4.7",
     "eslint": "^8.13.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "postcss": "^8.3.11",
+    "postcss": "^8.4.21",
     "postcss-import": "^14.0.2",
     "postcss-nesting": "^10.1.0"
   },
   "dependencies": {
-    "@headlessui/react": "1.7.5",
     "@tailwindcss/typography": "^0.5.8",
     "date-fns": "^2.23.0",
     "next": "^13.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-icons": "^4.2.0",
+    "react-gtm-module": "^2.0.11",
+    "react-responsive-carousel": "^3.2.23",
+    "sanitize-html": "^2.11.0",
     "sass": "^1.66.1",
     "styled-jsx": "^3.2.5",
-    "tailwindcss": "^3.2.4",
+    "tailwindcss": "^3.3.2",
-    "tinacms": "^1.5.6",
+    "tinacms": "^1.5.20",
     "typescript": "^4.5.2"
   }
 }

pages/404.js

@@ -1,5 +1,5 @@
 import { Hero } from "../components/blocks/hero";
-import { Layout } from "../components/layout";
+import { Layout } from "../components/layout/layout";
 
 export default function FourOhFour() {
     return (

pages/[filename].tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { InferGetStaticPropsType } from "next";
 import { Blocks } from "../components/blocks-renderer";
 import { useTina } from "tinacms/dist/react";
-import { Layout } from "../components/layout";
+import { Layout } from "../components/layout/layout";
 import { client } from "../tina/__generated__/client";
 
 export default function HomePage(
@@ -19,7 +19,7 @@ export default function HomePage(
 
 export const getStaticProps = async ({ params }) => {
     const tinaProps = await client.queries.contentQuery({
-        relativePath: `${ params.filename }.md`
+        relativePath: `${ params.filename }.mdx`
     });
     const props = {
         ...tinaProps,

pages/_app.tsx

@@ -1,5 +1,7 @@
 import "../styles/_styles.scss";
+// import TagManager from "react-gtm-module";
 
+// TagManager.initialize({ gtmId: "G-GGBB2SV4YC" });
 const App = ({ Component, pageProps }) => {
     return <Component { ...pageProps } />;
 };

pages/posts.tsx

@@ -2,7 +2,7 @@ import { Container } from "../components/util/container";
 import { Section } from "../components/util/section";
 import { Posts } from "../components/posts";
 import { client } from "../tina/__generated__/client";
-import { Layout } from "../components/layout";
+import { Layout } from "../components/layout/layout";
 import { InferGetStaticPropsType } from "next";
 
 export default function HomePage(

pages/posts/[filename].tsx

@@ -1,7 +1,7 @@
 import { Post } from "../../components/posts/post";
 import { client } from "../../tina/__generated__/client";
 import { useTina } from "tinacms/dist/react";
-import { Layout } from "../../components/layout";
+import { Layout } from "../../components/layout/layout";
 import { InferGetStaticPropsType } from "next";
 
 // Use the props returned by get static props
@@ -44,6 +44,8 @@ export const getStaticProps = async ({ params }) => {
  *
  * So a blog post at "content/posts/hello.md" would
  * be viewable at http://localhost:3000/posts/hello
+ *
+ * @returns {Promise} A promise with static paths.
  */
 export const getStaticPaths = async () => {
     const postsListData = await client.queries.postConnection();

postcss.config.js

@@ -3,6 +3,6 @@ module.exports = {
         "postcss-import": {},
         "tailwindcss/nesting": {},
         tailwindcss: {},
-    autoprefixer: {},
+        autoprefixer: {}
-  },
+    }
 };

public/icons/bars-solid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>

public/icons/facebook.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M449.446 0C483.971 0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512H342.978V319.085h66.6l12.672-82.621h-79.272v-53.617c0-22.603 11.073-44.636 46.58-44.636H425.6v-70.34s-32.71-5.582-63.982-5.582c-65.288 0-107.96 39.569-107.96 111.204v62.971h-72.573v82.621h72.573V512H62.554C28.03 512 0 483.97 0 449.446V62.554C0 28.03 28.029 0 62.554 0h386.892Z" fill="#124498" class="fill-000000"></path></svg>

public/icons/instagram.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2"><path d="M449.446 0C483.971 0 512 28.03 512 62.554v386.892C512 483.97 483.97 512 449.446 512H62.554C28.03 512 0 483.97 0 449.446V62.554C0 28.03 28.029 0 62.554 0h386.892ZM256 81c-47.527 0-53.487.201-72.152 1.053-18.627.85-31.348 3.808-42.48 8.135-11.508 4.472-21.267 10.456-30.996 20.184-9.729 9.729-15.713 19.489-20.185 30.996-4.326 11.132-7.284 23.853-8.135 42.48C81.201 202.513 81 208.473 81 256s.201 53.487 1.052 72.152c.851 18.627 3.809 31.348 8.135 42.48 4.472 11.507 10.456 21.267 20.185 30.996s19.488 15.713 30.996 20.185c11.132 4.326 23.853 7.284 42.48 8.134C202.513 430.799 208.473 431 256 431s53.487-.201 72.152-1.053c18.627-.85 31.348-3.808 42.48-8.134 11.507-4.472 21.267-10.456 30.996-20.185s15.713-19.489 20.185-30.996c4.326-11.132 7.284-23.853 8.134-42.48C430.799 309.487 431 303.527 431 256s-.201-53.487-1.053-72.152c-.85-18.627-3.808-31.348-8.134-42.48-4.472-11.507-10.456-21.267-20.185-30.996-9.729-9.728-19.489-15.712-30.996-20.184-11.132-4.327-23.853-7.285-42.48-8.135C309.487 81.201 303.527 81 256 81Zm0 31.532c46.727 0 52.262.178 70.715 1.02 17.062.779 26.328 3.63 32.495 6.025 8.169 3.175 13.998 6.968 20.122 13.091 6.124 6.124 9.916 11.954 13.091 20.122 2.396 6.167 5.247 15.433 6.025 32.495.842 18.453 1.021 23.988 1.021 70.715 0 46.727-.179 52.262-1.021 70.715-.778 17.062-3.629 26.328-6.025 32.495-3.175 8.169-6.967 13.998-13.091 20.122-6.124 6.124-11.953 9.916-20.122 13.091-6.167 2.396-15.433 5.247-32.495 6.025-18.45.842-23.985 1.021-70.715 1.021-46.73 0-52.264-.179-70.715-1.021-17.062-.778-26.328-3.629-32.495-6.025-8.169-3.175-13.998-6.967-20.122-13.091-6.124-6.124-9.917-11.953-13.091-20.122-2.396-6.167-5.247-15.433-6.026-32.495-.842-18.453-1.02-23.988-1.02-70.715 0-46.727.178-52.262 1.02-70.715.779-17.062 3.63-26.328 6.026-32.495 3.174-8.168 6.967-13.998 13.091-20.122 6.124-6.123 11.953-9.916 20.122-13.091 6.167-2.395 15.433-5.246 32.495-6.025 18.453-.842 23.988-1.02 70.715-1.02Zm0 53.603c-49.631 0-89.865 40.234-89.865 89.865 0 49.631 40.234 89.865 89.865 89.865 49.631 0 89.865-40.234 89.865-89.865 0-49.631-40.234-89.865-89.865-89.865Zm0 148.198c-32.217 0-58.333-26.116-58.333-58.333s26.116-58.333 58.333-58.333 58.333 26.116 58.333 58.333-26.116 58.333-58.333 58.333Zm114.416-151.748c0 11.598-9.403 20.999-21.001 20.999-11.597 0-20.999-9.401-20.999-20.999 0-11.598 9.402-21 20.999-21 11.598 0 21.001 9.402 21.001 21Z" fill="#124498" class="fill-000000"></path></svg>

styles/_styles.scss

@@ -3,6 +3,9 @@
 @import "header";
 @import "anchoring";
 @import "carousel";
+@import "image";
+@import "title-block";
+@import "footer";
 
 @tailwind base;
 @tailwind components;
@@ -15,11 +18,53 @@ html {
     --header-textColor: #ffd39c;
     --header-Height: 5.375rem;
 
+    --default-link-color: #d8ac74;
+
     scroll-padding-top: var(--header-Height);
 }
 
+// TODO: Try to do this in a better way if possible
+.prose :where(p:first-of-type):not(:where([class~="not-prose"] *)) {
+    font-size: unset;
+}
+
+.container-large {
+    max-width: 75rem;
+}
+
+.default-text-color {
+    color: var(--primaryColor);
+    --tw-prose-bold: var(--primaryColor);
+    --tw-prose-headings: var(--primaryColor)
+}
+
+.default-paragraph-style {
+    color: var(--primaryColor);
+    --tw-prose-links: var(--default-link-color);
+    --tw-prose-headings: var(--primaryColor);
+    --tw-prose-bold: var(--primaryColor);
+    --tw-prose-bullets: var(--primaryColor);
+
+    font-size: 1.05rem;
+
+    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;
+}
+
 body {
     font-family: 'Questrial', sans-serif;
     background-color: var(--body-BackgroundColor);
-
 }

styles/anchoring.scss

@@ -1,5 +1,9 @@
 .anchoring {
     font-family: 'Questrial', sans-serif;
+    position: absolute;
+    right: 0;
+    left: 0;
+    bottom: 0;
 
     h1 {
         margin-bottom: -35px;

styles/carousel.scss

@@ -1,7 +1,7 @@
-.carousel {
+.carousel-image {
     height: calc(100vh - var(--header-Height));
     background-position-x: center;
-    background-position-y: bottom;
+    background-position-y: center;
     background-repeat: no-repeat;
     background-size: cover;
 }

styles/footer.scss

@@ -0,0 +1,19 @@
+#socials img {
+  width: 2rem;
+  height: 2rem;
+}
+
+footer {
+  color: #5975a3;
+
+  p {
+    text-align: justify;
+    hyphens: auto;
+    font-size: 1.05rem;
+    margin-bottom: 1rem;
+  }
+
+  a {
+    color: var(--default-link-color);
+  }
+}

styles/header.scss

@@ -25,6 +25,62 @@
         }
     }
 
+    .navbar-items {
+        display: flex;
+        align-items: center;
+        flex-direction: row;
+    }
+    .navbar-toggler {
+        display: none;
+    }
+    @media screen and (max-width: 900px) {
+        .navbar-toggler {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: auto 0;
+            border: #ffd39c solid .2rem;
+            border-radius: 1rem;
+            width: 3rem;
+            height: 3rem;
+            .navbar-toggler-icon {
+                mask-image: url("../public/icons/bars-solid.svg");
+                -webkit-mask-image: url("../public/icons/bars-solid.svg");
+                mask-repeat: no-repeat;
+                -webkit-mask-repeat: no-repeat;
+                mask-position: center;
+                -webkit-mask-position: center;
+
+                background-color: #d8ac74;
+
+                width: 2rem;
+                height: 2rem;
+                position: relative;
+            }
+        }
+        .navbar-items {
+            display: none;
+        }
+
+        &.navbar-expanded {
+            .navbar-items {
+                display: flex;
+                position: absolute;
+                top: 100%;
+                left: 0;
+                right: 0;
+                width: 100%;
+                transition: height 0.15s ease-in-out;
+                flex-direction: column;
+                background: var(--header-BackgroundColor);
+
+                .nav-item {
+                    margin: .5rem 0;
+                }
+            }
+        }
+    }
+
     .nav-item .nav-link {
         font-family: 'Nunito', sans-serif;
         font-size: 1.4rem;

styles/image.scss

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

styles/title-block.scss

@@ -0,0 +1,17 @@
+.title-block {
+  &.title-size-h1 {
+    font-size: 2.5rem;
+  }
+  &.title-size-h2 {
+    font-size: 2rem;
+  }
+  &.title-size-h3 {
+    font-size: 1.25rem;
+  }
+  &.title-size-h4 {
+    font-size: 1rem;
+  }
+}
+.title-block + h2 {
+  margin-top: 0;
+}

tailwind.config.js

@@ -30,7 +30,7 @@ module.exports = {
                 700: "#433e52",
                 800: "#363145",
                 900: "#252336",
-        1000: "#1c1b2e",
+                1000: "#1c1b2e"
             },
             blue: {
                 50: "#DCEEFF",
@@ -43,7 +43,7 @@ module.exports = {
                 700: "#0D5DBD",
                 800: "#144696",
                 900: "#1D2C6C",
-        1000: "#241748",
+                1000: "#241748"
             },
             orange: {
                 200: "#EB7752",
@@ -52,15 +52,15 @@ module.exports = {
                 500: "#EC4815",
                 600: "#DC4419",
                 700: "#D04017",
-        800: "#C1360F",
+                800: "#C1360F"
-      },
+            }
         },
         screens: {
             sm: "600px",
             md: "900px",
             lg: "1200px",
             xl: "1500px",
-      "2xl": "1800px",
+            "2xl": "1800px"
         },
         fontSize: {
             xs: ".875rem",
@@ -74,98 +74,98 @@ module.exports = {
             "5xl": "3.25rem",
             "6xl": "4rem",
             "7xl": "5rem",
-      "8xl": "6rem",
+            "8xl": "6rem"
         },
         borderWidth: {
             DEFAULT: "3px",
             0: "0",
             2: "2px",
             3: "3px",
-      4: "4px",
+            4: "4px"
         },
         extend: {
             textDecoration: ["active"],
             opacity: {
                 7: ".075",
-        15: ".15",
+                15: ".15"
             },
             maxWidth: {
-        "8xl": "86rem",
+                "8xl": "86rem"
             },
             spacing: {
-        128: "32rem",
+                128: "32rem"
             },
             zIndex: {
-        "-1": "-1",
+                "-1": "-1"
             },
             fontFamily: {
                 nunito: ["Nunito", ...defaultTheme.fontFamily.sans],
-        lato: ["Lato", ...defaultTheme.fontFamily.sans],
+                lato: ["Lato", ...defaultTheme.fontFamily.sans]
             },
             typography: (theme) => ({
                 DEFAULT: {
                     css: {
                         pre: {
-              color: theme("colors.gray.700"),
+                            color: "var(--primaryColor)",
                             backgroundColor: theme("colors.gray.100"),
-              lineHeight: 1.5,
+                            lineHeight: 1.5
                         },
                         code: {
                             backgroundColor: theme("colors.gray.100"),
                             padding: "0.25rem",
                             borderRadius: "3px",
-              margin: "-0.25rem 1px",
+                            margin: "-0.25rem 1px"
                         },
                         "code::before": {
-              content: '""',
+                            content: "\"\""
                         },
                         "code::after": {
-              content: '""',
+                            content: "\"\""
                         },
                         "p:first-of-type": {
-              fontSize: "1.125rem",
+                            fontSize: "1.125rem"
-            },
+                        }
-          },
+                    }
                 },
                 tint: {
                     css: {
                         pre: {
                             color: theme("colors.gray.800"),
-              backgroundColor: theme("colors.gray.150"),
+                            backgroundColor: theme("colors.gray.150")
-            },
+                        }
-          },
+                    }
                 },
                 lg: {
                     css: {
                         pre: {
-              lineHeight: 1.5,
+                            lineHeight: 1.5
                         },
                         "p:first-of-type": {
-              fontSize: "1.365rem",
+                            fontSize: "1.365rem"
-            },
+                        }
-          },
+                    }
                 },
                 xl: {
                     css: {
                         pre: {
-              lineHeight: 1.5,
+                            lineHeight: 1.5
                         },
                         "p:first-of-type": {
-              fontSize: "1.365rem",
+                            fontSize: "1.365rem"
-            },
+                        }
-          },
+                    }
                 },
                 dark: {
                     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") },
                         "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"),
+                            borderLeftColor: theme("colors.gray.800")
                         },
                         h1: { color: theme("colors.gray.100") },
                         h2: { color: theme("colors.gray.100") },
@@ -173,57 +173,57 @@ module.exports = {
                         h4: { color: theme("colors.gray.100") },
                         code: {
                             color: theme("colors.gray.100"),
-              backgroundColor: theme("colors.gray.1000"),
+                            backgroundColor: theme("colors.gray.1000")
                         },
                         "a code": { color: theme("colors.gray.100") },
                         pre: {
-              color: theme("colors.gray.200"),
+                            color: "var(--primaryColor)",
-              backgroundColor: theme("colors.gray.900"),
+                            backgroundColor: theme("colors.gray.900")
                         },
                         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") }
+                    }
                 },
                 primary: {
                     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") },
                         hr: { borderColor: theme("colors.gray.800") },
                         blockquote: {
                             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: {
                             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") },
                         pre: {
-              color: theme("colors.gray.200"),
+                            color: "var(--primaryColor)",
-              backgroundColor: "rgba(0,0,0,0.15)",
+                            backgroundColor: "rgba(0,0,0,0.15)"
                         },
                         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") }
+                    }
+                }
+            })
+        }
     },
     variants: {
-    extend: { typography: ["tint", "dark", "primary"] },
+        extend: { typography: ["tint", "dark", "primary"] }
     },
-  plugins: [require("@tailwindcss/typography")],
+    plugins: [require("@tailwindcss/typography")]
 };

tina/config.tsx

@@ -5,7 +5,10 @@ import { heroBlockSchema } from "../components/blocks/hero";
 import { testimonialBlockSchema } from "../components/blocks/testimonial";
 import { carouselBlockSchema } from "../components/blocks/carousel";
 import { headerSchema } from "../components/layout/header";
-import { footerSchema } from "../components/layout/footer/footer";
+import { footerSchema } from "../components/layout/footer";
+import { richTextTemplates } from "../components/rich-text/rich-text-definitions";
+import { titleBlockSchema } from "../components/blocks/title";
+import { facebookPageTimelineBlockSchema } from "../components/blocks/facebook-page-timeline";
 
 const config = defineConfig({
     clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID!,
@@ -79,69 +82,7 @@ const config = defineConfig({
                         type: "rich-text",
                         label: "Body",
                         name: "_body",
-                        templates: [
+                        templates: richTextTemplates,
-                            {
-                                name: "DateTime",
-                                label: "Date & Time",
-                                inline: true,
-                                fields: [
-                                    {
-                                        name: "format",
-                                        label: "Format",
-                                        type: "string",
-                                        options: ["utc", "iso", "local"]
-                                    }
-                                ]
-                            },
-                            {
-                                name: "BlockQuote",
-                                label: "Block Quote",
-                                fields: [
-                                    {
-                                        name: "children",
-                                        label: "Quote",
-                                        type: "rich-text"
-                                    },
-                                    {
-                                        name: "authorName",
-                                        label: "Author",
-                                        type: "string"
-                                    }
-                                ]
-                            },
-                            {
-                                name: "NewsletterSignup",
-                                label: "Newsletter Sign Up",
-                                fields: [
-                                    {
-                                        name: "children",
-                                        label: "CTA",
-                                        type: "rich-text"
-                                    },
-                                    {
-                                        name: "placeholder",
-                                        label: "Placeholder",
-                                        type: "string"
-                                    },
-                                    {
-                                        name: "buttonText",
-                                        label: "Button Text",
-                                        type: "string"
-                                    },
-                                    {
-                                        name: "disclaimer",
-                                        label: "Disclaimer",
-                                        type: "rich-text"
-                                    }
-                                ],
-                                ui: {
-                                    defaultItem: {
-                                        placeholder: "Enter your email",
-                                        buttonText: "Notify Me"
-                                    }
-                                }
-                            }
-                        ],
                         isBody: true
                     }
                 ]
@@ -183,15 +124,14 @@ const config = defineConfig({
                 label: "Pages",
                 name: "page",
                 path: "content/pages",
+                format: "mdx",
                 ui: {
-                    router: ({ document }) => {
+                    router: ({ document, collection }) => {
                         if (document._sys.filename === "home") {
                             return "/";
                         }
-                        if (document._sys.filename === "about") {
+
-                            return "/about";
+                        return `/${ document._sys.filename }`;
-                        }
-                        return undefined;
                     }
                 },
                 fields: [
@@ -214,12 +154,12 @@ const config = defineConfig({
                         },
                         templates: [
                             heroBlockSchema,
-                            // @ts-ignore
                             featureBlockSchema,
                             contentBlockSchema,
                             testimonialBlockSchema,
-                            // @ts-ignore
+                            carouselBlockSchema,
-                            carouselBlockSchema
+                            titleBlockSchema,
+                            facebookPageTimelineBlockSchema
                         ]
                     }
                 ]