event page style tweaks

apps/nextjs/components/ComponentBlocks/custom-renders.module.scss

@@ -0,0 +1,4 @@
+.paragraph {
+	max-width: 600px;
+	margin: 2rem auto;
+}

apps/nextjs/components/ComponentBlocks/custom-renders.tsx

@@ -1,14 +1,35 @@
-import { DocumentRendererProps } from '@keystone-6/document-renderer';
-import Balance from 'react-wrap-balancer';
+import { DocumentRendererProps } from "@keystone-6/document-renderer";
+import Balance from "react-wrap-balancer";
 
-export const customDocumentRenderer: DocumentRendererProps['renderers'] = {
-	// block: {
-	// 	paragraph: ({ children, textAlign }) => {
-	// 		return (
-	// 			<Balance>
-	// 				<p style={{ textAlign }}>{children}</p>
-	// 			</Balance>
-	// 		);
-	// 	},
-	// },
+import styles from "./custom-renders.module.scss";
+
+export const customDocumentRenderer: DocumentRendererProps["renderers"] = {
+	block: {
+		paragraph: ({ children, textAlign }) => {
+			return (
+				<p style={{ textAlign }} className={styles.paragraph}>
+					{children}
+				</p>
+			);
+		},
+		heading: ({ children, textAlign, level }) => {
+			let content = <Balance>{children}</Balance>;
+
+			switch (level) {
+				case 2:
+					return <h2 style={{ textAlign }}>{content}</h2>;
+				case 3:
+					return <h3 style={{ textAlign }}>{content}</h3>;
+				case 4:
+					return <h4 style={{ textAlign }}>{content}</h4>;
+				case 5:
+					return <h5 style={{ textAlign }}>{content}</h5>;
+				case 6:
+					return <h6 style={{ textAlign }}>{content}</h6>;
+				case 1:
+				default:
+					return <h1 style={{ textAlign }}>{content}</h1>;
+			}
+		},
+	},
 };

apps/nextjs/components/ComponentBlocks/event-page.module.scss

@@ -24,7 +24,8 @@
 
 	.logo {
 		width: 700px;
-		height: 100px;
+		height: 150px;
+		margin-bottom: 32px;
 		position: relative;
 
 		@include breakpoint($sm-zero-only) {
@@ -101,9 +102,8 @@
 }
 
 .informationSection {
-	box-shadow: inset 0 0 20px 0px black;
 	background-color: $color-off-white;
-	height: 30rem;
+	min-height: 20rem;
 	width: 100%;
 
 	display: flex;
@@ -141,3 +141,9 @@
 	width: 100%;
 	height: 30rem;
 }
+
+.standardImage {
+	position: relative;
+	margin: auto;
+	display: block;
+}

apps/nextjs/components/ComponentBlocks/event-page.tsx

@@ -3,13 +3,7 @@ import { EventPageRenderers } from "@ausspeedruns/component-blocks";
 
 import Image from "next/image";
 import Button from "../Button/Button";
-import {
-	faArrowRight,
-	faTicket,
-	faCalendar,
-	faPerson,
-	faShirt,
-} from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight, faTicket, faCalendar, faPerson } from "@fortawesome/free-solid-svg-icons";
 import { Theme } from "../../styles/colors";
 import styles from "./event-page.module.scss";
 
@@ -23,53 +17,34 @@ export const EventComponentRenderers: EventPageRenderers = {
 				style={{
 					backgroundImage: `url("${props.backgroundImage}")`,
 					backgroundPosition: props.backgroundSettings.position,
-					backgroundSize: props.backgroundSettings.cover
-						? "cover"
-						: "contain",
+					backgroundSize: props.backgroundSettings.cover ? "cover" : "contain",
 					backgroundRepeat: props.backgroundSettings.repeat,
 				}}>
 				<div className={styles.logo}>
 					<Image
-						src={
-							props.event.data.logo?.url
-						}
+						src={props.darkModeLogo ? props.event.data.darkModeLogo?.url : props.event.data.logo?.url}
 						alt={`${props.event.data.shortname} Logo`}
 						style={{ objectFit: "contain" }}
 						fill
 					/>
 				</div>
 				<div className={styles.buttons}>
-					{props.donateLink && (
-						<Button
-							actionText="Donate"
-							link={props.donateLink}
-							openInNewTab
-						/>
-					)}
+					{props.donateLink && <Button actionText="Donate" link={props.donateLink} openInNewTab />}
 
 					{props.event?.data?.acceptingSubmissions && (
+						<Button actionText="Submissions are open!" link="/submit-game" iconRight={faArrowRight} />
+					)}
+
+					{props.event?.data?.acceptingBackups && !props.event?.data?.acceptingSubmissions && (
 						<Button
-							actionText="Submissions are open!"
+							actionText="Backup submissions are open!"
 							link="/submit-game"
 							iconRight={faArrowRight}
 						/>
 					)}
 
-					{props.event?.data?.acceptingBackups &&
-						!props.event?.data?.acceptingSubmissions && (
-							<Button
-								actionText="Backup submissions are open!"
-								link="/submit-game"
-								iconRight={faArrowRight}
-							/>
-						)}
-
 					{props.ticketLink && (
-						<Button
-							actionText="Purchase tickets"
-							link={props.ticketLink}
-							iconRight={faTicket}
-						/>
+						<Button actionText="Purchase tickets" link={props.ticketLink} iconRight={faTicket} />
 					)}
 
 					{props.event?.data?.scheduleReleased && (
@@ -81,12 +56,16 @@ export const EventComponentRenderers: EventPageRenderers = {
 					)}
 
 					{props.event?.data?.acceptingVolunteers && (
+						<Button actionText="Be a volunteer!" link="/volunteers" iconRight={faPerson} />
+					)}
+
+					{props.buttons.map((button) => (
 						<Button
-							actionText="Be a volunteer!"
-							link="/volunteers"
-							iconRight={faPerson}
+							actionText={button.text}
+							link={button.link}
+							openInNewTab={button.openInNewTab}
 						/>
-					)}
+					))}
 				</div>
 			</div>
 		);
@@ -102,16 +81,9 @@ export const EventComponentRenderers: EventPageRenderers = {
 					flexDirection: props.swapSides ? "row-reverse" : "row",
 				}}>
 				<div className={styles.image}>
-					<Image
-						src={props.imageUrl}
-						alt={props.imageAlt}
-						fill
-						style={{ objectFit: "cover" }}
-					/>
+					<Image src={props.imageUrl} alt={props.imageAlt} fill style={{ objectFit: "cover" }} />
 				</div>
-				<div
-					className={styles.content}
-					style={{ background: `${props.colour}d9` }}>
+				<div className={styles.content} style={{ background: `${props.colour}d9` }}>
 					<p>{props.content}</p>
 				</div>
 			</div>
@@ -147,4 +119,16 @@ export const EventComponentRenderers: EventPageRenderers = {
 			/>
 		);
 	},
+	standardImage: (props) => {
+		return (
+			<Image
+				className={styles.standardImage}
+				src={props.url}
+				style={{ objectFit: "cover" }}
+				height={props.height ?? 700}
+				width={props.width ?? 500}
+				alt={props.alt}
+			/>
+		);
+	},
 };

apps/nextjs/pages/[event].tsx

@@ -1,5 +1,5 @@
 import Head from 'next/head';
-import { gql, ssrExchange, cacheExchange, dedupExchange, fetchExchange, useQuery } from 'urql';
+import { gql, ssrExchange, cacheExchange, fetchExchange } from 'urql';
 import { DocumentRenderer } from '@keystone-6/document-renderer';
 
 import DiscordEmbed from '../components/DiscordEmbed';
@@ -160,7 +160,7 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
 				process.env.NODE_ENV === 'production'
 					? 'https://keystone.ausspeedruns.com/api/graphql'
 					: 'http://localhost:8000/api/graphql',
-			exchanges: [dedupExchange, cacheExchange, ssrCache, fetchExchange],
+			exchanges: [cacheExchange, ssrCache, fetchExchange],
 		},
 		false
 	);