chore: drop webmentions

.env

@@ -2,7 +2,6 @@ API_KEY_LASTFM=
 API_KEY_PLAUSIBLE=
 API_KEY_TRAKT=
 API_KEY_MOVIEDB=
-API_KEY_WEBMENTIONS_CORYD_DEV=
 API_TOKEN_READWISE=
 SECRET_FEED_ALBUM_RELEASES=
 COOKIE_STORYGRAPH=

config/filters/index.js

@@ -56,70 +56,6 @@ export default {
     return tagMap[url] || ''
   },
 
-  // webmentions
-  webmentionsByUrl: (webmentions, url) => {
-    if (!webmentions) return null;
-
-    const allowedTypes = ['mention-of', 'in-reply-to', 'like-of', 'repost-of']
-    const data = {
-      'like-of': [],
-      'repost-of': [],
-      'in-reply-to': [],
-      'mention-of': [],
-      'link-to': [],
-    }
-
-    const hasRequiredReplyFields = (entry) => {
-      const { author, published, content } = entry
-      return author.name && author.photo && published && content
-    }
-
-    const hasRequiredMentionFields = (entry) => {
-      const { name, url } = entry
-      return name && url
-    }
-
-    const filtered =
-      webmentions
-        .filter((entry) => entry['wm-target'] === `${BASE_URL}${url}`)
-        .filter((entry) => allowedTypes.includes(entry['wm-property'])) || []
-
-    filtered.forEach((m) => {
-      if (data[m['wm-property']]) {
-        const isReply = m['wm-property'] === 'in-reply-to'
-        const isMention = m['wm-property'] === 'mention-of'
-        const isValidReply = (isReply || isMention) && hasRequiredReplyFields(m)
-        if (isReply || isMention) {
-          if (isValidReply) {
-            m.sanitized = sanitizeHTML(m.content.html)
-            data[m['wm-property']].unshift(m)
-          }
-
-          if (isMention && hasRequiredMentionFields(m)) data['link-to'].push(m)
-          return
-        }
-        data[m['wm-property']].unshift(m)
-      }
-    })
-
-    data['in-reply-to'] = [...data['in-reply-to'], ...data['mention-of']]
-    data['in-reply-to'].sort((a, b) =>
-      a.published > b.published ? 1 : b.published > a.published ? -1 : 0
-    )
-
-    // delete empty keys
-    Object.keys(data).forEach((key) => {
-      if (data[key].length === 0) delete data[key]
-    });
-
-    if (!Object.keys(data).length) return null;
-
-    return data
-  },
-  webmentionsSanitizeComments: (comment) => {
-    return comment.replace(/\?\?\?\?/g, '');
-  },
-
   // dates
   readableDate: (date) => {
     return DateTime.fromISO(date).toFormat('LLLL d, yyyy')

config/shortcodes/index.js

@@ -18,15 +18,6 @@ export const img = async (
   sizes = '90vw',
   formats = ['avif', 'webp', 'jpeg']
 ) => {
-  const isLocal = src?.includes('src/assets');
-  const imageExists = async () => {
-    try {
-      return await fetch(src, { method: 'HEAD' }).then((res) => res.ok);
-    } catch {
-      return false;
-    }
-  };
-
   const generateImage = async () => {
     const widths = [320, 570, 880, 1024, 1248];
     const metadata = await Image(src, {
@@ -70,7 +61,7 @@ export const img = async (
   };
 
   if (process.env.ELEVENTY_PRODUCTION) {
-    return isLocal ? await generateImage() : await imageExists().then(async (exists) => (exists ? await generateImage() : await generatePlaceholder()));
+    return await generateImage();
   } else {
     return await generatePlaceholder();
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "5.5.0",
+  "version": "5.6.0",
   "description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
   "type": "module",
   "scripts": {

src/_data/webmentions.js

@@ -1,20 +0,0 @@
-import EleventyFetch from '@11ty/eleventy-fetch'
-
-export default async function () {
-  const KEY_CORYD = process.env.API_KEY_WEBMENTIONS_CORYD_DEV
-  const url = `https://webmention.io/api/mentions.jf2?token=${KEY_CORYD}&per-page=1000`
-  if (process.env.ELEVENTY_PRODUCTION) {
-    const res = EleventyFetch(url, {
-      duration: '1h',
-      type: 'json',
-    }).catch()
-    const webmentions = await res
-    return {
-      mentions: webmentions['children'],
-    }
-  } else {
-    return {
-      mentions: []
-    }
-  }
-}

src/_includes/partials/webmentions/comments.liquid

@@ -1,24 +0,0 @@
-{% if mentions['in-reply-to'].size > 0 %}
-  <h2>Comments</h2>
-  <div class="interaction comments">
-    {% for mention in mentions['in-reply-to'] %}
-      <div class="comment__wrapper flex--centered">
-        <div class="comment__wrapper--interior flex--centered">
-          <a href={{mention.url}}>
-            <div class="avatar__wrapper flex--centered">
-            {% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %}
-            {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %}
-            {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'square', fallbackIcon %}
-            </div>
-          </a>
-          <div class="comment">
-            <a href={{mention.url}}>
-              <p>{{ mention.content.text | webmentionsSanitizeComments }}</p>
-              <time>{{ mention.published | isoDateOnly }}</time>
-            </a>
-          </div>
-        </div>
-      </div>
-    {% endfor %}
-  </div>
-{% endif %}

src/_includes/partials/webmentions/container.liquid

@@ -1,13 +0,0 @@
-{% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %}
-{% if mentions %}
-  {% capture css %}
-    {% render "../../../assets/styles/widgets/webmentions.css" %}
-  {% endcapture %}
-  <style>{{ css }}</style>
-  <div class="webmentions">
-    {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'repost-of' %}
-    {% render "partials/webmentions/interaction.liquid", mentions: mentions, type: 'like-of' %}
-    {% render "partials/webmentions/comments.liquid", mentions: mentions %}
-    {% render "partials/webmentions/links.liquid", mentions: mentions %}
-  </div>
-{% endif %}

src/_includes/partials/webmentions/interaction.liquid

@@ -1,21 +0,0 @@
-{%- capture title %}
-  {% if type == 'repost-of' %}
-    Reposts
-  {% elsif type == 'like-of' %}
-    Likes
-  {% endif %}
-{% endcapture -%}
-{% if mentions[type].size > 0 %}
-  <h2>{{ title }}</h2>
-  <div class="interaction flex--centered">
-    {% for mention in mentions[type] %}
-    <a href={{mention.url}}>
-      <div class="avatar__wrapper flex--centered">
-        {% capture authorAlt %}{{ mention.author.name | escape }}{% endcapture %}
-        {% capture fallbackIcon %}{% tablericon "user" authorAlt %}{% endcapture %}
-        {% image mention.author.photo, authorAlt, 'avatar__image', 'lazy', 'square', fallbackIcon %}
-      </div>
-    </a>
-    {% endfor %}
-  </div>
-{% endif %}

src/_includes/partials/webmentions/links.liquid

@@ -1,12 +0,0 @@
-{% if mentions['link-to'].size > 0 %}
-  <h2>Links</h2>
-  <ul class="link__list">
-    {% for mention in mentions['link-to'] %}
-      <li>
-        <a class="no-underline" href="{{ mention.url }}">
-          {{ mention.name }}
-        </a>
-      </li>
-    {% endfor %}
-  </ul>
-{% endif %}

src/_includes/post.liquid

@@ -30,5 +30,4 @@ schema: blog
   </article>
 </div>
 {% render "partials/post-tags.liquid", tags: tags %}
-{% render "partials/webmentions/container.liquid", webmentions: webmentions, page: page %}
 {% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}

src/assets/styles/widgets/webmentions.css

@@ -1,105 +0,0 @@
-.webmentions {
-  border-top: 1px solid var(--gray-light);
-  border-bottom: 1px solid var(--gray-light);
-  margin-top: 1.5rem;
-  margin-bottom: 2.5rem;
-  padding-top: 1rem;
-  padding-bottom: 2.5rem;
-}
-
-.webmentions h2:not(:first-child) {
-  margin-top: 2rem;
-}
-
-.webmentions .interaction {
-  cursor: pointer;
-  margin-top: 1rem;
-  margin-bottom: 1.5rem;
-}
-
-.webmentions .interaction .comment__wrapper {
-  width: 100%;
-  padding-bottom: 1rem;
-}
-
-.webmentions .interaction .comment__wrapper:last-child {
-  padding-bottom: 0;
-}
-
-.webmentions .interaction .avatar__wrapper:hover,
-.webmentions .interaction .avatar__wrapper:focus,
-.webmentions .interaction .avatar__wrapper:active,
-.webmentions .interaction .comment__wrapper:hover .avatar__wrapper,
-.webmentions .interaction .comment__wrapper:focus .avatar__wrapper
-.webmentions .interaction .comment__wrapper:active .avatar__wrapper {
-  border-color: var(--accent-color-hover);
-}
-
-.webmentions .interaction .comment__wrapper--interior {
-  justify-content: space-between;
-}
-
-.webmentions .interaction .comment__wrapper--interior .comment {
-  margin-left: .75rem;
-}
-
-.webmentions .interaction .comment__wrapper--interior .comment a {
-  color: var(--text-color);
-  text-decoration: none;
-}
-
-.webmentions .interaction .comment__wrapper--interior .comment p {
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-sm);
-  margin: 0;
-  word-break: break-word;
-}
-
-.webmentions .interaction .comment__wrapper--interior .comment time {
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-xs);
-  margin-top: .25rem;
-}
-
-.webmentions .interaction {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: 0 0 0 .75rem;
-  padding: 0;
-}
-
-.webmentions .interaction.comments {
-  flex-direction: column;
-  margin: 0;
-}
-
-.webmentions .interaction > a {
-  margin-left: -.75rem;
-  height: 3.5rem;
-}
-
-.webmentions .interaction .avatar__wrapper {
-  border: 4px solid var(--background-color);
-  background-color: var(--background-color-inverted);
-  width: 3.5rem;
-  height: 3.5rem;
-  margin-bottom: 0;
-  overflow: hidden;
-  border-radius: var(--rounded-full);
-  transition-property: border-color;
-  transition-timing-function: var(--transition-ease-in-out);
-  transition-duration: var(--transition-duration-default);
-}
-
-.webmentions .interaction .avatar__wrapper img {
-  width: 100%;
-  height: 100%;
-  border-radius: var(--rounded-full);
-}
-
-.webmentions .interaction .avatar__wrapper > picture {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}