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]
@@ -462,4 +462,3 @@ def مرحبا_بالعالم():
 
 {%/* end */%}
 ````
-

sass/parts/_webmention.scss

@@ -1,23 +1,28 @@
 #webmentions {
-  margin: 0;
     position: relative;
     z-index: 100;
-  line-height: 1.2em;
+    margin: 0;
-  color: var(--text-color);
     background-color: var(--background-color);
+    color: var(--text-color);
+    line-height: 1.2em;
 
     h2 {
-    font-size: 1.1em;
         margin-bottom: 1.5em;
+        font-size: 1.1em;
     }
 
     h3 {
-    font-size: 0.9em;
         display: flex;
         align-items: center;
+        font-size: 0.9em;
 
-    .svg-icon, span {
+        svg {
-      margin-right: .375rem;
+            margin-inline-end: 0.2rem;
+        }
+
+        .svg-icon,
+        span {
+            margin-inline-end: .3rem;
         }
     }
 
@@ -25,59 +30,70 @@
         padding: 0;
     }
 
-  li, p {
+    li,
+    p {
         font-family: inherit;
     }
 
-  .likes {
+
+.likes {
         display: flex;
         flex-wrap: wrap;
+        margin-top: 0.5rem;
+        padding: 0;
         list-style: none;
-    padding-left: 1rem;
 
         li {
-      margin-bottom: .375rem;
-      // margin-left: -1rem;
             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 {
-        border-radius: 50%;
-        height: 3rem;
-        -o-object-fit: cover;
-        object-fit: cover;
                 display: block;
-        height: auto;
+                border: 2px solid var(--background-color, white);
-        max-width: 100%;
+                border-radius: 50%;
+                aspect-ratio: 1/1;
+                width: 2.5rem;
+                height: 2.5rem;
+                object-fit: cover;
             }
         }
     }
 
     .comment {
-    font-size: 80%;
+        margin-bottom: 1rem;
-    box-shadow: rgba(50,50,93,.25) 0px 2px 5px -1px,rgba(0,0,0,.3) 0px 1px 3px -1px;
+        border-radius: 10px;
-    border-radius: 0.5rem;
+        background: var(--bg-0);
-    padding: 0.5rem;
+        padding: 1rem;
-    padding-bottom: 0;
-    background: var(--bg-1);
-    min-height: 100px;
         overflow: hidden;
-    margin-bottom: 0.5em;
+        font-size: 80%;
-
 
         div {
             display: flex;
             flex-wrap: nowrap;
-      align-items: center;
             justify-content: space-between;
+            align-items: center;
         }
 
         p {
+            margin-bottom: 0;
             line-height: 1.5em;
         }
 
         .p-author {
-      font-size: 1.3em;
             font-style: bold;
+            font-size: 1.3em;
         }
 
         .u-url {
@@ -90,14 +106,13 @@
             align-items: center;
 
             img {
-        height: 2rem;
-        margin-right: .625rem;
-        width: 2rem;
                 display: block;
+                margin-inline-end: .625rem;
+                width: 2rem;
                 max-width: 100%;
+                height: 2rem;
             }
         }
-
     }
 
     form {
@@ -106,27 +121,29 @@
             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);
+            color: var(--text-color);
+            font-size: 1rem;
         }
+
         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;
+            color: var(--text-color);
+            font-size: 1rem;
         }
+
         button:hover {
+            cursor: pointer;
             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 -%}