diff --git a/src/app/(payload)/admin/importMap.js b/src/app/(payload)/admin/importMap.js
index dfe0789..bf0b4f9 100644
--- a/src/app/(payload)/admin/importMap.js
+++ b/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
diff --git a/src/app/blog/[id]/page.tsx b/src/app/blog/[id]/page.tsx
index 9e9aa16..b2f3bb9 100644
--- a/src/app/blog/[id]/page.tsx
+++ b/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 (
-
-
-
-
+ <>
+
+
+
+
+
+ Publiziert am {readableDateTime(data.createdAt)}
+
+
+
+
+
+ { typeof url === "string" &&
+
+ }
+
+
+
+
- {data.content && data.content.map(item => {
- if (item.blockType === "ContentWithSlider") {
+ {data.content.map(item => {
+ if (item.blockType === "text" && item.content_html) {
return (
-
-
-
-
-
+
+
+
);
}
+ if (item.blockType === "document" && typeof item.file === "object") {
+ return (
+
+
+
+ )
+ }
+
+ if (item.blockType === "contactform") {
+ return (
+
+ )
+ }
})}
-
+
+ { shouldAddMargin &&
+
+ }
+ >
)
}
\ No newline at end of file
diff --git a/src/app/blog/[id]/styles.module.scss b/src/app/blog/[id]/styles.module.scss
new file mode 100644
index 0000000..3b17b46
--- /dev/null
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 02109cc..94846a9 100644
--- a/src/app/globals.css
+++ b/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%;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 266eae1..9b3c770 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -17,7 +17,7 @@ export default function RootLayout({
-
+
{children}
diff --git a/src/collections/Blog.ts b/src/collections/Blog.ts
index f835bf2..49c6d99 100644
--- a/src/collections/Blog.ts
+++ b/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'
diff --git a/src/collections/Documents.ts b/src/collections/Documents.ts
new file mode 100644
index 0000000..438ecad
--- /dev/null
+++ b/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']
+ },
+}
\ No newline at end of file
diff --git a/src/collections/Media.ts b/src/collections/Media.ts
index 568cf42..fce39df 100644
--- a/src/collections/Media.ts
+++ b/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/*'],
+ },
}
diff --git a/src/collections/blocks/Contactform.ts b/src/collections/blocks/Contactform.ts
new file mode 100644
index 0000000..be0226f
--- /dev/null
+++ b/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
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/collections/blocks/Document.ts b/src/collections/blocks/Document.ts
new file mode 100644
index 0000000..a32424e
--- /dev/null
+++ b/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,
+ },
+ ]
+}
\ No newline at end of file
diff --git a/src/collections/blocks/Paragraph.ts b/src/collections/blocks/Paragraph.ts
new file mode 100644
index 0000000..5b719c7
--- /dev/null
+++ b/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"
+ }
+ ]
+}
\ No newline at end of file
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 6192599..71f934f 100644
--- a/src/components/Button/Button.tsx
+++ b/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
+ {children}
+
+ }
+
return (