liferay
feat(www): implements the new CodeBlock
Well, I refactor the CodeBlock implementation that removes the use of the sandpack and brings many user experience improvements. This implementation still keeps the button to open the example in codesandbox, which is great because it is a very important feature.
Live: https://next.clayui.com/docs/components/alert
Some highlights of this new codeblock in the documentation:
- Uniform code blocks for the examples and snippets
- Processed locally instead of running on a codesandbox server
- Much faster loading of the pages
- Easier to test the examples since we no longer have an iframe
- Automatically collapses for very large code
- The example code has intellisense of the types on hover (we can add this to the code snippets as well.)
As part of the new CodeBlock I also needed to update the renoun dependency and I would need to refactor part of the documentation to use the new APIs. This also brought performance improvements to local testing so the pages load faster than before.
This change solves some bugs such as when opening the example in codesandbox the icons now load normally and it is also now possible to add the chart examples again which will be done in another PR #5955.
CodeBlock can also support HTML code preview, which is not currently possible, but I need to make some adjustments. This helps reduce the amount of duplicated code in the documentation and makes maintenance easier, as well as making the examples more complete for markup documents.
ToDo
- [ ] Fix React v16 internal dependency bug with React v19 for TreeView examples
- [ ] Add remaining dependencies for all examples
- [ ] Fixes the bug where some examples still don't render
Thanks Matu! This looks like a great improvement.
Would it be difficult to also make the code blocks for examples editable on the site?
Would it be difficult to also make the code blocks for examples editable on the site?
Yes, it is possible, but I believe we have lost intellisense.