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

src/assets/styles/index.css

@@ -75,7 +75,14 @@ a svg {
   stroke: var(--accent-color);
 }
 
-:is(a:has(svg):hover, a:has(svg):active, a:has(svg):focus) svg {
+:is(
+    a:has(svg):hover,
+    a:has(svg):active,
+    a:has(svg):focus,
+    button:has(svg):hover,
+    button:has(svg):active,
+    button:has(svg):focus
+) svg {
   stroke: var(--accent-color-hover);
 }
 
@@ -196,6 +203,8 @@ nav svg {
 a svg:hover,
 a svg:active,
 a svg:focus,
+button:hover svg,
+button svg:hover,
 .theme__toggle:hover,
 .theme__toggle svg:hover {
   stroke-width: var(--stroke-width-bold);
@@ -344,7 +353,7 @@ code {
 /* articles */
 article h2 {
   line-height: var(--line-height-2xl);
-  margin: 0 0 .125rem;
+  margin: 0 0 .375rem;
 }
 
 article [rel="author"],
@@ -377,7 +386,7 @@ svg {
 }
 
 .icon--center__vertical {
-  height: 1.75rem;
+  height: 1.275rem;
 }
 
 .icon--center__vertical > svg {
@@ -565,11 +574,6 @@ footer nav {
     height: 1rem;
   }
 
-  /* icons */
-  .icon--center__vertical {
-    height: 1.5rem;
-  }
-
   /* lists */
   ul, ol {
     padding-left: 2.5rem;

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

@@ -0,0 +1,21 @@
+button {
+  background: transparent;
+  padding: 0;
+}
+
+button,
+button > svg {
+  cursor: pointer;
+}
+
+input {
+  border-radius: var(--rounded-md);
+  padding: .25rem;
+  border: none;
+}
+
+label {
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-sm);
+  height: 1rem;
+}