基本能用
xiang578
parent
1c75e1f80d
commit
662245b27c
|
|
@ -14,17 +14,13 @@ class WebmentionTimeline extends Component {
|
|||
return <Fragment>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
<h2 class="title is-5">长短波</h2>
|
||||
<h2 class="title is-5">网络回响</h2>
|
||||
<div class="webmention-timeline">
|
||||
</div>
|
||||
<script src={helper.url_for('/js/webmention-timeline.js')}></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</Fragment>
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -50,17 +50,20 @@ module.exports = class extends Component {
|
|||
{page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
|
||||
<div class="level-left">
|
||||
{/* Creation Date */}
|
||||
{page.date && <span class="level-item" dangerouslySetInnerHTML={{
|
||||
__html: _p('article.created_at', `<time class="dt-published" dateTime="${date_xml(page.date)}" title="${new Date(page.date).toLocaleString()}">${date(page.date)}</time>`)
|
||||
}}></span>}
|
||||
{page.date && <span class="level-item">
|
||||
<i className="far fa-calendar-alt"> </i>
|
||||
<time dateTime={date_xml(page.date)} title={date_xml(page.date)}>{date(page.date)}</time>
|
||||
</span>}
|
||||
{/* Last Update Date */}
|
||||
{shouldShowUpdated && <span class="level-item" dangerouslySetInnerHTML={{
|
||||
__html: _p('article.updated_at', `<time dateTime="${date_xml(page.updated)}" title="${new Date(page.updated).toLocaleString()}">${date(page.updated)}</time>`)
|
||||
}}></span>}
|
||||
{shouldShowUpdated && <span class="level-item is-hidden-mobile">
|
||||
<i class="far fa-calendar-check"> </i>
|
||||
<time dateTime={date_xml(page.updated)} title={date_xml(page.updated)}>{date(page.updated)}</time>
|
||||
</span>}
|
||||
{/* author */}
|
||||
{config.author ? <a class="level-item" href="/about"> {config.author} </a> : null}
|
||||
{page.author ? <span class="level-item"> {page.author} </span> : null}
|
||||
{/* Categories */}
|
||||
{page.categories && page.categories.length ? <span class="level-item">
|
||||
<i class="far fa-folder-open has-text-grey"></i>
|
||||
{(() => {
|
||||
const categories = [];
|
||||
page.categories.forEach((category, i) => {
|
||||
|
|
@ -74,6 +77,7 @@ module.exports = class extends Component {
|
|||
</span> : null}
|
||||
{/* Read time */}
|
||||
{article && article.readtime && article.readtime === true ? <span class="level-item">
|
||||
<i class="far fa-clock"></i>
|
||||
{(() => {
|
||||
const words = getWordCount(page._content);
|
||||
const time = moment.duration((words / 150.0) * 60, 'seconds');
|
||||
|
|
@ -82,7 +86,7 @@ module.exports = class extends Component {
|
|||
</span> : null}
|
||||
{/* Visitor counter */}
|
||||
{!index && plugins && plugins.busuanzi === true ? <span class="level-item" id="busuanzi_container_page_pv" dangerouslySetInnerHTML={{
|
||||
__html: _p('plugin.visit_count', '<span id="busuanzi_value_page_pv">0</span>')
|
||||
__html: _p('plugin.visit_count', '<i class="far fa-eye"></i> <span id="busuanzi_value_page_pv">0</span>')
|
||||
}}></span> : null}
|
||||
</div>
|
||||
</div> : null}
|
||||
|
|
@ -129,11 +133,11 @@ module.exports = class extends Component {
|
|||
</a>
|
||||
</div> : null}
|
||||
</nav> : null}
|
||||
{/* Comment */}
|
||||
{!index ? <Comment config={config} page={page} helper={helper} /> : null}
|
||||
{/* Webmention */}
|
||||
{!index ? <Webmention config={config} page={page} helper={helper}/> :null}
|
||||
{!index ? <WebmentionTimeline config={config} page={page} helper={helper}/> :null}
|
||||
{!index ? <WebmentionTimeline config={config} page={page} helper={helper}/>:null}
|
||||
{/* Comment */}
|
||||
{!index ? <Comment config={config} page={page} helper={helper} /> : null}
|
||||
</Fragment>;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -415,3 +415,36 @@ a.avatar-wrapper {
|
|||
.reply-author-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
.form-webmention {
|
||||
display: flex
|
||||
}
|
||||
|
||||
.form-webmention-btn {
|
||||
flex: 0 0 auto;
|
||||
margin-left: 12px;
|
||||
align-items: baseline;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-webmention-btn, a.retweetBtn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 12px;
|
||||
background: #2196f3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
#form-webmention-source {
|
||||
flex: 1 0 auto;
|
||||
border: 1px solid;
|
||||
padding: 0 8px;
|
||||
background: var(--quoteColor);
|
||||
}
|
||||
|
||||
#form-webmention-source,.form-webmention-btn,a.retweetBtn {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px
|
||||
}
|
||||
|
|
@ -1,44 +1,42 @@
|
|||
window.addEventListener('load', function () {
|
||||
const webmentionsPromise = window.webmentionContext.webmentionsPromise;
|
||||
const webmentionCountPromise = window.webmentionContext.webmentionCountPromise;
|
||||
|
||||
// console.log(JSON.stringify(webmentionsPromise, null, "\t"))
|
||||
let html = '';
|
||||
html +=`<div>`
|
||||
html +=`<p>你有对这篇文章写<a href="https://indieweb.org/responses">回应</a>吗? 你可以在这里提交你的文章网址或推特链接（文章或推特内容需要包含这篇文章的地址，点击这里了解 <a href="https://indieweb.org/Webmention">Webmention</a>）：</p></br>`
|
||||
html +=`<form action="https://webmention.io/blog.xiang578.com/webmention" class="form-webmention" method="post" target="_blank"><input type="url" name="source" id="form-webmention-source" placeholder="你的文章网址或推特链接" required=""> <input type="hidden" name="target" value="${window.location.href}"> <input type="submit" value="Send Webmention" class="form-webmention-btn"></form></br>`
|
||||
html +=`</div>`
|
||||
webmentionsPromise && webmentionsPromise
|
||||
.then(function (data) {
|
||||
let html = '';
|
||||
// if(webmentionCountPromise && webmentionCountPromise.hasOwnProperty("count")) {
|
||||
// html += `<p>${webmentionCountPromise.count}</p>`
|
||||
// }
|
||||
// html += `<p>${webmentionCountPromise.type}</p>`
|
||||
|
||||
const distinctMentions = [
|
||||
...new Map(data.children.map((item) => [item.author.url, item])).values()].sort((a, b) => new Date(a['wm-received']) - new Date(b['wm-received']));
|
||||
const replies = distinctMentions.filter(
|
||||
(mention) => 'in-reply-to' in mention && 'content' in mention
|
||||
);
|
||||
|
||||
html += `<div><p>`;
|
||||
|
||||
if (distinctMentions.length > 0) {
|
||||
html += `Already ${distinctMentions.length} awesome people liked, shared or talked about this article:</p>`;
|
||||
} else {
|
||||
html += `Be the first one to share this article!`;
|
||||
html += `已经有 ${distinctMentions.length} 朋友喜欢、分享或讨论这篇文章:</p>`;
|
||||
}
|
||||
html += `<div className="webmention-avatars">`;
|
||||
distinctMentions.forEach(function (reply) {
|
||||
html += `<a class="avatar-wrapper" href=${reply.author.url} key=${reply.author.name}><image class="wm-avatar" loading="lazy" src=${reply.author.photo} alt=${reply.author.name} data-nimg="fill" sizes="(max-width: 768px) 100vw,(max-width: 1200px) 50vw, 33vw"/></a>`;
|
||||
html += `<a class="avatar-wrapper" href=${reply.author.url} key=${reply.author.name}><image class="wm-avatar" loading="lazy" src=${reply.author.photo != "" ? reply.author.photo: "/img/avatar.png"} data-nimg="fill" sizes="(max-width: 768px) 100vw,(max-width: 1200px) 50vw, 33vw"/></a>`;
|
||||
});
|
||||
html += `</div>`;
|
||||
|
||||
const replies = distinctMentions.filter(
|
||||
(mention) => ('in-reply-to' in mention || 'mention-of' in mention)&& 'content' in mention
|
||||
);
|
||||
if (replies && replies.length) {
|
||||
html += `<div class="webmention-replies">`;
|
||||
html += `<h4>Replies</h4>`;
|
||||
html += `</br><h3>引用或评论（${replies.length}）</h3>`;
|
||||
html += `<ul class="replies">`;
|
||||
replies.forEach(function (reply){
|
||||
html += `<li class="reply" key=${reply.content.text}>`;
|
||||
html += `<li class="reply" key=${reply["wm-id"]}>`;
|
||||
html += `<div>`;
|
||||
html += `<a class="avatar-wrapper" href=${reply.author.url} key=${reply.author.name}><image class="wm-avatar" loading="lazy" src=${reply.author.photo} alt=${reply.author.name} data-nimg="fill" sizes="(max-width: 768px) 100vw,(max-width: 1200px) 50vw, 33vw"/></a>`;
|
||||
html += `<a class="avatar-wrapper" href=${reply.author.url} key=${reply.author.name}><image class="wm-avatar" loading="lazy" src=${reply.author.photo != "" ? reply.author.photo: "/img/avatar.png"} alt=${reply.author.name} data-nimg="fill" sizes="(max-width: 768px) 100vw,(max-width: 1200px) 50vw, 33vw"/></a>`;
|
||||
html += `</div>`;
|
||||
html += `<div class="text">`;
|
||||
html += `<p class="reply-author-name">${reply.author.name}</p>`;
|
||||
html += `<p class="reply-content">${reply.content.text}</p>`;
|
||||
html += `<p class="reply-author-name"><a href=${reply.url} target="_blank">${reply.author.name}</a></p>`;
|
||||
html += `<p class="reply-content">${reply.content.text.slice(0, 200)}</p>`;
|
||||
html += `</div>`;
|
||||
html += `</li>`;
|
||||
|
||||
|
|
@ -47,9 +45,8 @@ window.addEventListener('load', function () {
|
|||
html += `</div>`;
|
||||
}
|
||||
document.querySelector('div.webmention-timeline').innerHTML = html;
|
||||
|
||||
})
|
||||
.catch(function (ex) {
|
||||
console.error('fetch mastodon webmention error' + ex);
|
||||
console.error('fetch webmention error' + ex);
|
||||
});
|
||||
});
|
||||
|
|
@ -12,14 +12,4 @@
|
|||
.catch(function (ex) {
|
||||
console.error('fetch webmention error' + ex);
|
||||
});
|
||||
|
||||
webmentionContext.webmentionCountPromise = fetch(webmentionBaseUrl + "/api/count.json?target=" + encodeURIComponent(url))
|
||||
.then(function (response) {
|
||||
console.log('sucess ' + webmentionBaseUrl + "/api/count.json?target=" + url);
|
||||
return response.json();
|
||||
})
|
||||
.catch(function (ex) {
|
||||
console.error('fetch webmention count error' + ex);
|
||||
});
|
||||
|
||||
})(window.webmentionContext);
|
||||
Loading…
Reference in New Issue