Community plugins

[slorber]

Hi,

If you have built anything related to Docusaurus, please let us know here!

We'd like to hear about Docusaurus 2 plugins built by the community and showcase them better in the future.

We might even create a community-driven organization to host the most useful/popular plugins.

[rohit-gohri]

Just released "redocusaurus" this weekend : https://rohit.page/blog/projects/openapi-for-docusaurus/

Adds Redoc based OpenAPI docs from yaml files or URLs, with the theme matching @docusaurus/classic

[slorber]

Thanks @rohit-gohri that looks great!

[ArtFlag]

I've made a hotjar plugin based on what you guys did for alogolia.
https://github.com/ArtFlag/docusaurus-plugin-hotjar

[azinit]

@ArtFlag I think there would be more effect, if you publish your code as separate plugin 🤔

Because of this, and isProd checking - I was forced to use https://www.npmjs.com/package/docusaurus-plugin-hotjar 🤷‍♂️

Also mention alternative for doubintg persons like me

[roydukkey]

I've made a theme plugin that exposes frontmatter to components through a hook.
https://github.com/roydukkey/docusaurus-theme-frontmatter

[slorber]

👍

Maybe this is something that we could expose by default?

What is the motivation behind this ability to consume frontmatter in a generic way?

[Josh-Cena]

Yes! I think this plugin is very useful. For example, on my site, every page has a metadata banner showing the creation date etc., which is coded in front matter: https://joshcena.com/docs/Science/cavalieri/

For now I have to pass front matter as props to every metadata banner component, but if my component can just hook into front matter within each page, it could save me some trouble.

However, it also means increased bundle size, as I can imagine. It's basically #4492 going to full length.

[slorber]

I don't think it needs to increase the bundle, we just need a way to provide existing frontmatter on context and encourage plugin authors to do similar things

[Josh-Cena]

Ah... this plugin actually wraps all three plugins' route layouts! That's very smart, didn't realize that's an option. I think in this case we can make it the default behavior. Not sure if many would find it useful though😄 but who knows

[roydukkey]

The main motivation behind this is to avoid ejecting entire inheritance structures to get front matter into deep components.

I would much prefer describing custom datas in the front matter rather than in MDX. Just seem cleaner and more maintainable.

FWIW, this was one of the very first issues I sought answers for when I started with Docusaurus.

[pruthvi2103]

Released the plugin for making Docusaurus work with (vanilla-extract)[https://vanilla-extract.style/].

Check it out if you want to use it https://github.com/antstackio/docusaurus-plugin-vanilla-extract

[megatroom]

I created an open source tool to document React components in Markdown, fully customizable through templates, hooks and helpers:

https://components-to-markdown.vercel.app

The motivation came from wanting to use Ducusaurus as documentation for a component library, and I didn't find any easy way to automatically generate API documentation for these components.

It's still in the beginning, but it's already functional and has a demonstration on the website.

What do you think?

[slorber]

That looks like an interesting idea

That could be nice to explain a bit more how those Markdown files are generated, and how your tool compare to other alternatives such as https://github.com/tgreyuk/typedoc-plugin-markdown

Maybe you could also support the "companonent story format" of storybook?

[megatroom]

That could be nice to explain a bit more how those Markdown files are generated

Thanks for the feedback, I'll post a topic in the documentation on "How its work" with more detail.

Basically it extracts information from components using react-docgen, formats the result in a friendly and structured way to be used in a template, this template uses the Handlebars template engine.

and how your tool compare to other alternatives such as https://github.com/tgreyuk/typedoc-plugin-markdown

I didn't know about typedoc, thanks for sharing. Looking and testing fast here, despite the components-to-markdown not being as advanced as typedoc, it is generating a much more friendly and beautiful documentation, for example: Action and Button components.

I'm going to do a complete benchmark to put the differences on the site.

Maybe you could also support the "companonent story format" of storybook?

Great idea, I'm going to create a template that resembles the way Storybook generates component documentation.

[slorber]

👍

Didn't know about react-docgen 🤪

[megatroom]

@slorber to let you know, I'm working on your suggestions.

On the homepage of the website I put the "How it works" explaining in 3 steps and demonstrating the result.

I made a new template, simulating the Storybook table. I put a comparative table on the website.

My next step is to create a page with the comparison between my project and other possible alternatives to show the advantages.

Let me know if you have any other suggestions on what I can improve.

[lanegoolsby]

I created an integration with our corporate StackExchange instance. It works by reading the list of tags on a document and querying StackExchange with the matching tags.

We also created a custom Typesense search feature that includes type-ahead search suggestions and multi-index querying.

Right now they're only available in our corporate network but I've has conversations with our internal folks about open sourcing them. If there's community interest in either I am willing to get more serious with those conversations.

[marikaner]

I created a tiny plugin to fake static paths into docusaurus. I had the issue, that I generate my API reference as html + js files and I would like to have a link to the latest API docs that redirect to the newest version of the docs (/api/latest => /api/2.9.0) .

Now I have a homemade plugin that uses a react component to redirect the requested location to the actual latest version.
I guess it should even be possible to combine this with the redirect plugin instead of the component

The code is very simple, but it wasn't straight forward to come up with this.

[slorber]

Seems related to #7087

Note it's preferable to have server redirects instead client redirects for such things IMHO

[marikaner]

Yes, I totally agree. But as long as we run on GH Pages I guess we have no way of doing that.

[lzwdot]

I created a Baidu statistics plugin：docusaurus-plugin-baidu-tongji，get more choices

Although there is already Google statistics,

[rainyjune]

I just created a plugin for Baidu Analytics, which is a tool similar to Google Analytics and very popular in China. You can find this plugin at https://github.com/rainyjune/docusaurus-plugin-baidu-analytics.

[flamecopper]

Is there any plugin that can add read time to each of the individual pages?

[gracefullight]

While migrating documents to Docusaurus, I found that although you can insert scripts through the metadata property of docusaurus.config.js, it became cumbersome to check the variables of each feature document and add preconnects for each domain.

In response to this, I've created a repository at gracefullight/docusaurus-plugins, extending the script plugin to be more flexible and adaptable.

Currently, there are 14 plugins available, each installable and usable directly via Npm. They include:

• Analytics: Baidu/analytics, Cloudflare-analytics, Meta/pixel, Microsoft/clarity, Naver/analytics, Vercel/analytics, Yandex/metrica
• Chat: Channalio, Chatra, Gitter, Intercom
• Ads: Adsense
• Styles: Tailwind

I hope these plugins can help in document creation. If you need to add a new plugin, you can easily expand the offering with the command: pnpm cmd new my-plugin -o optionName -d scriptDomain.

I'm looking forward to hearing your feedback and suggestions on these new additions.