deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-10-10 23:38:53 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Update webmentions styling

Browse source 
+ add EOL newline
+ restore some changes
This commit is contained in:
welpo 2025-05-18 23:37:21 +02:00
parent c190f4001d
commit 86f1ba0aaa
No known key found for this signature in database
GPG key ID: A2F978CF4EC1F5A6
6 changed files with 160 additions and 145 deletions
Download patch file Download diff file Expand all files Collapse all files

2
content/blog/shortcodes/index.es.md
View file

@ -1,7 +1,7 @@
+++ +++
title = "Shortcodes personalizados" title = "Shortcodes personalizados"
date = 2023-02-19 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." 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] [taxonomies]

47
content/blog/shortcodes/index.md
View file

@ -1,7 +1,7 @@
+++ +++
title = "Custom shortcodes" title = "Custom shortcodes"
date = 2023-02-19 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." 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] [taxonomies]
@ -60,28 +60,28 @@ The diagram will be rendered as follows:
{% mermaid() %} {% mermaid() %}
classDiagram 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 %} {% end %}
The Mermaid shortcode supports two parameters: The Mermaid shortcode supports two parameters:
@ -462,4 +462,3 @@ def مرحبا_بالعالم():
{%/* end */%} {%/* end */%}
```` ````

251
sass/parts/_webmention.scss
View file

@ -1,132 +1,149 @@
#webmentions { #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 { 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;
}
}
} }

2
static/js/webmention.min.js vendored
View file

@ -63,4 +63,4 @@
`}),html+=` `}),html+=`
</ol > </ol >
</div > </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>`}})})();

1
templates/partials/header.html
View file

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

2
templates/partials/webmentions.html
View file

@ -55,4 +55,4 @@
{%- set dash = "-" -%} {%- set dash = "-" -%}
{% endif %} {% endif %}
<div class="webmentions-container" id="webmentions{{ dash}}{{ format }}">hello</div> <div class="webmentions-container" id="webmentions{{ dash}}{{ format }}">hello</div>