web: add unstyled sponsors page
This commit is contained in:
84
web/src/app/sponsorer/page.tsx
Normal file
84
web/src/app/sponsorer/page.tsx
Normal file
@@ -0,0 +1,84 @@
|
||||
import { Metadata, ResolvingMetadata } from "next";
|
||||
import { graphql } from "@/gql";
|
||||
import { SponsorsPage, SponsorBlock } from "@/gql/graphql";
|
||||
import { getClient } from "@/app/client";
|
||||
import { PageHeader } from "@/components/general/PageHeader";
|
||||
import { PageContent } from "@/components/general/PageContent";
|
||||
import { getSeoMetadata } from "@/lib/seo";
|
||||
import { SponsorList } from "@/components/sponsor/SponsorList";
|
||||
|
||||
const sponsorsPageQuery = graphql(`
|
||||
query sponsors {
|
||||
page: sponsorsPage {
|
||||
... on SponsorsPage {
|
||||
...SponsorsPage
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
export async function generateMetadata(
|
||||
{ params }: { params: Promise<{}> },
|
||||
parent: ResolvingMetadata
|
||||
): Promise<Metadata | null> {
|
||||
const { data, error } = await getClient().query(sponsorsPageQuery, {});
|
||||
|
||||
if (error) {
|
||||
throw new Error(error.message);
|
||||
}
|
||||
if (!data?.page) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const index = data.page as SponsorsPage;
|
||||
const metadata = await getSeoMetadata(index, parent);
|
||||
return metadata;
|
||||
}
|
||||
|
||||
const SponsorsPageFragmentDefinition = graphql(`
|
||||
fragment SponsorsPage on SponsorsPage {
|
||||
... on SponsorsPage {
|
||||
title
|
||||
seoTitle
|
||||
searchDescription
|
||||
lead
|
||||
body {
|
||||
...Blocks
|
||||
}
|
||||
sponsors {
|
||||
... on SponsorBlock {
|
||||
id
|
||||
name
|
||||
logo {
|
||||
...Image
|
||||
}
|
||||
text
|
||||
website
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`);
|
||||
|
||||
export default async function Page() {
|
||||
const { data, error } = await getClient().query(sponsorsPageQuery, {});
|
||||
|
||||
if (error) {
|
||||
throw new Error(error.message);
|
||||
}
|
||||
if (!data?.page) {
|
||||
throw new Error("Failed to render /sponsorer");
|
||||
}
|
||||
|
||||
const page = data.page as SponsorsPage;
|
||||
|
||||
console.log(page)
|
||||
|
||||
return (
|
||||
<main className="site-main" id="main">
|
||||
<PageHeader heading={page.title} lead={page.lead} />
|
||||
{page.body && <PageContent blocks={page.body} />}
|
||||
<SponsorList sponsors={page.sponsors as SponsorBlock[]} />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
49
web/src/components/sponsor/SponsorList.tsx
Normal file
49
web/src/components/sponsor/SponsorList.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
import { SponsorBlock } from "@/gql/graphql";
|
||||
import { Blocks } from "../blocks/Blocks";
|
||||
import { Image } from "../general/Image";
|
||||
import styles from "./sponsorList.module.scss";
|
||||
|
||||
const SponsorItem = ({ sponsor }: { sponsor: SponsorBlock }) => {
|
||||
const { name, logo, website, text } = sponsor;
|
||||
return (
|
||||
<li className={styles.sponsorItem}>
|
||||
<h2>{name}</h2>
|
||||
{logo && (
|
||||
<div className={styles.image}>
|
||||
<Image
|
||||
src={logo.url}
|
||||
alt={`Logoen til ${name}`}
|
||||
width={0}
|
||||
height={0}
|
||||
sizes="20vw"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{text && (
|
||||
<p
|
||||
className={styles.sponsorText}
|
||||
dangerouslySetInnerHTML={{ __html: text }}
|
||||
/>
|
||||
)}
|
||||
{website && (
|
||||
<p>
|
||||
<a href={website} target="_blank" rel="noopener">
|
||||
Besøk nettside
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
</li>
|
||||
);
|
||||
};
|
||||
|
||||
export const SponsorList = ({ sponsors }: { sponsors: SponsorBlock[] }) => {
|
||||
return (
|
||||
<section className={styles.sponsorList}>
|
||||
<ul>
|
||||
{sponsors.map((sponsor) => (
|
||||
<SponsorItem key={sponsor.name} sponsor={sponsor} />
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
0
web/src/components/sponsor/sponsorList.module.scss
Normal file
0
web/src/components/sponsor/sponsorList.module.scss
Normal file
@@ -36,6 +36,8 @@ type Documents = {
|
||||
"\n fragment Home on HomePage {\n ... on HomePage {\n featuredEvents {\n id\n }\n }\n }\n": typeof types.HomeFragmentDoc,
|
||||
"\n query home {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n ... on HomePage {\n ...Home\n }\n }\n news: pages(contentType: \"news.newsPage\", order: \"-first_published_at\", limit: 4) {\n ... on NewsPage {\n ...News\n }\n }\n }\n ": typeof types.HomeDocument,
|
||||
"\n query search($query: String) {\n results: search(query: $query) {\n __typename\n ... on PageInterface {\n slug\n }\n ... on NewsPage {\n id\n title\n }\n ... on EventPage {\n id\n title\n }\n ... on GenericPage {\n id\n title\n }\n ... on VenuePage {\n id\n title\n }\n ... on AssociationPage {\n id\n title\n associationType\n }\n }\n }\n ": typeof types.SearchDocument,
|
||||
"\n query sponsors {\n page: sponsorsPage {\n ... on SponsorsPage {\n ...SponsorsPage\n }\n }\n }\n": typeof types.SponsorsDocument,
|
||||
"\n fragment SponsorsPage on SponsorsPage {\n ... on SponsorsPage {\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n sponsors {\n ... on SponsorBlock {\n id\n name\n logo {\n ...Image\n }\n text\n website\n }\n }\n }\n }\n": typeof types.SponsorsPageFragmentDoc,
|
||||
"\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 VenueRentalIndex on VenueRentalIndex {\n ... on VenueRentalIndex {\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n }\n }\n": typeof types.VenueRentalIndexFragmentDoc,
|
||||
"\n fragment OneLevelOfBlocks 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 ... on HorizontalRuleBlock {\n color\n }\n ... on FeaturedBlock {\n title\n featuredBlockText: text\n linkText\n imagePosition\n backgroundColor\n featuredPage {\n contentType\n pageType\n url\n ... on EventPage {\n featuredImage {\n ...Image\n }\n }\n ... on NewsPage {\n featuredImage {\n ...Image\n }\n }\n }\n featuredImageOverride {\n ...Image\n }\n }\n ... on ContactListBlock {\n items {\n blockType\n ... on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n }\n }\n ... on EmbedBlock {\n url\n embed\n rawEmbed\n }\n ... on FactBoxBlock {\n backgroundColor\n factBoxBody: body\n }\n }\n": typeof types.OneLevelOfBlocksFragmentDoc,
|
||||
@@ -77,6 +79,8 @@ const documents: Documents = {
|
||||
"\n fragment Home on HomePage {\n ... on HomePage {\n featuredEvents {\n id\n }\n }\n }\n": types.HomeFragmentDoc,
|
||||
"\n query home {\n events: eventIndex {\n ... on EventIndex {\n futureEvents {\n ... on EventPage {\n ...Event\n }\n }\n }\n }\n home: page(contentType: \"home.HomePage\", urlPath: \"/home/\") {\n ... on HomePage {\n ...Home\n }\n }\n news: pages(contentType: \"news.newsPage\", order: \"-first_published_at\", limit: 4) {\n ... on NewsPage {\n ...News\n }\n }\n }\n ": types.HomeDocument,
|
||||
"\n query search($query: String) {\n results: search(query: $query) {\n __typename\n ... on PageInterface {\n slug\n }\n ... on NewsPage {\n id\n title\n }\n ... on EventPage {\n id\n title\n }\n ... on GenericPage {\n id\n title\n }\n ... on VenuePage {\n id\n title\n }\n ... on AssociationPage {\n id\n title\n associationType\n }\n }\n }\n ": types.SearchDocument,
|
||||
"\n query sponsors {\n page: sponsorsPage {\n ... on SponsorsPage {\n ...SponsorsPage\n }\n }\n }\n": types.SponsorsDocument,
|
||||
"\n fragment SponsorsPage on SponsorsPage {\n ... on SponsorsPage {\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n sponsors {\n ... on SponsorBlock {\n id\n name\n logo {\n ...Image\n }\n text\n website\n }\n }\n }\n }\n": types.SponsorsPageFragmentDoc,
|
||||
"\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 VenueRentalIndex on VenueRentalIndex {\n ... on VenueRentalIndex {\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n }\n }\n": types.VenueRentalIndexFragmentDoc,
|
||||
"\n fragment OneLevelOfBlocks 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 ... on HorizontalRuleBlock {\n color\n }\n ... on FeaturedBlock {\n title\n featuredBlockText: text\n linkText\n imagePosition\n backgroundColor\n featuredPage {\n contentType\n pageType\n url\n ... on EventPage {\n featuredImage {\n ...Image\n }\n }\n ... on NewsPage {\n featuredImage {\n ...Image\n }\n }\n }\n featuredImageOverride {\n ...Image\n }\n }\n ... on ContactListBlock {\n items {\n blockType\n ... on ContactEntityBlock {\n contactEntity {\n ...ContactEntity\n }\n }\n }\n }\n ... on EmbedBlock {\n url\n embed\n rawEmbed\n }\n ... on FactBoxBlock {\n backgroundColor\n factBoxBody: body\n }\n }\n": types.OneLevelOfBlocksFragmentDoc,
|
||||
@@ -198,6 +202,14 @@ export function graphql(source: "\n query home {\n events: eventIndex {\
|
||||
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
|
||||
*/
|
||||
export function graphql(source: "\n query search($query: String) {\n results: search(query: $query) {\n __typename\n ... on PageInterface {\n slug\n }\n ... on NewsPage {\n id\n title\n }\n ... on EventPage {\n id\n title\n }\n ... on GenericPage {\n id\n title\n }\n ... on VenuePage {\n id\n title\n }\n ... on AssociationPage {\n id\n title\n associationType\n }\n }\n }\n "): (typeof documents)["\n query search($query: String) {\n results: search(query: $query) {\n __typename\n ... on PageInterface {\n slug\n }\n ... on NewsPage {\n id\n title\n }\n ... on EventPage {\n id\n title\n }\n ... on GenericPage {\n id\n title\n }\n ... on VenuePage {\n id\n title\n }\n ... on AssociationPage {\n id\n title\n associationType\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 query sponsors {\n page: sponsorsPage {\n ... on SponsorsPage {\n ...SponsorsPage\n }\n }\n }\n"): (typeof documents)["\n query sponsors {\n page: sponsorsPage {\n ... on SponsorsPage {\n ...SponsorsPage\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 SponsorsPage on SponsorsPage {\n ... on SponsorsPage {\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n sponsors {\n ... on SponsorBlock {\n id\n name\n logo {\n ...Image\n }\n text\n website\n }\n }\n }\n }\n"): (typeof documents)["\n fragment SponsorsPage on SponsorsPage {\n ... on SponsorsPage {\n title\n seoTitle\n searchDescription\n lead\n body {\n ...Blocks\n }\n sponsors {\n ... on SponsorBlock {\n id\n name\n logo {\n ...Image\n }\n text\n website\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
Reference in New Issue
Block a user