Example e2e

src/pages/hobby/[id].astro

@@ -0,0 +1,17 @@
+---
+import { getCollection, render } from 'astro:content';
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+    const hobbies = await getCollection('hobbies');
+    return hobbies.map(hobby => ({
+        params: { id: hobby.id },
+        props: { post: hobby },
+    }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { hobby } = Astro.props;
+const { Content } = await render(hobby);
+
+---
+<h1>{hobby.id}</h1>
+<Content />

src/pages/index.astro

@@ -0,0 +1,49 @@
+---
+import { getCollection } from 'astro:content';
+const projects = await getCollection('projects');
+const hobbies = await getCollection('hobbies');
+---
+<h1>My Projects</h1>
+<ul>
+    {projects.map(project => (
+            <li><a href={`/project/${project.id}`}>{project.id}</a></li>
+    ))}
+</ul>
+
+<h1>My Hobbies</h1>
+<ul>
+    {hobbies.map(project => (
+            <li><a href={`/hobby/${project.id}`}>{project.id}</a></li>
+    ))}
+</ul>
+
+<!--import BaseLayout from "../layouts/BaseLayout.astro";-->
+<!--import { getCollection, render } from 'astro:content';-->
+<!--import type { CollectionEntry } from 'astro:content';-->
+
+<!--// 1. Generate a new path for every collection entry-->
+<!--export async function getStaticPaths() {-->
+<!--	const project = await getCollection('project');-->
+<!--	console.log(project)-->
+<!--	return project.map(post => ({-->
+<!--		params: { slug: post.slug }, props: { post },-->
+<!--	}));-->
+<!--}-->
+<!--// 2. For your template, you can get the entry directly from the prop-->
+
+<!--const { post } = Astro.props;-->
+<!--const { Content } = await render(post);-->
+<!--// const { Content } = await entry.render();-->
+<!-- -&#45;&#45;-->
+<!--<BaseLayout pageTitle="">-->
+<!--&lt;!&ndash;	<Baseout pageTitle={entry.data.title}>&ndash;&gt;-->
+<!--&lt;!&ndash;	<h1 class="text-2xl font-bold pt-10">{entry.data.title}</h1>&ndash;&gt;-->
+<!--&lt;!&ndash;	<p class="text-sm py-2">{entry.data.date}</p>&ndash;&gt;-->
+<!--&lt;!&ndash;	<h2 class="font-bold py-2">Tags</h2>&ndash;&gt;-->
+<!--&lt;!&ndash;	&lt;!&ndash;<ul class="list-disc list-inside py-2">&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;	&lt;!&ndash;	{entry.data.tags?.map((tag) => <li><a href={`/tags/${tag}`}>{tag}</a></li>)}&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;	&lt;!&ndash;</ul>&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;	<div class="prose">&ndash;&gt;-->
+<!--&lt;!&ndash;		&lt;!&ndash;<Content />&ndash;&gt;&ndash;&gt;-->
+<!--&lt;!&ndash;	</div>&ndash;&gt;-->
+<!--</BaseLayout>-->

src/pages/project/[id].astro

@@ -0,0 +1,17 @@
+---
+import { getCollection, render } from 'astro:content';
+// 1. Generate a new path for every collection entry
+export async function getStaticPaths() {
+    const projects = await getCollection('projects');
+    return projects.map(project => ({
+        params: { id: project.id },
+        props: { post: project },
+    }));
+}
+// 2. For your template, you can get the entry directly from the prop
+const { project } = Astro.props;
+const { Content } = await render(project);
+
+---
+<h1>{project.id}</h1>
+<Content />