Attempt at Markdown page rendering

Syntax highlighting doesn't work yet.

src/components/ExampleComponent.vue

@@ -0,0 +1,16 @@
+<template>
+	<div>
+		<h2 v-if="$slots.namedslot">
+			<slot name="namedslot" mdc-unwrap="p" />
+		</h2>
+		<h2 v-else>Broken Slot</h2>
+
+		<slot mdc-unwrap="p" />
+	</div>
+</template>
+
+<script setup lang="ts">
+ defineProps({
+	 namedslot: String,
+ });
+</script>

src/components/Shared/NavMenu.vue

@@ -40,9 +40,9 @@ const items = ref([
         }
     },
     {
-        label: "About",
+        label: "Articles",
         icon: "pi pi-link",
-		route: "#"
+		route: "/articles"
     },
     {
         label: "Service",

src/pages/articles/[slug].vue

@@ -0,0 +1,31 @@
+<template>
+	<div>
+		<template v-if="article">
+			<h1>{{ article.title }}</h1>
+			<p>{{ article.description }}</p>
+			<ContentRenderer :value="article" />
+		</template>
+		<template v-else>
+			<h1>Page Not Found</h1>
+			<p>Oops! The content you're looking for doesn't exist.</p>
+		</template>
+	</div>
+</template>
+
+<script setup lang="ts">
+ const { params } = useRoute();
+
+ console.log(params);
+
+ const { data: article } = await useAsyncData(
+	 `article-${params.slug}`,
+	 () => queryCollection("content").path("/articles/" + params.slug).first()
+ );
+
+ useSeoMeta({
+	 title: article.value?.title,
+	 description: article.value?.description
+ })
+
+ console.log(article);
+</script>

src/pages/articles/index.vue

@@ -0,0 +1,18 @@
+<template>
+	<div>
+		<h1>Articles</h1>
+		<ul>
+			<li v-for="article in articles" :key="article._path">
+				<NuxtLink :to="article.path">{{ article.title }}</NuxtLink>
+			</li>
+		</ul>
+
+		<div v-for="article in articles" :key="article._path">
+			<pre>{{ article }}</pre>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+ const { data: articles } = await useAsyncData("articles", () => queryCollection("content").all())
+</script>