Update examples for v5 (#12588)

* Revert "chore: downgrade examples to not use beta releases (#12557)" This reverts commit 6031962. * Update blog template for new content collections * Update portfolio template for new content collections * Update starlog template for new content collections
withastro · Dec 3, 2024 · 3a144b1 · 3a144b1
1 parent 1dc8f5e
commit 3a144b1
Show file tree

Hide file tree

Showing 31 changed files with 143 additions and 832 deletions.
diff --git a/examples/basics/package.json b/examples/basics/package.json
@@ -10,6 +10,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.16.16"
+    "astro": "^5.0.0-beta.12"
   }
 }
diff --git a/examples/blog/package.json b/examples/blog/package.json
@@ -10,9 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.9",
+    "@astrojs/mdx": "^4.0.0-beta.5",
     "@astrojs/rss": "^4.0.9",
     "@astrojs/sitemap": "^3.2.1",
-    "astro": "^4.16.16"
+    "astro": "^5.0.0-beta.12"
   }
 }
diff --git a/examples/blog/src/content/config.ts → examples/blog/src/content.config.ts b/examples/blog/src/content/config.ts → examples/blog/src/content.config.ts
@@ -1,7 +1,9 @@
+import { glob } from 'astro/loaders';
 import { defineCollection, z } from 'astro:content';
 
 const blog = defineCollection({
-	type: 'content',
+	// Load Markdown and MDX files in the `src/content/blog/` directory.
+	loader: glob({ base: './src/content/blog', pattern: '**/*.{md,mdx}' }),
 	// Type-check frontmatter using a schema
 	schema: z.object({
 		title: z.string(),

diff --git a/examples/blog/src/pages/blog/[...slug].astro b/examples/blog/src/pages/blog/[...slug].astro
@@ -1,18 +1,19 @@
 ---
 import { type CollectionEntry, getCollection } from 'astro:content';
 import BlogPost from '../../layouts/BlogPost.astro';
+import { render } from 'astro:content';
 
 export async function getStaticPaths() {
 	const posts = await getCollection('blog');
 	return posts.map((post) => ({
-		params: { slug: post.slug },
+		params: { slug: post.id },
 		props: post,
 	}));
 }
 type Props = CollectionEntry<'blog'>;
 
 const post = Astro.props;
-const { Content } = await post.render();
+const { Content } = await render(post);
 ---
 
 <BlogPost {...post.data}>

diff --git a/examples/blog/src/pages/blog/index.astro b/examples/blog/src/pages/blog/index.astro
@@ -93,7 +93,7 @@ const posts = (await getCollection('blog')).sort(
 					{
 						posts.map((post) => (
 							<li>
-								<a href={`/blog/${post.slug}/`}>
+								<a href={`/blog/${post.id}/`}>
 									<img width={720} height={360} src={post.data.heroImage} alt="" />
 									<h4 class="title">{post.data.title}</h4>
 									<p class="date">

diff --git a/examples/blog/src/pages/rss.xml.js b/examples/blog/src/pages/rss.xml.js
@@ -10,7 +10,7 @@ export async function GET(context) {
 		site: context.site,
 		items: posts.map((post) => ({
 			...post.data,
-			link: `/blog/${post.slug}/`,
+			link: `/blog/${post.id}/`,
 		})),
 	});
 }
diff --git a/examples/component/package.json b/examples/component/package.json
@@ -15,7 +15,7 @@
   ],
   "scripts": {},
   "devDependencies": {
-    "astro": "^4.16.16"
+    "astro": "^5.0.0-beta.12"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

diff --git a/examples/framework-alpine/package.json b/examples/framework-alpine/package.json
@@ -13,6 +13,6 @@
     "@astrojs/alpinejs": "^0.4.0",
     "@types/alpinejs": "^3.13.10",
     "alpinejs": "^3.14.3",
-    "astro": "^4.16.16"
+    "astro": "^5.0.0-beta.12"
   }
 }
diff --git a/examples/framework-multiple/package.json b/examples/framework-multiple/package.json
@@ -10,14 +10,14 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/preact": "^3.5.4",
-    "@astrojs/react": "^3.6.3",
-    "@astrojs/solid-js": "^4.4.4",
-    "@astrojs/svelte": "^6.0.2",
-    "@astrojs/vue": "^4.5.3",
+    "@astrojs/preact": "^4.0.0-beta.1",
+    "@astrojs/react": "^4.0.0-beta.2",
+    "@astrojs/solid-js": "^5.0.0-beta.1",
+    "@astrojs/svelte": "^7.0.0-beta.1",
+    "@astrojs/vue": "^5.0.0-beta.3",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "astro": "^4.16.16",
+    "astro": "^5.0.0-beta.12",
     "preact": "^10.24.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/examples/framework-preact/package.json b/examples/framework-preact/package.json
@@ -10,9 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/preact": "^3.5.4",
+    "@astrojs/preact": "^4.0.0-beta.1",
     "@preact/signals": "^1.3.0",
-    "astro": "^4.16.16",
+    "astro": "^5.0.0-beta.12",
     "preact": "^10.24.3"
   }
 }
diff --git a/examples/framework-react/package.json b/examples/framework-react/package.json
@@ -10,10 +10,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/react": "^3.6.3",
+    "@astrojs/react": "^4.0.0-beta.2",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
-    "astro": "^4.16.16",
+    "astro": "^5.0.0-beta.12",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   }

diff --git a/examples/framework-solid/package.json b/examples/framework-solid/package.json
@@ -10,8 +10,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/solid-js": "^4.4.4",
-    "astro": "^4.16.16",
+    "@astrojs/solid-js": "^5.0.0-beta.1",
+    "astro": "^5.0.0-beta.12",
     "solid-js": "^1.9.3"
   }
 }
diff --git a/examples/framework-svelte/package.json b/examples/framework-svelte/package.json
@@ -10,8 +10,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/svelte": "^6.0.2",
-    "astro": "^4.16.16",
+    "@astrojs/svelte": "^7.0.0-beta.1",
+    "astro": "^5.0.0-beta.12",
     "svelte": "^5.1.16"
   }
 }
diff --git a/examples/framework-vue/package.json b/examples/framework-vue/package.json
@@ -10,8 +10,8 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/vue": "^4.5.3",
-    "astro": "^4.16.16",
+    "@astrojs/vue": "^5.0.0-beta.3",
+    "astro": "^5.0.0-beta.12",
     "vue": "^3.5.12"
   }
 }
diff --git a/examples/hackernews/package.json b/examples/hackernews/package.json
@@ -11,6 +11,6 @@
   },
   "dependencies": {
     "@astrojs/node": "^9.0.0-alpha.1",
-    "astro": "^4.16.16"
+    "astro": "^5.0.0-beta.12"
   }
 }
diff --git a/examples/integration/package.json b/examples/integration/package.json
@@ -15,7 +15,7 @@
   ],
   "scripts": {},
   "devDependencies": {
-    "astro": "^4.16.16"
+    "astro": "^5.0.0-beta.12"
   },
   "peerDependencies": {
     "astro": "^4.0.0"

diff --git a/examples/minimal/package.json b/examples/minimal/package.json
@@ -10,6 +10,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.16.16"
+    "astro": "^5.0.0-beta.12"
   }
 }
diff --git a/examples/portfolio/package.json b/examples/portfolio/package.json
@@ -10,6 +10,6 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.16.16"
+    "astro": "^5.0.0-beta.12"
   }
 }
diff --git a/examples/portfolio/src/components/PortfolioPreview.astro b/examples/portfolio/src/components/PortfolioPreview.astro
@@ -5,10 +5,10 @@ interface Props {
 	project: CollectionEntry<'work'>;
 }
 
-const { data, slug } = Astro.props.project;
+const { data, id } = Astro.props.project;
 ---
 
-<a class="card" href={`/work/${slug}`}>
+<a class="card" href={`/work/${id}`}>
 	<span class="title">{data.title}</span>
 	<img src={data.img} alt={data.img_alt || ''} loading="lazy" decoding="async" />
 </a>

diff --git a/examples/portfolio/src/content.config.ts b/examples/portfolio/src/content.config.ts
@@ -1,8 +1,10 @@
+import { glob } from 'astro/loaders';
 import { defineCollection, z } from 'astro:content';
 
 export const collections = {
 	work: defineCollection({
-		type: 'content',
+		// Load Markdown files in the src/content/work directory.
+		loader: glob({ base: './src/content/work', pattern: '**/*.md', }),
 		schema: z.object({
 			title: z.string(),
 			description: z.string(),

diff --git a/examples/portfolio/src/pages/work/[...slug].astro b/examples/portfolio/src/pages/work/[...slug].astro
@@ -7,6 +7,7 @@ import ContactCTA from '../../components/ContactCTA.astro';
 import Hero from '../../components/Hero.astro';
 import Icon from '../../components/Icon.astro';
 import Pill from '../../components/Pill.astro';
+import { render } from 'astro:content';
 
 interface Props {
 	entry: CollectionEntry<'work'>;
@@ -18,13 +19,13 @@ interface Props {
 export async function getStaticPaths() {
 	const work = await getCollection('work');
 	return work.map((entry) => ({
-		params: { slug: entry.slug },
+		params: { slug: entry.id },
 		props: { entry },
 	}));
 }
 
 const { entry } = Astro.props;
-const { Content } = await entry.render();
+const { Content } = await render(entry);
 ---
 
 <BaseLayout title={entry.data.title} description={entry.data.description}>

diff --git a/examples/ssr/package.json b/examples/ssr/package.json
@@ -11,9 +11,9 @@
     "server": "node dist/server/entry.mjs"
   },
   "dependencies": {
-    "@astrojs/node": "^8.3.4",
-    "@astrojs/svelte": "^6.0.2",
-    "astro": "^4.16.16",
+    "@astrojs/node": "^9.0.0-alpha.1",
+    "@astrojs/svelte": "^7.0.0-beta.1",
+    "astro": "^5.0.0-beta.12",
     "svelte": "^5.1.16"
   }
 }
diff --git a/examples/starlog/src/content.config.ts b/examples/starlog/src/content.config.ts
@@ -1,6 +1,9 @@
+import { glob } from 'astro/loaders';
 import { defineCollection, z } from 'astro:content';
 
 const releases = defineCollection({
+	// Load Markdown files in the src/content/releases directory.
+	loader: glob({ base: './src/content/releases', pattern: '**/*.md' }),
 	// Type-check frontmatter using a schema
 	schema: ({ image }) =>
 		z.object({

diff --git a/examples/starlog/src/pages/index.astro b/examples/starlog/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import FormattedDate from '../components/FormattedDate.astro';
 import Layout from '../layouts/IndexLayout.astro';
 
@@ -17,14 +17,14 @@ posts.sort((a, b) => +b.data.date - +a.data.date);
 					<li class="post">
 						<div class="version_wrapper">
 							<div class="version_info">
-								<a href={`/releases/${post.slug}`}>
+								<a href={`/releases/${post.id}`}>
 									<div class="version_number">{post.data.versionNumber}</div>
 									<FormattedDate class="date" date={post.data.date} />
 								</a>
 							</div>
 						</div>
 						<div class="content">
-							{post.render().then(({ Content }) => (
+							{render(post).then(({ Content }) => (
 								<Content />
 							))}
 						</div>

diff --git a/examples/starlog/src/pages/releases/[slug].astro b/examples/starlog/src/pages/releases/[slug].astro
@@ -1,19 +1,19 @@
 ---
-import { getCollection } from 'astro:content';
+import { getCollection, render } from 'astro:content';
 import Layout from '../../layouts/PostLayout.astro';
 
 export async function getStaticPaths() {
 	const releases = await getCollection('releases');
 
 	return releases.map((release) => ({
-		params: { slug: release.slug },
+		params: { slug: release.id },
 		props: { release },
 	}));
 }
 
 const { release } = Astro.props;
 
-const { Content } = await release.render();
+const { Content } = await render(release);
 ---
 
 <Layout {release}>

diff --git a/examples/toolbar-app/package.json b/examples/toolbar-app/package.json
@@ -15,6 +15,6 @@
     "./app": "./dist/app.js"
   },
   "devDependencies": {
-    "astro": "^4.16.16"
+    "astro": "^5.0.0-beta.12"
   }
 }
diff --git a/examples/with-markdoc/package.json b/examples/with-markdoc/package.json
@@ -10,7 +10,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/markdoc": "^0.11.5",
-    "astro": "^4.16.16"
+    "@astrojs/markdoc": "^0.12.0-beta.1",
+    "astro": "^5.0.0-beta.12"
   }
 }
diff --git a/examples/with-mdx/package.json b/examples/with-mdx/package.json
@@ -10,9 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.9",
-    "@astrojs/preact": "^3.5.4",
-    "astro": "^4.16.16",
+    "@astrojs/mdx": "^4.0.0-beta.5",
+    "@astrojs/preact": "^4.0.0-beta.1",
+    "astro": "^5.0.0-beta.12",
     "preact": "^10.24.3"
   }
 }
diff --git a/examples/with-nanostores/package.json b/examples/with-nanostores/package.json
@@ -10,9 +10,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/preact": "^3.5.4",
+    "@astrojs/preact": "^4.0.0-beta.1",
     "@nanostores/preact": "^0.5.2",
-    "astro": "^4.16.16",
+    "astro": "^5.0.0-beta.12",
     "nanostores": "^0.11.3",
     "preact": "^10.24.3"
   }

diff --git a/examples/with-tailwindcss/package.json b/examples/with-tailwindcss/package.json
@@ -10,10 +10,10 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/mdx": "^3.1.9",
+    "@astrojs/mdx": "^4.0.0-beta.5",
     "@astrojs/tailwind": "^5.1.2",
     "@types/canvas-confetti": "^1.6.4",
-    "astro": "^4.16.16",
+    "astro": "^5.0.0-beta.12",
     "autoprefixer": "^10.4.20",
     "canvas-confetti": "^1.9.3",
     "postcss": "^8.4.49",