dineway 0.1.49 → 0.2.1

package/src/components/DinewayImage.astro

@@ -17,6 +17,7 @@
  * ```
  */
 import { getImage } from "astro:assets";
+import { Image as AstroImage } from "astro:assets";
 import type { HTMLAttributes } from "astro/types";
 import {
 	RESPONSIVE_BREAKPOINTS,
@@ -43,9 +44,20 @@ interface Props extends Omit<
 	height?: number;
 	/** Priority loading (disables lazy loading) */
 	priority?: boolean;
+	/** Render the LQIP placeholder as an inline background. Disable for strict CSP. */
+	placeholder?: boolean;
 }
 
-const { image, alt, width, height, priority, ...attrs } = Astro.props;
+const {
+	image,
+	alt,
+	width,
+	height,
+	priority,
+	placeholder = true,
+	class: className,
+	...attrs
+} = Astro.props;
 
 // Normalize string URLs to object form
 function normalizeImage(
@@ -59,13 +71,12 @@ function normalizeImage(
 }
 
 /**
- * Build the URL for a local image
+ * Build the URL for a local image. Prefers `meta.storageKey`; falls back to
+ * the internal proxy with `img.id` when no storage key is available.
  */
 function buildLocalImageUrl(img: MediaValue): string {
-	const storageKey = (img.meta?.storageKey as string) || img.id;
 	return buildRenderMediaUrl(Astro.locals.dineway?.getPublicMediaUrl, {
-		storageKey,
-		url: img.src,
+		storageKey: img.meta?.storageKey as string | undefined,
 		id: img.id,
 	});
 }
@@ -99,6 +110,7 @@ const aspectRatio =
 let src = "";
 let srcset: string | undefined;
 let sizes: string | undefined;
+let astroImageSrc = "";
 
 if (img) {
 	const providerId = img.provider ?? "local";
@@ -107,18 +119,21 @@ if (img) {
 		// Local provider or direct src URL. Route through Astro's image service
 		// when possible; fall back to the plain URL when optimization is unavailable.
 		src = img.src || buildLocalImageUrl(img);
-		const optimized = await buildResponsiveImage(getImage, {
-			src: toAbsoluteMediaUrl(
-				src,
-				getPublicOrigin(Astro.url, Astro.locals.dineway?.config)
-			),
-			width: finalWidth,
-			height: finalHeight,
-		});
-		if (optimized) {
-			src = optimized.src;
-			srcset = optimized.srcset;
-			sizes = optimized.sizes;
+		const publicOrigin = getPublicOrigin(Astro.url, Astro.locals.dineway?.config);
+		const absoluteSrc = toAbsoluteMediaUrl(src, publicOrigin);
+		if (finalWidth && finalHeight && absoluteSrc.startsWith(`${publicOrigin}/`)) {
+			astroImageSrc = absoluteSrc;
+		} else {
+			const optimized = await buildResponsiveImage(getImage, {
+				src: absoluteSrc,
+				width: finalWidth,
+				height: finalHeight,
+			});
+			if (optimized) {
+				src = optimized.src;
+				srcset = optimized.srcset;
+				sizes = optimized.sizes;
+			}
 		}
 	} else {
 		// External provider
@@ -160,28 +175,20 @@ if (img) {
 	}
 }
 
-// Build placeholder background style
-const blurhash =
-	typeof image === "object"
-		? (image?.meta?.blurhash as string | undefined)
-		: undefined;
+// Build placeholder background style. Prefer the first-class MediaValue fields;
+// fall back to `meta` for snapshots stored before LQIP was promoted off `meta`.
+const blurhash = img?.blurhash ?? (img?.meta?.blurhash as string | undefined);
 const dominantColor =
-	typeof image === "object"
-		? (image?.meta?.dominantColor as string | undefined)
-		: undefined;
+	img?.dominantColor ?? (img?.meta?.dominantColor as string | undefined);
 
 let placeholderStyle = "";
-if (blurhash) {
+if (placeholder && blurhash) {
 	const { blurhashToImageCssString } = await import("@unpic/placeholder");
 	placeholderStyle = blurhashToImageCssString(blurhash);
-} else if (dominantColor) {
+} else if (placeholder && dominantColor) {
 	placeholderStyle = `background-color: ${dominantColor};`;
 }
 
-const baseStyle = aspectRatio
-	? `aspect-ratio: ${aspectRatio}; max-width: 100%; height: auto;`
-	: "max-width: 100%; height: auto;";
-
 const imgProps: Record<string, unknown> = {
 	src,
 	srcset,
@@ -192,9 +199,35 @@ const imgProps: Record<string, unknown> = {
 	loading: priority ? "eager" : "lazy",
 	fetchpriority: priority ? "high" : undefined,
 	decoding: "async",
-	style: placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseStyle,
+	style: placeholderStyle || undefined,
+	class: ["dineway-image-media", className].filter(Boolean).join(" "),
 	...attrs,
 };
 ---
 
-{img && src ? <img {...imgProps} /> : null}
+{
+	img && astroImageSrc ? (
+		<AstroImage
+			src={astroImageSrc}
+			alt={finalAlt}
+			width={finalWidth}
+			height={finalHeight}
+			priority={priority}
+			layout="constrained"
+			loading={priority ? "eager" : "lazy"}
+			decoding="async"
+			class={className}
+			style={placeholderStyle || undefined}
+			{...attrs}
+		/>
+	) : img && src ? (
+		<img {...imgProps} />
+	) : null
+}
+
+<style>
+	.dineway-image-media {
+		max-width: 100%;
+		height: auto;
+	}
+</style>

package/src/components/DinewayMedia.astro

@@ -167,9 +167,8 @@ const finalAlt = alt ?? (embed?.type === "image" ? embed.alt : undefined) ?? med
 	</audio>
 )}
 
+{/* Custom component embeds (Mux player, etc.) require dynamic import. Placeholder until that lands. */}
 {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/Image.astro

@@ -5,10 +5,9 @@
  * Renders image blocks from WordPress imports and Dineway media.
  * Uses the provider's getSrc function for responsive srcset generation.
  */
-import { getImage } from "astro:assets";
+import { Image as AstroImage } from "astro:assets";
 import {
 	RESPONSIVE_BREAKPOINTS,
-	buildResponsiveImage,
 	buildRenderMediaUrl,
 	getMediaProvider,
 	getPublicOrigin,
@@ -34,11 +33,19 @@ export interface Props {
 		width?: number;
 		/** Original image height */
 		height?: number;
+		/** LQIP blurhash -- first-class field (legacy snapshots store it in `asset.meta`). */
+		blurhash?: string;
+		/** LQIP dominant color -- first-class field (legacy snapshots store it in `asset.meta`). */
+		dominantColor?: string;
 		/** Display width for this instance (overrides original) */
 		displayWidth?: number;
 		/** Display height for this instance (overrides original) */
 		displayHeight?: number;
+		/** Alignment for this image instance (e.g. from a WordPress import) */
+		alignment?: "left" | "center" | "right" | "wide" | "full";
 	};
+	/** Render the LQIP placeholder as an inline background. Disable for strict CSP. */
+	placeholder?: boolean;
 }
 
 /**
@@ -57,13 +64,13 @@ function generateSrcset(
 		.join(", ");
 }
 
-const { node } = Astro.props;
+const { node, placeholder = true } = Astro.props;
 
 if (!node?.asset) {
 	return null;
 }
 
-const { asset, alt = "", caption, width, height, displayWidth, displayHeight } = node;
+const { asset, alt = "", caption, width, height, displayWidth, displayHeight, alignment } = node;
 
 // Calculate aspect ratio from original dimensions
 const aspectRatio = width && height ? width / height : undefined;
@@ -90,6 +97,7 @@ if (displayWidth && displayHeight) {
 let src = "";
 let srcset: string | undefined;
 let sizes: string | undefined;
+let astroImageSrc = "";
 const providerId = asset.provider;
 
 if (providerId && providerId !== "local") {
@@ -128,58 +136,63 @@ if (providerId && providerId !== "local") {
 	}
 }
 
-// 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)
+// Fallback for local provider. `asset.url` carries the storage key with
+// extension when present; `asset._ref` is a bare ULID that only the internal
+// `/file/{id}` route can resolve. `buildRenderMediaUrl` picks the right shape.
 if (!src) {
 	src = buildRenderMediaUrl(Astro.locals.dineway?.getPublicMediaUrl, {
 		url: asset.url,
 		id: asset._ref,
 	});
-	const optimized = await buildResponsiveImage(getImage, {
-		src: toAbsoluteMediaUrl(
+	if (renderWidth && renderHeight) {
+		astroImageSrc = toAbsoluteMediaUrl(
 			src,
-			getPublicOrigin(Astro.url, Astro.locals.dineway?.config)
-		),
-		width: renderWidth,
-		height: renderHeight,
-	});
-	if (optimized) {
-		src = optimized.src;
-		srcset = optimized.srcset;
-		sizes = optimized.sizes;
+			getPublicOrigin(Astro.url, Astro.locals.dineway?.config),
+		);
 	}
 }
 
-// Build placeholder background style
-const blurhash = asset.meta?.blurhash as string | undefined;
-const dominantColor = asset.meta?.dominantColor as string | undefined;
+// Build placeholder background style. Prefer first-class LQIP fields; fall
+// back to `asset.meta` for legacy snapshots persisted before LQIP was promoted.
+const blurhash = node.blurhash ?? (asset.meta?.blurhash as string | undefined);
+const dominantColor = node.dominantColor ?? (asset.meta?.dominantColor as string | undefined);
 
 let placeholderStyle = "";
-if (blurhash) {
+if (placeholder && blurhash) {
 	const { blurhashToImageCssString } = await import("@unpic/placeholder");
 	placeholderStyle = blurhashToImageCssString(blurhash);
-} else if (dominantColor) {
+} else if (placeholder && 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="dineway-image">
-	<img
-		src={src}
-		srcset={srcset}
-		sizes={sizes}
-		alt={alt}
-		width={renderWidth}
-		height={renderHeight}
-		loading="lazy"
-		decoding="async"
-		style={imgStyle}
-	/>
+<figure class:list={["dineway-image", alignment && `dineway-image--align-${alignment}`]}>
+	{
+		astroImageSrc ? (
+			<AstroImage
+				src={astroImageSrc}
+				alt={alt}
+				width={renderWidth}
+				height={renderHeight}
+				layout="constrained"
+				loading="lazy"
+				decoding="async"
+				style={placeholderStyle || undefined}
+			/>
+		) : (
+			<img
+				src={src}
+				srcset={srcset}
+				sizes={sizes}
+				alt={alt}
+				width={renderWidth}
+				height={renderHeight}
+				loading="lazy"
+				decoding="async"
+				style={placeholderStyle || undefined}
+			/>
+		)
+	}
 	{caption && <figcaption>{caption}</figcaption>}
 </figure>
 
@@ -193,8 +206,40 @@ const imgStyle = placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseSty
 	}
 	.dineway-image figcaption {
 		font-size: 0.875rem;
-		color: #666;
+		color: var(--dineway-caption-color, var(--color-muted, #666));
 		margin-top: 0.5rem;
 		text-align: center;
 	}
+	/* Alignment (WordPress-style). Floats wrap surrounding text; wide/full span the column. */
+	.dineway-image--align-left,
+	.dineway-image--align-right {
+		width: fit-content;
+		max-width: 50%;
+	}
+	.dineway-image--align-left {
+		float: left;
+		margin: 0 1.5rem 1rem 0;
+	}
+	.dineway-image--align-right {
+		float: right;
+		margin: 0 0 1rem 1.5rem;
+	}
+	.dineway-image--align-center {
+		width: fit-content;
+		margin-inline: auto;
+	}
+	.dineway-image--align-wide,
+	.dineway-image--align-full {
+		width: 100%;
+	}
+	/* On narrow screens, un-float left/right so the image is not cramped beside text. */
+	@media (max-width: 640px) {
+		.dineway-image--align-left,
+		.dineway-image--align-right {
+			float: none;
+			width: 100%;
+			max-width: 100%;
+			margin-inline: 0;
+		}
+	}
 </style>

package/src/components/InlinePortableTextEditor.tsx

@@ -51,6 +51,7 @@ interface PTTextBlock {
 	level?: number;
 	children: PTSpan[];
 	markDefs?: PTMarkDef[];
+	textAlign?: "left" | "center" | "right" | "justify";
 }
 
 type PTBlock = PTTextBlock | { _type: string; _key: string; [key: string]: unknown };
@@ -101,6 +102,10 @@ function attrNum(attrs: Record<string, unknown> | undefined, key: string): numbe
 	return typeof v === "number" ? v : undefined;
 }
 
+function normalizeTextAlign(value: unknown): "center" | "right" | "justify" | undefined {
+	return value === "center" || value === "right" || value === "justify" ? value : undefined;
+}
+
 function pmToPortableText(doc: PMNode): PTBlock[] {
 	if (!doc || doc.type !== "doc" || !doc.content) return [];
 	const blocks: PTBlock[] = [];
@@ -118,6 +123,7 @@ function convertPMNode(node: PMNode): PTBlock | PTBlock[] | null {
 	switch (node.type) {
 		case "paragraph": {
 			const { children, markDefs } = convertInline(node.content || []);
+			const textAlign = normalizeTextAlign(node.attrs?.textAlign);
 			if (children.length === 0) return null;
 			return {
 				_type: "block",
@@ -125,11 +131,13 @@ function convertPMNode(node: PMNode): PTBlock | PTBlock[] | null {
 				style: "normal",
 				children,
 				markDefs: markDefs.length > 0 ? markDefs : undefined,
+				...(textAlign ? { textAlign } : {}),
 			};
 		}
 		case "heading": {
 			const { children, markDefs } = convertInline(node.content || []);
 			const level = attrNum(node.attrs, "level") ?? 1;
+			const textAlign = normalizeTextAlign(node.attrs?.textAlign);
 			if (children.length === 0) return null;
 			const headingStyles: Record<number, PTTextBlock["style"]> = {
 				1: "h1",
@@ -146,6 +154,7 @@ function convertPMNode(node: PMNode): PTBlock | PTBlock[] | null {
 				style: headingStyle,
 				children,
 				markDefs: markDefs.length > 0 ? markDefs : undefined,
+				...(textAlign ? { textAlign } : {}),
 			};
 		}
 		case "bulletList":
@@ -358,7 +367,7 @@ function portableTextToPM(blocks: PTBlock[]): JSONContent {
 
 function convertPTBlock(block: PTBlock): JSONContent | null {
 	if (isPTTextBlock(block)) {
-		const { style = "normal", children, markDefs = [] } = block;
+		const { style = "normal", children, markDefs = [], textAlign } = block;
 		const pmContent = convertPTSpans(children, markDefs);
 
 		if (style === "blockquote") {
@@ -376,12 +385,13 @@ function convertPTBlock(block: PTBlock): JSONContent | null {
 			const level = parseInt(style.substring(1), 10);
 			return {
 				type: "heading",
-				attrs: { level },
+				attrs: { level, ...(textAlign ? { textAlign } : {}) },
 				content: pmContent.length > 0 ? pmContent : undefined,
 			};
 		}
 		return {
 			type: "paragraph",
+			attrs: textAlign ? { textAlign } : undefined,
 			content: pmContent.length > 0 ? pmContent : undefined,
 		};
 	}

package/src/components/JsonLdScript.astro

@@ -0,0 +1,9 @@
+---
+interface Props {
+	json: string;
+}
+
+const { json } = Astro.props;
+---
+
+<script type="application/ld+json" set:html={json}></script>

package/src/components/LiveSearch.astro

@@ -34,6 +34,8 @@ export interface Props {
 	limit?: number;
 	/** CSS class for the container */
 	class?: string;
+	/** Inline style for the container */
+	style?: string;
 	/** CSS class for the input */
 	inputClass?: string;
 	/** CSS class for the results container */
@@ -48,6 +50,10 @@ export interface Props {
 	suggestMode?: boolean;
 	/** Expand input width on focus (provide collapsed and expanded widths) */
 	expandOnFocus?: { collapsed: string; expanded: string };
+	/** Search results page to navigate to when pressing Enter without a focused result */
+	searchPage?: string;
+	/** Per-collection URL templates, e.g. { posts: "/blog/:path" } */
+	routeMap?: Record<string, string>;
 }
 
 const {
@@ -57,6 +63,7 @@ const {
 	debounce = 300,
 	limit = 10,
 	class: className = "",
+	style: styleAttr = "",
 	inputClass = "",
 	resultsClass = "",
 	resultClass = "",
@@ -64,6 +71,8 @@ const {
 	autofocus = false,
 	suggestMode = false,
 	expandOnFocus,
+	searchPage = "",
+	routeMap = {},
 } = Astro.props;
 
 const config = {
@@ -74,11 +83,14 @@ const config = {
 	showSnippets,
 	suggestMode,
 	expandOnFocus: expandOnFocus ?? null,
+	searchPage,
+	routeMap,
 };
 ---
 
 <dineway-live-search
 	class:list={["dineway-live-search", className]}
+	style={styleAttr}
 	data-config={JSON.stringify(config)}
 >
 	<input
@@ -109,6 +121,12 @@ const config = {
 </dineway-live-search>
 
 <script>
+	import {
+		buildLiveSearchResultUrl,
+		type LiveSearchRoutableResult,
+		type LiveSearchRouteMap,
+	} from "./live-search-routing.js";
+
 	// Sanitization patterns for search snippets (allow only <mark> tags from FTS5)
 	const SNIPPET_AMP_RE = /&/g;
 	const SNIPPET_LT_RE = /</g;
@@ -128,6 +146,7 @@ const config = {
 	interface Suggestion {
 		collection: string;
 		id: string;
+		slug?: string | null;
 		title: string;
 	}
 
@@ -139,6 +158,8 @@ const config = {
 		showSnippets: boolean;
 		suggestMode: boolean;
 		expandOnFocus: { collapsed: string; expanded: string } | null;
+		searchPage: string;
+		routeMap: LiveSearchRouteMap;
 	}
 
 	class DinewayLiveSearch extends HTMLElement {
@@ -156,6 +177,8 @@ const config = {
 			showSnippets: true,
 			suggestMode: false,
 			expandOnFocus: null,
+			searchPage: "",
+			routeMap: {},
 		};
 		private debounceTimer: ReturnType<typeof setTimeout> | null = null;
 		private abortController: AbortController | null = null;
@@ -275,11 +298,25 @@ const config = {
 					".dineway-live-search-result:focus, .dineway-live-search-result.focused"
 				) as HTMLAnchorElement | null;
 				if (focused?.href) {
+					e.preventDefault();
 					window.location.href = focused.href;
+					return;
+				}
+
+				const query = this.input?.value.trim();
+				if (query && this.config.searchPage) {
+					e.preventDefault();
+					const url = new URL(this.config.searchPage, window.location.origin);
+					url.searchParams.set("q", query);
+					window.location.href = url.toString();
 				}
 			}
 		}
 
+		private buildResultUrl(result: LiveSearchRoutableResult): string {
+			return buildLiveSearchResultUrl(result, this.config.routeMap);
+		}
+
 		private navigateResults(direction: number) {
 			if (!this.resultsList) return;
 
@@ -376,9 +413,7 @@ const config = {
 				const link = clone.querySelector("a");
 
 				if (link) {
-					// Build URL - use slug if available, otherwise id
-					const path = result.slug ?? result.id;
-					link.href = `/${result.collection}/${path}`;
+					link.href = this.buildResultUrl(result);
 
 					// Fill in title
 					const titleEl = link.querySelector(
@@ -439,7 +474,7 @@ const config = {
 				const link = clone.querySelector("a");
 
 				if (link) {
-					link.href = `/${suggestion.collection}/${suggestion.id}`;
+					link.href = this.buildResultUrl(suggestion);
 
 					const titleEl = link.querySelector(
 						".dineway-live-search-result-title"
@@ -465,6 +500,7 @@ const config = {
 
 					link.dataset.id = suggestion.id;
 					link.dataset.collection = suggestion.collection;
+					link.dataset.slug = suggestion.slug ?? "";
 				}
 
 				this.resultsList.appendChild(clone);

package/src/components/index.ts

@@ -36,6 +36,7 @@ export { default as DinewayImage } from "./DinewayImage.astro";
 export { default as DinewayMedia } from "./DinewayMedia.astro";
 
 // Portable Text block type components
+export { default as Block } from "./Block.astro";
 export { default as Image } from "./Image.astro";
 export { default as Code } from "./Code.astro";
 export { default as Embed } from "./Embed.astro";
@@ -57,6 +58,7 @@ export { default as Underline } from "./marks/Underline.astro";
 export { default as StrikeThrough } from "./marks/StrikeThrough.astro";
 export { default as Link } from "./marks/Link.astro";
 
+import BlockComponent from "./Block.astro";
 import BreakComponent from "./Break.astro";
 import ButtonComponent from "./Button.astro";
 import ButtonsComponent from "./Buttons.astro";
@@ -77,11 +79,13 @@ import TableComponent from "./Table.astro";
  * Pre-configured components for Dineway Portable Text content
  *
  * Includes renderers for:
+ * - Block styles: paragraph, h1..h6, blockquote, with text alignment classes
  * - Block types: image, code, embed, gallery, columns, break, htmlBlock, table,
  *   button, buttons, cover, file, pullquote
  * - Marks: superscript, subscript, underline, strike-through, link
  */
 export const dinewayComponents = {
+	block: BlockComponent,
 	type: {
 		image: ImageComponent,
 		code: CodeComponent,

package/src/components/live-search-routing.ts

@@ -0,0 +1,30 @@
+export interface LiveSearchRoutableResult {
+	collection: string;
+	id: string;
+	slug?: string | null;
+}
+
+export type LiveSearchRouteMap = Record<string, string>;
+
+const ROUTE_TOKEN_RE = /:(collection|id|slug|path)/g;
+
+export function buildLiveSearchResultUrl(
+	result: LiveSearchRoutableResult,
+	routeMap: LiveSearchRouteMap = {},
+): string {
+	const path = result.slug ?? result.id;
+	const template = routeMap[result.collection];
+
+	if (!template) {
+		return `/${result.collection}/${path}`;
+	}
+
+	const replacements: Record<string, string> = {
+		collection: result.collection,
+		id: result.id,
+		slug: result.slug ?? result.id,
+		path,
+	};
+
+	return template.replace(ROUTE_TOKEN_RE, (_token, key: string) => replacements[key] ?? "");
+}

package/src/components/portable-text-text-align.ts

@@ -0,0 +1,15 @@
+type AlignClassName = "has-text-align-center" | "has-text-align-right" | "has-text-align-justify";
+
+const ALIGN_CLASS_MAP: Record<string, AlignClassName> = {
+	center: "has-text-align-center",
+	right: "has-text-align-right",
+	justify: "has-text-align-justify",
+};
+
+export function textAlignClassName(value: string | undefined): AlignClassName | undefined {
+	if (value === undefined) return undefined;
+	if (Object.hasOwn(ALIGN_CLASS_MAP, value)) {
+		return ALIGN_CLASS_MAP[value];
+	}
+	return undefined;
+}

package/src/ui.ts

@@ -47,6 +47,8 @@ export {
 	DinewayImage as Image,
 	// Main component (wrapper with Dineway defaults)
 	PortableText,
+	// Block style override for paragraph, heading, blockquote, and text alignment.
+	Block,
 	// Comment components
 	Comments,
 	CommentForm,