Replace placeholder with a proper multi-section landing page
- public/index.html: semantic HTML5 with header/nav, hero, features grid, stack description list, contact, footer - public/styles.css: responsive layout, custom properties, dark-mode support - public/favicon.svg Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
rlabadmin
@@ -0,0 +1,10 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
|
||||||
|
<defs>
|
||||||
|
<linearGradient id="g" x1="0" y1="0" x2="1" y2="1">
|
||||||
|
<stop offset="0" stop-color="#2b5bd7"/>
|
||||||
|
<stop offset="1" stop-color="#9bb5ff"/>
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<rect width="32" height="32" rx="7" fill="url(#g)"/>
|
||||||
|
<path d="M9 11h14M16 11v12" stroke="#fff" stroke-width="2.5" stroke-linecap="round"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 400 B |
+126
-20
@@ -3,27 +3,133 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||||
<title>testsite</title>
|
<title>testsite — a deployment demo</title>
|
||||||
<style>
|
<meta name="description" content="A small static site deployed with Gitea Actions, Docker Swarm and Traefik.">
|
||||||
:root { color-scheme: light dark; }
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||||
body {
|
<link rel="stylesheet" href="/styles.css">
|
||||||
font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
|
|
||||||
max-width: 40rem;
|
|
||||||
margin: 4rem auto;
|
|
||||||
padding: 0 1.5rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
code {
|
|
||||||
background: color-mix(in srgb, currentColor 10%, transparent);
|
|
||||||
padding: 0.1em 0.35em;
|
|
||||||
border-radius: 0.25em;
|
|
||||||
}
|
|
||||||
.meta { opacity: 0.7; font-size: 0.9rem; }
|
|
||||||
</style>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<h1>testsite is live</h1>
|
<header class="site-header">
|
||||||
<p>Served by <code>nginx</code> on port 8080, deployed by Gitea Actions to Docker Swarm.</p>
|
<div class="container nav">
|
||||||
<p class="meta">Build: <code id="build">dev</code></p>
|
<a class="logo" href="/">
|
||||||
|
<span class="logo-mark" aria-hidden="true"></span>
|
||||||
|
<span>testsite</span>
|
||||||
|
</a>
|
||||||
|
<nav aria-label="Primary">
|
||||||
|
<a href="#features">Features</a>
|
||||||
|
<a href="#stack">Stack</a>
|
||||||
|
<a href="#contact">Contact</a>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<section class="hero">
|
||||||
|
<div class="container">
|
||||||
|
<p class="eyebrow">Deployment demo</p>
|
||||||
|
<h1>A static site, shipped on every <code>git push</code>.</h1>
|
||||||
|
<p class="lede">
|
||||||
|
Gitea Actions builds the container, pushes to the internal registry,
|
||||||
|
then Swarm does a zero-downtime rolling update behind Traefik.
|
||||||
|
No manual steps after the first deploy.
|
||||||
|
</p>
|
||||||
|
<div class="actions">
|
||||||
|
<a class="btn btn-primary" href="#stack">See the stack</a>
|
||||||
|
<a class="btn" href="https://git.dev.serso.org/test/testsite">Source on Gitea</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="features" class="section">
|
||||||
|
<div class="container">
|
||||||
|
<h2>What this site demonstrates</h2>
|
||||||
|
<div class="grid-3">
|
||||||
|
<article class="card">
|
||||||
|
<h3>Push to deploy</h3>
|
||||||
|
<p>
|
||||||
|
Commit to <code>main</code> and a Gitea Actions workflow builds
|
||||||
|
a fresh image tagged with the commit SHA, pushes it, and tells
|
||||||
|
Swarm to roll the new version in.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<h3>Zero downtime</h3>
|
||||||
|
<p>
|
||||||
|
Two replicas spread across worker nodes. The
|
||||||
|
<code>start-first</code> update order brings the new container
|
||||||
|
up before draining the old one — no dropped requests.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<article class="card">
|
||||||
|
<h3>Automatic TLS</h3>
|
||||||
|
<p>
|
||||||
|
Traefik watches Swarm labels, discovers the service on the
|
||||||
|
<code>traefik-public</code> overlay, and fetches a Let’s
|
||||||
|
Encrypt certificate without any extra config.
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="stack" class="section section-alt">
|
||||||
|
<div class="container">
|
||||||
|
<h2>The stack</h2>
|
||||||
|
<dl class="stack-list">
|
||||||
|
<div>
|
||||||
|
<dt>Source & CI</dt>
|
||||||
|
<dd>Gitea at <code>git.dev.serso.org</code> with Gitea Actions.</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Build</dt>
|
||||||
|
<dd><code>nginx:1.27-alpine</code> serving <code>/public</code> on port 8080.</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Registry</dt>
|
||||||
|
<dd>Gitea’s built-in OCI registry — one login per runner, per node.</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Runtime</dt>
|
||||||
|
<dd>Docker Swarm, constrained to worker nodes.</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Ingress</dt>
|
||||||
|
<dd>Traefik on the <code>traefik-public</code> overlay, Let’s Encrypt resolver.</dd>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<dt>Deploy trigger</dt>
|
||||||
|
<dd><code>docker service update --image <sha> testwebsite_web</code> over SSH.</dd>
|
||||||
|
</div>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section id="contact" class="section">
|
||||||
|
<div class="container narrow">
|
||||||
|
<h2>Contact</h2>
|
||||||
|
<p>
|
||||||
|
Questions or want to reuse this template for another app?
|
||||||
|
Drop a line at
|
||||||
|
<a href="mailto:robin@serso.be">robin@serso.be</a>.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer class="site-footer">
|
||||||
|
<div class="container footer-inner">
|
||||||
|
<p>© <span id="year">2026</span> serso · built with a CI pipeline that is probably overengineered for a static page.</p>
|
||||||
|
<p class="meta">
|
||||||
|
Build
|
||||||
|
<code id="build-sha">dev</code>
|
||||||
|
·
|
||||||
|
<a href="/healthz">/healthz</a>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
document.getElementById('year').textContent = new Date().getFullYear();
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -0,0 +1,262 @@
|
|||||||
|
:root {
|
||||||
|
color-scheme: light dark;
|
||||||
|
--bg: #ffffff;
|
||||||
|
--bg-alt: #f6f7f9;
|
||||||
|
--fg: #0f172a;
|
||||||
|
--fg-muted: #55607a;
|
||||||
|
--border: #e4e7ee;
|
||||||
|
--accent: #2b5bd7;
|
||||||
|
--accent-fg: #ffffff;
|
||||||
|
--radius: 10px;
|
||||||
|
--maxw: 68rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--bg: #0b0f19;
|
||||||
|
--bg-alt: #111827;
|
||||||
|
--fg: #e6e8ef;
|
||||||
|
--fg-muted: #9aa3b8;
|
||||||
|
--border: #1f2738;
|
||||||
|
--accent: #7aa2ff;
|
||||||
|
--accent-fg: #0b0f19;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
* { box-sizing: border-box; }
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
line-height: 1.6;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--maxw);
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 0 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container.narrow { max-width: 42rem; }
|
||||||
|
|
||||||
|
code {
|
||||||
|
background: color-mix(in srgb, var(--fg) 8%, transparent);
|
||||||
|
padding: 0.12em 0.35em;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 0.92em;
|
||||||
|
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
/* ── Header / nav ──────────────────────────────────────── */
|
||||||
|
.site-header {
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
background: var(--bg);
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
backdrop-filter: saturate(180%) blur(6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-height: 3.75rem;
|
||||||
|
gap: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--fg);
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo:hover { text-decoration: none; }
|
||||||
|
|
||||||
|
.logo-mark {
|
||||||
|
width: 1.25rem;
|
||||||
|
height: 1.25rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
background: linear-gradient(135deg, var(--accent), #9bb5ff);
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav nav {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav nav a {
|
||||||
|
color: var(--fg-muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav nav a:hover { color: var(--fg); text-decoration: none; }
|
||||||
|
|
||||||
|
/* ── Hero ──────────────────────────────────────────────── */
|
||||||
|
.hero {
|
||||||
|
padding: 5rem 0 4rem;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.eyebrow {
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--accent);
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero h1 {
|
||||||
|
font-size: clamp(1.9rem, 4vw, 2.9rem);
|
||||||
|
line-height: 1.15;
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
letter-spacing: -0.015em;
|
||||||
|
max-width: 36ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hero .lede {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--fg-muted);
|
||||||
|
max-width: 56ch;
|
||||||
|
margin: 0 0 1.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actions {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.625rem 1.1rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
transition: background-color 0.15s, transform 0.06s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover { text-decoration: none; background: var(--bg-alt); }
|
||||||
|
.btn:active { transform: translateY(1px); }
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background: var(--accent);
|
||||||
|
color: var(--accent-fg);
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary:hover {
|
||||||
|
background: color-mix(in srgb, var(--accent) 85%, #000);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Sections ──────────────────────────────────────────── */
|
||||||
|
.section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section-alt {
|
||||||
|
background: var(--bg-alt);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section h2 {
|
||||||
|
font-size: clamp(1.4rem, 2.5vw, 1.75rem);
|
||||||
|
margin: 0 0 1.75rem;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Feature grid ──────────────────────────────────────── */
|
||||||
|
.grid-3 {
|
||||||
|
display: grid;
|
||||||
|
gap: 1.25rem;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 1.5rem;
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card h3 {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card p {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--fg-muted);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Stack description list ────────────────────────────── */
|
||||||
|
.stack-list {
|
||||||
|
display: grid;
|
||||||
|
gap: 0.9rem 2rem;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stack-list > div {
|
||||||
|
padding: 1rem 1.25rem;
|
||||||
|
border-radius: var(--radius);
|
||||||
|
background: var(--bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
.stack-list dt {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
color: var(--fg-muted);
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.stack-list dd {
|
||||||
|
margin: 0;
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Footer ────────────────────────────────────────────── */
|
||||||
|
.site-footer {
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
padding: 2rem 0;
|
||||||
|
margin-top: 2rem;
|
||||||
|
color: var(--fg-muted);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-inner {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 1rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-inner .meta a { color: var(--fg-muted); }
|
||||||
|
.footer-inner p { margin: 0; }
|
||||||
Reference in New Issue
Block a user