@coywolf/emdash 0.0.0-stage → 0.35.13

package/src/astro/index.ts

@@ -0,0 +1,84 @@
+/**
+ * Astro components for the pack's Portable Text blocks, auto-merged into
+ * EmDash's <PortableText> (componentsEntry). Keys are block types. Each
+ * component checks its feature switch and renders nothing (or EmDash's own
+ * renderer) when it's off.
+ */
+import CodeBlock from "./codeBlocks/CodeBlock.astro";
+import FileCard from "./files/FileCard.astro";
+import BreadcrumbsComponent from "./breadcrumbs/Breadcrumbs.astro";
+import BreadcrumbsBlock from "./breadcrumbs/BreadcrumbsBlock.astro";
+import HeadingBlock from "./headings/HeadingBlock.astro";
+import TableOfContents from "./headings/TableOfContents.astro";
+import CoywolfVideo from "./videos/CoywolfVideo.astro";
+import CoywolfReview from "./reviews/CoywolfReview.astro";
+import Review from "./reviews/Review.astro";
+import Note from "./customBlocks/Note.astro";
+import Details from "./customBlocks/Details.astro";
+import Disclosure from "./customBlocks/Disclosure.astro";
+import Quote from "./customBlocks/Quote.astro";
+import Testimonial from "./customBlocks/Testimonial.astro";
+import Podcast from "./customBlocks/Podcast.astro";
+import CaptionedTable from "./tables/CaptionedTable.astro";
+
+export const blockComponents = {
+	"coywolf-toc": TableOfContents,
+	"coywolf-breadcrumbs": BreadcrumbsBlock,
+	code: CodeBlock,
+	"coywolf-file": FileCard,
+	"coywolf-video": CoywolfVideo,
+	"coywolf-review": CoywolfReview,
+	"coywolf-note": Note,
+	"coywolf-details": Details,
+	"coywolf-disclosure": Disclosure,
+	"coywolf-quote": Quote,
+	"coywolf-testimonial": Testimonial,
+	"coywolf-podcast": Podcast,
+};
+
+/** EmDash's table, keyboard-scrollable, with its `caption` (tables imported from WordPress). In `portableTextComponents`. */
+export { CaptionedTable };
+
+/** Videos module: the Stream player, for theme code. */
+export { CoywolfVideo };
+export { hostedPosterImage } from "../videos/poster.js";
+
+/** Breadcrumb trail for theme layouts (Breadcrumb Nav module). */
+export { BreadcrumbsComponent as Breadcrumbs };
+
+/**
+ * Pass to <PortableText components={...}> so headings get their anchor ids
+ * (Headings & TOC module) and tables are keyboard-scrollable, with their
+ * caption. Plugins can't override EmDash's `block` renderer.
+ */
+export const portableTextComponents = { block: HeadingBlock, type: { table: CaptionedTable } };
+/** Search module: the SearchBox component and OR-fallback search for site search pages. */
+export { default as SearchBox } from "./search/SearchBox.astro";
+export { searchWithFallback } from "../search/query.js";
+export type { PackSearchOptions, PackSearchResponse, PackSearchResult } from "../search/query.js";
+export { entryUrl, entryUrls, matchEntryPath } from "../core/content-url.js";
+export type { EntryRef, MatchedEntry } from "../core/content-url.js";
+/** Reviews module: the review box for theme code, and legacy WordPress review marker attrs → review fields. */
+export { Review };
+export { reviewFromAttrs } from "../reviews/lib.js";
+
+/**
+ * Clean Image URLs module: cleanImageUrl builds resized-image URLs for theme
+ * images (on the media host when one is set, else /media/<id>-<w>x<h>.<format>;
+ * null when off); originalImageUrl (alias mediaUrl) gives the original file
+ * on the media host (falls back to the source).
+ */
+export { cleanImageUrl, imageDimensions, mediaUrl, originalImageUrl } from "../images/pack.js";
+export type { ImageDimensions } from "../images/pack.js";
+/**
+ * Stored image sizes: imageInfo reads every image of a page in one query
+ * (call it once with all of them); responsiveImage (widths) and croppedImage
+ * (the site's crops) then give AVIF and WebP srcsets for a <picture>, or null
+ * until they exist (fall back to cleanImageUrl). markPendingMedia marks a
+ * page that showed a stopgap so it's cached briefly.
+ */
+export { croppedImage, imageInfo, responsiveImage } from "../images/pack.js";
+export type { ImageInfo, ResponsiveImage as ResponsiveImageSources } from "../images/pack.js";
+export { markPendingMedia } from "../images/pending.js";
+export { default as ResponsiveImage } from "./images/ResponsiveImage.astro";
+export { cleanImagePath, mediaFile } from "../images/lib.js";

package/src/astro/reviews/CoywolfReview.astro

@@ -0,0 +1,27 @@
+---
+/**
+ * Portable Text `coywolf-review` block (Reviews module). Renders nothing when
+ * the Reviews feature is off. Schema comes from the page:metadata hook /
+ * Schema & Social's graph, not from here.
+ */
+import { siteFeatureOn } from "../../core/features.js";
+import Review from "./Review.astro";
+
+interface Props {
+	node: Record<string, unknown>;
+	[key: string]: unknown;
+}
+
+const { node } = Astro.props;
+
+// Claim the per-page CSS synchronously, before any await, so the first block
+// in document order carries it even when siblings render in parallel.
+const locals = (Astro.locals ?? {}) as Record<string, unknown>;
+const first = !locals.__cwReviewAssets;
+locals.__cwReviewAssets = true;
+
+const on = Boolean(node) && (await siteFeatureOn("reviews"));
+if (!on && first) locals.__cwReviewAssets = false;
+---
+
+{on && <Review review={node} styles={first} />}

package/src/astro/reviews/Review.astro

@@ -0,0 +1,49 @@
+---
+/**
+ * The review box (Reviews module), for themes: renders a review in the same
+ * markup and style as the Coywolf Review block, including the accent color
+ * and custom CSS from the Reviews page. Not gated by the feature switch: a
+ * theme that uses it has opted in.
+ *
+ *   <Review review={{ itemName, rating: 4.5, pros: ["…"], cons: ["…"] }} />
+ *   <Review attrs={markerAttrs} />   (legacy WordPress review marker:
+ *                                     { name, brand, rating, strengths, shortcomings })
+ *   <Review {...markerAttrs} />      (same, spread)
+ *
+ * Schema isn't printed here; pass the same reviews as page.coywolf.reviews
+ * (see reviewFromAttrs) and Review schema adds them to the page's JSON-LD.
+ * The CSS is inlined once per page, before the first box, so no layout shift.
+ */
+import { normalizeReview, pageCss, renderReviewHtml, reviewFromAttrs } from "../../reviews/lib.js";
+import { siteReviewStyle } from "../../reviews/settings.js";
+
+interface Props {
+	/** Block-shaped fields (itemName, itemType, brand, itemUrl, image, rating, pros, cons, …). */
+	review?: Record<string, unknown>;
+	/** Legacy WordPress review marker attributes. */
+	attrs?: Record<string, unknown>;
+	/** Set by the block renderer, which claims the page's CSS before its own await. */
+	styles?: boolean;
+	[key: string]: unknown;
+}
+
+const props = Astro.props as Props;
+const source =
+	props.review ??
+	(props.attrs ? reviewFromAttrs(props.attrs) : "strengths" in props || "shortcomings" in props ? reviewFromAttrs(props) : props);
+const review = normalizeReview(source);
+
+const locals = (Astro.locals ?? {}) as Record<string, unknown>;
+let first: boolean;
+if (typeof props.styles === "boolean") first = props.styles;
+else {
+	first = Boolean(review) && !locals.__cwReviewAssets;
+	if (review) locals.__cwReviewAssets = true;
+}
+
+const html = review ? renderReviewHtml(review) : "";
+const css = first ? pageCss(await siteReviewStyle()) : "";
+---
+
+{css && <style is:inline set:html={css} />}
+{html && <Fragment set:html={html} />}

package/src/astro/search/SearchBox.astro

@@ -0,0 +1,61 @@
+---
+/**
+ * SearchBox: a search form (feature "search.box") with live results as you
+ * type while "search.live" is on.
+ *
+ * ```astro
+ * ---
+ * import { SearchBox } from "@coywolf/emdash/astro";
+ * ---
+ * <SearchBox action="/search" collections={["posts", "pages"]} />
+ * ```
+ *
+ * Without JavaScript it's a plain GET form to `action` (?q=…), so the site's
+ * search page handles it. With JavaScript, suggestions come from the pack's
+ * live results route: titles first, then full text (with excerpts), then
+ * results for any of the words when nothing matches all of them. Renders
+ * nothing while "search.box" is off, and a plain form while "search.live"
+ * is off. Colors are CSS custom properties (--cw-search-*).
+ */
+import { isOn, siteFeatures } from "../../core/features.js";
+import SearchBoxForm from "./SearchBoxForm.astro";
+
+export interface Props {
+	/** The site's search results page. Default "/search". */
+	action?: string;
+	/** Query parameter name. Default "q". */
+	name?: string;
+	/** Field label (visually hidden unless showLabel). Default "Search". */
+	label?: string;
+	showLabel?: boolean;
+	placeholder?: string;
+	/** Collections to suggest from (default: every searchable collection). */
+	collections?: string[];
+	/** Locale to search (default: the page's locale; null for all). */
+	locale?: string | null;
+	/** Characters before suggesting. Default 2. */
+	minChars?: number;
+	/** Milliseconds to wait after typing. Default 200. */
+	debounce?: number;
+	/** Suggestions to show. Default 8. */
+	limit?: number;
+	/** Show the content type (e.g. "Post") beside each suggestion. Default true. */
+	showType?: boolean;
+	/** Show a matching excerpt under each suggestion. Default true. */
+	showSnippets?: boolean;
+	/** Show a submit button. Default true. */
+	submitButton?: boolean;
+	/** Value to start with, e.g. the current query on the results page. */
+	value?: string;
+	class?: string;
+	/** Base for element ids (needed when a page has more than one box). Default "cw-search". */
+	id?: string;
+	/** D1 binding of the site database, for the feature switch. Default "DB". */
+	database?: string;
+}
+
+const { database, ...props } = Astro.props;
+const features = await siteFeatures(database);
+---
+
+{isOn(features, "search.box") && <SearchBoxForm {...props} live={isOn(features, "search.live")} />}