dineway 0.1.3 → 0.1.5

package/src/components/Comments.astro

@@ -0,0 +1,232 @@
+---
+/**
+ * Server-rendered comment list for a content item.
+ *
+ * Fetches approved comments directly from the repository (no API call).
+ * Renders semantic HTML with CSS custom properties for styling.
+ *
+ * @example
+ * ```astro
+ * ---
+ * import { Comments } from "dineway/ui";
+ * ---
+ * <Comments collection="posts" contentId={post.id} threaded />
+ * ```
+ */
+import type { PublicComment } from "../database/repositories/comment.js";
+import { getComments } from "../comments/query.js";
+import { getCollectionInfo } from "../schema/query.js";
+
+interface Props {
+	collection: string;
+	contentId: string;
+	threaded?: boolean;
+	class?: string;
+}
+
+const {
+	collection,
+	contentId,
+	threaded = false,
+	class: className,
+} = Astro.props;
+
+const collectionInfo = await getCollectionInfo(collection);
+const enabled = collectionInfo?.commentsEnabled ?? false;
+const { items, total } = enabled
+	? await getComments({ collection, contentId, threaded })
+	: { items: [], total: 0 };
+
+const URL_RE = /https?:\/\/[^\s<>"')\]]+/g;
+const AMP_RE = /&/g;
+const LT_RE = /</g;
+const GT_RE = />/g;
+const QUOT_RE = /"/g;
+
+function autoLinkUrls(text: string): string {
+	return text.replace(
+		URL_RE,
+		(url) =>
+			`<a href="${url}" rel="nofollow ugc noopener" target="_blank">${url}</a>`
+	);
+}
+
+function escapeHtml(text: string): string {
+	return text
+		.replace(AMP_RE, "&amp;")
+		.replace(LT_RE, "&lt;")
+		.replace(GT_RE, "&gt;")
+		.replace(QUOT_RE, "&quot;");
+}
+
+function formatBody(text: string): string {
+	return autoLinkUrls(escapeHtml(text));
+}
+---
+
+{
+	enabled && (
+		<section
+			class:list={["ec-comments", className]}
+			data-ec-comments
+			data-collection={collection}
+			data-content-id={contentId}
+		>
+			<h3 class="ec-comments-heading">
+				{total === 0
+					? "No comments yet"
+					: total === 1
+						? "1 Comment"
+						: `${total} Comments`}
+			</h3>
+
+			{items.length > 0 && (
+				<ol class="ec-comments-list">
+					{items.map((comment: PublicComment) => (
+						<li>
+							<article
+								class="ec-comment"
+								id={`comment-${comment.id}`}
+								data-comment-id={comment.id}
+							>
+								<header class="ec-comment-header">
+									<span class="ec-comment-author">
+										{comment.authorName}
+										{comment.isRegisteredUser && (
+											<span class="ec-comment-badge" aria-label="Site member">
+												&#x2713;
+											</span>
+										)}
+									</span>
+									<time class="ec-comment-date" datetime={comment.createdAt}>
+										{new Date(comment.createdAt).toLocaleDateString("en-US", {
+											year: "numeric",
+											month: "long",
+											day: "numeric",
+											hour: "numeric",
+											minute: "2-digit",
+										})}
+									</time>
+								</header>
+								<div
+									class="ec-comment-body"
+									set:html={formatBody(comment.body)}
+								/>
+								{threaded && comment.replies && comment.replies.length > 0 && (
+									<ol class="ec-comment-replies">
+										{comment.replies.map((reply: PublicComment) => (
+											<li>
+												<article
+													class="ec-comment ec-comment-reply"
+													id={`comment-${reply.id}`}
+													data-comment-id={reply.id}
+												>
+													<header class="ec-comment-header">
+														<span class="ec-comment-author">
+															{reply.authorName}
+															{reply.isRegisteredUser && (
+																<span
+																	class="ec-comment-badge"
+																	aria-label="Site member"
+																>
+																	&#x2713;
+																</span>
+															)}
+														</span>
+														<time
+															class="ec-comment-date"
+															datetime={reply.createdAt}
+														>
+															{new Date(reply.createdAt).toLocaleDateString(
+																"en-US",
+																{
+																	year: "numeric",
+																	month: "long",
+																	day: "numeric",
+																	hour: "numeric",
+																	minute: "2-digit",
+																}
+															)}
+														</time>
+													</header>
+													<div
+														class="ec-comment-body"
+														set:html={formatBody(reply.body)}
+													/>
+												</article>
+											</li>
+										))}
+									</ol>
+								)}
+							</article>
+						</li>
+					))}
+				</ol>
+			)}
+		</section>
+	)
+}
+
+<style>
+	.ec-comments {
+		--ec-comment-gap: 1.5rem;
+		--ec-comment-indent: 2rem;
+		--ec-comment-border: 1px solid #e5e7eb;
+	}
+
+	.ec-comments-list,
+	.ec-comment-replies {
+		list-style: none;
+		padding: 0;
+		margin: 0;
+	}
+
+	.ec-comments-list > li + li {
+		margin-top: var(--ec-comment-gap);
+	}
+
+	.ec-comment {
+		padding-bottom: var(--ec-comment-gap);
+		border-bottom: var(--ec-comment-border);
+	}
+
+	.ec-comment-replies {
+		margin-top: var(--ec-comment-gap);
+		padding-left: var(--ec-comment-indent);
+	}
+
+	.ec-comment-replies > li + li {
+		margin-top: var(--ec-comment-gap);
+	}
+
+	.ec-comment-header {
+		display: flex;
+		align-items: baseline;
+		gap: 0.5rem;
+		flex-wrap: wrap;
+	}
+
+	.ec-comment-author {
+		font-weight: 600;
+	}
+
+	.ec-comment-author a {
+		color: inherit;
+	}
+
+	.ec-comment-badge {
+		font-size: 0.75em;
+		vertical-align: super;
+	}
+
+	.ec-comment-date {
+		font-size: 0.875em;
+		opacity: 0.6;
+	}
+
+	.ec-comment-body {
+		margin-top: 0.5rem;
+		white-space: pre-wrap;
+		word-break: break-word;
+	}
+</style>

package/src/components/Cover.astro

@@ -0,0 +1,128 @@
+---
+/**
+ * Portable Text Cover block component
+ *
+ * Renders an image/video with text overlay from WordPress imports.
+ */
+import { PortableText } from "astro-portabletext";
+
+export interface Props {
+	node: {
+		_type: "cover";
+		_key: string;
+		backgroundImage?: string;
+		backgroundVideo?: string;
+		overlayColor?: string;
+		overlayOpacity?: number;
+		content: unknown[];
+		minHeight?: string;
+		alignment?: "left" | "center" | "right";
+	};
+}
+
+const { node } = Astro.props;
+const {
+	backgroundImage,
+	backgroundVideo,
+	overlayColor,
+	overlayOpacity = 0.5,
+	content = [],
+	minHeight = "300px",
+	alignment = "center",
+} = node ?? {};
+
+const hasBackground = backgroundImage || backgroundVideo;
+const overlayStyle = overlayColor
+	? `background-color: ${overlayColor}; opacity: ${overlayOpacity};`
+	: `background-color: rgba(0, 0, 0, ${overlayOpacity});`;
+---
+
+<div
+	class:list={["dineway-cover", `dineway-cover--align-${alignment}`]}
+	style={`min-height: ${minHeight};`}
+>
+	{
+		backgroundImage && !backgroundVideo && (
+			<img src={backgroundImage} alt="" class="dineway-cover__background" loading="lazy" />
+		)
+	}
+	{
+		backgroundVideo && (
+			<video
+				class="dineway-cover__background dineway-cover__video"
+				autoplay
+				muted
+				loop
+				playsinline
+			>
+				<source src={backgroundVideo} />
+			</video>
+		)
+	}
+	{hasBackground && <div class="dineway-cover__overlay" style={overlayStyle} />}
+	<div class="dineway-cover__content">
+		<PortableText value={content} />
+	</div>
+</div>
+
+<style>
+	.dineway-cover {
+		position: relative;
+		display: flex;
+		align-items: center;
+		padding: 2rem;
+		margin: 1.5rem 0;
+		overflow: hidden;
+		border-radius: 4px;
+		background-color: var(--dineway-cover-fallback-bg, #333);
+	}
+
+	.dineway-cover__background {
+		position: absolute;
+		inset: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+		z-index: 0;
+	}
+
+	.dineway-cover__video {
+		object-fit: cover;
+	}
+
+	.dineway-cover__overlay {
+		position: absolute;
+		inset: 0;
+		z-index: 1;
+	}
+
+	.dineway-cover__content {
+		position: relative;
+		z-index: 2;
+		width: 100%;
+		color: var(--dineway-cover-text-color, #fff);
+	}
+
+	.dineway-cover--align-left {
+		justify-content: flex-start;
+		text-align: left;
+	}
+
+	.dineway-cover--align-center {
+		justify-content: center;
+		text-align: center;
+	}
+
+	.dineway-cover--align-right {
+		justify-content: flex-end;
+		text-align: right;
+	}
+
+	.dineway-cover__content :global(h1),
+	.dineway-cover__content :global(h2),
+	.dineway-cover__content :global(h3),
+	.dineway-cover__content :global(h4),
+	.dineway-cover__content :global(p) {
+		color: inherit;
+	}
+</style>

package/src/components/DinewayBodyEnd.astro

@@ -0,0 +1,32 @@
+---
+/**
+ * Renders trusted plugin fragments at the end of <body>.
+ *
+ * Usage:
+ * ```astro
+ * <body>
+ *   <slot />
+ *   <DinewayBodyEnd page={page} />
+ * </body>
+ * ```
+ */
+import type { PublicPageContext } from "../plugins/types.js";
+import { renderFragments } from "../page/fragments.js";
+import { getPageRuntime } from "../page/index.js";
+
+interface Props {
+	page: PublicPageContext;
+}
+
+const { page } = Astro.props;
+const runtime = getPageRuntime(Astro.locals as Record<string, unknown>);
+
+let html = "";
+
+if (runtime) {
+	const contributions = await runtime.collectPageFragments(page);
+	html = renderFragments(contributions, "body:end");
+}
+---
+
+<Fragment set:html={html} />

package/src/components/DinewayBodyStart.astro

@@ -0,0 +1,32 @@
+---
+/**
+ * Renders trusted plugin fragments at the start of <body>.
+ *
+ * Usage:
+ * ```astro
+ * <body>
+ *   <DinewayBodyStart page={page} />
+ *   <slot />
+ * </body>
+ * ```
+ */
+import type { PublicPageContext } from "../plugins/types.js";
+import { renderFragments } from "../page/fragments.js";
+import { getPageRuntime } from "../page/index.js";
+
+interface Props {
+	page: PublicPageContext;
+}
+
+const { page } = Astro.props;
+const runtime = getPageRuntime(Astro.locals as Record<string, unknown>);
+
+let html = "";
+
+if (runtime) {
+	const contributions = await runtime.collectPageFragments(page);
+	html = renderFragments(contributions, "body:start");
+}
+---
+
+<Fragment set:html={html} />

package/src/components/DinewayHead.astro

@@ -0,0 +1,61 @@
+---
+/**
+ * Renders base SEO metadata, plugin-contributed metadata, and trusted head fragments.
+ *
+ * Base SEO metadata (meta tags, OG, Twitter Card, canonical, JSON-LD) is generated
+ * from the page context's seo/articleMeta/siteName fields. Plugin contributions
+ * come after, so they can override base tags via first-wins dedup in resolvePageMetadata().
+ *
+ * Usage:
+ * ```astro
+ * <head>
+ *   <DinewayHead page={page} />
+ * </head>
+ * ```
+ */
+import type { PublicPageContext, PageMetadataContribution } from "../plugins/types.js";
+import { resolvePageMetadata, renderPageMetadata } from "../page/metadata.js";
+import { renderFragments } from "../page/fragments.js";
+import {
+	generateBaseSeoContributions,
+	generateSiteSeoContributions,
+} from "../page/seo-contributions.js";
+import { getPageRuntime } from "../page/index.js";
+import { getSiteSetting } from "../settings/index.js";
+
+interface Props {
+	page: PublicPageContext;
+}
+
+const { page } = Astro.props;
+const runtime = getPageRuntime(Astro.locals as Record<string, unknown>);
+
+// Base SEO contributions from page context (always generated)
+const baseContributions: PageMetadataContribution[] = generateBaseSeoContributions(page);
+
+let metadataHtml = "";
+let fragmentsHtml = "";
+
+if (runtime) {
+	// Plugin contributions come BEFORE site/base, so resolvePageMetadata's
+	// first-wins dedup lets plugins override defaults.
+	const [seoSettings, pluginContributions, fragments] = await Promise.all([
+		getSiteSetting("seo"),
+		runtime.collectPageMetadata(page),
+		runtime.collectPageFragments(page),
+	]);
+
+	const siteContributions = generateSiteSeoContributions(seoSettings);
+	const allContributions = [...pluginContributions, ...siteContributions, ...baseContributions];
+	const resolved = resolvePageMetadata(allContributions);
+	metadataHtml = renderPageMetadata(resolved);
+	fragmentsHtml = renderFragments(fragments, "head");
+} else {
+	// No runtime (Dineway not initialized) — still render base SEO
+	const resolved = resolvePageMetadata(baseContributions);
+	metadataHtml = renderPageMetadata(resolved);
+}
+---
+
+<Fragment set:html={metadataHtml} />
+<Fragment set:html={fragmentsHtml} />

package/src/components/DinewayImage.astro

@@ -0,0 +1,178 @@
+---
+/**
+ * Dineway Image component
+ *
+ * Renders images with responsive srcset for CDN providers that support it.
+ * Uses the provider's getSrc function for URL-based image transformations.
+ *
+ * Usage:
+ * ```astro
+ * ---
+ * import { Image } from "dineway/ui";
+ * ---
+ * <Image image={post.data.featured_image} />
+ *
+ * <!-- With overrides -->
+ * <Image image={post.data.featured_image} class="hero" />
+ * ```
+ */
+import type { MediaValue } from "../fields/types.js";
+import type { HTMLAttributes } from "astro/types";
+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];
+
+interface Props extends Omit<
+	HTMLAttributes<"img">,
+	"src" | "width" | "height"
+> {
+	/** Image value from content field or media library */
+	image: MediaValue | string | undefined | null;
+	/** Override alt text (uses image.alt by default) */
+	alt?: string;
+	/** Override width (uses image.width by default) */
+	width?: number;
+	/** Override height (uses image.height by default) */
+	height?: number;
+	/** Priority loading (disables lazy loading) */
+	priority?: boolean;
+}
+
+const { image, alt, width, height, priority, ...attrs } = Astro.props;
+
+// Normalize string URLs to object form
+function normalizeImage(
+	img: MediaValue | string | undefined | null
+): MediaValue | null {
+	if (!img) return null;
+	if (typeof img === "string") {
+		return { id: "", src: img };
+	}
+	return img;
+}
+
+/**
+ * Build the URL for a local image
+ */
+function buildLocalImageUrl(img: MediaValue): string {
+	const storageKey = (img.meta?.storageKey as string) || img.id;
+	if (storageKey) {
+		return `/_dineway/api/media/file/${storageKey}`;
+	}
+	return "";
+}
+
+/**
+ * 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) // Include up to 2x for retina
+		.map((w) => {
+			const h = aspectRatio ? Math.round(w / aspectRatio) : undefined;
+			return `${getSrc({ width: w, height: h })} ${w}w`;
+		})
+		.join(", ");
+}
+
+const img = normalizeImage(image);
+
+// Determine final dimensions (props override image metadata)
+const finalWidth = width ?? img?.width;
+const finalHeight = height ?? img?.height;
+const finalAlt = alt ?? img?.alt ?? "";
+const aspectRatio =
+	finalWidth && finalHeight ? finalWidth / finalHeight : undefined;
+
+// Get the image source URL and srcset
+let src = "";
+let srcset: string | undefined;
+let sizes: string | undefined;
+
+if (img) {
+	const providerId = img.provider ?? "local";
+
+	if (providerId === "local" || img.src) {
+		// Local provider or direct src URL
+		src = img.src || buildLocalImageUrl(img);
+	} else {
+		// External provider
+		try {
+			const provider = await getMediaProvider(providerId);
+			if (provider) {
+				const result = provider.getEmbed(img, {
+					width: finalWidth,
+					height: finalHeight,
+				});
+				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) {
+						// Use image width, or default to 1200 for responsive images
+						const maxWidth = finalWidth || 1200;
+						srcset = generateSrcset(embed.getSrc, maxWidth, aspectRatio);
+						sizes = finalWidth
+							? `(min-width: ${finalWidth}px) ${finalWidth}px, 100vw`
+							: "100vw";
+					}
+				}
+			} else {
+				console.warn(`[DinewayImage] Provider not found: ${providerId}`);
+			}
+		} catch (error) {
+			console.error(
+				`[DinewayImage] Failed to get embed for image ${img.id}:`,
+				error
+			);
+		}
+
+		// Fallback to local URL if provider failed
+		if (!src) {
+			src = buildLocalImageUrl(img);
+		}
+	}
+}
+
+// Build placeholder background style
+const blurhash =
+	typeof image === "object"
+		? (image?.meta?.blurhash as string | undefined)
+		: undefined;
+const dominantColor =
+	typeof image === "object"
+		? (image?.meta?.dominantColor as string | undefined)
+		: 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 imgProps: Record<string, unknown> = {
+	src,
+	srcset,
+	sizes,
+	width: finalWidth,
+	height: finalHeight,
+	alt: finalAlt,
+	loading: priority ? "eager" : "lazy",
+	decoding: "async",
+	style: placeholderStyle ? `${baseStyle} ${placeholderStyle}` : baseStyle,
+	...attrs,
+};
+---
+
+{img && src ? <img {...imgProps} /> : null}