docs: update liquidjs.com and README for demo link

README.md

@@ -15,12 +15,25 @@ A simple, expressive and safe [Shopify][shopify/liquid] / Github Pages compatibl
 
 <p align="center"><a href="https://liquidjs.com"><img height="155px" width="155px" src="https://liquidjs.com/icon/mstile-310x310.png" alt="logo"></a></p>
 
+## What's it like?
+
+Basically there're two types of Liquid syntax: tags enclosed by `{% %}` and outputs enclosed by `{{ }}`. A Liquid template looks like:
+
+```liquid
+{% if username %}
+  {{ username | append: ", welcome to LiquidJS!" | capitalize }}
+{% endif %}
+```
+
+[A live demo](https://liquidjs.com/playground.html) is also available and here's a [quick tutorial](https://liquidjs.com/tutorials/intro-to-liquid.html) for Liquid syntax.
+
+
 ## Installation
 
 Install from npm in Node.js:
 
 ```bash
-npm install --save liquidjs
+npm install liquidjs
 ```
 
 Or use the UMD bundle from jsDelivr:

docs/source/_data/menu.yml

@@ -1,4 +1,4 @@
-tutorials: /tutorials/setup.html
+tutorials: /tutorials/intro-to-liquid.html
 tags: /tags/overview.html
 filters: /filters/overview.html
 playground: /playground.html

docs/source/tutorials/contribution-guidelines.md

@@ -26,7 +26,7 @@ npm test
 
 ## Financial Support
 
-LiquidJS is Open Source and Free and **without** capitalists support and **without** any ADs. To help it live and thrive, consider contribute on [Open Collective][oc] or [Patreon][pt]. To acknowledge your contribution, your name and avatar will be listed here and on [Github README][liquidjs].
+LiquidJS is Open Source and Free. To help it live and thrive, please consider contribute on [Open Collective][oc] or [Patreon][pt]. To acknowledge your contribution, your name and avatar will be listed here, [homepage](https://liquidjs.com/) for LiquidJS and on [Github README][liquidjs].
 
 <object type="image/svg+xml" data="https://opencollective.com/liquidjs/tiers/backer.svg?avatarHeight=72"></object>
 

docs/source/tutorials/intro-to-liquid.md

@@ -1,5 +1,5 @@
 ---
-title: Introduction to Liquid Template Language
+title: The Liquid Template Language
 ---
 
 LiquidJS is a simple, expressive and safe [Shopify][shopify/liquid] / Github Pages compatible template engine in pure JavaScript. The purpose of this repo is to provide a standard Liquid implementation for the JavaScript community. Liquid is originally implemented in Ruby and used by Github Pages, Jekyll and Shopify, see [Differences with Shopify/liquid][diff].
@@ -9,6 +9,10 @@ LiquidJS syntax is relatively simple. There're 2 types of markups in LiquidJS:
 - **Tags**. A tag consists of a tag name and optional arguments wrapped between `{%raw%}{%{%endraw%}` and `%}`.
 - **Outputs**. An output consists of a value and a list of filters, which is optional, wrapped between `{%raw%}{{{%endraw%}` and `}}`.
 
+{% note info Live Demo %}
+Before going into the details, here's a live demo to play around: <https://liquidjs.com/playground.html>.
+{% endnote %}
+
 ## Outputs
 
 **Outputs** are used to output variables, which can be transformed by filters, into HTML. The following template will insert the value of `username` into the input's value:

docs/source/zh-cn/tutorials/contribution-guidelines.md

@@ -26,7 +26,7 @@ npm test
 
 ## 成为赞助者！
 
-LiquidJS 是开源的、免费的，并且 **没有** 商业支持，也 **没有** 任何广告。如果你喜欢 LiquidJS 或你的公司在使用 LiquidJS，请考虑通过 [Open Collective][oc] 或 [Patreon][pt] 赞助，作为感谢你的名字和头像（或 Logo）会展示在这里和 [Github README][liquidjs]。
+LiquidJS 是开源和免费的。如果你喜欢 LiquidJS 或你的公司在使用 LiquidJS，请考虑通过 [Open Collective][oc] 或 [Patreon][pt] 赞助，作为感谢你的名字和头像（或 Logo）会展示在这里，[LiquidJS 首页](https://liquidjs.com/)和 [Github README][liquidjs]。
 
 <object type="image/svg+xml" data="https://opencollective.com/liquidjs/tiers/backer.svg?avatarHeight=72"></object>
 

docs/source/zh-cn/tutorials/intro-to-liquid.md

@@ -1,5 +1,5 @@
 ---
-title: Liquid 模板语言简介
+title: Liquid 模板语言
 ---
 
 LiquidJS 是一个简单的、安全的、兼容 Shopify 的、纯 JavaScript 编写的模板引擎。这个项目的目的是为 JavaScript 社区提供一个 Liquid 模板引擎的实现。Liquid 最初用 Ruby 实现并用于 Github Pages, Jekyll 和 Shopify，参考 [和 Shopify/liquid 的区别][diff]。
@@ -9,6 +9,10 @@ LiquidJS 语法相对简单。LiquidJS 中有两种标记：
 - **标签**。标签由标签名和参数构成，由 `{%raw%}{%{%endraw%}` 和 `%}` 包裹。
 - **输出**。输出由一个值和一组可选的过滤器构成，由 `{%raw%}{{{%endraw%}` 和 `}}` 包裹。
 
+{% note info 在线示例 %}
+在进一步了解细节之前，这里有一个在线示例：<https://liquidjs.com/playground.html>。
+{% endnote %}
+
 ## 输出
 
 **输出** 用于转换和输出变量到 HTMl。下面的模板将会把 `username` 的值插入到 input 的 `value`：

docs/themes/navy/layout/partial/all-contributors.swig

@@ -51,6 +51,7 @@
     <td align="center"><a href="https://about.me/jasonkurian"><img src="https://avatars.githubusercontent.com/u/2642545?v=4?s=100" width="100px;" alt=""/></a></td>
     <td align="center"><a href="https://github.com/dphm"><img src="https://avatars.githubusercontent.com/u/1707217?v=4?s=100" width="100px;" alt=""/></a></td>
     <td align="center"><a href="https://www.aleksandrhovhannisyan.com/"><img src="https://avatars.githubusercontent.com/u/19352442?v=4?s=100" width="100px;" alt=""/></a></td>
+    <td align="center"><a href="https://github.com/jg-rp"><img src="https://avatars.githubusercontent.com/u/72664870?v=4?s=100" width="100px;" alt=""/></a></td>
   </tr>
 </table>