dineway 0.1.3 → 0.1.5

package/src/components/Break.astro

@@ -0,0 +1,45 @@
+---
+/**
+ * Portable Text Break/Separator block component
+ *
+ * Renders horizontal rules and page breaks.
+ */
+export interface Props {
+	node: {
+		_type: "break";
+		_key: string;
+		style?: "line" | "dots" | "space";
+	};
+}
+
+const { node } = Astro.props;
+const style = node?.style || "line";
+---
+
+{
+	style === "dots" ? (
+		<div class="dineway-break dineway-break-dots">• • •</div>
+	) : style === "space" ? (
+		<div class="dineway-break dineway-break-space" />
+	) : (
+		<hr class="dineway-break dineway-break-line" />
+	)
+}
+
+<style>
+	.dineway-break {
+		margin: 2rem 0;
+	}
+	.dineway-break-line {
+		border: none;
+		border-top: 1px solid #e0e0e0;
+	}
+	.dineway-break-dots {
+		text-align: center;
+		color: #999;
+		letter-spacing: 0.5em;
+	}
+	.dineway-break-space {
+		height: 2rem;
+	}
+</style>

package/src/components/Button.astro

@@ -0,0 +1,71 @@
+---
+import { sanitizeHref } from "../utils/url.js";
+
+/**
+ * Portable Text Button block component
+ *
+ * Renders a single button from WordPress imports.
+ */
+export interface Props {
+	node: {
+		_type: "button";
+		_key: string;
+		text: string;
+		url?: string;
+		style?: "default" | "outline" | "fill";
+	};
+}
+
+const { node } = Astro.props;
+const { text, url: rawUrl, style = "default" } = node ?? {};
+const url = rawUrl ? sanitizeHref(rawUrl) : undefined;
+---
+
+{
+	url ? (
+		<a href={url} class:list={["dineway-button", `dineway-button--${style}`]}>
+			{text}
+		</a>
+	) : (
+		<span class:list={["dineway-button", `dineway-button--${style}`]}>{text}</span>
+	)
+}
+
+<style>
+	.dineway-button {
+		display: inline-block;
+		padding: 0.75em 1.5em;
+		border-radius: 4px;
+		text-decoration: none;
+		font-weight: 500;
+		cursor: pointer;
+		transition:
+			background-color 0.2s,
+			border-color 0.2s,
+			color 0.2s;
+	}
+
+	.dineway-button--default,
+	.dineway-button--fill {
+		background-color: var(--dineway-button-bg, #0073aa);
+		color: var(--dineway-button-color, #fff);
+		border: 2px solid var(--dineway-button-bg, #0073aa);
+	}
+
+	.dineway-button--default:hover,
+	.dineway-button--fill:hover {
+		background-color: var(--dineway-button-bg-hover, #005177);
+		border-color: var(--dineway-button-bg-hover, #005177);
+	}
+
+	.dineway-button--outline {
+		background-color: transparent;
+		color: var(--dineway-button-bg, #0073aa);
+		border: 2px solid var(--dineway-button-bg, #0073aa);
+	}
+
+	.dineway-button--outline:hover {
+		background-color: var(--dineway-button-bg, #0073aa);
+		color: var(--dineway-button-color, #fff);
+	}
+</style>

package/src/components/Buttons.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * Portable Text Buttons container component
+ *
+ * Renders a group of buttons from WordPress imports.
+ */
+import Button from "./Button.astro";
+
+export interface Props {
+	node: {
+		_type: "buttons";
+		_key: string;
+		buttons: Array<{
+			_type: "button";
+			_key: string;
+			text: string;
+			url?: string;
+			style?: "default" | "outline" | "fill";
+		}>;
+		layout?: "horizontal" | "vertical";
+	};
+}
+
+const { node } = Astro.props;
+const { buttons = [], layout = "horizontal" } = node ?? {};
+---
+
+<div class:list={["dineway-buttons", `dineway-buttons--${layout}`]}>
+	{buttons.map((button) => <Button node={button} />)}
+</div>
+
+<style>
+	.dineway-buttons {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.75rem;
+		margin: 1.5rem 0;
+	}
+
+	.dineway-buttons--vertical {
+		flex-direction: column;
+		align-items: flex-start;
+	}
+
+	.dineway-buttons--horizontal {
+		flex-direction: row;
+		align-items: center;
+	}
+</style>

package/src/components/Code.astro

@@ -0,0 +1,59 @@
+---
+/**
+ * Portable Text Code block component
+ *
+ * Renders code blocks with optional syntax highlighting class.
+ */
+export interface Props {
+	node: {
+		_type: "code";
+		_key: string;
+		code: string;
+		language?: string;
+		filename?: string;
+	};
+}
+
+const { node } = Astro.props;
+
+if (!node?.code) {
+	return null;
+}
+
+const { code, language, filename } = node;
+const languageClass = language ? `language-${language}` : "";
+---
+
+<div class="dineway-code">
+	{filename && <div class="dineway-code-filename">{filename}</div>}
+	<pre class={languageClass}><code class={languageClass}>{code}</code></pre>
+</div>
+
+<style>
+	.dineway-code {
+		margin: 1.5rem 0;
+	}
+	.dineway-code-filename {
+		font-size: 0.75rem;
+		font-family: monospace;
+		background: #2d2d2d;
+		color: #ccc;
+		padding: 0.5rem 1rem;
+		border-radius: 0.5rem 0.5rem 0 0;
+	}
+	.dineway-code pre {
+		margin: 0;
+		padding: 1rem;
+		background: #1e1e1e;
+		border-radius: 0.5rem;
+		overflow-x: auto;
+	}
+	.dineway-code-filename + pre {
+		border-radius: 0 0 0.5rem 0.5rem;
+	}
+	.dineway-code code {
+		font-family: "Fira Code", "Consolas", monospace;
+		font-size: 0.875rem;
+		color: #e0e0e0;
+	}
+</style>

package/src/components/Columns.astro

@@ -0,0 +1,59 @@
+---
+/**
+ * Portable Text Columns block component
+ *
+ * Renders multi-column layouts from WordPress imports.
+ */
+import { PortableText } from "astro-portabletext";
+
+export interface Props {
+	node: {
+		_type: "columns";
+		_key: string;
+		columns: Array<{
+			_type: "column";
+			_key: string;
+			content: unknown[];
+			width?: string;
+		}>;
+	};
+}
+
+const { node } = Astro.props;
+const columns = node?.columns ?? [];
+
+if (!columns.length) {
+	return null;
+}
+---
+
+<div class="dineway-columns" style={`--column-count: ${columns.length}`}>
+	{
+		columns.map((column) => (
+			<div
+				class="dineway-column"
+				style={column.width ? `flex-basis: ${column.width}` : undefined}
+			>
+				<PortableText value={column.content} />
+			</div>
+		))
+	}
+</div>
+
+<style>
+	.dineway-columns {
+		display: flex;
+		gap: 2rem;
+		margin: 1.5rem 0;
+	}
+	.dineway-column {
+		flex: 1;
+		min-width: 0;
+	}
+	@media (max-width: 768px) {
+		.dineway-columns {
+			flex-direction: column;
+			gap: 1rem;
+		}
+	}
+</style>

package/src/components/CommentForm.astro

@@ -0,0 +1,315 @@
+---
+/// <reference types="dineway/locals" />
+
+/**
+ * Comment submission form.
+ *
+ * Renders a form that submits via fetch to the public POST endpoint.
+ * Includes honeypot field, optional Turnstile widget, and inline feedback.
+ * Pre-fills name/email for authenticated CMS users.
+ *
+ * @example
+ * ```astro
+ * ---
+ * import { CommentForm } from "dineway/ui";
+ * ---
+ * <CommentForm collection="posts" contentId={post.id} />
+ * ```
+ */
+
+interface Props {
+	collection: string;
+	contentId: string;
+	parentId?: string | null;
+	class?: string;
+	/** Turnstile site key. If provided, the widget is rendered. */
+	turnstileSiteKey?: string;
+}
+
+import { getCollectionInfo } from "../schema/query.js";
+
+const {
+	collection,
+	contentId,
+	parentId = null,
+	class: className,
+	turnstileSiteKey,
+} = Astro.props;
+
+const enabled = (await getCollectionInfo(collection))?.commentsEnabled ?? false;
+const { user } = Astro.locals;
+const formId = `ec-comment-form-${parentId ?? "root"}`;
+const endpoint = `/_dineway/api/comments/${encodeURIComponent(collection)}/${encodeURIComponent(contentId)}`;
+---
+
+{
+	enabled && (
+		<form
+			id={formId}
+			class:list={["ec-comment-form", className]}
+			data-ec-comment-form
+			data-endpoint={endpoint}
+			data-user-name={user?.name ?? ""}
+			data-user-email={user?.email ?? ""}
+		>
+			{user ? (
+				<div class="ec-comment-user-info">
+					<span class="ec-comment-user-name">{user.name}</span>
+					<span class="ec-comment-user-email">{user.email}</span>
+				</div>
+			) : (
+				<div class="ec-comment-form-fields">
+					<label class="ec-comment-form-field">
+						<span>Name</span>
+						<input type="text" name="authorName" required maxlength="100" />
+					</label>
+
+					<label class="ec-comment-form-field">
+						<span>Email</span>
+						<input type="email" name="authorEmail" required />
+					</label>
+				</div>
+			)}
+
+			{/* Honeypot — hidden from humans, filled by bots */}
+			<div
+				aria-hidden="true"
+				style="position:absolute;left:-9999px;top:-9999px;"
+			>
+				<label>
+					Don't fill this out
+					<input
+						type="text"
+						name="website_url"
+						tabindex="-1"
+						autocomplete="off"
+					/>
+				</label>
+			</div>
+
+			<label class="ec-comment-form-field">
+				<span>Comment</span>
+				<textarea name="body" required maxlength="5000" rows="4" />
+			</label>
+
+			{parentId && <input type="hidden" name="parentId" value={parentId} />}
+
+			{turnstileSiteKey && (
+				<div
+					class="cf-turnstile"
+					data-sitekey={turnstileSiteKey}
+					data-theme="auto"
+				/>
+			)}
+
+			<button type="submit" class="ec-comment-form-submit">
+				Post Comment
+			</button>
+
+			<div class="ec-comment-form-status" role="status" aria-live="polite" />
+		</form>
+	)
+}
+
+{enabled && turnstileSiteKey && (
+	<script is:inline src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
+)}
+
+<script>
+	document.addEventListener("submit", async (e) => {
+		const form = e.target;
+		if (
+			!(form instanceof HTMLFormElement) ||
+			!form.hasAttribute("data-ec-comment-form")
+		)
+			return;
+		e.preventDefault();
+
+		const endpoint = form.dataset.endpoint;
+		if (!endpoint) return;
+
+		const submitBtn = form.querySelector<HTMLButtonElement>(
+			".ec-comment-form-submit"
+		);
+		const statusEl = form.querySelector<HTMLElement>(".ec-comment-form-status");
+		if (!submitBtn || !statusEl) return;
+
+		submitBtn.disabled = true;
+		submitBtn.textContent = "Submitting...";
+		statusEl.textContent = "";
+		statusEl.className = "ec-comment-form-status";
+
+		const data = new FormData(form);
+		const body: Record<string, string> = {};
+
+		// Include user info from data attributes (for authenticated users)
+		const userName = form.dataset.userName;
+		const userEmail = form.dataset.userEmail;
+		if (userName) body.authorName = userName;
+		if (userEmail) body.authorEmail = userEmail;
+
+		for (const [key, value] of data.entries()) {
+			if (typeof value === "string") {
+				body[key] = value;
+			}
+		}
+
+		// Get Turnstile token if present
+		const turnstileInput = form.querySelector<HTMLInputElement>(
+			"[name='cf-turnstile-response']"
+		);
+		if (turnstileInput?.value) {
+			body.turnstileToken = turnstileInput.value;
+		}
+
+		try {
+			const res = await fetch(endpoint, {
+				method: "POST",
+				headers: {
+					"Content-Type": "application/json",
+					"X-Dineway-Request": "1",
+				},
+				body: JSON.stringify(body),
+			});
+
+			const result = await res.json();
+
+			if (res.ok) {
+				statusEl.textContent = result.message || "Comment submitted!";
+				statusEl.classList.add("ec-comment-form-success");
+				// Reset form fields (but not disabled pre-filled fields)
+				const textarea = form.querySelector<HTMLTextAreaElement>(
+					"textarea[name='body']"
+				);
+				if (textarea) textarea.value = "";
+				// Reset Turnstile if present
+				if (typeof window.turnstile !== "undefined") {
+					window.turnstile.reset();
+				}
+			} else {
+				statusEl.textContent =
+					result.error?.message ||
+					result.message ||
+					"Failed to submit comment.";
+				statusEl.classList.add("ec-comment-form-error");
+			}
+		} catch {
+			statusEl.textContent = "Network error. Please try again.";
+			statusEl.classList.add("ec-comment-form-error");
+		} finally {
+			submitBtn.disabled = false;
+			submitBtn.textContent = "Post Comment";
+		}
+	});
+</script>
+
+<style>
+	.ec-comment-form {
+		--ec-form-gap: 0.75rem;
+	}
+
+	.ec-comment-form-fields {
+		display: grid;
+		gap: var(--ec-form-gap);
+	}
+
+	@media (min-width: 640px) {
+		.ec-comment-form-fields {
+			grid-template-columns: 1fr 1fr;
+		}
+	}
+
+	.ec-comment-form-field {
+		display: flex;
+		flex-direction: column;
+		gap: 0.25rem;
+		margin-top: var(--ec-form-gap);
+	}
+
+	.ec-comment-form-field:first-child {
+		margin-top: 0;
+	}
+
+	.ec-comment-form-fields .ec-comment-form-field {
+		margin-top: 0;
+	}
+
+	.ec-comment-form-field input,
+	.ec-comment-form-field textarea {
+		padding: 0.5rem;
+		border: 1px solid var(--ec-form-border, #d1d5db);
+		border-radius: 0.25rem;
+		font: inherit;
+		background: var(--ec-form-bg, #fff);
+		color: var(--ec-form-color, inherit);
+	}
+
+	:global(.dark) .ec-comment-form-field input,
+	:global(.dark) .ec-comment-form-field textarea {
+		--ec-form-bg: #1f2937;
+		--ec-form-border: #4b5563;
+		--ec-form-color: #f9fafb;
+	}
+
+	.ec-comment-user-info {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		padding: 0.75rem;
+		background: var(--ec-form-user-bg, #f3f4f6);
+		border: 1px solid var(--ec-form-user-border, #d1d5db);
+		border-radius: 0.375rem;
+		font-size: 0.875rem;
+	}
+
+	:global(.dark) .ec-comment-user-info {
+		background: var(--ec-form-user-bg-dark, #374151);
+	}
+
+	.ec-comment-user-name {
+		font-weight: 600;
+	}
+
+	.ec-comment-user-email {
+		opacity: 0.7;
+	}
+
+	.ec-comment-user-email::before {
+		content: "·";
+		margin-right: 0.5rem;
+	}
+
+	.ec-comment-form-submit {
+		margin-top: var(--ec-form-gap);
+		padding: 0.5rem 1.5rem;
+		border: none;
+		border-radius: 0.25rem;
+		font: inherit;
+		font-weight: 600;
+		cursor: pointer;
+		background: var(--ec-form-submit-bg, #1f2937);
+		color: var(--ec-form-submit-color, #fff);
+	}
+
+	.ec-comment-form-submit:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	.ec-comment-form-status {
+		margin-top: var(--ec-form-gap);
+		font-size: 0.875em;
+	}
+
+	.ec-comment-form-status:empty {
+		display: none;
+	}
+
+	.ec-comment-form-success {
+		color: var(--ec-form-success-color, #059669);
+	}
+
+	.ec-comment-form-error {
+		color: var(--ec-form-error-color, #dc2626);
+	}
+</style>