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

add image-and-text and image slider block types

Browse Source
This commit is contained in:
Jonas Braathen
2024-05-15 06:33:14 +02:00
parent 71b0a87180
commit ba28578a0c
18 changed files with 453 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
web/src/app/[...url]/page.tsx
View File

@ -13,13 +13,7 @@ const GenericFragmentDefinition = graphql(`
urlPath
title
body {
id
blockType
field
... on RichTextBlock {
rawValue
value
}
...Blocks
}
}
`);

11
web/src/app/lokaler/[slug]/page.tsx
View File

@ -40,17 +40,18 @@ export default async function Page({ params }: { params: { slug: string } }) {
});
const venue = (data?.venue ?? {}) as VenueFragment;
const featuredImage: any = venue.featuredImage
return (
<main className="site-main" id="main">
<section className="page-header">
<h1>{venue.title}</h1>
{venue.featuredImage && (
{featuredImage && (
<Image
src={venue.featuredImage.url}
alt={venue.featuredImage.alt}
width={venue.featuredImage.width}
height={venue.featuredImage.height}
src={featuredImage.url}
alt={featuredImage.alt}
width={featuredImage.width}
height={featuredImage.height}
sizes="100vw"
/>
)}

8
web/src/components/blocks/Blocks.tsx
View File

@ -1,4 +1,6 @@
import { RichTextBlock } from "./RichTextBlock";
import { ImageWithTextBlock } from "./ImageWithTextBlock";
import { ImageSliderBlock } from "./ImageSliderBlock";
export const Blocks = ({ blocks }: any) => {
return blocks.map((block: any) => {
@ -6,6 +8,12 @@ export const Blocks = ({ blocks }: any) => {
case "RichTextBlock":
return <RichTextBlock block={block} />;
break;
case "ImageWithTextBlock":
return <ImageWithTextBlock block={block} />;
break;
case "ImageSliderBlock":
return <ImageSliderBlock block={block} />;
break;
default:
return <div>Unsupported block type {block.blockType}</div>;
console.log("unsupported block", block);

21
web/src/components/blocks/ImageSliderBlock.tsx Normal file
View File

@ -0,0 +1,21 @@
import { ImageSliderBlock as ImageSliderBlockType } from "@/gql/graphql";
import Image from "../general/Image";
import styles from "./imageSliderBlock.module.scss";
export const ImageSliderBlock = ({
block,
}: {
block: ImageSliderBlockType;
}) => {
return (
<div className={styles.imageSliderBlock}>
{block.images &&
block.images.map((imageItem: any) => (
<div key={imageItem.image.id}>
<div>{imageItem.image.url}</div>
<div>{imageItem.text}</div>
</div>
))}
</div>
);
};

25
web/src/components/blocks/ImageWithTextBlock.tsx Normal file
View File

@ -0,0 +1,25 @@
import { ImageWithTextBlock as ImageWithTextBlockType } from "@/gql/graphql";
import Image from "../general/Image";
import styles from "./imageWithTextBlock.module.scss";
export const ImageWithTextBlock = ({
block,
}: {
block: ImageWithTextBlockType;
}) => {
return (
<div className={styles.imageWithTextBlock}>
<Image
src={block.image.url}
alt={block.image.alt ?? ""}
width={block.image.width}
height={block.image.height}
// width={0}
// height={0}
// sizes="20vw"
/>
<div>{block.imageFormat}</div>
{block.text && <div>{block.text}</div>}
</div>
);
};

0
web/src/components/blocks/imageSliderBlock.module.scss Normal file
View File

0
web/src/components/blocks/imageWithTextBlock.module.scss Normal file
View File

12
web/src/components/events/EventHeader.tsx
View File

@ -5,6 +5,8 @@ import { Pig } from "../general/Pig";
import Link from "next/link";
export const EventHeader = ({ event }: { event: EventFragment }) => {
const featuredImage: any = event.featuredImage
return (
<div className={styles.eventHeader}>
<div className={styles.text}>
@ -61,12 +63,12 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
</div>
</div>
<div className={styles.image}>
{event.featuredImage && (
{featuredImage && (
<Image
src={event.featuredImage.url}
alt={event.featuredImage.alt}
width={event.featuredImage.width}
height={event.featuredImage.height}
src={featuredImage.url}
alt={featuredImage.alt}
width={featuredImage.width}
height={featuredImage.height}
sizes="100vw"
/>
)}

7
web/src/components/events/EventItem.tsx
View File

@ -21,6 +21,7 @@ export const EventItem = ({
}) => {
const nextOccurrence = getClosestOccurrence(event);
const numOccurrences = event?.occurrences?.length ?? 0;
const featuredImage: any = event.featuredImage;
return (
<li
@ -29,10 +30,10 @@ export const EventItem = ({
} linkItem`}
>
<div className={styles.image}>
{event.featuredImage && (
{featuredImage && (
<Image
src={event.featuredImage.url}
alt={event.featuredImage.alt}
src={featuredImage.url}
alt={featuredImage.alt}
width={0}
height={0}
sizes="20vw"

8
web/src/components/venues/VenueItem.tsx
View File

@ -4,13 +4,15 @@ import Link from "next/link";
import Image from "../general/Image";
export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
const featuredImage: any = venue.featuredImage;
return (
<li className={`${styles.venueItem} linkItem`}>
<div className={styles.image}>
{venue.featuredImage && (
{featuredImage && (
<Image
src={venue.featuredImage.url}
alt={venue.featuredImage.alt}
src={featuredImage.url}
alt={featuredImage.alt}
width={0}
height={0}
sizes="20vw"

13
web/src/gql/gql.ts
View File

@ -13,7 +13,7 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
* Therefore it is highly recommended to use the babel or swc plugin for production.
*/
const documents = {
"\n fragment Generic on GenericPage {\n __typename\n id\n urlPath\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n }\n": types.GenericFragmentDoc,
"\n fragment Generic on GenericPage {\n __typename\n id\n urlPath\n title\n body {\n ...Blocks\n }\n }\n": types.GenericFragmentDoc,
"\n query allGenericSlugs {\n pages(contentType: \"generic.GenericPage\") {\n id\n urlPath\n }\n }\n ": types.AllGenericSlugsDocument,
"\n query genericPageByUrl($urlPath: String!) {\n page: page(contentType: \"generic.GenericPage\", urlPath: $urlPath) {\n ... on GenericPage {\n ...Generic\n }\n }\n }\n ": types.GenericPageByUrlDocument,
"\n query allEventSlugs {\n pages(contentType: \"events.EventPage\") {\n id\n slug\n }\n }\n ": types.AllEventSlugsDocument,
@ -29,7 +29,8 @@ const documents = {
"\n query allVenues {\n venues: pages(contentType: \"venues.VenuePage\") {\n ... on VenuePage {\n ...Venue\n }\n }\n }\n ": types.AllVenuesDocument,
"\n fragment Home on HomePage {\n ... on HomePage {\n featuredEvents {\n id\n }\n }\n }\n": types.HomeFragmentDoc,
"\n query home {\n events: pages(contentType: \"events.EventPage\") {\n ...Event\n }\n home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n ... on HomePage {\n ...Home\n }\n }\n }\n ": types.HomeDocument,
"\n fragment Image on CustomImage {\n url\n width\n height\n alt\n attribution\n }\n": types.ImageFragmentDoc,
"\n fragment Blocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n ... on ImageWithTextBlock {\n image {\n ...Image\n }\n imageFormat\n text\n }\n ... on ImageSliderBlock {\n images {\n ... on ImageSliderItemBlock {\n image {\n ...Image\n }\n text\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,
"\n fragment Event on EventPage {\n __typename\n id\n slug\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n featuredImage {\n ...Image\n }\n facebookUrl\n ticketUrl\n priceRegular\n priceMember\n priceStudent\n categories {\n ... on EventCategory {\n name\n slug\n }\n }\n occurrences {\n ... on EventOccurrence {\n __typename\n id\n start\n end\n venue {\n __typename\n id\n slug\n title\n }\n }\n }\n }\n": types.EventFragmentDoc,
"\n query allEvents {\n events: pages(contentType: \"events.EventPage\") {\n ... on EventPage {\n ...Event\n }\n }\n eventCategories: eventCategories {\n ... on EventCategory {\n name\n slug\n showInFilters\n }\n }\n }\n": types.AllEventsDocument,
};
@ -51,7 +52,7 @@ export function graphql(source: string): unknown;
/**
* 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 Generic on GenericPage {\n __typename\n id\n urlPath\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n }\n"): (typeof documents)["\n fragment Generic on GenericPage {\n __typename\n id\n urlPath\n title\n body {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n }\n }\n"];
export function graphql(source: "\n fragment Generic on GenericPage {\n __typename\n id\n urlPath\n title\n body {\n ...Blocks\n }\n }\n"): (typeof documents)["\n fragment Generic on GenericPage {\n __typename\n id\n urlPath\n title\n body {\n ...Blocks\n }\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
@ -115,7 +116,11 @@ export function graphql(source: "\n query home {\n events: pages(content
/**
* 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 Image on CustomImage {\n url\n width\n height\n alt\n attribution\n }\n"): (typeof documents)["\n fragment Image on CustomImage {\n url\n width\n height\n alt\n attribution\n }\n"];
export function graphql(source: "\n fragment Blocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n ... on ImageWithTextBlock {\n image {\n ...Image\n }\n imageFormat\n text\n }\n ... on ImageSliderBlock {\n images {\n ... on ImageSliderItemBlock {\n image {\n ...Image\n }\n text\n }\n }\n }\n }\n"): (typeof documents)["\n fragment Blocks on StreamFieldInterface {\n id\n blockType\n field\n ... on RichTextBlock {\n rawValue\n value\n }\n ... on ImageWithTextBlock {\n image {\n ...Image\n }\n imageFormat\n text\n }\n ... on ImageSliderBlock {\n images {\n ... on ImageSliderItemBlock {\n image {\n ...Image\n }\n text\n }\n }\n }\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 Image on CustomImage {\n id\n url\n width\n height\n alt\n attribution\n }\n"): (typeof documents)["\n fragment Image on CustomImage {\n id\n url\n width\n height\n alt\n attribution\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

214
web/src/gql/graphql.ts
View File

File diff suppressed because one or more lines are too long

30
web/src/lib/common.ts
View File

@ -1,7 +1,37 @@
import { graphql } from "@/gql";
const BlockFragmentDefinition = graphql(`
fragment Blocks on StreamFieldInterface {
id
blockType
field
... on RichTextBlock {
rawValue
value
}
... on ImageWithTextBlock {
image {
...Image
}
imageFormat
text
}
... on ImageSliderBlock {
images {
... on ImageSliderItemBlock {
image {
...Image
}
text
}
}
}
}
`);
const ImageFragmentDefinition = graphql(`
fragment Image on CustomImage {
id
url
width
height