feat: custom share message

Author: adelphi-liong

.claude/skills/write-blog-post/SKILL.md

@@ -46,11 +46,65 @@ Help craft:
 - **Description**: Clear summary (120-160 characters)
 - **Topic**: tech | marketing | entrepreneurship | productivity | health
 - **Tags**: 3-5 relevant tags (lowercase, hyphenated)
+- **Share Message**: A baity but neutral hook (50-100 characters) that creates curiosity without hype - use questions, contrasts, or surprising insights
 
 **Important**: Once title is decided, ask:
 
 > "Please provide a URL to a cover image for this blog post. This will be displayed on the homepage card."
 
+### Share Message Guidelines
+
+Create a **baity but neutral** share message that hooks readers while maintaining a conversational tone:
+
+- **Include a hook or curiosity gap** that makes people want to click
+- **Sounds natural**, like you're casually sharing something intriguing with a friend
+- **Teases the insight** without giving it away completely
+- **Stays neutral in tone** - no excessive enthusiasm or hyperbole
+- **Is concise** (50-100 characters)
+- **Uses questions, contrasts, or surprising elements** to create interest
+
+**Hook Techniques (Neutral Style):**
+
+1. **Question Hook**: Pose an intriguing question
+
+   - "Why does [common thing] actually work differently than you think?"
+   - "What if [assumption] is backwards?"
+
+2. **Contrast Hook**: Present an unexpected contrast
+
+   - "The counterintuitive way [outcome] actually happens"
+   - "[Common approach] vs what actually works"
+
+3. **Surprising Insight**: Tease a non-obvious realization
+
+   - "The overlooked factor in [topic]"
+   - "What most people miss about [topic]"
+
+4. **Problem/Solution Tease**: Hint at solving a pain point
+   - "A different angle on [common problem]"
+   - "Rethinking [topic] from first principles"
+
+**Good Examples (Baity + Neutral):**
+
+- "Why [common thing] might not work the way you think"
+- "The surprising connection between [A] and [B]"
+- "What I learned after [doing X]"
+- "A counterintuitive take on [topic]"
+- "[Topic]: the part most people overlook"
+- "Rethinking how we approach [topic]"
+- "The hidden tradeoff in [common practice]"
+- "Why [assumption] doesn't hold up"
+
+**Bad Examples:**
+
+- ❌ "Amazing article about [topic] - must read!" (too enthusiastic)
+- ❌ "This will blow your mind!" (overly hyped)
+- ❌ "The ultimate guide to [topic]!" (generic clickbait)
+- ❌ "[Topic] explained (you won't believe #3!)" (cheap clickbait)
+- ❌ "SHOCKING truth about [topic]" (excessive caps/drama)
+
+**The Goal**: Create curiosity and interest without sounding like a used car salesman. Think "hmm, that's interesting" rather than "OMG YOU NEED TO READ THIS!!!"
+
 ### Step 4: Get Author Info
 
 Run to get git username:
@@ -85,6 +139,7 @@ export const frontmatter = {
   topic: 'tech' as const,
   tags: ['tag1', 'tag2', 'tag3'],
   coverImage: 'https://example.com/image.jpg',
+  shareMessage: 'Why [topic] might not work the way you think',
 };
 
 const post = getBlogPost('post-slug')!;

src/components/SocialShareButtons.tsx

@@ -4,12 +4,16 @@ interface SocialShareButtonsProps {
   title: string;
   description: string;
   url: string;
+  shareMessage?: string;
 }
 
-export function SocialShareButtons({ title, description, url }: SocialShareButtonsProps) {
+export function SocialShareButtons({ title, description, url, shareMessage }: SocialShareButtonsProps) {
   const encodedUrl = encodeURIComponent(url);
   const encodedTitle = encodeURIComponent(title);
-  const encodedText = encodeURIComponent(`${title} - ${description}`);
+  // Use custom share message if provided, otherwise fall back to title
+  const shareText = shareMessage || title;
+  const encodedShareText = encodeURIComponent(shareText);
+  const encodedText = encodeURIComponent(`${shareText} ${url}`);
 
   const handleShareClick = (platform: string) => {
     // Track share button click with Plausible
@@ -22,7 +26,7 @@ export function SocialShareButtons({ title, description, url }: SocialShareButto
     {
       name: 'Twitter',
       icon: FaTwitter,
-      url: `https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`,
+      url: `https://twitter.com/intent/tweet?text=${encodedShareText}&url=${encodedUrl}`,
       color: 'hover:text-[#1DA1F2]',
     },
     {
@@ -40,19 +44,19 @@ export function SocialShareButtons({ title, description, url }: SocialShareButto
     {
       name: 'Reddit',
       icon: FaReddit,
-      url: `https://reddit.com/submit?url=${encodedUrl}&title=${encodedTitle}`,
+      url: `https://reddit.com/submit?url=${encodedUrl}&title=${encodedShareText}`,
       color: 'hover:text-[#FF4500]',
     },
     {
       name: 'Telegram',
       icon: FaTelegram,
-      url: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`,
+      url: `https://t.me/share/url?url=${encodedUrl}&text=${encodedShareText}`,
       color: 'hover:text-[#26A5E4]',
     },
     {
       name: 'WhatsApp',
       icon: FaWhatsapp,
-      url: `https://wa.me/?text=${encodedText} ${encodedUrl}`,
+      url: `https://wa.me/?text=${encodedText}`,
       color: 'hover:text-[#25D366]',
     },
   ];

src/layouts/BlogPostLayout.astro

@@ -111,6 +111,7 @@ const postUrl = `${config.site.url}/blog/${post.slug}`;
             title={post.title}
             description={post.description}
             url={postUrl}
+            shareMessage={post.shareMessage}
             client:load
           />
         </div>

src/lib/blog-posts.ts

@@ -7,6 +7,7 @@ export interface BlogPost {
   topic: 'tech' | 'marketing' | 'entrepreneurship' | 'productivity' | 'health';
   tags: string[];
   image?: string;
+  shareMessage?: string;
 }
 
 interface AstroModule {
@@ -18,6 +19,7 @@ interface AstroModule {
     topic: 'tech' | 'marketing' | 'entrepreneurship' | 'productivity' | 'health';
     tags?: string[];
     image?: string;
+    shareMessage?: string;
   };
 }
 
@@ -48,6 +50,7 @@ function loadBlogPosts(): BlogPost[] {
         topic: frontmatter.topic,
         tags: frontmatter.tags || [],
         image: frontmatter.image,
+        shareMessage: frontmatter.shareMessage,
       });
     }
   }

src/pages/blog/the-llm-inflation-paradox.astro

@@ -11,6 +11,7 @@ export const frontmatter = {
   date: '2025-10-29',
   topic: 'tech' as const,
   tags: ['ai', 'efficiency', 'systems-thinking'],
+  shareMessage: 'Why AI-written emails might be slowing everything down',
 };
 
 const post = getBlogPost('the-llm-inflation-paradox')!;