SSG

Static Site Generation.

html

<div class="ssg ssg--100" role="img" aria-label="docs.example.com, 100 pages generated at build time">
  <p class="ssg__site">docs.example.com</p>
  <div class="ssg__stage">
    <div class="ssg__build" style="background:#E8A020;">Build: generate 100 HTML files<small class="ssg__t ssg__t--10">~1s</small><small class="ssg__t ssg__t--100">~8s</small><small class="ssg__t ssg__t--1000">~70s</small></div>
    <span class="ssg__arrow" aria-hidden="true">&darr;</span>
    <div class="ssg__request">Request: served instantly from a CDN edge &mdash; ~5ms, no server work</div>
  </div>
</div>
<style>
.ssg { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.ssg__site { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }
.ssg__build { padding: 12px; border-radius: 8px; font-size: 11px; font-weight: 700; text-align: center; }
.ssg__t { display: none; font-weight: 400; }
.ssg--10 .ssg__t--10, .ssg--100 .ssg__t--100, .ssg--1000 .ssg__t--1000 { display: block; margin-top: 4px; }
.ssg__arrow { display: block; text-align: center; font-size: 16px; color: #24143060; margin: 8px 0; }
.ssg__request { padding: 12px; border-radius: 8px; background: #24143010; font-size: 11px; text-align: center; }
</style>

tailwind

<div class="ssgtw ssgtw--100 font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border" role="img" aria-label="docs.example.com, 100 pages generated at build time">
  <p class="m-0 mb-3 font-mono text-[11px] text-[#24143099]">docs.example.com</p>
  <div class="p-3 rounded-lg text-[11px] font-bold text-center" style="background:#E8A020;">Build: generate 100 HTML files<small class="ssgtw__t-10 hidden block mt-1 font-normal">~1s</small><small class="ssgtw__t-100 hidden block mt-1 font-normal">~8s</small><small class="ssgtw__t-1000 hidden block mt-1 font-normal">~70s</small></div>
  <span class="block text-center text-base text-[#24143060] my-2" aria-hidden="true">&darr;</span>
  <div class="p-3 rounded-lg bg-[#24143010] text-[11px] text-center">Request: served instantly from a CDN edge &mdash; ~5ms, no server work</div>
</div>
<style>
.ssgtw--10 .ssgtw__t-10, .ssgtw--100 .ssgtw__t-100, .ssgtw--1000 .ssgtw__t-1000 { display: block; }
</style>

react

export function Ssg({
  pageCount = "100",
  accent = "#E8A020",
  showBuildTime = true,
  siteName = "docs.example.com",
}) {
  const times = { "10": "~1s", "100": "~8s", "1000": "~70s" };
  return (
    <div role="img" aria-label={`${siteName}, ${pageCount} pages generated at build time`} style={{ font: "12px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 16, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>{siteName}</p>
      <div style={{ padding: 12, borderRadius: 8, background: accent, fontSize: 11, fontWeight: 700, textAlign: "center" }}>
        Build: generate {pageCount} HTML files
        {showBuildTime && <small style={{ display: "block", marginTop: 4, fontWeight: 400 }}>{times[pageCount]}</small>}
      </div>
      <span aria-hidden="true" style={{ display: "block", textAlign: "center", fontSize: 16, color: "#24143060", margin: "8px 0" }}>&darr;</span>
      <div style={{ padding: 12, borderRadius: 8, background: "#24143010", fontSize: 11, textAlign: "center" }}>Request: served instantly from a CDN edge &mdash; ~5ms, no server work</div>
    </div>
  );
}