Make docs page readable on mobile
This commit is contained in:
parent
d1665da21c
commit
a7ffbd022f
3 changed files with 176 additions and 95 deletions
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue