feat: add utm params to links

README.md

@@ -6,40 +6,38 @@
   matteogiardino.com
 </h1>
 
-
-
 This repository houses the code for my personal website and blog, where I share my thoughts, projects, and insights. Feel free to explore and get inspired.
 
 ## ✨ Features
 
-- ⚡️ Next.js 14 with App Router (Turbo)
-- 📝 MDX
-- 🎨 Tailwind CSS - for styling
-- 🌈 shadcn/ui & Radix UI - UI components
-- 🛡 Strict TypeScript and ESLint configuration
-- 📱 Responsive design
-- 🌗 Light / Dark mode
-- 📈 SEO optimized with meta tags and JSON-LD
-- 📰 RSS feed
-- 🗺 Sitemap
-- 📊 Google Analytics
-- 📖 Table of contents for blog posts
-- 📷 Image zoom - zoom in on images in blog posts
-- 📝 Code syntax highlighting - using Shiki
-- 🎨 Animation - using Framer Motion
-- 🤖 GitHub Actions for CI/CD
-- 🏠 LightHouse score of nearly 100
-- 💄 Prettier - code formatting
-- 〰️ Prisma - ORM
-- 👷🏻‍♂️ t3-env - validate environment variables before building
+-   ⚡️ Next.js 14 with App Router (Turbo)
+-   📝 MDX
+-   🎨 Tailwind CSS - for styling
+-   🌈 shadcn/ui & Radix UI - UI components
+-   🛡 Strict TypeScript and ESLint configuration
+-   📱 Responsive design
+-   🌗 Light / Dark mode
+-   📈 SEO optimized with meta tags and JSON-LD
+-   📰 RSS feed
+-   🗺 Sitemap
+-   📊 Google Analytics
+-   📖 Table of contents for blog posts
+-   📷 Image zoom - zoom in on images in blog posts
+-   📝 Code syntax highlighting - using Shiki
+-   🎨 Animation - using Framer Motion
+-   🤖 GitHub Actions for CI/CD
+-   🏠 LightHouse score of nearly 100
+-   💄 Prettier - code formatting
+-   〰️ Prisma - ORM
+-   👷🏻‍♂️ t3-env - validate environment variables before building
 
 ## 🔨 Requirements
 
-- Node, recommended `20.x`
-- pnpm, recommended `8.14.0`
-- PostgreSQL, recommended `14.x` (optional if you don't need all the functionalities)
-- [Visual Studio Code](https://code.visualstudio.com/) with [recommended extensions](.vscode/extensions.json)
-- Optionally [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
+-   Node, recommended `20.x`
+-   pnpm, recommended `8.14.0`
+-   PostgreSQL, recommended `14.x` (optional if you don't need all the functionalities)
+-   [Visual Studio Code](https://code.visualstudio.com/) with [recommended extensions](.vscode/extensions.json)
+-   Optionally [React Developer Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en)
 
 ## 👋 Getting Started
 
@@ -57,11 +55,11 @@ OR you can skip this by modifying `apps/web/src/env.ts`:
 
 ```ts
 export const env = createEnv({
-  skipValidation: true,
+    skipValidation: true,
 
-  server: {
-    // ...
-  }
+    server: {
+        // ...
+    },
 })
 ```
 
@@ -90,4 +88,4 @@ This project is open source and available under the [MIT License](LICENSE).
 <hr>
 <p align="center">
 Made with ❤️ in Turin (Italy)
-</p>
+</p>

app/(core)/learn/page.tsx

@@ -1,9 +1,10 @@
 import { Metadata, ResolvingMetadata } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
-import { absoluteUrl } from '@/utils/urls'
+import { absoluteUrl, UtmUrl } from '@/utils/urls'
 import { ArrowUpRight } from 'lucide-react'
 
+import { UtmMediums } from '@/types/links'
 import { products } from '@/config/products'
 import { Routes } from '@/config/routes'
 import { Badge } from '@/components/ui/badge'
@@ -88,7 +89,11 @@ export default function Page() {
                             </div>
                             <div className='flex flex-none flex-col'>
                                 <Button asChild size={'sm'} className='mt-2 md:mt-4'>
-                                    <Link href={product.url}>
+                                    <Link
+                                        href={UtmUrl(product.url, {
+                                            medium: UtmMediums.LearningProducts,
+                                            content: 'product_card',
+                                        })}>
                                         scopri di più <ArrowUpRight className='ml-1 inline-block size-4' />
                                     </Link>
                                 </Button>

app/(core)/posts/[slug]/page.tsx

@@ -1,13 +1,14 @@
 import { Metadata, ResolvingMetadata } from 'next'
 import Link from 'next/link'
 import { notFound } from 'next/navigation'
-import { absoluteUrl } from '@/utils/urls'
+import { absoluteUrl, UtmUrl } from '@/utils/urls'
 import rehypeParse from 'rehype-parse'
 import rehypeStringify from 'rehype-stringify'
 import { Article, WithContext } from 'schema-dts'
 import { unified } from 'unified'
 
 import { BlogPostSource } from '@/types/blog'
+import { UtmMediums } from '@/types/links'
 import { Routes } from '@/config/routes'
 import { site } from '@/config/site'
 import { rehypeGridImages } from '@/lib/mdx/plugins/rehype/rehype-substack-grid-images'
@@ -134,7 +135,14 @@ export default async function BlogPostPage({ params: { slug } }: { params: { slu
                 <AlertTitle>⚠️ leggi questo avviso!</AlertTitle>
                 <AlertDescription>
                     il post che stai per leggere è stato originariamente pubblicato nella mia{' '}
-                    <Link href={post.originalUrl} target='_blank' rel='noopener noreferrer' className='underline'>
+                    <Link
+                        href={UtmUrl(post.originalUrl, {
+                            medium: UtmMediums.Blog,
+                            content: 'alert_original_post',
+                        })}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        className='underline'>
                         newsletter su substack
                     </Link>
                     . Se incontri problemi, puoi leggerlo direttamente li.

app/(core)/projects/[slug]/page.tsx

@@ -6,7 +6,7 @@ import { allProjects } from 'contentlayer/generated'
 import { Routes } from '@/config/routes'
 import { site } from '@/config/site'
 import { Content } from '@/components/mdx-content'
-import Header from '@/components/projects/header'
+import Header from '@/components/project/header'
 import { ScrollIndicator } from '@/components/scroll-indicator'
 
 type Props = {

app/(core)/projects/page.tsx

@@ -1,9 +1,10 @@
 import { Metadata, ResolvingMetadata } from 'next'
 import Image from 'next/image'
 import Link from 'next/link'
-import { absoluteUrl } from '@/utils/urls'
+import { absoluteUrl, UtmUrl } from '@/utils/urls'
 import { allProjects } from 'contentlayer/generated'
 
+import { UtmMediums } from '@/types/links'
 import { Routes } from '@/config/routes'
 import { PageTitle } from '@/components/page-title'
 import { ProjectCollabCard } from '@/components/project-collab-card'
@@ -58,7 +59,10 @@ export default function Page() {
                         return (
                             <Link
                                 key={_id}
-                                href={Routes.Project(slug)}
+                                href={UtmUrl(Routes.Project(slug), {
+                                    medium: UtmMediums.Projects,
+                                    content: 'product_card',
+                                })}
                                 className='flex flex-col rounded-lg p-4 transition-colors duration-300 hover:bg-muted'>
                                 <Image
                                     src={image as string}

app/(core)/services/page.tsx

@@ -1,7 +1,8 @@
 import { Metadata, ResolvingMetadata } from 'next'
 import Link from 'next/link'
-import { absoluteUrl } from '@/utils/urls'
+import { absoluteUrl, UtmUrl } from '@/utils/urls'
 
+import { UtmMediums } from '@/types/links'
 import { Routes } from '@/config/routes'
 import { services } from '@/config/services'
 import { Button } from '@/components/ui/button'
@@ -82,7 +83,13 @@ export default function Page() {
                                     <p className='text-right font-semibold leading-tight'> {service.min_price}</p>
                                 </div>
                                 <Button asChild size={'sm'} className='mt-2 md:mt-4'>
-                                    <Link href={Routes.Contact}>contattami</Link>
+                                    <Link
+                                        href={UtmUrl(Routes.Contact, {
+                                            medium: UtmMediums.Services,
+                                            content: 'service_card',
+                                        })}>
+                                        contattami
+                                    </Link>
                                 </Button>
                             </div>
                         </div>
@@ -92,7 +99,7 @@ export default function Page() {
 
             <Testimonials />
 
-            <CtaBusiness />
+            <CtaBusiness medium={UtmMediums.Services} />
         </>
     )
 }

app/(marketing)/programmatore-leggendario/layout.tsx

@@ -67,7 +67,7 @@ const Layout = ({ children }: Props) => {
                 logoForDarkMode={LogoForDarkMode}
                 logoForLightMode={LogoForLightMode}
                 links={HeaderLinks}
-                ctaHref='/programmatore-leggendario#pricing'
+                ctaHref={PlRoutes.Pricing}
                 ctaText='Inizia ora!'
                 ctaClassName='bg-gradient-to-br tracking-wider from-yellow-300 to-amber-600 font-semibold text-neutral-50 dark:text-neutral-900'
             />

app/not-found.tsx

@@ -1,4 +1,7 @@
 import Link from 'next/link'
+import { UtmUrl } from '@/utils/urls'
+
+import { UtmMediums } from '@/types/links'
 
 export const metadata = {
     title: '404',
@@ -8,7 +11,12 @@ export default function NotFound() {
     return (
         <div className='mb-40 mt-52 flex flex-col items-center justify-center gap-12'>
             <h1 className='text-center text-6xl font-bold'>oopz qui non c'è nulla.</h1>
-            <Link href='/' className='rounded-lg border px-3 py-2 transition-colors duration-150'>
+            <Link
+                href={UtmUrl('/', {
+                    medium: UtmMediums.Homepage,
+                    content: 'hero',
+                })}
+                className='rounded-lg border px-3 py-2 transition-colors duration-150'>
                 vai alla home
             </Link>
         </div>

components/blog/post-card.tsx

@@ -3,6 +3,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import { formatDate } from '@/utils/dates'
+import { UtmUrl } from '@/utils/urls'
 
 import { BlogPostPreview } from '@/types/blog'
 
@@ -12,7 +13,9 @@ export function PostCard({ post }: { post: BlogPostPreview }) {
     return (
         <Link
             key={post.id}
-            href={post.url}
+            href={UtmUrl(post.url, {
+                content: 'post_card',
+            })}
             className='flex flex-col rounded-lg p-4 transition-all duration-150 hover:bg-muted'>
             <Image
                 src={post.image ?? '/images/blog-post-placeholder.webp'}

components/cta-business.tsx

@@ -1,15 +1,18 @@
 import Image from 'next/image'
 import Link from 'next/link'
+import { UtmUrl } from '@/utils/urls'
 
+import { UtmMediums } from '@/types/links'
 import { Routes } from '@/config/routes'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 
 type Props = {
+    medium: UtmMediums
     className?: string
 }
 
-export function CtaBusiness({ className }: Props) {
+export function CtaBusiness({ medium, className }: Props) {
     return (
         <>
             <section className={cn('relative py-16', className)}>
@@ -45,7 +48,13 @@ export function CtaBusiness({ className }: Props) {
                         </p>
                         <div className='mt-10 flex items-center justify-start gap-x-6 sm:justify-center lg:justify-start'>
                             <Button asChild>
-                                <Link href={Routes.Contact}>contattami</Link>
+                                <Link
+                                    href={UtmUrl(Routes.Contact, {
+                                        medium: medium,
+                                        content: 'business_cta',
+                                    })}>
+                                    contattami
+                                </Link>
                             </Button>
                         </div>
                     </div>

components/cta-card.tsx

@@ -1,5 +1,7 @@
 import Link from 'next/link'
+import { UtmUrl } from '@/utils/urls'
 
+import { UtmMediums } from '@/types/links'
 import { cn, shineAnimation } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { Card, CardDescription, CardTitle } from '@/components/ui/card'
@@ -40,13 +42,16 @@ export function CtaCard({
                     <div className='flex gap-4'>
                         {secondaryButtonText && secondaryButtonUrl && (
                             <Button variant='outline' asChild>
-                                <Link href={`${secondaryButtonUrl}?utm_source=blog&utm_medium=cta`}>
+                                <Link
+                                    href={UtmUrl(secondaryButtonUrl, { medium: UtmMediums.Blog, content: 'card_cta' })}>
                                     {secondaryButtonText}
                                 </Link>
                             </Button>
                         )}
                         <Button asChild>
-                            <Link href={`${primaryButtonUrl}?utm_source=blog&utm_medium=cta`}>{primaryButtonText}</Link>
+                            <Link href={UtmUrl(primaryButtonUrl, { medium: UtmMediums.Blog, content: 'card_cta' })}>
+                                {primaryButtonText}
+                            </Link>
                         </Button>
                     </div>
                 </div>

components/footer/index.tsx

@@ -2,7 +2,9 @@
 
 import Image from 'next/image'
 import Link from 'next/link'
+import { UtmUrl } from '@/utils/urls'
 
+import { UtmMediums } from '@/types/links'
 import { ContactLinks, FooterLinkGroups, SocialLinks } from '@/config/links'
 import { products } from '@/config/products'
 
@@ -28,7 +30,12 @@ export function Footer() {
                 <div className='col-span-2 mb-10 flex flex-col items-start gap-4 pr-4 md:hidden'>
                     <div className='grid w-full grid-cols-2 gap-2 sm:grid-cols-4'>
                         {products.map((p) => (
-                            <Link key={p.id} href={p.url} target='_blank'>
+                            <Link
+                                key={p.id}
+                                href={UtmUrl(p.url, {
+                                    medium: UtmMediums.Footer,
+                                })}
+                                target='_blank'>
                                 <Image src={p.image} height={80} width={100} alt={p.title} className='hidden' />
                                 <Image
                                     src={p.imageDark}
@@ -47,7 +54,9 @@ export function Footer() {
                         {list.links.map((link) => (
                             <Link
                                 key={link.title}
-                                href={link.href}
+                                href={UtmUrl(link.href, {
+                                    medium: UtmMediums.Footer,
+                                })}
                                 className='text-muted-foreground transition-colors duration-150 hover:text-accent-foreground'>
                                 {link.title}
                             </Link>
@@ -69,7 +78,12 @@ export function Footer() {
                 </div>
                 <div className='mb-10 hidden flex-col items-start gap-4 pr-4 md:flex'>
                     {products.map((p) => (
-                        <Link key={p.id} href={p.url} target='_blank'>
+                        <Link
+                            key={p.id}
+                            href={UtmUrl(p.url, {
+                                medium: UtmMediums.Footer,
+                            })}
+                            target='_blank'>
                             <Image src={p.image} height={80} width={100} alt={p.title} className='dark:hidden' />
                             <Image
                                 src={p.imageDark}