docs(cookbook): add blog index recipe#8671
Conversation
Adds a runnable demo at /demo/cookbook/blog-index/ that lists three sample posts (.mdx and .md) discovered via import.meta.glob, with frontmatter typing and sort-by-date. Adds the matching cookbook recipe and wires it into the cookbook overview and the menu. Fixes QwikDev#3796.
|
|
|
||
| const postModules = import.meta.glob<PostModule>( | ||
| './posts/*/index.{md,mdx}', | ||
| { eager: true } |
There was a problem hiding this comment.
Could you try it out on v2? eager: true is not needed there iirc.
There was a problem hiding this comment.
If no need for eager:true then could you make a sister PR for V2? We won't be able to resolve it with merge conflicts 🤓
2 participants
What
Adds a "Blog Index" cookbook recipe — how to build a listing page from MDX/MD files using
import.meta.globand Qwik City's frontmatter export. Includes a runnable demo at/demo/cookbook/blog-index/with three sample posts (two.mdx, one.md).Fixes #3796 — the issue asked for a blog index page in the Qwik City demo. maiieul's reply on the issue pointed at the docs ("That'll make it easy for us to add it to the docs!"), so this lands as a cookbook recipe rather than touching the starter apps.
Why
Listing posts from a folder is one of the most common questions for anyone shipping a content site on Qwik City. The
glob-importrecipe covers the general primitive, but it doesn't show the blog-specific pattern: read each module'sfrontmatterexport, sort by date, link to each post's own route.How it works
Each post is its own folder (
posts/<slug>/index.mdx) so directory-based routing turns it into a real, navigable page. The index globs./posts/*/index.{md,mdx}witheager: true— we only need metadata, so deferring the import would just add a microtask for no gain. The frontmatter export comes for free from Qwik City's MDX pipeline (packages/qwik-city/src/buildtime/markdown/rehype.tsre-exports parsed YAML as a namedfrontmatterexport).The demo intentionally uses a string
YYYY-MM-DDdate so lexicographic sort matches chronological sort. Reviewer-facing notes in the recipe call out how to extend with realDateobjects, pagination, or tag filtering.Files:
packages/docs/src/routes/docs/cookbook/blog-index/index.mdx— the recipepackages/docs/src/routes/demo/cookbook/blog-index/— the runnable demo (index.tsx+ 3 posts)packages/docs/src/routes/docs/cookbook/index.mdx— adds the recipe to the overview (alphabetized)packages/docs/src/routes/docs/menu.md— adds the sidebar entry under CookbookTesting
glob-importrecipe and matching itsCodeSandboxusage exactly — samesrcshape, same path-rewriting expectations (packages/docs/src/components/code-sandbox/index.tsxstrips/src/routes/demo→/demo).frontmatteris a named export on compiled MDX/MD modules in this repo by tracingparseFrontmatter→exportFrontmatterinpackages/qwik-city/src/buildtime/markdown/.pnpm fmt/pnpm lintin this environment — pnpm store DB unavailable. Files were authored to match the project's Prettier config (2-space, single-quote, semi, trailing comma es5, print width 100) and the structure ofglob-import/index.tsx.Notes
pnpm api.updatewas not needed.@builder.io/qwik-docsis private; perAGENTS.mdchangesets cover published packages only, so no changeset.Fixes #3796.