Merge pull request #482 from translate-tools/478-prepare-landing-for-…

…public

Prepare landing for public

site/package.json

@@ -23,9 +23,12 @@
 		"@mdx-js/react": "^3.0.0",
 		"clsx": "^2.0.0",
 		"framer-motion": "^11.2.11",
+		"i18next": "^23.11.5",
+		"plausible-tracker": "^0.3.9",
 		"prism-react-renderer": "^2.3.0",
 		"react": "^18.0.0",
-		"react-dom": "^18.0.0"
+		"react-dom": "^18.0.0",
+		"react-i18next": "^14.1.2"
 	},
 	"devDependencies": {
 		"@docusaurus/module-type-aliases": "3.4.0",

site/src/components/Analytics/AnalyticsProvider.tsx

@@ -0,0 +1,57 @@
+import React, { PropsWithChildren, useCallback, useEffect, useState } from 'react';
+import Plausible from 'plausible-tracker';
+import { PlausibleInitOptions } from 'plausible-tracker/build/main/lib/tracker';
+
+import { analyticsContext, IAnalyticsContext } from './useAnalyticsContext';
+
+export const AnalyticsProvider = ({
+	options,
+	children,
+}: PropsWithChildren<{ options: PlausibleInitOptions }>) => {
+	const [plausible] = useState(() => Plausible(options));
+
+	const trackEvent: IAnalyticsContext['trackEvent'] = useCallback(
+		(eventName, props) => {
+			const timestamp = performance.now();
+			plausible.trackEvent(eventName, {
+				// Additional props for every event
+				props: {
+					// Current location
+					location: location.toString(),
+					// Time since visit page
+					timestamp: timestamp,
+					timestampSeconds: timestamp / 1000,
+					...props,
+				},
+			});
+		},
+		[plausible],
+	);
+
+	// Setup default analytic listeners
+	useEffect(() => {
+		plausible.enableAutoPageviews();
+		plausible.enableAutoOutboundTracking();
+
+		// Track clicks
+		document.body.addEventListener('click', (event: MouseEvent) => {
+			// Explore click targets to find a link element
+			const targets = event?.composedPath() || [event.target];
+			for (const target of targets) {
+				if (!(target instanceof HTMLAnchorElement)) continue;
+
+				trackEvent('Link click', {
+					url: target.href,
+					text: target.innerText,
+				});
+				break;
+			}
+		});
+	}, [plausible, trackEvent]);
+
+	return (
+		<analyticsContext.Provider value={{ trackEvent }}>
+			{children}
+		</analyticsContext.Provider>
+	);
+};

site/src/components/Analytics/useAnalyticsContext.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+export type IAnalyticsContext = {
+	trackEvent: (eventName: string, props: Record<string, string>) => void;
+};
+
+export const analyticsContext = createContext<IAnalyticsContext>(null as any);
+
+export const useAnalyticsContext = () => {
+	const context = useContext(analyticsContext);
+	if (context === null)
+		throw new Error(
+			'Analytics context is not available. Make sure component is wrapped with AnalyticsProvider',
+		);
+
+	return context;
+};