add custom image model, fetch alt text

This commit is contained in:
2024-05-15 04:42:42 +02:00
parent 5540040ea2
commit 71b0a87180
26 changed files with 358 additions and 132 deletions

View File

@ -37,6 +37,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
}
`);
const { data, error } = await getClient().query(eventBySlugQuery, {
slug: params.slug,
});

View File

@ -51,7 +51,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
{association.logo && (
<Image
src={association.logo.url}
alt=""
alt={`Logoen til ${association.title}`}
width={association.logo.width}
height={association.logo.height}
sizes="100vw"

View File

@ -48,7 +48,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
{venue.featuredImage && (
<Image
src={venue.featuredImage.url}
alt=""
alt={venue.featuredImage.alt}
width={venue.featuredImage.width}
height={venue.featuredImage.height}
sizes="100vw"

View File

@ -21,9 +21,7 @@ const VenueFragmentDefinition = graphql(`
}
}
featuredImage {
url
width
height
...Image
}
showAsBookable
floor

View File

@ -6,39 +6,6 @@ import Link from "next/link";
import { PageHeader } from "@/components/general/PageHeader";
import { BgPig } from "@/components/general/BgPig";
const VenueFragmentDefinition = graphql(`
fragment Venue on VenuePage {
__typename
id
slug
title
body {
id
blockType
field
... on RichTextBlock {
rawValue
value
}
}
featuredImage {
url
width
height
}
showAsBookable
floor
preposition
capabilityAudio
capabilityAudioVideo
capabilityBar
capabilityLighting
capacityLegal
capacityStanding
capacitySitting
}
`);
export default async function Page() {
const allVenuesQuery = graphql(`
query allVenues {

View File

@ -14,7 +14,7 @@ export const AssociationItem = ({
{association.logo && (
<Image
src={association.logo.url}
alt=""
alt={`Logoen til ${association.title}`}
width={0}
height={0}
sizes="20vw"

View File

@ -64,7 +64,7 @@ export const EventHeader = ({ event }: { event: EventFragment }) => {
{event.featuredImage && (
<Image
src={event.featuredImage.url}
alt=""
alt={event.featuredImage.alt}
width={event.featuredImage.width}
height={event.featuredImage.height}
sizes="100vw"

View File

@ -32,7 +32,7 @@ export const EventItem = ({
{event.featuredImage && (
<Image
src={event.featuredImage.url}
alt=""
alt={event.featuredImage.alt}
width={0}
height={0}
sizes="20vw"

View File

@ -10,7 +10,7 @@ export const VenueItem = ({ venue }: { venue: VenueFragment }) => {
{venue.featuredImage && (
<Image
src={venue.featuredImage.url}
alt=""
alt={venue.featuredImage.alt}
width={0}
height={0}
sizes="20vw"

View File

@ -25,11 +25,12 @@ const documents = {
"\n query allAssociations {\n index: page(\n contentType: \"associations.AssociationIndex\"\n urlPath: \"/home/foreninger/\"\n ) {\n ... on AssociationIndex {\n ...AssociationIndex\n }\n }\n associations: pages(contentType: \"associations.AssociationPage\") {\n ... on AssociationPage {\n ...Association\n }\n }\n }\n ": types.AllAssociationsDocument,
"\n query allVenueSlugs {\n pages(contentType: \"venues.VenuePage\") {\n id\n slug\n }\n }\n ": types.AllVenueSlugsDocument,
"\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 Venue on VenuePage {\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 url\n width\n height\n }\n showAsBookable\n floor\n preposition\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n": types.VenueFragmentDoc,
"\n fragment Venue on VenuePage {\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 showAsBookable\n floor\n preposition\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n": types.VenueFragmentDoc,
"\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 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 url\n width\n height\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 fragment Image on CustomImage {\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,
};
@ -98,7 +99,7 @@ export function graphql(source: "\n query venueBySlug($slug: String!) {\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 Venue on VenuePage {\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 url\n width\n height\n }\n showAsBookable\n floor\n preposition\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n"): (typeof documents)["\n fragment Venue on VenuePage {\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 url\n width\n height\n }\n showAsBookable\n floor\n preposition\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n"];
export function graphql(source: "\n fragment Venue on VenuePage {\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 showAsBookable\n floor\n preposition\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n"): (typeof documents)["\n fragment Venue on VenuePage {\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 showAsBookable\n floor\n preposition\n capabilityAudio\n capabilityAudioVideo\n capabilityBar\n capabilityLighting\n capacityLegal\n capacityStanding\n capacitySitting\n }\n"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/
@ -114,7 +115,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 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 url\n width\n height\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"): (typeof documents)["\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 url\n width\n height\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"];
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"];
/**
* 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 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"): (typeof documents)["\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"];
/**
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
*/

File diff suppressed because one or more lines are too long

11
web/src/lib/common.ts Normal file
View File

@ -0,0 +1,11 @@
import { graphql } from "@/gql";
const ImageFragmentDefinition = graphql(`
fragment Image on CustomImage {
url
width
height
alt
attribution
}
`);

View File

@ -38,9 +38,7 @@ const EventFragmentDefinition = graphql(`
}
}
featuredImage {
url
width
height
...Image
}
facebookUrl
ticketUrl