web/wp-content/themes/mozilla-builders/templates/components/articles/share-tools.twig

{% set socials = [
  {
    "name": "Facebook",
    "url": "https://www.facebook.com/sharer/sharer.php?u=" ~ post.link|url_encode
  },
  {
    "name": "LinkedIn",
    "url": "https://www.linkedin.com/sharing/share-offsite/?url=" ~ post.link|url_encode
  },
  {
    "name": "X",
    "url": "https://twitter.com/intent/tweet?url=" ~ post.link|url_encode ~ "&text=" ~ post.post_title|url_encode
  }
] %}

<ul class="flex flex-wrap max-md:justify-end max-md:gap-x-3 md:flex-col max-md:gap-y-1">
  {% for social in socials %}
    <li class="flex justify-end">
      <a
        class="uppercase leading-tight hover-link font-bold"
        href="{{ social.url }}"
        target="_blank"
        rel="noopener"
      >
        {{- social.name -}}
      </a>
    </li>
  {% endfor %}
</ul>