Essentially, the idea is that a Liquid template used by the render tag can contain YAML front matter at the top, which gets stripped out in our implementation of the File System.
That front matter then can be used by a tool that loops through all the templates and pulls out that metadata for use in building a "Storybook" style UI that documents the components. We also have sidecar "preview" files that are simply HTML to render out components as examples, and it's even possible to use per-component stylesheet partials as part of the Webpack build.
I'd love your feedback and further ideas of what this could do for the Liquid ecosystem and the ways in which templates and the render tag (along with our custom rendercontent block tag that processes HTML/Markdown body content) could be used to create pretty sophisticated design systems.
For anyone who's curious, there's now a liquid-component gem which handles parsing a Liquid template with YAML front matter and instantiating metadata and template body. Details here:
Hi everybody! A proof-of-concept implementation of what I'm calling the "Liquid Components" spec has just landed in the Bridgetown project.
PR: https://github.com/bridgetownrb/bridgetown/pull/26
Demo: https://deploy-preview-26--bridgetownrb.netlify.app/components/
Preliminary spec: https://github.com/bridgetownrb/liquid-component
Essentially, the idea is that a Liquid template used by the
render
tag can contain YAML front matter at the top, which gets stripped out in our implementation of the File System.That front matter then can be used by a tool that loops through all the templates and pulls out that metadata for use in building a "Storybook" style UI that documents the components. We also have sidecar "preview" files that are simply HTML to render out components as examples, and it's even possible to use per-component stylesheet partials as part of the Webpack build.
I'd love your feedback and further ideas of what this could do for the Liquid ecosystem and the ways in which templates and the
render
tag (along with our customrendercontent
block tag that processes HTML/Markdown body content) could be used to create pretty sophisticated design systems.