fragment-rendererv0.2.0

← All examples

OG card

An HTML document sized 1200 by 630 px. Turning it into a PNG is a separate step.

OG card

examples/og-preview-demo/templates/OGCard.astro
const runtime = createAstroRuntime({ baseContext: { channel: 'og' } });
const html = await runtime.renderComponent(OGCard, {
  title: 'Wie man Astro-Komponenten überall rendert',
  author: 'Jane Doe',
  bgColor: '#0f172a',
  accentColor: '#10b981',
});
<html data-astro-cid-vyyzaxq2>
  <head>
  </head>
  <body data-astro-cid-vyyzaxq2>
    <div class="container" data-astro-cid-vyyzaxq2>
      <div class="accent-bar" data-astro-cid-vyyzaxq2>
      </div>
      <div class="content" data-astro-cid-vyyzaxq2>
        <h1 class="title" data-astro-cid-vyyzaxq2>Wie man Astro-Komponenten überall rendert
        </h1>
        <p class="description" data-astro-cid-vyyzaxq2>Ein Einblick in den @casoon/fragment-renderer.
        </p>
      </div>
      <div class="footer" data-astro-cid-vyyzaxq2>
        <div class="author-info" data-astro-cid-vyyzaxq2>
          <div class="author-avatar" data-astro-cid-vyyzaxq2>J
          </div>
          <div class="author-details" data-astro-cid-vyyzaxq2>
            <span class="author-name" data-astro-cid-vyyzaxq2>Jane Doe
            </span>
            <span class="date" data-astro-cid-vyyzaxq2>01. Juni 2026
            </span>
          </div>
        </div>
        <div class="logo" data-astro-cid-vyyzaxq2>MyBlog
        </div>
      </div>
    </div>
  </body>
</html>
  • og
  • channel