Integrate Final Fundraising Content

.github/workflows/azure-static-web-apps-ambitious-coast-0c7656e10.yml

@@ -0,0 +1,53 @@
+name: Azure Static Web Apps CI/CD
+
+on:
+  push:
+    branches:
+      - staging
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - staging
+
+jobs:
+  build_and_deploy_job:
+    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v5
+        with:
+          submodules: true
+          lfs: false
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v5
+        with:
+          node-version-file: .nvmrc
+          cache: npm
+
+      - name: Build and Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_COAST_0C7656E10 }}
+          repo_token: ${{ secrets.GITHUB_TOKEN }}
+          action: "upload"
+          app_location: "/"
+          api_location: ""
+          output_location: "dist"
+
+  close_pull_request_job:
+    if: github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request
+
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_AMBITIOUS_COAST_0C7656E10 }}
+          action: "close"

src/components/BoardMemberCard.astro

@@ -2,27 +2,27 @@
 interface Props {
 	name: string;
 	role: string;
-	image?: string | null;
-	bio: string;
+	image?: string;
 }
 
-const { name, role, image, bio } = Astro.props;
+const { name, role, image } = Astro.props;
 ---
 
 <article class="board-member-card">
-	<div class="board-member-image">
-		{image ? (
-			<img src={image} alt={`Headshot of ${name}`} loading="lazy" />
-		) : (
-			<div class="board-member-image-placeholder" aria-hidden="true">
-				<span>Headshot</span>
+	{
+		image && (
+			<div class="board-member-image">
+				<img src={image} alt={`Portrait of ${name}`} />
 			</div>
-		)}
-	</div>
+		)
+	}
 
 	<div class="board-member-content">
 		<h2>{name}</h2>
 		<p class="board-member-role">{role}</p>
-		<p>{bio}</p>
+
+		<div class="board-member-bio">
+			<slot />
+		</div>
 	</div>
 </article>

src/components/CompetitionCard.astro

@@ -1,22 +1,102 @@
 ---
+import { formatDate, formatTime } from "../utils/dateTime";
+
+interface Image {
+	src: string;
+	alt: string;
+}
+
 interface Props {
 	title: string;
 	date: string;
-	description: string;
+	time: string;
 	location?: string;
+	images?: Image[];
 }
 
-const { title, date, description, location } = Astro.props;
+const { title, date, time, location, images = [] } = Astro.props;
+
+const formattedDate = formatDate(date);
+const formattedTime = formatTime(time);
+
+const carouselId = `competition-carousel-${date}-${title}`
+	.toLowerCase()
+	.replace(/[^a-z0-9]+/g, "-")
+	.replace(/^-|-$/g, "");
 ---
 
 <article class="competition-card">
+	{
+		images.length === 1 && (
+			<img
+				src={images[0].src}
+				alt={images[0].alt}
+				class="competition-card-image"
+			/>
+		)
+	}
+
+	{
+		images.length > 1 && (
+			<div id={carouselId} class="carousel slide">
+				<div class="carousel-inner">
+					{images.map((image, index) => (
+						<div
+							class:list={[
+								"carousel-item",
+								{ active: index === 0 },
+							]}
+						>
+							<img
+								src={image.src}
+								alt={image.alt}
+								class="d-block w-100 competition-card-image"
+							/>
+						</div>
+					))}
+				</div>
+
+				<button
+					class="carousel-control-prev"
+					type="button"
+					data-bs-target={`#${carouselId}`}
+					data-bs-slide="prev"
+				>
+					<span
+						class="carousel-control-prev-icon"
+						aria-hidden="true"
+					></span>
+					<span class="visually-hidden">Previous</span>
+				</button>
+
+				<button
+					class="carousel-control-next"
+					type="button"
+					data-bs-target={`#${carouselId}`}
+					data-bs-slide="next"
+				>
+					<span
+						class="carousel-control-next-icon"
+						aria-hidden="true"
+					></span>
+					<span class="visually-hidden">Next</span>
+				</button>
+			</div>
+		)
+	}
 	<div class="competition-card-content">
-		<p class="competition-card-date">{date}</p>
+		<p class="competition-card-date">
+			<time datetime={`${date}T${time}`}>
+				{formattedDate} · {formattedTime}
+			</time>
+		</p>
 
 		<h2>{title}</h2>
 
 		{location && <p class="competition-card-location">{location}</p>}
 
-		<p>{description}</p>
+		<div class="competition-card-description">
+			<slot />
+		</div>
 	</div>
 </article>

src/components/EventCard.astro

@@ -1,22 +1,102 @@
 ---
+import { formatDate, formatTime } from "../utils/dateTime";
+
+interface Image {
+	src: string;
+	alt: string;
+}
+
 interface Props {
 	title: string;
 	date: string;
-	description: string;
+	time?: string;
 	location?: string;
+	images?: Image[];
 }
 
-const { title, date, description, location } = Astro.props;
+const { title, date, time, location, images = [] } = Astro.props;
+
+const formattedDate = formatDate(date);
+const formattedTime = time ? formatTime(time) : null;
+
+const carouselId = `event-carousel-${date}-${title}`
+	.toLowerCase()
+	.replace(/[^a-z0-9]+/g, "-")
+	.replace(/^-|-$/g, "");
 ---
 
 <article class="event-card">
+	{
+		images.length === 1 && (
+			<img
+				src={images[0].src}
+				alt={images[0].alt}
+				class="event-card-image"
+			/>
+		)
+	}
+
+	{
+		images.length > 1 && (
+			<div id={carouselId} class="carousel slide">
+				<div class="carousel-inner">
+					{images.map((image, index) => (
+						<div
+							class:list={[
+								"carousel-item",
+								{ active: index === 0 },
+							]}
+						>
+							<img
+								src={image.src}
+								alt={image.alt}
+								class="d-block w-100 event-card-image"
+							/>
+						</div>
+					))}
+				</div>
+
+				<button
+					class="carousel-control-prev"
+					type="button"
+					data-bs-target={`#${carouselId}`}
+					data-bs-slide="prev"
+				>
+					<span
+						class="carousel-control-prev-icon"
+						aria-hidden="true"
+					></span>
+					<span class="visually-hidden">Previous</span>
+				</button>
+
+				<button
+					class="carousel-control-next"
+					type="button"
+					data-bs-target={`#${carouselId}`}
+					data-bs-slide="next"
+				>
+					<span
+						class="carousel-control-next-icon"
+						aria-hidden="true"
+					></span>
+					<span class="visually-hidden">Next</span>
+				</button>
+			</div>
+		)
+	}
 	<div class="event-card-content">
-		<p class="event-card-date">{date}</p>
+		<p class="event-card-date">
+			<time datetime={time ? `${date}T${time}` : date}>
+				{formattedDate}{formattedTime && ` · ${formattedTime}`}
+			</time>
+		</p>
 
 		<h2>{title}</h2>
 
 		{location && <p class="event-card-location">{location}</p>}
 
-		<p>{description}</p>
+		<div class="event-card-description">
+			<slot />
+		</div>
 	</div>
 </article>

src/components/Footer.astro

@@ -12,24 +12,13 @@
 			<div class="col-md-6">
 				<nav aria-label="Footer navigation">
 					<ul class="footer-nav list-unstyled mb-0">
-						<li>
-							<a href="/">Home</a>
-						</li>
-						<li>
-							<a href="/about">About</a>
-						</li>
-						<li>
-							<a href="/programs">Programs</a>
-						</li>
-						<li>
-							<a href="/get-involved">Get Involved</a>
-						</li>
-						<li>
-							<a href="/resources">Resources</a>
-						</li>
-						<li>
-							<a href="/contact">Contact</a>
-						</li>
+						<li><a href="/">Home</a></li>
+						<li><a href="/board">The Board</a></li>
+						<li><a href="/events">Events</a></li>
+						<li><a href="/competitions">Competitions</a></li>
+						<li><a href="/meetings">General Meetings</a></li>
+						<li><a href="/fundraising">Fundraising</a></li>
+						<li><a href="/resources">Resources</a></li>
 					</ul>
 				</nav>
 			</div>