Files
at-container-registry/pkg/appview/templates/pages/learn-more.html
T
2026-04-19 17:35:41 -05:00

181 lines
8.8 KiB
HTML

{{ define "learn-more" }}
<!DOCTYPE html>
<html lang="en">
<head>
{{ template "head" . }}
{{ template "meta" .Meta }}
</head>
<body>
{{ template "nav" . }}
<main id="main-content" class="container mx-auto px-4 py-8 max-w-4xl">
<!-- Hero Section -->
<section class="text-center mb-16">
<h1 class="text-4xl md:text-5xl font-display font-bold tracking-tight mb-4">Docker meets the decentralized web</h1>
<p class="text-xl text-base-content/70 max-w-2xl mx-auto">
{{ .ClientName }} is an OCI-compliant container registry built on the AT Protocol.
Push and pull Docker images using your Bluesky identity.
</p>
</section>
<!-- How It Works -->
<section class="mb-16">
<h2 class="text-2xl font-bold mb-6">How It Works</h2>
<div class="bg-base-200 rounded-lg p-6 mb-6">
<h3 class="text-lg font-semibold mb-3">The Simple Version</h3>
<p class="text-base-content/80">
Push and pull container images just like any registry. The difference?
Your image metadata lives in your AT Protocol account, not a corporate database.
Your Bluesky handle becomes your namespace.
</p>
</div>
<div class="collapse collapse-arrow bg-base-200 border border-base-300">
<input type="checkbox" aria-label="Toggle technical details" />
<div class="collapse-title font-medium">
Technical Details
</div>
<div class="collapse-content">
<div class="space-y-4 pt-2">
<p><strong>Manifests</strong> (small JSON metadata describing your images) are stored as AT Protocol records in your Personal Data Server (PDS). This means you own them.</p>
<p><strong>Blobs</strong> (the actual image layers) are stored in S3-compatible object storage. You can use our default storage or bring your own.</p>
<p>The <strong>AppView</strong> ({{ .SiteURL }}) resolves your identity, routes requests, and speaks the OCI Distribution API that Docker understands.</p>
</div>
</div>
</div>
</section>
<!-- Why Decentralized -->
<section class="mb-16">
<h2 class="text-2xl font-bold mb-6">Why Decentralized?</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="card bg-base-200 border border-base-300 p-6">
<div class="text-primary mb-3">
{{ icon "database" "size-8" }}
</div>
<h3 class="font-semibold text-lg mb-2">Own Your Data</h3>
<p class="text-base-content/70">
Your image manifests are stored in your PDS, not our database.
You control your data. You can export or migrate it anytime.
</p>
</div>
<div class="card bg-base-200 border border-base-300 p-6">
<div class="text-primary mb-3">
{{ icon "fingerprint" "size-8" }}
</div>
<h3 class="font-semibold text-lg mb-2">Portable Identity</h3>
<p class="text-base-content/70">
Your Bluesky handle is your namespace. No separate registry account needed.
Your identity follows you across the AT Protocol ecosystem.
</p>
</div>
<div class="card bg-base-200 border border-base-300 p-6">
<div class="text-primary mb-3">
{{ icon "hard-drive" "size-8" }}
</div>
<h3 class="font-semibold text-lg mb-2">Bring Your Own Storage</h3>
<p class="text-base-content/70">
Use our default storage or deploy your own hold service.
Connect your own S3, Storj, Minio, or other compatible storage.
</p>
</div>
<div class="card bg-base-200 border border-base-300 p-6">
<div class="text-primary mb-3">
{{ icon "eye" "size-8" }}
</div>
<h3 class="font-semibold text-lg mb-2">Open & Auditable</h3>
<p class="text-base-content/70">
Built on open protocols. Fully OCI-compliant.
The source is public. Inspect everything.
</p>
</div>
</div>
</section>
<!-- Architecture Overview -->
<section class="mb-16">
<h2 class="text-2xl font-bold mb-6">Architecture Overview</h2>
<div class="bg-base-200 rounded-lg p-6">
<div class="flex flex-col md:flex-row items-center justify-between gap-6 text-center">
<div class="flex-1">
<div class="bg-base-300 rounded-lg p-4 border border-base-300">
{{ icon "container" "size-8 text-primary mx-auto mb-2" }}
<p class="font-semibold">Docker Client</p>
<p class="text-sm text-base-content/60">Push & Pull</p>
</div>
</div>
<div class="hidden md:block">
{{ icon "arrow-right" "size-6 text-base-content/40" }}
</div>
<div class="md:hidden">
{{ icon "arrow-down" "size-6 text-base-content/40" }}
</div>
<div class="flex-1">
<div class="bg-base-300 rounded-lg p-4 border border-primary">
{{ icon "server" "size-8 text-primary mx-auto mb-2" }}
<p class="font-semibold">AppView</p>
<p class="text-sm text-base-content/60">{{ .SiteURL }}</p>
</div>
</div>
<div class="hidden md:flex flex-col gap-2">
{{ icon "arrow-right" "size-6 text-base-content/40" }}
{{ icon "arrow-right" "size-6 text-base-content/40" }}
</div>
<div class="md:hidden flex gap-4">
{{ icon "arrow-down" "size-6 text-base-content/40" }}
{{ icon "arrow-down" "size-6 text-base-content/40" }}
</div>
<div class="flex-1 flex flex-col gap-4">
<div class="bg-base-300 rounded-lg p-4 border border-base-300">
{{ icon "user" "size-8 text-primary mx-auto mb-2" }}
<p class="font-semibold">Your PDS</p>
<p class="text-sm text-base-content/60">Manifests</p>
</div>
<div class="bg-base-300 rounded-lg p-4 border border-base-300">
{{ icon "database" "size-8 text-primary mx-auto mb-2" }}
<p class="font-semibold">Hold Service</p>
<p class="text-sm text-base-content/60">Blobs</p>
</div>
</div>
</div>
</div>
<p class="text-base-content/70 mt-4 text-sm">
The AppView speaks OCI to Docker and ATProto to your PDS. Manifests go to your account. Blobs go to storage.
</p>
</section>
<!-- Get Started CTA -->
<section class="text-center bg-base-200 rounded-lg p-8">
<h2 class="text-2xl font-bold mb-4">Ready to Get Started?</h2>
<p class="text-base-content/70 mb-6 max-w-lg mx-auto">
Install the credential helper and start pushing images in minutes.
All you need is a Bluesky account.
</p>
<div class="flex flex-col sm:flex-row items-center justify-center gap-4">
<a href="/install" class="btn btn-primary btn-lg">Get Started</a>
<a href="https://tangled.org/evan.jarrett.net/at-container-registry" target="_blank" rel="noopener" class="btn btn-ghost btn-lg">
<img src="/static/tangled-black.svg" alt="" width="20" height="20" loading="lazy" decoding="async" class="size-5 mr-2 icon-light">
<img src="/static/tangled-white.svg" alt="" width="20" height="20" loading="lazy" decoding="async" class="size-5 mr-2 icon-dark">
View Source
</a>
</div>
</section>
</main>
{{ template "footer" . }}
</body>
</html>
{{ end }}