@c15t/astro 3.0.0-alpha.0

package/src/components/panel.astro

@@ -0,0 +1,65 @@
+---
+/**
+ * The preference-centre dialog.
+ *
+ * Renders nothing but an empty host element. The surface itself is an
+ * island in whichever framework the `ui` option names, mounted the first
+ * time something opens it — not `client:load` — so a visitor who accepts
+ * or rejects from the banner never downloads a framework at all.
+ *
+ * ```astro
+ * ---
+ * import ConsentDialog from '@c15t/astro/components/consent-dialog.astro';
+ * ---
+ * <ConsentDialog />
+ * ```
+ */
+interface Props {
+	/**
+	 * Warm the island's chunk once the browser is idle, so the first open
+	 * is instant. Costs a background download on every page.
+	 *
+	 * @default false
+	 */
+	preload?: boolean;
+}
+
+const { preload = false } = Astro.props;
+---
+
+<div
+	data-c15t-dialog-host="preferences"
+	data-preload={preload ? 'true' : undefined}
+>
+</div>
+
+<script>
+	import {
+		getConsentClient,
+		openDialog,
+		preloadDialog,
+	} from '@c15t/astro/client';
+
+	// The island's specifier is not written here: only the integration knows
+	// which framework `ui` selected, and naming all of them would make every
+	// build resolve every framework. It registers the one surface from the
+	// page script it injects.
+	const host = document.querySelector('[data-c15t-dialog-host="preferences"]');
+
+	if (host?.getAttribute('data-preload') === 'true') {
+		const schedule = () => {
+			void preloadDialog();
+		};
+		if ('requestIdleCallback' in window) {
+			window.requestIdleCallback(schedule);
+		} else {
+			window.setTimeout(schedule, 2000);
+		}
+	}
+
+	// A page can ask for the dialog before the runtime has booted (a link
+	// with `#c15t-preferences`, say); replaying it here keeps that working.
+	if (window.location.hash === '#c15t-preferences' && getConsentClient()) {
+		void openDialog('preferences');
+	}
+</script>

package/src/components/prompt-deferred.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * The banner as a server island.
+ *
+ * A statically cached page cannot carry a per-visitor consent decision: the
+ * first visitor's country would be baked into the HTML every later visitor
+ * receives. This variant renders the page from cache and defers only the
+ * banner to a per-request island, so geo, GPC and the stored consent cookie
+ * are all still honoured.
+ *
+ * ```astro
+ * ---
+ * import ConsentBannerDeferred from '@c15t/astro/components/consent-banner-deferred.astro';
+ * ---
+ * <ConsentBannerDeferred />
+ * ```
+ *
+ * Needs an adapter with on-demand rendering available (`output: 'server'`,
+ * or `output: 'static'` with the page's own `prerender` left on and the
+ * adapter configured). Without one, use `<ConsentBanner />` on an
+ * on-demand-rendered page instead.
+ */
+import type { LegalLinks } from '@c15t/core';
+import ConsentBanner from './prompt.astro';
+
+/** Every `<ConsentBanner />` prop, forwarded to the deferred island. */
+interface Props {
+	/** Override the banner heading. */
+	title?: string;
+	/** Override the banner body copy. */
+	description?: string;
+	/** Override the reject button label. */
+	rejectButtonText?: string;
+	/** Override the accept button label. */
+	acceptButtonText?: string;
+	/** Override the customize button label. */
+	customizeButtonText?: string;
+	/** Ship the DOM without the bundled stylesheet's class names. */
+	noStyle?: boolean;
+	/** Extra class on the banner root. */
+	class?: string;
+	/** Which legal links to render inline. `null` renders none. */
+	legalLinks?: (keyof LegalLinks)[] | null;
+	/**
+	 * Render even when the server decided the banner should stay hidden.
+	 * Useful for visual testing.
+	 */
+	force?: boolean;
+}
+---
+
+<ConsentBanner server:defer {...Astro.props}>
+	<slot name="fallback" slot="fallback" />
+</ConsentBanner>

package/src/components/prompt.astro

@@ -0,0 +1,325 @@
+---
+/**
+ * Server-rendered consent banner.
+ *
+ * The shell — markup, copy, layout, the policy-driven button order — is
+ * produced on the server with zero framework JavaScript. Only one small
+ * bundled script ships, and it is shared by every banner on the site: a
+ * delegated click handler that turns `data-c15t-action` into runtime calls.
+ *
+ * The server renders the banner only when the decision it already resolved
+ * says to, so a returning visitor gets no banner markup at all — no client
+ * bytes and no flash. The same DOM shape and the same `data-testid`s as the
+ * Svelte and React banners, so cross-framework tests and CSS both hold.
+ *
+ * ```astro
+ * ---
+ * import ConsentBanner from '@c15t/astro/components/consent-banner.astro';
+ * ---
+ * <ConsentBanner />
+ * ```
+ */
+import {defaultTranslationConfig, resolveConsentPresentation} from '@c15t/core';
+import type { LegalLinks, TranslationsResponse } from '@c15t/core';
+import {
+	buildColorSchemeScript,
+	buildConfigScript,
+	markConfigEmitted,
+} from '@c15t/astro/server';
+import Branding from './branding.astro';
+import actionStyles from '@c15t/ui/styles/components/consent-actions';
+import styles from '@c15t/ui/styles/components/consent-banner';
+import buttonStyles from '@c15t/ui/styles/components/button';
+import { getTextDirection } from '@c15t/ui/utils';
+
+interface Props {
+	/** Override the banner heading. */
+	title?: string;
+	/** Override the banner body copy. */
+	description?: string;
+	/** Override the reject button label. */
+	rejectButtonText?: string;
+	/** Override the accept button label. */
+	acceptButtonText?: string;
+	/** Override the notice acknowledgement label. */
+	dismissButtonText?: string;
+	/** Override the customize button label. */
+	customizeButtonText?: string;
+	/** Ship the DOM without the bundled stylesheet's class names. */
+	noStyle?: boolean;
+	/** Extra class on the banner root. */
+	class?: string;
+	/** Drop the "Secured by c15t" tag. */
+	hideBranding?: boolean;
+	/** Which legal links to render inline. `null` renders none. */
+	legalLinks?: (keyof LegalLinks)[] | null;
+	/**
+	 * Render even when the server decided the banner should stay hidden.
+	 * Useful for visual testing.
+	 */
+	force?: boolean;
+}
+
+const {
+	title,
+	description,
+	rejectButtonText,
+	acceptButtonText,
+	dismissButtonText,
+	customizeButtonText,
+	noStyle = false,
+	class: className,
+	hideBranding = false,
+	legalLinks = null,
+	force = false,
+} = Astro.props;
+
+const { c15t } = Astro.locals;
+
+if (!c15t) {
+	throw new Error(
+		'@c15t/astro: `Astro.locals.c15t` is missing. The c15t() integration registers the middleware that populates it — check it is listed in astro.config, and that you have not set `middleware: false`.'
+	);
+}
+
+const { snapshot } = c15t;
+// No resolved policy means no consent surface, even when forced.
+const shouldRender = c15t.hasConsentUi && (force || c15t.shouldShowBanner);
+const emitConfig = markConfigEmitted(Astro.locals);
+// A fallback for layouts with no <ConsentScript /> in <head>. It still runs
+// before the banner markup it precedes, so the first paint is right.
+const colorSchemeScript = emitConfig
+	? buildColorSchemeScript(c15t.options.colorScheme)
+	: '';
+
+const fallback = defaultTranslationConfig.translations.en as TranslationsResponse;
+const bundle = (snapshot.translations?.translations ?? fallback) as TranslationsResponse;
+// A notice prompt explains and points at the opt-out; it never asks.
+const notice = snapshot.policyRule.prompt === 'notice';
+const copy = {
+	accept: acceptButtonText ?? bundle.common?.acceptAll ?? fallback.common.acceptAll,
+	customize:
+		customizeButtonText ?? bundle.common?.customize ?? fallback.common.customize,
+	description:
+		description ??
+		(notice
+			? (bundle.cookieBanner?.noticeDescription ?? fallback.cookieBanner.noticeDescription)
+			: (bundle.cookieBanner?.description ?? fallback.cookieBanner.description)),
+	// Acknowledgement leaves category choices and permissions unchanged.
+	dismiss: dismissButtonText ?? bundle.common?.acknowledge ?? bundle.common?.dismiss ?? fallback.common.acknowledge,
+	reject: rejectButtonText ?? bundle.common?.rejectAll ?? fallback.common.rejectAll,
+	securedBy: bundle.common?.securedBy ?? fallback.common.securedBy,
+	title:
+		title ??
+		(notice
+			? (bundle.cookieBanner?.noticeTitle ?? fallback.cookieBanner.noticeTitle)
+			: (bundle.cookieBanner?.title ?? fallback.cookieBanner.title)),
+};
+const rightLabels: Record<string, string> = {
+	'opt-out': bundle.rights?.optOut ?? fallback.rights.optOut,
+	preferences: bundle.rights?.preferences ?? fallback.rights.preferences,
+};
+
+const textDirection = getTextDirection(snapshot.translations?.language);
+
+// Same policy-driven action resolution the Svelte and React banners use, so
+// an opt-out or IAB policy produces the same buttons in the same order.
+const presentation = resolveConsentPresentation({policy: snapshot.policyRule, presentation: c15t.options.presentation, surface: 'prompt'});
+const {
+	actionGroups,
+	blocking,
+	direction,
+	primaryActions,
+	shouldFillActions: shouldFill,
+	preferenceControls,
+	variant,
+} = presentation;
+
+// A corner the host did not choose follows the text direction, the same
+// mirroring the React and Svelte roots apply; a host corner is kept as is.
+const mirrorCorner = function mirrorCorner(position: string): string {
+	if (position.endsWith('-left')) {
+		return position.replace(/-left$/u, '-right');
+	}
+	if (position.endsWith('-right')) {
+		return position.replace(/-right$/u, '-left');
+	}
+	return position;
+};
+const position =
+	textDirection === 'rtl' &&
+	presentation.positionSource === 'default' &&
+	(variant === 'floating' || variant === 'widget')
+		? mirrorCorner(presentation.position)
+		: presentation.position;
+
+const labels: Record<string, string> = {
+	accept: copy.accept,
+	customize: copy.customize,
+	dismiss: copy.dismiss,
+	reject: copy.reject,
+};
+
+const rootClass = [
+	noStyle ? '' : styles.root,
+	noStyle ? '' : styles.bannerVisible,
+	className,
+]
+	.filter(Boolean)
+	.join(' ');
+
+const inlineLegalLinks = (legalLinks ?? []).filter(
+	(key) => c15t.options.legalLinks?.[key]
+);
+---
+
+{
+	emitConfig && colorSchemeScript && (
+		<script is:inline set:html={colorSchemeScript} />
+	)
+}
+
+{emitConfig && <script is:inline set:html={buildConfigScript(c15t.config)} />}
+
+{
+	shouldRender && blocking && (
+		<div
+			aria-hidden="true"
+			class={noStyle ? '' : `${styles.overlay} ${styles.overlayVisible}`}
+			data-testid="consent-banner-overlay"
+		/>
+	)
+}
+
+{
+	shouldRender && (
+		<div
+			class={rootClass}
+			data-blocking={blocking ? 'true' : undefined}
+			data-c15t-visible="true"
+			data-model={snapshot.policyRule.model}
+			data-position={position}
+			data-prompt={snapshot.policyRule.prompt === 'none' ? undefined : snapshot.policyRule.prompt}
+			data-testid="consent-banner-root"
+			data-variant={variant}
+			dir={textDirection}
+			lang={snapshot.translations?.language}
+		>
+			<div class={noStyle ? '' : styles.cardShell}>
+				<Branding
+					branding={snapshot.branding}
+					data-testid="consent-banner-branding"
+					hide={hideBranding}
+					hostname={Astro.url.hostname}
+					noStyle={noStyle}
+					securedBy={copy.securedBy}
+					variant="banner-tag"
+				/>
+				<div
+					aria-label={copy.title}
+					aria-modal={blocking ? "true" : undefined}
+					class={noStyle ? '' : styles.card}
+					data-testid="consent-banner-card"
+					role={blocking ? "dialog" : "region"}
+					tabindex="-1"
+				>
+					<div
+						class={noStyle ? '' : styles.header}
+						data-testid="consent-banner-header"
+					>
+						<h2
+							class={noStyle ? '' : styles.title}
+							data-testid="consent-banner-title"
+						>
+							{copy.title}
+						</h2>
+						<div
+							class={noStyle ? '' : styles.description}
+							data-context="banner"
+							data-testid="consent-banner-description"
+						>
+							{copy.description}
+							{inlineLegalLinks.map((key) => (
+								<a
+									data-testid={`consent-banner-legal-link-${key}`}
+									href={c15t.options.legalLinks?.[key]?.href}
+									rel="noreferrer"
+									target="_blank"
+								>
+									{c15t.options.legalLinks?.[key]?.label ?? key}
+								</a>
+							))}
+						</div>
+					</div>
+					<div
+						class={[noStyle ? '' : actionStyles.actionRoot, noStyle ? '' : styles.footer]
+							.filter(Boolean)
+							.join(' ')}
+						data-direction={direction}
+						data-fill={shouldFill ? 'true' : undefined}
+						data-split={actionGroups.length > 1 && !shouldFill ? 'true' : undefined}
+						data-testid="consent-banner-footer"
+					>
+						{preferenceControls.length > 0 && (
+							<div
+								class={noStyle ? '' : styles.rights}
+								data-testid="consent-banner-rights"
+							>
+								{preferenceControls.map((right) => (
+									<button
+										class={noStyle ? '' : styles.rightLink}
+										data-action="right"
+										data-c15t-action="customize"
+										data-right={right}
+										data-testid={`consent-banner-right-link-${right}`}
+										type="button"
+									>
+										{rightLabels[right] ?? right}
+									</button>
+								))}
+							</div>
+						)}
+						{actionGroups.map((group) => (
+							<div
+								class={noStyle ? '' : actionStyles.actionGroup}
+								data-direction={direction}
+								data-fill={shouldFill ? 'true' : undefined}
+								data-testid="consent-banner-footer-sub-group"
+							>
+								{group.map((action) => (
+									<button
+										class={noStyle ? '' : buttonStyles.button}
+										data-action={action}
+										data-c15t-action={action}
+										data-mode={noStyle ? undefined : 'stroke'}
+										data-size={noStyle ? undefined : 'small'}
+										data-testid={`consent-banner-${action}-button`}
+										data-variant={
+											noStyle
+												? undefined
+												: primaryActions.includes(action)
+													? 'primary'
+													: 'neutral'
+										}
+										type="button"
+									>
+										{labels[action] ?? action}
+									</button>
+								))}
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}
+
+<script>
+	// The banner's only client-side code: one delegated listener, shared by
+	// every banner and dialog trigger on the site. Astro bundles and dedupes
+	// this module across pages.
+	import { attachBannerActions } from '@c15t/astro/client';
+
+	attachBannerActions();
+</script>