dineway 0.1.3 → 0.1.5

package/src/components/DinewayMedia.astro

@@ -0,0 +1,167 @@
+---
+/**
+ * Dineway Media component
+ *
+ * Unified component for rendering media from any provider (local, remote image services, etc.)
+ * Calls the provider's getEmbed() method at render time for proper URL generation.
+ *
+ * Usage:
+ * ```astro
+ * ---
+ * import { Media } from "dineway/ui";
+ * ---
+ * <Media value={post.data.featured_image} />
+ *
+ * <!-- With size hints for optimization -->
+ * <Media value={post.data.hero} width={1200} height={630} />
+ * ```
+ */
+import type { MediaValue } from "../fields/types.js";
+import type { EmbedResult, EmbedOptions } from "../media/types.js";
+import type { HTMLAttributes } from "astro/types";
+import { getMediaProvider } from "../media/provider-loader.js";
+
+interface Props extends Omit<HTMLAttributes<"img" | "video" | "audio">, "src" | "width" | "height"> {
+	/** Media value from content field */
+	value: MediaValue | string | undefined | null;
+	/** Override alt text */
+	alt?: string;
+	/** Desired width (for optimization) */
+	width?: number;
+	/** Desired height (for optimization) */
+	height?: number;
+	/** Image format preference */
+	format?: "webp" | "avif" | "jpeg" | "png" | "auto";
+}
+
+const { value, alt, width, height, format, ...attrs } = Astro.props;
+
+// Normalize string URLs to MediaValue
+function normalizeValue(val: MediaValue | string | undefined | null): MediaValue | null {
+	if (!val) return null;
+	if (typeof val === "string") {
+		return { id: "", src: val, provider: "local" };
+	}
+	return val;
+}
+
+const media = normalizeValue(value);
+let embed: EmbedResult | null = null;
+
+if (media) {
+	const providerId = media.provider ?? "local";
+	
+	// Get provider using lazy-loaded getMediaProvider (loads from virtual module)
+	const provider = await getMediaProvider(providerId);
+	
+	if (provider) {
+		// Call provider's getEmbed to get render instructions
+		const embedOptions: EmbedOptions = { width, height, format };
+		try {
+			const result = provider.getEmbed(media, embedOptions);
+			// Handle both sync and async getEmbed
+			embed = result instanceof Promise ? await result : result;
+		} catch (error) {
+			console.warn(`Failed to get embed for media ${media.id}:`, error);
+		}
+	} else if (media.src) {
+		// Fallback for direct URLs or missing provider
+		embed = {
+			type: "image",
+			src: media.src,
+			width: media.width,
+			height: media.height,
+			alt: media.alt,
+		};
+	} else if (providerId === "local") {
+		// Fallback for local provider without runtime
+		const storageKey = (media.meta?.storageKey as string) || media.id;
+		if (storageKey) {
+			const mimeType = media.mimeType || "";
+			if (mimeType.startsWith("video/")) {
+				embed = {
+					type: "video",
+					src: `/_dineway/api/media/file/${storageKey}`,
+					width: media.width,
+					height: media.height,
+					controls: true,
+					preload: "metadata",
+				};
+			} else if (mimeType.startsWith("audio/")) {
+				embed = {
+					type: "audio",
+					src: `/_dineway/api/media/file/${storageKey}`,
+					controls: true,
+					preload: "metadata",
+				};
+			} else {
+				embed = {
+					type: "image",
+					src: `/_dineway/api/media/file/${storageKey}`,
+					width: media.width,
+					height: media.height,
+					alt: media.alt,
+				};
+			}
+		}
+	}
+}
+
+// Compute final values
+const finalAlt = alt ?? (embed?.type === "image" ? embed.alt : undefined) ?? media?.alt ?? "";
+---
+
+{embed?.type === "image" && (
+	<img
+		src={embed.src}
+		srcset={embed.srcset}
+		sizes={embed.sizes}
+		width={embed.width}
+		height={embed.height}
+		alt={finalAlt}
+		loading="lazy"
+		decoding="async"
+		{...attrs}
+	/>
+)}
+
+{embed?.type === "video" && (
+	<video
+		width={embed.width}
+		height={embed.height}
+		controls={embed.controls ?? true}
+		autoplay={embed.autoplay}
+		muted={embed.muted}
+		loop={embed.loop}
+		playsinline={embed.playsinline}
+		preload={embed.preload ?? "metadata"}
+		crossorigin={embed.crossorigin}
+		poster={embed.poster}
+		{...attrs}
+	>
+		{embed.src && <source src={embed.src} />}
+		{embed.sources?.map((s) => <source src={s.src} type={s.type} />)}
+	</video>
+)}
+
+{embed?.type === "audio" && (
+	<audio
+		controls={embed.controls ?? true}
+		autoplay={embed.autoplay}
+		muted={embed.muted}
+		loop={embed.loop}
+		preload={embed.preload ?? "metadata"}
+		{...attrs}
+	>
+		{embed.src && <source src={embed.src} />}
+		{embed.sources?.map((s) => <source src={s.src} type={s.type} />)}
+	</audio>
+)}
+
+{embed?.type === "component" && (
+	<!-- Custom component embeds (Mux player, etc.) require dynamic import -->
+	<!-- For now, show a placeholder - full implementation TBD -->
+	<div class="dineway-media-component" data-package={embed.package} data-export={embed.export}>
+		<p>Custom media component: {embed.package}</p>
+	</div>
+)}

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="dineway-embed">
+	{
+		isSelfHostedVideo ? (
+			<div class="dineway-embed-video">
+				<video controls preload="metadata">
+					<source src={url} />
+					Your browser does not support the video element.
+				</video>
+			</div>
+		) : isSelfHostedAudio ? (
+			<div class="dineway-embed-audio">
+				<audio controls preload="metadata">
+					<source src={url} />
+					Your browser does not support the audio element.
+				</audio>
+			</div>
+		) : youtubeId ? (
+			<div class="dineway-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="dineway-embed-video">
+				<iframe
+					src={`https://player.vimeo.com/video/${vimeoId}`}
+					title="Vimeo video"
+					allow="autoplay; fullscreen; picture-in-picture"
+					allowfullscreen
+				/>
+			</div>
+		) : html ? (
+			<div class="dineway-embed-html" set:html={sanitizeContent(html)} />
+		) : (
+			<a href={url} target="_blank" rel="noopener noreferrer">
+				{url}
+			</a>
+		)
+	}
+	{caption && <figcaption>{caption}</figcaption>}
+</figure>
+
+<style>
+	.dineway-embed {
+		margin: 1.5rem 0;
+	}
+	.dineway-embed-video {
+		position: relative;
+		padding-bottom: 56.25%; /* 16:9 */
+		height: 0;
+		overflow: hidden;
+	}
+	.dineway-embed-video iframe,
+	.dineway-embed-video video {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border: 0;
+	}
+	.dineway-embed-audio {
+		width: 100%;
+	}
+	.dineway-embed-audio audio {
+		width: 100%;
+	}
+	.dineway-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="dineway-file">
+	<a href={url} class="dineway-file__link" download={filename}>
+		<svg
+			class="dineway-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="dineway-file__name">{displayName}</span>
+	</a>
+	{
+		showDownloadButton && (
+			<a href={url} class="dineway-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>
+	.dineway-file {
+		display: flex;
+		align-items: center;
+		gap: 0.75rem;
+		padding: 1rem;
+		margin: 1rem 0;
+		background-color: var(--dineway-file-bg, #f5f5f5);
+		border-radius: 4px;
+		border: 1px solid var(--dineway-file-border, #e0e0e0);
+	}
+
+	.dineway-file__link {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		flex: 1;
+		text-decoration: none;
+		color: var(--dineway-file-color, #333);
+	}
+
+	.dineway-file__link:hover {
+		text-decoration: underline;
+	}
+
+	.dineway-file__icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		flex-shrink: 0;
+		color: var(--dineway-file-icon-color, #666);
+	}
+
+	.dineway-file__name {
+		font-weight: 500;
+		word-break: break-all;
+	}
+
+	.dineway-file__download {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 2.5rem;
+		height: 2.5rem;
+		background-color: var(--dineway-button-bg, #0073aa);
+		color: var(--dineway-button-color, #fff);
+		border-radius: 4px;
+		transition: background-color 0.2s;
+	}
+
+	.dineway-file__download:hover {
+		background-color: var(--dineway-button-bg-hover, #005177);
+	}
+
+	.dineway-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="dineway-gallery" style={`--columns: ${columns}`}>
+	{
+		images.map((image) => {
+			const src =
+				image.asset.url ||
+				`/_dineway/api/media/file/${image.asset._ref}`;
+			const hasSize = image.width && image.height;
+			return (
+				<figure class="dineway-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>
+	.dineway-gallery {
+		display: grid;
+		grid-template-columns: repeat(var(--columns, 3), 1fr);
+		gap: 1rem;
+		margin: 1.5rem 0;
+	}
+	.dineway-gallery-item {
+		margin: 0;
+	}
+	.dineway-gallery-item img {
+		width: 100%;
+		height: auto;
+		object-fit: cover;
+		aspect-ratio: 1;
+	}
+	.dineway-gallery-item figcaption {
+		font-size: 0.75rem;
+		color: #666;
+		margin-top: 0.25rem;
+		text-align: center;
+	}
+	@media (max-width: 640px) {
+		.dineway-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="dineway-html-block" set:html={sanitized} />
+
+<style>
+	.dineway-html-block {
+		margin: 1.5rem 0;
+	}
+</style>