Non-official site for The Life Series Minecraft hardcore survival multiplayer series housing every video
www.life-series.online
add open graph to season pages
+73
-15
src/assets/images/og/index.png
src/assets/images/og/index.png
This is a binary file and will not be displayed.
src/assets/images/og/seasons/1.png
src/assets/images/og/seasons/1.png
This is a binary file and will not be displayed.
src/assets/images/og/seasons/2.png
src/assets/images/og/seasons/2.png
This is a binary file and will not be displayed.
src/assets/images/og/seasons/3.png
src/assets/images/og/seasons/3.png
This is a binary file and will not be displayed.
src/assets/images/og/seasons/4.png
src/assets/images/og/seasons/4.png
This is a binary file and will not be displayed.
src/assets/images/og/seasons/5.png
src/assets/images/og/seasons/5.png
This is a binary file and will not be displayed.
src/assets/images/og/seasons/6.png
src/assets/images/og/seasons/6.png
This is a binary file and will not be displayed.
src/assets/images/og/seasons/7.png
src/assets/images/og/seasons/7.png
This is a binary file and will not be displayed.
+27
-14
src/pages/index.astro
+27
-14
src/pages/index.astro
···
1
1
---
2
-
import { Image } from 'astro:assets';
2
+
import { site } from 'astro:config/client';
3
+
import { Image, getImage } from 'astro:assets';
3
4
import { getCollection } from 'astro:content';
4
5
import { SEO } from 'astro-seo';
5
6
import BaseLayout from '@/layouts/BaseLayout.astro';
···
7
8
import ogIndexImage from '@/assets/images/og/index.png';
8
9
9
10
const seasons = await getCollection('seasons');
11
+
12
+
const ogTitle = 'The Life Series Minecraft hardcore survival multiplayer series.';
13
+
const ogDescription =
14
+
'Non-official site. Watch all The Life Series member point of views from all seasons.';
15
+
const ogImage = `${site}${
16
+
(
17
+
await getImage({
18
+
src: ogIndexImage,
19
+
format: 'webp',
20
+
width: 1200,
21
+
height: 630,
22
+
})
23
+
).src
24
+
}`;
25
+
const ogImageAlt =
26
+
'Grid of all 7 Life Series season logos in order from newest to oldest - "Past Life", "Wild Life", "Secret Life", "Limited Life", "Double Life", "Last Life", "Third Life"';
10
27
---
11
28
12
29
<BaseLayout title="Home">
13
30
<SEO
14
31
slot="seo"
15
-
description="Non-official site. Watch all The Life Series member point of views from all seasons."
32
+
description={ogDescription}
16
33
openGraph={{
17
34
basic: {
18
-
title: 'The Life Series Minecraft hardcore survival multiplayer series.',
35
+
title: ogTitle,
19
36
type: 'website',
20
-
image: `${Astro.site?.origin}${ogIndexImage.src}`,
37
+
image: ogImage,
21
38
},
22
39
image: {
23
-
alt: 'Grid of all 7 Life Series season logos in order from newest to oldest - "Past Life", "Wild Life", "Secret Life", "Limited Life", "Double Life", "Last Life", "Third Life"',
40
+
alt: ogImageAlt,
24
41
},
25
42
optional: {
26
-
description:
27
-
'Non-official site. Watch all The Life Series member point of views from all seasons.',
43
+
description: ogDescription,
28
44
siteName: 'The Life Series',
29
45
},
30
46
}}
31
47
twitter={{
32
48
card: 'summary',
33
-
site: '@ghustvn',
34
49
creator: '@ghustvn',
35
-
title: 'The Life Series Minecraft hardcore survival multiplayer series.',
36
-
description:
37
-
'Non-official site. Watch all The Life Series member point of views from all seasons.',
38
-
image: `${Astro.site?.origin}${ogIndexImage.src}`,
39
-
imageAlt:
40
-
'Grid of all 7 Life Series season logos in order from newest to oldest - "Past Life", "Wild Life", "Secret Life", "Limited Life", "Double Life", "Last Life", "Third Life"',
50
+
title: ogTitle,
51
+
description: ogDescription,
52
+
image: ogImage,
53
+
imageAlt: ogImageAlt,
41
54
}}
42
55
/>
43
56
<main class="grid min-h-svh items-center justify-items-center overflow-x-hidden p-32">
+29
-1
src/pages/seasons/[season_id].astro
+29
-1
src/pages/seasons/[season_id].astro
···
3
3
import { SEO } from 'astro-seo';
4
4
import SeasonsLayout from '@/layouts/SeasonsLayout.astro';
5
5
import SessionList from '@/components/SessionList.astro';
6
+
import { getSeasonOGImage } from '@/utils/images';
6
7
7
8
export async function getStaticPaths() {
8
9
const seasons = await getCollection('seasons');
···
24
25
const { season, sessions } = Astro.props;
25
26
26
27
const title = `${season.data.title} (S${season.data.seasonNumber})`;
28
+
29
+
const ogTitle = `${season.data.title} - Season ${season.data.seasonNumber} of The Life Series Minecraft hardcore survival multiplayer series.`;
30
+
const ogDescription = `Watch all sessions. ${season.data.seo.description.twist}.`;
31
+
const ogImage = await getSeasonOGImage(season.id);
32
+
const ogImageAlt = `The Life Series season ${season.data.seasonNumber} logo - ${season.data.title}`;
27
33
---
28
34
29
35
<SeasonsLayout
···
32
38
>
33
39
<SEO
34
40
slot="seo"
35
-
description={`${season.data.title} - season ${season.data.seasonNumber} of The Life Series Minecraft hardcore survival multiplayer series. ${season.data.seo.description.twist}`}
41
+
description={ogDescription}
42
+
openGraph={{
43
+
basic: {
44
+
title: ogTitle,
45
+
type: 'website',
46
+
image: ogImage,
47
+
},
48
+
image: {
49
+
alt: ogImageAlt,
50
+
},
51
+
optional: {
52
+
description: ogDescription,
53
+
siteName: 'The Life Series',
54
+
},
55
+
}}
56
+
twitter={{
57
+
card: 'summary',
58
+
creator: '@ghustvn',
59
+
title: ogTitle,
60
+
description: ogDescription,
61
+
image: ogImage,
62
+
imageAlt: ogImageAlt,
63
+
}}
36
64
/>
37
65
<main class="@container h-full">
38
66
<div
+17
src/utils/images.ts
+17
src/utils/images.ts
···
1
1
import type { ImageMetadata } from 'astro';
2
+
import { site } from 'astro:config/client';
3
+
import { getImage } from 'astro:assets';
2
4
3
5
export async function getMemberImage(member: string) {
4
6
const memberImages = import.meta.glob<{ default: ImageMetadata }>(
···
13
15
);
14
16
return seasonImages[`/src/assets/images/seasons/${season}.webp`]();
15
17
}
18
+
19
+
export async function getSeasonOGImage(season: string) {
20
+
const seasonImages = import.meta.glob<{ default: ImageMetadata }>(
21
+
'/src/assets/images/og/seasons/*',
22
+
);
23
+
const image = await seasonImages[`/src/assets/images/og/seasons/${season}.png`]();
24
+
const formattedImage = await getImage({
25
+
src: image.default,
26
+
format: 'webp',
27
+
width: 1200,
28
+
height: 630,
29
+
});
30
+
31
+
return `${site}${formattedImage.src}`;
32
+
}