Alpine and Sharer.js with Web Share API

by philw_

HTML

<script src="https://cdn.jsdelivr.net/npm/alpinejs@2.3.3/dist/alpine.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.4.6/tailwind.min.css">
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/lazysizes.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lazysizes@5.2.2/plugins/unveilhooks/ls.unveilhooks.min.js"></script>
<!-- 
  Lazyload sharer.js as it isn't vital to the page. If your project
  isn't already using Lazysizes for image lazyloading then you could
  load Sharer.js as a script tag with a `defer` attribute instead.
-->
<aside class="bg-gray-200 block m-4 p-4 rounded-lg lazyload" data-script="https://cdn.jsdelivr.net/npm/sharer.js@0.4.0/sharer.min.js">
  <!-- Use the appropriate heading level, it could be H2, H3 etc -->
  <h3 class="sr-only" id="sharer-heading">
    Share this page:
  </h3>
  <ul class="grid gap-3 leading-none max-w-sm m-auto" style="grid-template-columns: repeat(auto-fit, minmax(24px, 1fr))" x-data="{ title:document.title, url:window.location.href }" aria-labelledby="sharer-heading" x-init="
      function () {
        // Use a canonical URL if possible.
        var canonicalElement = document.querySelector('link[rel=canonical]');
        if (canonicalElement !== null) { url = canonicalElement.href; }
      }
    ">
    <li x-show="navigator.share" class="flex justify-center">
      <button aria-label="Share using your device's share options" @click="navigator.share({title:title,url:url})">
        <img alt="" class="w-6 h-6" src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/icons/share-2.svg" />
      </button>
    </li>
    <li class="flex justify-center">
      <button aria-label="Share on Twitter" data-sharer="twitter" :data-title="title" :data-url="url">
        <img alt="" class="w-6 h-6" src="https://cdn.jsdelivr.net/npm/simple-icons@v2/icons/twitter.svg" />
      </button>
    </li>
    <li class="flex justify-center">
      <button aria-label="Share on...