- import { defineCollection, z, type CollectionEntry } from 'astro:content'
+import {
+	defineCollection,
+	reference,
+	z,
+	type CollectionEntry,
+} from 'astro:content'
# ...
const articleSchema = z.object({
	archived: z.boolean().default(false),
	author: reference('authors'),
	canonicalURL: z.string().url(),
	categories: categoriesSchema,
	coverImage: z
		.object({
			alt: z.string(),
			src: z.string().or(z.string().url()),
		})
		.optional(),
	createdAt: z.string().transform(str => new Date(str)),
	description: z.string(),
	draft: z.boolean().default(true),
	featured: z.boolean().default(false),
	language: z.enum(['en', 'es']).default('en'),
	publishedAt: z
		.string()
		.transform(str => new Date(str))
		.optional(),
+	relatedArticles: z.array(reference('articles')).default([]),
	tags: tagsSchema,
	timeToRead: z.string().optional(),
	title: z.string(),
	updatedAt: z
		.string()
		.transform(str => new Date(str))
		.optional(),
	wordCount: z.number().optional(),
})

---
archived: false
author: cody-brunner
canonicalURL: https://blog.codybrunner.com/2024/from-nextjs-to-astro
categories:
  - technology
coverImage:
  alt: Moving from NextJS to Astro.
  src: ./hero.webp
createdAt: 01/08/2024
description: In 2023 I began making the move from NextJS to Astro for my
  personal website and blog. This is my experience with the transition.
draft: false
featured: true
publishedAt: 01/15/2024
+ relatedArticles:
+  - 2024/deploying-astro-to-fly/ssr-deployments
+  - 2024/deploying-astro-to-fly/static-deployments
tags:
  - astro
  - nextjs
  - tailwindcss
  - typescript
title: From NextJS to Astro
---

---
import { Image } from 'astro:assets'
- import { getCollection, getEntry } from 'astro:content'
+ import { getCollection, getEntries, getEntry } from 'astro:content'
 
# ...
 
export type Props = ArticleType
 
const { data: article, render } = Astro.props
 
const { data: author } = await getEntry(article.author)
+ let relatedArticles = await getEntries(article.relatedArticles)
+
+ if (import.meta.env.MODE === 'production') {
+ 	relatedArticles = filterArticles(relatedArticles, isPublished)
+ }
 
# ...
---
 
<BaseLayout>
	# ...
	<Container class='mt-16 lg:mt-32' slot='content'>
					# ...
+					{
+						relatedArticles.length > 0 && (
+							<div class='flex flex-col gap-8 pb-16'>
+								<h3 class='font-display text-3xl font-bold tracking-tight text-primary-800 sm:text-4xl dark:text-primary-100'>Related Articles</h3>
+								<hr class="border-primary-900/5 dark:border-white/10" />
+								<ul class='flex flex-col gap-16'>
+									{relatedArticles.map(({ data: article, slug }) => (
+										<Article article={article} slug={slug} />
+									))}
+								</ul>
+							</div>
+						)
+					}
					# ...
	</Container>
</BaseLayout>

import { sync } from 'glob'
import { readFileSync, writeFileSync } from 'fs'
import matter from 'gray-matter'
import chalk from 'chalk'
 
const { log } = console
const info = chalk.cyanBright.bold
const success = chalk.magentaBright.bold
 
// TODO: Update this to scan all sub-directories in the future.
const files = sync('./src/content/articles/2024/**/*.mdx')
const slugRegex = /.*?(?=\d{4})/g
 
log(info('Running Script >>>'))
for (const file of files) {
	const relatedArticles = []
	const content = readFileSync(file, 'utf-8')
	const { data: frontmatter } = matter(content)
	const currentFileSlug = frontmatter.canonicalURL.replace(slugRegex, '')
 
	for (const otherFile of files) {
		const otherContent = readFileSync(otherFile, 'utf-8')
		const { data: otherFrontmatter } = matter(otherContent)
		const otherFileSlug = otherFrontmatter.canonicalURL.replace(slugRegex, '')
 
		if (
			currentFileSlug !== otherFileSlug &&
			otherFrontmatter.tags &&
			frontmatter.tags &&
			otherFrontmatter.tags.some(tag => frontmatter.tags.includes(tag))
		) {
			relatedArticles.push(otherFileSlug)
		}
	}
 
	frontmatter.relatedArticles =
		relatedArticles.length > 1 ? relatedArticles : []
 
	const updatedFileContents = matter.stringify(content).trim()
 
	const yamlString = `${updatedFileContents}\n---\n`
 
	log(info(`${frontmatter.title}:`))
	log(success(`>>> ${relatedArticles.length} related articles found.`))
	log(success(`>>> Updating Article Contents`))
 
	writeFileSync(file, yamlString)
}

+import { sync } from 'glob'
+import { readFileSync } from 'fs'
+import matter from 'gray-matter'
 
// ...
 
export default function (
	/** @type {import('plop').NodePlopAPI} */
	plop
) {
	// ...
+	plop.setHelper('findRelatedArticles', params => {
+		const selectedTags = params.data.root.tags
+		const newArticleSlug = params.data.root.path
+		// TODO: Update this to include all sub-directories in future.
+		const files = sync('./src/content/articles/2024/**/*.mdx')
+		const relatedArticles = []
+
+		files.forEach(file => {
+			const content = readFileSync(file, 'utf-8')
+			const { data } = matter(content)
+			const slug = data.canonicalURL.replace(/.*?(?=\d{4})/g, '')
+			if (
+				slug !== newArticleSlug &&
+				data.tags.some(tag => selectedTags.includes(tag))
+			) {
+				relatedArticles.push(slug)
+			}
+		})
+
+		return relatedArticles.length > 1
+			? relatedArticles
+					.map((str, idx) => {
+						if (idx === 0) return `\n- ${str}`
+						return `- ${str}`
+					})
+					.join('\n')
+			: []
+	})
	plop.setGenerator('article', {
		actions: data => {
			const year = new Date().getFullYear()
			const [date] = new Date().toLocaleString().split(',')
			data.createdAt = date
+			data.path = `${year}/${data.title
+				.replace(/[^a-zA-Z0-9]+/g, '-')
+				.toLowerCase()}`
			data.year = year
			return [
				{
					path: '../src/content/articles/{{year}}/{{ dashCase title }}/index.mdx',
					templateFile: '../templates/article.mdx.hbs',
					type: 'add',
				},
			]
		},
		// ...
	})
}

---
archived: false
author: cody-brunner
canonicalURL: https://blog.codybrunner.com/{{year}}/{{dashCase title}}
categories: {{arrayToYAML categories}}
coverImage:
  alt: "// TODO"
  src: ./hero.webp
createdAt: {{createdAt}}
description: {{description}}
draft: true
featured: false
+relatedArticles: {{findRelatedArticles}}
tags: {{arrayToYAML tags}}
title: {{title}}
---