From a7ffbd022fc41e5ebb3509907708a3f4dc65419e Mon Sep 17 00:00:00 2001
From: Max Brunsfeld <maxbrunsfeld@gmail.com>
Date: Tue, 12 Jun 2018 17:37:46 -0700
Subject: [PATCH] Make docs page readable on mobile

---
 docs/_layouts/default.html | 151 +++++++++++++++++++------------------
 docs/assets/css/style.scss | 115 +++++++++++++++++++++++-----
 docs/index.md              |   5 +-
 3 files changed, 176 insertions(+), 95 deletions(-)
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 1bee1a8a..3e5c82ae 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -4,99 +4,93 @@
 <head>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" media="screen">
   <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}" media="screen" type="text/css">
   <title>{{ page.title }}</title>
 </head>
 
-<body>
-  <div style="position: fixed; width: 100%;">
-    <div class="container" style="height: 100%;">
-      <div class="row" style="height: 0;">
-        <div class="col-md-4">
-          <nav id="table-of-contents">
-            <a class="logo" href="https://github.com/tree-sitter/tree-sitter">
-              <img src="{{ '/assets/images/tree-sitter-small.png' | relative_url }}" width=200 height=200 />
-            </a>
+<body class="sidebar-hidden">
+  <script>
+    if (localStorage.getItem('sidebar-active') === 'true') {
+      document.body.classList.remove('sidebar-hidden');
+    }
+  </script>
 
-            {% for other_page in site.html_pages %}
-              {% if page.title == other_page.title %}
-                <li class="toc-section active">
-                  <a class="nav-link" href="{{ other_page.url | relative_url }}">
-                    {{ other_page.title }}
-                  </a>
+  <div id="container">
+    <div id="sidebar">
+      <nav id="table-of-contents">
+        <a class="logo table-of-contents-section" href="https://github.com/tree-sitter/tree-sitter">
+          <img src="{{ '/assets/images/tree-sitter-small.png' | relative_url }}" width=200 height=200 />
+        </a>
 
-                  <ul id="current-page-table-of-contents" class="nav navbar">
-                    {% capture whitespace %}
-                    {% assign min_header = 2 %}
-                    {% assign nodes = content | split: "<h" %}
-                    {% assign first_header = true %}
-                    {% for node in nodes %}
-                      {% if node == "" %}
-                        {% continue %}
-                      {% endif %}
+        {% for other_page in site.html_pages %}
+          {% if page.title == other_page.title %}
+            <li class="table-of-contents-section active">
+              <a class="nav-link" href="{{ other_page.url | relative_url }}">
+                {{ other_page.title }}
+              </a>
 
-                      {% assign header_level = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
+              <div id="current-page-table-of-contents">
+                {% capture whitespace %}
+                {% assign min_header = 2 %}
+                {% assign nodes = content | split: "<h" %}
+                {% assign first_header = true %}
+                {% for node in nodes %}
+                  {% if node == "" %}
+                    {% continue %}
+                  {% endif %}
 
-                      {% if header_level < min_header or header_level > maxHeader %}
-                        {% continue %}
-                      {% endif %}
+                  {% assign header_level = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
 
-                      {% if first_header %}
-                        {% assign first_header = false %}
-                        {% assign min_header = header_level %}
-                      {% endif %}
+                  {% if header_level < min_header or header_level > maxHeader %}
+                    {% continue %}
+                  {% endif %}
 
-                      {% assign indent_level = header_level | minus: min_header | add: 1 %}
-                      {% assign header_content = node | split: '</h' %}
-                      {% assign header_content = header_content[0] %}
+                  {% if first_header %}
+                    {% assign first_header = false %}
+                    {% assign min_header = header_level %}
+                  {% endif %}
 
-                      {% assign html_id = header_content | split: 'id="' %}
-                      {% assign html_id = html_id[1] | split: '"' %}
-                      {% assign html_id = html_id[0] %}
+                  {% assign indent_level = header_level | minus: min_header | add: 1 %}
+                  {% assign header_content = node | split: '</h' %}
+                  {% assign header_content = header_content[0] %}
 
-                      {% capture header_attrs_to_strip %}{{ header_content | split: '>' | first }}>{% endcapture %}
-                      {% assign header = header_content | replace: header_attrs_to_strip, '' %}
+                  {% assign html_id = header_content | split: 'id="' %}
+                  {% assign html_id = html_id[1] | split: '"' %}
+                  {% assign html_id = html_id[0] %}
 
-                      {% assign space = '' %}
-                      {% for i in (1..indent_level) %}
-                        {% assign space = space | prepend: '    ' %}
-                      {% endfor %}
+                  {% capture header_attrs_to_strip %}{{ header_content | split: '>' | first }}>{% endcapture %}
+                  {% assign header = header_content | replace: header_attrs_to_strip, '' %}
+
+                  {% assign space = '' %}
+                  {% for i in (1..indent_level) %}
+                    {% assign space = space | prepend: '    ' %}
+                  {% endfor %}
 
 {% capture my_toc %}{{ my_toc }}
 {{ space }}- [{{ header }}](#{{ html_id }}){: .nav-link}{% endcapture %}
 
-                    {% endfor %}
-                    {% endcapture %}
-                    {{ my_toc | strip | markdownify | strip }}
-                  </ul>
-                </li>
-              {% else %}
-                <li class="toc-section">
-                  <a class="nav-link" href="{{ other_page.url | relative_url }}">
-                    {{ other_page.title }}
-                  </a>
-                </li>
-              {% endif %}
-            {% endfor %}
-          </nav>
-        </div>
-      </div>
+                {% endfor %}
+                {% endcapture %}
+                {{ my_toc | strip | markdownify | strip }}
+              </ul>
+            </li>
+          {% else %}
+            <li class="table-of-contents-section">
+              <a class="nav-link" href="{{ other_page.url | relative_url }}">
+                {{ other_page.title }}
+              </a>
+            </li>
+          {% endif %}
+        {% endfor %}
+      </nav>
     </div>
+
+    <a id="sidebar-toggle-link" href="#">☰</a>
+
+    <main id="main-content">
+      {{ content }}
+    </main>
   </div>
-
-  <main class="container">
-    <div class="row">
-      <div class="col-md-4" style="pointer-events: none;">
-      </div>
-
-      <div class="col-md-8 content">
-        <div id="main-content">
-          {{ content }}
-        </div>
-      </div>
-    </div>
-  </main>
 </body>
 </html>
 
@@ -110,6 +104,15 @@
 </script>
 
 <script>
+  $('#sidebar-toggle-link').click(function(e) {
+    e.preventDefault();
+    $(document.body).toggleClass('sidebar-hidden');
+    localStorage.setItem(
+      'sidebar-active',
+      localStorage.getItem('sidebar-active') === 'true' ? 'false' : 'true'
+    );
+  });
+
   if (document.body.scrollHeight > window.innerHeight) {
     $(document.body).scrollspy({
       target: '#current-page-table-of-contents',
diff --git a/docs/assets/css/style.scss b/docs/assets/css/style.scss
index 75ec2f4f..48a42816 100644
--- a/docs/assets/css/style.scss
+++ b/docs/assets/css/style.scss
@@ -3,38 +3,115 @@
 
 @import 'jekyll-theme-cayman';
 
-#main-content, #table-of-contents {
-  padding-top: 20px;
+$padding: 20px;
+$sidebar-width: 300px;
+$sidebar-transition: left 0.25s;
+$container-width: 1024px;
+
+body {
+  overflow-y: scroll;
+  overflow-x: hidden;
 }
 
-#table-of-contents {
+#container {
+  position: relative;
+  max-width: $container-width;
+  margin: 0 auto;
+}
+
+#main-content, #sidebar {
+  padding: $padding 0;
+}
+
+#sidebar {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: $sidebar-width;
+  overflow-y: auto;
   border-right: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+  z-index: 1;
+}
+
+#sidebar-toggle-link {
+  font-size: 24px;
+  position: fixed;
+  background-color: white;
+  box-shadow: 1px 1px 5px #aaa;
+  left: $sidebar-width;
+  padding: 5px 10px;
+  display: none;
+  z-index: 100;
+  text-decoration: none !important;
+  color: #aaa;
+}
+
+#main-content {
+  position: relative;
+  padding: $padding;
+  padding-left: $sidebar-width + $padding;
 }
 
 .nav-link.active {
   text-decoration: underline;
 }
 
-.logo {
-  padding: 20px;
-  padding-top: 0;
-  display: block;
-}
-
-.toc-section:not(:last-child), .logo {
+.table-of-contents-section {
   border-bottom: 1px solid #ccc;
 }
 
-.toc-section.active {
-  background-color: #edffcb;
-}
-
-li {
+.logo {
   display: block;
 }
 
-body {
-  overflow-y: scroll;
-  padding-bottom: 100px;
+.table-of-contents-section.active {
+  background-color: #edffcb;
+}
+
+.table-of-contents-section {
+  padding: 10px 20px;
+}
+
+#table-of-contents {
+  ul {
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    display: block;
+    padding: 5px 20px;
+  }
+}
+
+@media (max-width: 900px) {
+  #sidebar {
+    left: 0;
+    transition: $sidebar-transition;
+  }
+
+  #sidebar-toggle-link {
+    display: block;
+    transition: $sidebar-transition;
+  }
+
+  #main-content {
+    left: $sidebar-width;
+    padding-left: $padding;
+    transition: $sidebar-transition;
+  }
+
+  body.sidebar-hidden {
+    #sidebar {
+      left: -$sidebar-width;
+    }
+
+    #main-content {
+      left: 0;
+    }
+
+    #sidebar-toggle-link {
+      left: 0;
+    }
+  }
 }
diff --git a/docs/index.md b/docs/index.md
index 9e8a720c..dd4014d1 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -22,12 +22,13 @@ There are currently bindings that allow Tree-sitter to be used from the followin
 
 ### Available Parsers
 
-There are fairly complete parsers for the following languages:
+Parsers for these languages are fairly complete:
 
 * [Bash](https://github.com/tree-sitter/tree-sitter-bash)
 * [C](https://github.com/tree-sitter/tree-sitter-c)
 * [C++](https://github.com/tree-sitter/tree-sitter-cpp)
 * [Go](https://github.com/tree-sitter/tree-sitter-go)
+* [HTML](https://github.com/tree-sitter/tree-sitter-html)
 * [JavaScript](https://github.com/tree-sitter/tree-sitter-javascript)
 * [PHP](https://github.com/tree-sitter/tree-sitter-php)
 * [Python](https://github.com/tree-sitter/tree-sitter-python)
@@ -35,7 +36,7 @@ There are fairly complete parsers for the following languages:
 * [Rust](https://github.com/tree-sitter/tree-sitter-rust)
 * [TypeScript](https://github.com/tree-sitter/tree-sitter-typescript)
 
-There are parsers in development for these languages:
+Parsers for these languages are in development:
 
 * [Haskell](https://github.com/tree-sitter/tree-sitter-haskell)
 * [Java](https://github.com/tree-sitter/tree-sitter-java)
