Add mixpanel-browser package and track article clicks

package.json

@@ -9,10 +9,12 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/he": "^1.2.3",
     "@types/jest": "^27.5.2",
+    "@types/mixpanel-browser": "^2.48.1",
     "@types/node": "^16.18.69",
     "@types/react": "^18.2.46",
     "@types/react-dom": "^18.2.18",
     "he": "^1.2.0",
+    "mixpanel-browser": "^2.48.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
@@ -48,4 +50,4 @@
   "devDependencies": {
     "cypress": "^13.6.2"
   }
-}
+}

src/components/Article.tsx

@@ -3,6 +3,7 @@ import "./Article.css";
 import { Link } from "./Link";
 import { decode } from "he";
 import React from "react";
+import mixpanel from "mixpanel-browser";
 
 export type BentoBuzzArticle = {
   title: string;
@@ -21,7 +22,13 @@ export const Article: FC<BentoBuzzArticle> = ({
   source,
 }) => {
   return (
-    <Link href={link} target="_blank">
+    <Link
+      target="_blank"
+      onClick={() => {
+        mixpanel.track("Article Clicked", { title, link });
+        window.open(link, "_blank");
+      }}
+    >
       <article>
         {source && pubDate && (
           <section className="metadata">

src/index.tsx

@@ -4,9 +4,17 @@ import "./index.css";
 import App from "./App";
 import reportWebVitals from "./reportWebVitals";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import mixpanel from "mixpanel-browser";
 
 const queryClient = new QueryClient();
 
+// TODO: Move the token to an environment variable.
+mixpanel.init("1bf77a736f8eda486012d28ecf258154", {
+  debug: true,
+  track_pageview: true,
+  persistence: "localStorage",
+});
+
 const root = ReactDOM.createRoot(
   document.getElementById("root") as HTMLElement
 );