Iterate over the blog posts at build time?

[ilg-ul]

I checked the plugin-content-blog documentation, but it seems focused more on configuration than on run-time functionality.

Is it possible, at build time, to iterate over the list of blog posts, and filter a selection based on categories?

I have the following code from Jekyll, in markdown with Liquid engine tags, which I would like to translate to Docusaurus/React:

---
title: The xPack Docus Mock releases
date: 2020-09-28 17:53:00 +0300
---

{% for post in site.posts %}{% if post.categories contains "releases" %}{% if post.categories contains "docus-mock" %}
* [{{ post.title }}]({{ site.baseurl }}{{ post.url }}) [(download)]({{ post.download_url }}){% endif %}{% endif %}{% endfor %}

[ilg-ul]

@pranabdas, any trick that could solve this too? I think it is the last major hiccup on my migration path.

[pranabdas]

Seems not trivial to me. You may look into this discussion #5547

[ilg-ul]

If I got it right, that discussion is related to filtering blog posts dynamically, on the client.

My question relates to accessing the collection of blog posts statically, at site build time, which should be easier. But I don't know how to get the array of blog posts.

[slorber]

It's unclear to me if you want to do something at build time or runtime because both are mentioned.

Also unclear to me what should be the outcome of this filtering. Giving us the URL of your existing site as an example would help to understand.

You give us some liquid template (which we don't particularly know) and let us try to infer what the behavior should be without additional context, that's a bit rough 😅

Please give us all the details, show us the live site URL, explain to us what this liquid code does, what's the behavior you want on each Docusaurus page etc... Be exhaustive and help us help you.

[ilg-ul]

Sorry if my question was confusing :-(

It's unclear to me if you want to do something at build time or runtime

At build time, as mentioned in the subject.

Also unclear to me what should be the outcome of this filtering.

In my particular case, a page with links to all release blog posts. The blog posts may also include other announcements, which I might want listed in a different page.

Giving us the URL of your existing site as an example would help to understand.

Sure. Here is such a page:

• https://xpack.github.io/dev-tools/arm-none-eabi-gcc/releases/

The page was generated by the following code:

• https://raw.githubusercontent.com/xpack/web-jekyll/develop/pages/dev-tools/arm-none-eabi-gcc/releases.md

You give us some liquid template (which we don't particularly know) and let us try to infer what the behavior should be without additional context, that's a bit rough

My bad. I assumed that the liquid template syntax is self-explanatory. :-(

After indenting, the code looks like this:

{% for post in site.posts %}
	{% if post.categories contains "releases" %}
		{% if post.categories contains "arm-none-eabi-gcc" %}
			* [{{ post.title }}]({{ site.baseurl }}{{ post.url }}) [(download)]({{ post.download_url }})
		{% endif %}
	{% endif %}
{% endfor %}

The point is that Jekyll parses the markdown pages and builds several lists, for pages, for blog posts, tags, categories, etc.

The code iterates over the site posts and keeps only those with a category of release and arm-none-eabi-gcc (which is the current sub-web, since the web includes 19 sub-webs, for multiple tools).

I guess Docusaurus similarly parses the files below the blog folder, and creates an array with all posts. Unfortunately I could not find in the blog API a call to return this array. I am aware that my knowledge of React is poor, and I might have missed it.

Please give us all the details, show us the live site URL, explain to us what this liquid code does, what's the behavior you want on each Docusaurus page etc... Be exhaustive and help us help you.

@slorber, if the above explanations are not enough, and you need more details, please let me know.

Thank you in advance for your help.

[slorber]

Currently, a Docusaurus blog creates various pages:

• paginated list of all blog posts: https://docusaurus.io/blog
• post: https://docusaurus.io/blog/releases/2.3
• archive: https://docusaurus.io/blog/archive
• tag list: https://docusaurus.io/blog/tags
• paginated list of blog posts having a specific tag: https://docusaurus.io/blog/tags/adoption

If you want to create additional pages with the blog plugin, you'll have to extend it.
We don't have a good way to do that currently but I've explained how this can be done here: #4138 (comment) (you can enhance the contentLoaded plugin lifecycle and make it create additional pages)

We also don't have a good way to interleave the data of 2 plugins (ie displaying docs/blog in the same page). I plan to have a much more flexible API based on React Server Components later but we don't have that yet.

The easiest is probably one of those:

• Customize the archive page with swizzle: it already receives the list of blog posts so you can filter it if you want.
• Create and customize the /blog/tags/arm-none-eabi-gcc page
• Create a 2nd instance of the blog plugin for these items. It's what we do with our changelog: https://docusaurus.io/changelog
• Generate the static list you need at build time with a pre-processing script. You can then import that list in any Docusaurus page

I don't see any other option atm

[ilg-ul]

Thank you, Sébastien @slorber, I retain that currently there is no immediate solution, but you provided several ideas worth investigating.

[ilg-ul]

Hello Sébastien @slorber,

Now that 3.0 is out (which is great news!), I would like to resume work on this issue, and find a solution to iterate over the blog posts at build time.

I already have a functional draft site, with some posts:

• https://cronica-it.github.io/preview/blog

Some of the posts have additional front matter properties, in fact some dates to be used for a chronology of events, for example:

• https://raw.githubusercontent.com/cronica-it/preview/master/website/blog/2023-10-30-computere-pentru-licee.md

I would like to display, in the home page, an ordered table with links to the posts that have the eventDate property.

For this I would need to iterate over the list of posts, check the front matter for this property, and generate the table component (each event is shown on a raw, with a date and a link to the actual post).

The concrete question is: Does the new version of the blog plugin provide a way to get the list of posts? If not, what alternate solutions do you recommend?

[johnnyreilly]

I wonder if the information in this blog post might prove useful to you: https://johnnyreilly.com/blog-archive-for-docusaurus

[ilg-ul]

Thank you John, I'll take a look.

At first sight it seems to require quite a lot of work. Does it work with Docusaurus 3 too?

If Docusaurus already parses the list of posts at build time, I wonder why it does not keep a persistent array, to be made available to other pages?