Merge pull request #1 from Eduardoooxd/feat/add-posthog

Feat/add posthog
Eduardoooxd · Jul 29, 2024 · 142a633 · 142a633
2 parents 9f86104 + da52c9d
commit 142a633
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 44 deletions.
diff --git a/.env.example b/.env.example
@@ -1,3 +1,6 @@
 RESEND_API_KEY=
 RESEND_FROM_EMAIL=
-RESEND_TO_EMAIL=
+RESEND_TO_EMAIL=
+NEXT_PUBLIC_POSTHOG_KEY=
+NEXT_PUBLIC_POSTHOG_HOST=
+NEXT_PUBLIC_NODE_ENV=development
diff --git a/next.config.mjs b/next.config.mjs
@@ -1,4 +1,10 @@
 /** @type {import('next').NextConfig} */
+import createJiti from 'jiti';
+import { fileURLToPath } from 'node:url';
+const jiti = createJiti(fileURLToPath(import.meta.url));
+
+jiti('./src/lib/environment');
+
 const nextConfig = {};
 
 export default nextConfig;
diff --git a/package.json b/package.json
@@ -22,11 +22,14 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@react-email/components": "^0.0.19",
     "@react-email/tailwind": "^0.0.18",
+    "@t3-oss/env-nextjs": "^0.11.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "framer-motion": "^11.2.10",
+    "jiti": "^1.21.6",
     "lucide-react": "^0.372.0",
     "next": "14.2.3",
+    "posthog-js": "^1.150.1",
     "react": "^18",
     "react-dom": "^18",
     "react-hook-form": "^7.51.5",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/actions/contact-form-action.ts b/src/actions/contact-form-action.ts
@@ -2,12 +2,12 @@
 
 import { ContactFormSchema } from '@/domain/contact-form';
 import ContactFormEmail from '@/email/contact-form-email';
-import { environmentVariables } from '@/lib/environment';
+import { ENV_VARS } from '@/lib/environment';
 import { waitTime } from '@/lib/utils';
 import React from 'react';
 import { Resend } from 'resend';
 
-const { RESEND_API_KEY, RESEND_FROM_EMAIL, RESEND_TO_EMAIL, NODE_ENV } = environmentVariables();
+const { RESEND_API_KEY, RESEND_FROM_EMAIL, RESEND_TO_EMAIL, NODE_ENV } = ENV_VARS;
 
 const resend = new Resend(RESEND_API_KEY);
 

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -5,6 +5,7 @@ import ActiveSectionProvider from '@/context/active-section-context';
 import ThemeContextProvider from '@/context/theme-context';
 import { WEBSITE_METADATA } from '@/lib/data';
 import { cn } from '@/lib/utils';
+import CSPostHogProvider from '@/providers/posthog';
 import { Inter } from 'next/font/google';
 import Footer from '../components/footer';
 import './globals.css';
@@ -20,17 +21,19 @@ export const metadata = WEBSITE_METADATA;
 export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" className="h-full overflow-x-hidden !scroll-smooth">
-      <body className={cn('flex min-h-full flex-col bg-background antialiased', inter.className)}>
-        <ThemeContextProvider>
-          <ActiveSectionProvider>
-            <Header />
-            {children}
-            <Footer />
-          </ActiveSectionProvider>
-          <ThemeSwitch />
-          <Toaster />
-        </ThemeContextProvider>
-      </body>
+      <CSPostHogProvider>
+        <body className={cn('flex min-h-full flex-col bg-background antialiased', inter.className)}>
+          <ThemeContextProvider>
+            <ActiveSectionProvider>
+              <Header />
+              {children}
+              <Footer />
+            </ActiveSectionProvider>
+            <ThemeSwitch />
+            <Toaster />
+          </ThemeContextProvider>
+        </body>
+      </CSPostHogProvider>
     </html>
   );
 }
diff --git a/src/components/contact-section-form.tsx b/src/components/contact-section-form.tsx
@@ -7,6 +7,7 @@ import { Textarea } from '@/components/shared/textarea';
 import { ContactFormSchema, ContactFormType } from '@/domain/contact-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Loader2, Send } from 'lucide-react';
+import posthog from 'posthog-js';
 import { useTransition } from 'react';
 import { useForm } from 'react-hook-form';
 import { useToast } from './shared/use-toast';
@@ -101,22 +102,28 @@ export default function ContactSectionForm() {
           )}
         />
 
-        <ContactSectionSubmitButton isPending={isPending} />
+        <ContactSectionSubmitButton
+          isPending={isPending}
+          onClick={() => {
+            posthog.capture('SUBMITED_CONTACT_FORM', { property: form.getValues('email') });
+          }}
+        />
       </form>
     </Form>
   );
 }
 
-interface ContactSectionSubmitButtonProps {
+interface ContactSectionSubmitButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   isPending: boolean;
 }
 
-function ContactSectionSubmitButton({ isPending }: ContactSectionSubmitButtonProps) {
+function ContactSectionSubmitButton({ isPending, ...props }: ContactSectionSubmitButtonProps) {
   return (
     <Button
       disabled={isPending}
       className="group inline-flex w-fit gap-1 rounded-full px-6 hover:scale-105 focus:scale-105 active:scale-95"
       type="submit"
+      {...props}
     >
       {isPending ? (
         <>

diff --git a/src/components/hero.tsx b/src/components/hero.tsx
@@ -8,6 +8,7 @@ import { motion } from 'framer-motion';
 import { ArrowDownToLine, ArrowUpRight, Github, Linkedin } from 'lucide-react';
 import Image from 'next/image';
 import Link from 'next/link';
+import posthog from 'posthog-js';
 import { Button } from './shared/button';
 
 export default function Hero() {
@@ -118,6 +119,7 @@ export default function Hero() {
             onClick={() => {
               setActive('Contact');
               setTimeOfLastClick(Date.now());
+              posthog.capture('CLICKED_CONTACT_HERO', { property: 'Clicked Contact Hero' });
             }}
           >
             Contact me here
@@ -135,6 +137,9 @@ export default function Hero() {
             href="/eduardo_couto_resume.pdf"
             download
             data-testid="download-cv-trigger"
+            onClick={() => {
+              posthog.capture('DOWNLOAD_CV', { property: 'Download CV' });
+            }}
           >
             Download CV
             <ArrowDownToLine size={20} />
@@ -146,6 +151,9 @@ export default function Hero() {
             variant="secondary"
             className="rounded-full shadow-lg transition hover:scale-105 hover:underline hover:underline-offset-2 focus:scale-105 active:scale-95"
             asChild
+            onClick={() => {
+              posthog.capture('CHECKED_LINKEDIN', { property: 'Checked Linkedin' });
+            }}
           >
             <a target="_blank" href={linkedin}>
               <Linkedin size={20} />
@@ -158,7 +166,12 @@ export default function Hero() {
             asChild
           >
             <a target="_blank" href={github}>
-              <Github size={20} />
+              <Github
+                onClick={() => {
+                  posthog.capture('CHECKED_GITHUB', { property: 'Checked Github' });
+                }}
+                size={20}
+              />
             </a>
           </Button>
         </div>

diff --git a/src/components/project-showcase.tsx b/src/components/project-showcase.tsx
@@ -3,6 +3,7 @@
 import { Project } from '@/lib/data';
 import { motion, useScroll, useTransform } from 'framer-motion';
 import Image from 'next/image';
+import posthog from 'posthog-js';
 import { useRef } from 'react';
 import { Badge } from './shared/badge';
 
@@ -35,7 +36,13 @@ export default function ProjectShowcase({ project }: ProjectShowcaseProps) {
         ref={containerRef}
         className="relative max-w-2xl overflow-hidden rounded-lg border border-black/5 bg-gray-100 transition hover:bg-gray-200 dark:bg-white/10 dark:hover:bg-white/20 sm:h-72 sm:pr-8 sm:group-even:pl-8"
       >
-        <a href={href} target="_blank">
+        <a
+          onClick={() => {
+            posthog.capture('CHECKED_PROJECT', { property: `Checked Project ${title}` });
+          }}
+          href={href}
+          target="_blank"
+        >
           <div className="flex h-full flex-col px-5 pb-7 pt-4 sm:max-w-[50%] sm:pl-10 sm:pr-2 sm:pt-10 sm:group-even:ml-[18rem]">
             <h3 className="text-2xl font-semibold transition group-hover:underline">{title}</h3>
             <p className="mt-2 leading-relaxed text-gray-700 dark:text-white/70">{description}</p>