Chart.js: Migrate away from GitBook - possibly to Docusaurus

[nainardev]

[benmccann]

Is there a later version of GitBook? I thought the open source version is no longer maintained and they're only maintaining a paid hosted version

We had attempted to migrate to Vuepress (https://github.com/chartjs/Chart.js/pull/5847), but ran into an issue that we're still waiting for Vuepress to fix more than a year later :-/ I'd like to get off of GitBook because it's pulling in tons of dependencies with security issues

I would be open to migrating to Docusaurus. Any chance you'd like to take a stab at it?

Some features we have on the site right now that we'd want to try to maintain:

• chart rendering (for pages in charts sub-directory)
• search
• Google Analytics

[nainardev]

As GitBook is trying to turn commercial, migration is a must

Docusaurus 2 is a preferred option.

• It allows us to display react components so chart rendering won't be a problem
• For SEO, we can use react-helmet
• For search we can use algolia

[benmccann]

Sure that sounds fine. However, I'm not sure how much time any of the existing maintainers would have to attempt it. Is it something you'd like to try working on?

[benmccann]

I gave it a try here: https://github.com/benmccann/Chart.js/tree/docusaurus

I haven't figured out yet how to put a Chart in the docs. We'll also need to figure out how to include the newly built Chart.min.js in the docs. And then how to deploy the docs

[benmccann]

I couldn't get it to work. I tried that here: https://github.com/benmccann/Chart.js/commit/e8e44d4ab25cf20d5de7e2dbfd7ec3f96b7d8f3d

Let me know if you have any ideas. It'd be great if you could check out the code and figure out what's wrong

[benmccann]

That's how it is in the docs currently and I just left it the same. The problem is that it fails to compile if componentWillMount is present even if that method is empty

[nainardev]

there's no such package as @docusaurus/router

https://codesandbox.io/s/github/benmccann/Chart.js/tree/docusaurus/docs?file=/src/pages/index.js:28-72

Raised an issue on https://github.com/facebook/docusaurus/issues/2615

[benmccann]

The reason I was using a class component instead of a function component is because I wanted to create the DOM element in render and then create the Chart using that element in componentWillMount. I filed an issue to see if the FB folks have any ideas

[nainardev]

You could use useEffect for that👌

useEffect(() => {
    //Code which was inside componentWillMount
},[])

[benmccann]

That worked! Thank you! I was not familiar with these hooks

Working code is here: https://github.com/benmccann/Chart.js/tree/docusaurus

Now I just have to figure out deployment

[benmccann]

We have the docs on GitHub Pages: https://github.com/chartjs/chartjs.github.io

[nainardev]

deployed to now, check it out
https://chartjs.nainar.now.sh/

[benmccann]

Thanks for providing that. I shared it with the other maintainers and it was helpful so that they could play around with it. They found a bug when viewed on mobile. The Docusaurus team fixed the bug for us, but now I am waiting for a new release of Docusaurus

[nainardev]

Also in dark mode, some chart legends are black not white

[benmccann]

Yeah, I pushed a change to disable dark mode on my branch

[nainardev]

Why disable? just fix the text color in dark mode

[benmccann]

A PR for that would be welcome :-) I'm too lazy

[benmccann]

Ok, we got it deployed and hooked into our release process: https://www.chartjs.org/docs/next/

@nainardev do you mind taking down the one at https://chartjs.nainar.now.sh/ now so Google doesn't accidentally find it and penalize us for duplicate content or send people to the wrong place? Thanks for the suggestion on Docusaurus and the help!

[nainardev]

Deleted