A workaholic with a fountain and an ink pen. House in the mountains and he stopped drinking again.

Author: zackproser

src/components/ShareButton.jsx

@@ -6,7 +6,7 @@ import { Button } from '@/components/Button'
 import { ClipboardIcon, CheckIcon } from '@heroicons/react/24/outline' // Using Heroicons for feedback
 import clsx from 'clsx'
 
-export default function ShareButton({ buttonText = 'Share this guide', copiedText = 'Link Copied!', ...props }) {
+export default function ShareButton({ buttonText = 'Share this guide', copiedText = 'Link Copied!', onCopy, ...props }) {
   const [isCopied, setIsCopied] = useState(false)
   const pathname = usePathname()
   const [fullUrl, setFullUrl] = useState('')
@@ -24,6 +24,9 @@ export default function ShareButton({ buttonText = 'Share this guide', copiedTex
     try {
       await navigator.clipboard.writeText(fullUrl)
       setIsCopied(true)
+      if (typeof onCopy === 'function') {
+        onCopy()
+      }
       setTimeout(() => {
         setIsCopied(false)
       }, 2000) // Reset icon/text after 2 seconds

src/components/ShareButtonTracked.jsx

@@ -0,0 +1,14 @@
+'use client'
+import ShareButton from './ShareButton'
+import { track } from '@vercel/analytics'
+
+export default function ShareButtonTracked(props) {
+  return (
+    <ShareButton
+      {...props}
+      onCopy={() => {
+        track('share-guide', { location: 'top' })
+      }}
+    />
+  )
+} 

src/content/blog/vibe-coding-guide/page.mdx

@@ -6,12 +6,19 @@ import RandomPortrait from '@/components/RandomPortrait'
 import CV from '@/components/CV'
 import ShareButton from '@/components/ShareButton'
 import Newsletter from '@/components/Newsletter'
+import ShareButtonTracked from '@/components/ShareButtonTracked'
 
 import secretsProtection from '@/images/secret-protection.webp'
-import vibeCodingPremium from '@/images/vibe-coding-protection.webp'
+import secretsVsNonSecrets from '@/images/secrets-non-secrets.webp'
+import vibeCodingProtection from '@/images/vibe-coding-protection.webp'
+import vibeCodingPremium from '@/images/vibe-coding-premium.webp'
 import secretsHero from '@/images/vibe-coding-survival-guide.webp'
+import gitSafetyNet from '@/images/git-safety-net.webp'
 import gettingGot  from '@/images/getting-got.webp'
 import secretsFlow from '@/images/secrets-flow.webp'
+import secretsGuard from '@/images/secret-guard.webp'
+import secretsLeak from '@/images/secrets-leak.webp'
+import neverCommitEnv from '@/images/never-commit-env.webp'
 
 import { createMetadata } from '@/utils/createMetadata'
 
@@ -24,8 +31,6 @@ export const metadata = createMetadata({
   image: secretsHero,
 })
 
-*I've spent 13+ years securing apps at companies like Cloudflare and Pinecone. Trust me: leaking secrets hurts worse than forgetting to save your game.*
-
 ## Why Secrets Matter (The $500 tweet)
 
 <div className="my-6 grid grid-cols-1 md:grid-cols-2 gap-6 not-prose">
@@ -41,7 +46,7 @@ export const metadata = createMetadata({
 <figcaption>Don't end up like Leo. Learn enough to protect yourself, or buy the premium package to protect your secrets.</figcaption>
 
 <Link href="/products/vibe-coding-mastery">
-  <Image src={vibeCodingPremium} alt="Vibe coding premium protects you against leaking secrets" />
+  <Image src={vibeCodingProtection} alt="Vibe coding premium protects you against leaking secrets" />
 </Link>
 
 <figcaption>Premium includes a step-by-step screencast and instructions on setting up a special tool that makes it impossible for you to commit secrets to git (so you never end up like Leo).*</figcaption>
@@ -50,7 +55,15 @@ Publishing an OpenAI key to a public repo is the software equivalent of tweeting
 
 Attackers can crank out four‑figure bills (or worse, wipe data) before you notice the email from Stripe.
 
-<Image src={gettingGot} alt="Publishing your secrets on the public internet is the equivalent of walking through times square and throwing your credit cards at strangers" />
+<Link href="/products/vibe-coding-mastery">
+  <Image src={secretsLeak} alt="How secrets get leaked and abused" className="my-6" />
+</Link>
+
+*I've spent 13+ years securing apps at companies like Cloudflare and Pinecone. [Connect on LinkedIn](https://www.linkedin.com/in/zackproser/). Trust me: leaking secrets hurts worse than forgetting to save your game.*
+
+<div className="flex justify-center my-8">
+  <ShareButtonTracked buttonText="Share this guide" />
+</div>
 
 ## The New Coder's Trap
 
@@ -60,22 +73,17 @@ Building with AI feels like you've hacked the system... until you:
 - Realize your "private" repo was public all along  
 
 **This happens because:**  
-Cursor is still a tool for professional developers, which assumes you know things like:
+Cursor, Windsurf and Claude Code are still tools designed for professional developers, which assumes you know things like:
 - Where secrets actually live in production  
 - How Git history really works  
 - That API keys = credit cards  
 
-<Newsletter 
-  title="🚨 Tools Leo Wishes He Had" 
-  body="Only 100 early-access slots. Get screencasts + leak-prevention tools before they go live." 
-  successMessage="You're on the list! We'll email you about Vibe Coding Mastery." 
-  position="vibe-guide-mid-post" 
-  tags={['vibe-coder-premium-waitlist', 'source-vibe-guide-mid-post']} 
-  className="my-8 not-prose" 
-/>
-
 ## What actually counts as a secret?
 
+<Link href="/products/vibe-coding-mastery">
+  <Image src={secretsVsNonSecrets} alt="What is a secret and what isn't?" />
+</Link>
+
 ### 🚨 Always Keep Private:
 - `OPENAI_API_KEY`
 - `DATABASE_URL` (e.g., `postgres://user:password@...`)
@@ -84,10 +92,23 @@ Cursor is still a tool for professional developers, which assumes you know thing
 
 **If it looks like a password or unlocks paid access, it's a secret.**
 
+<Newsletter 
+  title="🚨 Tools Leo Wishes He Had" 
+  body="100 early-access spots left—lock in lifetime updates. Premium members deploy 3x faster with AI-powered commit reviews." 
+  successMessage="You're on the list! We'll email you about Vibe Coding Mastery." 
+  position="vibe-guide-mid-post" 
+  tags={['vibe-coder-premium-waitlist', 'source-vibe-guide-mid-post']} 
+  className="my-8 not-prose" 
+/>
+
 ---
 
 ## Git = Save Game, Explained 💾
 
+<Link href="/products/vibe-coding-mastery">
+  <Image src={gitSafetyNet} alt="Git is like a save system or safety net" />
+</Link>
+
 Imagine your project is a video-game world:
 
 | Game vibe | Git concept |
@@ -127,10 +148,9 @@ git reset --hard HEAD~1
 2. Panic? No! Run `git reset --hard HEAD~1` to revert to your last save.
 3. Try again on a new branch: `git checkout -b retry-feature`.
 
-**Premium Bonus:** Screencasts walk you through real-world Git issues like fixing a botched `merge`.
-
 <div className="not-prose my-4 p-4 rounded-md border border-yellow-400 bg-yellow-50 text-yellow-800 dark:border-yellow-600/30 dark:bg-yellow-900/20 dark:text-yellow-200">
   <strong className="font-semibold">🔒 Premium Only:</strong> Get pre-commit hooks and AI-powered rules that nudge Cursor to offer branches or checkpoints.
+  <Image src={secretsGuard} alt="The premium version of this guide protects your secrets" />
 </div>
 
 ---
@@ -139,7 +159,9 @@ git reset --hard HEAD~1
 
 <Image src={secretsFlow} alt="How secrets flow" />
 
-**Secret** → a password-like string that unlocks a paid API or private database.  
+**Secret** = Your code's credit card number. Leak it, pay for it.  
+**Branch** = A sandbox for experiments. No branch? Bugs go live.  
+
 **Environment variable (.env)** → a locked drawer your code can peek into at runtime so secrets don't sit in code.
 
 Think of .env as hiding your house key under a rock outside the door. Your code knows which rock to lift; strangers do not.
@@ -152,44 +174,42 @@ Quick checklist:
 ### 💡 Try This (Free):
 Run `git add . && git commit -m "test"` to save your code.
 
-**Premium Bonus:** Watch the screencast to see how Cursor's AI suggests commit messages *before* you type them.
+**Premium Bonus:** Watch the screencast and get the exact commands to set up a tool that makes it impossible to leak your secrets via git!**
 
 ---
 
-## 🎥 What's in Premium?
+## Set Up GitGuardian for Automatic Secret Scanning
 
-- **Screencasts:** Watch me debug a secret leak in real-time.
-- **Cursor Rules:** See how AI nudges you to safer commits.
-- **Templates:** Copy-paste CI/CD configs that block leaks automatically.
+To make sure you never accidentally commit secrets to any of your projects, you can install a global pre-commit hook with GitGuardian. This is a one-time setup that protects every repo on your machine.
 
-<Link href="/products/vibe-coding-mastery">
-  <img src="https://via.placeholder.com/600x300?text=Premium+Only:+Real-time+Secret+Scanning" alt="Premium only: GitGuardian blocking a leaked API key" />
-</Link>
-*Premium unlocks screencasts and tools that auto-block leaks before they happen.*
+**What does this mean?**
+- A "pre-commit hook" is a tiny program that runs every time you try to make a Git commit.
+- With GitGuardian, this hook will automatically scan your code for secrets (like API keys) before the commit goes through.
+- If it finds something dangerous, it will block the commit and show you exactly what needs fixing—before anything leaks!
 
-[Join Waitlist for Early Access](/contact)
+**To install the global pre-commit hook, run:**
 
----
+```bash
+ggshield install -m global
+```
 
-<div className="mt-16 mb-16 text-center not-prose">
-  <h3 className="text-lg font-semibold text-zinc-900 dark:text-zinc-100 mb-2">
-    Did this guide help?
-  </h3>
-  <div className="text-base text-zinc-600 dark:text-zinc-400 mb-4">
-    Know someone else building with AI who could benefit? Please share it!
-  </div>
-  <ShareButton />
-</div>
+*This is a powerful safety net: it works for every project on your computer, not just one folder.*
 
 ---
 
-## Survival Terms 📖
+## 🎥 What's in Premium?
 
-| Term        | What it really means + Risk                     |
-|-------------|-------------------------------------------------|
-| **Commit**  | A save point for your project. Lose it? You're stuck debugging blind. |
-| **Branch**  | A parallel timeline to test changes safely. Without one, bugs hit your live project. |
-| **Remote**  | A GitHub copy of your project. Push unsafe code here? It becomes public. |
-| **Secret**  | API keys, DB URLs — anything that costs money or gives access. Leak it, pay for it. |
+<Link href="/products/vibe-coding-mastery">
+  <Image src={vibeCodingPremium} alt="Vibe Coding Mastery protects your secrets and makes everything as simple as possible to understand" />
+</Link>
 
----
+- **Screencasts:** In addition to the exact commands, you can watch me perform all the setup tasks in Cursor 
+- **Cursor Rules:** I've created custom Cursor Rules files that protect you and teach you as you work. 
+- **Make it impossible to leak secrets:** I show you exactly how, and give you the commands, to set up a world-class tool that makes it impossible for you to leak secrets via Git. 
+
+<Link href="/products/vibe-coding-mastery">
+
+</Link>
+*Premium unlocks screencasts, exact commands, tools that auto-block leaks before they happen, and custom Cursor Rules to help you learn and protect you as you vibe code.*
+
+[Join Waitlist for Early Access](/contact)