How to render Code Block filename as a link

[FoxxMD]

Description

This modification to the chirpy theme will enable code blocks that specify a filename to optionally specify a URL that turns the rendered filename into a link that opens in a new tab/page if a link is external or same page if anchor/relative.

Usage in chirpy markdown post:

```yaml
  traefik:
    image: "traefik:v3.3"
    # ...
    volumes:
      - /host/path/to/static_dir:/etc/traefik
```
{: file="compose.yaml" link="https://github.com/link/to/compose.yaml"}

Setup

Add refactor-content.html to your project's _includes folder.

In the <!-- Add header for code snippets --> section replace everything between {% if _left contains 'file="' %} and {% assign _new_content = _new_content with the following block:

      {% assign _label_link = '' %}
      {% if _left contains 'file="' %}
        {% assign _label_text = _left | split: 'file="' | last | split: '"' | first %}
        {% if _left contains 'link="' %}
          {% assign _label_link = _left | split: 'link="' | last | split: '"' | first %}
        {% endif %}
        {% 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 %}

      {% if _label_link != '' %}
        {% assign _target = '_self' %}
        {% if _label_link contains 'http' %}
          {% assign _target = '_blank' %}
        {% endif %}
        {% capture _label %}
         <a target="{{ _target }}"  href="{{ _label_link | strip }}" data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></a>
        {% endcapture %}
      {% else %}
        {% capture _label %}
          <span data-label-text="{{ _label_text | strip }}"><i class="{{ _label_icon }}"></i></span>
        {% endcapture %}
      {% endif %}

Then, copy the default stylesheet jekyll-theme-chirpy.scss to your project in the same location (/assets/css/jekyll-theme-chirpy.scss) and add the following block:

.code-header {
  a {
    margin-left: -0.875rem;
    line-height: 2.25rem;

    i {
      position: relative;
      top: 1px;
      font-size: 1rem;
      width: 1.75rem;
      color: var(--code-header-icon-color);
    }

    &::after {
      content: attr(data-label-text);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--code-header-text-color);
    }
  }
}