Using Routing and createContentLoader

[Karlstens]

Referring to these two articles;

https://vitepress.dev/guide/data-loading#createcontentloader

https://vitepress.dev/guide/routing#paths-loader-file

I am using createContentLoader to generate a list of all my articles, which is working well importing data as posts, and then a v-for to show all my posts frontmatter/lastupdated dynamically. Vue works really well, and I've even built toggle filters, very cool!

<script setup>
import { data as posts } from '../../docs/.vitepress/theme/posts.data.mjs'
...
</script>

<div v-for="post in posts" :key="post.url" class="post">
...

I am currently testing routing and the ability to generate markdown files;

docs\shapes[shape].paths.js

// docs\shapes\[square].md
// docs\shapes\[square].paths.js
export default {
	paths() {
		return [
			{
				params: {
					shape: "square",
					title: "Square",
					myType: "Woo",
					status: "Published",
				},
				content: "Normal Square content goes here",
			},
			{
				params: {
					shape: "large-square",
					title: "Large Square",
					myType: "Yay",
					status: "Draft",
				},
				content: "# Large Square Content",
			},
			{
				params: {
					shape: "rectangle",
					title: "Rectangle",
					myType: "Example Type",
					status: "Dynamic",
				},
				get content() {
					return `
# ${this.params.title}
				
## My Subheading Lol  
## And another  

Shape: ${this.params.shape}
Type: ${this.params.myType}
Lots of rectangular content for rectangles getting rekt here.`;
				},
			},
		];
	},
};

//http://.../shapes/square.html
//http://.../shapes/large-square.html
//http://.../shapes/rectangle.html

docs\shapes[shape].md

---
{ "myData": "myDataYay" }
---

# Static Heading Example

<!-- @content -->

## More Static Content

Static text goes here.

And those pages load and generate as expected, and appear in navigation. The @content technique also places entries in the Sidebar which is something I was also struggling with beforehand, so very glad to have found it. 🥳

Where I am now struggling, is I noticed that createContentLoader is failing to collect the Routing generated pages data and supply them in the posts object. Interestingly enough, posts does contain [shape].md which obviously links to a 404, but the generated child pages, in my case, rectangle.md, square.md and large-square.md are simply not listed.

Is there a trick to get createContentLoader and routing paths.js working together?

[PizzaConsole]

Hey @Karlstens here is what I did. I wanted to get around the Path based routing (I like to organize my blog posts by date but I do not want them routed in the blog by date) So I came up with this and it seems to work. (it's not perfect)

.
├── .vitepress
│   ├── config.ts
│   └── theme
│       └── composables
│           └── posts.data.ts
├── pages
│   └── blog
│       └── posts
│           ├── [slug].md
│           └── [slug].paths.ts
└── posts
    └── 2022
        └── 01
            ├── post01.md
            └── post02.md

• I have set srcDir: 'pages'

posts.data.ts

const pattern = `../posts/**/*.md`;

const data = [] as Post[];
export { data };

export default createContentLoader(pattern, {
  excerpt: true,
  transform(raw) {
    return raw
      .map(({ url, frontmatter, excerpt }) => ({
        title: frontmatter.title,
        author: frontmatter.author ?? blogConfig?.defaultAuthor ?? 'Unknown',
        url: frontmatter.url ?? url,
        excerpt,
        tags: formatTags(frontmatter.tags),
        category: frontmatter.category ?? blogConfig?.defaultCategory ?? 'Article',
        date: formatDate(frontmatter.date),
      }))
      .sort((a, b) => b.date.time - a.date.time);
  },
});```

### [slug].paths.ts

```ts
import fs from 'fs';
import path from 'path';

export default {
  paths() {
    return fs
      .readdirSync('posts', {
        recursive: true,
      })
      .filter((file) => file.endsWith('.md'))
      .map((file_name) => {
        const slug = path.parse(file_name).name;
        const content = fs.readFileSync(`posts/${file_name}`, 'utf-8');
        // console.log('generating path', slug);
        return { params: { slug }, content };
      });
  },
};

[slug].md

<!-- @content -->

post01.md

---
date: 2022-01-28
title: 'An Upgrade - First Born'
url: /blog/posts/an-upgrade
category: Food
tags: food, pizza
---