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