Skip to content

Commit

Permalink
Replace anchor.js with jekyll-anchor-headings.
Browse files Browse the repository at this point in the history
This allows us to generate the anchor links on build time.

https://github.com/allejo/jekyll-anchor-headings
  • Loading branch information
XhmikosR committed Nov 20, 2018
1 parent 8470c5f commit b04f97f
Show file tree
Hide file tree
Showing 7 changed files with 98 additions and 18 deletions.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@
"js-minify-main": "npm-run-all js-minify-standalone js-minify-bundle",
"js-minify-standalone": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.js.map,includeSources,url=bootstrap.min.js.map\" --output dist/js/bootstrap.min.js dist/js/bootstrap.js",
"js-minify-bundle": "uglifyjs --compress typeofs=false --mangle --comments \"/^!/\" --source-map \"content=dist/js/bootstrap.bundle.js.map,includeSources,url=bootstrap.bundle.min.js.map\" --output dist/js/bootstrap.bundle.min.js dist/js/bootstrap.bundle.js",
"js-minify-docs": "cross-env-shell uglifyjs --mangle --comments \\\"/^!/\\\" --output site/docs/$npm_package_version_short/assets/js/docs.min.js site/docs/$npm_package_version_short/assets/js/vendor/anchor.min.js site/docs/$npm_package_version_short/assets/js/vendor/clipboard.min.js site/docs/$npm_package_version_short/assets/js/vendor/holder.min.js site/docs/$npm_package_version_short/assets/js/vendor/bs-custom-file-input.min.js \"site/docs/$npm_package_version_short/assets/js/src/*.js\"",
"js-minify-docs": "cross-env-shell uglifyjs --mangle --comments \\\"/^!/\\\" --output site/docs/$npm_package_version_short/assets/js/docs.min.js site/docs/$npm_package_version_short/assets/js/vendor/clipboard.min.js site/docs/$npm_package_version_short/assets/js/vendor/holder.min.js site/docs/$npm_package_version_short/assets/js/vendor/bs-custom-file-input.min.js \"site/docs/$npm_package_version_short/assets/js/src/*.js\"",
"js-test": "npm-run-all js-test-karma*",
"js-test-karma": "karma start js/tests/karma.conf.js",
"js-test-karma-old": "cross-env USE_OLD_JQUERY=true npm run js-test-karma",
Expand Down
1 change: 0 additions & 1 deletion site/_includes/scripts.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
{%- if jekyll.environment == "production" -%}
<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/docs.min.js"></script>
{%- else -%}
<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/anchor.min.js"></script>
<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/clipboard.min.js"></script>
<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/holder.min.js"></script>
<script src="{{ site.baseurl }}/docs/{{ site.docs_version }}/assets/js/vendor/bs-custom-file-input.min.js"></script>
Expand Down
86 changes: 86 additions & 0 deletions site/_includes/vendor/anchor_headings.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
{% capture headingsWorkspace %}
{% comment %}
Version 1.0.0
https://github.com/allejo/jekyll-anchor-headings

"Be the pull request you wish to see in the world." ~Ben Balter

Usage:
{% include anchor_headings.html html=content %}

Parameters:
* html (string) - the HTML of compiled markdown generated by kramdown in Jekyll

Optional Parameters:
* beforeHeading (bool) : false - Set to true if the anchor should be placed _before_ the heading's content
* anchorBody (string) : '' - The content that will be placed inside the anchor; the `%heading%` placeholder is available
* anchorClass (string) : '' - The class(es) that will be used for each anchor. Separate multiple classes with a space
* anchorTitle (string) : '' - The `title` attribute that will be used for anchors
* h_min (int) : 1 - The minimum header level to build an anchor for; any header lower than this value will be ignored
* h_max (int) : 6 - The maximum header level to build an anchor for; any header greater than this value will be ignored

Output:
The original HTML with the addition of anchors inside of all of the h1-h6 headings.
{% endcomment %}

{% assign minHeader = include.h_min | default: 1 %}
{% assign maxHeader = include.h_max | default: 6 %}
{% assign beforeHeading = include.beforeHeading %}
{% assign nodes = include.html | split: '<h' %}

{% capture edited_headings %}{% endcapture %}

{% for node in nodes %}
{% if node == "" %}
{% continue %}
{% endif %}

{% assign headerLevel = node | replace: '"', '' | slice: 0, 1 | times: 1 %}

<!-- If the node doesn't have a header, then it's content before the first heading; don't discard it -->
{% if headerLevel < 1 or headerLevel > 6 %}
{% capture edited_headings %}{{ edited_headings }}{{ node }}{% endcapture %}
{% continue %}
{% endif %}

{% assign _workspace = node | split: '</h' %}
{% assign _idWorkspace = _workspace[0] | split: 'id="' %}
{% assign _idWorkspace = _idWorkspace[1] | split: '"' %}
{% assign html_id = _idWorkspace[0] %}

{% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %}
{% assign header = _workspace[0] | replace: _hAttrToStrip, '' %}

<!-- Build the anchor to inject for our heading -->
{% capture anchor %}{% endcapture %}

{% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %}
{% capture anchor %}href="#{{ html_id}}"{% endcapture %}

{% if include.anchorClass %}
{% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %}
{% endif %}

{% if include.anchorTitle %}
{% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header }}"{% endcapture %}
{% endif %}

{% capture anchor %}<a {{ anchor }}>{{ include.anchorBody | replace: '%heading%', header | default: '' | raw }}</a>{% endcapture %}

{% if beforeHeading %}
{% capture anchor %}{{ anchor }} {% endcapture %}
{% else %}
{% capture anchor %} {{ anchor }}{% endcapture %}
{% endif %}
{% endif %}

<!-- The placement of our anchor, before the heading content or after -->
{% if beforeHeading %}
{% capture _current %}<h{{ _hAttrToStrip | raw }}{{ anchor }}{% endcapture %}
{% capture edited_headings %}{{ edited_headings }}{{ node | replace: _hAttrToStrip, _current | raw }}{% endcapture %}
{% else %}
{% capture _current %}<h{{ _workspace | first }}{{ anchor }}</h{{ _workspace | last }}{% endcapture %}
{% capture edited_headings %}{{ edited_headings }}{{ _current }}{% endcapture %}
{% endif %}
{% endfor %}
{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }}
2 changes: 1 addition & 1 deletion site/_layouts/docs.html
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
<h1 class="bd-title" id="content">{{ page.title | smartify }}</h1>
<p class="bd-lead">{{ page.description | smartify }}</p>
{% include ads.html %}
{{ content }}
{% include vendor/anchor_headings.html html=content h_min=2 h_max=5 anchorBody="#" anchorTitle="Permalink" anchorClass="bd-anchor" %}
</main>
</div>
</div>
Expand Down
6 changes: 1 addition & 5 deletions site/docs/4.1/assets/js/src/application.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
* details, see https://creativecommons.org/licenses/by/3.0/.
*/

/* global ClipboardJS: false, anchors: false, Holder: false, bsCustomFileInput: false */
/* global ClipboardJS: false, Holder: false, bsCustomFileInput: false */

(function ($) {
'use strict'
Expand Down Expand Up @@ -101,10 +101,6 @@
.tooltip('_fixTitle')
})

anchors.options = {
icon: '#'
}
anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
$('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5').wrapInner('<div></div>')

// Holder
Expand Down
6 changes: 0 additions & 6 deletions site/docs/4.1/assets/js/vendor/anchor.min.js

This file was deleted.

13 changes: 9 additions & 4 deletions site/docs/4.1/assets/scss/_anchor.scss
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
.anchorjs-link {
.bd-anchor {
padding-left: .25rem;
font-weight: 400;
color: rgba($link-color, .5);
@include transition(color .16s linear);
color: $link-color;
opacity: 0;
@include transition(opacity .16s linear);

&:hover {
:hover > &,
&:hover,
&:focus {
color: $link-color;
text-decoration: none;
opacity: 1;
}
}

0 comments on commit b04f97f

Please sign in to comment.