CodeItem
apps/www/src/components/CodeItem.astro · 28 lines · group Misc
Used by
- pages.gitt.one /how-it-works/ × 4
Live sites: pages.gitt.one.
Samples 1
<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/htmlPlus 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/htmlThe 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
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| title | string | yes | ||
| fileName | string | yes | ||
| description | string | |||
| code | string | yes | ||
| note | string |
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.