引入github贡献图

package-lock.json

@@ -18,6 +18,7 @@
         "react": "^18.2.0",
         "react-apexcharts": "^1.4.1",
         "react-dom": "^18.2.0",
+        "react-github-calendar": "^4.2.2",
         "react-hot-toast": "^2.4.1",
         "react-icons": "^4.12.0",
         "react-router-dom": "^6.14.2",
@@ -2245,6 +2246,12 @@
         "node": ">=14.16"
       }
     },
+    "node_modules/@types/chroma-js": {
+      "version": "2.4.4",
+      "resolved": "https://registry.npmmirror.com/@types/chroma-js/-/chroma-js-2.4.4.tgz",
+      "integrity": "sha512-/DTccpHTaKomqussrn+ciEvfW4k6NAHzNzs/sts1TCqg333qNxOhy8TNIoQCmbGG3Tl8KdEhkGAssb1n3mTXiQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/eslint": {
       "version": "8.44.1",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-8.44.1.tgz",
@@ -3051,6 +3058,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/chroma-js": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmmirror.com/chroma-js/-/chroma-js-2.6.0.tgz",
+      "integrity": "sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==",
+      "license": "(BSD-3-Clause AND Apache-2.0)"
+    },
     "node_modules/chrome-trace-event": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz",
@@ -3376,6 +3389,16 @@
       "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/date-fns": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmmirror.com/date-fns/-/date-fns-3.6.0.tgz",
+      "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.12",
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.12.tgz",
@@ -5788,6 +5811,21 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-activity-calendar": {
+      "version": "2.3.5",
+      "resolved": "https://registry.npmmirror.com/react-activity-calendar/-/react-activity-calendar-2.3.5.tgz",
+      "integrity": "sha512-ky4L2kbfjCzbY/e2yfsX8jhCsgLKZW70OL1lYR8XsEihYGucYnYimgJUUKiwj3GBTNfgFuZYSZUBxEnc4M0brA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/chroma-js": "^2.4.3",
+        "chroma-js": "^2.4.2",
+        "date-fns": "^3.6.0"
+      },
+      "peerDependencies": {
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      }
+    },
     "node_modules/react-apexcharts": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.4.1.tgz",
@@ -5812,6 +5850,32 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-error-boundary": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmmirror.com/react-error-boundary/-/react-error-boundary-4.0.13.tgz",
+      "integrity": "sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5"
+      },
+      "peerDependencies": {
+        "react": ">=16.13.1"
+      }
+    },
+    "node_modules/react-github-calendar": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmmirror.com/react-github-calendar/-/react-github-calendar-4.2.2.tgz",
+      "integrity": "sha512-Fy8KrOq9H3CpHxWYTTDxx3GQgBLywu8t+OuBQR/X/KtyXGCxAhH+gTCtedSiZZUDXDVzncfetZCyKLxsHRWErw==",
+      "license": "MIT",
+      "dependencies": {
+        "react-activity-calendar": "^2.3.5",
+        "react-error-boundary": "^4.0.12"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-hot-toast": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/react-hot-toast/-/react-hot-toast-2.4.1.tgz",

package.json

@@ -24,6 +24,7 @@
     "react": "^18.2.0",
     "react-apexcharts": "^1.4.1",
     "react-dom": "^18.2.0",
+    "react-github-calendar": "^4.2.2",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.14.2",

src/pages/Iterative/index.tsx

@@ -1,5 +1,6 @@
 import { Card, Timeline, TimelineItemProps } from 'antd';
 import { useEffect, useState } from 'react';
+import GitHubCalendar from 'react-github-calendar';
 import Title from '@/components/Title';
 import dayjs from 'dayjs'
 
@@ -53,6 +54,10 @@ const Home = () => {
             <Title value='项目迭代记录'></Title>
 
             <Card className='mt-2'>
+                <div className='flex justify-center mt-2 mb-10'>
+                    <GitHubCalendar username="liuyuyang01"/>
+                </div>
+
                 <div className='flex justify-between'>
                     <div className='flex-1'>
                         <h3 className='text-xl text-center pb-6 font-bold'>Thrive_Blog</h3>