CodeItem

apps/www/src/components/CodeItem.astro · 28 lines · group Misc

Used by

Live sites: pages.gitt.one.

Samples 1

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

The whole build configuration of a site

This is not an excerpt — a content repository really is this small. The image paths are a public contract: they do not move under your feet.

Knowledge base

A repository of markdown files becomes a documentation site.

Dockerfile
FROM h.gitt.one/pages/engine-astro/builder-docs:latest AS builder

RUN rm -rf src/content/docs/*
COPY . src/content/docs/
COPY pages.config.js ./
RUN pnpm run build

FROM h.gitt.one/commons/nginx-basicauth:master AS runner
COPY --from=builder /src/apps/docs/dist /usr/share/nginx/html

Plus a three-line .gitlab-ci.yml and pages.config.js with the site title and URL.

Landing page

Content, images and assets are copied over the examples shipped in the image.

Dockerfile
FROM h.gitt.one/pages/engine-astro/builder-www:latest AS builder

RUN rm -rf src/articles/* src/images/*
COPY articles/ src/articles/
COPY images/ src/images/
COPY pages.config.js ./
RUN pnpm run build

FROM h.gitt.one/pages/engine-astro/nginx:latest
COPY --from=builder /src/apps/www/dist /usr/share/nginx/html

The runner image already serves with compression, caching rules and a 404 page — nothing to configure.

MDX of this sample
export const DOCS_DOCKERFILE = `FROM h.gitt.one/pages/engine-astro/builder-docs:latest AS builder

RUN rm -rf src/content/docs/*
COPY . src/content/docs/
COPY pages.config.js ./
RUN pnpm run build

FROM h.gitt.one/commons/nginx-basicauth:master AS runner
COPY --from=builder /src/apps/docs/dist /usr/share/nginx/html`;
export const WWW_DOCKERFILE = `FROM h.gitt.one/pages/engine-astro/builder-www:latest AS builder

RUN rm -rf src/articles/* src/images/*
COPY articles/ src/articles/
COPY images/ src/images/
COPY pages.config.js ./
RUN pnpm run build

FROM h.gitt.one/pages/engine-astro/nginx:latest
COPY --from=builder /src/apps/www/dist /usr/share/nginx/html`;

<CodeSection
  title="The whole build configuration of a site"
  description="This is not an excerpt — a content repository really is this small. The image paths are a public contract: they do not move under your feet."
>
  <CodeItem
    title="Knowledge base"
    fileName="Dockerfile"
    description="A repository of markdown files becomes a documentation site."
    code={DOCS_DOCKERFILE}
    note="Plus a three-line .gitlab-ci.yml and pages.config.js with the site title and URL."
  />
  <CodeItem
    title="Landing page"
    fileName="Dockerfile"
    description="Content, images and assets are copied over the examples shipped in the image."
    code={WWW_DOCKERFILE}
    note="The runner image already serves with compression, caching rules and a 404 page — nothing to configure."
  />
</CodeSection>

Props

NameTypeRequiredDefaultDescription
titlestringyes
fileNamestringyes
descriptionstring
codestringyes
notestring

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

---
interface Props {
  title: string;
  fileName: string;
  description?: string;
  code: string;
  note?: string;
}

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

<div class="flex flex-col h-full">
  <h3 class="text-lg font-bold text-gray-900">{title}</h3>
  {description && <p class="mt-2 text-base text-gray-500">{description}</p>}
  <div class="mt-4 flex flex-col flex-grow overflow-hidden rounded-xl bg-gray-900 shadow-lg">
    <div class="flex items-center border-b border-white/10 px-4 py-2">
      <span class="font-mono text-xs uppercase tracking-wide text-gray-400">
        {fileName}
      </span>
    </div>
    <div class="flex-grow overflow-x-auto px-4 py-4">
      <pre class="text-sm leading-relaxed text-gray-100"><code>{code}</code></pre>
    </div>
  </div>
  {note && <p class="mt-3 text-sm text-gray-500">{note}</p>}
</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.