Non-official site for The Life Series Minecraft hardcore survival multiplayer series housing every video
www.life-series.online
Attribution page, update video item icon (#64)
authored by
GitHub
10ef7cdc
b9b3765f
+89
-9
+2
-2
src/components/rewrite/SiteHeader.astro
+2
-2
src/components/rewrite/SiteHeader.astro
···
5
5
import { getSeasonIconImage } from '@/utils/rewrite/images';
6
6
7
7
interface Props {
8
-
season: CollectionEntry<'seasonsRewrite'>;
8
+
season?: CollectionEntry<'seasonsRewrite'>;
9
9
}
10
10
11
11
const { season } = Astro.props;
···
17
17
<a href="/rewrite">
18
18
<span class="cluster gap-text-icon">
19
19
<Image
20
-
src={getSeasonIconImage(season.id)}
20
+
src={getSeasonIconImage(season?.id)}
21
21
alt=""
22
22
loading="eager"
23
23
width="64"
+1
-6
src/components/rewrite/VideoItem.astro
+1
-6
src/components/rewrite/VideoItem.astro
···
11
11
12
12
<a href={`https://www.youtube.com/watch?v=${ytId}`}>
13
13
<span class="cluster gap-text-icon">
14
-
<Icon
15
-
name="lucide:circle-play"
16
-
title="Watch on YouTube"
17
-
role="img"
18
-
size="2em"
19
-
/>
14
+
<Icon name="lucide:arrow-up-right" role="img" title="Watch on YouTube" />
20
15
<span>{title}</span>
21
16
</span>
22
17
</a>
+75
src/pages/rewrite/attribution.astro
+75
src/pages/rewrite/attribution.astro
···
1
+
---
2
+
import { Icon } from 'astro-icon/components';
3
+
import SiteFooter from '@/components/rewrite/SiteFooter.astro';
4
+
import SiteHeader from '@/components/rewrite/SiteHeader.astro';
5
+
import BaseLayout from '@/layouts/rewrite/BaseLayout.astro';
6
+
---
7
+
8
+
<BaseLayout title="Attribution">
9
+
<div class="wrapper">
10
+
<div class="site-header-wrapper">
11
+
<SiteHeader />
12
+
</div>
13
+
<main>
14
+
<div class="main-inner">
15
+
<h1>Attribution</h1>
16
+
<p>Thanks to <a href="https://the-life-series.fandom.com/wiki/The_Life_Series_Wiki" rel="external" class="external-link">The Life Series Wiki <Icon name="lucide:arrow-up-right" aria-hidden="true" /></a> for providing assets for the season images and icons.</p>
17
+
</div>
18
+
</main>
19
+
<div class="site-footer-wrapper">
20
+
<SiteFooter />
21
+
</div>
22
+
</div>
23
+
</BaseLayout>
24
+
25
+
<style>
26
+
.wrapper {
27
+
max-inline-size: 1586px;
28
+
margin-inline: auto;
29
+
display: grid;
30
+
grid-template-rows: auto 1fr auto;
31
+
grid-template-columns: 1fr;
32
+
min-height: 100svh;
33
+
34
+
@media (width >= 48rem) {
35
+
grid-template-columns: 250px 1fr;
36
+
}
37
+
}
38
+
39
+
.site-header-wrapper,
40
+
.site-footer-wrapper {
41
+
@media (width >= 48rem) {
42
+
grid-column: 2;
43
+
}
44
+
}
45
+
46
+
main {
47
+
container-type: inline-size;
48
+
49
+
@media (width >= 48rem) {
50
+
grid-column: 2;
51
+
}
52
+
}
53
+
54
+
.main-inner {
55
+
margin-inline: clamp(16px, 10.2857px + 1.7857vw, 24px);
56
+
padding-top: clamp(16px, 10.2857px + 1.7857vw, 24px);
57
+
padding-bottom: 10vh;
58
+
max-width: 1080px;
59
+
60
+
@media (width >= 48rem) {
61
+
margin-inline: clamp(24px, -44.7367px + 8.9501vw, 128px);
62
+
padding-top: clamp(24px, 12.8696px + 3.4783cqi, 80px);
63
+
}
64
+
}
65
+
66
+
p {
67
+
text-wrap: pretty;
68
+
}
69
+
70
+
.external-link {
71
+
display: inline-flex;
72
+
align-items: start;
73
+
gap: 4px;
74
+
}
75
+
</style>
+8
-1
src/utils/rewrite/images.ts
+8
-1
src/utils/rewrite/images.ts
···
1
1
import type { ImageMetadata } from 'astro';
2
2
3
-
export async function getSeasonIconImage(season: string) {
3
+
export async function getSeasonIconImage(season?: string) {
4
4
const seasonImages = import.meta.glob<{ default: ImageMetadata }>(
5
5
'/src/assets/rewrite/images/seasons/icons/*',
6
6
);
7
+
8
+
if (!season) {
9
+
return seasonImages[
10
+
`/src/assets/rewrite/images/seasons/icons/3rd-life.webp`
11
+
]();
12
+
}
13
+
7
14
return (
8
15
seasonImages[
9
16
`/src/assets/rewrite/images/seasons/icons/${season}.webp`