Skip to content
maplibre-yaml

ContentBlockSchema

const ContentBlockSchema: ZodObject<{ className: ZodOptional<ZodString>; content: ZodArray<ZodRecord<ZodEnum<["h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "div", "a", "strong", "em", "code", "pre", "img", "iframe", "ul", "ol", "li", "blockquote", "hr", "br"]>, ZodArray<ZodObject<{ alt: ZodOptional<ZodString>; classList: ZodOptional<ZodUnion<[ZodString, ZodArray<…, …>]>>; else: ZodOptional<ZodString>; height: ZodOptional<ZodUnion<[ZodString, ZodNumber]>>; href: ZodOptional<ZodString>; id: ZodOptional<ZodString>; property: ZodOptional<ZodString>; src: ZodOptional<ZodString>; str: ZodOptional<ZodString>; style: ZodOptional<ZodString>; target: ZodOptional<ZodString>; width: ZodOptional<ZodUnion<[ZodString, ZodNumber]>>; }, "passthrough", ZodTypeAny, objectOutputType<{ alt: ZodOptional<ZodString>; classList: ZodOptional<ZodUnion<[…, …]>>; else: ZodOptional<ZodString>; height: ZodOptional<ZodUnion<[…, …]>>; href: ZodOptional<ZodString>; id: ZodOptional<ZodString>; property: ZodOptional<ZodString>; src: ZodOptional<ZodString>; str: ZodOptional<ZodString>; style: ZodOptional<ZodString>; target: ZodOptional<ZodString>; width: ZodOptional<ZodUnion<[…, …]>>; }, ZodTypeAny, "passthrough">, objectInputType<{ alt: ZodOptional<ZodString>; classList: ZodOptional<ZodUnion<[…, …]>>; else: ZodOptional<ZodString>; height: ZodOptional<ZodUnion<[…, …]>>; href: ZodOptional<ZodString>; id: ZodOptional<ZodString>; property: ZodOptional<ZodString>; src: ZodOptional<ZodString>; str: ZodOptional<ZodString>; style: ZodOptional<ZodString>; target: ZodOptional<ZodString>; width: ZodOptional<ZodUnion<[…, …]>>; }, ZodTypeAny, "passthrough">>, "many">>, "many">; id: ZodOptional<ZodString>; style: ZodOptional<ZodString>; type: ZodLiteral<"content">; }, "strip", ZodTypeAny, { className?: string; content: Partial<Record<"a" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "strong" | "em" | "pre" | "img" | "iframe" | "ul" | "ol" | "li" | "blockquote" | "hr" | "br", objectOutputType<{ alt: ZodOptional<ZodString>; classList: ZodOptional<ZodUnion<[…, …]>>; else: ZodOptional<ZodString>; height: ZodOptional<ZodUnion<[…, …]>>; href: ZodOptional<ZodString>; id: ZodOptional<ZodString>; property: ZodOptional<ZodString>; src: ZodOptional<ZodString>; str: ZodOptional<ZodString>; style: ZodOptional<ZodString>; target: ZodOptional<ZodString>; width: ZodOptional<ZodUnion<[…, …]>>; }, ZodTypeAny, "passthrough">[]>>[]; id?: string; style?: string; type: "content"; }, { className?: string; content: Partial<Record<"a" | "code" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "strong" | "em" | "pre" | "img" | "iframe" | "ul" | "ol" | "li" | "blockquote" | "hr" | "br", objectInputType<{ alt: ZodOptional<ZodString>; classList: ZodOptional<ZodUnion<[…, …]>>; else: ZodOptional<ZodString>; height: ZodOptional<ZodUnion<[…, …]>>; href: ZodOptional<ZodString>; id: ZodOptional<ZodString>; property: ZodOptional<ZodString>; src: ZodOptional<ZodString>; str: ZodOptional<ZodString>; style: ZodOptional<ZodString>; target: ZodOptional<ZodString>; width: ZodOptional<ZodUnion<[…, …]>>; }, ZodTypeAny, "passthrough">[]>>[]; id?: string; style?: string; type: "content"; }>

Defined in: packages/core/src/schemas/content.schema.ts:291

Content block for rich text and media.

Remarks

Section titled “Remarks”

Content blocks allow you to add non-map content to your pages. They render as HTML with support for dynamic property interpolation.

Use Cases:

  • Introductory text
  • Explanatory sections
  • Embedded images and videos
  • Interactive elements
  • Mixed content layouts

Properties are resolved from:

  1. Page-level context (passed to renderer)
  2. Global configuration
  3. URL query parameters (if configured)

Examples

Section titled “Examples”

Basic Text Content

type: content
id: intro
content:
  - h1:
      - str: "Welcome"
  - p:
      - str: "This is a simple text block."

Dynamic Content

type: content
id: user-info
className: user-section
content:
  - h2:
      - str: "User Profile"
  - p:
      - str: "Name: "
      - property: "userName"
        else: "Unknown"
  - p:
      - str: "Location: "
      - property: "userCity"
        else: "Not specified"

Rich Content with Media

type: content
id: article
content:
  - h1:
      - str: "Article Title"
  - img:
      - src: "https://example.com/header.jpg"
        alt: "Header image"
        width: "100%"
  - p:
      - str: "Article text goes here..."
  - blockquote:
      - str: "An inspiring quote."
  - a:
      - str: "Read more"
        href: "https://example.com/full-article"
        target: "_blank"

Styled Content

type: content
id: styled
className: "card shadow"
style: "padding: 20px; background: #f5f5f5;"
content:
  - h3:
      - str: "Card Title"
        classList: "text-primary"
  - p:
      - str: "Card content"

List Content

type: content
id: features
content:
  - h2:
      - str: "Features"
  - ul:
      - li:
          - str: "Fast rendering"
      - li:
          - str: "Easy configuration"
      - li:
          - str: "Fully customizable"

Embedded Content

type: content
id: video
content:
  - h2:
      - str: "Tutorial Video"
  - iframe:
      - src: "https://www.youtube.com/embed/VIDEO_ID"
        width: "560"
        height: "315"