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: '<code><div class="table-wrapper">', '<code>'
    | 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 %}

<!-- Change the icon of checkbox -->

{% if _content contains '<input type="checkbox"' %}
  {% assign _content = _content
    | replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
      '<i class="fas fa-check-circle fa-fw checked" aria-hidden="true"></i>'
    | replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" />',
      '<i class="far fa-circle fa-fw" aria-hidden="true"></i>'
  %}
{% endif %}

<!-- Add thumbs up/down icons -->

{% if _content contains ' thumbs="' %}
  {% assign _content = _content
    | replace: ' thumbs="up">', '><i class="fas fa-thumbs-up shortcut-icon" aria-hidden="true"></i><span class="visually-hidden">Thumbs Up</span>'
    | replace: ' thumbs="down">', '><i class="fas fa-thumbs-down shortcut-icon" aria-hidden="true"></i><span class="visually-hidden">Thumbs Down</span>'
  %}
{% endif %}

<!--
  Rating and price widgets

  Supported Markdown forms:

    Text
    {: rating="4.5" }

    Term
    : Definition
    {: price="3" }

    | Rating | {: rating="3.5" } |
    | Price  | {: price="3" }    |
-->

{% assign WIDGET_TAGS = 'p,dd,td' | split: ',' %}

{% for _widget_tag in WIDGET_TAGS %}
  {% assign _open_marker = '<' | append: _widget_tag %}
  {% assign _close_tag = '</' | append: _widget_tag | append: '>' %}

  {% unless _content contains _close_tag %}
    {% continue %}
  {% endunless %}

  {% assign _element_snippets = _content | split: _close_tag %}
  {% assign _new_content = '' %}

  {% for _snippet in _element_snippets %}
    {% if forloop.last %}
      {% assign _new_content = _new_content | append: _snippet %}
      {% continue %}
    {% endif %}

    <!-- Find the current element's final opening tag -->
    {% assign _element_fragment = _snippet
      | split: _open_marker
      | last
    %}

    {% assign _fragment_size = _element_fragment | size %}
    {% assign _snippet_size = _snippet | size %}
    {% assign _marker_size = _open_marker | size %}

    {% assign _prefix_size = _snippet_size
      | minus: _fragment_size
      | minus: _marker_size
    %}

    {% assign _prefix = _snippet | slice: 0, _prefix_size %}

    <!--
      Ignore elements inside code.

      This is especially important for Rouge markup such as:

        <code>
          <table class="rouge-table">
            <td>...</td>
          </table>
        </code>
    -->
    {% assign _pre_open_count = _prefix | split: '<pre' | size %}
    {% assign _pre_close_count = _prefix | split: '</pre>' | size %}
    {% assign _code_open_count = _prefix | split: '<code' | size %}
    {% assign _code_close_count = _prefix | split: '</code>' | size %}

    {% assign _inside_code = false %}

    {% if _pre_open_count > _pre_close_count %}
      {% assign _inside_code = true %}
    {% endif %}

    {% if _code_open_count > _code_close_count %}
      {% assign _inside_code = true %}
    {% endif %}

    {% if _inside_code %}
      {% assign _new_content = _new_content
        | append: _snippet
        | append: _close_tag
      %}
      {% continue %}
    {% endif %}

    <!-- Split opening-tag attributes from element contents -->
    {% assign _opening_fragment = _element_fragment
      | split: '>'
      | first
    %}

    {% assign _element_content = _element_fragment
      | remove_first: _opening_fragment
      | remove_first: '>'
    %}

    {% assign _clean_opening_fragment = _opening_fragment %}
    {% assign _widget_type = '' %}
    {% assign _widget_value = '' %}

    <!--
      Case 1: Kramdown converted the IAL to an HTML attribute.

        <p rating="4.5">Text</p>
        <dd price="3">Text</dd>
    -->
    {% if _opening_fragment contains ' rating="' %}
      {% assign _widget_type = 'rating' %}

      {% assign _widget_value = _opening_fragment
        | split: ' rating="'
        | last
        | split: '"'
        | first
      %}

      {% assign _widget_attribute = ' rating="'
        | append: _widget_value
        | append: '"'
      %}

      {% assign _clean_opening_fragment = _clean_opening_fragment
        | remove_first: _widget_attribute
      %}

    {% elsif _opening_fragment contains ' price="' %}
      {% assign _widget_type = 'price' %}

      {% assign _widget_value = _opening_fragment
        | split: ' price="'
        | last
        | split: '"'
        | first
      %}

      {% assign _widget_attribute = ' price="'
        | append: _widget_value
        | append: '"'
      %}

      {% assign _clean_opening_fragment = _clean_opening_fragment
        | remove_first: _widget_attribute
      %}
    {% endif %}

    <!--
      Case 2: Inside Markdown tables, Kramdown leaves the syntax
      as literal cell text.

        <td>{: rating="3.5" }</td>
        <td>{: price="3" }</td>
    -->
    {% if _widget_type == '' and _widget_tag == 'td' %}
      {% assign _normalized_content = _element_content
        | strip
        | replace: '“', '"'
        | replace: '”', '"'
      %}

      {% if _normalized_content contains '{: rating="' %}
        {% assign _candidate_value = _normalized_content
          | split: '{: rating="'
          | last
          | split: '"'
          | first
        %}

        {% assign _expected_literal = '{: rating="'
          | append: _candidate_value
          | append: '" }'
        %}

        <!-- Only transform when the entire cell is the widget -->
        {% if _normalized_content == _expected_literal %}
          {% assign _widget_type = 'rating' %}
          {% assign _widget_value = _candidate_value %}
          {% assign _element_content = '' %}
        {% endif %}

      {% elsif _normalized_content contains '{: price="' %}
        {% assign _candidate_value = _normalized_content
          | split: '{: price="'
          | last
          | split: '"'
          | first
        %}

        {% assign _expected_literal = '{: price="'
          | append: _candidate_value
          | append: '" }'
        %}

        <!-- Only transform when the entire cell is the widget -->
        {% if _normalized_content == _expected_literal %}
          {% assign _widget_type = 'price' %}
          {% assign _widget_value = _candidate_value %}
          {% assign _element_content = '' %}
        {% endif %}
      {% endif %}
    {% endif %}

    {% assign _widget_html = '' %}

    <!-- Generate rating widget -->
    {% if _widget_type == 'rating' %}
      {% assign _rating = _widget_value
        | times: 1.0
        | at_least: 0
        | at_most: 5
      %}

      {% assign _full = _rating | floor %}
      {% assign _remainder = _rating | minus: _full %}
      {% assign _half = 0 %}

      <!-- Round to the nearest half-star -->
      {% if _remainder >= 0.75 %}
        {% assign _full = _full | plus: 1 %}
      {% elsif _remainder >= 0.25 %}
        {% assign _half = 1 %}
      {% endif %}

      {% assign _half_index = _full | plus: 1 %}
      {% assign _icons = '' %}

      {% for i in (1..5) %}
        {% if i <= _full %}
          {% assign _icons = _icons
            | append: '<i class="fas fa-star shortcut-icon"></i>'
          %}
        {% elsif _half == 1 and i == _half_index %}
          {% assign _icons = _icons
            | append: '<i class="fas fa-star-half-stroke shortcut-icon"></i>'
          %}
        {% else %}
          {% assign _icons = _icons
            | append: '<i class="far fa-star shortcut-icon"></i>'
          %}
        {% endif %}
      {% endfor %}

      {% assign _accessible_text = _rating
        | append: ' out of 5 stars'
      %}

      {% assign _widget_html = '<span class="visually-hidden">'
        | append: _accessible_text
        | append: '</span>'
        | append: '<span aria-hidden="true">'
        | append: _icons
        | append: '</span>'
      %}

    <!-- Generate price widget -->
    {% elsif _widget_type == 'price' %}
      {% assign _price = _widget_value
        | times: 1
        | at_least: 0
        | at_most: 5
      %}

      {% assign _icons = '' %}

      {% if _price > 0 %}
        {% for i in (1.._price) %}
          {% assign _icons = _icons
            | append: '<i class="fas fa-dollar-sign shortcut-icon"></i>'
          %}
        {% endfor %}
      {% endif %}

      {% assign _accessible_text = _price | append: ' dollar sign' %}

      {% unless _price == 1 %}
        {% assign _accessible_text = _accessible_text | append: 's' %}
      {% endunless %}

      {% assign _widget_html = '<span class="visually-hidden">'
        | append: _accessible_text
        | append: '</span>'
        | append: '<span aria-hidden="true">'
        | append: _icons
        | append: '</span>'
      %}
    {% endif %}

    <!-- Reconstruct this complete element -->
    {% assign _new_content = _new_content
      | append: _prefix
      | append: _open_marker
      | append: _clean_opening_fragment
      | append: '>'
      | append: _element_content
      | append: _widget_html
      | append: _close_tag
    %}
  {% endfor %}

  {% assign _content = _new_content %}
{% endfor %}

<!-- Handle images -->

{% assign IMG_TAG = '<img ' %}

{% if _content contains IMG_TAG %}
  {% assign _img_content = null %}
  {% assign _img_snippets = _content | split: IMG_TAG %}

  {% for _img_snippet in _img_snippets %}
    {% if forloop.first %}
      {% assign _img_content = _img_snippet %}
      {% continue %}
    {% endif %}

    {% assign _left = _img_snippet | split: '>' | first %}
    {% assign _right = _img_snippet | remove: _left %}

    {% unless _left contains 'src=' %}
      {% continue %}
    {% endunless %}

    {% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
    {% assign _attrs = _left | split: '" ' %}

    {% assign _src = null %}
    {% assign _lqip = null %}
    {% assign _class = null %}

    {% for _attr in _attrs %}
      {% unless _attr contains '=' %}
        {% continue %}
      {% endunless %}

      {% assign _pair = _attr | split: '="' %}
      {% capture _key %}{{ _pair | first }}{% endcapture %}
      {% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}

      {% case _key %}
        {% when 'src' %}
          {% assign _src = _value %}
        {% when 'lqip' %}
          {% assign _lqip = _value %}
        {% when 'class' %}
          {% assign _class = _value %}
      {% endcase %}
    {% endfor %}

    <!-- take out classes -->
    {% assign _wrapper_class = '' %}

    {% if _class %}
      {% assign _remain = _class %}
      {% assign _class_array = _class | split: ' ' %}

      {% for c in _class_array %}
        {% assign _pick = false %}

        {% case c %}
          {% when 'preview-img', 'normal', 'left', 'right', 'light', 'dark' %}
            {% assign _pick = true %}
          {% else %}
            {% if c contains '-' %}
              {% assign start = c | split: '-' | first %}
              {% if start == 'w' %}
                {% assign _pick = true %}
              {% endif %}
            {% endif %}
        {% endcase %}

        {% if _pick %}
          {% assign _remain = _remain | remove: c | strip %}
          {% assign _wrapper_class = _wrapper_class | append: ' ' | append: c %}
        {% endif %}
      {% endfor %}

      {% unless _wrapper_class == '' %}
        {% capture _old_class %}class="{{ _class }}"{% endcapture %}
        {% assign _left = _left | remove: _old_class %}
        {% unless _remain == '' %}
          {% capture _new_class %}class="{{ _remain }}"{% endcapture %}
          {% assign _left = _left | append: _new_class %}
        {% endunless %}
      {% endunless %}
    {% endif %}

    {% assign _final_src = null %}
    {% assign _lazyload = true %}

    {%- capture _img_url -%}
      {% include media-url.html src=_src subpath=page.media_subpath %}
    {%- endcapture -%}

    {% assign _path_prefix = _img_url | remove: _src %}

    {% unless _src contains '//' %}
      {% assign _final_src = _path_prefix | append: _src %}
      {% assign _src_alt = 'src="' | append: _path_prefix %}
      {% assign _left = _left | replace: 'src="', _src_alt %}
    {% endunless %}

    {% if _lqip %}
      {% assign _lazyload = false %}
      {% assign _wrapper_class = _wrapper_class | append: ' blur' %}

      {% unless _lqip contains 'data:' %}
        {% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
        {% assign _left = _left | replace: 'lqip="', _lqip_alt %}
      {% endunless %}

      <!-- add image placeholder -->
      {% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}

    {% else %}
      {% assign _wrapper_class = _wrapper_class | append: ' shimmer' %}
    {% endif %}

    <!-- lazy-load images -->
    {% if _lazyload %}
      {% assign _left = _left | append: ' loading="lazy"' %}
    {% endif %}

    {% if page.layout == 'home' %}
      <!-- create the image wrapper -->
      {% assign _wrapper_start = '<div class="preview-img ' | append: _wrapper_class | append: '">' %}

      {% assign _img_content = _img_content | append: _wrapper_start %}
      {% assign _right = _right | prepend: '></div' %}

    {% else %}
      <!-- make sure the `<img>` is wrapped by `<a>` -->
      {% assign _parent = _right | slice: 1, 4 %}

      {% if _parent == '</a>' %}
        <!-- add class to existing <a> tag -->
        {% assign _size = _img_content | size | minus: 1 %}
        {% capture _class %}
          class="img-link{% unless _lqip %} shimmer{% endunless %}"
        {% endcapture %}
        {% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}

      {% else %}
        <!-- create the image wrapper -->
        {% assign _wrapper_start = _final_src
          | default: _src
          | prepend: '<a href="'
        %}
        
        <!-- Check if this is a gallery image -->
        {% if _class contains 'slide-preview' or _left contains 'onclick="currentSlide' %}
          {% assign _wrapper_start = _wrapper_start | append: '#" onclick="return false;" class="img-link' %}
        {% else %}
          {% assign _wrapper_start = _wrapper_start | append: '" class="popup img-link' %}
        {% endif %}
        
        {% assign _wrapper_start = _wrapper_start | append: _wrapper_class | append: '">' %}

        {% assign _img_content = _img_content | append: _wrapper_start %}
        {% assign _right = '></a' | append: _right %}
      {% endif %}
    {% endif %}

    <!-- combine -->
    {% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
  {% endfor %}

  {% if _img_content %}
    {% assign _content = _img_content %}
  {% endif %}
{% 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 _label_text = _left | split: 'file="' | last | split: '"' | first %}
        {% assign _label_icon = 'far fa-file-code fa-fw' %}
      {% else %}
        {% assign _lang = _left | split: 'language-' | last | split: ' ' | first %}
        {% capture _label_text %}{% include language-alias.html language=_lang %}{% endcapture %}
        {% assign _label_icon = 'fas fa-code fa-fw small' %}
      {% endif %}

      {% capture _label %}
        <span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}" aria-hidden="true"></i></span>
      {% endcapture %}

      <!-- Determine if this language supports in-browser execution -->
      {% assign _runnable_langs = 'js,javascript,python,py' | split: ',' %}
      {% assign _wrap_open    = '' %}
      {% assign _run_btn_html = '' %}
      {% assign _wrap_close   = '' %}

      {% assign _run_enabled = false %}
      {% if _left contains ' run="' %}
        {% assign _run_enabled = true %}
      {% endif %}

      {% assign _run_lang = _lang %}
      {% if _left contains 'run="' %}
        {% assign _run_lang = _left | split: 'run="' | last | split: '"' | first %}
      {% endif %}

      {% if _run_enabled and _runnable_langs contains _run_lang %}
        {% assign _wrap_open    = '<div class="code-buttons">' %}
        {% assign _run_btn_html = '<button aria-label="run" class="run-btn" data-lang="' | append: _run_lang | append: '"><i class="fas fa-play" aria-hidden="true"></i></button>' %}
        {% assign _wrap_close   = '</div>' %}
      {% endif %}

      {% assign _copy_btn = '<button aria-label="copy" class="copy-btn" data-title-succeed="' | append: site.data.locales[include.lang].post.button.copy_code.succeed | append: '"><i class="far fa-clipboard" aria-hidden="true"></i></button>' %}

      {% assign _new_content = _new_content
        | append: _snippet
        | append: '<div class="code-header">'
        | append: _label
        | append: _wrap_open
        | append: _run_btn_html
        | append: _copy_btn
        | append: _wrap_close
        | append: '</div>'
        | append: '<div class="highlight"><code>'
      %}

    {% endif %}
  {% endfor %}

  {% assign _content = _new_content %}
{% endif %}

<!-- Create heading anchors -->

{% assign heading_levels = '2,3,4,5' | split: ',' %}
{% assign _heading_content = _content %}

{% for level in heading_levels %}
  {% assign mark_start = '<h' | append: level | append: ' id="' %}
  {% assign mark_end = '</h' | append: level | append: '>' %}

  {% if _heading_content contains mark_start %}
    {% assign _new_content = null %}
    {% assign heading_snippets = _heading_content | split: mark_start %}

    {% for snippet in heading_snippets %}
      {% if forloop.first %}
        {% assign _new_content = snippet %}
        {% continue %}
      {% endif %}

      {% assign id = snippet | split: '"' | first %}
      {% assign anchor = '<a href="#'
        | append: id
        | append: '" class="anchor text-muted"><i class="fas fa-hashtag" aria-hidden="true"></i></a>'
      %}

      {% assign left = snippet | split: mark_end | first %}
      {% assign right = snippet | slice: left.size, snippet.size %}
      {% assign left = left | replace_first: '">', '"><span class="me-2">' | append: '</span>' %}

      {% assign _new_content = _new_content | append: mark_start | append: left | append: anchor | append: right %}
    {% endfor %}

    {% assign _heading_content = _new_content %}
  {% endif %}
{% endfor %}

{% assign _content = _heading_content %}

<!-- return -->
{{ _content }}