Linted the whole project with eslint

This commit was merged in pull request #3.
This commit is contained in:
2023-08-31 19:42:15 +02:00
parent cbc4d839d0
commit 7be98e1793
29 changed files with 2931 additions and 1686 deletions

View File

@@ -1,8 +1,8 @@
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";
import { PageBlocksCarousel } from "../../tina/__generated__/types";
import { Anchoring, anchoringSchema } from "../util/anchoring";
import { Template } from "tinacms";
export const Carousel = ({ data }: { data: PageBlocksCarousel }) => {
return (
@@ -20,17 +20,17 @@ export const carouselBlockSchema: Template = {
label: "Carousel",
ui: {
previewSrc: "/blocks/features.png",
defaultItem: [defaultCarousel, defaultCarousel, defaultCarousel],
defaultItem: [defaultCarousel, defaultCarousel, defaultCarousel]
},
fields: [
{
type: "image",
label: "Images du carousel",
name: "images",
list: true,
list: true
},
{
...anchoringSchema
}
],
]
};

View File

@@ -2,51 +2,51 @@ 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, TinaTemplate } from "tinacms";
import { PageBlocksContent } from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
export const Content = ({ data }: { data: PageBlocksContent }) => {
return (
<Section color={data.color}>
<Container
className={`prose prose-lg ${
data.color === "primary" ? `prose-primary` : `dark:prose-dark`
}`}
data-tina-field={tinaField(data, "body")}
size="large"
width="medium"
>
<TinaMarkdown content={data.body} />
</Container>
</Section>
);
return (
<Section color={ data.color }>
<Container
className={ `prose prose-lg ${
data.color === "primary" ? "prose-primary" : "dark:prose-dark"
}` }
data-tina-field={ tinaField(data, "body") }
size="large"
width="medium"
>
<TinaMarkdown content={ data.body } />
</Container>
</Section>
);
};
export const contentBlockSchema: Template = {
name: "content",
label: "Content",
ui: {
previewSrc: "/blocks/content.png",
defaultItem: {
body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.",
name: "content",
label: "Content",
ui: {
previewSrc: "/blocks/content.png",
defaultItem: {
body: "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede."
}
},
},
fields: [
{
type: "rich-text",
label: "Body",
name: "body",
},
{
type: "string",
label: "Color",
name: "color",
options: [
{ label: "Default", value: "default" },
{ label: "Tint", value: "tint" },
{ label: "Primary", value: "primary" },
],
},
],
fields: [
{
type: "rich-text",
label: "Body",
name: "body"
},
{
type: "string",
label: "Color",
name: "color",
options: [
{ label: "Default", value: "default" },
{ label: "Tint", value: "tint" },
{ label: "Primary", value: "primary" }
]
}
]
};

View File

@@ -3,129 +3,129 @@ import { Container } from "../util/container";
import { Icon } from "../util/icon";
import { iconSchema } from "../util/icon";
import {
PageBlocksFeatures,
PageBlocksFeaturesItems,
PageBlocksFeatures,
PageBlocksFeaturesItems
} from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
import {Template} from "tinacms";
import { Template } from "tinacms";
export const Feature = ({
featuresColor,
data,
featuresColor,
data
}: {
featuresColor: string;
data: PageBlocksFeaturesItems;
}) => {
return (
<div
data-tina-field={tinaField(data)}
className="flex-1 flex flex-col gap-6 text-center items-center lg:items-start lg:text-left max-w-xl mx-auto"
style={{ flexBasis: "16rem" }}
>
{data.icon && (
<Icon
tinaField={tinaField(data, "icon")}
parentColor={featuresColor}
data={{ size: "large", ...data.icon }}
/>
)}
{data.title && (
<h3
data-tina-field={tinaField(data, "title")}
className="text-2xl font-semibold title-font"
return (
<div
data-tina-field={ tinaField(data) }
className="flex-1 flex flex-col gap-6 text-center items-center lg:items-start lg:text-left max-w-xl mx-auto"
style={ { flexBasis: "16rem" } }
>
{data.title}
</h3>
)}
{data.text && (
<p
data-tina-field={tinaField(data, "text")}
className="text-base opacity-80 leading-relaxed"
>
{data.text}
</p>
)}
</div>
);
{ data.icon && (
<Icon
tinaField={ tinaField(data, "icon") }
parentColor={ featuresColor }
data={ { size: "large", ...data.icon } }
/>
) }
{ data.title && (
<h3
data-tina-field={ tinaField(data, "title") }
className="text-2xl font-semibold title-font"
>
{ data.title }
</h3>
) }
{ data.text && (
<p
data-tina-field={ tinaField(data, "text") }
className="text-base opacity-80 leading-relaxed"
>
{ data.text }
</p>
) }
</div>
);
};
export const Features = ({ data }: { data: PageBlocksFeatures }) => {
return (
<Section color={data.color}>
<Container
className={`flex flex-wrap gap-x-10 gap-y-8 text-left`}
size="large"
>
{data.items &&
data.items.map(function (block, i) {
return <Feature featuresColor={data.color} key={i} data={block} />;
})}
</Container>
</Section>
);
return (
<Section color={ data.color }>
<Container
className={ "flex flex-wrap gap-x-10 gap-y-8 text-left" }
size="large"
>
{ data.items &&
data.items.map((block, i) => {
return <Feature featuresColor={ data.color } key={ i } data={ block } />;
}) }
</Container>
</Section>
);
};
const defaultFeature = {
title: "Here's Another Feature",
text: "This is where you might talk about the feature, if this wasn't just filler text.",
icon: {
color: "",
style: "float",
name: "",
},
title: "Here's Another Feature",
text: "This is where you might talk about the feature, if this wasn't just filler text.",
icon: {
color: "",
style: "float",
name: ""
}
};
export const featureBlockSchema: Template = {
name: "features",
label: "Features",
ui: {
previewSrc: "/blocks/features.png",
defaultItem: {
items: [defaultFeature, defaultFeature, defaultFeature],
},
},
fields: [
{
type: "object",
label: "Feature Items",
name: "items",
list: true,
ui: {
itemProps: (item) => {
return {
label: item?.title,
};
},
name: "features",
label: "Features",
ui: {
previewSrc: "/blocks/features.png",
defaultItem: {
...defaultFeature,
},
},
fields: [
iconSchema,
items: [defaultFeature, defaultFeature, defaultFeature]
}
},
fields: [
{
type: "string",
label: "Title",
name: "title",
type: "object",
label: "Feature Items",
name: "items",
list: true,
ui: {
itemProps: (item) => {
return {
label: item?.title
};
},
defaultItem: {
...defaultFeature
}
},
fields: [
iconSchema,
{
type: "string",
label: "Title",
name: "title"
},
{
type: "string",
label: "Text",
name: "text",
ui: {
component: "textarea"
}
}
]
},
{
type: "string",
label: "Text",
name: "text",
ui: {
component: "textarea",
},
},
],
},
{
type: "string",
label: "Color",
name: "color",
options: [
{ label: "Default", value: "default" },
{ label: "Tint", value: "tint" },
{ label: "Primary", value: "primary" },
],
},
],
type: "string",
label: "Color",
name: "color",
options: [
{ label: "Default", value: "default" },
{ label: "Tint", value: "tint" },
{ label: "Primary", value: "primary" }
]
}
]
};

View File

@@ -3,182 +3,182 @@ 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, TinaTemplate } from "tinacms";
import { PageBlocksHero } from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";
export const Hero = ({ data }: { data: PageBlocksHero }) => {
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",
};
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
size="large"
className="grid grid-cols-1 md:grid-cols-5 gap-14 items-center justify-center"
>
<div className="row-start-2 md:row-start-1 md:col-span-3 text-center md:text-left">
{data.tagline && (
<h2
data-tina-field={tinaField(data, "tagline")}
className="relative inline-block px-3 py-1 mb-8 text-md font-bold tracking-wide title-font z-20"
return (
<Section color={ data.color }>
<Container
size="large"
className="grid grid-cols-1 md:grid-cols-5 gap-14 items-center justify-center"
>
{data.tagline}
<span className="absolute w-full h-full left-0 top-0 rounded-full -z-1 bg-current opacity-7"></span>
</h2>
)}
{data.headline && (
<h3
data-tina-field={tinaField(data, "headline")}
className={`w-full relative mb-10 text-5xl font-extrabold tracking-normal leading-tight title-font`}
>
<span
className={"bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-100"}
>
{data.headline}
</span>
</h3>
)}
{data.text && (
<div
data-tina-field={tinaField(data, "text")}
className={"prose prose-lg mx-auto md:mx-0 mb-10 prose-primary" }
>
<TinaMarkdown content={data.text} />
</div>
)}
{data.actions && (
<Actions
className="justify-center md:justify-start py-2"
parentColor={data.color}
actions={data.actions}
/>
)}
</div>
{data.image && (
<div
data-tina-field={tinaField(data.image, "src")}
className="relative row-start-1 md:col-span-2 flex justify-center"
>
<img
className="absolute w-full rounded-lg max-w-xs md:max-w-none h-auto blur-2xl brightness-150 contrast-[0.9] dark:brightness-150 saturate-200 opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-hard-light"
src={data.image.src}
aria-hidden="true"
/>
<img
className="relative z-10 w-full max-w-xs rounded-lg md:max-w-none h-auto"
alt={data.image.alt}
src={data.image.src}
/>
</div>
)}
</Container>
</Section>
);
<div className="row-start-2 md:row-start-1 md:col-span-3 text-center md:text-left">
{ data.tagline && (
<h2
data-tina-field={ tinaField(data, "tagline") }
className="relative inline-block px-3 py-1 mb-8 text-md font-bold tracking-wide title-font z-20"
>
{ data.tagline }
<span className="absolute w-full h-full left-0 top-0 rounded-full -z-1 bg-current opacity-7" />
</h2>
) }
{ data.headline && (
<h3
data-tina-field={ tinaField(data, "headline") }
className={ "w-full relative mb-10 text-5xl font-extrabold tracking-normal leading-tight title-font" }
>
<span
className={ "bg-clip-text text-transparent bg-gradient-to-r from-white to-gray-100" }
>
{ data.headline }
</span>
</h3>
) }
{ data.text && (
<div
data-tina-field={ tinaField(data, "text") }
className={ "prose prose-lg mx-auto md:mx-0 mb-10 prose-primary" }
>
<TinaMarkdown content={ data.text } />
</div>
) }
{ data.actions && (
<Actions
className="justify-center md:justify-start py-2"
parentColor={ data.color }
actions={ data.actions }
/>
) }
</div>
{ data.image && (
<div
data-tina-field={ tinaField(data.image, "src") }
className="relative row-start-1 md:col-span-2 flex justify-center"
>
<img
className="absolute w-full rounded-lg max-w-xs md:max-w-none h-auto blur-2xl brightness-150 contrast-[0.9] dark:brightness-150 saturate-200 opacity-50 dark:opacity-30 mix-blend-multiply dark:mix-blend-hard-light"
src={ data.image.src }
aria-hidden="true"
/>
<img
className="relative z-10 w-full max-w-xs rounded-lg md:max-w-none h-auto"
alt={ data.image.alt }
src={ data.image.src }
/>
</div>
) }
</Container>
</Section>
);
};
export const heroBlockSchema: Template = {
name: "hero",
label: "Hero",
ui: {
previewSrc: "/blocks/hero.png",
defaultItem: {
tagline: "Here's some text above the other text",
headline: "This Big Text is Totally Awesome",
text: "Phasellus scelerisque, libero eu finibus rutrum, risus risus accumsan libero, nec molestie urna dui a leo.",
},
},
fields: [
{
type: "string",
label: "Tagline",
name: "tagline",
},
{
type: "string",
label: "Headline",
name: "headline",
},
{
label: "Text",
name: "text",
type: "rich-text",
},
{
label: "Actions",
name: "actions",
type: "object",
list: true,
ui: {
name: "hero",
label: "Hero",
ui: {
previewSrc: "/blocks/hero.png",
defaultItem: {
label: "Action Label",
type: "button",
icon: true,
link: "/",
},
itemProps: (item) => ({ label: item.label }),
},
fields: [
{
label: "Label",
name: "label",
type: "string",
},
{
label: "Type",
name: "type",
type: "string",
options: [
{ label: "Button", value: "button" },
{ label: "Link", value: "link" },
],
},
{
label: "Icon",
name: "icon",
type: "boolean",
},
{
label: "Link",
name: "link",
type: "string",
},
],
tagline: "Here's some text above the other text",
headline: "This Big Text is Totally Awesome",
text: "Phasellus scelerisque, libero eu finibus rutrum, risus risus accumsan libero, nec molestie urna dui a leo."
}
},
{
type: "object",
label: "Image",
name: "image",
fields: [
fields: [
{
name: "src",
label: "Image Source",
type: "image",
type: "string",
label: "Tagline",
name: "tagline"
},
{
name: "alt",
label: "Alt Text",
type: "string",
type: "string",
label: "Headline",
name: "headline"
},
],
},
{
type: "string",
label: "Color",
name: "color",
options: [
{ label: "Default", value: "default" },
{ label: "Tint", value: "tint" },
{ label: "Primary", value: "primary" },
],
},
],
{
label: "Text",
name: "text",
type: "rich-text"
},
{
label: "Actions",
name: "actions",
type: "object",
list: true,
ui: {
defaultItem: {
label: "Action Label",
type: "button",
icon: true,
link: "/"
},
itemProps: (item) => ({ label: item.label })
},
fields: [
{
label: "Label",
name: "label",
type: "string"
},
{
label: "Type",
name: "type",
type: "string",
options: [
{ label: "Button", value: "button" },
{ label: "Link", value: "link" }
]
},
{
label: "Icon",
name: "icon",
type: "boolean"
},
{
label: "Link",
name: "link",
type: "string"
}
]
},
{
type: "object",
label: "Image",
name: "image",
fields: [
{
name: "src",
label: "Image Source",
type: "image"
},
{
name: "alt",
label: "Alt Text",
type: "string"
}
]
},
{
type: "string",
label: "Color",
name: "color",
options: [
{ label: "Default", value: "default" },
{ label: "Tint", value: "tint" },
{ label: "Primary", value: "primary" }
]
}
]
};

View File

@@ -1,7 +1,7 @@
import React from "react";
import { Container } from "../util/container";
import { Section } from "../util/section";
import type {Template, TinaTemplate} from "tinacms";
import type { Template } from "tinacms";
import { PageBlocksTestimonial } from "../../tina/__generated__/types";
import { tinaField } from "tinacms/dist/react";