components/blocks-renderer.tsx

@@ -5,6 +5,7 @@ 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";
 
 export const Blocks = (props: Omit<Page, "id" | "_sys" | "_values">) => {
     return (
@@ -22,7 +23,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 } />;

components/blocks/carousel.tsx

@@ -1,10 +1,16 @@
 import * as React from "react";
 import { Section } from "../util/section";
-import { PageBlocksCarousel } from "../../tina/__generated__/types";
+import { PageBlocks, PageBlocksCarousel, PageBlocksMutation } from "../../tina/__generated__/types";
 import { Anchoring, anchoringSchema } from "../util/anchoring";
 import { Template } from "tinacms";
+import { PageBlockFunction } from "../blocks-renderer";
 
-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 }) => {
     return (
         <Section>
             <div className="carousel flex w-[100%] items-end justify-center" style={ { backgroundImage: `url(${ data?.images?.[0] })` } }>

components/blocks/content.tsx

@@ -3,10 +3,11 @@ import { Container } from "../util/container";
 import { Section } from "../util/section";
 import { TinaMarkdown } from "tinacms/dist/rich-text";
 import type { Template, TinaTemplate } from "tinacms";
-import { PageBlocksContent } from "../../tina/__generated__/types";
+import { PageBlocksCarousel, PageBlocksContent } from "../../tina/__generated__/types";
 import { tinaField } from "tinacms/dist/react";
+import { PageBlockFunction } from "../blocks-renderer";
 
-export const Content = ({ data }: { data: PageBlocksContent }) => {
+export const Content: PageBlockFunction<PageBlocksContent> = ({ data }) => {
     return (
         <Section color={ data.color }>
             <Container

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,11 +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",

components/blocks/testimonial.tsx

@@ -4,8 +4,9 @@ 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 }>
             <Container size="large">

components/posts/post.tsx

@@ -112,20 +112,6 @@ const components: Components<{
 };
 
 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())) {

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);
 

content/global/index.json

@@ -30,10 +30,5 @@
       "twitter": "/",
       "instagram": "/"
     }
-  },
-  "theme": {
-    "color": "blue",
-    "font": "sans",
-    "darkMode": "system"
   }
 }

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.

tina/config.tsx

@@ -214,11 +214,9 @@ const config = defineConfig({
                         },
                         templates: [
                             heroBlockSchema,
-                            // @ts-ignore
                             featureBlockSchema,
                             contentBlockSchema,
                             testimonialBlockSchema,
-                            // @ts-ignore
                             carouselBlockSchema
                         ]
                     }