edb/neuf-www
8
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

add schedule block

Browse Source
This commit is contained in:
Jonas Braathen
2026-07-02 17:23:08 +02:00
parent 348a51f2ea
commit 31453af238
15 changed files with 502 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/components/blocks/Blocks.tsx
+4
View File
@@ -10,6 +10,7 @@ import { FeaturedBlock } from "./FeaturedBlock";
import { AccordionBlock } from "./AccordionBlock";
import { EmbedBlock } from "./EmbedBlock";
import { FactBoxBlock } from "./FactBoxBlock";
import { ScheduleBlock } from "./ScheduleBlock";
import { PageSectionBlock, PageSectionNavigationBlock } from "./PageSection";
import { ContactSectionBlock, ContactSubsectionBlock } from "./ContactSection";
import { ContactListBlock } from "./ContactListBlock";
@@ -48,6 +49,9 @@ export const Blocks = ({ blocks, pageContent }: { blocks: any, pageContent?: boo
case "FactBoxBlock":
return <FactBoxBlock key={block.id} block={block} />;
break;
case "ScheduleBlock":
return <ScheduleBlock key={block.id} block={block} />;
break;
case "PageSectionBlock":
return <PageSectionBlock key={block.id} block={block} />;
break;
web/src/components/blocks/ScheduleBlock.tsx
+68
View File
@@ -0,0 +1,68 @@
import { graphql, unmaskFragment } from "@/gql";
import { type ScheduleBlockFragment } from "@/gql/graphql";
import styles from "./scheduleBlock.module.scss";
const ScheduleItemFragmentDefinition = graphql(`
fragment ScheduleItem on ScheduleItemBlock {
time
scheduleItemTitle: title
description
}
`);
export const ScheduleBlockFragmentDefinition = graphql(`
fragment ScheduleBlock on ScheduleBlock {
scheduleTitle: title
scheduleItems: items {
__typename
... on ScheduleItemBlock {
...ScheduleItem
}
}
}
`);
export const ScheduleBlock = ({
block,
}: {
block: ScheduleBlockFragment;
}) => {
return (
<section className={styles.schedule}>
{block.scheduleTitle && (
<h2 className={styles.title}>{block.scheduleTitle}</h2>
)}
<dl className={styles.items}>
{block.scheduleItems?.map((item, index) => {
if (item?.__typename !== "ScheduleItemBlock") {
return null;
}
const scheduleItem = unmaskFragment(
ScheduleItemFragmentDefinition,
item
);
return (
<div key={index} className={styles.item}>
<dt className={styles.time}>{scheduleItem.time}</dt>
<dd className={styles.body}>
<div
dangerouslySetInnerHTML={{
__html: scheduleItem.scheduleItemTitle,
}}
/>
{scheduleItem.description && (
<div
className={styles.description}
dangerouslySetInnerHTML={{
__html: scheduleItem.description,
}}
/>
)}
</dd>
</div>
);
})}
</dl>
</section>
);
};
web/src/components/blocks/scheduleBlock.module.scss
+37
View File
@@ -0,0 +1,37 @@
.schedule {
max-width: var(--size-width-p);
margin: 0 auto var(--spacing-section-bottom);
}
.title {
margin: 0 0 var(--spacing-s);
}
.items {
margin: 0;
}
.item {
display: flex;
gap: var(--spacing-s);
padding: var(--spacing-xs) 0;
border-top: var(--border);
&:last-child {
border-bottom: var(--border);
}
}
.time {
flex: 0 0 8rem;
font-weight: 600;
}
.body {
margin: 0;
}
.description {
margin-top: var(--spacing-xs);
font-size: var(--font-size-caption);
}
web/src/gql/gql.ts
+15 -3
View File
@@ -39,6 +39,8 @@ type Documents = {
"\n fragment ImageWithTextBlock on ImageWithTextBlock {\n image {\n ...Image\n }\n imageFormat\n text\n }\n": typeof types.ImageWithTextBlockFragmentDoc,
"\n fragment PageSectionBlock on PageSectionBlock {\n title\n backgroundColor\n icon\n body {\n id\n blockType\n }\n }\n": typeof types.PageSectionBlockFragmentDoc,
"\n fragment RichTextBlock on RichTextBlock {\n rawValue\n value\n }\n": typeof types.RichTextBlockFragmentDoc,
"\n fragment ScheduleItem on ScheduleItemBlock {\n time\n scheduleItemTitle: title\n description\n }\n": typeof types.ScheduleItemFragmentDoc,
"\n fragment ScheduleBlock on ScheduleBlock {\n scheduleTitle: title\n scheduleItems: items {\n __typename\n ... on ScheduleItemBlock {\n ...ScheduleItem\n }\n }\n }\n": typeof types.ScheduleBlockFragmentDoc,
"\n fragment ContactIndex on ContactIndex {\n __typename\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n }\n": typeof types.ContactIndexFragmentDoc,
"\n query contacts {\n index: contactIndex {\n ... on ContactIndex {\n ...ContactIndex\n }\n }\n }\n": typeof types.ContactsDocument,
"\n query eventBySlug($slug: String!) {\n event: page(contentType: \"events.EventPage\", slug: $slug) {\n ... on EventPage {\n ...Event\n }\n }\n }\n": typeof types.EventBySlugDocument,
@@ -58,7 +60,7 @@ type Documents = {
"\n query venueBySlug($slug: String!) {\n venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": typeof types.VenueBySlugDocument,
"\n fragment VenueRentalIndex on VenueRentalIndex {\n __typename\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n }\n": typeof types.VenueRentalIndexFragmentDoc,
"\n query venueRentalIndex {\n index: venueRentalIndex {\n ... on VenueRentalIndex {\n ...VenueRentalIndex\n }\n }\n venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": typeof types.VenueRentalIndexDocument,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n }\n": typeof types.LeafBlocksFragmentDoc,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n": typeof types.LeafBlocksFragmentDoc,
"\n fragment OneLevelOfBlocks on StreamFieldInterface {\n ...LeafBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...LeafBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...LeafBlocks\n }\n }\n }\n": typeof types.OneLevelOfBlocksFragmentDoc,
"\n fragment Blocks on StreamFieldInterface {\n ...OneLevelOfBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n ...ContactSectionBlock\n blocks {\n ...OneLevelOfBlocks\n ... on ContactSubsectionBlock {\n ...ContactSubsectionBlock\n blocks {\n ...OneLevelOfBlocks\n }\n }\n }\n }\n }\n": typeof types.BlocksFragmentDoc,
"\n fragment Image on CustomImage {\n id\n url\n width\n height\n alt\n attribution\n }\n": typeof types.ImageFragmentDoc,
@@ -107,6 +109,8 @@ const documents: Documents = {
"\n fragment ImageWithTextBlock on ImageWithTextBlock {\n image {\n ...Image\n }\n imageFormat\n text\n }\n": types.ImageWithTextBlockFragmentDoc,
"\n fragment PageSectionBlock on PageSectionBlock {\n title\n backgroundColor\n icon\n body {\n id\n blockType\n }\n }\n": types.PageSectionBlockFragmentDoc,
"\n fragment RichTextBlock on RichTextBlock {\n rawValue\n value\n }\n": types.RichTextBlockFragmentDoc,
"\n fragment ScheduleItem on ScheduleItemBlock {\n time\n scheduleItemTitle: title\n description\n }\n": types.ScheduleItemFragmentDoc,
"\n fragment ScheduleBlock on ScheduleBlock {\n scheduleTitle: title\n scheduleItems: items {\n __typename\n ... on ScheduleItemBlock {\n ...ScheduleItem\n }\n }\n }\n": types.ScheduleBlockFragmentDoc,
"\n fragment ContactIndex on ContactIndex {\n __typename\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n }\n": types.ContactIndexFragmentDoc,
"\n query contacts {\n index: contactIndex {\n ... on ContactIndex {\n ...ContactIndex\n }\n }\n }\n": types.ContactsDocument,
"\n query eventBySlug($slug: String!) {\n event: page(contentType: \"events.EventPage\", slug: $slug) {\n ... on EventPage {\n ...Event\n }\n }\n }\n": types.EventBySlugDocument,
@@ -126,7 +130,7 @@ const documents: Documents = {
"\n query venueBySlug($slug: String!) {\n venue: page(contentType: \"venues.VenuePage\", slug: $slug) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": types.VenueBySlugDocument,
"\n fragment VenueRentalIndex on VenueRentalIndex {\n __typename\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n }\n": types.VenueRentalIndexFragmentDoc,
"\n query venueRentalIndex {\n index: venueRentalIndex {\n ... on VenueRentalIndex {\n ...VenueRentalIndex\n }\n }\n venues: pages(contentType: \"venues.VenuePage\", limit: 100) {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n": types.VenueRentalIndexDocument,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n }\n": types.LeafBlocksFragmentDoc,
"\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n": types.LeafBlocksFragmentDoc,
"\n fragment OneLevelOfBlocks on StreamFieldInterface {\n ...LeafBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...LeafBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...LeafBlocks\n }\n }\n }\n": types.OneLevelOfBlocksFragmentDoc,
"\n fragment Blocks on StreamFieldInterface {\n ...OneLevelOfBlocks\n ... on AccordionBlock {\n ...AccordionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on PageSectionBlock {\n ...PageSectionBlock\n body {\n ...OneLevelOfBlocks\n }\n }\n ... on ContactSectionBlock {\n ...ContactSectionBlock\n blocks {\n ...OneLevelOfBlocks\n ... on ContactSubsectionBlock {\n ...ContactSubsectionBlock\n blocks {\n ...OneLevelOfBlocks\n }\n }\n }\n }\n }\n": types.BlocksFragmentDoc,
"\n fragment Image on CustomImage {\n id\n url\n width\n height\n alt\n attribution\n }\n": types.ImageFragmentDoc,
@@ -264,6 +268,14 @@ export function graphql(source: "\n fragment PageSectionBlock on PageSectionBlo
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment RichTextBlock on RichTextBlock {\n rawValue\n value\n }\n"): (typeof documents)["\n fragment RichTextBlock on RichTextBlock {\n rawValue\n value\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment ScheduleItem on ScheduleItemBlock {\n time\n scheduleItemTitle: title\n description\n }\n"): (typeof documents)["\n fragment ScheduleItem on ScheduleItemBlock {\n time\n scheduleItemTitle: title\n description\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment ScheduleBlock on ScheduleBlock {\n scheduleTitle: title\n scheduleItems: items {\n __typename\n ... on ScheduleItemBlock {\n ...ScheduleItem\n }\n }\n }\n"): (typeof documents)["\n fragment ScheduleBlock on ScheduleBlock {\n scheduleTitle: title\n scheduleItems: items {\n __typename\n ... on ScheduleItemBlock {\n ...ScheduleItem\n }\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
@@ -343,7 +355,7 @@ export function graphql(source: "\n query venueRentalIndex {\n index: venueR
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
export function graphql(source: "\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n }\n"): (typeof documents)["\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n }\n"];
export function graphql(source: "\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n"): (typeof documents)["\n fragment LeafBlocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n ...RichTextBlock\n }\n ... on ImageWithTextBlock {\n ...ImageWithTextBlock\n }\n ... on ImageSliderBlock {\n ...ImageSliderBlock\n }\n ... on HorizontalRuleBlock {\n ...HorizontalRuleBlock\n }\n ... on FeaturedBlock {\n ...FeaturedBlock\n }\n ... on ContactListBlock {\n ...ContactListBlock\n }\n ... on EmbedBlock {\n ...EmbedBlock\n }\n ... on FactBoxBlock {\n ...FactBoxBlock\n }\n ... on ScheduleBlock {\n ...ScheduleBlock\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
web/src/gql/graphql.ts
+151 -26
View File
File diff suppressed because one or more lines are too long
web/src/lib/common.ts
+3
View File
@@ -120,6 +120,9 @@ const LeafBlocksFragmentDefinition = graphql(`
... on FactBoxBlock {
...FactBoxBlock
}
... on ScheduleBlock {
...ScheduleBlock
}
}
`);