blog: add webmention counter icon

manila · Mar 18, 2024 · 8d34f2c · 8d34f2c
1 parent 74d5fe9
commit 8d34f2c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/src/theme/BlogPostItem/Footer/LikesAndComments/index.js b/src/theme/BlogPostItem/Footer/LikesAndComments/index.js
@@ -1,4 +1,5 @@
 import React, {useState, useEffect} from 'react';
+import './style.css';
 
 export default function LikesAndComments(props) {
   const [webmentionCount, setWebmentionCount] = useState(0);
@@ -10,5 +11,9 @@ export default function LikesAndComments(props) {
       .catch(error => console.log(error))
   }, [])
 
-  return (<><p>{webmentionCount} Webmentions(s)</p></>)
+  return (
+    <>
+      <p className='webmention-counter'>{webmentionCount}</p>
+    </>
+  )
 }
diff --git a/src/theme/BlogPostItem/Footer/LikesAndComments/style.css b/src/theme/BlogPostItem/Footer/LikesAndComments/style.css
@@ -0,0 +1,12 @@
+.webmention-counter::before {
+  content: '';
+  margin-right: 5px;
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+  background-color: var(--ifm-navbar-link-color);
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='m12 21.35l-1.45-1.32C5.4 15.36 2 12.27 2 8.5C2 5.41 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.08C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.41 22 8.5c0 3.77-3.4 6.86-8.55 11.53z'/%3E%3C/svg%3E");
+  transition: background-color var(--ifm-transition-fast)
+    var(--ifm-transition-timing-default);
+  vertical-align: middle;
+}