Update template to Astro 5.0, use Content Collections

README.md

@@ -46,3 +46,7 @@ TINACLIENTID=<from tina.io>
 TINATOKEN=<from tina.io>
 TINASEARCH=<from tina.io>
 ```
+
+If you get a remote GraphQL schema error, chances are you need to update TinaCMS, [details here](https://tina.io/docs/introduction/faq#how-do-i-resolve-the-local-graphql-schema-doesnt-match-the-remote-graphql-schema-errors)!
+
+## Have fun!

package.json

@@ -10,14 +10,14 @@
 		"astro": "astro"
 	},
 	"devDependencies": {
-		"@astrojs/rss": "^4.0.1",
-		"@astrojs/sitemap": "^3.0.5",
-		"astro": "^4.1.1",
-		"prettier": "^3.1.0",
-		"prettier-plugin-astro": "^0.12.2"
+		"@astrojs/rss": "^4.0.10",
+		"@astrojs/sitemap": "^3.2.1",
+		"astro": "^5.0.5",
+		"prettier": "^3.3.3",
+		"prettier-plugin-astro": "^0.14.1"
 	},
 	"dependencies": {
-		"@tinacms/cli": "^1.5.43",
-		"tinacms": "^1.6.1"
+		"@tinacms/cli": "^1.7.0",
+		"tinacms": "^2.5.2"
 	}
 }

src/components/HomePosts.astro

@@ -8,8 +8,8 @@ const { allPosts } = Astro.props;
 let posts = allPosts
 	.sort(
 		(a, b) =>
-			new Date(b.frontmatter.updated || b.frontmatter.added).valueOf() -
-			new Date(a.frontmatter.updated || a.frontmatter.added).valueOf()
+			new Date(b.data.updated || b.data.added).valueOf() -
+			new Date(a.data.updated || a.data.added).valueOf(),
 	)
 	.slice(0, 5);
 ---
@@ -20,7 +20,7 @@ let posts = allPosts
 			posts.map(
 				({
 					url,
-					frontmatter: { description, slug, title, tags, added: date },
+					data: { description, slug, title, tags, added: date },
 				}) => <Post {url} {description} {date} {slug} {title} {tags} />
 			)
 		}

src/content.config.js

@@ -0,0 +1,17 @@
+import { defineCollection, z } from "astro:content";
+
+import { glob } from "astro/loaders";
+
+const posts = defineCollection({
+	loader: glob({ pattern: "*.md", base: "./src/posts" }),
+	schema: z.object({
+		title: z.string(),
+		slug: z.string(),
+		description: z.string(),
+		added: z.union([z.string(), z.date()]),
+		updated: z.union([z.string(), z.date()]).optional(),
+		tags: z.array(z.string()),
+	}),
+});
+
+export const collections = { posts };

src/layouts/BlogPost.astro

@@ -1,4 +1,5 @@
 ---
+import { getCollection } from "astro:content";
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
@@ -6,7 +7,7 @@ import ColorScript from "../components/ColorScript.astro";
 import Tags from "../components/Tags.astro";
 import getTags from "../scripts/getTags";
 
-const posts = await Astro.glob("../posts/*.md");
+const posts = await getCollection("posts");
 const allTags = getTags(posts);
 
 let {

src/pages/index.astro

@@ -1,4 +1,5 @@
 ---
+import { getCollection } from "astro:content";
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
@@ -9,8 +10,7 @@ import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
 import { Content as About } from "./about.md";
 import getTags from "../scripts/getTags";
 
-const posts = await Astro.glob("../posts/*.md");
-
+const posts = await getCollection("posts");
 const tags = getTags(posts);
 ---
 

src/pages/post/[slug].astro

@@ -1,19 +1,22 @@
 ---
-// Credit to @rachsmithcodes for this function
+import { getCollection, render } from "astro:content";
+import BlogPost from "../../layouts/BlogPost.astro";
+
 export async function getStaticPaths() {
-	let posts = await Astro.glob(`../../posts/*.md`);
+	let posts = await getCollection("posts");
 
 	return posts.map((post) => {
 		return {
-			params: { slug: post.frontmatter.slug },
-			props: { post: post },
+			params: { slug: post.data.slug },
+			props: { post },
 		};
 	});
 }
 
 const { post } = Astro.props;
-const { Content } = post;
+const { Content } = await render(post);
 ---
 
-<Content />
-
+<BlogPost content={post.data}>
+	<Content />
+</BlogPost>

src/pages/posts.astro

@@ -1,4 +1,5 @@
 ---
+import { getCollection } from "astro:content";
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
 import Footer from "../components/Footer.astro";
@@ -7,11 +8,12 @@ import ColorScript from "../components/ColorScript.astro";
 
 import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
 
-// Use Astro.glob() to fetch all posts, and then sort them by date.
-const posts = (await Astro.glob("../posts/*.md")).sort(
+let posts = await getCollection("posts");
+
+posts = posts.sort(
 	(a, b) =>
-		new Date(b.frontmatter.updated || b.frontmatter.added).valueOf() -
-		new Date(a.frontmatter.updated || a.frontmatter.added).valueOf()
+		new Date(b.data.updated || b.data.added).valueOf() -
+		new Date(a.data.updated || a.data.added).valueOf(),
 );
 ---
 
@@ -27,7 +29,7 @@ const posts = (await Astro.glob("../posts/*.md")).sort(
 						posts.map(
 							({
 								url,
-								frontmatter: { description, slug, title, tags, added: date },
+								data: { description, slug, title, tags, added: date },
 							}) => <Post {description} {date} {slug} {title} {tags} />
 						)
 					}

src/pages/rss.xml.js

@@ -1,29 +1,31 @@
 import rss from "@astrojs/rss";
+import { getCollection } from "astro:content";
 import { SITE_TITLE, SITE_DESCRIPTION } from "../config";
 
-let posts = Object.values(import.meta.glob("../posts/*.md", { eager: true }));
+let posts = await getCollection("posts");
 
 posts = posts.sort(
 	(a, b) =>
-		new Date(b.frontmatter.updated || b.frontmatter.added).valueOf() -
-		new Date(a.frontmatter.updated || a.frontmatter.added).valueOf()
+		new Date(b.data.updated || b.data.added).valueOf() -
+		new Date(a.data.updated || a.data.added).valueOf()
 );
 
 export const GET = () =>
 	rss({
-		title: SITE_TITLE,
-		description: SITE_DESCRIPTION,
+		title: SITE_TITLE || "",
+		description: SITE_DESCRIPTION || "",
 		site: import.meta.env.SITE,
 		items: posts.map((post) => {
 			return {
-				link: `/post/${post.frontmatter.slug}`,
-				title: post.frontmatter.title,
-				pubDate: post.frontmatter.added,
-				description: post.frontmatter.description,
-				content: post.compiledContent(),
+				link: `/post/${post.data.slug}`,
+				title: post.data.title,
+				pubDate: post.data.added,
+				description: post.data.description,
+				content: post.body,
 				customData: `<updated>${
-					post.frontmatter.updated ? post.frontmatter.updated : ""
+					post.data.updated ? post.data.updated : ""
 				}</updated>`,
 			};
 		}),
+		stylesheet: "/rss-styles.xsl",
 	});

src/pages/tag/[tag].astro

@@ -1,4 +1,5 @@
 ---
+import { getCollection } from "astro:content";
 import BaseHead from "../../components/BaseHead.astro";
 import Header from "../../components/Header.astro";
 import Footer from "../../components/Footer.astro";
@@ -7,11 +8,10 @@ import ColorScript from "../../components/ColorScript.astro";
 
 import { SITE_TITLE, SITE_DESCRIPTION } from "../../config";
 
-// Credit to @rachsmithcodes for helping out my lil ol brain
 export async function getStaticPaths() {
-	let posts = await Astro.glob(`../../posts/*.md`);
+	let posts = await getCollection("posts");
 	const tags = posts.reduce((allTags, post) => {
-		const postTags = post.frontmatter.tags;
+		const postTags = post.data.tags;
 		if (postTags) {
 			postTags.forEach((tag) => {
 				if (!allTags[tag]) {
@@ -35,9 +35,7 @@ const { tag } = Astro.props;
 const { tag: currentTag } = Astro.params;
 
 let sortedPosts = tag.sort(
-	(a, b) =>
-		new Date(b.frontmatter.added).valueOf() -
-		new Date(a.frontmatter.added).valueOf()
+	(a, b) => new Date(b.data.added).valueOf() - new Date(a.data.added).valueOf(),
 );
 ---
 
@@ -54,7 +52,7 @@ let sortedPosts = tag.sort(
 						sortedPosts.map(
 							({
 								url,
-								frontmatter: { description, slug, title, tags, added: date },
+								data: { description, slug, title, tags, added: date },
 							}) => <Post {url} {description} {date} {slug} {title} {tags} />
 						)
 					}

src/posts/hello-world.md

@@ -1,5 +1,4 @@
 ---
-layout: ../layouts/BlogPost.astro
 title: Hello, world!
 slug: hello-world
 description: >-

src/posts/markdown-example.md

@@ -1,5 +1,4 @@
 ---
-layout: ../layouts/BlogPost.astro
 title: Markdown Example
 slug: markdown
 description: >-

src/scripts/getTags.js

@@ -2,7 +2,7 @@ export default function getTags(posts) {
 	// Get tags from all posts
 	const allTags = posts
 		.map((post) => {
-			const postTags = post.frontmatter.tags;
+			const postTags = post.data.tags;
 			let allTags = [];
 
 			if (postTags?.length > 0) {

tina/config.js

@@ -26,7 +26,6 @@ export default defineConfig({
 				path: "src/posts",
 				defaultItem: () => ({
 					title: "New Post",
-					layout: "../layouts/BlogPost.astro",
 					added: new Date(),
 					tags: [],
 				}),
@@ -40,13 +39,6 @@ export default defineConfig({
 					},
 				},
 				fields: [
-					{
-						name: "layout",
-						label: "Layout",
-						type: "string",
-						required: true,
-						searchable: false,
-					},
 					{
 						name: "title",
 						label: "Title",