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

Updated the website

Browse Source
This commit is contained in:
Skydust
2023-08-29 22:49:51 +02:00
parent 2be7f9b705
commit 3f3387b1d1
33 changed files with 297 additions and 165 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/img/logo.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 4.5 KiB

3
components/blocks-renderer.tsx
View File

@@ -4,6 +4,7 @@ import { Features } from "./blocks/features";
import { Hero } from "./blocks/hero";
import { Testimonial } from "./blocks/testimonial";
import { tinaField } from "tinacms/dist/react";
import {Carousel} from "./blocks/carousel";
export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
return (
@@ -31,6 +32,8 @@ const Block = (block: PageBlocks) => {
return <Features data={block} />;
case "PageBlocksTestimonial":
return <Testimonial data={block} />;
case "PageBlocksCarousel":
return <Carousel data={block} />;
default:
return null;
}

50
components/blocks/anchoring.tsx
View File

@@ -1,50 +0,0 @@
import * as React from "react";
import {useEffect, useRef, useState} from "react";
interface AnchoringProps {
text: string, // Default: Découvrez-en plus !
linkTo: string // Default: #main-page
}
export const Anchoring = ({ data }: { data: AnchoringProps }) => {
const [opacity, setOpacity] = useState(1);
const anchoringRef = useRef(null);
const handleScroll = () => {
const scrollTop = window.scrollY || window.pageYOffset;
const elementHeight = anchoringRef.current.clientHeight;
const newOpacity = (elementHeight - scrollTop) / elementHeight;
setOpacity(newOpacity);
};
useEffect(() => {
handleScroll(); // Initialize opacity on mount
window.addEventListener('scroll', handleScroll);
return () => {
window.removeEventListener('scroll', handleScroll);
};
}, []);
const anchoringStyle = {
opacity: opacity,
transition: 'opacity 0.3s', // You can add a transition for a smooth effect
};
return (
<div className="mx-auto">
<div
className="anchoring"
ref={anchoringRef}
style={anchoringStyle}
>
<a href={`${ data.linkTo }`}>
<h1>{ data.text }</h1>
<img
src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjI1OCAxNi4yNDItNi02YTEuMDUgMS4wNSAwIDEgMSAxLjQ4NC0xLjQ4NEwxMiAxNC4wMTVsNS4yNTgtNS4yNTdhMS4wNSAxLjA1IDAgMSAxIDEuNDg0IDEuNDg0bC02IDZhMS4wNSAxLjA1IDAgMCAxLTEuNDg0IDBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg=="/>
</a>
</div>
</div>
);
};

36
components/blocks/carousel.tsx Normal file
View File

@@ -0,0 +1,36 @@
import * as React from "react";
import { Section } from "../util/section";
import {PageBlocksCarousel} from "../../tina/__generated__/types";
import {Anchoring, anchoringSchema} from "../util/anchoring";
import {Template} from "tinacms";
export const Carousel = ({ data }: { data: PageBlocksCarousel }) => {
return (
<Section>
<div className="carousel flex w-[100%] items-end justify-center" style={ { backgroundImage: `url(${ data?.images?.[0] })` } }>
{ data?.link?.enabled && <Anchoring { ...data.link }/> }
</div>
</Section>);
};
const defaultCarousel = "Here's Another Feature";
export const carouselBlockSchema: Template = {
name: "carousel",
label: "Carousel",
ui: {
previewSrc: "/blocks/features.png",
defaultItem: [defaultCarousel, defaultCarousel, defaultCarousel],
},
fields: [
{
type: "image",
label: "Images du carousel",
name: "images",
list: true,
},
{
...anchoringSchema
}
],
};

4
components/blocks/content.tsx
View File

@@ -2,7 +2,7 @@ import React from "react";
import { Container } from "../util/container";
import { Section } from "../util/section";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import type { TinaTemplate } from "tinacms";
import type {Template, TinaTemplate} from "tinacms";
import { PageBlocksContent } from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
@@ -23,7 +23,7 @@ export const Content = ({ data }: { data: PageBlocksContent }) => {
);
};
export const contentBlockSchema: TinaTemplate = {
export const contentBlockSchema: Template = {
name: "content",
label: "Content",
ui: {

3
components/blocks/features.tsx
View File

@@ -7,6 +7,7 @@ import {
PageBlocksFeaturesItems,
} from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
import {Template} from "tinacms";
export const Feature = ({
featuresColor,
@@ -74,7 +75,7 @@ const defaultFeature = {
},
};
export const featureBlockSchema = {
export const featureBlockSchema: Template = {
name: "features",
label: "Features",
ui: {

4
components/blocks/hero.tsx
View File

@@ -3,7 +3,7 @@ import { Actions } from "../util/actions";
import { Container } from "../util/container";
import { Section } from "../util/section";
import { TinaMarkdown } from "tinacms/dist/rich-text";
import type { TinaTemplate } from "tinacms";
import type {Template, TinaTemplate} from "tinacms";
import { PageBlocksHero } from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
@@ -85,7 +85,7 @@ export const Hero = ({ data }: { data: PageBlocksHero }) => {
);
};
export const heroBlockSchema: TinaTemplate = {
export const heroBlockSchema: Template = {
name: "hero",
label: "Hero",
ui: {

4
components/blocks/testimonial.tsx
View File

@@ -1,7 +1,7 @@
import React from "react";
import { Container } from "../util/container";
import { Section } from "../util/section";
import type { TinaTemplate } from "tinacms";
import type {Template, TinaTemplate} from "tinacms";
import { PageBlocksTestimonial } from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
@@ -61,7 +61,7 @@ export const Testimonial = ({ data }: { data: PageBlocksTestimonial }) => {
);
};
export const testimonialBlockSchema: TinaTemplate = {
export const testimonialBlockSchema: Template = {
name: "testimonial",
label: "Testimonial",
ui: {

3
components/layout/footer/footer.tsx
View File

@@ -4,9 +4,8 @@ import { FaFacebookF, FaGithub, FaTwitter } from "react-icons/fa";
import { AiFillInstagram } from "react-icons/ai";
import { Container } from "../../util/container";
import { RawRenderer } from "./rawRenderer";
import { Icon } from "../../util/icon";
export const Footer = ({ data, icon, rawData }) => {
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",

6
components/layout/header.tsx
View File

@@ -1,20 +1,20 @@
import React from "react";
import Link from "next/link";
import { tinaField } from "tinacms/dist/react";
import defaultLogo from "../../assets/img/logo.png";
import defaultLogo from "../../public/logo.png";
import {GlobalHeader} from "../../tina/__generated__/types";
export const Header = ({ data }: { data: GlobalHeader }) => {
return (
<nav className="navbar flex flex-wrap content-between sticky top-0 py-2">
<div className="flex grow justify-between px-6">
<div className="flex grow justify-between px-6 h-full">
<div className="flex navbar-brand">
<Link
href="/"
className="container flex items-center"
>
<img src={ data.logoSrc || defaultLogo.src }/>
<div className="flex flex-col">
<div className="flex flex-col px-6">
<h3 className="title" data-tina-field={tinaField(data, "title")}>{data.title}</h3>
<div className="subtitle" data-tina-field={tinaField(data, "subtitle")}>{data.subtitle}</div>
</div>

3
components/layout/layout.tsx
View File

@@ -17,7 +17,7 @@ export const Layout = ({
return (
<>
<Head>
<title>Tina</title>
<title>{data?.header?.pageTitle}</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -37,7 +37,6 @@ export const Layout = ({
<Footer
rawData={rawData}
data={data?.footer}
icon={data?.header.icon}
/>
</div>
</>

83
components/util/anchoring.tsx Normal file
View File

@@ -0,0 +1,83 @@
import * as React from "react";
import {useEffect, useRef, useState} from "react";
import {tinaField} from "tinacms/dist/react";
import {Template} from "tinacms";
import {ObjectField} from "@tinacms/schema-tools/dist/types";
interface AnchoringProps {
text?: string, // Default: Découvrez-en plus !
linkTo?: string // Default: #main-page
}
export const Anchoring = (props: AnchoringProps) => {
const [opacity, setOpacity] = useState(1);
const anchoringRef = useRef(null);
const handleScrollOpacity = () => {
const scrollTop = window.scrollY || window.pageYOffset;
const elementHeight = anchoringRef.current.clientHeight;
const newOpacity = (elementHeight - scrollTop) / elementHeight;
setOpacity(newOpacity);
};
const handleScrollClick = () => {
anchoringRef.current.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
useEffect(() => {
handleScrollOpacity(); // Initialize opacity on mount
window.addEventListener('scroll', handleScrollOpacity);
return () => {
window.removeEventListener('scroll', handleScrollOpacity);
};
}, []);
return (
<div
className="anchoring"
ref={anchoringRef}
style={ { opacity: opacity } }
>
<a onClick={ handleScrollClick }>
<h1 data-tina-field={tinaField(props, "text")}>{ props.text }</h1>
<img
src="data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjQgMjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTExLjI1OCAxNi4yNDItNi02YTEuMDUgMS4wNSAwIDEgMSAxLjQ4NC0xLjQ4NEwxMiAxNC4wMTVsNS4yNTgtNS4yNTdhMS4wNSAxLjA1IDAgMSAxIDEuNDg0IDEuNDg0bC02IDZhMS4wNSAxLjA1IDAgMCAxLTEuNDg0IDBaIiBmaWxsPSIjZmZmZmZmIiBmaWxsLXJ1bGU9Im5vbnplcm8iIGNsYXNzPSJmaWxsLTAwMDAwMCI+PC9wYXRoPjwvc3ZnPg=="/>
</a>
</div>
);
};
export const anchoringSchema: ObjectField = {
type: "object",
label: "Lien",
name: "link",
ui: {
defaultItem: {
text: "Découvrez-en plus !",
linkTo: "#main-page",
enabled: true
},
},
fields: [
{
type: "boolean",
label: "Active",
name: "enabled"
},
{
type: "string",
label: "Texte",
name: "text"
},
{
type: "string",
label: "Lien",
name: "linkTo"
}
]
};

8
components/util/icon.tsx
View File

@@ -2,6 +2,8 @@ import * as React from "react";
import { ColorPickerInput } from "../../tina/fields/color";
import { IconPickerInput } from "../../tina/fields/icon";
import * as BoxIcons from "react-icons/bi";
import {Template} from "tinacms";
import {ObjectField} from "@tinacms/schema-tools/dist/types";
export const IconOptions = {
Tina: (props) => (
@@ -117,7 +119,7 @@ export const Icon = ({
}
};
export const iconSchema = {
export const iconSchema: ObjectField = {
type: "object",
label: "Icon",
name: "icon",
@@ -127,7 +129,7 @@ export const iconSchema = {
label: "Icon",
name: "name",
ui: {
component: IconPickerInput,
component: (props) => IconPickerInput(props),
},
},
{
@@ -135,7 +137,7 @@ export const iconSchema = {
label: "Color",
name: "color",
ui: {
component: ColorPickerInput,
component: () => ColorPickerInput,
},
},
{

13
content/global/index.json
View File

@@ -1,25 +1,21 @@
{
"header": {
"icon": {
"name": "Tina",
"color": "orange",
"style": "float"
},
"pageTitle": "Pauline Vince — Thérapeute pour enfants, adolescents, adultes et couples",
"title": "PsychARThérapie",
"subtitle": "Pauline Vince",
"logoSrc": "/uploads/logo.png",
"nav": [
{
"href": "",
"label": "Home"
"label": "Accueil"
},
{
"href": "about",
"label": "About"
"label": "Qui suis-je ?"
},
{
"href": "posts",
"label": "Blog"
"label": "Art-thérapie"
},
{
"href": "https://www.rdv360.com/psychartherapie",
@@ -29,7 +25,6 @@
]
},
"footer": {
"color": "default",
"social": {
"facebook": "/",
"twitter": "/",

84
content/pages/about.md
View File

File diff suppressed because one or more lines are too long

19
content/pages/home.md
View File

@@ -1,6 +1,14 @@
---
title: Tina Cloud Starter
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
@@ -59,3 +67,12 @@ blocks:

BIN
public/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 79 KiB

6
public/tina.svg
View File

@@ -1,6 +0,0 @@
<svg viewBox="0 0 66 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<title>Tina</title>
<desc>A proud llama</desc>
<path d="M39.4615 36.1782C42.763 33.4475 44.2259 17.3098 45.6551 11.5091C47.0843 5.70828 52.995 6.0025 52.995 6.0025C52.995 6.0025 51.4605 8.67299 52.0864 10.6658C52.7123 12.6587 57 14.4401 57 14.4401L56.0752 16.8781C56.0752 16.8781 54.1441 16.631 52.995 18.9297C51.8459 21.2283 53.7336 43.9882 53.7336 43.9882C53.7336 43.9882 46.8271 57.6106 46.8271 63.3621C46.8271 69.1136 49.5495 73.9338 49.5495 73.9338H45.7293C45.7293 73.9338 40.1252 67.2648 38.9759 63.9318C37.8266 60.5988 38.2861 57.2658 38.2861 57.2658C38.2861 57.2658 32.1946 56.921 26.7931 57.2658C21.3915 57.6106 17.7892 62.2539 17.1391 64.8512C16.4889 67.4486 16.2196 73.9338 16.2196 73.9338H13.1991C11.3606 68.2603 9.90043 66.2269 10.6925 63.3621C12.8866 55.4269 12.4557 50.9263 11.9476 48.9217C11.4396 46.9172 8 45.1676 8 45.1676C9.68492 41.7349 11.4048 40.0854 18.8029 39.9133C26.201 39.7413 36.1599 38.9088 39.4615 36.1782Z" fill="currentColor" />
<path d="M20.25 63.03C20.25 63.03 21.0305 70.2533 25.1773 73.9342H28.7309C25.1773 69.9085 24.7897 59.415 24.7897 59.415C22.9822 60.0035 20.4799 62.1106 20.25 63.03Z" fill="currentColor" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
public/uploads/Diagram.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 93 KiB

BIN
public/uploads/llama-2.avif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 106 KiB

BIN
public/uploads/llama-3.avif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 150 KiB

BIN
public/uploads/llama-4.avif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 158 KiB

BIN
public/uploads/llama-5.avif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 532 KiB

BIN
public/uploads/llama-6.avif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 105 KiB

BIN
public/uploads/logo.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.5 KiB

After

Width:  |  Height:  |  Size: 79 KiB

BIN
public/uploads/photo.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 516 KiB

10
public/zeit.svg
View File

@@ -1,10 +0,0 @@
<svg width="82" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="url(#prefix__paint0_linear)" d="M9.018 0l9.019 16H0L9.018 0z"/>
<path fill="#333" fill-rule="evenodd" d="M51.634 12.028h-6.492V2.052h6.492v1.256H46.61v3.007h4.37V7.57h-4.37v3.202h5.024v1.255zm-14.063 0h-7.235v-1.096l5.342-7.624h-5.253V2.052h7.058v1.097l-5.342 7.623h5.43v1.256zm21.88 0h6.333v-1.256h-2.423V3.308h2.423V2.052h-6.332v1.256h2.441v7.465h-2.441v1.255zm18.22 0h-1.468v-8.72h-3.36V2.052h8.225v1.256H77.67v8.72z" clip-rule="evenodd"/>
<defs>
<linearGradient id="prefix__paint0_linear" x1="28.022" x2="16.189" y1="22.991" y2="8.569" gradientUnits="userSpaceOnUse">
<stop stop-color="#fff"/>
<stop offset="1"/>
</linearGradient>
</defs>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 794 B

14
styles/anchoring.css
View File

@@ -1,16 +1,28 @@
.anchoring {
text-align: center;
font-family: 'Questrial', sans-serif;
}
.anchoring h1 {
margin-bottom: -35px;
font-size: 2.5rem;
}
.anchoring h1, .anchoring h1:hover {
color: white;
}
.anchoring > a {
margin: 0 auto;
display: block;
width: fit-content;
}
.anchoring > a:hover {
cursor:pointer;
}
.anchoring img {
width: 128px;
height: 128px;
margin: 0 auto;
}

7
styles/carousel.css Normal file
View File

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

24
styles/header.css
View File

@@ -3,6 +3,13 @@
background: var(--header-BackgroundColor);
color: var(--header-textColor);
z-index: 9999;
height: var(--header-Height);
padding: 0 3.75rem;
}
.navbar .navbar-brand img {
height: 3rem;
width: 2.625rem;
}
.navbar .navbar-brand h3 {
@@ -10,16 +17,27 @@
}
.navbar .navbar-brand .title {
font-size: 1.5rem;
font-size: 1.75rem;
font-weight: 350;
line-height: 2.1rem;
}
.navbar .navbar-brand .subtitle {
font-size: .9rem;
font-size: 1.125rem;
font-weight: 250;
}
.navbar .nav-item .nav-link {
font-family: 'Nunito', sans-serif;
font-size: 1.4rem;
font-weight: 400;
line-height: 1.5rem;
font-weight: 250;
white-space: nowrap
}
.navbar .nav-item .nav-link:hover {
color: rgba(255,255,255, .75);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.external-link-icon:after {

5
styles/styles.css
View File

@@ -2,20 +2,21 @@
@import url('https://fonts.googleapis.com/css2?family=Questrial&display=swap');
@import "header.css";
@import "anchoring.css";
@import "carousel.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
html {
scroll-padding-top: 7.25rem;
--body-BackgroundColor: #f5f5f5;
--primaryColor: #124498;
--header-BackgroundColor: var(--primaryColor);
--header-textColor: #ffd39c;
--header-Height: 5.375rem;
}
body {
font-family: 'Questrial', sans-serif;
background-color: var(--body-BackgroundColor);
}

71
tina/config.tsx
View File

@@ -4,6 +4,7 @@ import { featureBlockSchema } from "../components/blocks/features";
import { heroBlockSchema } from "../components/blocks/hero";
import { testimonialBlockSchema } from "../components/blocks/testimonial";
import { ColorPickerInput } from "./fields/color";
import {carouselBlockSchema} from "../components/blocks/carousel";
const config = defineConfig({
clientId: process.env.NEXT_PUBLIC_TINA_CLIENT_ID!,
@@ -158,6 +159,11 @@ const config = defineConfig({
label: "Header",
name: "header",
fields: [
{
type: "string",
label: "Page Title",
name: "pageTitle",
},
{
type: "string",
label: "Title",
@@ -213,15 +219,6 @@ const config = defineConfig({
label: "Footer",
name: "footer",
fields: [
{
type: "string",
label: "Color",
name: "color",
options: [
{ label: "Default", value: "default" },
{ label: "Primary", value: "primary" },
],
},
{
type: "object",
label: "Social Links",
@@ -251,60 +248,6 @@ const config = defineConfig({
},
],
},
{
type: "object",
label: "Theme",
name: "theme",
// @ts-ignore
fields: [
{
type: "string",
label: "Primary Color",
name: "color",
ui: {
component: ColorPickerInput,
},
},
{
type: "string",
name: "font",
label: "Font Family",
options: [
{
label: "System Sans",
value: "sans",
},
{
label: "Nunito",
value: "nunito",
},
{
label: "Lato",
value: "lato",
},
],
},
{
type: "string",
name: "darkMode",
label: "Dark Mode",
options: [
{
label: "System",
value: "system",
},
{
label: "Light",
value: "light",
},
{
label: "Dark",
value: "dark",
},
],
},
],
},
],
},
{
@@ -366,6 +309,8 @@ const config = defineConfig({
featureBlockSchema,
contentBlockSchema,
testimonialBlockSchema,
// @ts-ignore
carouselBlockSchema
],
},
],

2
tina/tina-lock.json
View File

File diff suppressed because one or more lines are too long