153 lines
4.5 KiB
HTML
153 lines
4.5 KiB
HTML
<!--
|
|
Refactor the HTML structure.
|
|
-->
|
|
|
|
{% assign _content = include.content %}
|
|
|
|
<!--
|
|
In order to allow a wide table to scroll horizontally,
|
|
we suround the markdown table with `<div class="table-wrapper">` and `</div>`
|
|
-->
|
|
|
|
{% if _content contains '<table>' %}
|
|
{% assign _content = _content
|
|
| replace: '<table>', '<div class="table-wrapper"><table>'
|
|
| replace: '</table>', '</table></div>'
|
|
| replace: '</table></div></code>', '</table></code>'
|
|
%}
|
|
{% endif %}
|
|
|
|
<!--
|
|
Fixed kramdown code highlight rendering:
|
|
https://github.com/penibelst/jekyll-compress-html/issues/101
|
|
https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901
|
|
-->
|
|
|
|
{% if _content contains '<pre class="highlight">' %}
|
|
{% assign _content = _content
|
|
| replace: '<div class="highlight"><pre class="highlight"><code', '<div class="highlight"><code'
|
|
| replace: '</code></pre></div>', '</code></div>'
|
|
%}
|
|
{% endif %}
|
|
|
|
<!-- Add attribute 'hide-bullet' to the checkbox list -->
|
|
|
|
{% if _content contains '<li class="task-list-item"><' %}
|
|
{% assign _content = _content
|
|
| replace: '"task-list-item"><', '"task-list-item" hide-bullet><'
|
|
%}
|
|
{% endif %}
|
|
|
|
|
|
<!-- images -->
|
|
|
|
{% if _content contains '<img src="' %}
|
|
|
|
<!-- add CDN prefix if it exists -->
|
|
|
|
{% if site.img_cdn != '' %}
|
|
{% assign img_path_replacement = '<img src="' | append: site.img_cdn | append: '/' %}
|
|
{% else %}
|
|
{% assign img_path_replacement = '<img src="' | append: site.baseurl | append: '/' %}
|
|
{% endif %}
|
|
|
|
{% assign _content = _content | replace: '<img src="/', img_path_replacement %}
|
|
|
|
<!-- lazy-load images <https://github.com/ApoorvSaxena/lozad.js#usage> -->
|
|
|
|
{% assign _content = _content | replace: '<img src="', '<img data-proofer-ignore data-src="' %}
|
|
|
|
<!-- add image placehoder to prevent layout reflow -->
|
|
|
|
{% assign _img_content = nil %}
|
|
|
|
{% assign _images = _content | split: '<img ' %}
|
|
|
|
{% for _img in _images %}
|
|
{% if forloop.first %}
|
|
{% assign _img_content = _img %}
|
|
{% continue %}
|
|
{% endif %}
|
|
|
|
{% assign _width = nil %}
|
|
{% assign _height = nil %}
|
|
{% assign _attrs = _img | split: '>' | first | split: ' ' %}
|
|
|
|
{% for _attr in _attrs %}
|
|
{% capture _key %}{{ _attr | split: '=' | first }}{% endcapture %}
|
|
{% capture _value %}{{ _attr | split: '=' | last | replace: '"', '' }}{% endcapture %}
|
|
|
|
{% case _key %}
|
|
{% when 'width' %}
|
|
{% assign _width = _value %}
|
|
{% when 'height' %}
|
|
{% assign _height = _value %}
|
|
{% endcase %}
|
|
|
|
{% if _width and _height %}
|
|
{% capture _svg %}data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{_width}} {{_height}}'%3E%3C/svg%3E{% endcapture %}
|
|
{% assign _img_content = _img_content | append: '<img src="' | append: _svg | append: '" ' | append: _img %}
|
|
{% break %}
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
|
|
|
{% unless _width and _height %}
|
|
{% assign _img_content = _img_content | append: '<img ' | append: _img %}
|
|
{% endunless %}
|
|
|
|
{% endfor %}
|
|
|
|
{% assign _content = _img_content %}
|
|
|
|
{% endif %}
|
|
|
|
<!-- Add header for code snippets -->
|
|
|
|
{% if _content contains '<div class="highlight"><code>' %}
|
|
{% assign _code_spippets = _content | split: '<div class="highlight"><code>' %}
|
|
{% assign _new_content = '' %}
|
|
|
|
{% for _snippet in _code_spippets %}
|
|
|
|
{% if forloop.last %}
|
|
{% assign _new_content = _new_content | append: _snippet %}
|
|
|
|
{% else %}
|
|
|
|
{% assign _left = _snippet | split: '><' | last%}
|
|
|
|
{% if _left contains 'file="' %}
|
|
{% assign _text = _left | split: 'file="' | last | split: '"' | first %}
|
|
{% assign _label_icon = 'far fa-file' %}
|
|
{% else %}
|
|
{% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
|
|
{% capture _text %}{% include language-alias.html language=_lang %}{% endcapture %}
|
|
{% assign _label_icon = 'fas fa-code small' %}
|
|
{% endif %}
|
|
|
|
{% capture _label %}
|
|
<span text-data="{{ _text }}"><i class="fa-fw {{ _label_icon }}"></i></span>
|
|
{% endcapture %}
|
|
|
|
{% assign _new_content = _new_content | append: _snippet
|
|
| append: '<div class="code-header">'
|
|
| append: _label
|
|
| append: '<button aria-label="copy" data-original-title="'
|
|
| append: site.data.locales[lang].post.button.copy_code.succeed
|
|
| append: '"><i class="far fa-clone"></i></button></div>'
|
|
| append: '<div class="highlight"><code>'
|
|
%}
|
|
|
|
{% endif %}
|
|
|
|
{% endfor %}
|
|
|
|
{% assign _content = _new_content %}
|
|
|
|
{% endif %}
|
|
|
|
|
|
<!-- return -->
|
|
|
|
{{ _content }}
|