Liquid від А до Я

English: an interactive Liquid trainer for Shopify developers, in Ukrainian. 18 lessons with auto-checked tasks, a 92-page reference (core Liquid + Shopify objects, tags and filters), a live sandbox that runs LiquidJS in the browser with a Shopify emulation layer, and 131 interview questions. Built with React 19, TypeScript, Vite and CodeMirror. MIT.

Український тренажер мови шаблонів Liquid — від основ до Shopify-тем і питань технічної співбесіди. Усі приклади виконуються наживо в браузері: шаблон можна правити просто на сторінці й одразу бачити результат.

Що всередині

Розділ	Що це
Курс	18 уроків: теорія з живими прикладами → 4 завдання з автоперевіркою → тест. Разом 72 завдання і 72 питання тестів
Довідник	66 сторінок: основи, теги й усі 55 фільтрів базового Liquid — кожна з робочими прикладами
Shopify	26 сторінок про обʼєкти магазину, архітектуру теми й секції зі схемою + повний індекс (31 тег, 154 фільтри, 142 обʼєкти)
Пісочниця	шаблон + JSON-дані + сніпети, дані магазину, посилання на свій код
Співбесіда	131 питання з усними відповідями, картки самооцінки, пробна співбесіда
Шпаргалка	синтаксис і всі фільтри однією сторінкою

Разом — 92 сторінки довідника, 18 уроків, 131 питання і 766 живих прикладів.

Фірмова механіка — «Кроки фільтрів»: для {{ x | a | b }} видно проміжне значення після кожної труби, включно з моментом, коли значення міняє тип — рядок стає масивом, масив числом. Однакові ланцюжки всередині циклу згортаються в один запис із лічильником.

Як запустити

pnpm install
pnpm dev        # http://localhost:7400

Збірка — pnpm build, попередній перегляд — pnpm preview.

Як улаштовано

• Рушій — LiquidJS у браузері, без сервера (src/engine/liquid.ts), плюс емуляція Shopify — гроші, зображення, {% schema %}, {% paginate %}, {% form %} (src/engine/shopify.ts). Чим пісочниця відрізняється від справжнього Shopify — сторінка «Про пісочницю» в розділі «Основи».
• Контент — це дані, а не верстка (src/content/, контракт у types.ts): з одного масиву росте текст, зміст, пошук, шпаргалка й автоперевірка завдань.
• Вивід прикладів ніде не записаний руками. Його рахує рушій, тож приклад не може «збрехати».
• Прогрес — у localStorage, з експортом і імпортом у файл.

Прийомка

pnpm verify     # проганяє кожен приклад, еталон кожного завдання і кожен тест
pnpm typecheck
pnpm build

pnpm verify — головний запобіжник: він рендерить кожен приклад, перевіряє, що еталонне рішення завдання проходить власну перевірку (а стартовий код — ні) і що «правильний» варіант кожного тесту збігається з тим, що реально виводить рушій. Контент, який не пройшов, у збірку не йде.

Як писати контент — AUTHORING.md.

Ліцензія — MIT (LICENSE).

Джерела

• shopify.github.io/liquid — базова мова.
• shopify.dev/docs/api/liquid — Shopify-діалект.
• vendor/theme-liquid-docs/ — офіційні машиночитні дані довідки Shopify (репозиторій Shopify/theme-liquid-docs, ліцензія MIT, копія — в теці). З них будується повний індекс: pnpm ref:build.

Тексти й приклади — власні; офіційна документація не копіюється.