feat: post share button

src/_includes/partials/now/media-grid.liquid

@@ -37,7 +37,8 @@
               'lazy'
             {%- endif -%}
           {%- endcapture -%}
-          <img src="{{ item.image }}" alt="{{ alt }}" loading="{{ loadingStrategy }}" />
+          <!-- <img src="{{ item.image }}" alt="{{ alt }}" loading="{{ loadingStrategy }}" /> -->
+          {{ item.image}}
         </div>
       </a>
     {% endfor %}

src/_includes/partials/share-button.liquid

@@ -0,0 +1,23 @@
+{% capture css %}
+  {% render "../../assets/styles/widgets/share-button.css" %}
+{% endcapture %}
+<style>{{ css }}</style>
+<script type="module" src="/assets/scripts/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>

src/_includes/post.liquid

@@ -14,7 +14,8 @@ schema: blog
     <h2 class="p-name" data-pagefind-meta="title">{{ title }}</h2>
     <span class="p-author h-card hidden">{{ meta.author }}</span>
     <div class="flex--centered">
-      <time class="dt-published" datetime="{{ date }}">{{ date | readableDate }}</time>
+      <time class="dt-published" datetime="{{ date }}">{{ date | readableDate }} • </time>
+      {% render "partials/share-button.liquid", url:postUrl %}
     </div>
     <div class="p-summary hidden">{{ post_excerpt }}</div>
     <div class="e-content">