[📖] Add a blog index page with all blog posts to the qwik city demo

[adamgen]

Suggestion

It's not documentation per se but rather a change in the demo qwik city app.

When writing blogs with mdx, we need an index or category page to show blog post lists.

Problem

How to create such a page needs to be clarified, especially if you're unfamiliar with Vite's import.meta.glob. The current state may lead to uncertainty and wasted time, or even abandonment in the worst cases.

Resolution

Add a blog/index.ts with a few mdx blog posts that implement the import.meta.glob to the features section of the qwik city demo app.

Discussion

I would add:

1. Three three blog posts, two mdx, and one md
2. An index file that'll glob and order them by published date - not sure about how to implement this yet
3. A JSX component that will render in the mdx files.

[zanettin]

Hi @adamgen 👋
Thanks a lot for your inputs 🙏 i really like your ideas! what do you think about enhancing the existing docs page with an example of how to create the landing page / overview page using the import.meta.glob vite helper?
how to import components into an mdx file is already covered in the docs. do you think it misses smth?
would really love to see a PR covering the mentioned points on the docs page if you have some time 🙏
thanks once again and have a nice day 😃

[adamgen]

Thank you for the feedback 😃

I'd like to see both features not only in the docs but in the example app as well. Do you think it's redundant?

[appinteractive]

any updates on that issue? Im still struggeling with that one, I do it now via a index.tsx where I parse all requested mdx files into raw frontmatter, text and html but am loosing the abillity to use components inside the mdx files.

[fabian-hiller]

This is how I implemented it for Valibot's blog. See the source code here: https://github.com/fabian-hiller/valibot/blob/main/website/src/routes/blog/index.tsx

[maiieul]

Really cool @fabian-hiller thanks for sharing! That'll make it easy for us to add it to the docs!