How HyperBricks works

# Text: value is required and emitted unchanged, without HTML escaping.
# Use trusted configuration content; bind visitor input through a Go HTML template.
example_text:
  - type: text
  - value: Your next adventure starts here. # Required text.
  - enclose: <p>|</p> # Optional wrapper.

home:
  - type: hypermedia
  - route: index
  - title: Hello HyperBricks
  - content:
      - inherit: example_text

<!DOCTYPE html>
<html>
  <head>
    <meta name="generator" content="HyperBricks">
    <title>
      Hello HyperBricks
    </title>
  </head>
  <body>
    <p>
      Your next adventure starts here.
    </p>
  </body>
</html>

# Template: choose inline or template.file for meaningful output.
# No individual source field is schema-required; the selected file must exist.
# Scalar data and renderable children both mount under values.
example_template:
  - type: template
  - inline: |
      <article>
        <h2>
          {{.title}}
        </h2>
        {{.body}}
      </article>
  - querykeys: [] # Optional; this template exposes no request query parameters.
  - values: # Optional; supply only keys that the template actually uses.
      title: Latest updates
      body:
        - type: markdown
        - content: |
            Our spring collection is here. Discover new ideas for your next project.

home:
  - type: hypermedia
  - route: index
  - title: Hello HyperBricks
  - htmltag: '<html lang="en">'
  - head:
      - type: head
      - charset:
          - type: html
          - value: '<meta charset="utf-8">'
      - meta:
          viewport: width=device-width, initial-scale=1
  - content:
      - inherit: example_template
      - enclose: '<main>|</main>'

intro_fragment:
  - type: fragment
  - route: fragments/intro
  - content:
      - inherit: example_template

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="generator" content="HyperBricks">
    <title>
      Hello HyperBricks
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <main>
      <article>
        <h2>
          Latest updates
        </h2>
        <p>
          Our spring collection is here. Discover new ideas for your next project.
        </p>
      </article>
    </main>
  </body>
</html>

# Fragment: no additional schema-required fields; children provide its output.
# A routed fragment returns replaceable HTML without a document wrapper.
example_fragment:
  - type: fragment
  - route: examples/status.html # Adapted route for the landing demo.
  - static: examples/status.html # The static demo uses the same URL.
  - nocache: true # Optional; bypass rendered-output caching for fresh status.
  - response: # Optional browser response settings.
      headers:
        Cache-Control: no-store
  - content:
      - type: html
      - value: |
          <p id="status" data-fragment-example="ready">
            Your booking request has been received.
          </p>

<p id="status" data-fragment-example="ready">
  Your booking request has been received.
</p>

# API fragment render: required endpoint and method.
# route is conditional for exposing an independently requested browser URL.
# Always calls the upstream API; unlike nested api_render it owns a route.
release_feed:
  - type: api_fragment_render
  - route: fragments/releases # Adapted demo route.
  - endpoint: {env: EXAMPLE_API_URL} # Required; configure your item-list API.
  - method: GET # Required upstream HTTP method.
  - headers: # Optional upstream headers, not browser response headers.
      Accept: application/json
  - querykeys: [] # Optional; forward no browser query values to this API.
  # The documented item-list template adds explicit status and empty feedback.
  - inline: |
      <section aria-label="Item list">
      {{if eq .Status 200}}
        <ul>
        {{range .Data.items}}
          <li>{{.title}}</li>
        {{else}}<li>No items available.</li>{{end}}
        </ul>
      {{else}}
        <p role="status">The item list is temporarily unavailable.</p>
      {{end}}
      </section>
  - response:
      headers:
        Cache-Control: no-store

<section aria-label="Item list">
  <ul>
    <li>
      Coastal walking guide
    </li>
  </ul>
</section>

example_styles:
  - type: esbuild
  - entry: # Required CSS source reference.
      path: {base: resources, path: css/example.css}
  - outfile: # Required generated CSS output reference.
      path: {base: static, path: css/example.css}
  - cache: true
  - minify: true
  - fingerprint: true
  - enclose: <link rel="stylesheet" href="|">

# Mount the documented CSS component in a page head so it runs.
assets_page:
  - type: hypermedia
  - route: assets
  - title: CSS bundle
  - htmltag: '<html lang="en">'
  - head:
      - type: head
      - charset:
          - type: html
          - value: '<meta charset="utf-8">'
      - meta:
          viewport: width=device-width, initial-scale=1
      - styles:
          - inherit: example_styles
  - content:
      - type: html
      - value: '<main><h1>CSS bundle example</h1></main>'

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/static/css/example.p2y2ttuy.css">
    <meta name="generator" content="HyperBricks">
    <title>
      CSS bundle
    </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <main>
      <h1>
        CSS bundle example
      </h1>
    </main>
  </body>
</html>

imports:
  - spaces/site_source/index.hyperbricks.yaml

site_source:
  - type: hypermedia
  - head:
      - type: head
      - metadata:
          - type: html
          - value: '<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">'
  - content:
      - type: template
      - inline: '<main><h1>{{.heading}}</h1></main>'
      - values:
          heading: Latest updates
      - editable:
          heading: {type: text, label: Heading, required: true, max: 120}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="generator" content="HyperBricks">
    <title>
      English edition
    </title>
  </head>
  <body>
    <main>
      <h1>
        Coastal journal
      </h1>
    </main>
  </body>
</html>