Non-official site for The Life Series Minecraft hardcore survival multiplayer series housing every video
www.life-series.online
Add sessions page (#59)
+121
-1
+121
-1
src/pages/rewrite/seasons/[season_id]/sessions/[session_id].astro
+121
-1
src/pages/rewrite/seasons/[season_id]/sessions/[session_id].astro
···
1
1
---
2
2
import { type CollectionEntry, getCollection } from 'astro:content';
3
+
import MemberItem from '@/components/rewrite/MemberItem.astro';
4
+
import SeasonLayout from '@/components/rewrite/SeasonLayout.astro';
5
+
import VideoItem from '@/components/rewrite/VideoItem.astro';
3
6
import BaseLayout from '@/layouts/rewrite/BaseLayout.astro';
7
+
import { isCurrentPage } from '@/utils/url';
4
8
5
9
const { isRewrite } = Astro.locals;
6
10
if (!isRewrite) {
···
49
53
const pageTitle = `Session ${sessionNumber} - ${season.data.title}`;
50
54
---
51
55
52
-
<BaseLayout title={pageTitle} />
56
+
<BaseLayout title={pageTitle}>
57
+
<SeasonLayout season={season}>
58
+
<Fragment slot="sidebar-title">Sessions</Fragment>
59
+
<ol
60
+
slot="sidebar-nav"
61
+
role="list"
62
+
aria-labelledby="sidebar-title"
63
+
class="session-list"
64
+
>
65
+
{
66
+
sessionNumbers.map((sessionNumber) => (
67
+
<li>
68
+
<a
69
+
class="session-item-link" href={`/rewrite/seasons/${season.id}/sessions/${sessionNumber}`}
70
+
aria-current={isCurrentPage(Astro.url.pathname, `/rewrite/seasons/${season.id}/sessions/${sessionNumber}`)}
71
+
>
72
+
<span>Session {sessionNumber}</span>
73
+
</a>
74
+
</li>
75
+
))
76
+
}
77
+
</ol>
78
+
<Fragment slot="main-title">Session {sessionNumber} - {season.data.title}</Fragment>
79
+
<ul role="list" aria-labelledby="main-content" class="flow video-list">
80
+
{sessions.map((session) => Object.entries(session).map(([member, video]) => video && (
81
+
<li>
82
+
<div class="cluster video-list-item-header">
83
+
<h2 id={member}>
84
+
<MemberItem memberName={member} />
85
+
</h2>
86
+
<a
87
+
href={`/rewrite/seasons/${season.id}/${member}`}
88
+
aria-describedby={member}
89
+
>
90
+
All sessions
91
+
</a>
92
+
</div>
93
+
<VideoItem ytId={video.id} title={video.title} />
94
+
</li>
95
+
)))}
96
+
</ul>
97
+
</SeasonLayout>
98
+
</BaseLayout>
99
+
100
+
<script>
101
+
const currentPageLink = document.querySelector('[aria-current="page"]');
102
+
currentPageLink?.scrollIntoView({ block: 'center' });
103
+
</script>
104
+
105
+
<style>
106
+
.session-list {
107
+
&:has(.session-item-link:focus-visible) .session-item-link:not(:focus-visible) {
108
+
filter: grayscale(75%);
109
+
opacity: 0.8;
110
+
}
111
+
112
+
@media (hover) {
113
+
&:has(.session-item-link:hover)
114
+
.session-item-link:not(:hover) {
115
+
filter: grayscale(75%);
116
+
opacity: 0.8;
117
+
}
118
+
}
119
+
}
120
+
121
+
.session-item-link {
122
+
display: grid;
123
+
justify-self: start;
124
+
padding-block: 8px;
125
+
text-decoration: none;
126
+
transition-property: filter, opacity;
127
+
transition-duration: 100ms;
128
+
transition-timing-function: linear;
129
+
130
+
&:focus-visible {
131
+
outline: none;
132
+
133
+
&:not([aria-current='page']) {
134
+
translate: 8px;
135
+
}
136
+
137
+
> span {
138
+
outline: 2px solid var(--color-canvas-text);
139
+
outline-offset: 4px;
140
+
}
141
+
}
142
+
143
+
@media (prefers-reduced-motion: no-preference) {
144
+
transition:
145
+
filter 100ms linear,
146
+
opacity 100ms linear,
147
+
translate var(--spring-transition-duration) var(--spring-transition-timing-function);
148
+
}
149
+
150
+
@media (hover) {
151
+
&:hover:not([aria-current='page']) {
152
+
translate: 8px;
153
+
}
154
+
}
155
+
156
+
&[aria-current='page'] {
157
+
translate: 12px;
158
+
text-decoration-line: underline;
159
+
text-decoration-style: wavy;
160
+
font-weight: var(--font-weight-heading);
161
+
}
162
+
}
163
+
164
+
.video-list {
165
+
--flow-space: clamp(24px, -4.5714px + 8.9286cqi, 64px);
166
+
margin-block-start: 16px;
167
+
}
168
+
169
+
.video-list-item-header {
170
+
margin-block-end: 16px;
171
+
}
172
+
</style>