ChecklistItem

apps/www/src/components/ChecklistItem.astro · 19 lines · group Features & lists

Used by

Live sites: pages.gitt.one.

Samples 1

pages.gitt.one/how-it-works/shown inside <ChecklistSection>

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
titlestringyes
descriptionstringyes

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

---
import Check from 'astro-heroicons/outline/Check.astro';

interface Props {
  title: string;
  description: string;
}

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

<div class="relative pl-10">
  <dt class="text-base font-bold text-gray-900">
    <Check class="absolute left-0 top-0 h-6 w-6 text-primary-600" aria-hidden="true" />
    {title}
  </dt>
  <dd class="mt-2 text-base text-gray-500">{description}</dd>
</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.