feat(generate-examples-index)!: complete overhaul #6
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
BREAKING CHANGE: The API differs a lot. Vuepress compatible Markdown output. I would like all of the stuff to be a part of Vuepress so that we don't have different design for each thing like we do now. I hope you won't protest against this. Styles and playground data are now separated from HTML. This decreased the size of index.html by an order of magnitude (from about 1 MiB to less than 100 KiB in Vis Network). Previously all the code (JS, HTML and CSS) for each example was in the index itself twice (once for JSFiddle and once for CodePen). This wasn't that big of a deal for browsers (what is a megabyte here or there nowadays) but it made Vuepress crash. The problem was that it interpreted only a part of the attributes containing the code and tried to interpret the remainder as Markdown/HTML and ended with errors because the remainder wasn't valid. This way a static page with code only for one example is opened and a form button in it is automatically clicked by JS to open the playground. The generated HTML is generally simplyfied with only small tweaks to design. These include playground links being first instead of last and the images having blue background when they fail to load instead of being transparent. More information is logged to the console for easier debugging and just to give better idea about what is going on. The directory structure of generated files is now more finely configurable. This is necessary for Vuepress compatibility. Configuration can now be saved in a JSON file instead of an awkwardly long argument list in package.json. Internally it is now modular instead of monolithic. This is important for HTML and Markdown coexistence as well as general maintainability (it turned out much bigger than I originally expected).
Mostly added docs and other comments explaining what's going on in the code. There is also some minor refactoring and other small changes that don't affect the functionality.
The support files use path hashes for unique identification. The absolute path was used which resulted in CI tests failing because the path was different on each computer. This should resolve the issue. Also since it is the same for all URLs related to the same example it is now generated only once for each example and reused rather than regenerated for each URL again.
yotamberk
approved these changes
Jan 5, 2020
|
🎉 This PR is included in version 2.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
BREAKING CHANGE: The API differs a lot.
Vuepress compatible Markdown output. I would like all of the stuff to be
a part of Vuepress so that we don't have different design for each thing
like we do now. I hope you won't protest against this.
Styles and playground data are now separated from HTML. This decreased
the size of index.html by an order of magnitude (from about 1 MiB to
less than 100 KiB in Vis Network). Previously all the code (JS, HTML and
CSS) for each example was in the index itself twice (once for JSFiddle
and once for CodePen). This wasn't that big of a deal for browsers (what
is a megabyte here or there nowadays) but it made Vuepress crash. The
problem was that it interpreted only a part of the attributes containing
the code and tried to interpret the remainder as Markdown/HTML and ended
with errors because the remainder wasn't valid. This way a static page
with code only for one example is opened and a form button in it is
automatically clicked by JS to open the playground.
The generated HTML is generally simplyfied with only small tweaks to
design. These include playground links being first instead of last and
the images having blue background when they fail to load instead of
being transparent.
More information is logged to the console for easier debugging and just
to give better idea about what is going on.
The directory structure of generated files is now more finely
configurable. This is necessary for Vuepress compatibility.
Configuration can now be saved in a JSON file instead of an awkwardly
long argument list in package.json.
Internally it is now modular instead of monolithic. This is important
for HTML and Markdown coexistence as well as general maintainability (it
turned out much bigger than I originally expected).
HTML
Markdown
PS: The Markdown version could look nice with some short descriptions between the screenshot and the links. Would you support such feature?