{%- assign social = site.social.links -%}

<ul class=“social-media-list”>

{%- for glb in social.gitlab -%}
  {%- if glb.username and glb.instance -%}
    <li>
      <a rel="me" href="https://{{ glb.instance | cgi_escape | escape}}/{{glb.username}}" title="{{ glb.username | escape }}">
        <svg class="svg-icon">
          <use xlink:href="{{ '/assets/popfolio-social-icons.svg#gitlab' | relative_url }}"></use>
        </svg>
      </a>
    </li>
  {%- endif -%}
{%- endfor -%}
{%- if social.dribbble -%}
  <li>
    <a rel="me" href="https://dribbble.com/{{ social.dribbble | cgi_escape | escape }}" title="{{ social.dribbble | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#dribbble' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.facebook -%}
  <li>
    <a rel="me" href="https://www.facebook.com/{{ social.facebook | cgi_escape | escape }}" title="{{ social.facebook | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#facebook' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.flickr -%}
  <li>
    <a rel="me" href="https://www.flickr.com/photos/{{ social.flickr | cgi_escape | escape }}" title="{{ social.flickr | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#flickr' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.github -%}
  <li>
    <a rel="me" href="https://github.com/{{ social.github | cgi_escape | escape }}" title="{{ social.github | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#github' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.stackoverflow -%}
  <li>
    <a rel="me" href="https://stackoverflow.com/users/{{ social.stackoverflow | cgi_escape | escape }}" title="{{ social.stackoverflow | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#stackoverflow' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.instagram -%}
  <li>
    <a rel="me" href="https://www.instagram.com/{{ social.instagram | cgi_escape | escape }}" title="{{ social.instagram | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#instagram' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.linkedin -%}
  <li>
    <a rel="me" href="https://www.linkedin.com/in/{{ social.linkedin | cgi_escape | escape }}" title="{{ social.linkedin | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#linkedin' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.pinterest -%}
  <li>
    <a rel="me" href="https://www.pinterest.com/{{ social.pinterest | cgi_escape | escape }}" title="{{ social.pinterest | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#pinterest' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- for mst in social.mastodon -%}
  {%- if mst.username and
mst.instance -%}
    <li>
      <a rel="me" href="https://{{ mst.instance | cgi_escape | escape}}/@{{mst.username}}" title="{{ mst.username | escape }}">
        <svg class="svg-icon">
          <use xlink:href="{{ '/assets/popfolio-social-icons.svg#mastodon' | relative_url }}"></use>
        </svg>
      </a>
    </li>
  {%- endif -%}
{%- endfor -%}
{%- if social.twitter -%}
  <li>
    <a rel="me" href="https://twitter.com/{{ social.twitter | cgi_escape | escape }}" title="{{ social.twitter | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#twitter' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.youtube -%}
  <li>
    <a rel="me" href="https://www.youtube.com/{{ social.youtube | cgi_escape | escape }}" title="{{ social.youtube | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#youtube' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.youtube_channel -%}
  <li>
    <a rel="me" href="https://www.youtube.com/channel/{{ social.youtube_channel | cgi_escape | escape }}" title="{{ social.youtube_channel_name | escape | default: 'YouTube' }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#youtube' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.telegram -%}
  <li>
    <a rel="me" href="https://t.me/{{ social.telegram | cgi_escape | escape }}" title="{{ social.telegram | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#telegram' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.keybase -%}
  <li>
    <a rel="me" href="https://keybase.io/{{ social.keybase | cgi_escape | escape }}" title="{{ social.keybase | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#keybase' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.microdotblog -%}
  <li>
    <a rel="me" href="https://micro.blog/{{ social.microdotblog | cgi_escape | escape }}" title="{{ social.microdotblog | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#microdotblog' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}
{%- if social.devto -%}
  <li>
    <a href="https://dev.to/{{ social.devto | cgi_escape | escape }}" title="{{ social.devto | escape }}">
      <svg class="svg-icon">
        <use xlink:href="{{ '/assets/popfolio-social-icons.svg#devto' | relative_url }}"></use>
      </svg>
    </a>
  </li>
{%- endif -%}

</ul>