Browse Source

Attempt at Markdown page rendering

Syntax highlighting doesn't work yet.
master
Riyyi 3 days ago
parent
commit
d4c487cd92
  1. 604
      bun.lock
  2. 13
      content.config.ts
  3. 45
      content/articles/first.md
  4. 8
      content/articles/second.md
  5. 14
      nuxt.config.ts
  6. 2
      package.json
  7. 16
      src/components/ExampleComponent.vue
  8. 4
      src/components/Shared/NavMenu.vue
  9. 31
      src/pages/articles/[slug].vue
  10. 18
      src/pages/articles/index.vue

604
bun.lock

File diff suppressed because it is too large Load Diff

13
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"
})
}
})

45
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

8
content/articles/second.md

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

14
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",

2
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": [

16
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>

4
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",

31
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>

18
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>
Loading…
Cancel
Save