chore: update share button + fixes

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;
@@ -12,10 +17,4 @@ input {
   border-radius: var(--rounded-md);
   padding: .25rem;
   border: 1px solid var(--gray-light);
-}
-
-label {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  height: 1rem;
 }