docs: better PWA, more responsive, better description

harttle · Jan 28, 2022 · 527858f · 527858f
1 parent 9da41c8
commit 527858f
Show file tree

Hide file tree

Showing 21 changed files with 164 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -51,12 +51,19 @@ More details, refer to [The Setup Guide][setup].
 * [react-liquid](https://github.com/aquibm/react-liquid#readme): Liquid templating language component for React
 * [@11ty/eleventy](https://www.npmjs.com/package/@11ty/eleventy): A simpler static site generator. An alternative to Jekyll. Written in JavaScript. Transforms a directory of templates (of varying types) into HTML.
 
-## Backers
+## Financial Support
 
 If you love LiquidJS or your company is using LiquidJS? Please consider [support us on Open Collective or Patreon][financial-support].
 
-![backers from open-collective](https://opencollective.com/liquidjs/tiers/backer.svg?avatarHeight=97)
+### Backers
+If you personally like LiquidJS and find it's useful to you, you can become a backer!
 
+<object type="image/svg+xml" data="https://opencollective.com/liquidjs/backers.svg?avatarHeight=72"></object>
+
+### Sponsors
+If LiquidJS is benefiting your business/company, please sponsor us to make it better!
+
+<object type="image/svg+xml" data="https://opencollective.com/liquidjs/sponsors.svg?avatarHeight=72"></object>
 ## Contributors ✨
 
 Want to contribute? see [Contribution Guidelines][contribution]. Thanks goes to these wonderful people:

diff --git a/docs/_config.yml b/docs/_config.yml
@@ -2,7 +2,9 @@ title: LiquidJS
 subtitle: "A simple, expressive and safe template engine."
 description: "LiquidJS is a simple, expressive and safe Shopify / Github Pages compatible template engine in pure JavaScript."
 author: Harttle
-language: en
+language:
+  - en
+  - zh-cn
 timezone: UTC
 
 url: https://liquidjs.com

diff --git a/docs/source/filters/overview.md b/docs/source/filters/overview.md
@@ -1,5 +1,6 @@
 ---
 title: Filters
+description: Description and demo for each Liquid filter
 ---
 
 LiquidJS implements business-logic independent filters that are typically implemented in [shopify/liquid][shopify/liquid]. This section contains the specification and demoes for all the filters implemented by LiquidJS.

diff --git a/docs/source/manifest.json b/docs/source/manifest.json
@@ -1,6 +1,7 @@
 {
   "short_name": "LiquidJS",
   "name": "LiquidJS",
+  "description": "A simple, expressive and safe Shopify / Github Pages compatible template engine in pure JavaScript.",
   "icons": [
     {
       "src": "/icon/apple-touch-icon-57x57.png",
@@ -23,6 +24,33 @@
       "sizes": "512x512"
     }
   ],
+  "shortcuts" : [
+    {
+      "name": "Tutorials",
+      "url": "/tutorials/intro-to-liquid.html",
+      "description": "A set of articles describing how to use LiquidJS"
+    },
+    {
+      "name": "Tags",
+      "url": "/tags/overview.html",
+      "description": "Description and demo for each Liquid tag"
+    },
+    {
+      "name": "Filters",
+      "url": "/filters/overview.html",
+      "description": "Description and demo for each Liquid filter"
+    },
+    {
+      "name": "Playground",
+      "url": "/playground.html",
+      "description": "An online code editor to try out and share Liquid templates"
+    },
+    {
+      "name": "API",
+      "url": "/api/classes/liquid_.liquid.html",
+      "description": "TypeScript doc for LiquidJS classes and interfaces"
+    }
+  ],
   "start_url": "/",
   "display": "standalone",
   "theme_color": "#0f83ce",

diff --git a/docs/source/playground.pug b/docs/source/playground.pug
@@ -1,3 +1,5 @@
 ---
 layout: playground
+title: Playground
+description: An online code editor to try out and share Liquid templates
 ---
diff --git a/docs/source/tags/overview.md b/docs/source/tags/overview.md
@@ -1,5 +1,6 @@
 ---
 title: Tags
+description: Description and demo for each Liquid tag
 ---
 
 LiquidJS implements business-logic independent tags that are typically implemented in [shopify/liquid][shopify/liquid]. This section contains the specification and demoes for all the tags implemented by LiquidJS.

diff --git a/docs/source/tutorials/contribution-guidelines.md b/docs/source/tutorials/contribution-guidelines.md
@@ -2,7 +2,7 @@
 title: Contribution Guideline
 ---
 
-## Star on Github 👉 [![harttle/liquidjs](https://img.shields.io/github/stars/harttle/liquidjs?style=flat-square)][liquidjs]
+## 👉👉👉 Star LiquidJS  [![harttle/liquidjs](https://img.shields.io/github/stars/harttle/liquidjs?style=flat-square)][liquidjs]
 
 Starring LiquidJS is the most important and easiest way to support us: boost its rank and expose it to more people, which in turn makes it better.
 
@@ -26,13 +26,19 @@ npm test
 
 ## Financial Support
 
-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].
+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, on LiquidJS [homepage](https://liquidjs.com/) and on [Github README][liquidjs].
 
-<object type="image/svg+xml" data="https://opencollective.com/liquidjs/tiers/backer.svg?avatarHeight=72"></object>
+### Backers
+If you personally like LiquidJS and find it's useful to you, you can become a backer!
 
-[![Become a Patron!](../icon/become_a_patron_button@2x.png)](https://www.patreon.com/bePatron?u=32321060)
+<object type="image/svg+xml" data="https://opencollective.com/liquidjs/backers.svg?avatarHeight=72"></object>
 
-[oc]: https://opencollective.com/liquidjs/
+### Sponsors
+If LiquidJS is benefiting your business/company, please sponsor us to make it better!
+
+<object type="image/svg+xml" data="https://opencollective.com/liquidjs/sponsors.svg?avatarHeight=72"></object>
+
+[oc]: https://opencollective.com/liquidjs/contribute/backer-ii-10666/checkout
 [pt]: https://www.patreon.com/harttle
 [shopify/liquid]: https://shopify.github.io/liquid/
 [caniuse-promises]: http://caniuse.com/#feat=promises

diff --git a/docs/source/tutorials/intro-to-liquid.md b/docs/source/tutorials/intro-to-liquid.md
@@ -1,5 +1,6 @@
 ---
 title: The Liquid Template Language
+describe: A short introduction to the Liquid template language and some simple demos.
 ---
 
 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].

diff --git a/docs/source/zh-cn/filters/overview.md b/docs/source/zh-cn/filters/overview.md
@@ -1,5 +1,6 @@
 ---
 title: 过滤器
+description: 每个 Liquid 过滤器的描述和示例
 ---
 
 LiquidJS 支持 Liquid 语法中具体业务无关的过滤器，基本上 [shopify/liquid 核心][shopify/liquid] 支持的 LiquidJS 都支持。这部分包含了所有 LiquidJS 支持的过滤器的文档和使用示例。

diff --git a/docs/source/zh-cn/manifest.json b/docs/source/zh-cn/manifest.json
@@ -0,0 +1,58 @@
+{
+  "short_name": "LiquidJS",
+  "name": "LiquidJS",
+  "description": "LiquidJS 是一个简单的、安全的、兼容 Shopify 的、纯 JavaScript 编写的模板引擎。",
+  "icons": [
+    {
+      "src": "/icon/apple-touch-icon-57x57.png",
+      "type": "image/png",
+      "sizes": "57x57"
+    },
+    {
+      "src": "/icon/favicon-96x96.png",
+      "type": "image/png",
+      "sizes": "96x96"
+    },
+    {
+      "src": "/icon/favicon-196x196.png",
+      "type": "image/png",
+      "sizes": "196x196"
+    },
+    {
+      "src": "/icon/apple-touch-icon.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "shortcuts" : [
+    {
+      "name": "教程",
+      "url": "/zh-cn/tutorials/intro-to-liquid.html",
+      "description": "一系列描述如何使用 LiquidJS 的文章"
+    },
+    {
+      "name": "标签",
+      "url": "/zh-cn/tags/overview.html",
+      "description": "每个 Liquid 标签的描述和示例"
+    },
+    {
+      "name": "过滤器",
+      "url": "/zh-cn/filters/overview.html",
+      "description": "每个 Liquid 过滤器的描述和示例"
+    },
+    {
+      "name": "演示",
+      "url": "/zh-cn/playground.html",
+      "description": "一个用来尝试和分享 Liquid 模板的在线编辑器"
+    },
+    {
+      "name": "API",
+      "url": "/zh-cn/api/classes/liquid_.liquid.html",
+      "description": "LiquidJS 类和接口的 TypeScript 文档"
+    }
+  ],
+  "start_url": "/zh-cn",
+  "display": "standalone",
+  "theme_color": "#0f83ce",
+  "background_color": "#0f83ce"
+}
diff --git a/docs/source/zh-cn/playground.pug b/docs/source/zh-cn/playground.pug
@@ -1,3 +1,5 @@
 ---
 layout: playground
+title: 演示
+description: 一个用来尝试和分享 Liquid 模板的在线编辑器
 ---
diff --git a/docs/source/zh-cn/tags/overview.md b/docs/source/zh-cn/tags/overview.md
@@ -1,5 +1,6 @@
 ---
 title: 标签
+description: 每个 Liquid 标签的描述和示例
 ---
 
 LiquidJS 支持 Liquid 语法中具体业务无关的标签，包含 [shopify/liquid 核心][shopify/liquid] 里的所有标签。这部分包含了所有 LiquidJS 支持的标签的文档和使用示例。

diff --git a/docs/source/zh-cn/tutorials/contribution-guidelines.md b/docs/source/zh-cn/tutorials/contribution-guidelines.md
@@ -2,7 +2,7 @@
 title: 贡献指南
 ---
 
-## Star on Github 👉 [![harttle/liquidjs](https://img.shields.io/github/stars/harttle/liquidjs?style=flat-square)][liquidjs]
+## Star LiquidJS 👉👉👉 [![harttle/liquidjs](https://img.shields.io/github/stars/harttle/liquidjs?style=flat-square)][liquidjs]
 
 Star 是支持 LiquidJS 最重要的方式，也是最简单的方式：通过提升排名来让更多人了解 LiquidJS，让它得到更好的改进。
 
@@ -24,13 +24,19 @@ npm test
 
 **向后兼容**：请考虑向后（之前的旧的版本）兼容。LiquidJS 被用于很多层的软件，包括底层库、编译器、站点生成器、 Web 服务器。对多数最终用户来说，驱动或请求整个系统做一次主版本升级是很难办到的。
 
-## 成为赞助者！
+## 资金支持
 
-LiquidJS 是开源和免费的。如果你喜欢 LiquidJS 或你的公司在使用 LiquidJS，请考虑通过 [Open Collective][oc] 或 [Patreon][pt] 赞助，作为感谢你的名字和头像（或 Logo）会展示在这里，[LiquidJS 首页](https://liquidjs.com/)和 [Github README][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>
+### 支持者
+如果你喜欢 LiquidJS，希望支持我们，你可以成为 Open Collective Backer！
 
-[![Become a Patron!](../../icon/become_a_patron_button@2x.png)](https://www.patreon.com/bePatron?u=32321060)
+<object type="image/svg+xml" data="https://opencollective.com/liquidjs/backers.svg?avatarHeight=72"></object>
+
+### 赞助商
+如果你的公司/业务在使用 LiquidJS，请考虑赞助我们！让 LiquidJS 变得更好，以及保持开放和免费！
+
+<object type="image/svg+xml" data="https://opencollective.com/liquidjs/sponsors.svg?avatarHeight=72"></object>
 
 [oc]: https://opencollective.com/liquidjs/
 [pt]: https://www.patreon.com/harttle

diff --git a/docs/source/zh-cn/tutorials/intro-to-liquid.md b/docs/source/zh-cn/tutorials/intro-to-liquid.md
@@ -1,5 +1,6 @@
 ---
 title: Liquid 模板语言
+description: Liquid 模板语言的介绍，和一些示例代码
 ---
 
 LiquidJS 是一个简单的、安全的、兼容 Shopify 的、纯 JavaScript 编写的模板引擎。这个项目的目的是为 JavaScript 社区提供一个 Liquid 模板引擎的实现。Liquid 最初用 Ruby 实现并用于 Github Pages, Jekyll 和 Shopify，参考 [和 Shopify/liquid 的区别][diff]。

diff --git a/docs/themes/navy/layout/partial/head.swig b/docs/themes/navy/layout/partial/head.swig
@@ -3,8 +3,9 @@
   <title>{% if page.title %}{{ page.title }} | {% endif %}{{ config.title }}</title>
   <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
   <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="{{ page.description | default(config.description) }}">
   <link rel="dns-prefetch" href="https://cdn.jsdelivr.net/">
-  <link rel="manifest" href="/manifest.json">
+  <link rel="manifest" href="{% if page.lang != "en" %}/{{page.lang}}{% endif %}/manifest.json">
   <!-- Canonical links -->
   <link rel="canonical" href="{{ url }}">
   <!-- Alternative links -->

diff --git a/docs/themes/navy/layout/playground.swig b/docs/themes/navy/layout/playground.swig
@@ -1,7 +1,8 @@
 <div id="playground" role="main">
   <div class="wrapper">
     <h1 class="inner">{{__('playground.title')}}</h1>
-    <div class="row inner">
+    <div class="loader" role=status aria-busy=true></div>
+    <div id="editors" class="row inner hide" aria-hide=true>
       <div class="col">
         <div id="editorEl">{{ raw('partial/demo.liquid') }}</div>
         <div id="dataEl">{}</div>

diff --git a/docs/themes/navy/source/css/_partial/header.styl b/docs/themes/navy/source/css/_partial/header.styl
@@ -58,6 +58,7 @@ logo-size = 36px
   color: #fff
   text-decoration: none
   line-height: logo-size
+  white-space: nowrap
   opacity: 0.7
   transition: opacity 0.2s, color 0.2s
   display: inline-block

diff --git a/docs/themes/navy/source/css/_partial/highlight.styl b/docs/themes/navy/source/css/_partial/highlight.styl
@@ -19,6 +19,7 @@ pre, code
   font-family: font-mono
   color: var(--highlight-foreground)
   background: var(--highlight-background)
+  white-space: pre-wrap
 
 code
   padding: 0 5px

diff --git a/docs/themes/navy/source/css/_partial/playground.styl b/docs/themes/navy/source/css/_partial/playground.styl
@@ -30,3 +30,18 @@
     margin-top: 2vh
   #previewEl
     height: 70vh
+  .hide
+    display: none
+  .loader
+    width: 75px
+    height: 75px
+    margin: 150px auto 200px
+    border-top: 5px solid #292929
+    border-right: 5px solid #efefef
+    border-bottom: 5px solid #efefef
+    border-left: 5px solid #efefef
+    border-radius: 100px
+    animation: spin 1s infinite linear
+  @keyframes spin
+    100%
+      transform: rotate(360deg)
diff --git a/docs/themes/navy/source/css/_variables.styl b/docs/themes/navy/source/css/_variables.styl
@@ -40,7 +40,7 @@ font-size = 15px
 line-height = 1.6em
 
 // Layout
-max-width = 1200px
+max-width = 1800px
 gutter-width = 20px
 sidebar-width = 220px
 mobile-nav-width = 260px

diff --git a/docs/themes/navy/source/js/main.js b/docs/themes/navy/source/js/main.js
@@ -76,9 +76,20 @@
   editor.on('change', update);
   dataEditor.on('change', update);
   update();
+  ready();
+
+  function ready() {
+    const loader = document.querySelector('.loader');
+    loader.classList.add('hide');
+    loader.setAttribute('aria-busy', false);
+
+    const editors = document.querySelector('#editors');
+    editors.classList.remove('hide');
+    editors.setAttribute('aria-hide', false);
+  }
 
   function createEditor(id, lang) {
-    var editor = ace.edit(id);
+    const editor = ace.edit(id);
     editor.setTheme('ace/theme/tomorrow_night');
     editor.getSession().setMode('ace/mode/' + lang);
     editor.getSession().setOptions({