Skip to content

Commit e51582f

Browse files
authored
Merge pull request #270 from gtk-rs/anchor-on-headings
Add anchors on headings
2 parents 02a2766 + e362bd3 commit e51582f

File tree

4 files changed

+185
-3
lines changed

4 files changed

+185
-3
lines changed

_includes/anchor_headings.html

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
{% capture headingsWorkspace %}
2+
{% comment %}
3+
Copyright (c) 2018 Vladimir "allejo" Jimenez
4+
5+
Permission is hereby granted, free of charge, to any person
6+
obtaining a copy of this software and associated documentation
7+
files (the "Software"), to deal in the Software without
8+
restriction, including without limitation the rights to use,
9+
copy, modify, merge, publish, distribute, sublicense, and/or sell
10+
copies of the Software, and to permit persons to whom the
11+
Software is furnished to do so, subject to the following
12+
conditions:
13+
14+
The above copyright notice and this permission notice shall be
15+
included in all copies or substantial portions of the Software.
16+
17+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
18+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
19+
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
20+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
21+
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
22+
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
23+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
24+
OTHER DEALINGS IN THE SOFTWARE.
25+
{% endcomment %}
26+
{% comment %}
27+
Version 1.0.9
28+
https://github.com/allejo/jekyll-anchor-headings
29+
30+
"Be the pull request you wish to see in the world." ~Ben Balter
31+
32+
Usage:
33+
{% include anchor_headings.html html=content anchorBody="#" %}
34+
35+
Parameters:
36+
* html (string) - the HTML of compiled markdown generated by kramdown in Jekyll
37+
38+
Optional Parameters:
39+
* beforeHeading (bool) : false - Set to true if the anchor should be placed _before_ the heading's content
40+
* headerAttrs (string) : '' - Any custom HTML attributes that will be added to the heading tag; you may NOT use `id`;
41+
the `%heading%` and `%html_id%` placeholders are available
42+
* anchorAttrs (string) : '' - Any custom HTML attributes that will be added to the `<a>` tag; you may NOT use `href`, `class` or `title`;
43+
the `%heading%` and `%html_id%` placeholders are available
44+
* anchorBody (string) : '' - The content that will be placed inside the anchor; the `%heading%` placeholder is available
45+
* anchorClass (string) : '' - The class(es) that will be used for each anchor. Separate multiple classes with a space
46+
* anchorTitle (string) : '' - The `title` attribute that will be used for anchors
47+
* h_min (int) : 1 - The minimum header level to build an anchor for; any header lower than this value will be ignored
48+
* h_max (int) : 6 - The maximum header level to build an anchor for; any header greater than this value will be ignored
49+
* bodyPrefix (string) : '' - Anything that should be inserted inside of the heading tag _before_ its anchor and content
50+
* bodySuffix (string) : '' - Anything that should be inserted inside of the heading tag _after_ its anchor and content
51+
52+
Output:
53+
The original HTML with the addition of anchors inside of all of the h1-h6 headings.
54+
{% endcomment %}
55+
56+
{% assign minHeader = include.h_min | default: 1 %}
57+
{% assign maxHeader = include.h_max | default: 6 %}
58+
{% assign beforeHeading = include.beforeHeading %}
59+
{% assign nodes = include.html | split: '<h' %}
60+
61+
{% capture edited_headings %}{% endcapture %}
62+
63+
{% for _node in nodes %}
64+
{% capture node %}{{ _node | strip }}{% endcapture %}
65+
66+
{% if node == "" %}
67+
{% continue %}
68+
{% endif %}
69+
70+
{% assign nextChar = node | replace: '"', '' | strip | slice: 0, 1 %}
71+
{% assign headerLevel = nextChar | times: 1 %}
72+
73+
<!-- If the level is cast to 0, it means it's not a h1-h6 tag, so let's see if we need to fix it -->
74+
{% if headerLevel == 0 %}
75+
<!-- Split up the node based on closing angle brackets and get the first one. -->
76+
{% assign firstChunk = node | split: '>' | first %}
77+
78+
<!-- If the first chunk does NOT contain a '<', that means we've broken another HTML tag that starts with 'h' -->
79+
{% unless firstChunk contains '<' %}
80+
{% capture node %}<h{{ node }}{% endcapture %}
81+
{% endunless %}
82+
83+
{% capture edited_headings %}{{ edited_headings }}{{ node }}{% endcapture %}
84+
{% continue %}
85+
{% endif %}
86+
87+
{% capture _closingTag %}</h{{ headerLevel }}>{% endcapture %}
88+
{% assign _workspace = node | split: _closingTag %}
89+
{% assign _idWorkspace = _workspace[0] | split: 'id="' %}
90+
{% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
91+
{% assign html_id = _idWorkspace[0] %}
92+
93+
{% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
94+
{% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}
95+
96+
<!-- Build the anchor to inject for our heading -->
97+
{% capture anchor %}{% endcapture %}
98+
99+
{% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %}
100+
{% assign escaped_header = header | strip_html %}
101+
102+
{% if include.headerAttrs %}
103+
{% capture _hAttrToStrip %}{{ _hAttrToStrip | split: '>' | first }} {{ include.headerAttrs | replace: '%heading%', escaped_header | replace: '%html_id%', html_id }}>{% endcapture %}
104+
{% endif %}
105+
106+
{% capture anchor %}href="#{{ html_id }}"{% endcapture %}
107+
108+
{% if include.anchorClass %}
109+
{% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %}
110+
{% endif %}
111+
112+
{% if include.anchorTitle %}
113+
{% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', escaped_header }}"{% endcapture %}
114+
{% endif %}
115+
116+
{% if include.anchorAttrs %}
117+
{% capture anchor %}{{ anchor }} {{ include.anchorAttrs | replace: '%heading%', escaped_header | replace: '%html_id%', html_id }}{% endcapture %}
118+
{% endif %}
119+
120+
{% capture anchor %}<a {{ anchor }}>{{ include.anchorBody | replace: '%heading%', escaped_header | default: '' }}</a>{% endcapture %}
121+
122+
<!-- In order to prevent adding extra space after a heading, we'll let the 'anchor' value contain it -->
123+
{% if beforeHeading %}
124+
{% capture anchor %}{{ anchor }} {% endcapture %}
125+
{% else %}
126+
{% capture anchor %} {{ anchor }}{% endcapture %}
127+
{% endif %}
128+
{% endif %}
129+
130+
{% capture new_heading %}
131+
<h{{ _hAttrToStrip }}
132+
{{ include.bodyPrefix }}
133+
{% if beforeHeading %}
134+
{{ anchor }}{{ header }}
135+
{% else %}
136+
{{ header }}{{ anchor }}
137+
{% endif %}
138+
{{ include.bodySuffix }}
139+
</h{{ headerLevel }}>
140+
{% endcapture %}
141+
142+
<!--
143+
If we have content after the `</hX>` tag, then we'll want to append that here so we don't lost any content.
144+
-->
145+
{% assign chunkCount = _workspace | size %}
146+
{% if chunkCount > 1 %}
147+
{% capture new_heading %}{{ new_heading }}{{ _workspace | last }}{% endcapture %}
148+
{% endif %}
149+
150+
{% capture edited_headings %}{{ edited_headings }}{{ new_heading }}{% endcapture %}
151+
{% endfor %}
152+
{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}

_layouts/default.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,11 @@
99

1010
<div class="page-content">
1111
<div class="wrapper">
12-
{{ content }}
12+
{% include anchor_headings.html html=content anchorBody="§" anchorClass="anchor" %}
1313
</div>
1414
</div>
1515

1616
{% include layout_footer.html %}
17-
1817
</body>
1918

2019
</html>

_layouts/post.html

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,4 @@ <h1 class="post-title">{{ page.title }}</h1>
2424
<article class="post-content">
2525
{{ content }}
2626
</article>
27-
2827
</div>

_sass/_layout.scss

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -651,3 +651,35 @@ details {
651651
}
652652
}
653653

654+
h1, h2, h3, h4, h5, h6 {
655+
position: relative;
656+
}
657+
658+
h1:hover > .anchor,
659+
h2:hover > .anchor,
660+
h3:hover > .anchor,
661+
h4:hover > .anchor,
662+
h5:hover > .anchor,
663+
h6:hover > .anchor {
664+
display: block;
665+
}
666+
667+
h1 > .anchor {
668+
left: -16px;
669+
}
670+
h2 > .anchor {
671+
left: -19px;
672+
}
673+
h3 > .anchor, h4 > .anchor {
674+
left: -15px;
675+
}
676+
677+
a.anchor {
678+
position: absolute;
679+
top: 0;
680+
display: none;
681+
color: $text-color;
682+
text-decoration: none !important;
683+
padding-right: 5px;
684+
font-size: 0.9em;
685+
}

0 commit comments

Comments
 (0)