chore: update share button + fixes

.eleventy.js

@@ -78,7 +78,7 @@ export default async function (eleventyConfig) {
     'node_modules/@daviddarnes/mastodon-post/mastodon-post.js': 'assets/scripts/components/mastodon-post.js'
   })
   eleventyConfig.addPassthroughCopy({
-    'node_modules/@daviddarnes/share-button/share-button.js': 'assets/scripts/components/share-button.js'
+    'node_modules/@zachleat/webcare-webshare/webcare-webshare.js': 'assets/scripts/components/webcare-webshare.js'
   })
 
   // enable merging of tags

package-lock.json

@@ -1,18 +1,18 @@
 {
   "name": "coryd.dev",
-  "version": "6.3.11",
+  "version": "6.4.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "6.3.11",
+      "version": "6.4.3",
       "license": "MIT",
       "dependencies": {
         "@daviddarnes/mastodon-post": "^1.1.1",
-        "@daviddarnes/share-button": "^1.1.2",
         "@remy/webmention": "^1.5.0",
-        "@zachleat/pagefind-search": "^1.0.3"
+        "@zachleat/pagefind-search": "^1.0.3",
+        "@zachleat/webcare-webshare": "^1.0.3"
       },
       "devDependencies": {
         "@11ty/eleventy": "3.0.0-alpha.5",
@@ -1232,11 +1232,6 @@
       "resolved": "https://registry.npmjs.org/@daviddarnes/mastodon-post/-/mastodon-post-1.1.1.tgz",
       "integrity": "sha512-qkVOJkCzsMASuvcvlv9cG/hdDwMp9uVnfFS7YhQ0JPmls4g6eVQNjLBxUT+iINFU+yBZj/zPwovDhO79gnOPEQ=="
     },
-    "node_modules/@daviddarnes/share-button": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@daviddarnes/share-button/-/share-button-1.1.2.tgz",
-      "integrity": "sha512-FV89mgFwG9+97VvkHzrE3SR3p9BzM31SuDtpWFJIfw/aThVvoQj7zM71FJ+QBAfUMF1Wwm7Jufvh6h4hEdA1uA=="
-    },
     "node_modules/@emnapi/runtime": {
       "version": "0.45.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-0.45.0.tgz",
@@ -2911,6 +2906,11 @@
       "resolved": "https://registry.npmjs.org/@zachleat/pagefind-search/-/pagefind-search-1.0.3.tgz",
       "integrity": "sha512-WKBkvx6gOSgbPcAKjhT1NLT8OXxrSKhgUUhWIdp1DfG3C8l13Cg3+mSC1ZMOEBVwUKRrwBYElJVju/Te/NrHAA=="
     },
+    "node_modules/@zachleat/webcare-webshare": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@zachleat/webcare-webshare/-/webcare-webshare-1.0.3.tgz",
+      "integrity": "sha512-xqRY49B2fhVlJGPVfufASDqxlLwQlGRlr/qLzrEgR037Wexlsd0nIQYTejD/tJWQpZxgGVXN/UZDs0VQ5VurKA=="
+    },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/a-sync-waterfall/-/a-sync-waterfall-1.0.1.tgz",
@@ -3951,14 +3951,14 @@
       }
     },
     "node_modules/es-set-tostringtag": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.2.tgz",
-      "integrity": "sha512-BuDyupZt65P9D2D2vA/zqcI3G5xRsklm5N3xCwuiy+/vKy8i0ifdsQP1sLgO4tZDSCaQUSnmC48khknGMV3D2Q==",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es-set-tostringtag/-/es-set-tostringtag-2.0.3.tgz",
+      "integrity": "sha512-3T8uNMC3OQTHkFUsFq8r/BwAXLHvU/9O9mE0fBc/MY5iq/8H7ncvO947LmYA6ldWw9Uh8Yhf25zu6n7nML5QWQ==",
       "dev": true,
       "dependencies": {
-        "get-intrinsic": "^1.2.2",
-        "has-tostringtag": "^1.0.0",
-        "hasown": "^2.0.0"
+        "get-intrinsic": "^1.2.4",
+        "has-tostringtag": "^1.0.2",
+        "hasown": "^2.0.1"
       },
       "engines": {
         "node": ">= 0.4"

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "6.4.3",
+  "version": "6.5.4",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
@@ -21,9 +21,9 @@
   "license": "MIT",
   "dependencies": {
     "@daviddarnes/mastodon-post": "^1.1.1",
-    "@daviddarnes/share-button": "^1.1.2",
     "@remy/webmention": "^1.5.0",
-    "@zachleat/pagefind-search": "^1.0.3"
+    "@zachleat/pagefind-search": "^1.0.3",
+    "@zachleat/webcare-webshare": "^1.0.3"
   },
   "devDependencies": {
     "@11ty/eleventy": "3.0.0-alpha.5",

src/_data/books.js

@@ -36,8 +36,7 @@ export default async function () {
         if (!data[i]) {
           data.push({ title: titles[i]?.textContent })
           data.push({ author: authors[i]?.textContent })
-          data.push({
-            image: images[i].src.replace(
+          data.push({ image: images[i].src.replace(
               'https://cdn.thestorygraph.com',
               'https://cd-books.b-cdn.net'
             ),
@@ -56,7 +55,7 @@ export default async function () {
           data[i]['image'] = images[i]?.src.replace(
             'https://cdn.thestorygraph.com',
             'https://cd-books.b-cdn.net'
-          )
+          ),
           data[i]['url'] = `https://app.thestorygraph.com${urls[i]?.href}`
           data[i]['percentage'] = percentages[i]?.textContent
           data[i]['dateAdded'] = date

src/_includes/partials/now/playing.liquid

@@ -1,4 +1,2 @@
 <script type="module" src="/assets/scripts/components/now-playing.js"></script>
-<div style="height:28px;margin-bottom:1rem">
-  <now-playing></now-playing>
-</div>
+<now-playing style="height:28px;margin-bottom:1rem"></now-playing>

src/_includes/partials/share-button.liquid

@@ -2,22 +2,7 @@
   {% render "../../assets/styles/components/share-button.css" %}
 {% endcapture %}
 <style>{{ css }}</style>
-<script type="module" src="/assets/scripts/components/share-button.js"></script>
-<share-button>
-  <button class="icon--small icon--center__vertical">{% tablericon "share" "Share" %}</button>
-  <label>
-    Share this page
-    <input
-      type="url"
-      readonly
-      value="{{ url }}"
-      onclick="this.select()"
-    />
-  </label>
-</share-button>
-<style>
-  share-button:not(:defined) button,
-  share-button:defined label {
-    display: none;
-  }
-</style>
+<script type="module" src="/assets/scripts/components/webcare-webshare.js"></script>
+<webcare-webshare share-text="{{ title }} {{ url | tagLookup: tagMap }}" share-url="{{ url }}" copy-text="{{ title }} {{ url | tagLookup: tagMap }} {{ url }}">
+  <button class="icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>
+</webcare-webshare>

src/_includes/post.liquid

@@ -18,7 +18,7 @@ schema: blog
         {{ date | readableDate }}
         <span class="client-side"> • </span>
       </time>
-      {% render "partials/share-button.liquid", url:postUrl %}
+      {% render "partials/share-button.liquid", url: postUrl, title: title, tagMap: collections.tagMap %}
     </div>
     <div class="p-summary hidden">{{ post_excerpt }}</div>
     <div class="e-content">

src/assets/scripts/components/now-playing.js

@@ -28,6 +28,11 @@ class NowPlaying extends HTMLElement {
         const { key } = slot.dataset
         const value = data[key]
 
+        if (!value || value === typeof undefined) {
+          slot.style.opacity = '0'
+          slot.style.display = 'none'
+        }
+
         if (cache) {
           if (key === 'loading') {
             slot.style.opacity = '0'

src/assets/styles/components/share-button.css

@@ -1,3 +1,8 @@
+webcare-webshare {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+}
+
 button {
   background: transparent;
   padding: 0;
@@ -13,9 +18,3 @@ input {
   padding: .25rem;
   border: 1px solid var(--gray-light);
 }
-
-label {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  height: 1rem;
-}