StepsSection

apps/www/src/components/StepsSection.astro · 21 lines · group Features & lists

Used by

Live sites: pages.gitt.one.

Samples 2

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

What happens on push

The same four steps for every site produced by the technology — nothing bespoke per project.

  1. 1

    Content lands in git

    You edit markdown or typed content tags — in your IDE, in the GitLab web editor, or with an AI agent working on the repository

  2. 2

    CI pulls the builder

    A standard pipeline pulls the builder image; the engine and its locked dependencies come ready-made, so builds stay reproducible for years

  3. 3

    Static output is built

    Markdown is rendered, images are converted into responsive webp, files are pre-compressed and SEO files are generated

  4. 4

    An image ships

    The result is an ordinary ~50 MB nginx image — deploy it to our Kubernetes clusters or to any Docker hosting you control

MDX of this sample
<StepsSection
  title="What happens on push"
  description="The same four steps for every site produced by the technology — nothing bespoke per project."
>
  <StepItem
    ind="1"
    title="Content lands in git"
    description="You edit markdown or typed content tags — in your IDE, in the GitLab web editor, or with an AI agent working on the repository"
  />
  <StepItem
    ind="2"
    title="CI pulls the builder"
    description="A standard pipeline pulls the builder image; the engine and its locked dependencies come ready-made, so builds stay reproducible for years"
  />
  <StepItem
    ind="3"
    title="Static output is built"
    description="Markdown is rendered, images are converted into responsive webp, files are pre-compressed and SEO files are generated"
  />
  <StepItem
    ind="4"
    title="An image ships"
    description="The result is an ordinary ~50 MB nginx image — deploy it to our Kubernetes clusters or to any Docker hosting you control"
  />
</StepsSection>
pages.gitt.one/

From a git repository to a live site

A new website is just a new content repository. Time to first site — hours, not weeks.

  1. 1

    Write content

    Put your content in a git repository: markdown files for articles and knowledge bases, semantically typed content tags for landing pages

  2. 2

    Add a tiny Dockerfile

    A few lines on top of our standard builder image — no build configs, no toolchain to maintain in your repo

  3. 3

    Push to master

    CI builds your content into a ~50 MB nginx image and deploys it — to our Kubernetes clusters or any Docker hosting of yours

  4. 4

    Edit and preview

    Change content right in the GitLab web editor; every draft gets a staging replica of the real site to review before release

MDX of this sample
<StepsSection
  title="From a git repository to a live site"
  description="A new website is just a new content repository. Time to first site — hours, not weeks."
>
  <StepItem
    ind="1"
    title="Write content"
    description="Put your content in a git repository: markdown files for articles and knowledge bases, semantically typed content tags for landing pages"
  />
  <StepItem
    ind="2"
    title="Add a tiny Dockerfile"
    description="A few lines on top of our standard builder image — no build configs, no toolchain to maintain in your repo"
  />
  <StepItem
    ind="3"
    title="Push to master"
    description="CI builds your content into a ~50 MB nginx image and deploys it — to our Kubernetes clusters or any Docker hosting of yours"
  />
  <StepItem
    ind="4"
    title="Edit and preview"
    description="Change content right in the GitLab web editor; every draft gets a staging replica of the real site to review before release"
  />
</StepsSection>

Props

NameTypeRequiredDefaultDescription
titlestringyes
descriptionstring

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

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

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

<div class="bg-white">
  <div class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
    <h2 class="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
      {title}
    </h2>
    {description && <p class="mt-4 max-w-3xl text-lg text-gray-500">{description}</p>}
    <ol class="mt-12 grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-4">
      <slot />
    </ol>
  </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.