blob: c16155e7a1b30ef70eb917955ae3f68cf469d574 (
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
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
---
import Date from "@components/organisms/Date.astro";
import KeywordsList from "@components/organisms/KeywordsList.astro";
import { getFirstUserID, getLastUpdate } from "@lib/collection/helpers";
import { Micro } from "@lib/collection/schemas";
import type { CollectionEntry, z } from "astro:content";
interface Props extends CollectionEntry<"blog"> {
data: z.infer<typeof Micro>;
}
const micro = Astro.props;
const { id, data, rendered } = micro;
const { title, lang, keywords } = data;
const date = getLastUpdate(micro);
const user = await getFirstUserID(micro);
const display = user?.name ?? user?.email ?? user?.entity ?? "";
const [first, ...names] = display.split(/\s/);
const last = names.length > 0 ? names[names.length - 1] : "";
const little = ((first?.[0] ?? "") + (last?.[0] ?? "")).slice(0, 2);
---
<article>
<header>
<h3 class="title">
<a href={`/blog/read/${id}`}>{title}</a>
</h3>
<span class="profile_picture">{
user?.website ? <a href={user.website}>{little}</a> : (
<span>{little}</span>
)
}</span>
<div>
{first} {last} <small>· <Date
{date}
locales={lang}
options={{ month: "short", day: "numeric" }}
/></small>
</div>
</header>
<div class="content small">
<div {lang}>
<Fragment set:html={rendered?.html} />
</div>
<footer>
<div class="keywords"><KeywordsList {keywords} /></div>
</footer>
</div>
<aside>
<small><a href="/blog/micro/1">Ver todos os microposts</a></small>
</aside>
</article>
<style>
article {
border-radius: calc(var(--size-1) * 1em);
box-shadow: 0 0 calc(var(--size-1) * 1em) var(--color-light);
padding: calc(var(--size-4) * 1em);
display: grid;
grid-template-rows: repeat(3, auto);
grid-template-columns: calc(var(--size-9) * 1em) auto;
gap: calc(var(--size-1) * 1em);
& > header {
display: contents;
}
& > aside {
grid-row: 3 / 4;
grid-column: 1 / 3;
border-block-start: 1px solid #e7e7e7;
padding-block-start: calc(var(--size-1) * 1em);
}
}
.profile_picture {
grid-row: 1 / 3;
grid-column: 1 / 2;
& > * {
display: inline-grid;
place-content: center;
width: calc(var(--size-9) * 1em);
height: calc(var(--size-9) * 1em);
aspect-ratio: 1 / 1;
background-color: var(--color-active);
color: #fff;
font-weight: 950;
font-size: smaller;
border-radius: calc(infinity * 1px);
text-align: center;
text-transform: uppercase;
}
}
.title {
display: none;
}
.content {
grid-row: 2/3;
grid-column: 2 / 3;
& > [lang] > :global(*:first-child) {
margin-block-start: 0;
}
& > [lang] > :global(*:last-child) {
margin-block-end: 0;
}
}
.keywords {
margin-block-end: 0;
}
</style>
|
