blob: 164b32b22dfeca4393c6de1307fd7fb9da5c7adb (
plain)
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
|
---
import Date from "@components/organisms/Date.astro";
import KeywordsList from "@components/organisms/KeywordsList.astro";
import { getFirstUserID, getLastUpdate } from "@lib/collection/helpers";
import type { Original } from "@lib/collection/schemas";
import type { z } from "astro:content";
import type { CollectionEntry } from "astro:content";
interface Props {
posts: (CollectionEntry<"blog"> & { data: z.infer<typeof Original> })[];
}
const { posts } = Astro.props;
---
<ol>
{
await Promise.all(posts.map(async (post) => {
const { id, data } = post;
const { title, description, lang, keywords } = data;
const { name, email, entity } = await getFirstUserID(post);
const display = name ?? email ?? entity;
return (
<li>
<article
itemprop="blogPost"
itemscope
itemtype="https://schema.org/BlogPosting"
>
<h3>
<a href={`/blog/read/${id}`} itemprop="headline name">{title}</a>
</h3>
<div itemprop="abstract">
{
description &&
description.split("\n\n").map((paragraph) => (
<p class="small">{paragraph}</p>
))
}
</div>
<footer class="small">
<Date
date={getLastUpdate(post)}
locales={lang}
options={{
year: "numeric",
month: "long",
day: "numeric",
}}
itemprop="dateModified"
/><span
itemprop="author"
itemscope
itemtype="https://schema.org/Person"
><span itemprop="alternateName">{display}</span></span>
<KeywordsList {keywords} />
</footer>
</article>
</li>
);
}))
}
</ol>
<style>
ol {
margin-inline-start: calc(var(--size-7) * 1em);
margin-block: calc(var(--size-7) * 1em);
& > li {
margin-block-start: calc(var(--size-2) * 1em);
& > article {
padding-inline-end: calc(var(--size-9) * 1em);
& > [itemprop="abstract"] > p:not(:first-of-type) {
margin-block-start: 1.5em;
}
& > footer {
display: flex;
flex-direction: column;
gap: calc(var(--size-1) * 1em);
}
}
}
}
@media (width >= 40rem) {
ol > li > article > footer {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
}
</style>
|
