List Article Mdx

[enri90]

how can i create the article list of the mdx pages?

https://vite-plugin-ssr.com/markdown#react

i created the various pages using the guide now i have to show the list of those pages with one pagination

https://blog.logrocket.com/create-next-js-mdx-blog/
in other guides they use to read the post folder with its mdx and extract the meta data such as publication date, author, and category

Thank you

[brillout]

Added some docs about this: ebd8476 (rendered: https://vite-plugin-ssr.com/markdown#page-list). (CC @jrson83.)

Let me know if you still have questions.

[FlorianCassayre]

An alternative to the metadata.ts file that I have found to work well is to organize your articles following this structure:

• my-article-slug/
  • +Page.tsx: the article content
  • +config.ts: the article metadata (title, etc.)

The +config.ts files are then automatically aggregated using a glob import. With this approach, lazy-transpilation still occurs because the article metadata is decoupled from its content.

The advantages that I find over the recommended approach are:

• Colocation: it's easy to make the connection between the article metadata and its content
• DRY: this eliminates the need of a url attribute, as it is implicitly deduced from the file location
• Efficiency: the article can access its own metadata more efficiently, no need to load the other articles' metadata

[brillout]

globalContext.pages

It's now available with the latest version. Either over pageContext.globalContext.pages or using getGlobalContextAsync().

Example of using it:

vike/test/playground/pages/+onBeforeRender.ts

Lines 5 to 13 in d808eda

	const onBeforeRender: OnBeforeRenderAsync = async (pageContext): ReturnType<OnBeforeRenderAsync> => {
	const { pages } = pageContext.globalContext
	let staticUrls: string[] = Object.values(pages)
	.map((p) => p.route)
	.filter((p) => typeof p === 'string')
	.filter((p) => !p.includes('@'))
	staticUrls.sort(lowerFirst((url) => url.length))
	pageContext.staticUrls = staticUrls
	}

But for the idea to fully come to fruition we'd need #962. I'll try to work on it sooner rather than latter.

[FlorianCassayre]

Perfect, thanks, I'll check this out when I have time.

[brillout]

Done.

https://vike.dev/globalContext
https://vike.dev/globalContext#pages
https://vike.dev/onCreateGlobalContext

That provides all primitives you will/may need to achieve what we discussed.

I'll be updating the guides accordingly (once I'm done with my current priorities, or PR much welcome).

The playground I linked to in my previous comment is updated: it's now accurate and the recommended way.

[brillout]

Updated docs: https://vike.dev/markdown#with-a-custom-setting-eager.

[teddybradford]

Updated docs: https://vike.dev/markdown#with-a-custom-setting-eager.

@brillout Can this work using frontmatter instead of metadata files?

[brillout]

@teddybradford Not sure what you mean — these two approaches aren't complementary, it's either or.

[teddybradford]

If, for example, I wanted to render a list of posts using the frontmatter data inside all my .md files, what's the ideal way to do that with Vike?

[brillout]

See warning at https://vike.dev/markdown#global-metadata