9 changed files with 137 additions and 551 deletions
|
After Width: | Height: | Size: 961 B |
@ -1,86 +1,105 @@ |
|||
{% 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 --> |
|||
{% comment %} |
|||
Version 1.0.4 |
|||
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 |
|||
* anchorAttrs (string) : '' - Any custom HTML attributes that will be added to the `<a>` tag; you may NOT use `href`, `class` or `title` |
|||
* 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 |
|||
* bodyPrefix (string) : '' - Anything that should be inserted inside of the heading tag _before_ its anchor and content |
|||
* bodySuffix (string) : '' - Anything that should be inserted inside of the heading tag _after_ its anchor and content |
|||
|
|||
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 %} |
|||
{% capture node %}{{ _node | strip }}{% endcapture %} |
|||
|
|||
{% if node == "" %} |
|||
{% continue %} |
|||
{% endif %} |
|||
|
|||
{% assign nextChar = node | replace: '"', '' | strip | slice: 0, 1 %} |
|||
{% assign headerLevel = nextChar | times: 1 %} |
|||
|
|||
<!-- If the level is cast to 0, it means it's not a h1-h6 tag, so let's try to fix it --> |
|||
{% if headerLevel == 0 %} |
|||
{% if nextChar != '<' and nextChar != '' %} |
|||
{% capture node %}<h{{ node }}{% endcapture %} |
|||
{% endif %} |
|||
|
|||
{% 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 %} |
|||
|
|||
{% if include.anchorAttrs %} |
|||
{% capture anchor %}{{ anchor }} {{ include.anchorAttrs }}{% endcapture %} |
|||
{% endif %} |
|||
|
|||
{% capture anchor %}<a {{ anchor }}>{{ include.anchorBody | replace: '%heading%', header | default: '' }}</a>{% endcapture %} |
|||
|
|||
<!-- In order to prevent adding extra space after a heading, we'll let the 'anchor' value contain it --> |
|||
{% if beforeHeading %} |
|||
{% capture anchor %}{{ anchor }} {% endcapture %} |
|||
{% else %} |
|||
{% capture anchor %} {{ anchor }}{% endcapture %} |
|||
{% endif %} |
|||
{% endif %} |
|||
|
|||
{% capture new_heading %} |
|||
<h{{ _hAttrToStrip }} |
|||
{{ include.bodyPrefix }} |
|||
{% if beforeHeading %} |
|||
{% capture _current %}<h{{ _hAttrToStrip | raw }}{{ anchor }}{% endcapture %} |
|||
{% capture edited_headings %}{{ edited_headings }}{{ node | replace: _hAttrToStrip, _current | raw }}{% endcapture %} |
|||
{{ anchor }}{{ header }} |
|||
{% else %} |
|||
{% capture _current %}<h{{ _workspace | first }}{{ anchor }}</h{{ _workspace | last }}{% endcapture %} |
|||
{% capture edited_headings %}{{ edited_headings }}{{ _current }}{% endcapture %} |
|||
{{ header }}{{ anchor }} |
|||
{% endif %} |
|||
{% endfor %} |
|||
{{ include.bodySuffix }} |
|||
</h{{ _workspace | last }} |
|||
{% endcapture %} |
|||
{% capture edited_headings %}{{ edited_headings }}{{ new_heading }}{% endcapture %} |
|||
{% endfor %} |
|||
{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }} |
|||
@ -1,457 +1,11 @@ |
|||
/* For mobile phones */ |
|||
@media only screen and (max-width: 700px) { |
|||
body { |
|||
margin-left: 0.40625em; |
|||
margin-right: 0.40625em; |
|||
} |
|||
|
|||
.post { |
|||
pre { |
|||
font-size:0.8125em; |
|||
line-height: 2em; |
|||
|
|||
padding-left: 0.8125em; |
|||
padding-right: 0.8125em; |
|||
} |
|||
} |
|||
p code { |
|||
font-size:0.8125em; |
|||
line-height: 2em; |
|||
|
|||
padding-left: 0.40625em; |
|||
padding-right: 0.40625em; |
|||
} |
|||
} |
|||
|
|||
/* For desktops */ |
|||
@media only screen and (min-width: 700px) { |
|||
body { |
|||
margin-left: 5%; |
|||
margin-right: 5%; |
|||
@media only screen and (max-width: 1375px) { |
|||
margin-left: 10%; |
|||
margin-right: 10%; |
|||
} |
|||
@media only screen and (min-width: 1920px) { |
|||
margin-left: 25%; |
|||
margin-right: 25%; |
|||
} |
|||
} |
|||
|
|||
.post { |
|||
pre { |
|||
font-size: 1.1375em; |
|||
line-height: 2em; |
|||
|
|||
padding-left: 1.625em; |
|||
padding-right: 1.625em; |
|||
} |
|||
} |
|||
p code { |
|||
font-size:1.1375em; |
|||
line-height: 2em; |
|||
|
|||
padding-left: 0.8125em; |
|||
padding-right: 0.8125em; |
|||
} |
|||
} |
|||
|
|||
body { |
|||
text-align: left; |
|||
text-rendering: optimizeLegibility; |
|||
background-color: #dadada; |
|||
line-height: 1.625em; |
|||
font-family: "Arial Black", Gadget, sans-serif; |
|||
font-size: 1.080625em; |
|||
word-spacing: 0em; |
|||
} |
|||
|
|||
p { |
|||
code { |
|||
font-weight: bold; |
|||
border: none; |
|||
border-radius: 0.8125em; |
|||
box-shadow: inset 0 0 0.8125em grey; |
|||
background-color: #e6e6e6; |
|||
white-space: pre-wrap; |
|||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ |
|||
white-space: -pre-wrap; /* Opera 4-6 */ |
|||
white-space: -o-pre-wrap; /* Opera 7 */ |
|||
word-wrap: break-word; /* Internet Explorer 5.5+ */ |
|||
} |
|||
} |
|||
|
|||
a:hover { |
|||
transition: 0.2s; |
|||
} |
|||
|
|||
/* Use for abbreviations only. */ |
|||
abbr { |
|||
letter-spacing: 0.1em; |
|||
} |
|||
|
|||
blockquote { |
|||
font-size: 1.08625em; |
|||
line-height: 1.08625em; |
|||
font-family: "Comic Sans MS", cursive, serif; |
|||
background-color: #ffffff; |
|||
box-shadow: inset 0 0 0.40625em grey; |
|||
border-radius: 0.8125em; |
|||
padding-left: 1.625em; |
|||
padding-top: 0.8125em; |
|||
padding-bottom: 0.8125em; |
|||
margin: 0; |
|||
} |
|||
|
|||
h1 { |
|||
line-height: 1.625em; |
|||
margin-top: 0.40625em; |
|||
margin-bottom: 0.40625em; |
|||
} |
|||
|
|||
h2 { |
|||
line-height: 1.263157em; |
|||
margin-top: 1.263157em; |
|||
margin-bottom: 1.263157em; |
|||
} |
|||
|
|||
p { |
|||
text-indent: 0; |
|||
line-height: 1.625em; |
|||
margin-top: 1.625em; |
|||
margin-bottom: 1.625em; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: underline; |
|||
text-decoration-color: #d9d9d9; |
|||
text-align: center; |
|||
color: #666666; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover { |
|||
text-decoration: underline; |
|||
} |
|||
|
|||
ul { |
|||
list-style-type: circle; |
|||
} |
|||
|
|||
.post { |
|||
pre { |
|||
border: none; |
|||
border-radius: 1.625em; |
|||
box-shadow: inset 0 0 0.8125em grey; |
|||
background-color: #e6e6e6; |
|||
white-space: pre-wrap; |
|||
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ |
|||
white-space: -pre-wrap; /* Opera 4-6 */ |
|||
white-space: -o-pre-wrap; /* Opera 7 */ |
|||
word-wrap: break-word; /* Internet Explorer 5.5+ */ |
|||
} |
|||
} |
|||
|
|||
.post-list { |
|||
margin: 0; |
|||
padding: 0; |
|||
list-style-type: none; |
|||
-webkit-padding-start: 0; |
|||
} |
|||
|
|||
.post-list-metadata, .post-list-div, .post-list-excerpt { |
|||
display: block; |
|||
} |
|||
|
|||
.post-metadata, .page-metadata, .footer, .comment { |
|||
box-shadow: inset 0 0 0.40625em grey; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.post-metadata, .page-metadata, .footer, .comment, .index .post-list-metadata { |
|||
border-radius: 1.625em; |
|||
padding-left: 1.625em; |
|||
padding-bottom: 0.40625em; |
|||
} |
|||
|
|||
.post-metadata, .page-metadata, .footer, .comment, .comment-content, .index .post-list-metadata { |
|||
margin-bottom: 1.625em; |
|||
} |
|||
|
|||
.page-metadata, .footer, .comment, .index .post-list-metadata { |
|||
padding-top: 0.40625em; |
|||
} |
|||
|
|||
.post-metadata, .page-metadata, .footer, .comment, .index .post-list-metadata { |
|||
padding-right: 1.625em; |
|||
} |
|||
|
|||
|
|||
.top, .page-navigation, .tag-list { |
|||
ul { |
|||
margin: 0; |
|||
padding: 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
li { |
|||
display: block; |
|||
float: left; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
} |
|||
} |
|||
|
|||
.badges { |
|||
ul { |
|||
margin-top: 0.203125em; |
|||
margin-bottom: 0.203125em; |
|||
margin-left: 0em; |
|||
padding: 0; |
|||
overflow: hidden; |
|||
display: flex; |
|||
} |
|||
|
|||
li { |
|||
display: block; |
|||
float: left; |
|||
margin-left: 0.203125em; |
|||
} |
|||
|
|||
img { |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
.top, .page-navigation { |
|||
ul { |
|||
font-size: 0.8125em; |
|||
margin-bottom: 1.625em; |
|||
background-color: #666666; |
|||
border-radius: 0.8125em; |
|||
} |
|||
|
|||
li { |
|||
border-right: 0.05em solid #ffffff; |
|||
} |
|||
|
|||
a { |
|||
display: block; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
padding: 0.8125em 0.8125em; |
|||
} |
|||
|
|||
li a:hover { |
|||
background-color: #000000; |
|||
} |
|||
|
|||
.rss { |
|||
border-left: 0.05em solid #ffffff; |
|||
border-right: none; |
|||
float:right |
|||
} |
|||
} |
|||
|
|||
.index { |
|||
.post-list-div { |
|||
margin-top: 0.8125em; |
|||
margin-bottom: 0.8125em; |
|||
} |
|||
|
|||
.post-list-date { |
|||
float: right; |
|||
} |
|||
|
|||
.post-list-excerpt { |
|||
font-family: serif; |
|||
font-size: 0.8125em; |
|||
} |
|||
|
|||
a { |
|||
text-decoration: none; |
|||
text-align: left; |
|||
color: #000000; |
|||
} |
|||
|
|||
.post-list-metadata { |
|||
background-color: #ffffff; |
|||
box-shadow: 0 0.203125em 0.203125em 0 grey, 0 0.203125em 0.203125em 0 grey; |
|||
} |
|||
|
|||
.post-list-metadata:hover { |
|||
background-color: #404040; |
|||
transition: 0.2s; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.tag-list { |
|||
ul { |
|||
margin-top: 0em; |
|||
margin-bottom: 0.40625em; |
|||
} |
|||
|
|||
li { |
|||
margin-top: 0.203125em; |
|||
margin-bottom: 0.40625em; |
|||
} |
|||
|
|||
a { |
|||
margin-top: 0em; |
|||
margin-left: 0.8125em; |
|||
padding: 0.40625em; |
|||
font-size: 0.8125em; |
|||
background-color: #ffffff; |
|||
border-radius: 0.8125em; |
|||
} |
|||
|
|||
li a:hover { |
|||
background-color: #404040; |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.comment-content, .tag-list { |
|||
a { |
|||
box-shadow: 0 0.203125em 0.203125em 0 grey, 0 0.203125em 0.203125em 0 grey; |
|||
} |
|||
} |
|||
|
|||
.comment-content { |
|||
font-size: 0.8125em; |
|||
|
|||
a.odd { |
|||
background-color: #cccccc; |
|||
} |
|||
|
|||
a.even { |
|||
background-color: #e6e6e6; |
|||
} |
|||
|
|||
a:hover { |
|||
background-color: #f2f2f2; |
|||
} |
|||
|
|||
a { |
|||
display: block; |
|||
margin-top: 1.625em; |
|||
text-decoration: none; |
|||
text-decoration-color: #000000; |
|||
text-align: left; |
|||
border-radius: 0.8125em; |
|||
color: #000000; |
|||
} |
|||
|
|||
.text { |
|||
padding: 0.8125em; |
|||
} |
|||
|
|||
.hr { |
|||
border: 0.1015625em inset #808080; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.from { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.date { |
|||
font-style: italic; |
|||
} |
|||
} |
|||
|
|||
.footer { |
|||
font-size: 0.8125em; |
|||
} |
|||
|
|||
img { |
|||
max-width: 100%; |
|||
height: auto; |
|||
display: block; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
margin-bottom: 0.8125em; |
|||
} |
|||
|
|||
.img img, .figure { |
|||
box-shadow: 0 0.203125em 0.203125em 0 grey, 0 0.203125em 0.203125em 0 grey; |
|||
border-radius: 0.8125em; |
|||
} |
|||
|
|||
.img img:hover { |
|||
opacity: 0.5; |
|||
transition: 0.2s; |
|||
} |
|||
|
|||
.figure:hover { |
|||
background-color: #404040; |
|||
transition: 0.2s; |
|||
img { |
|||
opacity: 0.75; |
|||
} |
|||
.text { |
|||
color: #ffffff; |
|||
} |
|||
} |
|||
|
|||
.figure { |
|||
display: auto; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
justify-content: center; |
|||
background-color: #ffffff; |
|||
margin-bottom: 0.8125em; |
|||
img { |
|||
max-width: 100%; |
|||
height: auto; |
|||
display: block; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
border-top-left-radius: 0.8125em; |
|||
border-top-right-radius: 0.8125em; |
|||
} |
|||
.text { |
|||
text-align: center; |
|||
font-size: 0.8125em; |
|||
font-style: italic; |
|||
} |
|||
a { |
|||
text-decoration: none; |
|||
color: #000000; |
|||
} |
|||
} |
|||
|
|||
/* Tables */ |
|||
table { |
|||
border-collapse: collapse; |
|||
} |
|||
|
|||
table, th, td { |
|||
border: 0.1015625em solid black; |
|||
} |
|||
|
|||
th, td { |
|||
padding: 0.40625em; |
|||
text-align: left; |
|||
} |
|||
|
|||
th { |
|||
background-color: #f2f2f2; |
|||
} |
|||
|
|||
tr:nth-child(even) { |
|||
background-color: #f2f2f2; |
|||
} |
|||
|
|||
.hAnchor { |
|||
opacity: 0.1; |
|||
filter: alpha(opacity=50); /* For IE8 and earlier */ |
|||
} |
|||
|
|||
.hAnchor:hover { |
|||
opacity: 1; |
|||
filter: alpha(opacity=100); /* For IE8 and earlier */ |
|||
} |
|||
|
|||
Loading…
Reference in new issue