Shopify / Shopify/liquid

A "Liquid Components" spec

Open
#1,244 1 comment 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Ruby
Stars
11.9k
Forks
1.5k
Avg merge
17h 55m
Merged PRs (30d)
3

Description

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 custom rendercontent block tag that processes HTML/Markdown body content) could be used to create pretty sophisticated design systems.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Review the linked proof-of-concept PR 26, demo, and preliminary spec to understand the proposed Liquid Components behavior, including YAML front matter, preview files, and stylesheet partials. No concrete change or acceptance criteria are specified, so a contributor would first need maintainer feedback to define the scope and what completion means.

Written by the indexing model from the issue text.

Assessment

Tech stack
ruby
Domain
design, web-dev
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.