基本能用

layout/comment/webmention-timeline.jsx

@@ -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>
-
-
     }
 }
 

layout/common/article.jsx

@@ -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={{
+                            {page.date && <span class="level-item">
-                                __html: _p('article.created_at', `<time class="dt-published" dateTime="${date_xml(page.date)}" title="${new Date(page.date).toLocaleString()}">${date(page.date)}</time>`)
+                                <i className="far fa-calendar-alt">&nbsp;</i>
-                            }}></span>}
+                                <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={{
+                            {shouldShowUpdated && <span class="level-item is-hidden-mobile">
-                                __html: _p('article.updated_at', `<time dateTime="${date_xml(page.updated)}" title="${new Date(page.updated).toLocaleString()}">${date(page.updated)}</time>`)
+                                <i class="far fa-calendar-check">&nbsp;</i>
-                            }}></span>}
+                                <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>&nbsp;
                                 {(() => {
                                     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>&nbsp;
                                 {(() => {
                                     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>&nbsp;<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>;
     }
 };

source/css/xry.styl

@@ -414,4 +414,37 @@ 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
 }

source/js/webmention-timeline.js

@@ -1,44 +1,42 @@
 window.addEventListener('load', function () {
     const webmentionsPromise = window.webmentionContext.webmentionsPromise;
-    const webmentionCountPromise = window.webmentionContext.webmentionCountPromise;
+    let html = '';
-    
+    html +=`<div>`
-    // console.log(JSON.stringify(webmentionsPromise, null, "\t"))
+    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>`;
+                html += `已经有 ${distinctMentions.length} 朋友喜欢、分享或讨论这篇文章:</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 += `<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-author-name"><a href=${reply.url} target="_blank">${reply.author.name}</a></p>`;
-                    html += `<p class="reply-content">${reply.content.text}</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);
         });
 });

source/js/webmention.js

@@ -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);