Get latest blog/docs programmatically?

[gouku]

Is there a way to get the latest blog post or docs programmatically? I'd like to show something like "News from our blog" or "Recent updated docs" somewhere on the homepage.

Example in Wordpress.org footer:

[slorber]

Unfortunately we don't have any query engine so that you can easily inject any kind of data to any page

---

A workaround is to extend the blog plugin (#4138 (comment))

In the contentLoaded lifecycle, you can use its data and make it write an extra file in .docusaurus/my-blog-homepage-data.json

And then you can import that file on your homepage:

import blogPostHomePage from '@site/.docusaurus/my-blog-homepage-data.json

[gouku]

I see. Maybe that's why Gatsby uses GraphQL for better flexibility?

But I really like the ease of use of Docusaurus.

[slorber]

I see. Maybe that's why Gatsby uses GraphQL for better flexibility?

Yes that's definitively why they are using GraphQL. Docusaurus doesn't have any "data layer" or query engine, so you have to create static files until we decide to implement something.

[gouku]

Thanks. I've read the comment and tried to implement a plugin but the example seems outdated and didn't seem to work for me. It is a little bit beyond my knowledge. An updated example would be great.

[slorber]

@gouku unfortunately this is not a feature that we officially support yet, and indeed it requires some knowledge and hacking to get this working.

@Josh-Cena is working on a changelog plugin for our own website here, it is an extension of the blog plugin, and the PR is working with a real example: #6414

[sergefdrv]

I would also like to display recent blog posts on the homepage. Is there an easier way to achieve this now?

[slorber]

Unfortunately, it's possible but not easy.

• You can extend the blog plugin and make it create an additional page at / and inject the blog data you need there.
• You can highjack the existing https://docusaurus.io/blog/archive page, swizzle it and make it your homepage at / instead of /blog/archive
• In the future, React Server Components will give us the possibility to "query" plugin data easily from anywhere, track Support React Server Components #9089

[sergefdrv]

@slorber Thanks for quick response! If I understand correctly, the main difficulty is that there's no easy way for the pages component to communicate with the blog component to get the list of posts.

Highjacking the blog/archive page, swizzling it and showing at / seems the easiest option currently available. I think I can figure out how to do swizzling, with the help of Docusaurus docs, but how can I show it at a different path? Is there some example? Or, as in the first suggestion, I'm not sure how to create an additional page at / and show its content on the homepage.

I came across this article, but failed to adapt it to my homepage. I must admit, I'm not that experienced with React. I appreciate any help 🙏

[slorber]

Hey.

Didn't double-check but the article seems correct, you have to use contentLoaded hook to create a route at /.

contentLoaded: async function (data) {
      // Get the 5 latest blog posts
      const recentPosts = [...data.content.blogPosts].splice(0, 5);

      data.actions.addRoute({
        // Add route for the home page
        path: "/",
        exact: true,

        // The component to use for the "Home" page route
        component: "@site/src/components/Home.tsx",

        // These are the props that will be passed to our "Home" page component
        modules: {
          recentPosts: recentPosts.map((post) => ({
            content: {
              __import: true,
              // The markdown file for the blog post will be loaded by webpack
              path: post.metadata.source,
              query: {
                truncated: true,
              },
            },
          })),
        },
      });

This integration will import a list of "blog post excerpts" (what is above the truncate marker) and inject it to the @site/src/components/Home.tsx as a recentPosts prop.

Maybe it's not what you try to do, or maybe you don't want the excerpt but just some metadata/frontmatter about the post, ihn which case you should rather read the api doc and the example we provide here: https://docusaurus.io/docs/api/plugin-methods/lifecycle-apis#contentLoaded

It's not the most intuitive api but it should work.

In case it wasn't clear: now that the blog plug creates your homepage, you need to delete src/pages/index.js, otherwise there will be a conflict. Your homepage component is now src/components/Home.tsx

[slorber]

Please find here a complete example of displaying recent blog posts on your homepage:
#4138

cc @gouku @sergefdrv

[sergefdrv]

@slorber Is there an easier and cleaner way to do this in the most recent version of Docusaurus?

[slorber]

Unfortunately no, the real solution would be to implement React Server Components

[sergefdrv]

What do you think of this approach?

[slorber]

@sergefdrv yes that also works, although it's not ideal in terms of architecture but that's ok and a good enough workaround until we support React Server Components

[sergefdrv]

So we ended up following that approach, with some improvements: https://github.com/replica-io/replica-io.github.io/pull/37/files

[albertcito]

Why is it so difficult to do it? Is there not a way to have a global hook with the last X blog posts?

[slorber]

No because otherwise this means that all the blog posts data must be available to all pages at any time.

If your blog has 1000 pages, then this could represent megabytes of MDX/JS content that needs to be loaded before React could run and the page could become interactive. We can't make this data globally available without penalizing the performance of all the pages (even those that do not display blog posts).

The solution is going to be React Server Components, but we aren't there yet: #9089

[sergefdrv]

FWIW, we implemented this by making the meta-data of all posts globally available without the post content.

[slorber]

Yes that's a good workaround until we provide a better way with RSCs, and gives you full control over which data you need to be available globally (the smaller the better).

[albertcito]

I have been working with this library (it's Vue), but it looks like it's similar to this project. It has a search option, the user can query the docs; it's very powerful and great. For instance, here is how they use it: https://ui.nuxt.com/