Skip to content
This repository was archived by the owner on Aug 16, 2022. It is now read-only.

Commit bfcf72e

Browse files
aetteraetter
committed
Adds table of contents when width permits
1 parent db2c669 commit bfcf72e

File tree

7 files changed

+333
-165
lines changed

7 files changed

+333
-165
lines changed

‎Gemfile

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ source "https://rubygems.org"
1111
gem "jekyll", "~> 3.8.5"
1212

1313
# This is the default theme for new Jekyll sites. You may change this to anything you like.
14-
gem "just-the-docs", "~> 0.2.5"
14+
gem "just-the-docs", "~> 0.2.7"
1515

1616
# If you want to use GitHub Pages, remove the "gem "jekyll"" above and
1717
# uncomment the line below. To upgrade, run `bundle update github-pages`.

‎THIRD-PARTY

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
Copyright (c) 2016 Patrick Marsceill
44

5+
** (MIT License) Jekyll Pure Liquid Table of Contents 1.0.8 - https://github.com/allejo/jekyll-toc
6+
7+
Copyright (c) 2017 Vladimir Jimenez
8+
59
** (Apache License, Version 2.0) Elasticsearch 7.4.2 - https://github.com/elastic/elasticsearch
610

711
Elasticsearch

‎_includes/toc.html

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
{% capture tocWorkspace %}
2+
{% comment %}
3+
Version 1.0.8
4+
https://github.com/allejo/jekyll-toc
5+
6+
"...like all things liquid - where there's a will, and ~36 hours to spare, there's usually a/some way" ~jaybe
7+
8+
Usage:
9+
{% include toc.html html=content sanitize=true class="inline_toc" id="my_toc" h_min=2 h_max=3 %}
10+
11+
Parameters:
12+
* html (string) - the HTML of compiled markdown generated by kramdown in Jekyll
13+
14+
Optional Parameters:
15+
* sanitize (bool) : false - when set to true, the headers will be stripped of any HTML in the TOC
16+
* class (string) : '' - a CSS class assigned to the TOC
17+
* id (string) : '' - an ID to assigned to the TOC
18+
* h_min (int) : 1 - the minimum TOC header level to use; any header lower than this value will be ignored
19+
* h_max (int) : 6 - the maximum TOC header level to use; any header greater than this value will be ignored
20+
* ordered (bool) : false - when set to true, an ordered list will be outputted instead of an unordered list
21+
* item_class (string) : '' - add custom class(es) for each list item; has support for '%level%' placeholder, which is the current heading level
22+
* baseurl (string) : '' - add a base url to the TOC links for when your TOC is on another page than the actual content
23+
* anchor_class (string) : '' - add custom class(es) for each anchor element
24+
25+
Output:
26+
An ordered or unordered list representing the table of contents of a markdown block. This snippet will only
27+
generate the table of contents and will NOT output the markdown given to it
28+
{% endcomment %}
29+
30+
{% capture my_toc %}{% endcapture %}
31+
{% assign orderedList = include.ordered | default: false %}
32+
{% assign minHeader = include.h_min | default: 1 %}
33+
{% assign maxHeader = include.h_max | default: 6 %}
34+
{% assign nodes = include.html | split: '<h' %}
35+
{% assign firstHeader = true %}
36+
37+
{% capture listModifier %}{% if orderedList %}1.{% else %}-{% endif %}{% endcapture %}
38+
39+
{% for node in nodes %}
40+
{% if node == "" %}
41+
{% continue %}
42+
{% endif %}
43+
44+
{% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}
45+
46+
{% if headerLevel < minHeader or headerLevel > maxHeader %}
47+
{% continue %}
48+
{% endif %}
49+
50+
{% if firstHeader %}
51+
{% assign firstHeader = false %}
52+
{% assign minHeader = headerLevel %}
53+
{% endif %}
54+
55+
{% assign indentAmount = headerLevel | minus: minHeader %}
56+
{% assign _workspace = node | split: '</h' %}
57+
58+
{% assign _idWorkspace = _workspace[0] | split: 'id="' %}
59+
{% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
60+
{% assign html_id = _idWorkspace[0] %}
61+
62+
{% assign _classWorkspace = _workspace[0] | split: 'class="' %}
63+
{% assign _classWorkspace = _classWorkspace[1] | split: '"' %}
64+
{% assign html_class = _classWorkspace[0] %}
65+
66+
{% if html_class contains "no_toc" %}
67+
{% continue %}
68+
{% endif %}
69+
70+
{% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
71+
{% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
72+
73+
{% assign space = '' %}
74+
{% for i in (1..indentAmount) %}
75+
{% assign space = space | prepend: ' ' %}
76+
{% endfor %}
77+
78+
{% unless include.item_class == blank %}
79+
{% capture listItemClass %}{:.{{ include.item_class | replace: '%level%', headerLevel }}}{% endcapture %}
80+
{% endunless %}
81+
82+
{% capture heading_body %}{% if include.sanitize %}{{ header | strip_html }}{% else %}{{ header }}{% endif %}{% endcapture %}
83+
{% capture my_toc %}{{ my_toc }}
84+
{{ space }}{{ listModifier }} {{ listItemClass }} [{{ heading_body | replace: "|", "\|" }}]({% if include.baseurl %}{{ include.baseurl }}{% endif %}#{{ html_id }}){% if include.anchor_class %}{:.{{ include.anchor_class }}}{% endif %}{% endcapture %}
85+
{% endfor %}
86+
87+
{% if include.class %}
88+
{% capture my_toc %}{:.{{ include.class }}}
89+
{{ my_toc | lstrip }}{% endcapture %}
90+
{% endif %}
91+
92+
{% if include.id %}
93+
{% capture my_toc %}{: #{{ include.id }}}
94+
{{ my_toc | lstrip }}{% endcapture %}
95+
{% endif %}
96+
{% endcapture %}{% assign tocWorkspace = '' %}{{ my_toc | markdownify | strip }}

‎_layouts/default.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,9 @@ <h2 class="text-delta">Table of contents</h2>
8989
</div>
9090
</div>
9191
</div>
92+
<div class="toc">
93+
{% include toc.html html=content h_min=2 h_max=3 class="toc-list" item_class="toc-item" sanitize=true %}
94+
</div>
9295
{% if site.anchor_links != nil %}
9396
<script>
9497
anchors.add();

‎_sass/custom/custom.scss

Lines changed: 1 addition & 155 deletions
Original file line numberDiff line numberDiff line change
@@ -1,155 +1 @@
1-
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700');
2-
3-
body {
4-
padding-bottom: 6rem;
5-
font-family: 'Open Sans', sans-serif;
6-
@include mq(md) {
7-
padding-bottom: 0;
8-
}
9-
}
10-
11-
.page-content {
12-
ol {
13-
> li {
14-
&:before {
15-
color: $grey-dk-100;
16-
}
17-
}
18-
}
19-
ul {
20-
> li {
21-
&:before {
22-
color: $grey-dk-100;
23-
}
24-
}
25-
}
26-
}
27-
28-
.site-title {
29-
@include mq(md) {
30-
padding-top: 0;
31-
padding-bottom: 0;
32-
padding-left: $sp-5;
33-
}
34-
img {
35-
height: 100%;
36-
max-width: 208px;
37-
}
38-
}
39-
40-
.navigation-list-toggle {
41-
top: $sp-5;
42-
}
43-
44-
h1, h2, h3, h4, h5, h6 {
45-
margin-top: 2.4rem;
46-
}
47-
48-
.img-border {
49-
border: 1px solid $grey-lt-200;
50-
}
51-
52-
// Note, tip, and warning blocks
53-
54-
%callout {
55-
border: 1px solid $grey-lt-200;
56-
border-radius: 5px;
57-
margin: 1rem 0;
58-
padding: 1rem;
59-
position: relative;
60-
}
61-
62-
.note {
63-
@extend %callout;
64-
border-left: 5px solid $blue-300;
65-
}
66-
67-
.tip {
68-
@extend %callout;
69-
border-left: 5px solid $green-300;
70-
}
71-
72-
.warning {
73-
@extend %callout;
74-
border-left: 5px solid $red-300;
75-
}
76-
77-
// Labels
78-
79-
.label,
80-
.label-blue {
81-
background-color: $blue-300;
82-
}
83-
84-
.label-green {
85-
background-color: $green-300;
86-
}
87-
88-
.label-purple {
89-
background-color: $purple-300;
90-
}
91-
92-
.label-red {
93-
background-color: $red-300;
94-
}
95-
96-
.label-yellow {
97-
color: $grey-dk-200;
98-
background-color: $yellow-300;
99-
}
100-
101-
// Buttons
102-
103-
.btn-primary {
104-
@include btn-color($white, $btn-primary-color);
105-
}
106-
107-
.btn-purple {
108-
@include btn-color($white, $purple-dk-100);
109-
}
110-
111-
.btn-blue {
112-
@include btn-color($white, $blue-300);
113-
}
114-
115-
.btn-green {
116-
@include btn-color($white, $green-300);
117-
}
118-
119-
// Tables
120-
121-
th,
122-
td {
123-
border-bottom: $border rgba($table-border-color, 0.5);
124-
border-left: $border $table-border-color;
125-
}
126-
127-
thead {
128-
th {
129-
border-bottom: 1px solid $table-border-color;
130-
}
131-
}
132-
td {
133-
pre {
134-
margin-bottom: 0;
135-
}
136-
}
137-
138-
// Keeps labels high and tight next to headers
139-
140-
h1 + p.label {
141-
margin: -46px 0 0 0;
142-
}
143-
h2 + p.label {
144-
margin: -30px 0 0 0;
145-
}
146-
h3 + p.label {
147-
margin: -20px 0 0 0;
148-
}
149-
h4 + p.label,
150-
h6 + p.label {
151-
margin: -14px 0 0 0;
152-
}
153-
h5 + p.label {
154-
margin: -15px 0 0 0;
155-
}
1+
$toc-width: 200px !default;

0 commit comments

Comments
 (0)