Individual pages for options

[stevenzeck]

The individual pages for options is getting to be quite large, even with expand/collapse sections. A few thoughts:

• Consider having just a single example for an option, rather than one for all languages. I see examples as something to just get the point across, and 95% of the time a single one will do that. For instance, indent_style is pretty straightforward. I can look at a Javascript example and probably get the idea of how it would work for HTML.
• Consolidate all the languages that don't have an example into a comma separated list, with a link going to the GitHub example page for that language/option.

[Glavin001]

Consider having just a single example for an option, rather than one for all languages.

Definitely agree! I am looking to use something like https://github.com/facebook/Docusaurus/issues/103 so we can have a single code block and multiple languages to select from.

Consolidate all the languages that don't have an example into a comma separated list

This is a very good idea which does not require https://github.com/facebook/Docusaurus/issues/103 or similar to be implemented. Pull Requests welcome! 😃

[stevenzeck]

Or just a dropdown. Wrap the language example in a <div> that is hidden until the dropdown is changed to it. I don't know if that's possible with the Docusarus structure, but would probably be the best looking. Too many languages for a simple toggle like their parse docs page.

<div id="c-sharp-example" class="hidden">
### C#
<a class="edit-page-link button" href="https://github.com/unibeautify/website/new/master/docs/../examples/C%23/new?filename=multiline_ternary.txt&value=Type%20Example%20Here" target="_blank">Add C# Example</a>
</div>

[stevenzeck]

Best way to implement this? I have POC https://github.com/szeck87/website/tree/options-page-examples that is quite messy. I think ideally it would be it's own React component, with a <select> list that controls the content of a <div> or any other HTML block, similar to the playground https://github.com/Unibeautify/playground/blob/master/src/Playground.tsx.

[Glavin001]

I don't see a way to call React components from Markdown: https://docusaurus.io/docs/en/doc-markdown.html May need to build a custom page like https://github.com/Unibeautify/website/blob/master/website/pages/en/index.js however I would prefer to keep this as simple as possible.

[stevenzeck]

OK, should I just PR what I have here? Not sure what else to do except maybe some style changes to the dropdown.

[Glavin001]

Sure, then I can use Netlify preview to test it out. 👍

[stevenzeck]

When React components are available to use in markdown, https://github.com/facebook/Docusaurus/issues/489

[Glavin001]

This would be awesome! 🎉

[stevenzeck]

Closed by #66