Update webmentions styling

+ add EOL newline
+ restore some changes

content/blog/shortcodes/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2025-02-21
+updated = 2025-02-15
 description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más."
 
 [taxonomies]

content/blog/shortcodes/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2025-03-19
+updated = 2025-05-18
 description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered."
 
 [taxonomies]
@@ -60,28 +60,28 @@ The diagram will be rendered as follows:
 
 {% mermaid() %}
 classDiagram
-  class CognitiveDistortions {
+    class CognitiveDistortions {
-    +AllOrNothingThinking()
+        +AllOrNothingThinking()
-    +Overgeneralization()
+        +Overgeneralization()
-    +MentalFilter()
+        +MentalFilter()
-    +JumpingToConclusions()
+        +JumpingToConclusions()
-  }
+    }
-  class AllOrNothingThinking {
+    class AllOrNothingThinking {
-    +SeeInExtremes()
+        +SeeInExtremes()
-  }
+    }
-  class Overgeneralization {
+    class Overgeneralization {
-    +GeneralizeFromSingle()
+        +GeneralizeFromSingle()
-  }
+    }
-  class MentalFilter {
+    class MentalFilter {
-    +FocusOnNegative()
+        +FocusOnNegative()
-  }
+    }
-  class JumpingToConclusions {
+    class JumpingToConclusions {
-    +MakeAssumptions()
+        +MakeAssumptions()
-  }
+    }
-  CognitiveDistortions *-- AllOrNothingThinking
+    CognitiveDistortions *-- AllOrNothingThinking
-  CognitiveDistortions *-- Overgeneralization
+    CognitiveDistortions *-- Overgeneralization
-  CognitiveDistortions *-- MentalFilter
+    CognitiveDistortions *-- MentalFilter
-  CognitiveDistortions *-- JumpingToConclusions
+    CognitiveDistortions *-- JumpingToConclusions
 {% end %}
 
 The Mermaid shortcode supports two parameters:
@@ -462,4 +462,3 @@ def مرحبا_بالعالم():
 
 {%/* end */%}
 ````
-

sass/parts/_webmention.scss

@@ -1,132 +1,149 @@
 #webmentions {
-  margin: 0;
+    position: relative;
-  position: relative;
+    z-index: 100;
-  z-index: 100;
+    margin: 0;
-  line-height: 1.2em;
+    background-color: var(--background-color);
-  color: var(--text-color);
+    color: var(--text-color);
-  background-color: var(--background-color);
+    line-height: 1.2em;
 
-  h2 {
+    h2 {
-    font-size: 1.1em;
+        margin-bottom: 1.5em;
-    margin-bottom: 1.5em;
+        font-size: 1.1em;
-  }
-
-  h3 {
-    font-size: 0.9em;
-    display: flex;
-    align-items: center;
-
-    .svg-icon, span {
-      margin-right: .375rem;
-    }
-  }
-
-  ol {
-    padding: 0;
-  }
-
-  li, p {
-    font-family: inherit;
-  }
-
-  .likes {
-    display: flex;
-    flex-wrap: wrap;
-    list-style: none;
-    padding-left: 1rem;
-
-    li {
-      margin-bottom: .375rem;
-      // margin-left: -1rem;
-      position: relative;
-
-      img {
-        border-radius: 50%;
-        height: 3rem;
-        -o-object-fit: cover;
-        object-fit: cover;
-        display: block;
-        height: auto;
-        max-width: 100%;
-      }
-    }
-  }
-
-  .comment {
-    font-size: 80%;
-    box-shadow: rgba(50,50,93,.25) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;
-    border-radius: 0.5rem;
-    padding: 0.5rem;
-    padding-bottom: 0;
-    background: var(--bg-1);
-    min-height: 100px;
-    overflow: hidden;
-    margin-bottom: 0.5em;
-
-
-    div {
-      display: flex;
-      flex-wrap: nowrap;
-      align-items: center;
-      justify-content: space-between;
     }
 
+    h3 {
+        display: flex;
+        align-items: center;
+        font-size: 0.9em;
+
+        svg {
+            margin-inline-end: 0.2rem;
+        }
+
+        .svg-icon,
+        span {
+            margin-inline-end: .3rem;
+        }
+    }
+
+    ol {
+        padding: 0;
+    }
+
+    li,
     p {
-      line-height: 1.5em;
+        font-family: inherit;
     }
 
-    .p-author {
+
-      font-size: 1.3em;
+.likes {
-      font-style: bold;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 0.5rem;
+        padding: 0;
+        list-style: none;
+
+        li {
+            position: relative;
+            transition: transform 0.8s ease-out, z-index 0s linear 0.4s;
+            margin-bottom: .375rem;
+            margin-inline-start: -.75rem;
+
+            &:first-child {
+                margin-inline-start: 0;
+            }
+
+            &:hover {
+                transform: scale(1.3) translateY(-4px);
+                z-index: 10;
+                transition: transform 0.05s ease-out, z-index 0s linear 0s;
+            }
+
+            img {
+                display: block;
+                border: 2px solid var(--background-color, white);
+                border-radius: 50%;
+                aspect-ratio: 1/1;
+                width: 2.5rem;
+                height: 2.5rem;
+                object-fit: cover;
+            }
+        }
     }
 
-    .u-url {
+    .comment {
-      font-style: italic;
+        margin-bottom: 1rem;
-      text-decoration: underline;
+        border-radius: 10px;
+        background: var(--bg-0);
+        padding: 1rem;
+        overflow: hidden;
+        font-size: 80%;
+
+        div {
+            display: flex;
+            flex-wrap: nowrap;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        p {
+            margin-bottom: 0;
+            line-height: 1.5em;
+        }
+
+        .p-author {
+            font-style: bold;
+            font-size: 1.3em;
+        }
+
+        .u-url {
+            font-style: italic;
+            text-decoration: underline;
+        }
+
+        .u-author {
+            display: flex;
+            align-items: center;
+
+            img {
+                display: block;
+                margin-inline-end: .625rem;
+                width: 2rem;
+                max-width: 100%;
+                height: 2rem;
+            }
+        }
     }
 
-    .u-author {
+    form {
-      display: flex;
+        input {
-      align-items: center;
+            flex: 1;
+            border: 1px solid var(--divider-color);
+            border-radius: 20px 0px 0px 20px;
+            background-color: var(--input-background-color);
+            padding-inline: 1rem 1rem;
+            padding-block: .75rem;
+            width: calc(60% - 2rem);
+            color: var(--text-color);
+            font-size: 1rem;
+        }
 
-      img {
+        button {
-        height: 2rem;
+            flex: 1;
-        margin-right: .625rem;
+            border: 1px solid var(--divider-color);
-        width: 2rem;
+            border-radius: 0px 20px 20px 0px;
-        display: block;
+            background-color: var(--input-background-color);
-        max-width: 100%;
+            padding-inline: 0.7rem 0.7rem;
-      }
+            padding-block: .75rem;
-    }
+            width: 7rem;
+            color: var(--text-color);
+            font-size: 1rem;
+        }
 
-  }
+        button:hover {
-
+            cursor: pointer;
-  form {
+            background-color: var(--primary-color);
-    input {
+            color: var(--hover-color);
-      flex: 1;
+        }
-      border: 1px solid var(--divider-color);
-      border-radius: 20px 0px 0px 20px;
-      background-color: var(--input-background-color);
-      color: var(--text-color);
-      font-size: 1rem;
-      padding-inline: 1rem 1rem;
-      padding-block: .75rem;
-      width: calc(60% - 2rem);
     }
-    button {
-      flex: 1;
-      border: 1px solid var(--divider-color);
-      border-radius: 0px 20px 20px 0px;
-      background-color: var(--input-background-color);
-      color: var(--text-color);
-      font-size: 1rem;
-      padding-inline: 0.7rem 0.7rem;
-      padding-block: .75rem;
-      width: 7rem;
-    }
-    button:hover {
-      background-color: var(--primary-color);
-      color: var(--hover-color);
-      cursor: pointer;
-    }
-  }
 }

static/js/webmention.min.js

@@ -63,4 +63,4 @@
       `}),html+=`
     </ol >
   </div >
-      `}window.addEventListener("load",async function(){var container=document.getElementById(containerID);if(container){let pages=[stripurl(refurl)],apiURL=(addurls&&addurls.split("|").forEach(function(url){pages.push(stripurl(url))}),`https://webmention.io/api/mentions.jf2?per-page=${maxWebmentions}&sort-by=${sortBy}&sort-dir=`+sortDir),json=(pages.forEach(function(path){apiURL+=`&target[]=${encodeURIComponent("http:"+path)}&target[]=`+encodeURIComponent("https:"+path)}),{});try{var response=await window.fetch(apiURL);200<=response.status&&response.status<300?json=await response.json():(console.error("Could not parse response"),new Error(response.statusText))}catch(error){console.error("Request failed",error)}var response=[],mentions=[],bookmarks=[],likes=[],reposts=[];let mapping={"in-reply-to":response,"like-of":likes,"repost-of":reposts,"bookmark-of":bookmarks,"follow-of":[],"mention-of":mentions,rsvp:response},formattedMentions=(json.children.forEach(function(child){var store=mapping[child["wm-property"]];store&&store.push(child)}),""),formattedComments=(0<mentions.length&&(formattedMentions=formatComments("mention",dedupe(mentions))),""),likesStr=(0<response.length&&(formattedComments=formatComments("comment",dedupe(response))),""),repostsStr=(0<likes.length&&(likesStr=formatReactions("like",dedupe(likes))),""),bookmarksStr=(0<reposts.length&&(repostsStr=formatReactions("repost",dedupe(reposts))),"");0<bookmarks.length&&(bookmarksStr=formatReactions("bookmark",dedupe(bookmarks))),container.innerHTML=`<div id="webmentions">${repostsStr}${likesStr}${bookmarksStr}${formattedComments}${formattedMentions}</div>`}})})();
+      `}window.addEventListener("load",async function(){var container=document.getElementById(containerID);if(container){let pages=[stripurl(refurl)],apiURL=(addurls&&addurls.split("|").forEach(function(url){pages.push(stripurl(url))}),`http://127.0.0.1:1111/test_webmentions.jf2?`),json=(pages.forEach(function(path){apiURL+=`&target[]=${encodeURIComponent("http:"+path)}&target[]=`+encodeURIComponent("https:"+path)}),{});try{var response=await window.fetch(apiURL);200<=response.status&&response.status<300?json=await response.json():(console.error("Could not parse response"),new Error(response.statusText))}catch(error){console.error("Request failed",error)}var response=[],mentions=[],bookmarks=[],likes=[],reposts=[];let mapping={"in-reply-to":response,"like-of":likes,"repost-of":reposts,"bookmark-of":bookmarks,"follow-of":[],"mention-of":mentions,rsvp:response},formattedMentions=(json.children.forEach(function(child){var store=mapping[child["wm-property"]];store&&store.push(child)}),""),formattedComments=(0<mentions.length&&(formattedMentions=formatComments("mention",dedupe(mentions))),""),likesStr=(0<response.length&&(formattedComments=formatComments("comment",dedupe(response))),""),repostsStr=(0<likes.length&&(likesStr=formatReactions("like",dedupe(likes))),""),bookmarksStr=(0<reposts.length&&(repostsStr=formatReactions("repost",dedupe(reposts))),"");0<bookmarks.length&&(bookmarksStr=formatReactions("bookmark",dedupe(bookmarks))),container.innerHTML=`<div id="webmentions">${repostsStr}${likesStr}${bookmarksStr}${formattedComments}${formattedMentions}</div>`}})})();

templates/partials/header.html

@@ -151,7 +151,6 @@
         <meta name="fediverse:creator" content="@{{ config.extra.fediverse_creator["handle"] }}@{{ config.extra.fediverse_creator["domain"]}}" />
     {%- endif -%}
 
-
     {# Search #}
     {%- if config.build_search_index -%}
         {%- if config.search.index_format -%}