ChecklistSection

apps/www/src/components/ChecklistSection.astro · 33 lines · group Features & lists

Used by

Live sites: pages.gitt.one.

Samples 1

pages.gitt.one/how-it-works/

THE QUALITY BAR

What every produced site gets

Not a per-project checklist to negotiate — these come from the builder image, so the newest site is as good as the best one.

Lighthouse 100
Performance, accessibility, best practices and SEO — the acceptance target for every site, measured on production
Zero JavaScript by default
Pages are plain pre-rendered markup; interactive pieces ship as small islands, so a contact form costs about a kilobyte
Images done properly
Responsive variants converted to webp at build time, with priority hints on the ones that decide your loading score
Pre-compressed delivery
Static files are compressed during the build and served ready-made by nginx, with immutable caching for hashed assets
SEO out of the box
Sitemap, robots.txt, per-page meta tags, favicon set and heading anchors that behave exactly like GitLab's
Markdown that matches GitLab
One rendering engine everywhere: tables, task lists, footnotes, syntax highlighting, Mermaid and PlantUML diagrams
Cookieless analytics
Self-hosted, privacy-preserving statistics by default — no cookies, and therefore no consent banner in your visitors' way
Contact forms with spam protection
A native HTML form, a lightweight challenge instead of a heavy captcha, and visible feedback when the message is sent
Content validated at build time
Typed content schemas and linting run in CI, so a broken link or a missing field fails the pipeline, not the visitor
MDX of this sample
<ChecklistSection
  subTitle="THE QUALITY BAR"
  title="What every produced site gets"
  description="Not a per-project checklist to negotiate — these come from the builder image, so the newest site is as good as the best one."
>
  <ChecklistItem
    title="Lighthouse 100"
    description="Performance, accessibility, best practices and SEO — the acceptance target for every site, measured on production"
  />
  <ChecklistItem
    title="Zero JavaScript by default"
    description="Pages are plain pre-rendered markup; interactive pieces ship as small islands, so a contact form costs about a kilobyte"
  />
  <ChecklistItem
    title="Images done properly"
    description="Responsive variants converted to webp at build time, with priority hints on the ones that decide your loading score"
  />
  <ChecklistItem
    title="Pre-compressed delivery"
    description="Static files are compressed during the build and served ready-made by nginx, with immutable caching for hashed assets"
  />
  <ChecklistItem
    title="SEO out of the box"
    description="Sitemap, robots.txt, per-page meta tags, favicon set and heading anchors that behave exactly like GitLab's"
  />
  <ChecklistItem
    title="Markdown that matches GitLab"
    description="One rendering engine everywhere: tables, task lists, footnotes, syntax highlighting, Mermaid and PlantUML diagrams"
  />
  <ChecklistItem
    title="Cookieless analytics"
    description="Self-hosted, privacy-preserving statistics by default — no cookies, and therefore no consent banner in your visitors' way"
  />
  <ChecklistItem
    title="Contact forms with spam protection"
    description="A native HTML form, a lightweight challenge instead of a heavy captcha, and visible feedback when the message is sent"
  />
  <ChecklistItem
    title="Content validated at build time"
    description="Typed content schemas and linting run in CI, so a broken link or a missing field fails the pipeline, not the visitor"
  />
</ChecklistSection>

Props

NameTypeRequiredDefaultDescription
subTitlestring
titlestringyes
descriptionstring

Source apps/www/src/components/ChecklistSection.astro @ gitt.one

---
interface Props {
  subTitle?: string;
  title: string;
  description?: string;
}

const { subTitle, title, description } = Astro.props;
---

<div class="bg-gray-50 border-t border-gray-100">
  <div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
    <div class="max-w-3xl">
      {
        subTitle && (
          <h2 class="text-sm font-semibold tracking-wide uppercase">
            <span class="bg-gradient-to-r from-primary-600 to-primary-alt-700 bg-clip-text text-transparent">
              {subTitle}
            </span>
          </h2>
        )
      }
      <p class="mt-3 text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
        {title}
      </p>
      {description && <p class="mt-4 text-lg text-gray-500">{description}</p>}
    </div>
    <dl class="mt-12 grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
      <slot />
    </dl>
  </div>
</div>

Source links point to engine-astro@e857a859. Samples are cut from the sites' own content by scripts/gallery-extract.mjs; nothing is merged or removed yet.