chore: return null and skip rendering webmentions container + extra border if there are no mentions

config/filters/index.js

@@ -56,6 +56,8 @@ export default {
     return tagMap[url] || ''
   },
   webmentionsByUrl: (webmentions, url) => {
+    if (!webmentions) return null;
+
     const allowedTypes = ['mention-of', 'in-reply-to', 'like-of', 'repost-of']
     const data = {
       'like-of': [],
@@ -103,6 +105,13 @@ export default {
       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
   },
 

package.json

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

src/_includes/partials/webmentions/container.liquid

@@ -1,9 +1,9 @@
-{% if webmentions %}
+{% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %}
+{% if mentions %}
   <div class="webmentions__wrapper">
-    {% assign mentions = webmentions.mentions | webmentionsByUrl: page.url %}
     {% 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 %}
+{% endif %}

src/assets/styles/index.css

@@ -705,6 +705,7 @@ article .now__section--header {
 .webmentions__wrapper {
   border-top: 1px solid var(--gray-200);
   margin-top: 1.5rem;
+  margin-bottom: 3.25rem;
   padding-top: 2rem;
 }
 
@@ -783,7 +784,7 @@ article .now__section--header {
 }
 
 .author__wrapper {
-  margin-top: 3rem;
+  margin-top: 1.5rem;
   padding: 3rem 0 1rem;
   border-top: 1px solid var(--gray-200);
 }