@mezzanine-stack/astro-renderer 0.1.0

package/BlogDocumentPage.astro

@@ -0,0 +1,44 @@
+---
+import type { BlogDocument } from "@mezzanine-stack/content-document";
+import DocumentBody from "./DocumentBody.astro";
+
+export interface Props {
+  doc: BlogDocument;
+}
+
+const { doc } = Astro.props;
+
+const pubDate = doc.pubDate ? new Date(doc.pubDate) : undefined;
+const hasValidPubDate = pubDate && !Number.isNaN(pubDate.getTime());
+
+function formatJaDate(d: Date): string {
+  return d.toLocaleDateString("ja-JP", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+---
+
+<article>
+  <h1 class="mz-field-title">{doc.title}</h1>
+
+  {doc.description ? <p class="mz-field-description">{doc.description}</p> : null}
+
+  {doc.heroImage && doc.heroImage.src ? (
+    <img class="mz-field-hero-image" src={doc.heroImage.src} alt={doc.heroImage.alt ?? ""} loading="lazy" />
+  ) : null}
+
+  {hasValidPubDate ? <time class="mz-field-date">{formatJaDate(pubDate!)}</time> : null}
+
+  {doc.tags?.length ? (
+    <div class="mz-field-tags cluster">
+      {doc.tags.map((t) => (
+        <span class="mz-tag">{t}</span>
+      ))}
+    </div>
+  ) : null}
+
+  <DocumentBody nodes={doc.body} />
+</article>
+

package/CollectionList.astro

@@ -0,0 +1,200 @@
+---
+import SectionComp from "@mezzanine-stack/ui/Section.astro";
+import Pagination from "@mezzanine-stack/ui/Pagination.astro";
+import { getCollection, type CollectionEntry } from "astro:content";
+
+export interface Props {
+  /** Show/hide this component */
+  show?: boolean;
+  /**
+   * Single collection name. Use this OR `collectionNames`, not both.
+   * If provided, renders only this collection.
+   */
+  name?: string;
+  /**
+   * Multiple collection names to render. Ignored when `name` is provided.
+   */
+  collectionNames?: string[];
+  /**
+   * Map of collection name to the date field used for sorting.
+   * Example: { blog: 'pubDate', works: 'date', gallery: 'date' }
+   * Collections not in this map are sorted by 'date' as fallback.
+   */
+  dateFieldMap?: Record<string, string>;
+  /** Max items to display per collection (no pagination) */
+  maxItems?: number;
+  /** Sort direction */
+  sortOrder?: "asc" | "desc";
+  /** Current page number (1-based) */
+  page?: number;
+  /** Items per page. When set, enables pagination. */
+  perPage?: number;
+  /** Show "see more" link when item count exceeds maxItems */
+  showMoreLink?: boolean;
+}
+
+const {
+  show = true,
+  name,
+  collectionNames = [],
+  dateFieldMap = {},
+  maxItems,
+  sortOrder = "desc",
+  page = 1,
+  perPage,
+  showMoreLink = true,
+} = Astro.props;
+
+if (!show) return;
+
+const targetNames: string[] = name ? [name] : collectionNames;
+
+type CollectionData = {
+  collectionName: string;
+  content: CollectionEntry<any>[];
+  count: number;
+  displayCount: number;
+  totalPages: number;
+  currentPage: number;
+  pages: { url: string; pageNumber: number }[];
+};
+
+const allCollectionsData: CollectionData[] = await Promise.all(
+  targetNames.map(async (collectionName): Promise<CollectionData> => {
+    try {
+      const dateField = dateFieldMap[collectionName] ?? "date";
+      const content = await getCollection(collectionName as any, (item: CollectionEntry<any>) => !item.data.draft);
+
+      const sortedContent = content.sort((a: CollectionEntry<any>, b: CollectionEntry<any>) => {
+        const dateA = new Date((a.data[dateField] as Date | string | undefined) ?? 0);
+        const dateB = new Date((b.data[dateField] as Date | string | undefined) ?? 0);
+        return sortOrder === "desc"
+          ? dateB.getTime() - dateA.getTime()
+          : dateA.getTime() - dateB.getTime();
+      });
+
+      const effectivePerPage = perPage;
+      let paginatedContent = sortedContent;
+      let totalPages = 1;
+
+      if (effectivePerPage) {
+        totalPages = Math.max(1, Math.ceil(sortedContent.length / effectivePerPage));
+        const safeCurrentPage = Math.min(Math.max(page, 1), totalPages);
+        const start = (safeCurrentPage - 1) * effectivePerPage;
+        paginatedContent = sortedContent.slice(start, start + effectivePerPage);
+      }
+
+      const limitedContent =
+        !effectivePerPage && maxItems
+          ? sortedContent.slice(0, maxItems)
+          : paginatedContent;
+
+      const pages = Array.from({ length: totalPages }, (_, i) => ({
+        pageNumber: i + 1,
+        url: `/${collectionName}/${i === 0 ? "" : `page/${i + 1}/`}`,
+      }));
+
+      return {
+        collectionName,
+        content: limitedContent,
+        count: sortedContent.length,
+        displayCount: limitedContent.length,
+        totalPages,
+        currentPage: Math.min(Math.max(page, 1), totalPages),
+        pages,
+      };
+    } catch {
+      return {
+        collectionName,
+        content: [],
+        count: 0,
+        displayCount: 0,
+        totalPages: 1,
+        currentPage: 1,
+        pages: [{ url: `/${collectionName}/`, pageNumber: 1 }],
+      };
+    }
+  }),
+);
+
+const collectionsWithContent = allCollectionsData.filter((c) => c.count > 0);
+---
+
+{collectionsWithContent.length > 0 ? (
+  collectionsWithContent.map((collection) => (
+    <SectionComp
+      title={collection.collectionName}
+      lead={
+        perPage
+          ? `${collection.count} 件 (ページ ${collection.currentPage}/${collection.totalPages})`
+          : maxItems && collection.count > maxItems
+            ? `${collection.displayCount} 件 (全 ${collection.count} 件)`
+            : `${collection.count} 件`
+      }
+      class="stack"
+    >
+      <div class="grid grid-3 grid-md-1">
+        {collection.content.map((item) => (
+          <article class="mz-card stack">
+            <h3 class="content-title">
+              <a href={`/${collection.collectionName}/${item.slug}/`}>
+                {(item.data.title as string) || (item.data.displayName as string) || "タイトルなし"}
+              </a>
+            </h3>
+
+            {(item.data.date || item.data.pubDate) && (
+              <time
+                datetime={(item.data.date as Date || item.data.pubDate as Date).toISOString()}
+                style="font-size:var(--text-sm);opacity:.8"
+              >
+                {(item.data.date as Date || item.data.pubDate as Date).toLocaleDateString("ja-JP", {
+                  year: "numeric",
+                  month: "long",
+                  day: "numeric",
+                })}
+              </time>
+            )}
+
+            {item.data.tags && (item.data.tags as string[]).length > 0 && (
+              <div class="cluster">
+                {(item.data.tags as string[]).map((tag) => (
+                  <span class="mz-tag">{tag}</span>
+                ))}
+              </div>
+            )}
+          </article>
+        ))}
+      </div>
+
+      {perPage ? (
+        collection.totalPages > 1 && (
+          <Pagination pages={collection.pages} currentPage={collection.currentPage} />
+        )
+      ) : (
+        maxItems && collection.count > maxItems && showMoreLink && (
+          <p class="more-link">
+            <a href={`/${collection.collectionName}/`} class="link-reset">もっと見る →</a>
+          </p>
+        )
+      )}
+    </SectionComp>
+  ))
+) : (
+  <SectionComp>
+    <p style="opacity:.8;font-style:italic">まだコンテンツがありません。</p>
+  </SectionComp>
+)}
+
+<style>
+  .link-reset {
+    color: inherit;
+    text-decoration: none;
+  }
+  .link-reset:hover {
+    color: var(--color-primary);
+  }
+  section.stack + section.stack {
+    border-top: 1px solid var(--color-border);
+    padding-top: var(--space-6);
+  }
+</style>

package/CollectionTemplate.astro

@@ -0,0 +1,144 @@
+---
+import type { MezzFolderCollection } from "@mezzanine-stack/content-schema";
+import FieldRenderer from "./FieldRenderer.astro";
+
+export interface Props {
+  /** CollectionEntry from astro:content */
+  content: {
+    data: Record<string, unknown>;
+    slug: string;
+  };
+  /**
+   * Schema definition for the collection.
+   * When provided, fields are rendered in declaration order.
+   * When omitted, falls back to Object.keys(content.data).
+   */
+  collection?: MezzFolderCollection;
+  /**
+   * Collection name used to generate the back link (e.g. "blog").
+   * When omitted, no back link is rendered.
+   */
+  collectionName?: string;
+}
+
+const { content, collection, collectionName } = Astro.props;
+const data = content.data;
+
+// Fields that are not rendered via FieldRenderer (handled by the slot / layout)
+const SKIP_FIELDS = new Set(["draft"]);
+
+const displayFields = collection
+  ? collection.fields.filter((f) => !SKIP_FIELDS.has(f.name))
+  : Object.keys(data)
+      .filter((k) => !SKIP_FIELDS.has(k))
+      .map((k) => ({ name: k, label: k, type: "text" as const }));
+---
+
+<div class="collection-template" data-collection={collectionName}>
+  {displayFields.map((field) => {
+    const val = data[field.name];
+    if (val === null || val === undefined) return null;
+    return <FieldRenderer field={field as any} value={val} />;
+  })}
+
+  <div class="content-body">
+    <slot />
+  </div>
+
+  {collectionName && (
+    <p class="back-link">
+      <a href={`/${collectionName}/`}>← {collectionName} 一覧へ</a>
+    </p>
+  )}
+</div>
+
+<style>
+  .collection-template {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 2rem;
+  }
+
+  .content-body {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+  }
+
+  .content-body :global(h1) {
+    font-size: var(--text-xl, 1.75rem);
+    font-weight: 700;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    line-height: 1.3;
+  }
+
+  .content-body :global(h2) {
+    font-size: var(--text-lg, 1.375rem);
+    font-weight: 600;
+    margin-top: 1.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .content-body :global(h3) {
+    font-size: var(--text-md, 1.125rem);
+    font-weight: 600;
+    margin-top: 1.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .content-body :global(p) {
+    margin-bottom: 1rem;
+    line-height: var(--leading, 1.7);
+  }
+
+  .content-body :global(ul, ol) {
+    margin: 1rem 0;
+    padding-left: 1.5rem;
+  }
+
+  .content-body :global(li) {
+    margin-bottom: 0.5rem;
+  }
+
+  .content-body :global(blockquote) {
+    border-left: 4px solid var(--color-primary, #6366f1);
+    margin: 1.5rem 0;
+    padding: 1rem 1.5rem;
+    font-style: italic;
+  }
+
+  .content-body :global(code) {
+    font-family: var(--code-font, monospace);
+    font-size: 0.9em;
+    padding: 0.2em 0.4em;
+  }
+
+  .content-body :global(pre) {
+    padding: 1rem;
+    margin: 1.5rem 0;
+    overflow-x: auto;
+    border-radius: var(--radius-md, 0.5rem);
+  }
+
+  .content-body :global(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-md, 0.5rem);
+    margin: 1.5rem 0;
+  }
+
+  .back-link {
+    margin-top: 2rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--color-border, #e5e7eb);
+  }
+
+  .back-link a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .back-link a:hover {
+    color: var(--color-primary, #6366f1);
+  }
+</style>

package/DocumentBody.astro

@@ -0,0 +1,59 @@
+---
+import type { BodyNode } from "@mezzanine-stack/content-document";
+import DocumentInline from "./DocumentInline.astro";
+
+export interface Props {
+  nodes: BodyNode[];
+}
+
+const { nodes } = Astro.props;
+---
+
+<div class="mz-field-body">
+  {
+    nodes.map((node) => (
+      <>
+        {node.type === "heading" ? (
+          node.level === 1 ? (
+            <h1>{node.text}</h1>
+          ) : node.level === 2 ? (
+            <h2>{node.text}</h2>
+          ) : node.level === 3 ? (
+            <h3>{node.text}</h3>
+          ) : (
+            <h4>{node.text}</h4>
+          )
+        ) : null}
+        {node.type === "paragraph" ? (
+          <p>{node.children.map((c) => <DocumentInline node={c} />)}</p>
+        ) : null}
+        {node.type === "image" ? (
+          <img src={node.src} alt={node.alt ?? ""} loading="lazy" />
+        ) : null}
+        {node.type === "quote" ? (
+          <blockquote>{node.children.map((c) => <DocumentInline node={c} />)}</blockquote>
+        ) : null}
+        {node.type === "code" ? (
+          <pre>
+            <code>{node.code}</code>
+          </pre>
+        ) : null}
+        {node.type === "list" ? (
+          node.ordered ? (
+            <ol>
+              {node.items.map((item) => (
+                <li>{item.map((c) => <DocumentInline node={c} />)}</li>
+              ))}
+            </ol>
+          ) : (
+            <ul>
+              {node.items.map((item) => (
+                <li>{item.map((c) => <DocumentInline node={c} />)}</li>
+              ))}
+            </ul>
+          )
+        ) : null}
+      </>
+    ))
+  }
+</div>

package/DocumentInline.astro

@@ -0,0 +1,32 @@
+---
+import type { InlineNode } from "@mezzanine-stack/content-document";
+import DocumentInline from "./DocumentInline.astro";
+
+export interface Props {
+  node: InlineNode;
+}
+
+const { node } = Astro.props;
+---
+
+{
+  node.type === "text" ? (
+    <>
+      {node.text.split("\n").map((part, i, arr) => (
+        <>
+          {part}
+          {i < arr.length - 1 ? <br /> : null}
+        </>
+      ))}
+    </>
+  ) : null
+}
+{node.type === "strong" ? (
+  <strong>{node.children.map((c) => <DocumentInline node={c} />)}</strong>
+) : null}
+{node.type === "em" ? <em>{node.children.map((c) => <DocumentInline node={c} />)}</em> : null}
+{node.type === "link" ? (
+  <a href={node.href} target="_blank" rel="noopener noreferrer">
+    {node.children.map((c) => <DocumentInline node={c} />)}
+  </a>
+) : null}

package/FieldRenderer.astro

@@ -0,0 +1,136 @@
+---
+import type { MezzField, MezzListField, MezzSelectField } from "@mezzanine-stack/content-schema";
+
+export interface Props {
+  field: MezzField;
+  value: unknown;
+}
+
+const { field, value } = Astro.props;
+
+// Empty value — render nothing
+if (
+  value === null ||
+  value === undefined ||
+  (Array.isArray(value) && value.length === 0) ||
+  (typeof value === "string" && value.trim() === "")
+) {
+  return;
+}
+
+// Helpers derived in frontmatter to avoid JSX parsing issues with generics
+const isTitleField = field.name === "title" || field.name === "name";
+const isDescField = field.name === "description" || field.name === "bio";
+const isBodyField = field.name === "body" || field.name === "content";
+
+const isMultiSelect =
+  field.type === "select" && (field as MezzSelectField).multiple === true;
+
+const isObjectList =
+  field.type === "list" &&
+  !!((field as MezzListField).fields) &&
+  ((field as MezzListField).fields?.length ?? 0) > 0;
+
+const dateValue = field.type === "date" ? (value as Date) : undefined;
+const selectValues = isMultiSelect ? (value as string[]) : undefined;
+const stringListValues =
+  field.type === "list" && !isObjectList ? (value as string[]) : undefined;
+const objectListValues = isObjectList
+  ? (value as Record<string, unknown>[])
+  : undefined;
+const objectValues =
+  field.type === "object" ? (value as Record<string, unknown>) : undefined;
+---
+
+{field.type === "text" ? (
+  isTitleField ? (
+    <h1 class="mz-field-title">{value as string}</h1>
+  ) : isDescField ? (
+    <p class="mz-field-description">{value as string}</p>
+  ) : isBodyField ? (
+    <div class="mz-field-body">{value as string}</div>
+  ) : (
+    <div class="mz-field-text">
+      <span class="mz-field-label">{field.label}:</span>
+      <span class="mz-field-value">{value as string}</span>
+    </div>
+  )
+) : field.type === "rich-text" ? (
+  <div class="mz-field-richtext prose" set:html={value as string} />
+) : field.type === "date" && dateValue ? (
+  <time datetime={dateValue.toISOString()} class="mz-field-date">
+    {dateValue.toLocaleDateString("ja-JP", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    })}
+  </time>
+) : field.type === "boolean" ? (
+  (value as boolean) && (
+    <span class="mz-field-boolean mz-tag">{field.label}</span>
+  )
+) : field.type === "image" ? (
+  <img
+    src={value as string}
+    alt={field.label}
+    class="mz-field-image"
+    loading="lazy"
+  />
+) : field.type === "file" ? (
+  <a
+    href={value as string}
+    class="mz-field-file"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    {field.label}
+  </a>
+) : field.type === "select" && isMultiSelect && selectValues ? (
+  <div class="mz-field-tags cluster">
+    {selectValues.map((tag) => (
+      <span class="mz-tag">{tag}</span>
+    ))}
+  </div>
+) : field.type === "select" && !isMultiSelect ? (
+  <div class="mz-field-select">
+    <span class="mz-field-label">{field.label}:</span>
+    <span class="mz-field-value">{value as string}</span>
+  </div>
+) : field.type === "list" && isObjectList && objectListValues ? (
+  <ul class="mz-field-list-objects stack">
+    {objectListValues.map((item) => (
+      <li class="mz-field-list-item">
+        {Object.entries(item).map(([k, v]) => (
+          v != null && String(v).trim() !== "" && (
+            <div class="mz-field-kv">
+              <span class="mz-field-label">{k}:</span>
+              <span class="mz-field-value">{String(v)}</span>
+            </div>
+          )
+        ))}
+      </li>
+    ))}
+  </ul>
+) : field.type === "list" && !isObjectList && stringListValues ? (
+  <ul class="mz-field-list cluster">
+    {stringListValues.map((item) => (
+      <li class="mz-tag">{item}</li>
+    ))}
+  </ul>
+) : field.type === "object" && objectValues ? (
+  <div class="mz-field-object">
+    {Object.entries(objectValues).map(([k, v]) => (
+      v != null && String(v).trim() !== "" && (
+        <div class="mz-field-kv">
+          <span class="mz-field-label">{k}:</span>
+          <span class="mz-field-value">{String(v)}</span>
+        </div>
+      )
+    ))}
+  </div>
+) : field.type === "relation" ? (
+  <div class="mz-field-relation">
+    <span class="mz-field-label">{field.label}:</span>
+    <span class="mz-field-value">{value as string}</span>
+  </div>
+) : null}

package/Hero.astro

@@ -0,0 +1,54 @@
+---
+interface Props {
+  siteTitle: string;
+  showTitle?: boolean;
+  description?: string;
+  backgroundImage?: string;
+  backgroundSize?: 'center' | 'full';
+}
+const {
+  siteTitle,
+  showTitle = true,
+  description,
+  backgroundImage,
+  backgroundSize = 'full',
+}: Props = Astro.props;
+
+const style =
+  backgroundImage
+    ? `background-image:url(${backgroundImage});background-position:center;background-repeat:no-repeat;background-size:${backgroundSize === 'full' ? '100% 100%' : 'auto'};`
+    : '';
+---
+<section class="hero" style={style}>
+  {showTitle && <h1>{siteTitle}</h1>}
+  {description && <p>{description}</p>}
+</section>
+<style>
+.hero {
+  width: 100%;
+  min-height: 60vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  padding: 2rem 1rem;
+  color: #fff;
+}
+.hero h1 {
+  margin: 0;
+  font-size: 2rem;
+}
+.hero p {
+  margin-top: 1rem;
+}
+@media (min-width: 768px) {
+  .hero {
+    min-height: 70vh;
+    padding: 4rem;
+  }
+  .hero h1 {
+    font-size: 3rem;
+  }
+}
+</style>

package/InfiniteCollectionList.astro

@@ -0,0 +1,122 @@
+---
+import SectionComp from "@mezzanine-stack/ui/Section.astro";
+import { getCollection, type CollectionEntry } from "astro:content";
+
+export interface Props {
+  /** Collection name to list */
+  name: string;
+  /**
+   * Front-matter field name used for date sorting.
+   * Example: 'pubDate' for blog, 'date' for works/gallery.
+   */
+  dateField?: string;
+  /** Number of items to load per batch */
+  batchSize?: number;
+  /** Sort direction */
+  sortOrder?: "asc" | "desc";
+}
+
+const {
+  name,
+  dateField = "date",
+  batchSize = 10,
+  sortOrder = "desc",
+} = Astro.props;
+
+const content = await getCollection(name as any, (item: CollectionEntry<any>) => !item.data.draft);
+
+const sortedContent = content.sort((a: CollectionEntry<any>, b: CollectionEntry<any>) => {
+  const dateA = new Date((a.data[dateField] as Date | string | undefined) ?? 0);
+  const dateB = new Date((b.data[dateField] as Date | string | undefined) ?? 0);
+  return sortOrder === "desc"
+    ? dateB.getTime() - dateA.getTime()
+    : dateA.getTime() - dateB.getTime();
+});
+
+type ClientItem = {
+  slug: string;
+  title: string;
+  date: string | null;
+  tags: string[];
+};
+
+const items: ClientItem[] = sortedContent.map(
+  (item: CollectionEntry<any>): ClientItem => ({
+    slug: item.slug,
+    title: (item.data.title as string) || (item.data.displayName as string) || "タイトルなし",
+    date: item.data[dateField]
+      ? (item.data[dateField] as Date).toISOString()
+      : null,
+    tags: (item.data.tags as string[]) || [],
+  }),
+);
+
+const initialItems = items.slice(0, batchSize);
+---
+
+<SectionComp title={name} lead={`${items.length} 件`} class="stack">
+  <div id={`list-${name}`} class="grid grid-3 grid-md-1">
+    {initialItems.map((item) => (
+      <article class="mz-card stack" style={`view-transition-name: card-${item.slug}`}>
+        <h3 class="content-title">
+          <a href={`/${name}/${item.slug}/`}>{item.title}</a>
+        </h3>
+        {item.date && (
+          <time datetime={item.date} style="font-size:var(--text-sm);opacity:.8">
+            {new Date(item.date).toLocaleDateString("ja-JP", {
+              year: "numeric",
+              month: "long",
+              day: "numeric",
+            })}
+          </time>
+        )}
+        {item.tags.length > 0 && (
+          <div class="cluster">
+            {item.tags.map((tag: string) => (
+              <span class="mz-tag">{tag}</span>
+            ))}
+          </div>
+        )}
+      </article>
+    ))}
+  </div>
+  <div id={`sentinel-${name}`}></div>
+  <script
+    type="module"
+    define:vars={{
+      collectionName: name,
+      allItems: items,
+      batchSize,
+      initialIndex: initialItems.length,
+    }}
+  >
+    const listEl = document.getElementById(`list-${collectionName}`);
+    const sentinel = document.getElementById(`sentinel-${collectionName}`);
+    let index = initialIndex;
+
+    function render(item) {
+      const article = document.createElement("article");
+      article.className = "mz-card stack";
+      article.style.viewTransitionName = `card-${item.slug}`;
+      article.innerHTML = `
+        <h3 class="content-title"><a href="/${collectionName}/${item.slug}/">${item.title}</a></h3>
+        ${item.date ? `<time datetime="${item.date}" style="font-size:var(--text-sm);opacity:.8">${new Date(item.date).toLocaleDateString("ja-JP", { year: "numeric", month: "long", day: "numeric" })}</time>` : ""}
+        ${item.tags.length ? `<div class="cluster">${item.tags.map((t) => `<span class='mz-tag'>${t}</span>`).join("")}</div>` : ""}
+      `;
+      listEl.appendChild(article);
+    }
+
+    function loadMore() {
+      const nextItems = allItems.slice(index, index + batchSize);
+      nextItems.forEach(render);
+      index += nextItems.length;
+      if (index >= allItems.length) observer.disconnect();
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+      if (entries[0].isIntersecting) loadMore();
+    });
+
+    observer.observe(sentinel);
+  </script>
+</SectionComp>

package/MarkdownDocumentPage.astro

@@ -0,0 +1,17 @@
+---
+import type { MarkdownPageDocument } from "@mezzanine-stack/content-document";
+import DocumentBody from "./DocumentBody.astro";
+
+export interface Props {
+  doc: MarkdownPageDocument;
+}
+
+const { doc } = Astro.props;
+---
+
+<article>
+  <h1 class="mz-field-title">{doc.title}</h1>
+  {doc.description ? <p class="mz-field-description">{doc.description}</p> : null}
+  <DocumentBody nodes={doc.body} />
+</article>
+

package/README.md

@@ -0,0 +1,137 @@
+# @mezzanine-stack/astro-renderer
+
+Mezzanine Platform の Astro 描画層 headless component 群。
+`@mezzanine-stack/content-schema` の `MezzFolderCollection` / `MezzField` を props として受け取り、コンテンツを描画する。
+
+## 設計方針
+
+- **props 駆動**: app 固有ファイル (`config-generated.js`, `template-utils.js` など) への相対 import を持たない。
+- **schema 正本**: フィールド定義は `@mezzanine-stack/content-schema` の DSL 型 (`MezzField`) が正本。カスタム fieldType 文字列は使わない。
+- **headless**: 標準的な HTML 要素と CSS クラスを出力するが、スタイルの責務はホスト app の CSS に委ねる。
+
+## 公開 API
+
+| コンポーネント | 用途 |
+|---|---|
+| `CollectionList.astro` | folder collection の一覧をページネーション付きで表示 |
+| `InfiniteCollectionList.astro` | IntersectionObserver による無限スクロール一覧 |
+| `CollectionTemplate.astro` | コレクションエントリの詳細表示（フィールド順序制御 + slot） |
+| `FieldRenderer.astro` | `MezzField` 型ごとの描画分岐 |
+| `WorkCard.astro` | `works` コレクション専用カード |
+| `Hero.astro` | サイトトップ用 hero セクション |
+
+## CollectionList.astro
+
+```astro
+---
+import CollectionList from "@mezzanine-stack/astro-renderer/CollectionList.astro";
+---
+
+<!-- 単一コレクション -->
+<CollectionList
+  name="blog"
+  dateFieldMap={{ blog: "pubDate" }}
+  maxItems={5}
+/>
+
+<!-- 複数コレクションを一括表示 -->
+<CollectionList
+  collectionNames={["works", "blog", "gallery"]}
+  dateFieldMap={{ works: "date", blog: "pubDate", gallery: "date" }}
+  maxItems={3}
+/>
+```
+
+### Props
+
+| Prop | 型 | デフォルト | 説明 |
+|---|---|---|---|
+| `name` | `string` | — | 単一コレクション名。`collectionNames` と排他 |
+| `collectionNames` | `string[]` | `[]` | 複数コレクション名。`name` が優先される |
+| `dateFieldMap` | `Record<string, string>` | `{}` | コレクション名 → 日付フィールド名のマップ |
+| `maxItems` | `number` | — | コレクションあたりの最大表示件数 |
+| `sortOrder` | `'asc' \| 'desc'` | `'desc'` | 日付ソート順 |
+| `page` | `number` | `1` | ページ番号 (1 始まり) |
+| `perPage` | `number` | — | 1 ページあたりの件数（設定するとページネーション有効） |
+| `showMoreLink` | `boolean` | `true` | maxItems 超過時の「もっと見る」リンク表示 |
+
+## InfiniteCollectionList.astro
+
+```astro
+<InfiniteCollectionList name="blog" dateField="pubDate" batchSize={10} />
+```
+
+### Props
+
+| Prop | 型 | デフォルト | 説明 |
+|---|---|---|---|
+| `name` | `string` | — | コレクション名 (必須) |
+| `dateField` | `string` | `'date'` | 日付フィールド名 |
+| `batchSize` | `number` | `10` | 一度に追加読み込みする件数 |
+| `sortOrder` | `'asc' \| 'desc'` | `'desc'` | 日付ソート順 |
+
+## CollectionTemplate.astro
+
+```astro
+---
+import { getCollection } from "astro:content";
+import { blogCollection } from "@mezzanine-stack/content-schema";
+import CollectionTemplate from "@mezzanine-stack/astro-renderer/CollectionTemplate.astro";
+
+const entry = ...; // getCollection から取得した entry
+const { Content } = await entry.render();
+---
+
+<CollectionTemplate content={entry} collection={blogCollection} collectionName="blog">
+  <Content />
+</CollectionTemplate>
+```
+
+### Props
+
+| Prop | 型 | デフォルト | 説明 |
+|---|---|---|---|
+| `content` | `CollectionEntry` | — | Astro content collection entry (必須) |
+| `collection` | `MezzFolderCollection` | — | スキーマ定義。フィールド表示順序に使用 |
+| `collectionName` | `string` | — | 一覧ページへの戻りリンクに使用 |
+
+## FieldRenderer.astro
+
+```astro
+---
+import type { MezzField } from "@mezzanine-stack/content-schema";
+import FieldRenderer from "@mezzanine-stack/astro-renderer/FieldRenderer.astro";
+
+const field: MezzField = { type: "date", name: "pubDate", label: "公開日" };
+const value = new Date("2026-01-01");
+---
+
+<FieldRenderer field={field} value={value} />
+```
+
+### Props
+
+| Prop | 型 | 説明 |
+|---|---|---|
+| `field` | `MezzField` | `@mezzanine-stack/content-schema` の DSL フィールド定義 |
+| `value` | `unknown` | フィールドの値 |
+
+## WorkCard.astro
+
+```astro
+---
+import { getCollection } from "astro:content";
+import WorkCard from "@mezzanine-stack/astro-renderer/WorkCard.astro";
+
+const works = await getCollection("works");
+---
+
+{works.map((work) => <WorkCard work={work} />)}
+```
+
+`works` コレクションのフィールド名: `title`, `date`, `thumbnail`, `tags`
+
+## 注意事項
+
+- このパッケージは `apps/site-starter-astro` 側の collection metadata glue (`src/lib/content/collection-derived.ts`) と組み合わせて使う前提で設計されている。
+- `@mezzanine-stack/ui/Section.astro` と `@mezzanine-stack/ui/Pagination.astro` を内部で使用しているため、ホスト app に `@mezzanine-stack/ui` が必要。

package/WorkCard.astro

@@ -0,0 +1,47 @@
+---
+import type { CollectionEntry } from "astro:content";
+
+export interface Props {
+  work: CollectionEntry<"works">;
+  /** 一覧カードのリンク先プレフィックス（末尾 `/`）。既定は `/works/` */
+  collectionBase?: string;
+}
+
+const { work, collectionBase = "/works/" } = Astro.props;
+const data = work.data;
+const base = collectionBase.endsWith("/") ? collectionBase : `${collectionBase}/`;
+---
+
+<a class="mz-card" href={`${base}${work.slug}/`}>
+  {data.thumbnail && (
+    <img
+      src={data.thumbnail as string}
+      alt={data.title as string}
+      loading="lazy"
+      class="work-thumbnail"
+    />
+  )}
+  <h3 style="margin:8px 0 4px">{data.title as string}</h3>
+  {data.date && (
+    <time datetime={(data.date as Date).toISOString()}>
+      {(data.date as Date).toLocaleDateString("ja-JP")}
+    </time>
+  )}
+  {data.tags && (data.tags as string[]).length > 0 && (
+    <div class="cluster" style="margin-top:8px">
+      {(data.tags as string[]).map((t) => (
+        <span class="mz-tag">{t}</span>
+      ))}
+    </div>
+  )}
+</a>
+
+<style>
+  .work-thumbnail {
+    width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+    border-radius: var(--radius-md, 0.5rem);
+    margin-bottom: 0.5rem;
+  }
+</style>

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@mezzanine-stack/astro-renderer",
+  "version": "0.1.0",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "license": "MIT",
+  "files": [
+    "*.astro"
+  ],
+  "exports": {
+    "./CollectionList.astro": "./CollectionList.astro",
+    "./CollectionTemplate.astro": "./CollectionTemplate.astro",
+    "./FieldRenderer.astro": "./FieldRenderer.astro",
+    "./Hero.astro": "./Hero.astro",
+    "./InfiniteCollectionList.astro": "./InfiniteCollectionList.astro",
+    "./WorkCard.astro": "./WorkCard.astro",
+    "./DocumentBody.astro": "./DocumentBody.astro",
+    "./BlogDocumentPage.astro": "./BlogDocumentPage.astro",
+    "./MarkdownDocumentPage.astro": "./MarkdownDocumentPage.astro"
+  },
+  "peerDependencies": {
+    "astro": ">=4.0.0"
+  },
+  "dependencies": {
+    "@mezzanine-stack/content-schema": "0.1.0",
+    "@mezzanine-stack/content-document": "0.1.0"
+  },
+  "devDependencies": {
+    "@mezzanine-stack/ui": "0.1.0",
+    "@mezzanine-stack/css": "0.1.0"
+  }
+}