Attempt at Markdown page rendering

Syntax highlighting doesn't work yet.

content.config.ts

@@ -0,0 +1,13 @@
+import { defineContentConfig, defineCollection } from '@nuxt/content'
+
+// Lookup resolved from path: rootDir/content
+// see: https://github.com/nuxt/content/issues/3161
+
+export default defineContentConfig({
+  collections: {
+    content: defineCollection({
+      type: "page",
+      source: "**/*.md"
+    })
+  }
+})

content/articles/first.md

@@ -0,0 +1,45 @@
+---
+title: "My First Blog Post"
+description: "This is a test article."
+---
+
+# Hello World
+
+This is a test article.
+
+## Component Rendering
+
+::ExampleComponent
+#namedslot
+This is a Named Slot
+#default
+This is the Default Slot
+::
+
+### Testing Some Markdown Features
+
+A link: [website-vue](https://github.com/riyyi/website-vue)
+
+A codeblock:
+```js [file.js]{2} meta-info=val
+export default () => {
+console.log('Code block')
+}
+```
+
+```cpp
+int i = 0;
+```
+
+```php
+protected static $router;
+$path = parse_url($_SERVER['REQUEST_URI'])['path'];
+```
+
+Inline `hightlight`.
+
+`const code: string = 'highlighted code inline'`{lang="ts"}
+
+- An
+- Unordered
+- List

content/articles/second.md

@@ -0,0 +1,8 @@
+---
+title: "My Second Blog Post"
+description: "This is another article."
+---
+
+# Test!
+
+This is another article.

nuxt.config.ts

@@ -3,6 +3,19 @@ import Aura from "@primevue/themes/aura";
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
 	compatibilityDate: "2024-11-01",
+	content: {
+		build: {
+			markdown: {
+				highlight: {
+					theme: "github-light",
+					langs: [
+						// https://github.com/shikijs/shiki/blob/main/packages/langs/package.json
+						"c", "cpp", "css", "html", "js", "json", "lua", "md", "mdc", "php", "shell", "ts", "vue", "yaml"
+					]
+				}
+			}
+		}
+	},
 	css: [
 		"primeicons/primeicons.css",
 		"~/assets/css/style.css"
@@ -12,6 +25,7 @@ export default defineNuxtConfig({
 		public: "../public"
 	},
 	modules: [
+		"@nuxt/content",
 		"@nuxt/eslint",
 		"@pinia/nuxt",
 		"@primevue/nuxt-module",

package.json

@@ -23,11 +23,13 @@
 		"zod": "^3.23.8"
 	},
 	"devDependencies": {
+		"@nuxt/content": "^3.2.2",
 		"@nuxt/eslint": "^0.7.1",
 		"@primevue/nuxt-module": "^4.2.3",
 		"@types/bun": "latest",
 		"@vue/language-server": "^2.1.10",
 		"@vue/typescript-plugin": "^2.1.10",
+		"shiki": "2.5.0",
 		"typescript": "^5.7.2"
 	},
 	"trustedDependencies": [

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>