Improved tagging

src/pages/hobby/[id].astro

@@ -1,17 +1,18 @@
 ---
-import { getCollection, render } from 'astro:content';
+import {getCollection, render} from 'astro:content';
+import BaseLayout from "../../layouts/BaseLayout.astro";
 // 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: { hobby: hobby },
+        params: {id: hobby.id},
+        props: {hobby: hobby, title: hobby.id},
     }));
 }
 // 2. For your template, you can get the entry directly from the prop
-const { hobby } = Astro.props;
-const { Content } = await render(hobby);
-
+const {hobby} = Astro.props;
+const {Content} = await render(hobby);
 ---
-<h1>{hobby.id}</h1>
-<Content />
+<BaseLayout title={hobby.id}>
+    <Content/>
+</BaseLayout>

src/pages/index.astro

@@ -1,23 +1,27 @@
 ---
-import { getCollection } from 'astro:content';
+import {getCollection} from 'astro:content';
+import BaseLayout from "../layouts/BaseLayout.astro";
+
 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>
+<BaseLayout>
+    <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>
+</BaseLayout>
 
-<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';-->
 
@@ -46,4 +50,3 @@ const hobbies = await getCollection('hobbies');
 <!--&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

@@ -1,17 +1,18 @@
 ---
-import { getCollection, render } from 'astro:content';
+import {getCollection, render} from 'astro:content';
+import BaseLayout from "../../layouts/BaseLayout.astro";
 // 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: { project: project },
+        params: {id: project.id},
+        props: {project: project},
     }));
 }
 // 2. For your template, you can get the entry directly from the prop
-const { project } = Astro.props;
-const { Content } = await render(project);
-
+const {project} = Astro.props;
+const {Content} = await render(project);
 ---
-<h1>{project.id}</h1>
-<Content />
+<BaseLayout title={project.id}>
+    <Content/>
+</BaseLayout>