feat: add clarity to monitor user-behavior

Author: iLuJack

package.json

@@ -30,6 +30,7 @@
     "@iconify-json/fa6-solid": "^1.2.2",
     "@iconify-json/material-symbols": "^1.2.8",
     "@iconify/svelte": "^4.0.2",
+    "@microsoft/clarity": "^1.0.0",
     "@swup/astro": "^1.5.0",
     "@tailwindcss/typography": "^0.5.15",
     "astro": "5.1.6",

pnpm-lock.yaml

@@ -137,6 +137,13 @@ const bannerOffset =
 			offset = offset - offset % 4;
 			document.documentElement.style.setProperty('--banner-height-extend', `${offset}px`);
 		</script>
+		<script type="text/javascript">
+			(function(c,l,a,r,i,t,y){
+				c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+				t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+				y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+			})(window, document, "clarity", "script", "r884fqcpf2");
+		</script>
 		<style define:vars={{
 			configHue,
 			'page-width': `${PAGE_WIDTH}rem`,

src/layouts/Layout.astro

@@ -6,6 +6,10 @@ import { PAGE_SIZE } from '../constants/constants'
 import MainGridLayout from '../layouts/MainGridLayout.astro'
 import { getSortedPosts } from '../utils/content-utils'
 
+// import Clarity from '@microsoft/clarity';
+// const projectId = "r884fqcpf2"
+// Clarity.init(projectId);
+
 export const getStaticPaths = (async ({ paginate }) => {
   const allBlogPosts = await getSortedPosts()
   return paginate(allBlogPosts, { pageSize: PAGE_SIZE })