Astro Related Content: using References in Posts & Docs 👨‍👧‍👦 # Astro Related Content: using References in Posts & Docs 👨‍👧‍👦 #

    
1 ---
2 postTitle: 'Best Medium Format Camera for Starting Out'
3 focusKeyphrase: 'best medium format camera'
4 datePublished: '2022-03-07T16:04:42.000+0100'
5 lastUpdated: '2022-11-12T10:17:52.000+0100'
6 seoMetaDescription: "Best medium format camera for starting out is probably a question at the front of your mind right now! Let's take a look."
7 featuredImage: './best-medium-format-camera-for-starting-out.jpg'
8 placeholder: 'best-medium-format-camera-for-starting-out/
9 draft: false
10 relatedPosts: ['folding-camera', 'twin-lens-reflex-camera']
11 ---

  

    
1 import { image_placeholder } from '@rodneylab/picpack';
2 import { defineCollection, reference, z } from 'astro:content';
3 import { readFile } from 'node:fs/promises';
4 
5 const postsCollection = defineCollection({
6 	type: 'content',
7 	schema: ({ image }) =>
8 		z.object({
9 			postTitle: z.string(),
10 			focusKeyphrase: z.string().optional(),
11 			datePublished: z.string(),
12 			lastUpdated: z.string(),
13 			seoMetaDescription: z.string(),
14 			featuredImage: image(),
15 			featuredImageAlt: z.string(),
16 			placeholder: z.string().transform(async (value) => {
17 				const { buffer } = await readFile(`./src/content/posts/${value}`);
18 				const imageBytes = new Uint8Array(buffer);
19 				const { base64 } = image_placeholder(imageBytes);
20 				return base64;
21 			}),
22 			draft: z.boolean(),
23 			relatedPosts: z.array(reference('posts')).optional(),
24 		}),
25 });
26 
27 export const collections = {
28 	posts: postsCollection,
29 };

  

    
1 ---
2 import { Picture } from 'astro:assets';
3 import { getCollection, getEntry } from 'astro:content';
4 import BlogPostSummary from '~components/BlogPostSummary.svelte';
5 import BaseLayout from '~layouts/BaseLayout.astro';
6 
7 export async function getStaticPaths() {
8 	const posts = await getCollection('posts');
9 	return posts.map(
10 		({
11 			data: {
12 				relatedPosts,
13 				//...TRUNCATED
14 			},
15 			render,
16 			slug,
17 		}) => {
18 			return {
19 				params: { slug },
20 				props: {
21 					relatedPosts,
22 					//...TRUNCATED
23 				},
24 			};
25 		},
26 	);
27 }
28 
29 const { slug } = Astro.params;
30 const {
31 	relatedPosts,
32 	//...TRUNCATED
33 } = Astro.props;
34 
35 const { Content } = await render();
36 
37 const relatedPostsArray = relatedPosts
38 	? await Promise.all(
39 			relatedPosts?.map(async ({ collection, slug }) => {
40 				const {
41 					data: { datePublished, postTitle, seoMetaDescription },
42 				} = await getEntry(collection, slug);
43 
44 				return { datePublished, postTitle, seoMetaDescription };
45 			}),
46 	  )
47 	: [];
48 
49 const { format, width, height } = featuredImage;
50 ---
51 
52 <BaseLayout {...seoProps}>
53 	<h1>{title}</h1>
54 	<div class="image-wrapper">
55 		<img class="placeholder" aria-hidden="true" src={placeholder} width={width} height={height} />
56 		<Picture
57 			pictureAttributes={{ class: 'image lazy' }}
58 			src={featuredImage}
59 			alt={featuredImageAlt}
60 			densities={[1.5, 2]}
61 			formats={['avif', 'webp']}
62 			fallbackFormat={format}
63 			loading="eager"
64 			fetchpriority="high"
65 		/>
66 	</div>
67 
68 	<div class="container">
69 		{
70 			relatedPosts?.length ? (
71 				<aside class="related-posts">
72 					<>
73 						<h2>You might like to read one of these posts next:</h2>
74 						{relatedPostsArray.map(({ datePublished, postTitle, seoMetaDescription }, index) => (
75 							<article aria-posinset={index + 1} aria-setsize={relatedPosts.length}>
76 								<BlogPostSummary {datePublished} {postTitle} {seoMetaDescription} {slug} />
77 							</article>
78 						))}
79 					</>
80 				</aside>
81 			) : null
82 		}
83 		<Content />
84 	</div>
85 </BaseLayout>