Share

// src/components/elements/share/schema.yaml

$schema: http://json-schema.org/draft-07/schema#
$id: /elements/share
additionalProperties: false
required:
  - url
  - title
  - teaser_text
properties:
  url:
    type: string
    format: uri-reference
  title:
    type: string
  teaser_text:
    type: string
  centered_on_mobile:
    type: boolean

// src/components/elements/share/mocks.yaml

url: https://greenpeace.de
title: Titel of the article
teaser_text: >-
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit molestiae
  necessitatibus omnis sint totam. Doloremque ea itaque molestiae nisi possimus.
$variants:
  - $name: Centered on mobile
    centered_on_mobile: true

// 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>