emdash 0.0.0-a → 0.0.1

package/src/components/Embed.astro

@@ -0,0 +1,128 @@
+---
+import { sanitizeHref } from "../utils/url.js";
+import { sanitizeContent } from "../utils/sanitize.js";
+
+/**
+ * Portable Text Embed block component
+ *
+ * Renders embeds from YouTube, Vimeo, Twitter, etc.
+ */
+export interface Props {
+	node: {
+		_type: "embed";
+		_key: string;
+		url: string;
+		provider?: string;
+		html?: string;
+		caption?: string;
+	};
+}
+
+const { node } = Astro.props;
+
+if (!node?.url) {
+	return null;
+}
+
+const { url: rawUrl, provider, html, caption } = node;
+const url = sanitizeHref(rawUrl);
+
+const YOUTUBE_ID_PATTERN = /(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
+const VIMEO_ID_PATTERN = /vimeo\.com\/(\d+)/;
+
+// Extract video ID for common providers
+function getYouTubeId(input: string): string | null {
+	const match = input.match(YOUTUBE_ID_PATTERN);
+	return match?.[1] || null;
+}
+
+function getVimeoId(input: string): string | null {
+	const match = input.match(VIMEO_ID_PATTERN);
+	return match?.[1] || null;
+}
+
+const youtubeId = getYouTubeId(url);
+const vimeoId = getVimeoId(url);
+
+// Check if this is a self-hosted video or audio
+const isSelfHostedVideo = provider === "video";
+const isSelfHostedAudio = provider === "audio";
+---
+
+<figure class="emdash-embed">
+	{
+		isSelfHostedVideo ? (
+			<div class="emdash-embed-video">
+				<video controls preload="metadata">
+					<source src={url} />
+					Your browser does not support the video element.
+				</video>
+			</div>
+		) : isSelfHostedAudio ? (
+			<div class="emdash-embed-audio">
+				<audio controls preload="metadata">
+					<source src={url} />
+					Your browser does not support the audio element.
+				</audio>
+			</div>
+		) : youtubeId ? (
+			<div class="emdash-embed-video">
+				<iframe
+					src={`https://www.youtube.com/embed/${youtubeId}`}
+					title="YouTube video"
+					allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+					allowfullscreen
+				/>
+			</div>
+		) : vimeoId ? (
+			<div class="emdash-embed-video">
+				<iframe
+					src={`https://player.vimeo.com/video/${vimeoId}`}
+					title="Vimeo video"
+					allow="autoplay; fullscreen; picture-in-picture"
+					allowfullscreen
+				/>
+			</div>
+		) : html ? (
+			<div class="emdash-embed-html" set:html={sanitizeContent(html)} />
+		) : (
+			<a href={url} target="_blank" rel="noopener noreferrer">
+				{url}
+			</a>
+		)
+	}
+	{caption && <figcaption>{caption}</figcaption>}
+</figure>
+
+<style>
+	.emdash-embed {
+		margin: 1.5rem 0;
+	}
+	.emdash-embed-video {
+		position: relative;
+		padding-bottom: 56.25%; /* 16:9 */
+		height: 0;
+		overflow: hidden;
+	}
+	.emdash-embed-video iframe,
+	.emdash-embed-video video {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border: 0;
+	}
+	.emdash-embed-audio {
+		width: 100%;
+	}
+	.emdash-embed-audio audio {
+		width: 100%;
+	}
+	.emdash-embed figcaption {
+		font-size: 0.875rem;
+		color: #666;
+		margin-top: 0.5rem;
+		text-align: center;
+	}
+</style>

package/src/components/File.astro

@@ -0,0 +1,122 @@
+---
+import { sanitizeHref } from "../utils/url.js";
+
+/**
+ * Portable Text File block component
+ *
+ * Renders a downloadable file link from WordPress imports.
+ */
+export interface Props {
+	node: {
+		_type: "file";
+		_key: string;
+		url: string;
+		filename?: string;
+		showDownloadButton?: boolean;
+	};
+}
+
+const { node } = Astro.props;
+const { url: rawUrl, filename, showDownloadButton = true } = node ?? {};
+const url = sanitizeHref(rawUrl);
+
+// Extract filename from URL if not provided
+const displayName = filename || url?.split("/").pop()?.split("?")[0] || "Download";
+---
+
+<div class="emdash-file">
+	<a href={url} class="emdash-file__link" download={filename}>
+		<svg
+			class="emdash-file__icon"
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+		>
+			<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+			<polyline points="14 2 14 8 20 8"></polyline>
+		</svg>
+		<span class="emdash-file__name">{displayName}</span>
+	</a>
+	{
+		showDownloadButton && (
+			<a href={url} class="emdash-file__download" download={filename} aria-label="Download file">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="2"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+					<polyline points="7 10 12 15 17 10" />
+					<line x1="12" y1="15" x2="12" y2="3" />
+				</svg>
+			</a>
+		)
+	}
+</div>
+
+<style>
+	.emdash-file {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 1rem;
+		margin: 1rem 0;
+		background-color: var(--emdash-file-bg, #f5f5f5);
+		border-radius: 4px;
+		border: 1px solid var(--emdash-file-border, #e0e0e0);
+	}
+
+	.emdash-file__link {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex: 1;
+		text-decoration: none;
+		color: var(--emdash-file-color, #333);
+	}
+
+	.emdash-file__link:hover {
+		text-decoration: underline;
+	}
+
+	.emdash-file__icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		flex-shrink: 0;
+		color: var(--emdash-file-icon-color, #666);
+	}
+
+	.emdash-file__name {
+		font-weight: 500;
+		word-break: break-all;
+	}
+
+	.emdash-file__download {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		background-color: var(--emdash-button-bg, #0073aa);
+		color: var(--emdash-button-color, #fff);
+		border-radius: 4px;
+		transition: background-color 0.2s;
+	}
+
+	.emdash-file__download:hover {
+		background-color: var(--emdash-button-bg-hover, #005177);
+	}
+
+	.emdash-file__download svg {
+		width: 1.25rem;
+		height: 1.25rem;
+	}
+</style>

package/src/components/Gallery.astro

@@ -0,0 +1,93 @@
+---
+/**
+ * Portable Text Gallery block component
+ *
+ * Renders image galleries from WordPress imports.
+ * Uses Astro's Image component for optimization when dimensions are available.
+ */
+import { Image as AstroImage } from "astro:assets";
+
+export interface Props {
+	node: {
+		_type: "gallery";
+		_key: string;
+		images: Array<{
+			_type: "image";
+			_key: string;
+			asset: {
+				_ref: string;
+				url?: string;
+			};
+			alt?: string;
+			caption?: string;
+			width?: number;
+			height?: number;
+		}>;
+		columns?: number;
+	};
+}
+
+const { node } = Astro.props;
+const images = node?.images ?? [];
+const columns = node?.columns ?? 3;
+
+if (!images.length) {
+	return null;
+}
+---
+
+<div class="emdash-gallery" style={`--columns: ${columns}`}>
+	{
+		images.map((image) => {
+			const src =
+				image.asset.url ||
+				`/_emdash/api/media/file/${image.asset._ref}`;
+			const hasSize = image.width && image.height;
+			return (
+				<figure class="emdash-gallery-item">
+					{hasSize ? (
+						<AstroImage
+							src={src}
+							alt={image.alt || ""}
+							width={image.width!}
+							height={image.height!}
+							layout="constrained"
+						/>
+					) : (
+						<img src={src} alt={image.alt || ""} loading="lazy" decoding="async" />
+					)}
+					{image.caption && <figcaption>{image.caption}</figcaption>}
+				</figure>
+			);
+		})
+	}
+</div>
+
+<style>
+	.emdash-gallery {
+		display: grid;
+		grid-template-columns: repeat(var(--columns, 3), 1fr);
+		gap: 1rem;
+		margin: 1.5rem 0;
+	}
+	.emdash-gallery-item {
+		margin: 0;
+	}
+	.emdash-gallery-item img {
+		width: 100%;
+		height: auto;
+		object-fit: cover;
+		aspect-ratio: 1;
+	}
+	.emdash-gallery-item figcaption {
+		font-size: 0.75rem;
+		color: #666;
+		margin-top: 0.25rem;
+		text-align: center;
+	}
+	@media (max-width: 640px) {
+		.emdash-gallery {
+			grid-template-columns: repeat(2, 1fr);
+		}
+	}
+</style>

package/src/components/HtmlBlock.astro

@@ -0,0 +1,33 @@
+---
+/**
+ * Portable Text HTML block component
+ *
+ * Renders raw HTML blocks that couldn't be converted to Portable Text.
+ * Sanitizes HTML to prevent XSS attacks.
+ */
+import { sanitizeContent } from "../utils/sanitize.js";
+
+export interface Props {
+	node: {
+		_type: "htmlBlock";
+		_key: string;
+		html: string;
+	};
+}
+
+const { node } = Astro.props;
+
+if (!node?.html) {
+	return null;
+}
+
+const sanitized = sanitizeContent(node.html);
+---
+
+<div class="emdash-html-block" set:html={sanitized} />
+
+<style>
+	.emdash-html-block {
+		margin: 1.5rem 0;
+	}
+</style>

package/src/components/Image.astro

@@ -0,0 +1,178 @@
+---
+/**
+ * Portable Text Image block component
+ *
+ * Renders image blocks from WordPress imports and EmDash media.
+ * Uses the provider's getSrc function for responsive srcset generation.
+ */
+import type { ImageEmbed } from "../media/types.js";
+import { getMediaProvider } from "../media/provider-loader.js";
+// Standard responsive breakpoints
+const BREAKPOINTS = [640, 750, 828, 960, 1080, 1280, 1600, 1920];
+
+export interface Props {
+	node: {
+		_type: "image";
+		_key: string;
+		asset: {
+			_ref: string;
+			url?: string;
+			/** Provider ID for external media (e.g., "cloudflare-images") */
+			provider?: string;
+			/** Provider metadata (blurhash, dominantColor, etc.) */
+			meta?: Record<string, unknown>;
+		};
+		alt?: string;
+		caption?: string;
+		/** Original image width */
+		width?: number;
+		/** Original image height */
+		height?: number;
+		/** Display width for this instance (overrides original) */
+		displayWidth?: number;
+		/** Display height for this instance (overrides original) */
+		displayHeight?: number;
+	};
+}
+
+/**
+ * Generate srcset using provider's getSrc function
+ */
+function generateSrcset(
+	getSrc: NonNullable<ImageEmbed["getSrc"]>,
+	maxWidth: number,
+	aspectRatio?: number,
+): string {
+	return BREAKPOINTS.filter((w) => w <= maxWidth * 2)
+		.map((w) => {
+			const h = aspectRatio ? Math.round(w / aspectRatio) : undefined;
+			return `${getSrc({ width: w, height: h })} ${w}w`;
+		})
+		.join(", ");
+}
+
+const { node } = Astro.props;
+
+if (!node?.asset) {
+	return null;
+}
+
+const { asset, alt = "", caption, width, height, displayWidth, displayHeight } = node;
+
+// Calculate aspect ratio from original dimensions
+const aspectRatio = width && height ? width / height : undefined;
+
+// Calculate render dimensions
+let renderWidth: number | undefined;
+let renderHeight: number | undefined;
+
+if (displayWidth && displayHeight) {
+	renderWidth = displayWidth;
+	renderHeight = displayHeight;
+} else if (displayWidth && aspectRatio) {
+	renderWidth = displayWidth;
+	renderHeight = Math.round(displayWidth / aspectRatio);
+} else if (displayHeight && aspectRatio) {
+	renderWidth = Math.round(displayHeight * aspectRatio);
+	renderHeight = displayHeight;
+} else {
+	renderWidth = width;
+	renderHeight = height;
+}
+
+// Get the image source URL and srcset
+let src = "";
+let srcset: string | undefined;
+let sizes: string | undefined;
+const providerId = asset.provider;
+
+if (providerId && providerId !== "local") {
+	// External provider
+	const provider = await getMediaProvider(providerId);
+	if (provider) {
+		try {
+			const mediaValue = {
+				provider: providerId,
+				id: asset._ref,
+				width: renderWidth,
+				height: renderHeight,
+				alt,
+			};
+			const result = provider.getEmbed(mediaValue, {
+				width: renderWidth,
+				height: renderHeight,
+			});
+			const embed = result instanceof Promise ? await result : result;
+			if (embed.type === "image") {
+				src = embed.src;
+
+				// Generate srcset if provider supports dynamic sizing
+				if (embed.getSrc) {
+					const maxWidth = renderWidth || 1200;
+					const ar = renderWidth && renderHeight ? renderWidth / renderHeight : aspectRatio;
+					srcset = generateSrcset(embed.getSrc, maxWidth, ar);
+					sizes = renderWidth
+						? `(min-width: ${renderWidth}px) ${renderWidth}px, 100vw`
+						: "100vw";
+				}
+			}
+		} catch (error) {
+			console.warn(`Failed to get embed for image ${asset._ref}:`, error);
+		}
+	}
+}
+
+// Fallback for local provider — prefer stored URL (includes storage key with extension),
+// fall back to _ref (bare ULID, works if media file endpoint supports ID lookup)
+if (!src) {
+	src = asset.url || `/_emdash/api/media/file/${asset._ref}`;
+}
+
+// Build placeholder background style
+const blurhash = asset.meta?.blurhash as string | undefined;
+const dominantColor = asset.meta?.dominantColor as string | undefined;
+
+let placeholderStyle = "";
+if (blurhash) {
+	const { blurhashToImageCssString } = await import("@unpic/placeholder");
+	placeholderStyle = blurhashToImageCssString(blurhash);
+} else if (dominantColor) {
+	placeholderStyle = `background-color: ${dominantColor};`;
+}
+
+const baseStyle = aspectRatio
+	? `aspect-ratio: ${aspectRatio}; max-width: 100%; height: auto;`
+	: "max-width: 100%; height: auto;";
+const imgStyle = placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseStyle;
+---
+
+<figure class="emdash-image">
+	<img
+		src={src}
+		srcset={srcset}
+		sizes={sizes}
+		alt={alt}
+		width={renderWidth}
+		height={renderHeight}
+		loading="lazy"
+		decoding="async"
+		style={imgStyle}
+	/>
+	{caption && <figcaption>{caption}</figcaption>}
+</figure>
+
+<style>
+	.emdash-image {
+		margin: 1.5rem 0;
+	}
+	.emdash-image img {
+		max-width: 100%;
+		height: auto;
+	}
+	.emdash-image figcaption {
+		font-size: 0.875rem;
+		color: #666;
+		margin-top: 0.5rem;
+		text-align: center;
+	}
+</style>

package/src/components/InlineEditor.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * Wrapper for the inline Portable Text editor.
+ *
+ * This exists as a separate .astro component so that the static import
+ * of the React component is visible to Astro's build pipeline — required
+ * for `client:load` to find a matching renderer.
+ */
+import { InlinePortableTextEditor } from "./InlinePortableTextEditor";
+
+export interface Props {
+	value: unknown[];
+	collection: string;
+	entryId: string;
+	field: string;
+}
+
+const { value, collection, entryId, field } = Astro.props;
+---
+
+<InlinePortableTextEditor
+	client:only="react"
+	value={value}
+	collection={collection}
+	entryId={entryId}
+	field={field}
+/>