feat: add wakatime badge

package.json

@@ -36,6 +36,7 @@
 		"mdast-util-to-string": "^4.0.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
+		"react-github-calendar": "^4.4.1",
 		"reading-time": "^1.5.0",
 		"rehype-external-links": "^3.0.0",
 		"remark-unwrap-images": "^4.0.0",

pnpm-lock.yaml

@@ -65,6 +65,9 @@ importers:
       react-dom:
         specifier: ^18.3.1
         version: 18.3.1(react@18.3.1)
+      react-github-calendar:
+        specifier: ^4.4.1
+        version: 4.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       reading-time:
         specifier: ^1.5.0
         version: 1.5.0
@@ -1491,6 +1494,9 @@ packages:
   damerau-levenshtein@1.0.8:
     resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   debug@4.3.4:
     resolution: {integrity: sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==}
     engines: {node: '>=6.0'}
@@ -3091,11 +3097,28 @@ packages:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
 
+  react-activity-calendar@2.6.2:
+    resolution: {integrity: sha512-SEPJbuDnB9618lbS5Mcy3AhxZK9ICVbJtgjfAG2zm1mdt3DY+r/V+nQpN5+ruf2sWMfQYPEeAWL10TwF6Bmk/A==}
+    peerDependencies:
+      react: ^18.0.0
+      react-dom: ^18.0.0
+
   react-dom@18.3.1:
     resolution: {integrity: sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==}
     peerDependencies:
       react: ^18.3.1
 
+  react-error-boundary@4.0.13:
+    resolution: {integrity: sha512-b6PwbdSv8XeOSYvjt8LpgpKrZ0yGdtZokYwkwV2wlcZbxgopHX/hgPl5VgpnoVOWd868n1hktM8Qm4b+02MiLQ==}
+    peerDependencies:
+      react: '>=16.13.1'
+
+  react-github-calendar@4.4.1:
+    resolution: {integrity: sha512-aWriJEAYT5qdRzQbNeXOvEtxKPb1Es802go83ex2KTTlrgytNTeNSQPtLGLbVSYaFiNdMyNGV5wUd8yTKkGrOQ==}
+    peerDependencies:
+      react: ^17.0.0 || ^18.0.0
+      react-dom: ^17.0.0 || ^18.0.0
+
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
@@ -5512,6 +5535,8 @@ snapshots:
 
   damerau-levenshtein@1.0.8: {}
 
+  date-fns@4.1.0: {}
+
   debug@4.3.4:
     dependencies:
       ms: 2.1.2
@@ -7564,12 +7589,30 @@ snapshots:
       strip-json-comments: 2.0.1
     optional: true
 
+  react-activity-calendar@2.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      date-fns: 4.1.0
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+
   react-dom@18.3.1(react@18.3.1):
     dependencies:
       loose-envify: 1.4.0
       react: 18.3.1
       scheduler: 0.23.2
 
+  react-error-boundary@4.0.13(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.24.0
+      react: 18.3.1
+
+  react-github-calendar@4.4.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-activity-calendar: 2.6.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      react-dom: 18.3.1(react@18.3.1)
+      react-error-boundary: 4.0.13(react@18.3.1)
+
   react-refresh@0.14.2: {}
 
   react@18.3.1:

src/components/GithubHotLine.tsx

@@ -0,0 +1,10 @@
+import GitHubCalendar from "react-github-calendar";
+import React from "react";
+const GithubHotLine = () => {
+  return (
+    <GitHubCalendar  username='kazoottt' />
+  );
+};
+
+
+export default GithubHotLine

src/pages/index.astro

@@ -6,7 +6,6 @@ import ProjectCard from '../components/ProjectCard.astro'
 import Label from '../components/Label.astro'
 import SkillLayout from '../components/SkillLayout.astro'
 import PostPreview from '@/components/blog/PostPreview.astro'
-
 import { Image } from 'astro:assets'
 import kazootttAvatar from '../assets/kazoottt-avatar.jpeg'
 
@@ -36,6 +35,12 @@ const allPostsByDate = sortMDByDate(allPosts).slice(0, MAX_POSTS)
 
 			<div class='flex flex-col items-center gap-y-4'>
 				<h1 class='text-3xl font-bold'>KazooTTT</h1>
+				<a href='https://wakatime.com/@d3dc2570-e4bf-4469-b0c2-127b495e8b91'
+					><img
+						src='https://wakatime.com/badge/user/d3dc2570-e4bf-4469-b0c2-127b495e8b91.svg'
+						alt='Total time coded since Nov 4 2017'
+					/></a
+				>
 				<div class='flex flex-wrap justify-center gap-x-4 gap-y-3'>
 					<Label title='github' as='a' href='https://github.com/KazooTTT' target='_blank'>
 						<Icon name='github' slot='icon' />