astro-microsoft-clarity-integration 0.0.1

package/README.md

@@ -0,0 +1,42 @@
+# Astro Clarity
+
+Astro Clarity is a lightweight wrapper that seamlessly integrates Clarity analytics with Astro, making it effortless to track user interactions and performance metrics on your Astro-powered websites.
+
+## Installation
+
+### npm
+```bash
+npm install astro-microsoft-clarity-integration
+```
+
+### Yarn
+```bash
+yarn add astro-microsoft-clarity-integration
+```
+
+### pnpm
+```bash
+pnpm add astro-microsoft-clarity-integration
+```
+
+## Usage
+
+```js
+// astro.config.mjs (or .ts if you're using TypeScript)
+import { defineConfig } from 'astro/config';
+import clarityIntegration from 'astro-microsoft-clarity-integration'; // Imported from an npm package
+
+export default defineConfig({
+  integrations: [
+    clarityIntegration({
+      projectId: 'YOUR_TRACKING_ID',  // Required: Replace with your Clarity project ID
+      enabled: true,                  // Optional: Enable the integration (defaults to true)
+      scriptStage: 'head-inline',     // Optional: Set scriptStage to 'head-inline', 'body-inline'
+      debug: false,                   // Optional: Enable debug (set to true if you want to log script injections)
+      async: true,                    // Optional: Enable async loading
+      defer: true,                    // Optional: Enable defer for script loading
+    }),
+  ],
+});
+
+```

package/index.ts

@@ -0,0 +1,50 @@
+import type { AstroIntegration, InjectedScriptStage } from 'astro';
+
+type ClarityOptions = {
+  projectId: string;
+  enabled?: boolean;
+  scriptStage?: InjectedScriptStage;
+  debug?: boolean;
+  async?: boolean;
+  defer?: boolean;
+  customAttrs?: Record<string, string>;
+};
+
+export default function clarityIntegration({
+  projectId,
+  enabled = true,
+  scriptStage = 'head-inline',
+  debug = false,
+  async = true,
+  defer = false,
+  customAttrs = {},
+}: ClarityOptions): AstroIntegration {
+  if (!projectId) console.error('Clarity Integration requires a valid projectId');
+
+  return {
+    name: 'astro-clarity',
+    hooks: {
+      'astro:config:setup': ({ injectScript }) => {
+        if (!enabled) return;
+
+        const scriptContent = `
+          (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.src = "https://www.clarity.ms/tag/" + i;
+            t.async = ${async};
+            t.defer = ${defer};
+            ${debug ? `console.debug("Clarity script injected:", i);` : ''}
+            ${Object.entries(customAttrs)
+              .map(([key, value]) => `t.setAttribute("data-${key}", "${value}");`)
+              .join('\n')}
+            y = l.getElementsByTagName(r)[0];
+            y.parentNode.insertBefore(t, y);
+          })(window, document, "clarity", "script", "${projectId}");
+        `;
+
+        injectScript(scriptStage, scriptContent);
+      },
+    },
+  };
+}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "astro-microsoft-clarity-integration",
+  "description": "Microsoft Clarity analytics in Astro site",
+  "author": "Iurii Kalashnikov",
+  "version": "0.0.1",
+  "homepage": "https://github.com/YKalashnikov#readme",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YKalashnikov/astro-microsoft-clarity-integration"
+  },
+  "exports": {
+    ".": "./index.ts",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "index.ts"
+  ],
+  "keywords": [
+    "astro-integration",
+    "clarity",
+    "analytics",
+    "microsoft",
+    "astro",
+    "astro plugin"
+  ],
+  "scripts": {},
+  "devDependencies": {
+    "astro": "^5.5.5"
+  },
+  "peerDependencies": {
+    "astro": "^4.0.0 || ^5.0.0"
+  }
+}