ChecklistSection
apps/www/src/components/ChecklistSection.astro · 33 lines · group Features & lists
Used by
- pages.gitt.one /how-it-works/ × 2
Live sites: pages.gitt.one.
Samples 1
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
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| subTitle | string | |||
| title | string | yes | ||
| description | string |
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.