docs: switch to 3-column layout if screen is big enough (#121)

and make the Table of Contents more accessible
cyjake · Jun 25, 2021 · 2eb5220 · 2eb5220
1 parent 1eff174
commit 2eb5220
Show file tree

Hide file tree

Showing 16 changed files with 170 additions and 13 deletions.
diff --git a/docs/_layouts/en.html b/docs/_layouts/en.html
@@ -22,12 +22,16 @@
             <li><a href="{{ '/sequelize' | relative_url }}">Sequelize Adapter</a></li>
           </ul>
         </li>
+        <li class="nav-item dropdown-trigger">
+          <a href="{{ '/setup' | relative_url }}">Setup</a>
+          <ul class="dropdown-list">
+            <li><a href="{{ /setup/egg' | relative_url }}">Setup Egg Applications</a></li>
+            <li><a href="{{ /setup/express' | relative_url }}">[wip]Setup Express Applications</a></li>
+          </ul>
+        </li>
         <li class="nav-item">
           <a href="{{ '/api' | relative_url }}">API</a>
         </li>
-        <li class="nav-item dropdown-trigger">
-          <a href="https://github.com/cyjake/leoric/releases">Releases</a>
-        </li>
         <li class="nav-item dropdown-trigger">
           <a href="{{ '/zh' | relative_url }}">中文</a>
         </li>

diff --git a/docs/_layouts/zh.html b/docs/_layouts/zh.html
@@ -11,7 +11,7 @@
           <a href="{{ '/zh' | relative_url }}">首页</a>
         </li>
         <li class="nav-item dropdown-trigger">
-          <a href="{{ '/zh/basics' | relative_url }}">上手指南</a>
+          <a href="{{ '/zh/basics' | relative_url }}">帮助手册</a>
           <ul class="dropdown-list">
             <li><a href="{{ '/zh/basics' | relative_url }}">基础</a></li>
             <li><a href="{{ '/zh/migrations' | relative_url }}">迁移任务</a></li>
@@ -22,12 +22,16 @@
             <li><a href="{{ '/zh/sequelize' | relative_url }}">Sequelize 适配器</a></li>
           </ul>
         </li>
+        <li class="nav-item dropdown-trigger">
+          <a href="{{ '/zh/setup' | relative_url }}">快速配置</a>
+          <ul class="dropdown-list">
+            <li><a href="{{ 'zh/setup/egg' | relative_url }}">Egg 应用配置</a></li>
+            <li><a href="{{ 'zh/setup/express' | relative_url }}">[wip] Express 应用配置</a></li>
+          </ul>
+        </li>
         <li class="nav-item">
           <a href="{{ '/api' | relative_url }}">API</a>
         </li>
-        <li class="nav-item dropdown-trigger">
-          <a href="https://github.com/cyjake/leoric/releases">发布日志</a>
-        </li>
         <li class="nav-item dropdown-trigger">
           <a href="{{ '/' | relative_url }}">English</a>
         </li>

diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
@@ -57,7 +57,6 @@
       position: absolute;
       top: 100%;
       right: -0.5em;
-      min-width: 140px;
       text-align: right;
       background: #f0f0f0;
       border: 1px solid #e0e0e0;
@@ -66,7 +65,8 @@
 
       li {
         list-style: none;
-        padding-left: 0;
+        padding-left: 0.25em;
+        white-space: nowrap;
       }
 
       a {
@@ -104,7 +104,86 @@
   }
 }
 
-@media(min-width: 1000px) {
+@media(min-width: 1400px) {
+  #header {
+    position: fixed;
+    // half the width of container-lg
+    right: calc(50% + 506px);
+    top: 26px;
+    min-width: 200px;
+    background: none;
+    border-bottom: none;
+
+    .container-lg {
+      padding-left: 0 !important;
+      padding-right: 0 !important;
+    }
+
+    a.logo {
+      background: url(/favicon.ico) no-repeat 32px 8px;
+      background-size: 40px;
+      display: block;
+      height: 56px;
+      padding-left: 84px;
+      padding-top: 6px;
+      margin-bottom: 12px;
+      font-size: 2em;
+      font-weight: bold;
+      color: #FF7F61;
+    }
+
+    a {
+      padding: 6px 12px 6px 32px;
+
+      &:hover {
+        background-color: #f0f0f0;
+        text-decoration: none;
+      }
+    }
+
+    nav {
+      float: none;
+
+      .nav-item {
+        display: block;
+        padding: 0;
+      }
+
+      .dropdown-trigger:hover:after {
+        display: none;
+      }
+
+      .dropdown-list {
+        display: block;
+        text-align: left;
+        background: none;
+        padding: 0;
+        position: static;
+        border: none;
+
+        li {
+          padding-left: 0;
+
+          a {
+            padding: 6px 12px 6px 60px;
+          }
+        }
+      }
+    }
+  }
+
+  #markdown-toc {
+    position: fixed;
+    left: calc(50% + 506px);
+    top: 92px;
+    bottom: 16px;
+    overflow: auto;
+  }
+
+  .no_toc {
+    display: none;
+  }
+
   .belongs-to-erd,
   .has-many-erd,
   .has-one-erd {
@@ -125,3 +204,9 @@
     width: 462px;
   }
 }
+
+@media(min-width: 1600px) {
+  #header {
+    min-width: 230px;
+  }
+}
diff --git a/docs/basics.md b/docs/basics.md
@@ -163,9 +163,9 @@ const realm = new Realm({
 await realm.sync();
 ```
 
-`realm.sync()` not only connects models to database, but also tries to synchronize `Model.attributes` in each model back to database structure automatically to make sure consistency between each other. If your application data changes a log, this practice is not recommended.
+`realm.sync()` not only connects models to database, but also tries to synchronize `Model.attributes` in each model back to database structure automatically to make sure consistency between each other. If your application data changes a lot, this practice is not recommended.
 
-Intead, it is recommended only connecting to database but not to synchronize to it. Please use the [migration]({ '/migrations' | relative_url }) feature to change database structure.
+In that case, please use the [migrations]({{ '/migrations' | relative_url }}) to change database structure instead.
 
 ```js
 const Realm = require('leoric');

diff --git a/docs/index.md b/docs/index.md
@@ -1,5 +1,6 @@
 ---
 layout: en
+title: Intro
 ---
 
 Leoric is an object-relational mapping library for Node.js, with which you can manipulate database like this:
@@ -41,6 +42,12 @@ async function() {
 
 本站点提供[中文版本]({{ '/zh' | relative_url }})，猛戳左边了解更多。
 
+## Table of Contents
+{:.no_toc}
+
+1. Table of Contents
+{:toc}
+
 ## Use in Web Frameworks
 
 Leoric can be used in many web frameworkds from Node.js community. If you are developing with egg framework, it is highly recommended using the egg-orm plugin:

diff --git a/docs/migrations.md b/docs/migrations.md
@@ -4,6 +4,11 @@ layout: en
 
 Developers can use migrations to manage operations that changes table schema etc.
 
+## Table of Contents
+{:.no_toc}
+
+1. Table of Contents
+{:toc}
 ## What Is A Migration
 
 Take following migration for example:

diff --git a/docs/sequelize.md b/docs/sequelize.md
@@ -16,6 +16,12 @@ await realm.sync();
 
 When sequelize adapter is active, the model API will behave similarly with the actual [Sequelize Model](https://sequelize.org/master/class/lib/model.js~Model.html). See the content below for detail.
 
+## 目录
+{:.no_toc}
+
+1. 目录
+{:toc}
+
 ## CRUD: Reading and Writing Data
 
 ### Dirty Check

diff --git a/docs/setup/egg.md b/docs/setup/egg.md
@@ -5,6 +5,12 @@ title: Setup Leoric in Egg Applications
 
 To reduce the effort to setup Leoric in Egg applications, a specific Egg plugin called [egg-orm](https://github.com/eggjs/egg-orm) is provided.
 
+## Table of Contents
+{:.no_toc}
+
+1. Table of Contents
+{:toc}
+
 ## Install
 
 ```bash

diff --git a/docs/setup/express.md b/docs/setup/express.md
@@ -3,3 +3,8 @@ layout: en
 title: Setup Leoric in Express
 ----
 
+## Table of Contents
+{:.no_toc}
+
+1. Table of Contents
+{:toc}
diff --git a/docs/zh/index.md b/docs/zh/index.md
@@ -1,5 +1,6 @@
 ---
 layout: zh
+title: 简介
 ---
 
 Leoric 是一个 Node.js 的关系对象映射库（ORM），使用 Leoric 操作数据库的方式大致如下：
@@ -35,7 +36,11 @@ async function() {
 }
 ```
 
-推荐阅读[基本功能](./basics)一文了解更多有关模型声明和数据操作的介绍。除了基础功能，Leoric 还支持[表结构变更](./migrations)、[数据校验](./validations)、[钩子](./hooks)、[关联关系](./associations)、以及[高级查询](./querying)。
+## 目录
+{:.no_toc}
+
+1. 目录
+{:toc}
 
 ## 在 Web 开发框架中使用
 

diff --git a/docs/zh/logging.md b/docs/zh/logging.md
diff --git a/docs/zh/migrations.md b/docs/zh/migrations.md
@@ -4,6 +4,12 @@ layout: zh
 
 Leoric 提供迁移任务来帮助开发者完成日常工作中的表结构变更与数据迁移。
 
+## 目录
+{:.no_toc}
+
+1. 目录
+{:toc}
+
 ## 什么是迁移任务
 
 以下面这个迁移任务为例：

diff --git a/docs/zh/sequelize.md b/docs/zh/sequelize.md
@@ -16,6 +16,12 @@ await realm.sync();
 
 开启 Sequelize 适配器之后，数据模型的 API 将和 [Sequelize Model](https://sequelize.org/master/class/lib/model.js~Model.html) 基本保持一致，具体异同见下文。
 
+## 目录
+{:.no_toc}
+
+1. 目录
+{:toc}
+
 ## 读取与写入数据
 
 ### 脏检查

diff --git a/docs/zh/setup/egg.md b/docs/zh/setup/egg.md
@@ -5,6 +5,12 @@ title: 在 Egg 应用中使用 Leoric
 
 我们为 Egg 准备了专门的插件 [egg-orm](https://github.com/eggjs/egg-orm)，使用 egg-orm 即可快速搞定 Egg 应用中的数据模型定义以及消费。
 
+## 目录
+{:.no_toc}
+
+1. 目录
+{:toc}
+
 ## 安装
 
 ```bash

diff --git a/docs/zh/setup/expresss.md → docs/zh/setup/express.md b/docs/zh/setup/expresss.md → docs/zh/setup/express.md
@@ -3,3 +3,8 @@ layout: zh
 title: 在 Express 应用中使用 Leoric
 ---
 
+## 目录
+{:.no_toc}
+
+1. 目录
+{:toc}
diff --git a/docs/zh/setup/index.md b/docs/zh/setup/index.md
@@ -0,0 +1,7 @@
+---
+layout: zh
+title: 快速配置
+---
+
+- [在 Egg 应用中配置]({{ '/zh/setup/egg' | relative_url }})
+- [在 Express 应用中配置]({{ '/zh/setup/express' | relative_url }})