web/_includes/refactor-content.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 %}
      {% else %}
        {% assign _text = _left | split: 'language-' | last | split: ' ' | first %}
      {% endif %}

      {% assign _new_content = _new_content | append: _snippet
          | append: '<div class="code-header" text-data="'
          | append: _text
          | append: '"><button 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 }}