emdash-plugin-avdeb 0.1.0

package/src/astro/Button.astro

@@ -0,0 +1,131 @@
+---
+/** A call-to-action link to an AVDEB page, carrying the site's referral code. */
+import { avdebLink } from "../catalog.ts";
+import type { Alignment, ButtonVariant } from "../constants.ts";
+import type { ContextData } from "../payload.ts";
+import { relFor } from "../view.ts";
+
+interface Props {
+	context: ContextData | null;
+	href: string;
+	label: string;
+	variant?: ButtonVariant;
+	align?: Alignment;
+	class?: string;
+}
+
+const { context, href, label, variant = "solid", align = "start", class: className } = Astro.props;
+const url = avdebLink(href, context?.ref ?? "");
+const accent = context?.display.accentColor;
+const newTab = context?.display.newTab ?? false;
+---
+
+<p class:list={["avdeb-cta", `avdeb-cta--${align}`, className]} style={accent ? `--avdeb-accent:${accent}` : undefined}>
+	{
+		url ? (
+			<a class:list={["avdeb-btn", `avdeb-btn--${variant}`]} href={url} rel={relFor(url)} target={newTab ? "_blank" : undefined}>
+				<span>{label}</span>
+				<svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"><path d="M3 8h9.5M8.5 4 12.5 8l-4 4" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" /></svg>
+			</a>
+		) : (
+			<span>{label}</span>
+		)
+	}
+</p>
+
+<style is:global>
+	:where(.avdeb-cta) {
+		--avdeb-accent: #3b6548;
+		--avdeb-accent-contrast: #fff;
+		display: flex;
+		margin-block: 1.75em;
+	}
+
+	:where(.avdeb-cta--center) {
+		justify-content: center;
+	}
+
+	:where(.avdeb-cta--end) {
+		justify-content: flex-end;
+	}
+
+	:where(.avdeb-btn) {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.55em;
+		padding: 0.85em 1.4em;
+		border: 1.5px solid var(--avdeb-accent);
+		border-radius: 999px;
+		font: inherit;
+		font-weight: 600;
+		line-height: 1.1;
+		text-decoration: none;
+		transition:
+			transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
+			box-shadow 0.2s,
+			background-color 0.2s,
+			color 0.2s;
+	}
+
+	:where(.avdeb-btn svg) {
+		flex: none;
+		transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
+	}
+
+	:where(.avdeb-btn:hover) :where(svg) {
+		transform: translateX(3px);
+	}
+
+	:where(.avdeb-btn:dir(rtl)) :where(svg) {
+		scale: -1 1;
+	}
+
+	:where(.avdeb-btn:focus-visible) {
+		outline: 2px solid var(--avdeb-accent);
+		outline-offset: 3px;
+	}
+
+	:where(.avdeb-btn--solid) {
+		background: var(--avdeb-accent);
+		color: var(--avdeb-accent-contrast);
+		box-shadow: 0 10px 24px -12px var(--avdeb-accent);
+	}
+
+	:where(.avdeb-btn--solid:hover) {
+		transform: translateY(-1px);
+		box-shadow: 0 14px 30px -12px var(--avdeb-accent);
+	}
+
+	:where(.avdeb-btn--outline) {
+		background: transparent;
+		color: var(--avdeb-accent);
+	}
+
+	:where(.avdeb-btn--outline:hover) {
+		background: var(--avdeb-accent);
+		color: var(--avdeb-accent-contrast);
+	}
+
+	:where(.avdeb-btn--link) {
+		padding: 0;
+		border: 0;
+		border-radius: 0;
+		background: none;
+		color: var(--avdeb-accent);
+	}
+
+	:where(.avdeb-btn--link:hover) {
+		text-decoration: underline;
+		text-underline-offset: 0.2em;
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:where(.avdeb-btn, .avdeb-btn svg) {
+			transition: none;
+		}
+
+		:where(.avdeb-btn:hover, .avdeb-btn:hover svg) {
+			transform: none;
+		}
+	}
+</style>

package/src/astro/ButtonBlock.astro

@@ -0,0 +1,15 @@
+---
+/** Portable Text renderer for `avdeb-button` blocks. */
+import { buttonRequest } from "../blocks.ts";
+import Button from "./Button.astro";
+import { loadContext } from "./load.ts";
+
+interface Props {
+	node: Record<string, unknown>;
+}
+
+const req = buttonRequest(Astro.props.node ?? {});
+const context = await loadContext(Astro.locals, Astro.url);
+---
+
+<Button context={context} href={req.href} label={req.label} variant={req.variant} align={req.align} />