Write docusaurus.config.js with an interactive UI

[Josh-Cena]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Motivation

Writing the docusaurus.config.js file is very tedious, especially if it gets long. The theme config object bloats very easily, and it's hard to navigate between different fields.

We should allow the debug plugin to write to docusaurus.config.js. Not everything is serializable, but we can allow users to write JS code with a text area; many other fields only accept certain values / boolean values, and they can be easily implemented with form elements.

Self-service

• I'd be willing to do some initial work on this proposal myself.

[slorber]

That does not seem so easy to do, particularly when the config is not plain JSON

const part1 = {
  title: "docusaurus",
}

const part2 = {
  url: "https://docusaurus.io",
  // ...
}


const ABC = {
  ...part1,
  ...part2,
  ...require("./part3").default,
}

module.exports = ABC;

Good luck to writing the logic to figure out how to modify the config in the appropriate place 🤪

Any example of other tools doing this?

[Josh-Cena]

I plan that as soon as the values are not trivially serializable we bail out and display something like "other". My major use-case is for the non-tech users to be less confused about the different fields and maybe present the config file in a more structured & fleshed out way.

Any example of other tools doing this?

No examples of SSGs, but it would be fun to work on and see what we can come up with

[slorber]

I understand why it would be useful, it's just hard to implement properly :D

Examples do not need to be SSG, it could as well be prettier, IDE plugins etc... Afaik VSCode may have some good examples but not sure they allow to import things

[Josh-Cena]

Yeah, VSCode configuration is plain JSON, same with the TS config, ESLint, prettier, etc. Most of these toolings assume JSON config when you are updating interactively. That's why I'm looking more into things like vue.config.js where you have more complicated stuff

[Samrose-Ahmed]

You could look at https://github.com/projen/projen, but I think this is a bit overkill.

[Zenahr]

@Josh-Cena The way I understand this, you're proposing a GUI for editing the config file to ease UX/DX?
That would be awesome! And I think it wouldn't take too much work to get it working, all we'd need is a mapping of config fields (with appropriate types) to form elements and a way to manipulate and read the config values nicely.

I've done some similar work in the past (exposing a config file to a graphical interface for ease of editing) and would be available for help here and there.