blob: eaf159aab888e4bd15c2e6f73c1941af54b5d9de (
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
113
114
115
116
117
118
119
120
121
122
123
|
---
import updates from "../data/updates.json";
type Update = { date: string; title: string; url: string; group: string };
const initial = Number(Astro.props.limit ?? 5);
const step = Number(Astro.props.step ?? 10);
const items = updates as Update[];
---
<ul class="updates" data-updates data-step={step}>
{items.map((u, index) => (
<li hidden={index >= initial}>
<time datetime={u.date}>{u.date.replace(/-/g, ".")}</time>
{u.group && <span class="updates-group">{u.group}</span>}
<a href={u.url}>{u.title}</a>
</li>
))}
</ul>
{
items.length > initial && (
<div class="updates-footer">
<button type="button" class="updates-more" data-updates-more>
次へ（さらに{step}件）
</button>
</div>
)
}
<noscript>
<style>
.updates li[hidden] {
display: flex !important;
}
.updates-footer {
display: none;
}
</style>
</noscript>
<script>
const list = document.querySelector<HTMLElement>("[data-updates]");
const button = document.querySelector<HTMLButtonElement>("[data-updates-more]");
if (list && button) {
const step = Number(list.dataset.step ?? 10);
const relabel = () => {
const remaining = list.querySelectorAll("li[hidden]").length;
if (remaining === 0) {
button.hidden = true;
return;
}
button.textContent = `次へ（さらに${Math.min(step, remaining)}件）`;
};
button.addEventListener("click", () => {
list.querySelectorAll<HTMLElement>("li[hidden]").forEach((li, index) => {
if (index < step) li.hidden = false;
});
relabel();
});
}
</script>
<style>
.updates {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.9rem;
border-top: 1px solid var(--sl-color-gray-5);
}
.updates li {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.5rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--sl-color-gray-5);
}
/* hidden 属性の UA スタイル（display: none）は、上の .updates li に負けるため明示する */
.updates li[hidden] {
display: none;
}
.updates time {
color: var(--sl-color-gray-3);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.updates-group {
font-size: 0.75rem;
color: var(--sl-color-gray-2);
background: var(--sl-color-gray-6);
border-radius: 3px;
padding: 0.05rem 0.35rem;
flex-shrink: 0;
}
.updates a {
text-decoration: none;
}
.updates a:hover {
text-decoration: underline;
}
.updates-footer {
margin-top: 0.75rem;
text-align: center;
}
.updates-more {
font: inherit;
font-size: 0.85rem;
color: inherit;
background: var(--sl-color-gray-6);
border: 1px solid var(--sl-color-gray-5);
border-radius: 999px;
padding: 0.3rem 1rem;
cursor: pointer;
}
.updates-more:hover {
background: var(--sl-color-gray-5);
}
</style>
|
