chore(blog-overview): apply prettier formatting
No behavior change — IDE auto-format pass. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Peter Meier
@@ -9,7 +9,11 @@
|
||||
import { postHref } from "$lib/blog-utils";
|
||||
import { t as tStatic, T } from "$lib/translations";
|
||||
import type { Translations } from "$lib/translations";
|
||||
import { fetchCommentCounts, postSlugForComments, type CommentCountsMap } from "$lib/comment-counts";
|
||||
import {
|
||||
fetchCommentCounts,
|
||||
postSlugForComments,
|
||||
type CommentCountsMap,
|
||||
} from "$lib/comment-counts";
|
||||
|
||||
interface TagEntry {
|
||||
_slug?: string;
|
||||
@@ -85,7 +89,8 @@
|
||||
.filter((p) => {
|
||||
if (year && yearOf(p) !== year) return false;
|
||||
if (q) {
|
||||
const hay = `${p.headline} ${p.excerpt} ${p.subheadline} ${p.tags.join(" ")}`.toLowerCase();
|
||||
const hay =
|
||||
`${p.headline} ${p.excerpt} ${p.subheadline} ${p.tags.join(" ")}`.toLowerCase();
|
||||
if (!hay.includes(q)) return false;
|
||||
}
|
||||
return true;
|
||||
@@ -113,8 +118,9 @@
|
||||
let commentCounts = $state<CommentCountsMap>({});
|
||||
$effect(() => {
|
||||
const ctrl = new AbortController();
|
||||
fetchCommentCounts(posts.map(postSlugForComments), { signal: ctrl.signal })
|
||||
.then((map) => {
|
||||
fetchCommentCounts(posts.map(postSlugForComments), {
|
||||
signal: ctrl.signal,
|
||||
}).then((map) => {
|
||||
commentCounts = map;
|
||||
});
|
||||
return () => ctrl.abort();
|
||||
@@ -126,7 +132,9 @@
|
||||
<div class="mb-4 flex flex-wrap items-center gap-2">
|
||||
<label class="relative block w-full sm:max-w-sm">
|
||||
<span class="sr-only">{t(T.blog_search_label)}</span>
|
||||
<span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500">
|
||||
<span
|
||||
class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500"
|
||||
>
|
||||
<Icon icon="mdi:magnify" class="h-4 w-4" />
|
||||
</span>
|
||||
<input
|
||||
@@ -149,7 +157,9 @@
|
||||
{#if availableYears.length > 0}
|
||||
<label class="relative inline-flex items-center">
|
||||
<span class="sr-only">{t(T.blog_year_label)}</span>
|
||||
<span class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500">
|
||||
<span
|
||||
class="pointer-events-none absolute top-1/2 left-2 -translate-y-1/2 text-zinc-500"
|
||||
>
|
||||
<Icon icon="mdi:calendar" class="h-4 w-4" />
|
||||
</span>
|
||||
<select
|
||||
@@ -161,7 +171,9 @@
|
||||
<option value={y}>{y}</option>
|
||||
{/each}
|
||||
</select>
|
||||
<span class="pointer-events-none absolute top-1/2 right-1.5 -translate-y-1/2 text-zinc-500">
|
||||
<span
|
||||
class="pointer-events-none absolute top-1/2 right-1.5 -translate-y-1/2 text-zinc-500"
|
||||
>
|
||||
<Icon icon="mdi:chevron-down" class="h-4 w-4" />
|
||||
</span>
|
||||
</label>
|
||||
@@ -170,17 +182,27 @@
|
||||
{/if}
|
||||
|
||||
{#if !isFiltering && upcomingEvents.length > 0}
|
||||
<section class="not-prose mb-6 rounded-sm border border-zinc-200 bg-zinc-50 p-4">
|
||||
<h2 class="mb-3 flex items-center gap-2 text-sm font-semibold tracking-wide text-zinc-700 uppercase">
|
||||
<Icon icon="mdi:calendar-clock" class="size-5 shrink-0" />
|
||||
<section
|
||||
class="not-prose mb-6 rounded-sm border border-zinc-200 bg-zinc-50 p-4"
|
||||
>
|
||||
<h2
|
||||
class="mb-3 flex items-center gap-2 text-sm font-semibold tracking-wide text-zinc-700"
|
||||
>
|
||||
<Icon icon="mdi:calendar-clock" class="size-7 shrink-0" />
|
||||
{t(T.blog_upcoming_events)}
|
||||
</h2>
|
||||
<ul class="not-prose list-none space-y-2 pl-0">
|
||||
{#each upcomingEvents as ev}
|
||||
<li>
|
||||
<a href={postHref(ev)} class="group flex flex-wrap items-center gap-2 no-underline hover:underline">
|
||||
<a
|
||||
href={postHref(ev)}
|
||||
class="group flex flex-wrap items-center gap-2 no-underline"
|
||||
>
|
||||
<EventBadges eventDate={ev.eventDate} />
|
||||
<span class="text-sm text-zinc-900 group-hover:text-zinc-950">{ev.headline}</span>
|
||||
<span
|
||||
class="text-sm text-zinc-900 group-hover:text-zinc-950"
|
||||
>{ev.headline}</span
|
||||
>
|
||||
</a>
|
||||
</li>
|
||||
{/each}
|
||||
@@ -189,7 +211,9 @@
|
||||
{/if}
|
||||
|
||||
{#if isFiltering}
|
||||
<div class="mb-3 flex flex-wrap items-center gap-2 text-xs text-zinc-600">
|
||||
<div
|
||||
class="mb-3 flex flex-wrap items-center gap-2 text-xs text-zinc-600"
|
||||
>
|
||||
<span>
|
||||
{t(T.blog_results_count, { count: filteredResults.length })}
|
||||
{#if query}{t(T.blog_results_for, { query })}{/if}
|
||||
@@ -197,37 +221,63 @@
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onclick={() => { query = ""; year = ""; }}
|
||||
onclick={() => {
|
||||
query = "";
|
||||
year = "";
|
||||
}}
|
||||
class="text-zinc-500 underline hover:text-zinc-900"
|
||||
>{t(T.blog_filter_reset)}</button>
|
||||
>{t(T.blog_filter_reset)}</button
|
||||
>
|
||||
</div>
|
||||
{#if filteredResults.length > 0}
|
||||
<div class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
<div
|
||||
class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3"
|
||||
>
|
||||
{#each filteredResults as hit}
|
||||
<a href={searchResultHref(hit.slug)} class="flex flex-col overflow-hidden border border-gray-200 bg-white text-slate-950 no-underline transition-all">
|
||||
<a
|
||||
href={searchResultHref(hit.slug)}
|
||||
class="flex flex-col overflow-hidden border border-gray-200 bg-white text-slate-950 no-underline transition-all"
|
||||
>
|
||||
{#if hit.image}
|
||||
<div class="aspect-3/2 w-full overflow-hidden bg-gray-100">
|
||||
<img src={hit.image} alt={hit.headline} class="h-full w-full object-cover" loading="lazy" />
|
||||
<div
|
||||
class="aspect-3/2 w-full overflow-hidden bg-gray-100"
|
||||
>
|
||||
<img
|
||||
src={hit.image}
|
||||
alt={hit.headline}
|
||||
class="h-full w-full object-cover"
|
||||
loading="lazy"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-1 flex-col p-4">
|
||||
<h3 class="mb-1 text-base font-semibold">{hit.headline}</h3>
|
||||
<h3 class="mb-1 text-base font-semibold">
|
||||
{hit.headline}
|
||||
</h3>
|
||||
{#if hit.excerpt}
|
||||
<p class="text-sm text-zinc-700 line-clamp-3">{hit.excerpt}</p>
|
||||
<p class="text-sm text-zinc-700 line-clamp-3">
|
||||
{hit.excerpt}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="rounded-sm border border-zinc-200 bg-white p-6 text-center text-sm text-zinc-600">
|
||||
<div
|
||||
class="rounded-sm border border-zinc-200 bg-white p-6 text-center text-sm text-zinc-600"
|
||||
>
|
||||
{t(T.blog_no_results)}
|
||||
</div>
|
||||
{/if}
|
||||
{:else}
|
||||
{#if tags.length > 0}
|
||||
<div class="mb-2">
|
||||
<div class="flex flex-wrap gap-2" role="navigation" aria-label={t(T.blog_filter_aria)}>
|
||||
<div
|
||||
class="flex flex-wrap gap-2"
|
||||
role="navigation"
|
||||
aria-label={t(T.blog_filter_aria)}
|
||||
>
|
||||
<Tag
|
||||
label={t(T.blog_tag_all)}
|
||||
href={tagHref(null)}
|
||||
@@ -242,38 +292,31 @@
|
||||
variant={activeTag === slug ? "inactive" : "green"}
|
||||
active={activeTag === slug}
|
||||
icon={tag.icon?.trim() || null}
|
||||
customColor={activeTag === slug ? null : tag.color?.trim() || null}
|
||||
customColor={activeTag === slug
|
||||
? null
|
||||
: tag.color?.trim() || null}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<Pagination
|
||||
{currentPage}
|
||||
{totalPages}
|
||||
{basePath}
|
||||
activeTag={activeTag}
|
||||
/>
|
||||
<Pagination {currentPage} {totalPages} {basePath} {activeTag} />
|
||||
|
||||
<div class="py-2 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{#each posts as post}
|
||||
<PostCard
|
||||
post={post}
|
||||
{post}
|
||||
href={postHref(post)}
|
||||
tagBase={`${basePath}/tag`}
|
||||
commentCount={commentCounts[postSlugForComments(post)] ?? null}
|
||||
commentCount={commentCounts[postSlugForComments(post)] ??
|
||||
null}
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center gap-2">
|
||||
<Pagination
|
||||
{currentPage}
|
||||
{totalPages}
|
||||
{basePath}
|
||||
activeTag={activeTag}
|
||||
/>
|
||||
<Pagination {currentPage} {totalPages} {basePath} {activeTag} />
|
||||
<div class="grow"></div>
|
||||
<div class="bg-white rounded-md font-thin">
|
||||
<div class="inline-flex text-xs p-2">
|
||||
@@ -297,7 +340,10 @@
|
||||
</div>
|
||||
|
||||
<div class="mt-4 text-xs text-zinc-600">
|
||||
<a href="/posts/rss.xml" class="inline-flex items-center gap-1 hover:underline">
|
||||
<a
|
||||
href="/posts/rss.xml"
|
||||
class="inline-flex items-center gap-1 hover:underline"
|
||||
>
|
||||
<Icon icon="mdi:rss" class="h-3.5 w-3.5" />
|
||||
{t(T.blog_rss_subscribe)}
|
||||
</a>
|
||||
|
||||
Reference in New Issue
Block a user