Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Proof of concept "Liquidbook" — first implementation of Liquid Components #26

Merged
merged 7 commits into from
May 28, 2020

Conversation

jaredcwhite
Copy link
Member

@jaredcwhite jaredcwhite commented Apr 28, 2020

In a first "proof of concept" pass at implementing the Liquid Components spec, this PR allows YAML front matter to live at the top of Liquid templates for use with the render tag. For example:

---
name: Back to Button
description: Display a button in the upper-right corner of the content reigion to go back to a previous section.
variables:
  url: ["url", "The address of the page to go to"]
  label: ["string", "The label of the button"]
---
<p class="has-text-right is-pulled-right mt-1 pl-5 pb-5">
  <a href="{{ url }}" class="button is-info is-small">
    <span class="icon" aria-hidden="true">
      <i class="fa fa-chevron-up"></i>
    </span>
    <span>{{ label }}</span>
  </a>
</p>
<div class="is-clearfix is-hidden-tablet"></div>

Our implementation of the Liquid File System which finds and loads in templates will automatically detect and strip out YAML front matter and provide just the actual template code to the Liquid parser.

Doing something extra with that front matter isn't currently a feature of Bridgetown Core. However, the public website now has a custom plugin and set of templates and other logic to build up a "Liquidbook" UI (aka Storybook for Liquid Components) to list out and preview components. It's available via this PR at /components. At some point in the future I imagine it'll make sense to extract a bunch of this out into its own project/gem for others to use, but this is just the initial proof of concept.

Check it out in the deploy preview!
https://deploy-preview-26--bridgetownrb.netlify.app/components/

@jaredcwhite jaredcwhite added documentation Improvements or additions to documentation enhancement New feature or request labels Apr 28, 2020
begin
content = ::File.read(filename)
file_content = $POSTMATCH if content =~ Document::YAML_FRONT_MATTER_REGEXP
rescue Psych::SyntaxError => e
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just realized we don't need this since we're not actually parsing the YAML, just stripping it out :)

@jaredcwhite
Copy link
Member Author

TODO: I'm now thinking virtually all of this needs to be in separate gem(s). Bridgetown can reference (some of) them as default dependencies of course, but it's really not Bridgetown's responsibility to deal with the low-level machinations of how Liquid Components work.

@jaredcwhite jaredcwhite force-pushed the liquid-component-yaml-headers branch from f193274 to d2a94a0 Compare May 28, 2020 04:54
@jaredcwhite
Copy link
Member Author

OK, this is looking pretty good now. It's using the new Liquid Component gem to parse components, and the preview logic got refactored into a concise builder plugin. At some point down the road it'll be cool to extract the component previews into its own gem-based plugin, but for this initial pass I think keeping it in the website repo as a demo will be fine.

@jaredcwhite
Copy link
Member Author

Haha, it might help if I actually pushed up the commit 🤣

@jaredcwhite
Copy link
Member Author

All right, {% include %} is officially deprecated now and will be removed in Bridgetown 1.0. All hail our new overlords, the {% render %} and {% rendercontent %} tags. (Finally!!)

@jaredcwhite jaredcwhite linked an issue May 28, 2020 that may be closed by this pull request
@jaredcwhite jaredcwhite changed the base branch from master to 0-15-stable May 28, 2020 05:48
@jaredcwhite jaredcwhite merged commit 47650d9 into 0-15-stable May 28, 2020
@jaredcwhite
Copy link
Member Author

Merged into the 0.15 beta release branch.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Deprecate the include tag and standardize around the render tag
1 participant