a15025089d
Visitors can hide individual feeds via a gear-icon panel in the header. Preferences live in localStorage; the server ships the full source list (name + channel) as window.PETE_SOURCES so the panel lists every feed, grouped by channel, regardless of what's on the current page.
37 lines
1.9 KiB
HTML
37 lines
1.9 KiB
HTML
{{define "card"}}
|
|
<a href="{{.Story.ArticleURL}}" target="_blank" rel="noopener noreferrer"
|
|
data-story-card data-source="{{.Story.Source}}" data-channel="{{.Story.Channel}}"
|
|
class="group relative block rounded-3xl bg-[color:var(--card)] border-2 {{if .Story.Posted}}border-theme-{{.Theme}} glow-theme-{{.Theme}}{{else}}border-[color:var(--ink)]/10{{end}} shadow-pete overflow-hidden hover:-translate-y-1 hover:shadow-pete-lg transition">
|
|
{{if .Story.ImageURL}}
|
|
<div class="aspect-[16/10] w-full overflow-hidden bg-[color:var(--ink)]/5">
|
|
<img src="{{thumb .Story.ImageURL}}" alt="" loading="lazy" decoding="async"
|
|
class="h-full w-full object-cover group-hover:scale-105 transition duration-500">
|
|
</div>
|
|
{{end}}
|
|
<div class="p-4 space-y-2">
|
|
<div class="flex items-center gap-2 text-xs flex-wrap">
|
|
{{if .ShowChannel}}{{$ch := channel .Story.Channel}}
|
|
<span class="inline-flex items-center rounded-full bg-theme-{{$ch.Theme}} text-white px-2.5 py-0.5 font-semibold uppercase tracking-wider">
|
|
<span aria-hidden="true" class="mr-1">{{$ch.Emoji}}</span>{{$ch.Title}}
|
|
</span>
|
|
<span class="text-[color:var(--ink)]/60 font-semibold">{{.Story.Source}}</span>
|
|
{{else}}
|
|
<span class="inline-flex items-center rounded-full bg-theme-{{.Theme}} text-white px-2.5 py-0.5 font-semibold uppercase tracking-wider">
|
|
{{.Story.Source}}
|
|
</span>
|
|
{{end}}
|
|
<span class="text-[color:var(--ink)]/50">{{timeAgo .Story.SeenAt}}</span>
|
|
</div>
|
|
<h3 class="font-display text-lg font-semibold leading-snug group-hover:underline underline-offset-2 decoration-theme-{{.Theme}}">
|
|
{{.Story.Headline}}
|
|
</h3>
|
|
{{if .Story.Lede}}
|
|
<p class="text-sm text-[color:var(--ink)]/70 line-clamp-3">{{.Story.Lede}}</p>
|
|
{{end}}
|
|
</div>
|
|
{{if .Story.Paywalled}}
|
|
<div class="paywall-stamp" aria-label="Paywalled article"></div>
|
|
{{end}}
|
|
</a>
|
|
{{end}}
|