emdash 0.0.0-b → 0.0.2

package/src/components/Table.astro

@@ -0,0 +1,108 @@
+---
+/**
+ * Portable Text Table block component
+ *
+ * Renders tables from WordPress imports.
+ */
+export interface Props {
+	node: {
+		_type: "table";
+		_key: string;
+		rows: Array<{
+			_type: "tableRow";
+			_key: string;
+			cells: Array<{
+				_type: "tableCell";
+				_key: string;
+				content: Array<{
+					_type: "span";
+					_key: string;
+					text: string;
+					marks?: string[];
+				}>;
+				markDefs?: Array<{
+					_type: string;
+					_key: string;
+					[key: string]: unknown;
+				}>;
+				isHeader?: boolean;
+			}>;
+		}>;
+		hasHeaderRow?: boolean;
+	};
+}
+
+const { node } = Astro.props;
+const rows = node?.rows ?? [];
+
+if (!rows.length) {
+	return null;
+}
+
+// Helper to render cell content as text (simplified - doesn't handle marks)
+function renderCellText(
+	content: Array<{ text: string; marks?: string[] }>,
+): string {
+	return content.map((span) => span.text).join("");
+}
+---
+
+{() => {
+	const hasHeader = node?.hasHeaderRow;
+	const headerRow = hasHeader ? rows[0] : null;
+	const bodyRows = hasHeader ? rows.slice(1) : rows;
+
+	return (
+		<div class="emdash-table-wrapper">
+			<table class="emdash-table">
+				{headerRow && (
+					<thead>
+						<tr>
+							{headerRow.cells.map((cell) => (
+								<th>{renderCellText(cell.content)}</th>
+							))}
+						</tr>
+					</thead>
+				)}
+				<tbody>
+					{bodyRows.map((row) => (
+						<tr>
+							{row.cells.map((cell) => {
+								const CellTag = cell.isHeader ? "th" : "td";
+								return <CellTag>{renderCellText(cell.content)}</CellTag>;
+							})}
+						</tr>
+					))}
+				</tbody>
+			</table>
+		</div>
+	);
+}}
+
+<style>
+	.emdash-table-wrapper {
+		margin: 1.5rem 0;
+		overflow-x: auto;
+	}
+	.emdash-table {
+		width: 100%;
+		border-collapse: collapse;
+		font-size: 0.9rem;
+	}
+	.emdash-table th,
+	.emdash-table td {
+		border: 1px solid #ddd;
+		padding: 0.75rem;
+		text-align: left;
+	}
+	.emdash-table th {
+		background: #f5f5f5;
+		font-weight: 600;
+	}
+	.emdash-table tbody tr:nth-child(even) {
+		background: #fafafa;
+	}
+	.emdash-table tbody tr:hover {
+		background: #f0f0f0;
+	}
+</style>

package/src/components/WidgetArea.astro

@@ -0,0 +1,22 @@
+---
+import { getWidgetArea } from "../widgets/index.js";
+import WidgetRenderer from "./WidgetRenderer.astro";
+
+interface Props {
+	name: string;
+	class?: string;
+}
+
+const { name, class: className } = Astro.props;
+const area = await getWidgetArea(name);
+---
+
+{
+	area && area.widgets.length > 0 && (
+		<div class:list={["widget-area", className]} data-widget-area={name}>
+			{area.widgets.map((widget) => (
+				<WidgetRenderer widget={widget} />
+			))}
+		</div>
+	)
+}

package/src/components/WidgetRenderer.astro

@@ -0,0 +1,72 @@
+---
+import type { Widget } from "../widgets/types.js";
+import { getMenu } from "../menus/index.js";
+import { sanitizeHref } from "../utils/url.js";
+import PortableText from "./PortableText.astro";
+import RecentPosts from "./widgets/RecentPosts.astro";
+import Categories from "./widgets/Categories.astro";
+import Tags from "./widgets/Tags.astro";
+import Search from "./widgets/Search.astro";
+import Archives from "./widgets/Archives.astro";
+
+interface Props {
+	widget: Widget;
+}
+
+const { widget } = Astro.props;
+
+// Component map for core widgets
+const componentMap = {
+	"core:recent-posts": RecentPosts,
+	"core:categories": Categories,
+	"core:tags": Tags,
+	"core:search": Search,
+	"core:archives": Archives,
+};
+
+// For menu widgets, get menu data
+let menuData = null;
+if (widget.type === "menu" && widget.menuName) {
+	menuData = await getMenu(widget.menuName);
+}
+
+// For component widgets, get the component
+let WidgetComponent = null;
+if (widget.type === "component" && widget.componentId) {
+	WidgetComponent = componentMap[widget.componentId as keyof typeof componentMap];
+}
+---
+
+<div class="widget" data-widget-id={widget.id} data-widget-type={widget.type}>
+	{widget.title && <h3 class="widget__title">{widget.title}</h3>}
+
+	<div class="widget__content">
+		{
+			widget.type === "content" && widget.content && (
+				<PortableText value={widget.content} />
+			)
+		}
+
+		{
+			widget.type === "menu" && menuData && (
+				<nav class="widget__menu">
+					<ul>
+						{menuData.items.map((item) => (
+							<li>
+								<a href={sanitizeHref(item.url)} title={item.titleAttr || undefined}>
+									{item.label}
+								</a>
+							</li>
+						))}
+					</ul>
+				</nav>
+			)
+		}
+
+		{
+			widget.type === "component" && WidgetComponent && (
+				<WidgetComponent {...(widget.componentProps || {})} />
+			)
+		}
+	</div>
+</div>

package/src/components/index.ts

@@ -0,0 +1,116 @@
+/**
+ * EmDash Portable Text Components
+ *
+ * Pre-built components for rendering Portable Text content from WordPress imports.
+ *
+ * Usage:
+ * ```astro
+ * ---
+ * import { PortableText } from "emdash/ui";
+ * ---
+ * <PortableText value={post.data.content} />
+ * ```
+ *
+ * The PortableText component uses EmDash's built-in renderers by default.
+ * Pass custom components to override specific types:
+ *
+ * ```astro
+ * <PortableText value={content} components={{ type: { image: MyImage } }} />
+ * ```
+ */
+
+// Wrapper component with EmDash defaults
+export { default as PortableText } from "./PortableText.astro";
+
+// Comment components
+export { default as Comments } from "./Comments.astro";
+export { default as CommentForm } from "./CommentForm.astro";
+
+// Widget components
+export { default as WidgetArea } from "./WidgetArea.astro";
+
+// Main Image component for EmDash media
+export { default as EmDashImage } from "./EmDashImage.astro";
+
+// Unified Media component (supports all providers)
+export { default as EmDashMedia } from "./EmDashMedia.astro";
+
+// Portable Text block type components
+export { default as Image } from "./Image.astro";
+export { default as Code } from "./Code.astro";
+export { default as Embed } from "./Embed.astro";
+export { default as Gallery } from "./Gallery.astro";
+export { default as Columns } from "./Columns.astro";
+export { default as Break } from "./Break.astro";
+export { default as HtmlBlock } from "./HtmlBlock.astro";
+export { default as Table } from "./Table.astro";
+export { default as Button } from "./Button.astro";
+export { default as Buttons } from "./Buttons.astro";
+export { default as Cover } from "./Cover.astro";
+export { default as File } from "./File.astro";
+export { default as Pullquote } from "./Pullquote.astro";
+
+// Mark components
+export { default as Superscript } from "./marks/Superscript.astro";
+export { default as Subscript } from "./marks/Subscript.astro";
+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 BreakComponent from "./Break.astro";
+import ButtonComponent from "./Button.astro";
+import ButtonsComponent from "./Buttons.astro";
+import CodeComponent from "./Code.astro";
+import ColumnsComponent from "./Columns.astro";
+import CoverComponent from "./Cover.astro";
+import EmbedComponent from "./Embed.astro";
+import FileComponent from "./File.astro";
+import GalleryComponent from "./Gallery.astro";
+import HtmlBlockComponent from "./HtmlBlock.astro";
+// Pre-configured components object for PortableText
+import ImageComponent from "./Image.astro";
+import LinkMark from "./marks/Link.astro";
+import StrikeThroughMark from "./marks/StrikeThrough.astro";
+import SubscriptMark from "./marks/Subscript.astro";
+import SuperscriptMark from "./marks/Superscript.astro";
+import UnderlineMark from "./marks/Underline.astro";
+import PullquoteComponent from "./Pullquote.astro";
+import TableComponent from "./Table.astro";
+
+/**
+ * Pre-configured components for EmDash Portable Text content
+ *
+ * Includes renderers for:
+ * - Block types: image, code, embed, gallery, columns, break, htmlBlock, table,
+ *   button, buttons, cover, file, pullquote
+ * - Marks: superscript, subscript, underline, strike-through, link
+ */
+export const emdashComponents = {
+	type: {
+		image: ImageComponent,
+		code: CodeComponent,
+		embed: EmbedComponent,
+		gallery: GalleryComponent,
+		columns: ColumnsComponent,
+		break: BreakComponent,
+		htmlBlock: HtmlBlockComponent,
+		table: TableComponent,
+		button: ButtonComponent,
+		buttons: ButtonsComponent,
+		cover: CoverComponent,
+		file: FileComponent,
+		pullquote: PullquoteComponent,
+	},
+	mark: {
+		superscript: SuperscriptMark,
+		subscript: SubscriptMark,
+		underline: UnderlineMark,
+		"strike-through": StrikeThroughMark,
+		link: LinkMark,
+	},
+};
+
+// Public page contribution components
+export { default as EmDashHead } from "./EmDashHead.astro";
+export { default as EmDashBodyStart } from "./EmDashBodyStart.astro";
+export { default as EmDashBodyEnd } from "./EmDashBodyEnd.astro";

package/src/components/marks/Link.astro

@@ -0,0 +1,31 @@
+---
+import { sanitizeHref } from "../../utils/url.js";
+
+/**
+ * Portable Text Link mark component
+ *
+ * Receives node with markDef containing link details from astro-portabletext
+ */
+export interface Props {
+	node: {
+		markDef: {
+			_type: "link";
+			_key: string;
+			href: string;
+			blank?: boolean;
+		};
+	};
+}
+
+const { node } = Astro.props;
+const href = sanitizeHref(node?.markDef?.href);
+const blank = node?.markDef?.blank;
+---
+
+<a
+	href={href}
+	target={blank ? "_blank" : undefined}
+	rel={blank ? "noopener noreferrer" : undefined}
+>
+	<slot />
+</a>

package/src/components/marks/StrikeThrough.astro

@@ -0,0 +1,7 @@
+---
+/**
+ * Portable Text Strike-through mark component
+ */
+---
+
+<s><slot /></s>

package/src/components/marks/Subscript.astro

@@ -0,0 +1,7 @@
+---
+/**
+ * Portable Text Subscript mark component
+ */
+---
+
+<sub><slot /></sub>

package/src/components/marks/Superscript.astro

@@ -0,0 +1,7 @@
+---
+/**
+ * Portable Text Superscript mark component
+ */
+---
+
+<sup><slot /></sup>

package/src/components/marks/Underline.astro

@@ -0,0 +1,7 @@
+---
+/**
+ * Portable Text Underline mark component
+ */
+---
+
+<u><slot /></u>

package/src/components/widgets/Archives.astro

@@ -0,0 +1,65 @@
+---
+import { getEmDashCollection } from "../../query.js";
+
+interface Props {
+	type?: "monthly" | "yearly";
+	limit?: number;
+}
+
+const { type = "monthly", limit = 12 } = Astro.props;
+
+// Get all posts to build archives
+const { entries: posts } = await getEmDashCollection("posts", {
+	orderBy: { published_at: "desc" },
+});
+
+// Group posts by date
+const archives = new Map<string, { label: string; count: number; url: string }>();
+
+for (const post of posts) {
+	const publishedAt = post.data.publishedAt;
+	if (typeof publishedAt !== "string") continue;
+
+	const date = new Date(publishedAt);
+	let key: string;
+	let label: string;
+	let url: string;
+
+	if (type === "yearly") {
+		const year = date.getFullYear();
+		key = `${year}`;
+		label = `${year}`;
+		url = `/archives/${year}`;
+	} else {
+		const year = date.getFullYear();
+		const month = date.getMonth() + 1;
+		key = `${year}-${month.toString().padStart(2, "0")}`;
+		label = date.toLocaleDateString("en-US", {
+			year: "numeric",
+			month: "long",
+		});
+		url = `/archives/${year}/${month.toString().padStart(2, "0")}`;
+	}
+
+	if (!archives.has(key)) {
+		archives.set(key, { label, count: 0, url });
+	}
+	archives.get(key)!.count++;
+}
+
+// Convert to array and limit
+const archiveList = [...archives.values()].slice(0, limit);
+---
+
+<ul class="widget-archives">
+	{
+		archiveList.map((archive) => (
+			<li>
+				<a href={archive.url} class="widget-archives__link">
+					{archive.label}
+				</a>
+				<span class="widget-archives__count">({archive.count})</span>
+			</li>
+		))
+	}
+</ul>

package/src/components/widgets/Categories.astro

@@ -0,0 +1,35 @@
+---
+/**
+ * Categories widget component
+ * Displays a list of categories with optional post counts
+ */
+import { getTaxonomyTerms } from "../../taxonomies/index.js";
+
+interface Props {
+	showCount?: boolean;
+	hierarchical?: boolean;
+}
+
+const { showCount = true, hierarchical = true } = Astro.props;
+
+const categories = await getTaxonomyTerms("category");
+---
+
+<ul class="widget-categories">
+	{
+		categories.length > 0 ? (
+			categories.map((category) => (
+				<li>
+					<a href={`/category/${category.slug}`} class="widget-categories__link">
+						{category.label}
+					</a>
+					{showCount && category.count !== undefined && (
+						<span class="widget-categories__count">({category.count})</span>
+					)}
+				</li>
+			))
+		) : (
+			<li class="widget-categories__empty">No categories yet</li>
+		)
+	}
+</ul>

package/src/components/widgets/RecentPosts.astro

@@ -0,0 +1,51 @@
+---
+import { getEmDashCollection } from "../../query.js";
+
+interface Props {
+	count?: number;
+	showThumbnails?: boolean;
+	showDate?: boolean;
+}
+
+const { count = 5, showThumbnails = false, showDate = true } = Astro.props;
+
+const { entries: posts } = await getEmDashCollection("posts", {
+	limit: count,
+	orderBy: { published_at: "desc" },
+});
+
+// Helper to get typed values from dynamic data
+function getString(data: Record<string, unknown>, key: string): string | undefined {
+	const val = data[key];
+	return typeof val === "string" ? val : undefined;
+}
+---
+
+<ul class="widget-recent-posts">
+	{
+		posts.map((post) => {
+			const publishedAt = getString(post.data, "publishedAt");
+			const featuredImage = getString(post.data, "featured_image");
+			const title = getString(post.data, "title");
+			return (
+				<li>
+					{showThumbnails && featuredImage && (
+						<img
+							src={featuredImage}
+							alt=""
+							class="widget-recent-posts__thumbnail"
+						/>
+					)}
+					<a href={`/posts/${post.id}`} class="widget-recent-posts__link">
+						{title}
+					</a>
+					{showDate && publishedAt && (
+						<time datetime={publishedAt} class="widget-recent-posts__date">
+							{new Date(publishedAt).toLocaleDateString()}
+						</time>
+					)}
+				</li>
+			);
+		})
+	}
+</ul>

package/src/components/widgets/Search.astro

@@ -0,0 +1,18 @@
+---
+interface Props {
+	placeholder?: string;
+}
+
+const { placeholder = "Search..." } = Astro.props;
+---
+
+<form method="get" action="/search" class="widget-search">
+	<input
+		type="search"
+		name="q"
+		placeholder={placeholder}
+		aria-label="Search"
+		class="widget-search__input"
+	/>
+	<button type="submit" class="widget-search__button">Search</button>
+</form>

package/src/components/widgets/Tags.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * Tags widget component
+ * Displays a tag cloud with optional counts
+ */
+import { getTaxonomyTerms } from "../../taxonomies/index.js";
+
+interface Props {
+	showCount?: boolean;
+	limit?: number;
+}
+
+const { showCount = false, limit = 20 } = Astro.props;
+
+const allTags = await getTaxonomyTerms("tag");
+const tags = allTags.slice(0, limit);
+---
+
+<div class="widget-tags">
+	{
+		tags.length > 0 ? (
+			<ul class="widget-tags__cloud">
+				{tags.map((tag) => (
+					<li>
+						<a href={`/tag/${tag.slug}`} class="widget-tags__link">
+							{tag.label}
+						</a>
+						{showCount && tag.count !== undefined && (
+							<span class="widget-tags__count">({tag.count})</span>
+						)}
+					</li>
+				))}
+			</ul>
+		) : (
+			<p class="widget-tags__empty">No tags yet</p>
+		)
+	}
+</div>

package/src/content/converters/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Portable Text Converters
+ *
+ * Bidirectional conversion between Portable Text and ProseMirror JSON.
+ */
+
+export { prosemirrorToPortableText } from "./prosemirror-to-portable-text.js";
+export { portableTextToProsemirror } from "./portable-text-to-prosemirror.js";
+export * from "./types.js";