feat: mastodon-post web component

.eleventy.js

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

config/filters/index.js

@@ -111,7 +111,9 @@ export default {
   // links
   findPost: (url, posts) => {
     if (!url || !posts) return null;
-    return posts[url]?.toots?.[0] || null;
+    const BASE_URL = 'https://social.lol/users/cory/statuses/'
+    const STATUS_URL = 'https://social.lol/@cory/'
+    return posts[url]?.toots?.[0].replace(BASE_URL, STATUS_URL) || null;
   },
   absoluteUrl: (url, base) => {
     if (!base) base = metaData.url

package-lock.json

@@ -1,14 +1,15 @@
 {
   "name": "coryd.dev",
-  "version": "5.9.6",
+  "version": "6.0.7",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "5.9.6",
+      "version": "6.0.7",
       "license": "MIT",
       "dependencies": {
+        "@daviddarnes/mastodon-post": "^1.1.1",
         "@remy/webmention": "^1.5.0",
         "@zachleat/pagefind-search": "^1.0.3"
       },
@@ -1225,6 +1226,11 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@daviddarnes/mastodon-post": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@daviddarnes/mastodon-post/-/mastodon-post-1.1.1.tgz",
+      "integrity": "sha512-qkVOJkCzsMASuvcvlv9cG/hdDwMp9uVnfFS7YhQ0JPmls4g6eVQNjLBxUT+iINFU+yBZj/zPwovDhO79gnOPEQ=="
+    },
     "node_modules/@emnapi/runtime": {
       "version": "0.45.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-0.45.0.tgz",
@@ -7045,9 +7051,9 @@
       "dev": true
     },
     "node_modules/terser": {
-      "version": "5.27.1",
+      "version": "5.27.2",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.1.tgz",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.27.2.tgz",
-      "integrity": "sha512-29wAr6UU/oQpnTw5HoadwjUZnFQXGdOfj0LjZ4sVxzqwHh/QVkvr7m8y9WoR4iN3FRitVduTc6KdjcW38Npsug==",
+      "integrity": "sha512-sHXmLSkImesJ4p5apTeT63DsV4Obe1s37qT8qvwHRmVxKTBH7Rv9Wr26VcAMmLbmk9UliiwK8z+657NyJHHy/w==",
       "dev": true,
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "6.0.7",
+  "version": "6.1.7",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {
@@ -20,6 +20,7 @@
   "author": "Cory Dransfeldt",
   "license": "MIT",
   "dependencies": {
+    "@daviddarnes/mastodon-post": "^1.1.1",
     "@remy/webmention": "^1.5.0",
     "@zachleat/pagefind-search": "^1.0.3"
   },

src/_includes/partials/mastodon-post.liquid

@@ -0,0 +1,26 @@
+{%- assign shareLink = postUrl | findPost: linkPosts -%}
+{%- if shareLink %}
+{% capture css %}
+  {% render "../../assets/styles/widgets/mastodon-post.css" %}
+{% endcapture %}
+<style>{{ css }}</style>
+<script type="module" src="/assets/scripts/mastodon-post.js"></script>
+<template id="mastodon-post-template">
+  <div class="mastodon-post-wrapper">
+    <blockquote data-key="content"></blockquote>
+    <dl>
+      <dt>{% tablericon "refresh" "Reposts" %}</dt>
+      <dd data-key="reblogs_count"></dd>
+      <dt>{% tablericon "message-circle" "Replies" %}</dt>
+      <dd data-key="replies_count"></dd>
+      <dt>{% tablericon "star" "Favorites" %}</dt>
+      <dd data-key="favourites_count"></dd>
+    </dl>
+  </div>
+</template>
+<mastodon-post>
+  <a href="{{ shareLink }}">
+    Discuss on Mastodon
+  </a>
+</mastodon-post>
+{% endif -%}

src/_includes/post.liquid

@@ -29,5 +29,6 @@ schema: blog
     </div>
   </article>
 </div>
+{% render "partials/mastodon-post.liquid", postUrl: postUrl, linkPosts: linkPosts %}
 {% render "partials/post-tags.liquid", tags: tags %}
 {% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}

src/assets/styles/widgets/mastodon-post.css

@@ -0,0 +1,18 @@
+.mastodon-post-wrapper {
+  border-bottom: 1px solid var(--gray-light);
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+}
+
+dl {
+  display: flex;
+  flex-direction: row;
+}
+
+dd {
+  margin-left: .25rem;
+}
+
+dd:not(:last-child) {
+  margin-right: 1rem;
+}