Accessing available blog routes within swizzled component

[SheezZarR]

Hello! Thanks a lot for the docusaurus project! It awesome and highly customizable to my surprise :) I have failed to spot simillar questing to mine so here is a detailed description:

In my current company we have decided to redesign some bits here and there. One of the unique things that the team wants is to have a footer which contains quicklinks for different plugins. The best sketch I can give ya

For docs plugin through effort I have figured out the way to get the links in a component by using useDocsSidebar() hook. Its really handy. All required stuff is there (document title + route).

However when it comes to blog plugin, I have failed to spot similar solution or a hook which I can reuse. Have I missed something? Or relatively same API is not present atm?

My current workaround relies on a cheeky import which I have spotted in the docusaurus codebase. I produce links in the blog section by using @generated/routes. The paths for the blog are not that special and by iterating through a generated list of routes I just extract what I need and set a relatively simple link text.

My current solution seems like a workaround to a faced problem. If the document titles in the blog would become complicated I would have to engineer an insane solution to extract the titles.

If the API for such task does not exist atm, I dont mind giving a shot at creating it. Basically it would be a hook useBlogSidebar(). Maybe we can refactor docs and blog to be more unified or smthing for dryness and stuff.

[slorber]

This is a current limitation of Docusaurus: each plugin is kind-of sandboxed:

• docs route only "see" docs data
• blog routes only "see" blog data

A solution to this problem would be to "enhance" the default plugins to register a part of their data as "global data". That data would become available everywhere through useGlobalData(), but it would also make that data load every time you browse any page, so you'd rather keep it as slim as possible.

In your case, if the goal is to render this data in a footer on all pages, then global data is appropriate because at least the data you put in there will be useful on all pages of your site (which is not always the case).

Here's a runnable example explaining how to do so: #4138 (comment)

import type { LoadContext, Plugin } from '@docusaurus/types';
import blogPlugin, { type BlogContent } from '@docusaurus/plugin-content-blog';
import type { PluginOptions as BlogPluginOptions } from '@docusaurus/plugin-content-blog';

export { validateOptions } from '@docusaurus/plugin-content-blog';

export default async function myCustomBlogPlugin(
  context: LoadContext,
  options: BlogPluginOptions
): Promise<Plugin<BlogContent>> {
  const blogPluginInstance = await blogPlugin(context, options);
  return {
    ...blogPluginInstance,
    async contentLoaded({ content, actions }) {
      await blogPluginInstance.contentLoaded({ content, actions });
      actions.setGlobalData({MY_CUSTOM_BLOG_FOOTER_DATA});
    },
  };
}

---

In the future, React Server Components should help us interleave data from various plugins on any page without paying the "cost of global data size".

Track #9089

[SheezZarR]

Thanks for the swift response and the better solution. I have a few off the topic questions about docusaurus. Should I start new posts or this one will do just fine?

[slorber]

It depends on how complex the questions are 😅

Maybe ask the community on our Discord server first to see if anyone can answer?