track framework usage

frontend/src/components/OutputSettingsSection.tsx

@@ -44,6 +44,9 @@ interface Props {
 
 function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
   const onCSSValueChange = (value: string) => {
+    window.plausible("OutputSettings", {
+      props: { framework: "CSS", value: value },
+    });
     setOutputSettings((prev) => {
       if (prev.js === JSFrameworkOption.REACT) {
         if (value !== CSSOption.TAILWIND) {
@@ -65,6 +68,9 @@ function OutputSettingsSection({ outputSettings, setOutputSettings }: Props) {
   };
 
   const onJsFrameworkChange = (value: string) => {
+    window.plausible("OutputSettings", {
+      props: { framework: "JS", value: value },
+    });
     if (value === JSFrameworkOption.REACT) {
       setOutputSettings(() => ({
         css: CSSOption.TAILWIND,

frontend/src/plausible.d.ts

@@ -0,0 +1,19 @@
+// plausible.d.ts
+
+// Define the Plausible function type
+type Plausible = (eventName: string, options?: PlausibleOptions) => void;
+
+// Define the Plausible options type
+interface PlausibleOptions {
+  callback?: () => void;
+  props?: Record<string, any>;
+}
+
+// Extend the Window interface to include the `plausible` function
+declare global {
+  interface Window {
+    plausible: Plausible;
+  }
+}
+
+export {};

frontend/vite.config.ts

@@ -16,7 +16,7 @@ export default ({ mode }) => {
         inject: {
           data: {
             injectHead: process.env.VITE_IS_DEPLOYED
-              ? '<script defer="" data-domain="screenshottocode.com" src="https://plausible.io/js/script.tagged-events.outbound-links.js"></script>'
+              ? '<script defer="" data-domain="screenshottocode.com" src="https://plausible.io/js/script.js"></script><script>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>'
               : "",
           },
         },