90 lines
2 KiB
Text
90 lines
2 KiB
Text
---
|
|
import LinkCard from "@/components/links/LinkCard.astro";
|
|
import LinksLayout from "@/components/links/LinksLayout.astro";
|
|
import { getLinks } from "@/lib/collections";
|
|
import {
|
|
collectionColor,
|
|
filterByCollection,
|
|
getUniqueCollections,
|
|
} from "@/lib/links";
|
|
|
|
export async function getStaticPaths() {
|
|
const links = await getLinks();
|
|
const collections = getUniqueCollections(links);
|
|
return collections.map((col) => ({
|
|
params: { collection: col.toLowerCase() },
|
|
props: { col, links },
|
|
}));
|
|
}
|
|
|
|
const { col, links } = Astro.props;
|
|
const colLinks = filterByCollection(links, col);
|
|
const color = collectionColor(col);
|
|
---
|
|
|
|
<LinksLayout title={col} description={`Links in der Collection "${col}".`} {links}>
|
|
<div class="page">
|
|
<header class="page__header">
|
|
<span class="page__folder" style={`background: ${color}`} aria-hidden="true">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="white" stroke="none">
|
|
<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" />
|
|
</svg>
|
|
</span>
|
|
<h1 class="page__title">{col}</h1>
|
|
<span class="page__count">{colLinks.length}</span>
|
|
</header>
|
|
{colLinks.length === 0 ? (
|
|
<p class="empty">Keine Links in dieser Collection.</p>
|
|
) : (
|
|
<ul class="link-list">
|
|
{colLinks.map((link) => <LinkCard {link} />)}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</LinksLayout>
|
|
|
|
<style>
|
|
.page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1.5rem;
|
|
}
|
|
|
|
.page__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.page__folder {
|
|
width: 28px;
|
|
height: 28px;
|
|
border-radius: 6px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.page__title {
|
|
font-size: 1.4rem;
|
|
font-weight: 600;
|
|
letter-spacing: -0.02em;
|
|
color: #111;
|
|
}
|
|
|
|
.page__count {
|
|
font-size: 0.875rem;
|
|
color: #999;
|
|
}
|
|
|
|
.empty {
|
|
color: #888;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.link-list {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|