Kickstarter dialog

config/webAwesomeBundle.css

@@ -0,0 +1 @@
+@import "../node_modules/@awesome.me/webawesome/dist/styles/webawesome.css";

config/webAwesomeBundle.js

@@ -2,3 +2,9 @@
 import "@awesome.me/webawesome/dist/components/copy-button/copy-button.js";
 // <wa-comparison>
 import "@awesome.me/webawesome/dist/components/comparison/comparison.js";
+
+// <wa-dialog>
+import "@awesome.me/webawesome/dist/components/dialog/dialog.js";
+import "@awesome.me/webawesome/dist/components/button/button.js";
+import "@awesome.me/webawesome/dist/components/icon/icon.js";
+import "@awesome.me/webawesome/dist/components/spinner/spinner.js";

eleventy.config.js

@@ -408,6 +408,7 @@ export default async function (eleventyConfig) {
 	await minifyJavaScriptFile(resolveModule("@11ty/client/md"), path.join(eleventyConfig.directories.output, "js/eleventy.engine-md.browser.js"));
 	await minifyJavaScriptFile(resolveModule("@11ty/client/liquid"), path.join(eleventyConfig.directories.output, "js/eleventy.engine-liquid.browser.js"));
 	await bundleModulePath("@awesome.me/webawesome/dist/components/copy-button/copy-button.js", path.join(eleventyConfig.directories.output, "js/copy-button.js"));
+	await bundle(["./config/webAwesomeBundle.css"], path.join(eleventyConfig.directories.output, "css/web-awesome.css"));
 	await bundle(["./config/webAwesomeBundle.js"], path.join(eleventyConfig.directories.output, "js/web-awesome.js"));
 
 	eleventyConfig.addPassthroughCopy("src/img");

src/_includes/components/announcement.css

@@ -1,19 +1,19 @@
 .announcement {
+	--btn-bg: #f0f1f3;
+	--btn-color: #183153;
+	--btn-shadow-color: #0f1f36;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: center;
 	width: 100%;
 	background-color: rgb(24, 49, 83);
 	color: #fff;
-	font-weight: 500;
+	font-weight: 600;
 	padding: 0.25em 1em;
 	text-align: center;
 	line-height: 1;
 	gap: .5em;
 }
-.elv-header-default .announcement {
-	background-color: #222;
-}
 @media (min-width: 48em) {
 	/* 768px */
 	.announcement {
@@ -24,21 +24,34 @@
 .announcement > a,
 .announcement > span {
 	display: flex;
-	gap: .25em;
-	padding: 0.35em 0;
+	align-items: center;
+	gap: .5em;
+	padding: .5em 2em;
 	text-decoration: none;
-	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	white-space: nowrap;
+	border-radius: .5em;
+	margin: .25em .25em .5em .25em;
+	border: .125rem solid var(--btn-shadow-color);
+}
+.announcement > a,
+.announcement > a:visited,
+.announcement > a:any-link {
+	background-color: var(--btn-bg);
+	color: var(--btn-color);
+	box-shadow: 0 .375rem 0 var(--btn-shadow-color);
 }
 .announcement a:hover {
 	text-decoration: underline;
 }
-.announcement,
-.announcement a,
-.announcement a:visited {
-	color: #eee;
-}
 .announcement a:after {
 	display: none;
 }
+
+.elv-header-default .announcement {
+	--btn-bg: #f0f1f3;
+	--btn-color: #333;
+	--btn-shadow-color: #666;
+	background-color: #222;
+}

src/_includes/components/header.css

@@ -1,7 +1,6 @@
-
 /* Header */
 .elv-menu {
-	background-color: rgba(255, 255, 255, .65);
+	background-color: rgba(255, 255, 255, 0.65);
 	color: var(--color);
 	backdrop-filter: blur(15px);
 }
@@ -24,7 +23,7 @@
 }
 @media (prefers-color-scheme: dark) {
 	.elv-menu {
-		background-color: rgba(0,0,0,.65);
+		background-color: rgba(0, 0, 0, 0.65);
 	}
 }
 .elv-header {
@@ -69,8 +68,8 @@
 	max-height: 2em;
 	background-color: #222;
 	text-align: center;
-	border-radius: .15em;
-	padding: 0 .25em;
+	border-radius: 0.15em;
+	padding: 0 0.25em;
 }
 .elv-nav-menu-logo svg {
 	width: 100%;
@@ -87,13 +86,14 @@
 .elv-nav-menu {
 	padding-right: 1rem;
 }
-@media (min-width: 34.4375em) and (max-width: 74.9375em) { /* 551px–1199px */
+@media (min-width: 34.4375em) and (max-width: 74.9375em) {
+	/* 551px–1199px */
 	.elv-header-docs .elv-nav-menu {
 		padding-right: 4em;
 	}
 }
 /* Sticky, #2col × 600px */
-@media (min-width: 41.4375em) and (min-height: 37.5em) {
+@media (min-width: 41.4375em) and (min-height: 43.75em) {
 	/* Take care with the sticky toc too */
 	.elv-header.elv-header-docs {
 		position: sticky;
@@ -110,31 +110,32 @@
 }
 
 .elv-nav-menu {
-	--search-bg: rgba(255,255,255,.8);
-	--search-icon: rgba(0,0,0,.4);
-	--search-border: rgba(0,0,0,.2);
+	--search-bg: rgba(255, 255, 255, 0.8);
+	--search-icon: rgba(0, 0, 0, 0.4);
+	--search-border: rgba(0, 0, 0, 0.2);
 	--search-text: #000;
 	--search-radius: 1rem;
 }
 @media (prefers-color-scheme: dark) {
 	.elv-nav-menu {
-		--search-bg: rgba(0,0,0,.8);
-		--search-icon: rgba(255,255,255,.4);
-		--search-border: rgba(255,255,255,.2);
+		--search-bg: rgba(0, 0, 0, 0.8);
+		--search-icon: rgba(255, 255, 255, 0.4);
+		--search-border: rgba(255, 255, 255, 0.2);
 		--search-text: #fff;
 	}
 }
 .elv-header-default .elv-nav-menu {
-	--search-bg: rgba(0,0,0,.8);
-	--search-icon: rgba(255,255,255,.4);
-	--search-border: rgba(255,255,255,.2);
+	--search-bg: rgba(0, 0, 0, 0.8);
+	--search-icon: rgba(255, 255, 255, 0.4);
+	--search-border: rgba(255, 255, 255, 0.2);
 	--search-text: #fff;
 }
 
 .elv-nav-menu form {
 	color: var(--search-text);
 }
-@media (min-width: 67.5em) { /* 1080px */
+@media (min-width: 67.5em) {
+	/* 1080px */
 	.elv-nav-menu form {
 		margin-inline: 2em;
 	}
@@ -151,9 +152,9 @@
 	background-color: var(--search-bg);
 }
 .elv-nav-menu button {
-	font-size: .75em;
+	font-size: 0.75em;
 	margin: 0;
-	padding-inline: .75em;
+	padding-inline: 0.75em;
 	border-radius: var(--search-radius);
 	border: none;
 	color: var(--search-icon);
@@ -185,7 +186,13 @@
 	text-decoration: none;
 }
 .elv-hero:has(.elv-hero-ba) {
-	background-image: repeating-linear-gradient(-45deg, var(--stripe-color-1), var(--stripe-color-1) 10px, var(--stripe-color-2) 10px, var(--stripe-color-2) 20px);
+	background-image: repeating-linear-gradient(
+		-45deg,
+		var(--stripe-color-1),
+		var(--stripe-color-1) 10px,
+		var(--stripe-color-2) 10px,
+		var(--stripe-color-2) 20px
+	);
 	background-color: var(--stripe-color-1);
 }
 .elv-hero-ba {
@@ -198,7 +205,7 @@
 	width: clamp(3vh, 10vh, 10em);
 	height: auto;
 	aspect-ratio: 1/1;
-	margin: .5em auto;
+	margin: 0.5em auto;
 	color: #183153;
 }
 .elv-hero-ba svg + svg {
@@ -269,7 +276,9 @@ main h1.elv-hed {
 }
 
 /* Comparison component */
-.elv-nav-header wa-comparison:not(:defined) :where([slot="before"], [slot="handle"]) {
+.elv-nav-header
+	wa-comparison:not(:defined)
+	:where([slot="before"], [slot="handle"]) {
 	display: none;
 }
 .elv-nav-header wa-comparison,
@@ -280,7 +289,7 @@ main h1.elv-hed {
 	--wa-color-surface-default: #111;
 	--wa-color-neutral-on-quiet: #fff;
 	--wa-border-radius-circle: 2.5em;
-	--wa-focus-ring: solid .1875rem #00a877;
+	--wa-focus-ring: solid 0.1875rem #00a877;
 	--wa-focus-ring-offset: 0.0625em;
 	height: 40vh;
 }
@@ -298,3 +307,16 @@ main h1.elv-hed {
 	height: auto;
 	filter: drop-shadow(3px 3px #0006);
 }
+
+.promo-dialog {
+	--width: 40em;
+	margin-block: auto;
+}
+.promo-dialog wa-button::part(base) {
+	background: #00a877;
+	color: #fff;
+	font-weight: 700;
+}
+.promo-dialog p {
+	color: black;
+}

src/_includes/header.njk

@@ -67,7 +67,6 @@
 			</a>
 			<i class="fa-solid fa-grip-vertical" slot="handle"></i>
 		</wa-comparison>
-		<script type="module" src="/js/web-awesome.js"></script>
 {%- endif %}
 
 		<is-land class="elv-possum-island" on:visible on:idle on:load on:save-data="false" on:media="(prefers-reduced-motion: no-preference)">
@@ -80,4 +79,35 @@
 			</template>
 		</is-land>
 	</div>
+
+
+	<wa-dialog id="promo-dialog" class="promo-dialog" light-dismiss>
+		<iframe class="video-player" src="https://player.vimeo.com/video/1168551192?h=6ba669b3ff&amp;badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture; clipboard-write; encrypted-media; web-share" referrerpolicy="strict-origin-when-cross-origin" title="Now on Kickstarter: Build Awesome — Collaborate on Web Sites That Last"></iframe>
+
+		<p class=""><strong>The same static site generator you know and love, now with endless Pro 'possum-bilities. But just like other parts of the Awesomeverse, Build Awesome will continue to be free and open source.</strong></p>
+
+		<wa-button slot="footer" variant="brand" href="{{ config.kickstarterUrl }}">Support the Kickstarter!</wa-button>
+	</wa-dialog>
+
+	<button id="reset-promo-dialog" onclick="localStorage.removeItem('ba-promo-dialog'); location.reload();">Reset Promo Dialog</button>
 </header>
+
+<script type="module">
+	if (!localStorage.getItem('ba-promo-dialog')) {
+
+		// Wait for Web Awesome kit to load and register components
+		try {
+			await customElements.whenDefined('wa-dialog');
+
+			const dialog = document.querySelector('#promo-dialog');
+			dialog.open = true;
+
+			// Save to localStorage when dialog is closed
+			dialog.addEventListener('wa-hide', () => {
+				localStorage.setItem('ba-promo-dialog', 'closed');
+			}, { once: true });
+		} catch (error) {
+			console.error('Error loading dialog:', error);
+		}
+	}
+</script>

src/_includes/index.css

@@ -98,6 +98,11 @@ iframe {
 	width: 100%;
 }
 
+iframe.video-player {
+	aspect-ratio: 16/9;
+	border-radius: .5em;
+}
+
 /* Blockquotes */
 blockquote {
 	font-family: Georgia, serif;

src/_includes/layouts/base.njk

@@ -165,6 +165,9 @@ let eleventyComputed = {
 {%- else %}
 		<script src="/js/eleventy.js" type="module"></script>
 {%- endif %}
+
+		<!-- Web Awesome Kit -->
+		<script src="https://kit.webawesome.com/a2ff939369d44af1.js" crossorigin="anonymous"></script>
 	</head>
 	<body>
 		{{ content | safe }}