.biagio syntax

The .biagio syntax is the most direct way to write pages: business weights as attributes, HTML templates, inline hydration scripts. No import, no graph boilerplate.

Page anatomy

<page title="Home — My Site"
      description="Welcome to my site."
      sitemapPriority="1.0" />

<component id="hero" seo="1" conversion="0.9" cpu="2">
  <template>
    <section class="hero">
      <h1>Main headline</h1>
      <p>Descriptive subtitle.</p>
    </section>
  </template>
</component>

<component id="cta" conversion="1" interaction="0.85">
  <template>
    <button class="cta" id="buy">Buy now</button>
  </template>
  <script hydrate>
    el.querySelector('#buy').addEventListener('click', () => {
      el.querySelector('#buy').textContent = 'Thanks! ✓';
    });
  </script>
</component>

<style>
  .hero { padding: 80px 24px; text-align: center; }
  .cta { background: #ff4d5a; color: #fff; border: none; padding: 16px 32px; border-radius: 999px; }
</style>

i18n in templates

With site.locales configured, use {{t:key}} in templates:

<h1>{{t:hero.title}}</h1>
<p>{{t:hero.lead}}</p>

Strings live in locales/en.json, locales/it.json, etc.

<page> attributes

<component> attributes

External islands

For React, Preact or larger modules:

<component id="stock" conversion="0.9" interaction="0.6"
           client="/islands/stock.js" props='{"initial": 5}'>
  <template><div data-react-root>Loading…</div></template>
</component>

The module in islands/ exports default function (el, props) { … }.

Visual order vs render order

File order sets CSS layout (domOrder). HTML render order is decided by the scheduler from weights — a CTA with conversion="1" can appear earlier in source even if lower in the file.

CSS

The <style> block is purged and minified at build. Unused classes not in the visible DOM are removed (integrated PurgeCSS).