cesnimda
bfa8cfd357
- rewrote homelab (content + topology diagram + stack) from a live inspection of the host: Ubuntu 24.04, ~30 Docker services behind Traefik (Cloudflare-fronted, TLS, HTTP/3), Authentik SSO forward-auth, CrowdSec, Pi-hole, self-hosted Gitea + CI runner, socket-proxy, per-app network isolation; WordPress framed as being decommissioned (not future arch) - deploy: docker-compose now uses Traefik labels + traefik_proxy network (was assumed nginx edge); .env.example adds SITE_HOST/TRAEFIK_ENTRYPOINT; colophon + ARCHITECTURE/DOCKER/ DEPLOYMENT specs corrected nginx-edge -> Traefik (site container still serves via nginx) - PROJECT_STATUS: pre-launch checklist updated; infra section added Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
91 lines
3.7 KiB
Plaintext
91 lines
3.7 KiB
Plaintext
---
|
|
/*
|
|
Colophon — "how this site works" (CONTENT_STRATEGY §4). A deliberate P2 hook: it
|
|
states the production decisions behind the site honestly. Copy authored per locale.
|
|
*/
|
|
import type { Locale } from '@i18n/locales';
|
|
import { useDict } from '@i18n/t';
|
|
import Base from '@layouts/Base.astro';
|
|
import { getMeta } from '@lib/content';
|
|
import SectionLabel from '@components/ui/SectionLabel.astro';
|
|
|
|
interface Props {
|
|
locale: Locale;
|
|
}
|
|
const { locale } = Astro.props;
|
|
const d = useDict(locale);
|
|
const m = getMeta('colophon', locale);
|
|
|
|
const copy = {
|
|
en: {
|
|
lead: 'This site is a small work sample in its own right. A few of the decisions behind it:',
|
|
points: [
|
|
[
|
|
'Static by default',
|
|
'Built with Astro and served as static HTML — no client framework runtime, so the largest content paint is just text and CSS. The three interactive parts (menu, lightbox, contact form) are tiny progressive-enhancement modules.',
|
|
],
|
|
[
|
|
'Bilingual from the ground up',
|
|
'English and Norwegian are equal citizens: a typed slug map is the single source of truth for routes, the language switch and hreflang, so they can never drift apart.',
|
|
],
|
|
[
|
|
'Motion that confirms, never performs',
|
|
'One signature animation, everything else is restraint. Every effect has a reduced-motion variant, and content is never gated behind an animation.',
|
|
],
|
|
[
|
|
'Self-hosted',
|
|
'Built and deployed from my own Gitea instance to Docker behind Traefik. The contact form is a small stateless .NET service — even that is part of my own stack.',
|
|
],
|
|
[
|
|
'No tracking',
|
|
'No analytics beacons, no third-party fonts, no cookies — which is also why there is no cookie banner.',
|
|
],
|
|
],
|
|
},
|
|
no: {
|
|
lead: 'Denne siden er også et lite arbeidsprøve i seg selv. Noen av valgene bak den:',
|
|
points: [
|
|
[
|
|
'Statisk som standard',
|
|
'Bygget med Astro og servert som statisk HTML — ingen klient-rammeverk i drift, så det første innholdet som vises er bare tekst og CSS. De tre interaktive delene (meny, lightbox, kontaktskjema) er små moduler for progressiv forbedring.',
|
|
],
|
|
[
|
|
'Tospråklig fra bunnen',
|
|
'Engelsk og norsk er likestilt: et typet slug-kart er én kilde til sannhet for ruter, språkbytte og hreflang, så de kan aldri komme i utakt.',
|
|
],
|
|
[
|
|
'Bevegelse som bekrefter, aldri opptrer',
|
|
'Én signaturanimasjon, ellers tilbakeholdenhet. Hver effekt har en variant for redusert bevegelse, og innhold er aldri sperret bak en animasjon.',
|
|
],
|
|
[
|
|
'Egendriftet',
|
|
'Bygget og rullet ut fra min egen Gitea-instans til Docker bak Traefik. Kontaktskjemaet er en liten tilstandsløs .NET-tjeneste — også den er en del av min egen stack.',
|
|
],
|
|
[
|
|
'Ingen sporing',
|
|
'Ingen analyse-beacons, ingen tredjeparts-fonter, ingen informasjonskapsler — som også er grunnen til at det ikke finnes noe cookie-banner.',
|
|
],
|
|
],
|
|
},
|
|
}[locale];
|
|
---
|
|
|
|
<Base locale={locale} pageId="colophon" title={m.title} description={m.description}>
|
|
<div class="mx-auto max-w-3xl px-6 py-16">
|
|
<SectionLabel text={d.footer.colophon} />
|
|
<h1 class="text-h1 mt-4">{d.footer.colophon}</h1>
|
|
<p class="text-body-lg text-ink-muted mt-4">{copy.lead}</p>
|
|
|
|
<dl class="mt-8 flex flex-col gap-6">
|
|
{
|
|
copy.points.map(([term, desc]) => (
|
|
<div class="border-line bg-surface-1 rounded-md border p-5">
|
|
<dt class="text-h4 text-ink font-semibold">{term}</dt>
|
|
<dd class="text-body text-ink-muted mt-2">{desc}</dd>
|
|
</div>
|
|
))
|
|
}
|
|
</dl>
|
|
</div>
|
|
</Base>
|