1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114 | ---
/**
* The links in an issue, grouped by kind.
*
* Each link shows its destination host, because knowing where a link goes
* before you click it is a small courtesy that most of the web has abandoned.
*/
import { prettyHost } from '@eratic/core';
import { LINK_KIND_LABEL, type LinkKind } from '../content.config';
interface Link {
title: string;
url: string;
kind: LinkKind;
via?: string;
note?: string;
}
interface Props {
groups: Array<[LinkKind, Link[]]>;
}
const { groups } = Astro.props;
---
<div class="links">
{
groups.map(([kind, links]) => (
<section>
<h2>{LINK_KIND_LABEL[kind]}</h2>
<ul>
{links.map((link) => (
<li>
<a class="links__title" href={link.url} rel="noopener noreferrer">
{link.title}
</a>
<p class="links__meta meta">
{prettyHost(link.url)}
{link.via && <span class="links__via">via {link.via}</span>}
</p>
{link.note && <p class="links__note">{link.note}</p>}
</li>
))}
</ul>
</section>
))
}
</div>
<style>
.links {
display: flex;
flex-direction: column;
gap: var(--space-xl);
margin-block-start: var(--space-xl);
}
.links h2 {
font-family: var(--font-ui);
font-size: var(--step--1);
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-faint);
padding-block-end: var(--space-2xs);
border-block-end: 1px solid var(--rule);
}
.links ul {
list-style: none;
padding: 0;
margin: var(--space-m) 0 0;
display: flex;
flex-direction: column;
gap: var(--space-m);
}
.links__title {
font-family: var(--font-prose);
font-size: var(--step-1);
font-weight: 500;
line-height: var(--leading-tight);
color: var(--ink);
text-decoration: none;
text-wrap: pretty;
}
.links__title:hover {
color: var(--accent);
}
.links__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs);
margin-block-start: var(--space-3xs);
font-family: var(--font-mono);
font-size: var(--step--2);
color: var(--ink-faint);
}
.links__via::before {
content: '· ';
}
.links__note {
margin-block-start: var(--space-2xs);
font-family: var(--font-prose);
font-size: var(--step-0);
color: var(--ink-muted);
text-wrap: pretty;
max-inline-size: var(--measure);
}
</style>
|