fix
xiang578
parent
d0bb15e03d
commit
e0295d972d
|
|
@ -15,9 +15,9 @@ class WebmentionTimeline extends Component {
|
|||
<div class="card">
|
||||
<div class="card-content">
|
||||
<h2 class="title is-5">长短波</h2>
|
||||
<div class="timeline webmention-timeline">
|
||||
<script src={helper.url_for('/js/webmention-timeline.js')}></script>
|
||||
<div class="webmention-timeline">
|
||||
</div>
|
||||
<script src={helper.url_for('/js/webmention-timeline.js')}></script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@ module.exports = class extends Component {
|
|||
<img class="fill" src={cover} alt={page.title || cover} />
|
||||
</span>}
|
||||
</div> : null}
|
||||
<article class={`card-content h-entry article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
|
||||
<article class={`card-content article${'direction' in page ? ' ' + page.direction : ''}`} role="article">
|
||||
{/* Metadata */}
|
||||
{page.layout !== 'page' ? <div class="article-meta is-size-7 is-uppercase level is-mobile">
|
||||
<div class="level-left">
|
||||
|
|
|
|||
|
|
@ -35,9 +35,11 @@ class Footer extends Component {
|
|||
{footerLogo}
|
||||
</a>
|
||||
<p class="is-size-7">
|
||||
<span dangerouslySetInnerHTML={{ __html: `© ${siteYear} ${author || siteTitle}` }}></span>
|
||||
<span dangerouslySetInnerHTML={{ __html: `© 2015-${siteYear} ${author || siteTitle}` }}></span>
|
||||
Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> &
|
||||
<a href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
|
||||
<br/>
|
||||
<a href="https://xn--sr8hvo.ws/%F0%9F%9B%90%E2%9A%A1%EF%B8%8F%E2%80%BC%EF%B8%8F/previous">←</a> <a href="https://xn--sr8hvo.ws">IndieWeb Webring</a> 🕸💍<a href="https://xn--sr8hvo.ws/%F0%9F%9B%90%E2%9A%A1%EF%B8%8F%E2%80%BC%EF%B8%8F/next">→</a>
|
||||
{showVisitorCounter ? <br /> : null}
|
||||
{showVisitorCounter ? <span id="busuanzi_container_site_uv"
|
||||
dangerouslySetInnerHTML={{ __html: visitorCounterTitle }}></span> : null}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ module.exports = class extends Component {
|
|||
<body class={`is-${columnCount}-column`}>
|
||||
<Navbar config={config} helper={helper} page={page} />
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="container h-entry">
|
||||
<div class="columns">
|
||||
<div class={classname({
|
||||
column: true,
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@ class Profile extends Component {
|
|||
followTitle,
|
||||
socialLinks
|
||||
} = this.props;
|
||||
return <div class="card widget h-card h-entry" data-type="profile">
|
||||
return <div class="card widget h-card" data-type="profile">
|
||||
<div class="card-content">
|
||||
<nav class="level">
|
||||
<div class="level-item has-text-centered flex-shrink-1">
|
||||
|
|
|
|||
|
|
@ -371,3 +371,47 @@ span#inline-toc {
|
|||
border-bottom: none;
|
||||
font-size: 1.375em;
|
||||
}
|
||||
|
||||
.wm-avatar {
|
||||
border-radius: 50%;
|
||||
margin: 0;
|
||||
border: 3px solid rgba(0,116,222,.5);
|
||||
}
|
||||
|
||||
.webmention-avatars .avatar-wrapper {
|
||||
margin-right: -8px;
|
||||
}
|
||||
|
||||
a.avatar-wrapper {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.replies {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.reply {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
position: relative;
|
||||
padding: 0;
|
||||
align-items: flex-start;
|
||||
margin-top: .6rem;
|
||||
}
|
||||
|
||||
.reply p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.reply .text {
|
||||
margin-left: 1rem;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.reply-author-name {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
|
@ -1,34 +1,51 @@
|
|||
window.addEventListener('load', function () {
|
||||
const webmentionsPromise = window.webmentionContext.webmentionsPromise;
|
||||
const mastodonContext = window.mastodonContext;
|
||||
const webmentionTimelineMessages = window.webmentionTimelineMessages;
|
||||
const webmentionCountPromise = window.webmentionContext.webmentionCountPromise;
|
||||
|
||||
// console.log(JSON.stringify(webmentionsPromise, null, "\t"))
|
||||
webmentionsPromise && webmentionsPromise
|
||||
.then(function (data) {
|
||||
let html = '';
|
||||
data.children.forEach(function (item) {
|
||||
if (!(mastodonContext && item.url.startsWith(mastodonContext.mastodonBaseUrl))) {
|
||||
html += `<article class="media"><div class="media-content"><p class="article-meta level-left">`;
|
||||
|
||||
if (item.author && item.author.name) {
|
||||
html += `<i class="level-item author" >`;
|
||||
if (item.author.url) {
|
||||
html += `<a target="_blank" href="${item.author.url}" rel="noopener">${item.author.name}</a>`;
|
||||
}
|
||||
else {
|
||||
html += item.author.name;
|
||||
}
|
||||
html += `</i>`;
|
||||
}
|
||||
let publishTime = (item.published && item.published.indexOf('T') > 0) ? item.published : item['wm-received'];
|
||||
|
||||
html += `<time class="level-item" datetime="${publishTime}">${publishTime.split('T')[0]}</time></p><p class="title level-left"><i class="level-item">🔗</i><a target="_blank" href="${item.url}" rel="noopener" class="level-item">${item.url}</a></p></div></article>`;
|
||||
}
|
||||
else {
|
||||
html += `<article class="media"><div class="media-content"><p class="title level-right"><span class="level-item">🐘</span><span class="level-item"><a target="_blank" href="${item.url}" rel="noopener">${webmentionTimelineMessages['into_the_fediverse']}</a></span></p></article></div>`;
|
||||
}
|
||||
// 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 += `<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 += `</div>`;
|
||||
if (replies && replies.length) {
|
||||
html += `<div class="webmention-replies">`;
|
||||
html += `<h4>Replies</h4>`;
|
||||
html += `<ul class="replies">`;
|
||||
replies.forEach(function (reply){
|
||||
html += `<li class="reply" key=${reply.content.text}>`;
|
||||
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 += `</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 += `</div>`;
|
||||
html += `</li>`;
|
||||
|
||||
});
|
||||
html += `</ul>`;
|
||||
html += `</div>`;
|
||||
}
|
||||
document.querySelector('div.webmention-timeline').innerHTML = html;
|
||||
|
||||
})
|
||||
|
|
|
|||
|
|
@ -2,13 +2,24 @@
|
|||
|
||||
const url = window.location.href;
|
||||
const webmentionBaseUrl = "https://webmention.io"
|
||||
// const url = "https://www.owenyoung.com/en/blog/indieweb/"
|
||||
|
||||
webmentionContext.webmentionsPromise = fetch(webmentionBaseUrl + "/api/mentions.jf2?target=" + encodeURIComponent(url))
|
||||
.then(function (response) {
|
||||
console.error('sucess ' + url);
|
||||
console.log('sucess ' + webmentionBaseUrl + "/api/mentions.jf2?target=" + url);
|
||||
return response.json();
|
||||
})
|
||||
.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