share

// src/components/elements/share/share.html.twig

{% set links = [
  {
    label: "whatsapp",
    platform: "whatsapp",
    attributes: 'href="whatsapp://send?text=' ~ url ~ '" data-action="share/whatsapp/share"'
  },
  {
    label: "facebook",
    platform: "facebook",
    attributes: 'href="https://www.facebook.com/sharer/sharer.php?u=' ~ url ~ '" target="_blank" rel="noopener noreferrer"'
  },
  {
    label: "bluesky",
    platform: "bluesky",
    attributes: 'href="https://bsky.app/intent/compose?text=' ~ url ~ '"'
  },
  {
    label: "mail",
    platform: "email",
    attributes: 'href="mailto:?subject=' ~ title|url_encode ~ '&body=' ~ 'Ich möchte diese Seite weiterempfehlen: '|url_encode ~ title|url_encode ~ ',%20' ~ teaser_text|url_encode ~ ',%20' ~ url ~ '"'
  }
] %}

<div class="Share js-Share{% if class %} {{ class }}{% endif %}{% if centered_on_mobile %} Share--centeredOnMobile{% endif %}">
  <span class="u-typo-headline6">Jetzt teilen:</span>
  <ul class="Share-networks">
    {% for item in links %}
      <li class="Share-network">
        <a {{ item.attributes|raw }} class="Share-networkLink Tracking--share Share-networkLink--{{ item.label }}{% if item.label == "bluesky" or item.label == "facebook" %} js-Share-networkLink{% endif %}" data-tracking-platform="{{ item.platform }}">
          {% include "@elements/icon/icon.html.twig" with {
            name: item.label,
            class: "Share-icon"
          } only %}
          <span class="u-hiddenVisually">{{ item.label }}</span>
        </a>
      </li>
    {% endfor %}
  </ul>
</div>