bennot/church-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feature: collapsible text

Browse source
This commit is contained in:
Benno Tielen 2026-03-19 23:30:31 +01:00
parent b01dc5c161
commit 3f8269aa4a
7 changed files with 17998 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/collections/Pages.ts
View file

@ -94,6 +94,7 @@ export const Pages: CollectionConfig = {
MainTextBlock,
HorizontalRuleBlock,
BlogSliderBlock,
CollapsibleImageWithTextBlock,
MassTimesBlock,
EventsBlock,
],

20
src/collections/blocks/CollapsibleImageWithText.ts
View file

@ -10,6 +10,7 @@ export const CollapsibleImageWithTextBlock: Block = {
de: 'Aufklappbare Bildtexte',
},
},
dbName: 'collaps',
fields: [
{
name: 'title',
@ -45,29 +46,18 @@ export const CollapsibleImageWithTextBlock: Block = {
},
},
{
name: 'backgroundColor',
name: 'colorStyle',
type: 'select',
label: {
de: 'Hintergrundfarbe',
de: 'Farbstil',
},
options: [
{ label: 'Keine', value: 'none' },
{ label: 'Standard', value: 'default' },
{ label: 'Soft', value: 'soft' },
{ label: 'Off-White', value: 'off-white' },
],
defaultValue: 'none',
},
{
name: 'schema',
type: 'select',
label: {
de: 'Farbschema',
},
options: [
{ label: 'Base', value: 'base' },
{ label: 'Kontrast', value: 'contrast' },
],
defaultValue: 'base',
defaultValue: 'default',
},
],
}

50
src/compositions/Blocks/Blocks.tsx
View file

@ -193,29 +193,33 @@ export function Blocks({ content }: BlocksProps) {
)
}
// if (item.blockType === 'collapsibleImageWithText') {
// const imageUrl = typeof item.image === 'object' && item.image?.url
// ? item.image.url
// : ''
// const bg = item.backgroundColor === 'none'
// ? undefined
// : item.backgroundColor as 'soft' | 'off-white' | undefined
// return (
// <CollapsibleImageWithText
// key={item.id}
// title={item.title}
// text={item.text}
// image={imageUrl}
// backgroundColor={bg}
// schema={item.schema as 'base' | 'contrast' | undefined}
// content={
// item.content
// ? <HTMLText width={'1/2'} data={item.content} />
// : <></>
// }
// />
// )
// }
if (item.blockType === 'collapsibleImageWithText') {
const imageUrl = typeof item.image === 'object' && item.image?.url
? item.image.url
: ''
const colorStyle = item.colorStyle || 'default'
const bg = colorStyle === 'soft' || colorStyle === 'off-white'
? colorStyle as 'soft' | 'off-white'
: undefined
const schema = colorStyle === 'contrast'
? 'contrast' as const
: 'base' as const
return (
<CollapsibleImageWithText
key={item.id}
title={item.title}
text={item.text}
image={imageUrl}
backgroundColor={bg}
schema={schema}
content={
item.content
? <HTMLText width={'3/4'} data={item.content} />
: <></>
}
/>
)
}
if (item.blockType === 'events') {
return (

17862
src/migrations/20260319_215840_collaps_item.json Normal file
View file

File diff suppressed because it is too large Load diff

62
src/migrations/20260319_215840_collaps_item.ts Normal file
View file

@ -0,0 +1,62 @@
import { MigrateUpArgs, MigrateDownArgs, sql } from '@payloadcms/db-postgres'
export async function up({ db, payload, req }: MigrateUpArgs): Promise<void> {
await db.execute(sql`
CREATE TYPE "public"."enum_collaps_color_style" AS ENUM('default', 'soft', 'off-white', 'contrast');
CREATE TYPE "public"."enum__collaps_v_color_style" AS ENUM('default', 'soft', 'off-white', 'contrast');
CREATE TABLE "collaps" (
"_order" integer NOT NULL,
"_parent_id" uuid NOT NULL,
"_path" text NOT NULL,
"id" varchar PRIMARY KEY NOT NULL,
"title" varchar,
"text" varchar,
"image_id" uuid,
"content" jsonb,
"color_style" "enum_collaps_color_style" DEFAULT 'default',
"block_name" varchar
);
CREATE TABLE "_collaps_v" (
"_order" integer NOT NULL,
"_parent_id" uuid NOT NULL,
"_path" text NOT NULL,
"id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL,
"title" varchar,
"text" varchar,
"image_id" uuid,
"content" jsonb,
"color_style" "enum__collaps_v_color_style" DEFAULT 'default',
"_uuid" varchar,
"block_name" varchar
);
ALTER TABLE "announcement" ALTER COLUMN "date" SET DEFAULT '2026-03-22T21:58:39.666Z';
ALTER TABLE "calendar" ALTER COLUMN "date" SET DEFAULT '2026-03-22T21:58:39.963Z';
ALTER TABLE "classifieds" ALTER COLUMN "until" SET DEFAULT '2026-04-18T20:58:40.019Z';
ALTER TABLE "collaps" ADD CONSTRAINT "collaps_image_id_media_id_fk" FOREIGN KEY ("image_id") REFERENCES "public"."media"("id") ON DELETE set null ON UPDATE no action;
ALTER TABLE "collaps" ADD CONSTRAINT "collaps_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."pages"("id") ON DELETE cascade ON UPDATE no action;
ALTER TABLE "_collaps_v" ADD CONSTRAINT "_collaps_v_image_id_media_id_fk" FOREIGN KEY ("image_id") REFERENCES "public"."media"("id") ON DELETE set null ON UPDATE no action;
ALTER TABLE "_collaps_v" ADD CONSTRAINT "_collaps_v_parent_id_fk" FOREIGN KEY ("_parent_id") REFERENCES "public"."_pages_v"("id") ON DELETE cascade ON UPDATE no action;
CREATE INDEX "collaps_order_idx" ON "collaps" USING btree ("_order");
CREATE INDEX "collaps_parent_id_idx" ON "collaps" USING btree ("_parent_id");
CREATE INDEX "collaps_path_idx" ON "collaps" USING btree ("_path");
CREATE INDEX "collaps_image_idx" ON "collaps" USING btree ("image_id");
CREATE INDEX "_collaps_v_order_idx" ON "_collaps_v" USING btree ("_order");
CREATE INDEX "_collaps_v_parent_id_idx" ON "_collaps_v" USING btree ("_parent_id");
CREATE INDEX "_collaps_v_path_idx" ON "_collaps_v" USING btree ("_path");
CREATE INDEX "_collaps_v_image_idx" ON "_collaps_v" USING btree ("image_id");`)
}
export async function down({ db, payload, req }: MigrateDownArgs): Promise<void> {
await db.execute(sql`
ALTER TABLE "collaps" DISABLE ROW LEVEL SECURITY;
ALTER TABLE "_collaps_v" DISABLE ROW LEVEL SECURITY;
DROP TABLE "collaps" CASCADE;
DROP TABLE "_collaps_v" CASCADE;
ALTER TABLE "announcement" ALTER COLUMN "date" SET DEFAULT '2026-03-15T11:02:35.690Z';
ALTER TABLE "calendar" ALTER COLUMN "date" SET DEFAULT '2026-03-15T11:02:35.969Z';
ALTER TABLE "classifieds" ALTER COLUMN "until" SET DEFAULT '2026-04-10T10:02:36.027Z';
DROP TYPE "public"."enum_collaps_color_style";
DROP TYPE "public"."enum__collaps_v_color_style";`)
}

6
src/migrations/index.ts
View file

@ -21,6 +21,7 @@ import * as migration_20260310_105814 from './20260310_105814';
import * as migration_20260310_143800 from './20260310_143800';
import * as migration_20260311_105947_drop_features from './20260311_105947_drop_features';
import * as migration_20260311_110236_live_preview from './20260311_110236_live_preview';
import * as migration_20260319_215840_collaps_item from './20260319_215840_collaps_item';
export const migrations = [
{
@ -138,4 +139,9 @@ export const migrations = [
down: migration_20260311_110236_live_preview.down,
name: '20260311_110236_live_preview',
},
{
up: migration_20260319_215840_collaps_item.up,
down: migration_20260319_215840_collaps_item.down,
name: '20260319_215840_collaps_item'
},
];

35
src/payload-types.ts
View file

@ -847,6 +847,30 @@ export interface Page {
blockName?: string | null;
blockType: 'blogSlider';
}
| {
title: string;
text: string;
image: string | Media;
content: {
root: {
type: string;
children: {
type: any;
version: number;
[k: string]: unknown;
}[];
direction: ('ltr' | 'rtl') | null;
format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
indent: number;
version: number;
};
[k: string]: unknown;
};
colorStyle?: ('default' | 'soft' | 'off-white' | 'contrast') | null;
id?: string | null;
blockName?: string | null;
blockType: 'collapsibleImageWithText';
}
| {
title?: string | null;
subtitle?: string | null;
@ -1564,6 +1588,17 @@ export interface PagesSelect<T extends boolean = true> {
id?: T;
blockName?: T;
};
collapsibleImageWithText?:
| T
| {
title?: T;
text?: T;
image?: T;
content?: T;
colorStyle?: T;
id?: T;
blockName?: T;
};
massTimes?:
| T
| {