refactor to handle elite or non-elite swapping with env variable and CLI

astro.config.mjs

@@ -4,4 +4,7 @@ import { defineConfig } from "astro/config";
 export default defineConfig({
 	site: "https://choctaw-nation.github.io",
 	base: "casino-onyx-preview",
+	build: {
+		assets: "dist",
+	},
 });

package.json

@@ -1,19 +1,18 @@
 {
-  "name": "casino-onyx-preview",
-  "type": "module",
-  "version": "1.0.0",
-  "scripts": {
-    "dev": "astro dev",
-    "start": "astro dev",
-    "build": "astro build",
-    "build-gift-event": "astro build --base=/uploads/onyx-gift-event",
-    "build-elite-gift-event": "astro build --base=/uploads/onyx-elite-gift-event",
-    "preview": "astro preview",
-    "astro": "astro"
-  },
-  "dependencies": {
-    "astro": "^4.6.3",
-    "bootstrap": "^5.3.3",
-    "sass": "^1.75.0"
-  }
+	"name": "casino-onyx-preview",
+	"type": "module",
+	"version": "1.0.0",
+	"scripts": {
+		"dev": "astro dev",
+		"start": "astro dev",
+		"build": "IS_ELITE=false astro build --base=/uploads/onyx-gift-event",
+		"build-elite": "IS_ELITE=true astro build --base=/uploads/onyx-elite-gift-event",
+		"preview": "astro preview",
+		"astro": "astro"
+	},
+	"dependencies": {
+		"astro": "^4.6.3",
+		"bootstrap": "^5.3.3",
+		"sass": "^1.75.0"
+	}
 }

src/components/DetailsGrid.astro

@@ -11,7 +11,7 @@ const dates = [
 		date: "Saturdays, May 25 & June 1",
 		times: {
 			start: "2PM",
-			end: "1PM",
+			end: "11PM",
 		},
 	},
 	{

src/components/GiftEventLogo.astro

@@ -6,13 +6,13 @@ import eliteLogoBlack from "../assets/eblast/onyx-elite-gift--black.svg";
 import eliteLogoWhite from "../assets/eblast/onyx-elite-gift--white.svg";
 
 export interface Props {
-	type: "standard" | "elite";
 	color: "black" | "white";
 	classes?: string;
 }
+const { color = "white", classes = "" } = Astro.props;
 
-const { type = "standard", color = "white", classes = "" } = Astro.props;
-
+const isElite = import.meta.env.IS_ELITE;
+const type = isElite ? "elite" : "standard";
 const alt = {
 	standard: "Onyx Gift Event",
 	elite: "Onyx Elite Gift Event",
@@ -24,8 +24,21 @@ if ("black" === color) {
 }
 ---
 
+<style>
+	.elite {
+		scale: 2;
+	}
+</style>
+
 <Picture
 	src={src}
 	alt={alt[type]}
-	class:list={[classes, "w-100", "h-100", "object-fit-contain", "d-block"]}
+	class:list={[
+		classes,
+		"w-100",
+		"h-100",
+		"object-fit-contain",
+		"d-block",
+		type === "elite" ? "elite" : "",
+	]}
 />

src/pages/index.astro

@@ -5,9 +5,13 @@ import Hero from "../sections/Hero.astro";
 import Details from "../sections/Details.astro";
 import BannerImage from "../sections/BannerImage.astro";
 import FinalCTA from "../sections/FinalCTA.astro";
+
+const title = import.meta.env.IS_ELITE
+	? "Onyx Elite Gift Event"
+	: "Onyx Gift Event";
 ---
 
-<BaseLayout title="Onyx Gift Event | Choctaw Casinos & Resorts">
+<BaseLayout title={`${title} | Choctaw Casinos & Resorts`}>
 	<Header />
 	<Hero />
 	<Details />

src/sections/Details.astro

@@ -21,11 +21,11 @@ import DetailsGrid from "../components/DetailsGrid.astro";
 		<div class="row justify-content-center">
 			<div class="col-10 col-lg-8 d-flex flex-column align-items-center">
 				<p class="text-black text-uppercase text-center">
-					EARN ONE TIER CREDIT DURING ONE OF THE DATES AND TIMES
-					BELOW, THEN VISIT ANY CHOCTAW REWARDS CLUB KIOSK TO PRINT
-					YOUR GIFT VOUCHER REDEEM YOUR GIFT VOUCHER AT THE GRAND
-					SUMMIT IN THE GRAND CASINO. PLEASE ALLOW YOURSELF TIME TO
-					MAKE YOUR SELECTION(S) AND CHECK OUT
+					Earn one tier credit during one of the dates and times
+					below, then visit any Choctaw Rewards Club kiosk to print
+					your gift voucher. Redeem your gift voucher at the Grand
+					Summit in the Grand Casino. Please allow yourself time to
+					make your selection(s) and check out.
 				</p>
 				<hr class="border-black opacity-100 w-25" />
 				<DetailsGrid />

src/sections/FinalCTA.astro

@@ -21,13 +21,13 @@ import GiftEventLogo from "../components/GiftEventLogo.astro";
 				<h2 class="fs-5 my-4 text-center">Reserve your Stay today</h2>
 				<hr class="w-25 opacity-100 border-black" />
 				<p class="fw-bold mb-5 text-center">
-					Contact your executive host today
+					Please RSVP with your executive host
 				</p>
 			</div>
 		</div>
 		<div class="row justify-content-center my-5">
 			<div class="col-6 d-flex flex-column row-gap-5">
-				<GiftEventLogo type="standard" color="black" />
+				<GiftEventLogo color="black" />
 				<CasinoLogo color="black" />
 			</div>
 		</div>

src/sections/Header.astro

@@ -11,7 +11,7 @@ import GiftEventLogo from "../components/GiftEventLogo.astro";
 		<div class="row justify-content-center">
 			<div
 				class="col-10 col-lg-6 d-flex flex-column justify-content-center row-gap-5">
-				<GiftEventLogo type="standard" color="white" classes="mb-5" />
+				<GiftEventLogo color="white" classes="mb-5" />
 				<CasinoLogo color="white" />
 			</div>
 		</div>

src/sections/Hero.astro

@@ -3,6 +3,7 @@ import { Picture } from "astro:assets";
 import ChoctawC from "../assets/eblast/choctaw-c.svg";
 import BGImage from "../components/BGImage.astro";
 import bgImage from "../assets/eblast/hero.jpg";
+const isElite = import.meta.env.IS_ELITE;
 ---
 
 <style lang="scss">
@@ -35,14 +36,14 @@ import bgImage from "../assets/eblast/hero.jpg";
 				<h2 class="fs-5 my-4">Elevate Your Expectations</h2>
 				<hr class="border-white opacity-100 w-25" />
 				<p class="text-white">
-					We are delighted to extend and exclusive invitation to you
-					as our distinguished onyx guest at the upcoming annual onyx
-					gifting event. Your're invited to select from 50+ gifts,
-					including housewares, spa/fitness, electronics, outdoor
-					accessories and jewelry.
+					We are delighted to extend an exclusive invitation to you as
+					our distinguished ONYX guest at the upcoming annual ONYX
+					{isElite ? "Elite" : ""} gifting event. You're invited to select
+					from 50+ gifts, including housewares, spa/fitness, electronics,
+					outdoor accessories and jewelry.
 				</p>
 				<hr class="border-white opacity-100 w-25" />
-				<p class="fw-bold">Contact your host for details</p>
+				<p class="fw-bold">Contact your executive host for details</p>
 			</div>
 		</div>
 	</div>