CODEWITHSUNDEEP
docusaurus
Tom Brien
Tom Brien

Reputation: 201

Docusaurus v2 - recent blogs list for homepage

in Docusaurus v2 is there a way to generate a list of recent blogs that can then be used to populate a block on the front page (src/pages/index.js)? I'm thinking something similar to how the features list which is then set by <Feature ... />.

In Docusaurus v1, this was accomplashied by the code below but I can't find a simple way to get the list of all blog posts equivalent to MetadataBlog

const MetadataBlog = require("../../core/MetadataBlog.js");
...
<h2>Latest Blog Posts</h2>
<ul>
  {MetadataBlog.slice(0, 5).map((item, index) => (
    <li key={index}>
      <a href={`/blog/${item.path}`}>{item.title}</a>{" "}
        <small>
          {new Date(item.date).toLocaleDateString("en-US", {
            weekday: undefined,
            year: "numeric",
            month: "long",
            day: "numeric"
          })}
        </small>
      </li>
    ))}
</ul>

Having dug around the code a bit, I believe I just want to be able to call the generateBlogPosts junction from @docusaurus/plugin-content-blog/lib/blogUtils.js. Any pointers on how I can call that function from src/pages/index.js? Thanks

Upvotes: 3

Views: 1404

Answers (3)

cheeze
cheeze

Reputation: 577

After a few experimentation, the most viable option that I've found is the use of an intermediate file as described by Sébastien Lorber in this issue.

The steps are to:

  1. Create a custom plugin that extends the original blog plugin.
  2. Disable the original blog plugin and use this new custom one.
  3. Import the JSON file containing the recent articles.

The details are quite verbose - I describe them in my blog.

The article is inspired by this post by Kishan. The main difference between this post and what I did is that Kishan's solution involved replacing the index page with the blog listing page. I prefer not changing the index page and that is what I did in my implementation.

Upvotes: 0

David Radcliffe
David Radcliffe

Reputation: 1491

I was able to hack this together with a slight change to the OP code:

const recentPosts = require("../../.docusaurus/docusaurus-plugin-content-blog/default/blog-post-list-prop-default.json");

<ul>
  {recentPosts.items.slice(0, 5).map((item, index) => (
    <li key={index}>
      <a href={`${item.permalink}`}>{item.title}</a>{" "}
    </li>
  ))}
</ul>

It seems to work, although it depends on internals that might change.

Upvotes: 2

Yangshun Tay
Yangshun Tay

Reputation: 53119

There's no elegant way as of now I'm afraid. You could write your own plugin that is similar to the blog plugin and pull the most recent pages and generate a JSON file to be imported on the index page.

Upvotes: 0

Related Questions