move to plausible

dickeyy · Jul 3, 2024 · 9684521 · 9684521
1 parent 307ca3b
commit 9684521
Show file tree

Hide file tree

Showing 16 changed files with 123 additions and 139 deletions.
diff --git a/apps/web/app/home/page.tsx b/apps/web/app/home/page.tsx
@@ -3,11 +3,13 @@
 import Footer from "@/components/footer";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import posthog from "posthog-js";
 import Navbar from "@/components/navbar";
 import { Badge } from "@/components/ui/badge";
+import { usePlausible } from "next-plausible";
 
 export default function Page() {
+    const plausible = usePlausible();
+
     return (
         <div className="flex min-h-screen flex-col items-center justify-center overflow-y-hidden ">
             <Navbar active="home" />
@@ -24,7 +26,7 @@ export default function Page() {
                         href="https://kyle.so"
                         target="_blank"
                         className="text-foreground/20 hover:text-foreground text-[18px] italic transition-all duration-150 hover:underline"
-                        onClick={() => posthog.capture("home_page_portfolio_link_click")}
+                        onClick={() => plausible("home_page_portfolio_link_click")}
                     >
                         kyle.so
                     </Link>

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -7,7 +7,7 @@ import { ThemeProvider } from "@/components/theme-provider";
 import { ClerkProvider } from "@clerk/nextjs";
 import { Toaster } from "@/components/ui/sonner";
 import { Metadata } from "next";
-import PHProvider from "@/components/posthog-provider";
+import PlausibleProvider from "next-plausible";
 import Providers from "@/components/providers";
 
 const fontSans = FontSans({
@@ -95,7 +95,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
     return (
         <Providers>
             <html lang="en" suppressHydrationWarning>
-                <head />
+                <head>
+                    {/* it has to be in the head idk */}
+                    <PlausibleProvider
+                        domain="diary.kyle.so"
+                        customDomain="https://analytics.kyle.so"
+                        selfHosted
+                    />
+                </head>
 
                 <body
                     className={cn(

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -5,19 +5,19 @@ import { Button } from "@/components/ui/button";
 import { useAuth } from "@clerk/nextjs";
 import Link from "next/link";
 import { redirect } from "next/navigation";
-import posthog from "posthog-js";
 import { useEffect } from "react";
 import Navbar from "../components/navbar";
 import { Badge } from "@/components/ui/badge";
 import { motion } from "framer-motion";
-import TypingText from "@/components/typing-text";
+import { usePlausible } from "next-plausible";
 
 export default function HomePage() {
     const { isLoaded, isSignedIn } = useAuth();
+    const plausible = usePlausible();
 
     useEffect(() => {
         if (isSignedIn && isLoaded) {
-            posthog.capture("home_page_authed_redirect");
+            plausible("home_page_authed_redirect");
             redirect("/entry");
         }
     }, [isSignedIn, isLoaded]);
@@ -79,6 +79,8 @@ export default function HomePage() {
 }
 
 const ExpandingTitle = () => {
+    const plausible = usePlausible();
+
     const expandVariants = {
         hidden: { width: 0, opacity: 0 },
         visible: {
@@ -105,7 +107,7 @@ const ExpandingTitle = () => {
                     href="https://kyle.so"
                     target="_blank"
                     className="hover:text-foreground transition-all duration-150 hover:underline"
-                    onClick={() => posthog.capture("home_page_portfolio_link_click")}
+                    onClick={() => plausible("home_page_portfolio_link_click")}
                 >
                     kyle.so
                 </Link>

diff --git a/apps/web/app/sign-in/[[...sign-in]]/page.tsx b/apps/web/app/sign-in/[[...sign-in]]/page.tsx
@@ -1,14 +1,8 @@
 "use client";
 
 import { SignIn } from "@clerk/nextjs";
-import posthog from "posthog-js";
-import { useEffect } from "react";
 
 export default function Page() {
-    useEffect(() => {
-        posthog.capture("sign_in");
-    }, []);
-
     return (
         <div className="flex min-h-screen flex-col items-center justify-center">
             <SignIn />

diff --git a/apps/web/app/sign-up/[[...sign-up]]/page.tsx b/apps/web/app/sign-up/[[...sign-up]]/page.tsx
@@ -1,14 +1,8 @@
 "use client";
 
 import { SignUp } from "@clerk/nextjs";
-import posthog from "posthog-js";
-import { useEffect } from "react";
 
 export default function Page() {
-    useEffect(() => {
-        posthog.capture("sign_up");
-    }, []);
-
     return (
         <div className="flex min-h-screen flex-col items-center justify-center">
             <SignUp />

diff --git a/apps/web/bun.lockb b/apps/web/bun.lockb
diff --git a/apps/web/components/account-dropdown.tsx b/apps/web/components/account-dropdown.tsx
@@ -31,16 +31,17 @@ import {
 } from "lucide-react";
 import { useTheme } from "next-themes";
 import Link from "next/link";
-import posthog from "posthog-js";
 import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
 import { useLogSnag } from "@logsnag/next";
 import FeedbackDialog from "./feedback-dialog";
+import { usePlausible } from "next-plausible";
 
 export default function AccountDropdown() {
     const { user } = useUser();
     const { signOut } = useAuth();
     const { setTheme, theme } = useTheme();
     const { clearUserId } = useLogSnag();
+    const plausible = usePlausible();
 
     const [acctSettingsDialogOpen, setAcctSettingsDialogOpen] = useState(false);
     const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
@@ -141,7 +142,7 @@ export default function AccountDropdown() {
                     <DropdownMenuItem
                         className="focus:bg-red-500/20"
                         onSelect={() => {
-                            posthog.capture("sign_out");
+                            plausible("sign_out");
                             clearUserId();
                             signOut();
                         }}

diff --git a/apps/web/components/document.tsx b/apps/web/components/document.tsx
@@ -22,11 +22,12 @@ import { useRouter } from "next/navigation";
 import { toast } from "sonner";
 import { Dialog, DialogContent, DialogFooter, DialogHeader } from "@/components/ui/dialog";
 import { DialogDescription, DialogTitle } from "@radix-ui/react-dialog";
-import posthog from "posthog-js";
 import useWebSocket from "react-use-websocket";
+import { usePlausible } from "next-plausible";
 
 export default function Document({ document }: { document?: DocumentType }) {
     const { getToken } = useAuth();
+    const plausible = usePlausible();
 
     // ws stuff
     const [socketUrl, setSocketUrl] = useState(
@@ -207,13 +208,13 @@ export default function Document({ document }: { document?: DocumentType }) {
             saveMetadata();
 
             if (metadata?.font_size !== doc?.metadata?.font_size) {
-                posthog.capture("document_font_size_change");
+                plausible("document_font_size_change");
             }
         }
 
         // Cancel the debounce on component unmount
         return () => saveMetadata.cancel();
-    }, [metadata, doc?.metadata, saveMetadata]);
+    }, [metadata, doc?.metadata, saveMetadata, plausible]);
 
     return (
         <div className="col-span-1 flex min-h-screen w-full flex-col items-start justify-start pt-4">
@@ -243,7 +244,7 @@ export default function Document({ document }: { document?: DocumentType }) {
                                     className="h-fit w-full border py-2"
                                     onClick={() => {
                                         if (metadata) {
-                                            posthog.capture("document_font_family_change");
+                                            plausible("document_font_family_change");
                                             setMetadata({
                                                 ...metadata,
                                                 font: "serif"
@@ -265,7 +266,7 @@ export default function Document({ document }: { document?: DocumentType }) {
                                     className="h-fit w-full border py-2"
                                     onClick={() => {
                                         if (metadata) {
-                                            posthog.capture("document_font_family_change");
+                                            plausible("document_font_family_change");
                                             setMetadata({
                                                 ...metadata,
                                                 font: "sans"
@@ -287,7 +288,7 @@ export default function Document({ document }: { document?: DocumentType }) {
                                     className="h-fit w-full border py-2"
                                     onClick={() => {
                                         if (metadata) {
-                                            posthog.capture("document_font_family_change");
+                                            plausible("document_font_family_change");
                                             setMetadata({
                                                 ...metadata,
                                                 font: "mono"
@@ -345,7 +346,7 @@ export default function Document({ document }: { document?: DocumentType }) {
                         <DropdownMenuItem
                             onSelect={() => {
                                 setIsBlured(!isBlured);
-                                posthog.capture("document_blur");
+                                plausible("document_blur");
                             }}
                         >
                             {isBlured ? (
@@ -410,6 +411,7 @@ function ConfirmDeleteDialog({
 }) {
     const { getToken } = useAuth();
     const router = useRouter();
+    const plausible = usePlausible();
 
     const dd = async () => {
         getToken().then((token: any) => {
@@ -421,7 +423,7 @@ function ConfirmDeleteDialog({
                     })
                 });
                 // set the selected doc to the next doc in the array
-                posthog.capture("document_deleted");
+                plausible("document_deleted");
                 const nextDoc = useDocumentStore.getState().documents[0];
                 if (nextDoc) {
                     useDocumentStore.setState({ selectedDocument: nextDoc });

diff --git a/apps/web/components/feedback-dialog.tsx b/apps/web/components/feedback-dialog.tsx
@@ -25,7 +25,7 @@ import { useForm } from "react-hook-form";
 import { useUser } from "@clerk/nextjs";
 import { useLogSnag } from "@logsnag/next";
 import Spinner from "./ui/spinner";
-import posthog from "posthog-js";
+import { usePlausible } from "next-plausible";
 
 const formSchema = z.object({
     messsage: z
@@ -47,6 +47,7 @@ export default function FeedbackDialog({
 }) {
     const { user } = useUser();
     const { track } = useLogSnag();
+    const plausible = usePlausible();
 
     const [feedbackType, setFeedbackType] = useState<"Bug" | "Idea" | "Other" | null>(null);
 
@@ -79,7 +80,7 @@ export default function FeedbackDialog({
             notify: true
         });
 
-        posthog.capture("feedback_submitted");
+        plausible("feedback_submitted");
     }
 
     return (

diff --git a/apps/web/components/footer.tsx b/apps/web/components/footer.tsx
@@ -3,9 +3,10 @@
 import Link from "next/link";
 import GitHubIcon from "@/public/icons/github.svg";
 import TwitterIcon from "@/public/icons/twitter.svg";
-import posthog from "posthog-js";
+import { usePlausible } from "next-plausible";
 
 export default function Footer() {
+    const plausible = usePlausible();
     return (
         <footer className="flex w-full items-center justify-between gap-4 px-4 py-4 sm:px-8">
             <p className="text-foreground/60 text-xs font-normal">
@@ -14,7 +15,7 @@ export default function Footer() {
                     href="https://kyle.so"
                     target="_blank"
                     className="hover:text-foreground transition-colors duration-150 hover:underline"
-                    onClick={() => posthog.capture("footer_portfolio_link_click")}
+                    onClick={() => plausible("footer_portfolio_link_click")}
                 >
                     Kyle Dickey
                 </Link>
@@ -23,28 +24,28 @@ export default function Footer() {
                 <Link
                     href="/privacy"
                     className="hover:text-foreground text-foreground/60 text-xs font-normal transition-colors duration-150 hover:underline"
-                    onClick={() => posthog.capture("footer_privacy_click")}
+                    onClick={() => plausible("footer_privacy_click")}
                 >
                     Privacy
                 </Link>
                 <Link
                     href="/terms"
                     className="hover:text-foreground text-foreground/60 text-xs font-normal transition-colors duration-150 hover:underline"
-                    onClick={() => posthog.capture("footer_terms_click")}
+                    onClick={() => plausible("footer_terms_click")}
                 >
                     Terms
                 </Link>
                 <Link
                     href="https://github.com/dickeyy/diary"
                     target="_blank"
-                    onClick={() => posthog.capture("footer_github_link_click")}
+                    onClick={() => plausible("footer_github_link_click")}
                 >
                     <GitHubIcon className="fill-foreground/60 hover:fill-foreground h-4 w-4 transition-colors duration-150" />
                 </Link>
                 <Link
                     href="https://twitter.com/kyledickeyy"
                     target="_blank"
-                    onClick={() => posthog.capture("footer_twitter_link_click")}
+                    onClick={() => plausible("footer_twitter_link_click")}
                 >
                     <TwitterIcon className="fill-foreground/60 hover:fill-foreground h-4 w-4 transition-colors duration-150" />
                 </Link>

diff --git a/apps/web/components/navbar.tsx b/apps/web/components/navbar.tsx
@@ -26,9 +26,9 @@ import {
     StarIcon
 } from "lucide-react";
 import { useTheme } from "next-themes";
-import posthog from "posthog-js";
 import { useLogSnag } from "@logsnag/next";
 import FeedbackDialog from "./feedback-dialog";
+import { usePlausible } from "next-plausible";
 
 export default function Navbar({
     active
@@ -103,6 +103,7 @@ function AccountDropdown({ user }: { user: any }) {
     const { signOut } = useAuth();
     const { setTheme, theme } = useTheme();
     const { clearUserId } = useLogSnag();
+    const plausible = usePlausible();
 
     const [acctSettingsDialogOpen, setAcctSettingsDialogOpen] = useState(false);
     const [feedbackDialogOpen, setFeedbackDialogOpen] = useState(false);
@@ -202,7 +203,7 @@ function AccountDropdown({ user }: { user: any }) {
                     <DropdownMenuItem
                         className="focus:bg-red-500/20"
                         onSelect={() => {
-                            posthog.capture("sign_out");
+                            plausible("sign_out");
                             clearUserId();
                             signOut();
                         }}

diff --git a/apps/web/components/posthog-provider.tsx b/apps/web/components/posthog-provider.tsx
diff --git a/apps/web/components/providers.tsx b/apps/web/components/providers.tsx
@@ -1,5 +1,4 @@
 import { ClerkProvider } from "@clerk/nextjs";
-import PHProvider from "./posthog-provider";
 import { LogSnagProvider } from "@logsnag/next";
 
 export default function Providers({ children }: { children: React.ReactNode }) {
@@ -9,14 +8,9 @@ export default function Providers({ children }: { children: React.ReactNode }) {
                 baseTheme: "dark" as any
             }}
         >
-            <PHProvider>
-                <LogSnagProvider
-                    token={process.env.NEXT_PUBLIC_LOGSNAG_TOKEN || ""}
-                    project="diary"
-                >
-                    {children}
-                </LogSnagProvider>
-            </PHProvider>
+            <LogSnagProvider token={process.env.NEXT_PUBLIC_LOGSNAG_TOKEN || ""} project="diary">
+                {children}
+            </LogSnagProvider>
         </ClerkProvider>
     );
 }