Merge pull request #724 from zackproser/vibe-coding-premium

Vibe coding premium

Author: zackproser

next.config.mjs

@@ -1,6 +1,7 @@
 import nextMDX from "@next/mdx";
 import remarkGfm from "remark-gfm";
 import remarkToc from "remark-toc";
+import remarkMermaid from "remark-mermaid";
 import rehypePrism from "@mapbox/rehype-prism";
 import rehypeSlug from 'rehype-slug';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';

package.json

@@ -128,6 +128,7 @@
     "rehype-autolink-headings": "^7.1.0",
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^3.0.1",
+    "remark-mermaid": "^0.2.0",
     "remark-toc": "^9.0.0",
     "sharp": "^0.34.1",
     "source-map": "^0.7.4",
@@ -152,6 +153,7 @@
     "@types/nodemailer": "^6.4.17",
     "@types/react-dom": "^18.2.19",
     "@types/uuid": "^10.0.0",
+    "concurrently": "^8.2.2",
     "eslint": "^8.45.0",
     "eslint-config-next": "^13.4.16",
     "jest": "^29.7.0",
@@ -161,7 +163,6 @@
     "prisma": "^6.4.1",
     "source-map-js": "^1.2.1",
     "ts-node": "^10.9.2",
-    "tsx": "^4.19.3",
-    "concurrently": "^8.2.2"
+    "tsx": "^4.19.3"
   }
 }

pnpm-lock.yaml

@@ -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

public/videos/git-guardian-install.mp4

@@ -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' })
+      }}
+    />
+  )
+}