= ({
[directoriesByRoute, linkProps.href]
);
+ const mixpanel = useMixpanel();
+
+ const handleClick = useCallback(() => {
+ if (withScrollToTop) {
+ const scrollPositionFromBottom = document.documentElement.scrollHeight - window.scrollY;
+
+ dispatch(setScrollPositionFromBottom(scrollPositionFromBottom));
+ dispatch(setShouldScrollToPageTop(true));
+ }
+
+ mixpanel.trackLinkClick(title, typeof linkProps.href === "string" ? linkProps.href : "", "internal", {
+ link_section: topTitle || "navigation",
+ read_time: readTime,
+ read_type: readType,
+ variant,
+ is_main_page: isMainPage,
+ item_index: itemIndex,
+ with_scroll_to_top: withScrollToTop,
+ });
+ }, [
+ dispatch,
+ withScrollToTop,
+ mixpanel,
+ title,
+ topTitle,
+ readTime,
+ readType,
+ variant,
+ isMainPage,
+ itemIndex,
+ linkProps.href,
+ ]);
+
return (
= ({
},
className
)}
- onClick={() => {
- if (withScrollToTop) {
- const scrollPositionFromBottom = document.documentElement.scrollHeight - window.scrollY;
-
- dispatch(setScrollPositionFromBottom(scrollPositionFromBottom));
- dispatch(setShouldScrollToPageTop(true));
- }
- }}
+ onClick={handleClick}
>
{icon || }
diff --git a/src/components/shared/components/ThemeToggle.tsx b/src/components/shared/components/ThemeToggle.tsx
index 0b9298941..a868ec74f 100644
--- a/src/components/shared/components/ThemeToggle.tsx
+++ b/src/components/shared/components/ThemeToggle.tsx
@@ -1,11 +1,14 @@
import clsx from "clsx";
import { useTheme } from "nextra-theme-docs";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+
+import { useMixpanel } from "~/hooks/useMixpanel";
import { HeroIconMoon, HeroIconSun } from "./Icons";
export const ThemeToggle: React.FC<{ className?: string }> = ({ className }) => {
const { setTheme, resolvedTheme } = useTheme();
+ const { trackThemeToggle } = useMixpanel();
const [isLightMode, setIsLightMode] = useState(false);
@@ -19,11 +22,19 @@ export const ThemeToggle: React.FC<{ className?: string }> = ({ className }) =>
setIsLightMode(resolvedTheme === "light");
}, [resolvedTheme]);
+ const handleThemeToggle = useCallback(() => {
+ const newTheme = isLightMode ? "dark" : "light";
+ setTheme(newTheme);
+ trackThemeToggle(newTheme, {
+ previous_theme: isLightMode ? "light" : "dark",
+ });
+ }, [isLightMode, setTheme, trackThemeToggle]);
+
return (