jekyll-wns
A collection of filters, tags and hooks that I use on my pages.
Installation
- Run Μ bundle add jekyll-wns` and
- Add the following to your site's
_config.yml
:
plugins:
- jekyll-wns
Usage
Filters
Checksums
{{ site.content | sha384_64 }}
{{ site.content | sha384 }}
{{ site.content | sha256_64 }}
{{ site.content | sha256 }}
File Size
{{ site.content | file_size }}
Tags
Scene Breaks
{% scene_break leaves %}
<p style="text-align:center" data-mce-style="text-align:center">π π π π π π π π π π π π</p>
{% scene_break wave %}
<p style="text-align:center;letter-spacing:-.13em" data-mce-style="text-align:center;letter-spacing:-.13em">β β‘β β‘β β‘β β‘β β‘β β‘β β‘β β‘β β‘β β‘β β</p>
{% scene_break wall %}
<p style="text-align:center;letter-spacing:-.2em" data-mce-style="text-align:center;letter-spacing:-.2em">βββββββββββββββββββββββββββββββββ</p>
{% scene_break %}
<p style="text-align:center" data-mce-style="text-align:center">πΏπΎπΏπΎπΏπΎπΏπΎ
Ruby Annotations
{% ruby b|t %}
{% ruby a#b|t#s %}
{% ruby a#b#c|x#y#z %}
<p><ruby><span class="rb first last" aria-hidden="true">b</span><rp>(</rp><rt first="" last="">t</rt><rp>)</rp></ruby></p>
<p><ruby><span class="rb first" aria-hidden="true">a</span><rp>(</rp><rt first="">t</rt><rp>)</rp><span class="rb last" aria-hidden="true">b</span><rp>(</rp><rt last="">s</rt><rp>)</rp></ruby></p>
<p><ruby><span class="rb first" aria-hidden="true">a</span><rp>(</rp><rt first="">x</rt><rp>)</rp><span class="rb" aria-hidden="true">b</span><rp>(</rp><rt>y</rt><rp>)</rp><span class="rb last" aria-hidden="true">c</span><rp>(</rp><rt last="">z</rt><rp>)</rp></ruby></p>
YouTube Embed
The following snippet should be integrated into your site for the tag to properly work:
function loadYouTube(e = null) {
if (e == null) return;
var i = e.target.getAttribute('data-videoid');
d.getElementById(i).innerHTML = d.getElementById('yt-' + i).innerHTML
}
$('.youtube a:last-child').on('click', loadYouTube);
{% youtube U6xJfP7-HCc|Base 12 β Numberphile %}
<div class="youtube" data-videoid="youtube-U6xJfP7-HCc">
<a class="btn btn-lg btn-block btn-primary" href="https://youtu.be/U6xJfP7-HCc" target="_blank" rel="noopener">
Watch βBase 12 β Numberphileβ on YouTube
</a>
<a class="btn btn-lg btn-block btn-primary" href="javascript:loadYouTube();">
Load YouTube Video (3rd party script)
</a>
</div>
<script id="youtube-U6xJfP7-HCc" type="text/html">
<div style='position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden;'>
<iframe
style='position: absolute; top: 0; left: 0; width: 100%; height: 100%;'
src='https://www.youtube-nocookie.com/embed/U6xJfP7-HCc?rel=0'
frameborder='0'
allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture'
allowfullscreen></iframe>
</div>
</script>
Hooks
Automatic replacement of spaces to en quads after each sentence
Assuming your files are each sentence in their own line,
just add this to your _config.yml
:
wns:
quads: true
Automatic typographic handling of abbreviations
Just omit the space between the letters and use normal spaces, then add this to your _config.yml
:
wns:
abbrevations: true
Example
β¦ tools, e.g., hammer,β¦
With abbreviations: true
:
β¦ tools, e. \g., hammer,β¦
Automatic labelling of Unicode Characters
Some assistive technologies don't play nice with Unicode character, this should improve thing by adding aria-labels spans to wherever necessary.
To enable this, add this to your _config.yml
:
wns:
label_unicode: true
Hyda-β
£
Hyda-<span aria-label="4">β
£</span>