✨ add like button in blog

package.json

@@ -15,21 +15,22 @@
   },
   "dependencies": {
     "@cmfcmf/docusaurus-search-local": "^0.11.0",
-    "@docusaurus/core": "2.0.1",
-    "@docusaurus/plugin-google-gtag": "^2.0.1",
-    "@docusaurus/preset-classic": "2.0.1",
+    "@docusaurus/core": "^2.4.3",
+    "@docusaurus/plugin-google-gtag": "^2.4.3",
+    "@docusaurus/preset-classic": "^2.4.3",
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
+    "@feelback/react": "^0.3.4",
     "@mdx-js/react": "^1.6.22",
     "@mui/material": "^5.10.7",
     "clsx": "^1.2.1",
     "ethers": "^5.7.1",
     "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.0.1"
+    "@docusaurus/module-type-aliases": "^2.4.3"
   },
   "browserslist": {
     "production": [

src/css/custom.css

@@ -28,3 +28,34 @@
   --ifm-color-primary-lightest: #4fddbf;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
+
+/* this is for customization of feelback in file: `src/theme/BlogPostItem/Header/Info/index.js` */
+@import '@feelback/react/styles/feelback.css';
+.feelback-icon svg {
+  width: 16px;
+  height: 16px;
+  color: red;
+  background-color: none;
+}
+.feelback-btn.active {
+  background-color: transparent; /* 例如，将背景颜色设置为透明 */
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  33% {
+    transform: scale(1.2);
+  }
+  66% {
+    transform: scale(0.8);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.feelback-icon svg:hover {
+  animation: pulse 1.5s infinite; /* 0.5s 是动画的持续时间，infinite 表示动画将无限次重复 */
+}

src/theme/BlogPostItem/Header/Info/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Info from '@theme-original/BlogPostItem/Header/Info';
+import { FeelbackPulse, PRESET_PULSE_HEART } from '@feelback/react';
+import '@feelback/react/styles/feelback.css';
+
+export default function InfoWrapper(props) {
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Info {...props} />
+      <div style={{ marginLeft: '0.4em' }}>
+        <FeelbackPulse
+          contentSetId="f9929a3e-151a-4dba-bf29-1f606d53253f"
+          preset={PRESET_PULSE_HEART}
+          showCount
+          revokable={true}
+        />
+      </div>
+    </div>
+  );
+}