Add read-only web UI
Serves Pete's classified-story archive over HTTP alongside the Matrix
bot. Three sections (gaming/tech/politics), Animal-Crossing-vibe Tailwind
templates, day/night palette driven by the visitor's browser clock.
Web port configurable via web.listen_addr and ${PETE_WEB_PORT} in
docker-compose. Tailwind built in a node stage in the Dockerfile so
deployments don't need node at runtime.
This commit is contained in:
44
internal/web/templates/index.html
Normal file
44
internal/web/templates/index.html
Normal file
@@ -0,0 +1,44 @@
|
||||
{{define "title"}}{{.SiteTitle}} — your news feed{{end}}
|
||||
|
||||
{{define "main"}}
|
||||
<section class="mt-2 mb-10 sm:mb-14 text-center">
|
||||
<h1 class="font-display text-4xl sm:text-6xl font-bold leading-tight">
|
||||
a friendlier news feed.
|
||||
</h1>
|
||||
<p class="mx-auto mt-3 max-w-xl text-base sm:text-lg text-[color:var(--ink)]/70">
|
||||
Pete reads RSS, sorts stories, and posts them to Matrix.
|
||||
Here's what he's been reading lately.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
{{range .Sections}}
|
||||
<section class="mb-12">
|
||||
<div class="flex items-end justify-between gap-3 mb-4">
|
||||
<div>
|
||||
<h2 class="font-display text-2xl sm:text-3xl font-bold">
|
||||
<span aria-hidden="true">{{.Channel.Emoji}}</span>
|
||||
<a href="/{{.Channel.Slug}}" class="hover:underline underline-offset-4 decoration-theme-{{.Channel.Theme}} decoration-4">
|
||||
{{.Channel.Title}}
|
||||
</a>
|
||||
</h2>
|
||||
<p class="text-sm text-[color:var(--ink)]/60 mt-1">{{.Channel.Blurb}}</p>
|
||||
</div>
|
||||
<a href="/{{.Channel.Slug}}" class="hidden sm:inline-flex items-center gap-1 text-sm font-semibold rounded-full bg-theme-{{.Channel.Theme}} text-white px-4 py-2 shadow-pete hover:-translate-y-0.5 transition">
|
||||
more →
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{if .Stories}}
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
{{range .Stories}}
|
||||
{{template "card" dict "Story" . "Theme" $.Channel.Theme}}
|
||||
{{end}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="rounded-3xl bg-[color:var(--card)] border-2 border-dashed border-[color:var(--ink)]/15 p-8 text-center text-[color:var(--ink)]/60">
|
||||
Nothing here yet — Pete's still listening.
|
||||
</div>
|
||||
{{end}}
|
||||
</section>
|
||||
{{end}}
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user