Merge pull request #90 from Gum-Joe/charity-culture-week-2024-update

Charity culture week 2024 update

Dockerfile.eventbrite

@@ -0,0 +1,18 @@
+FROM node:lts-alpine
+ENV NODE_ENV=production
+WORKDIR /usr/src/app
+
+COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "yarn.lock", ".yarnrc.yml", "tsconfig.json", "./"]
+COPY ./.yarn ./.yarn
+COPY ./config ./config
+COPY ./.yarn ./.yarn
+COPY "./packages" "./packages"
+COPY "./server" "./server"
+RUN chown -R node /usr/src/app
+USER node
+RUN yarn set version ./.yarn/releases/yarn-3.2.0.cjs
+RUN yarn
+RUN yarn run build
+EXPOSE 4000
+
+CMD ["yarn", "workspace", "@isitweeka/service-eventbrite", "start"]

Dockerfile.server

@@ -0,0 +1,17 @@
+FROM node:lts-alpine
+ENV NODE_ENV=production
+WORKDIR /usr/src/app
+
+COPY ["package.json", "package-lock.json*", "npm-shrinkwrap.json*", "yarn.lock", ".yarnrc.yml", "tsconfig.json", "./"]
+COPY ./.yarn ./.yarn
+COPY ./config ./config
+COPY "./packages" "./packages"
+COPY "./server" "./server"
+RUN chown -R node /usr/src/app
+USER node
+RUN yarn set version ./.yarn/releases/yarn-3.2.0.cjs
+RUN yarn
+RUN yarn run build
+EXPOSE 4000
+
+CMD ["yarn", "workspace", "isitweeka-server", "start"]

docker-compose.yml

@@ -14,16 +14,16 @@ services:
     links:
       - redis
 
-  service-kech:
-    image: ghcr.io/gum-joe/isitweeka-service-kech
-    build:
-      context: .
-      dockerfile: ./packages/@isitweeka/service-kech/Dockerfile
-    environment:
-      NODE_ENV: production
-      IIWA_REDIS_URL: redis://redis_comms:6379
-    links:
-      - redis
+  # service-kech:
+  #   image: ghcr.io/gum-joe/isitweeka-service-kech
+  #   build:
+  #     context: .
+  #     dockerfile: ./packages/@isitweeka/service-kech/Dockerfile
+  #   environment:
+  #     NODE_ENV: production
+  #     IIWA_REDIS_URL: redis://redis_comms:6379
+  #   links:
+  #     - redis
 
   service-eventbrite:
     image: ghcr.io/gum-joe/isitweeka-service-eventbrite

frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontend",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "private": true,
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.36",

frontend/src/components/EventsList.tsx

@@ -37,7 +37,9 @@ export enum KECHBHouses {
 export interface BaseEventItem {
 	title: string;
 	description?: string;
-	headerURL: string;
+	headerURL?: string;
+	/** Display title as text? Automatically enabled if no header image URL is set. */
+	displayTitle?: boolean;
 	backgroundColor: string;
 	// HACK: So that it won't complain about the JSON. Please remove eventually
 	eventType: EventTypes | string;
@@ -48,7 +50,7 @@ export interface BaseEventItem {
 		color?: string;
 		backgroundColor?: string;
 		/** underline: button has an underline. fill: button has a fill instead */
-		type: "underline" | "fill";
+		type?: "underline" | "fill";
 		/** Change the CTA text */
 		text?: string,
 	},

frontend/src/components/Footer.tsx

@@ -56,7 +56,7 @@ const Footer: React.FC = () => {
 					<ul>
 						<a target="__blank" href="https://github.com/ILikeTeaALot"><li><FontAwesomeIcon icon={faGithub} /> GitHub</li></a>
 						<a target="__blank" href="https://www.rykan.net"><li><FontAwesomeIcon icon={faLink} /> rykan.net</li></a>
-						<a target="__blank" href="https://www.madelinehart.co.uk"><li><FontAwesomeIcon icon={faLink} /> madelinehart.co.uk</li></a>
+						<a target="__blank" href="https://iliketeaalot.github.io"><li><FontAwesomeIcon icon={faLink} /> Website</li></a>
 						<a target="__blank" href="mailto:[email protected]"><li><FontAwesomeIcon icon={faAt} /> Email</li></a>
 					</ul>
 				</div>

frontend/src/components/New/Card.tsx

@@ -14,51 +14,75 @@ function reportOutboundButtonClick() {
 	});
 }
 
-type CardTypes = "legacy" | "new";
+type CardTypes = "new";
 
-export type NewCardExt = { cardType: CardTypes; stats?: Array<{ title: string; value: string }> };
+export type NewCardExt = { cardType: CardTypes; stats?: Array<{ title: string; value: string; }>; };
 
 // TODO: Implement Button.
 export const Card: React.FunctionComponent<EventItem & NewCardExt> = (props) => {
 	if (props.hidden) return null;
-	
+
 	const panelStyle = props.backgroundColor ? {
 		backgroundColor: props.eventType === EventTypes.HOUSE ? HOUSE_EVENT_PENDING_BG : props.backgroundColor,
 		color: props.textColour,
 	} : undefined;
-	
-	switch (props.cardType) {
-		case "legacy":
-			return (
-				<div className="card" style={{ backgroundColor: props.textColour }}>
-					<div className="panel title text big" style={panelStyle}>{props.title}</div>
-					{props.description ? <div className="panel description text body" style={panelStyle}>{props.description}</div> : null}
-					<div className="panel stats" style={panelStyle}>
-						{///@ts-expect-error JS object checking existence TS doesn't like...
-							props.when || props.dateTime ? <div className="stat">
-							<div className="stat-label text big">When</div>
-							<div className="stat-value text big">{props.when ||
-								/// @ts-expect-error TS Doesn't understand that I know better than it when certain data exists
-								props.dateTime}</div>
-						</div> : null}
-					</div>
-					{props.eventType === EventTypes.HOUSE && props.currentVictor ? <div className="panel stats" style={{ backgroundColor: props.backgroundColor }}>
-						<div className="stat">
-							<div className="stat-label text big">Victor</div>
-							<div className="stat-value text big">{props.currentVictor}</div>
-						</div>
-					</div> : null}
-					{/* Allow House Events to have links */}
-					{props.url ? <a className="panel cta" onClick={reportOutboundButtonClick} href={props.url} style={{ ...props.cta }}>
-						<div className="text big">{ props.cta?.text || "Buy Tickets" }  →</div>
-					</a> : null}
-				</div>
-			);
-	}
+
+	// switch (props.cardType) {
+	// 	case "legacy":
+	// 		return (
+	// 			<div className="card" style={{ backgroundColor: props.textColour }}>
+	// 				<div className="panel title text big" style={panelStyle}>{props.title}</div>
+	// 				{props.description ? <div className="panel description text body" style={panelStyle}>{props.description}</div> : null}
+	// 				<div className="panel stats" style={panelStyle}>
+	// 					{///@ts-expect-error JS object checking existence TS doesn't like...
+	// 						props.when || props.dateTime ? <div className="stat">
+	// 							<div className="stat-label text big">When</div>
+	// 							<div className="stat-value text big">{props.when ||
+	// 								/// @ts-expect-error TS Doesn't understand that I know better than it when certain data exists
+	// 								props.dateTime}</div>
+	// 						</div> : null}
+	// 				</div>
+	// 				{props.eventType === EventTypes.HOUSE && props.currentVictor ? <div className="panel stats" style={{ backgroundColor: props.backgroundColor }}>
+	// 					<div className="stat">
+	// 						<div className="stat-label text big">Victor</div>
+	// 						<div className="stat-value text big">{props.currentVictor}</div>
+	// 					</div>
+	// 				</div> : null}
+	// 				{/* Allow House Events to have links */}
+	// 				{props.url ? <a className="panel cta" onClick={reportOutboundButtonClick} href={props.url} style={{ ...props.cta }}>
+	// 					<div className="text big">{props.cta?.text || "Buy Tickets"}  →</div>
+	// 				</a> : null}
+	// 			</div>
+	// 		);
+	// }
 	return (
-		<div className="card">
-			<div className="panel title text big">{props.title}</div>
-			<div className="panel description text body">{props.description}</div>
+		<div className="card" style={{
+			/// @ts-expect-error TS doesn't understand CSS vars
+			"--panel-bg": props.backgroundColor,
+		}}>
+			<div className="panel title text big" style={{ position: "relative", padding: props.headerURL ? 0 : undefined }}>
+				{props.headerURL ? <img alt={props.title} src={props.headerURL} style={{
+					scale: "1.04", // HACK :: SVGs that don't fit nicely don't work properly.
+					objectFit: "cover",
+				}} /> : null}
+				{props.displayTitle || !props.headerURL ? <span style={props.headerURL ? {
+					position: "absolute",
+					margin: "auto",
+					left: 0,
+					right: 0,
+					top: 0,
+					bottom: 0,
+					textAlign: "center",
+					display: "flex",
+					justifyContent: "center",
+					alignContent: "center",
+					alignItems: "center",
+					textShadow: props.title && props.headerURL ? "0px 0px 3px var(--panel-bg), 0px 0px 1px var(--panel-bg)" : undefined
+				} : undefined}>
+					{props.title}
+				</span> : null}
+			</div>
+			{props.description ? <div className="panel description text body">{props.description}</div> : null}
 			{props.stats ? <div className="panel stats">{props.stats.map((stat, index) => {
 				return (
 					<div className="stat text big" key={stat.title}>
@@ -67,14 +91,24 @@ export const Card: React.FunctionComponent<EventItem & NewCardExt> = (props) =>
 					</div>
 				);
 			})}</div> : null}
+			{///@ts-expect-error JS object checking existence TS doesn't like...
+				props.when || props.dateTime ?
+					<div className="panel stats" style={panelStyle}>
+						<div className="stat">
+							<div className="stat-label text big">When</div>
+							<div className="stat-value text big">{props.when ||
+								/// @ts-expect-error TS Doesn't understand that I know better than it when certain data exists
+								props.dateTime}</div>
+						</div>
+					</div> : null}
 			{props.eventType === EventTypes.HOUSE ? <div className="panel stats">
 				<div className="stat">
 					<div className="stat-label">Victor</div>
 					<div className="stat-value">{props.currentVictor}</div>
 				</div>
 			</div> : null}
-			{props.eventType === EventTypes.CHARITY || props.eventType === EventTypes.FUNDRIASER && props.url ? <a className="panel cta" onClick={reportOutboundButtonClick} href={props.url} style={{ ...props.cta }}>
-				<div className="text big">{ props.cta?.text || "Buy Tickets" }  →</div>
+			{(props.eventType === EventTypes.CHARITY || props.eventType === EventTypes.FUNDRIASER) && props.url ? <a className="panel cta" onClick={reportOutboundButtonClick} href={props.url} style={{ ...props.cta }}>
+				<div className="text big">{props.cta?.text || "Buy Tickets"}  →</div>
 			</a> : null}
 		</div>
 	);

frontend/src/components/New/EventsGrid.tsx

@@ -48,7 +48,7 @@ export const EventsGrid: React.FunctionComponent<EventsListProps> = (props) => {
 				{filteredEvents.length > 0 ? masonryColumns.map((content, index) => (
 					<div className="column" key={index}>
 						{content.map((theEvent, index) => (
-							<Card key={index} cardType={theEvent.eventType === "news" ? "new" : "legacy"} {...theEvent} />
+							<Card key={index} cardType={theEvent.eventType === "news" ? "new" : "new"} {...theEvent} />
 						))}
 					</div>
 				)) :

frontend/src/components/New/Special/CharityWidget.tsx

@@ -26,7 +26,7 @@ export interface CharityProps {
 	};
 }
 
-export const CharityWidget: React.FunctionComponent<CharityProps> = (props) => {
+export const CharityWidget = (props: CharityProps) => {
 	return (
 		<div className="cw-cards">
 			<div className="cw-header desktop">