webmentions with reaction count; speech bubble css
This commit is contained in:
Palash Bauri
parent
27aa3bf6fa
commit
ec3b218f7e
|
|
@ -1229,12 +1229,17 @@ button#theme_switch{
|
|||
}
|
||||
|
||||
#webmentions .comments {
|
||||
max-height: 20em;
|
||||
max-height: 50em;
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#webmentions .rcs{
|
||||
text-align:center;
|
||||
}
|
||||
|
||||
#webmentions h2 {
|
||||
text-align:center;
|
||||
color: var(--text-color);
|
||||
border-radius: 8px;
|
||||
font-size: medium;
|
||||
|
|
@ -1285,11 +1290,52 @@ button#theme_switch{
|
|||
}
|
||||
|
||||
#webmentions .comments li .text {
|
||||
position:relative;
|
||||
max-width: 30em;
|
||||
background-color: var(--donation-bg);
|
||||
padding: 1.2em 1.5em;
|
||||
color: var(--text-color);
|
||||
font-style: italic;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* sppech bubble -> from https://stackoverflow.com/a/68735738
|
||||
*/
|
||||
|
||||
.comment_text{
|
||||
position: relative;
|
||||
padding: 20px;
|
||||
margin: 1em 20px;
|
||||
text-align: justify;
|
||||
color: var(--text-color);
|
||||
background: var(--bg-color);
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.comment_text:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
left: -22px;
|
||||
top: 0;
|
||||
width: 40px;
|
||||
border-bottom: 35px solid var(--bg-color);
|
||||
border-top-right-radius: 25px;
|
||||
}
|
||||
|
||||
.comment_text:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index:-1;
|
||||
left: -28px;
|
||||
top: -3px;
|
||||
height: 38px;
|
||||
width: 28px;
|
||||
background: var(--wm-bg);
|
||||
border-top-right-radius: 20px;
|
||||
}
|
||||
|
||||
#webmentions .comments li .name {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -291,7 +291,7 @@ A more detailed example:
|
|||
* @returns string
|
||||
*/
|
||||
function formatComments(comments) {
|
||||
const headline = `<h2>${t('Responses')}</h2>`;
|
||||
const headline = `<h2>💬 ${t('Responses')}</h2>`;
|
||||
const markup = comments
|
||||
.map((c) => {
|
||||
//const image = reactImage(c, true);
|
||||
|
|
@ -314,7 +314,7 @@ A more detailed example:
|
|||
|
||||
const type = `<span class="${linkclass}">${linktext}</span>`;
|
||||
|
||||
return `<li><span class="alink"> 🙋${link}</span> -> ${type}</li>`;
|
||||
return `<div><p class="alink"> 🙋${link}</p> <p class="comment_text">${type}</p></div>`;
|
||||
})
|
||||
.join('');
|
||||
return `
|
||||
|
|
@ -342,7 +342,7 @@ A more detailed example:
|
|||
* @param {Array<Reaction>} reacts List of reactions to format
|
||||
* @returns string
|
||||
*/
|
||||
/*
|
||||
|
||||
function formatReactions(reacts) {
|
||||
const headline = `<h2>${t('Reactions')}</h2>`;
|
||||
|
||||
|
|
@ -353,7 +353,7 @@ A more detailed example:
|
|||
<ul class="reacts">${markup}</ul>
|
||||
`;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* @typedef WebmentionResponse
|
||||
|
|
@ -417,11 +417,13 @@ A more detailed example:
|
|||
/** @type {Record<MentionType, Array<Reaction>>} */
|
||||
const mapping = {
|
||||
"in-reply-to": comments,
|
||||
"like-of": collects,
|
||||
"repost-of": collects,
|
||||
"bookmark-of": collects,
|
||||
"follow-of": collects,
|
||||
"mention-of": comments,
|
||||
"rsvp": comments
|
||||
};
|
||||
|
||||
json.children.forEach(function(child) {
|
||||
}; json.children.forEach(function(child) {
|
||||
// Map each mention into its respective container
|
||||
const store = mapping[child['wm-property']];
|
||||
if (store) {
|
||||
|
|
@ -436,13 +438,14 @@ A more detailed example:
|
|||
}
|
||||
|
||||
// format the other reactions
|
||||
/*
|
||||
|
||||
let reactions = '';
|
||||
if (collects.length > 0) {
|
||||
reactions = formatReactions(dedupe(collects));
|
||||
//reactions = formatReactions(dedupe(collects));
|
||||
reactions = `<p class="rcs"> This post has about <strong>${dedupe(collects).length}+ 💥reactions </strong> </p><hr/>`
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
container.innerHTML = `${formattedComments}`;
|
||||
container.innerHTML = `${reactions}<br>${formattedComments}`;
|
||||
}});
|
||||
}());
|
||||
|
|
|
|||
|
|
@ -16,9 +16,9 @@
|
|||
{{ $mainjs_source := resources.Get $js_path }}
|
||||
{{ $mainjs := $mainjs_source | resources.ExecuteAsTemplate $js_path . }}
|
||||
<script>{{ $mainjs.Content | safeJS }}</script>
|
||||
{{ if (and (eq .Kind `page`) (eq .Section "posts") ) }}
|
||||
{{ if (and (eq .Kind `page`) (eq .Section "posts") (ne .Page.Params.nocomment "true") ) }}
|
||||
{{ $wm_js := resources.Get "js/webmention.js" | resources.Minify }}
|
||||
<script src="{{- $wm_js.RelPermalink -}}" data-page-url="{{ .Page.Permalink }}" data-prevent-spoofing="true" async></script>
|
||||
<script src="{{- $wm_js.RelPermalink -}}" data-page-url="{{ .Page.Permalink }}" data-prevent-spoofing="true" data-wordcount=30 async></script>
|
||||
{{end}}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@
|
|||
|
||||
<p>Have any comments regarding this post 🤔? Please let me know via Email, Tweet/DM or Toot 😺!</p>
|
||||
<details id="showwm">
|
||||
<summary id="wm_button">+webmentions</summary>
|
||||
<summary id="wm_button">Responses</summary>
|
||||
<div id="webmentions">Loading...</div>
|
||||
</details>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue