blog: add webmention text, remove webmentions from bloglist

src/theme/BlogPostItem/Footer/Webmentions/index.js

@@ -0,0 +1,44 @@
+import React, {useState, useEffect} from 'react';
+import './style.css';
+
+function Spacer() {
+  return <p></p>;  
+}
+export default function Webmentions(props) {
+  const [webmentions, setWebmentions] = useState({});
+  const baseUrl = 'https://webmention.io/api';
+  const countEndpoint = (target) => `${baseUrl}/count?target=${target}`;
+  const mentionEndpoint = (target) => `${baseUrl}/mentions.jf2?target=${target}`;
+  const postUrl = window.location.href;
+
+  useEffect(() => {
+    const webmentionCount = fetch(countEndpoint(postUrl))
+      .then(response => response.json())
+      .then(data => data.count)
+      .catch(error => console.log(error))
+
+    const webmentionAuthors = fetch(mentionEndpoint(postUrl))
+      .then(response => response.json())
+      .then(data => data.children)
+      .then(mentions => mentions.map(mention => mention.author))
+      .catch(error => console.log(error))
+
+    Promise.all([webmentionCount, webmentionAuthors])
+      .then(([count, authors]) => setWebmentions({
+        'count': count, 
+        'authors': authors
+      }))
+      .catch(error => console.log(error))
+  }, [])
+
+  return (
+    <>
+      <Spacer />
+      {webmentions.count > 0 && (
+        <div className='webmentions'>
+          <p className='webmention-counter'>Mentioned by <b>{webmentions.authors[0].name}</b></p>
+        </div>
+      )}
+    </>
+  )
+}

src/theme/BlogPostItem/Footer/index.js

@@ -1,12 +1,14 @@
 import React from 'react';
 import Footer from '@theme-original/BlogPostItem/Footer';
-import LikesAndComments from '@site/src/theme/BlogPostItem/Footer/LikesAndComments';
+import Webmentions from '@site/src/theme/BlogPostItem/Footer/Webmentions';
+import {useBlogPost} from '@docusaurus/theme-common/internal';
 
 export default function FooterWrapper(props) {
+  const {metadata, isBlogPostPage} = useBlogPost();
   return (
     <>
       <Footer {...props} />
-      <LikesAndComments {...props} />
+      {isBlogPostPage && (<Webmentions />)}
     </>
   );
 }