feat: post share button

.eleventy.js

@@ -77,6 +77,9 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy({
     'node_modules/@daviddarnes/mastodon-post/mastodon-post.js': 'assets/scripts/mastodon-post.js'
   })
+  eleventyConfig.addPassthroughCopy({
+    'node_modules/@daviddarnes/share-button/share-button.js': 'assets/scripts/share-button.js'
+  })
 
   // enable merging of tags
   eleventyConfig.setDataDeepMerge(true)

package-lock.json

@@ -1,15 +1,16 @@
 {
   "name": "coryd.dev",
-  "version": "6.0.7",
+  "version": "6.1.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "6.0.7",
+      "version": "6.1.7",
       "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"
       },
@@ -1231,6 +1232,11 @@
       "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",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "6.1.7",
+  "version": "6.2.7",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
@@ -21,6 +21,7 @@
   "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"
   },

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;
+}