feature: blog

src/app/(payload)/admin/importMap.js

@@ -1,22 +1,11 @@
 import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
 import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
 import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { UploadFeatureClient as UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { BlockquoteFeatureClient as BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { RelationshipFeatureClient as RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { ChecklistFeatureClient as ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { OrderedListFeatureClient as OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { UnorderedListFeatureClient as UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { IndentFeatureClient as IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { AlignFeatureClient as AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { InlineCodeFeatureClient as InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { SuperscriptFeatureClient as SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { SubscriptFeatureClient as SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
@@ -25,22 +14,11 @@ export const importMap = {
   "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
   "@payloadcms/richtext-lexical/rsc#RscEntryLexicalField": RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
   "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#UploadFeatureClient": UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#BlockquoteFeatureClient": BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#RelationshipFeatureClient": RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#ChecklistFeatureClient": ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#OrderedListFeatureClient": OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient": UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#IndentFeatureClient": IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#AlignFeatureClient": AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#InlineCodeFeatureClient": InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#SuperscriptFeatureClient": SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#SubscriptFeatureClient": SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864

src/app/blog/[id]/page.tsx

@@ -1,10 +1,16 @@
 import { Section } from '@/components/Section/Section'
 import { Container } from '@/components/Container/Container'
 import { Title } from '@/components/Title/Title'
-import { ContentWithSlider } from '@/compositions/ContentWithSlider/ContentWithSlider'
 import { TextDiv } from '@/components/Text/TextDiv'
 import { Blog } from '@/payload-types'
 import { notFound } from 'next/navigation'
+import { readableDateTime } from '@/utils/readableDate'
+import { HR } from '@/components/HorizontalRule/HorizontalRule'
+import Image from 'next/image'
+import styles from "./styles.module.scss"
+import { HTMLText } from '@/components/Text/HTMLText'
+import { Button } from '@/components/Button/Button'
+import { ContactSection } from '@/compositions/ContactSection/ContactSection'
 
 async function fetchBlog(id: string) {
   const res = await fetch(`http://localhost:3000/api/blog/${id}`)
@@ -16,30 +22,67 @@ export default async function BlogPage({ params }: { params: Promise<{id: string
 
   const id = (await params).id;
   const data = await fetchBlog(id) as Blog;
+  const url = typeof data.photo === 'object' && data.photo?.sizes?.banner?.url;
 
   if(!data) {
     notFound();
   }
 
+  // determine if some margin at the bottom should be added
+  const length = data.content.length;
+  const shouldAddMargin = data.content[length - 1].blockType === "text"
+
   return (
-    <Section>
+    <>
+      <Section paddingBottom={"small"}>
         <Container>
           <Title title={data.title}></Title>
+          <strong><TextDiv text={data.excerpt} /></strong>
+          <p className={styles.published}>
+            Publiziert am {readableDateTime(data.createdAt)}
+          </p>
         </Container>
+        <HR/>
+        <Container>
           <div>
-          {data.content && data.content.map(item => {
-            if (item.blockType === "ContentWithSlider") {
-              return (
-                <ContentWithSlider key={item.id} slider={item.sliderContent}>
-                  <Container position={"right"}>
-                    <TextDiv text={item.content} />
+            { typeof url === "string" &&
+              <Image className={styles.image} src={url} width={1100} height={400} alt={""} />
+            }
+          </div>
+        </Container>
+      </Section>
+
+        <div>
+          {data.content.map(item => {
+            if (item.blockType === "text" && item.content_html) {
+              return (
+                <Container key={item.id}>
+                  <HTMLText width={item.width} html={item.content_html} />
                 </Container>
-                </ContentWithSlider>
               );
             }
 
+            if (item.blockType === "document" && typeof item.file === "object") {
+              return (
+                <Container key={item.id}>
+                  <Section padding={"medium"}>
+                    <Button size={"lg"} href={item.file.url || "notfound"}>{item.button}</Button>
+                  </Section>
+                </Container>
+              )
+            }
+
+            if (item.blockType === "contactform") {
+              return (
+                <ContactSection key={item.id} title={item.title} description={item.description} />
+              )
+            }
           })}
         </div>
-    </Section>
+
+      { shouldAddMargin &&
+        <Section></Section>
+      }
+    </>
   )
 }

src/app/blog/[id]/styles.module.scss

@@ -0,0 +1,11 @@
+@import "template.scss";
+
+.image {
+  max-width: 100%;
+  height: auto;
+  border-radius: $border-radius;
+}
+
+.published {
+  font-size: 12px;
+}

src/app/globals.css

@@ -4,8 +4,14 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  color: #2c2c2c;
 }
 
 main {
   flex: 1;
 }
+
+.mainContent {
+  font-size: 20px;
+  line-height: 147%;
+}

src/app/layout.tsx

@@ -17,7 +17,7 @@ export default function RootLayout({
     <html lang="en" className={defaultFont.className}>
       <body>
       <Menu />
-      <main>
+      <main className={"mainContent"}>
         {children}
       </main>
       <Footer />

src/collections/Blog.ts

@@ -1,36 +1,9 @@
-import { Block, CollectionConfig } from 'payload'
+import { CollectionConfig } from 'payload'
 import { isAdminOrEmployee } from '@/collections/access/admin'
+import { ParagraphBlock } from '@/collections/blocks/Paragraph'
+import { DocumentBlock } from '@/collections/blocks/Document'
+import { ContactformBlock } from '@/collections/blocks/Contactform'
 
-const QuoteBlock: Block = {
-  slug: 'Quote',
-  labels: {
-    singular: "Zitat",
-    plural: "Zitaten"
-  },
-  fields: [
-    {
-      name: 'quoteText',
-      type: 'text',
-      required: true
-    },
-  ],
-}
-
-const ContentWithSlider: Block = {
-  slug: 'ContentWithSlider',
-  fields: [
-    {
-      name: 'sliderContent',
-      type: 'textarea',
-      required: true
-    },
-    {
-      name: 'content',
-      type: 'textarea',
-      required: true
-    }
-  ]
-}
 
 export const Blog: CollectionConfig = {
   slug: 'blog',
@@ -65,16 +38,26 @@ export const Blog: CollectionConfig = {
         de: "Gemeinde"
       }
     },
+    {
+      name: 'excerpt',
+      type: 'textarea',
+      label: {
+        de: 'Auszug'
+      },
+      required: true,
+    },
     {
       name: 'content',
       type: 'blocks',
       minRows: 1,
       maxRows: 20,
       blocks: [
-        QuoteBlock,
-        ContentWithSlider
-      ]
-    }
+        ParagraphBlock,
+        DocumentBlock,
+        ContactformBlock
+      ],
+      required: true
+    },
   ],
   admin: {
     useAsTitle: 'title'

src/collections/Documents.ts

@@ -0,0 +1,18 @@
+import type { CollectionConfig } from 'payload'
+
+export const Documents: CollectionConfig = {
+  slug: 'documents',
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'name',
+      type: 'text',
+      required: true
+    }
+  ],
+  upload: {
+    mimeTypes: ['application/pdf']
+  },
+}

src/collections/Media.ts

@@ -12,5 +12,32 @@ export const Media: CollectionConfig = {
       required: true,
     },
   ],
-  upload: true,
+  upload: {
+    imageSizes: [
+      {
+        name: 'thumbnail',
+        width: 350,
+        height: 350,
+        position: 'centre',
+      },
+      {
+        name: 'banner',
+        width: 1100,
+        height: 400,
+        position: 'centre',
+      },
+      {
+        name: 'tablet',
+        width: 1024,
+        // By specifying `undefined` or leaving a height undefined,
+        // the image will be sized to a certain width,
+        // but it will retain its original aspect ratio
+        // and calculate a height automatically.
+        height: undefined,
+        position: 'centre',
+      },
+    ],
+    adminThumbnail: 'thumbnail',
+    mimeTypes: ['image/*'],
+  },
 }

src/collections/blocks/Contactform.ts

@@ -0,0 +1,39 @@
+import { Block } from 'payload'
+
+export const ContactformBlock: Block = {
+  slug: 'contactform',
+  labels: {
+    singular: {
+      de: "Kontaktformular"
+    },
+    plural: {
+      de: 'Kontaktformular'
+    }
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+      defaultValue: 'Ich bin dabei!',
+      label: {
+        de: 'Titel'
+      }
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+      label: {
+        de: 'Werbetext'
+      },
+      defaultValue: "Um dich anzumelden oder uns zu unterstützen, fülle bitte das Kontaktformular aus. Wir freuen uns sehr, dass du Teil unserer Gemeinschaft bist und mit deinem Engagement dazu beiträgst, unsere Ziele zu erreichen. Solltest du Fragen haben oder weitere Informationen benötigen, zögere nicht, uns zu kontaktieren – wir sind gerne für dich da!",
+      required: true
+    },
+    {
+      name: 'email',
+      type: 'email',
+      defaultValue: "kontakt@dreikoenige.berlin",
+      required: true
+    }
+  ]
+}

src/collections/blocks/Document.ts

@@ -0,0 +1,30 @@
+import { Block } from 'payload'
+
+export const DocumentBlock: Block = {
+  slug: 'document',
+  labels: {
+    singular: {
+      de: "PDF Dokument"
+    },
+    plural: {
+      de: "PDF Dokumenten"
+    }
+  },
+  fields: [
+    {
+      name: 'file',
+      type: 'upload',
+      relationTo: 'documents',
+      required: true
+    },
+    {
+      name: 'button',
+      label: {
+        de: "Button text"
+      },
+      type: 'text',
+      defaultValue: 'Download Flyer',
+      required: true,
+    },
+  ]
+}

src/collections/blocks/Paragraph.ts

@@ -0,0 +1,32 @@
+import { Block } from 'payload'
+import { lexicalHTML } from '@payloadcms/richtext-lexical'
+
+export const ParagraphBlock: Block = {
+  slug: 'text',
+  labels: {
+    singular: {
+      de: 'Text'
+    },
+    plural: {
+      de: 'Text'
+    }
+  },
+  fields: [
+    {
+      name: 'content',
+      type: 'richText',
+      required: true
+    },
+    lexicalHTML('content', { name: 'content_html' }),
+    {
+      name: 'width',
+      label: {
+        de: "Breite"
+      },
+      type: 'radio',
+      options: ["1/2", "3/4"],
+      required: true,
+      defaultValue: "1/2"
+    }
+  ]
+}

src/components/Button/Button.tsx

@@ -4,6 +4,7 @@ import classNames from 'classnames'
 type ButtonProps = {
   size: 'lg' | 'md'
   type?: "button" | "submit" | "reset",
+  href?: string,
   children: React.ReactNode,
   onClick?: () => void,
 }
@@ -13,9 +14,24 @@ export function Button(
     type = "button",
     size,
     children,
-    onClick
+    onClick,
+    href
   }: ButtonProps
 ) {
+  if(href) {
+    return <a
+      href={href}
+      onClick={onClick}
+      className={classNames({
+        [styles.button]: true,
+        [styles.lg]: size === 'lg',
+        [styles.md]: size === 'md',
+      })}
+    >
+      {children}
+    </a>
+  }
+
   return (
     <button
       type={type}

src/components/Button/styles.module.scss

@@ -2,13 +2,16 @@
 
 .button {
   background: $shade1;
-  color: $shade3;
+  color: #ffffff;
   border-radius: $border-radius;
   text-align: center;
   border: 0;
   font-weight: bold;
   transition: background 0.2s;
   cursor: pointer;
+  text-decoration: none;
+  margin: 5px 0;
+  display: inline-block;
 }
 
 .button:hover {

src/components/EventRow/styles.module.scss

@@ -26,6 +26,7 @@
   align-items: center;
   cursor: pointer;
   margin: 20px 0;
+  font-size: 18px;
 }
 
 .link {

src/components/HorizontalRule/styles.module.scss

@@ -2,7 +2,7 @@
 
 .container {
   display: flex;
-  padding: 10px 5%;
+  padding: 20px 5%;
   gap: 10px;
 }
 

src/components/MassTable/styles.module.css

@@ -4,6 +4,7 @@
   height: 24px;
   cursor: pointer;
   align-items: center;
+  font-size: 18px;
 }
 
 .link {
@@ -21,7 +22,7 @@
 }
 
 .time {
-  width: 70px;
+  width: 80px;
 }
 
 .table {

src/components/RawHTML/RawHTML.tsx

@@ -0,0 +1,9 @@
+type RawHTMLProps = {
+  html: string
+}
+
+export const RawHTML = ({html}: RawHTMLProps) => {
+  return (
+    <div dangerouslySetInnerHTML={{__html: html}}></div>
+  )
+}

src/components/Section/Section.tsx

@@ -5,13 +5,20 @@ export type BackgroundColor = "soft" | "off-white" | undefined
 
 type SectionProps = {
   backgroundColor?: BackgroundColor
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  padding?: "small" | "medium" | "large"
+  paddingBottom?: "small" | "medium" | "large"
 }
 
-export const Section = ({ children, backgroundColor }: SectionProps) => {
+export const Section = ({ children, backgroundColor, padding = "large", paddingBottom }: SectionProps) => {
   return (
     <section className={classNames({
-      [styles.section]: true,
+      [styles.large]: padding == "large",
+      [styles.medium]: padding == "medium",
+      [styles.small]: padding == "small",
+      [styles.largeBottom]: paddingBottom == "large",
+      [styles.mediumBottom]: paddingBottom == "medium",
+      [styles.smallBottom]: paddingBottom == "small",
       [styles.shade2]: backgroundColor === "soft",
       [styles.shade3]: backgroundColor === "off-white"
     })}>

src/components/Section/styles.module.scss

@@ -1,9 +1,29 @@
 @import "template.scss";
 
-.section {
+.large {
   padding: 130px 0;
 }
 
+.medium {
+  padding: 70px 0;
+}
+
+.small {
+  padding: 30px 0;
+}
+
+.largeBottom {
+  padding-bottom: 130px;
+}
+
+.mediumBottom {
+  padding-bottom: 70px;
+}
+
+.smallBottom {
+  padding-bottom: 30px;
+}
+
 .shade2 {
   background-color: $shade2;
 }
@@ -13,7 +33,27 @@
 }
 
 @media screen and (max-width: 576px) {
-  .section {
+  .large {
     padding: 70px 0;
   }
+
+  .medium {
+    padding: 40px 0;
+  }
+
+  .small {
+    padding: 20px 0;
+  }
+
+  .largeBottom {
+    padding-bottom: 70px;
+  }
+
+  .mediumBottom {
+    padding-bottom: 40px;
+  }
+
+  .smallBottom {
+    padding-bottom: 20px;
+  }
 }

src/components/Text/HTMLText.tsx

@@ -0,0 +1,19 @@
+import styles from "./html.module.scss"
+import { RawHTML } from '@/components/RawHTML/RawHTML'
+import classNames from 'classnames'
+
+type HTMLTextProps = {
+  width: "1/2" | "3/4",
+  html: string
+}
+
+export const HTMLText = ({width, html}: HTMLTextProps) => {
+  return (
+    <div className={classNames({
+      [styles.half]: width === "1/2",
+      [styles.threeFourth]: width === "3/4"
+    })}>
+      <RawHTML html={html} />
+    </div>
+  )
+}

src/components/Text/html.module.scss

@@ -0,0 +1,17 @@
+.half {
+  width: 50%;
+}
+
+.threeFourth {
+  width: 75%;
+}
+
+@media screen and (max-width: 576px){
+  .half {
+    width: 100%;
+  }
+
+  .threeFourth {
+    width: 100%;
+  }
+}

src/compositions/ContactSection/ContactSection.tsx

@@ -4,23 +4,22 @@ import { ContactForm } from '@/compositions/ContactForm/ContactForm'
 import { Title } from '@/components/Title/Title'
 import { Col } from '@/components/Flex/Col'
 import { Row } from '@/components/Flex/Row'
+import { TextDiv } from '@/components/Text/TextDiv'
 
-type Col50Props = {
-  children?: React.ReactNode
+type ContactSectionProps = {
+  title: string,
+  description: string
 }
 
 
-export const ContactSection = () => {
+export const ContactSection = ({title, description}: ContactSectionProps) => {
   return (
-    <Section>
+    <Section backgroundColor={"off-white"}>
       <Container>
         <Row>
           <Col>
-            <Title title="Kontakt" size={"lg"} />
-            <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacinia efficitur sapien, vel molestie ligula fermentum rutrum. Maecenas vel mattis leo. Donec dictum convallis mi ac fermentum. Praesent imperdiet dictum arcu, vel lacinia est accumsan ut. Mauris ultrices leo ut mi eleifend, at porttitor mauris condimentum. Quisque a viverra tellus. Cras eu euismod augue. Morbi tristique a nisi vitae tincidunt. Nullam eget dignissim risus, ut tempor nulla. Proin suscipit mi sed leo posuere scelerisque. Sed vel semper ligula.
-            </p>
-
+            <Title title={title} size={"md"} />
+            <TextDiv text={description} />
           </Col>
           <Col>
             <ContactForm />

src/pageComponents/Home/Home.tsx

@@ -10,7 +10,6 @@ import bread from '@/app/bread.jpg'
 import forest from "../../assets/forest.jpeg"
 import { ContentWithSlider } from '@/compositions/ContentWithSlider/ContentWithSlider'
 import { ContactSection } from '@/compositions/ContactSection/ContactSection'
-import { Events } from '@/compositions/Events/Events'
 import { ImageWithText } from '@/compositions/ImageWithText/ImageWithText'
 
 export const Home = () => {

src/payload-types.ts

@@ -23,6 +23,7 @@ export interface Config {
     testimony: Testimony;
     page: Page;
     users: User;
+    documents: Document;
     media: Media;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
@@ -42,6 +43,7 @@ export interface Config {
     testimony: TestimonySelect<false> | TestimonySelect<true>;
     page: PageSelect<false> | PageSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
+    documents: DocumentsSelect<false> | DocumentsSelect<true>;
     media: MediaSelect<false> | MediaSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
@@ -146,6 +148,32 @@ export interface Media {
   height?: number | null;
   focalX?: number | null;
   focalY?: number | null;
+  sizes?: {
+    thumbnail?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    banner?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    tablet?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+  };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
@@ -184,26 +212,68 @@ export interface Blog {
   photo?: (string | null) | Media;
   title: string;
   parish?: (string | Parish)[] | null;
-  content?:
-    | (
+  excerpt: string;
+  content: (
     | {
-            quoteText: string;
+        content: {
+          root: {
+            type: string;
+            children: {
+              type: string;
+              version: number;
+              [k: string]: unknown;
+            }[];
+            direction: ('ltr' | 'rtl') | null;
+            format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+            indent: number;
+            version: number;
+          };
+          [k: string]: unknown;
+        };
+        content_html?: string | null;
+        width: '1/2' | '3/4';
         id?: string | null;
         blockName?: string | null;
-            blockType: 'Quote';
+        blockType: 'text';
       }
     | {
-            sliderContent: string;
-            content: string;
+        file: string | Document;
+        button: string;
         id?: string | null;
         blockName?: string | null;
-            blockType: 'ContentWithSlider';
+        blockType: 'document';
       }
-      )[]
-    | null;
+    | {
+        title: string;
+        description: string;
+        email: string;
+        id?: string | null;
+        blockName?: string | null;
+        blockType: 'contactform';
+      }
+  )[];
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "documents".
+ */
+export interface Document {
+  id: string;
+  name: string;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "tweet".
@@ -392,6 +462,10 @@ export interface PayloadLockedDocument {
         relationTo: 'users';
         value: string | User;
       } | null)
+    | ({
+        relationTo: 'documents';
+        value: string | Document;
+      } | null)
     | ({
         relationTo: 'media';
         value: string | Media;
@@ -505,21 +579,33 @@ export interface BlogSelect<T extends boolean = true> {
   photo?: T;
   title?: T;
   parish?: T;
+  excerpt?: T;
   content?:
     | T
     | {
-        Quote?:
+        text?:
           | T
           | {
-              quoteText?: T;
+              content?: T;
+              content_html?: T;
+              width?: T;
               id?: T;
               blockName?: T;
             };
-        ContentWithSlider?:
+        document?:
           | T
           | {
-              sliderContent?: T;
-              content?: T;
+              file?: T;
+              button?: T;
+              id?: T;
+              blockName?: T;
+            };
+        contactform?:
+          | T
+          | {
+              title?: T;
+              description?: T;
+              email?: T;
               id?: T;
               blockName?: T;
             };
@@ -643,6 +729,24 @@ export interface UsersSelect<T extends boolean = true> {
   loginAttempts?: T;
   lockUntil?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "documents_select".
+ */
+export interface DocumentsSelect<T extends boolean = true> {
+  name?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "media_select".
@@ -660,6 +764,40 @@ export interface MediaSelect<T extends boolean = true> {
   height?: T;
   focalX?: T;
   focalY?: T;
+  sizes?:
+    | T
+    | {
+        thumbnail?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        banner?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        tablet?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+      };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema

src/payload.config.ts

@@ -1,6 +1,18 @@
 // storage-adapter-import-placeholder
 import { mongooseAdapter } from '@payloadcms/db-mongodb'
-import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import {
+  lexicalEditor,
+  BoldFeature,
+  InlineToolbarFeature,
+  ItalicFeature,
+  UnderlineFeature,
+  ParagraphFeature,
+  HeadingFeature,
+  AlignFeature,
+  UnorderedListFeature,
+  LinkFeature,
+  HTMLConverterFeature,
+} from '@payloadcms/richtext-lexical'
 import path from 'path'
 import { buildConfig } from 'payload'
 import { fileURLToPath } from 'url'
@@ -20,6 +32,8 @@ import { Announcements } from '@/collections/Announcements'
 import { Blog } from '@/collections/Blog'
 import { Tweets } from '@/collections/Tweets'
 import { Pages } from '@/collections/Pages'
+import { Documents } from '@/collections/Documents'
+import { Underdog } from 'next/dist/compiled/@next/font/dist/google'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
@@ -41,9 +55,25 @@ export default buildConfig({
     Testimony,
     Pages,
     Users,
+    Documents,
     Media,
   ],
-  editor: lexicalEditor(),
+  editor: lexicalEditor(
+    {
+      features: () => [
+        BoldFeature(),
+        ItalicFeature(),
+        UnderlineFeature(),
+        HeadingFeature({ enabledHeadingSizes: ["h3","h4","h5"]}),
+        AlignFeature(),
+        UnorderedListFeature(),
+        LinkFeature(),
+        ParagraphFeature(),
+        InlineToolbarFeature(),
+        HTMLConverterFeature()
+      ]
+    }
+  ),
   secret: process.env.PAYLOAD_SECRET || '',
   typescript: {
     outputFile: path.resolve(dirname, 'payload-types.ts'),