feat: custom share message

[adelphi-liong]

Summary by CodeRabbit

• New Features
  • Social share messages are now customizable per blog post. Custom share messages follow specific guidelines—50–100 characters, neutral tone, with a curiosity gap—enabling more effective social sharing.

[coderabbitai]

Walkthrough

The PR extends the blog post system with a shareMessage field for customized social sharing. The field is documented in the skill guide, added to type definitions, extracted from Astro frontmatter, passed through the layout component, and utilized in SocialShareButtons to generate platform-specific share URLs. An example blog post includes the new field.

Changes

Cohort / File(s)	Summary
Skill Documentation .claude/skills/write-blog-post/SKILL.md	Added shareMessage field to frontmatter interface with comprehensive guidelines, constraints (50–100 characters, neutral tone, curiosity gap), hook techniques, and good/bad examples
Type Definitions src/lib/blog-posts.ts	Extended BlogPost interface with optional shareMessage?: string property; updated frontmatter shape and construction logic to extract shareMessage from Astro modules
Component Integration src/components/SocialShareButtons.tsx	Added optional shareMessage prop to SocialShareButtonsProps; replaced encodedText logic to prioritize shareMessage over title, updating Twitter, Reddit, Telegram, and WhatsApp share URL construction
Layout Usage src/layouts/BlogPostLayout.astro	Updated SocialShareButtons invocation to pass shareMessage={post.shareMessage}
Example Content src/pages/blog/the-llm-inflation-paradox.astro	Added shareMessage frontmatter field with sample value

Sequence Diagram

sequenceDiagram
    participant Astro Module as Astro Blog Module
    participant BlogPostLib as blog-posts.ts
    participant Layout as BlogPostLayout
    participant Component as SocialShareButtons
    
    Astro Module->>BlogPostLib: frontmatter (with shareMessage)
    BlogPostLib->>BlogPostLib: Extract shareMessage
    BlogPostLib->>Layout: BlogPost { title, shareMessage, ... }
    Layout->>Component: Pass shareMessage prop
    Component->>Component: shareText = shareMessage ?? title
    Component->>Component: Generate platform URLs with encodedShareText

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

• Review the encoding logic in SocialShareButtons to verify shareText and encodedShareText are correctly applied across all social platforms (Twitter, Reddit, Telegram, WhatsApp)
• Confirm that the fallback behavior (shareMessage ?? title) works as intended for posts without an explicit shareMessage
• Validate the frontmatter property extraction in blog-posts.ts handles optional shareMessage gracefully

Poem

🐰 A rabbit hops through social shares so fine,
With messages that shimmer, each one a line,
From blog to tweet to every platform wide,
The shareMessage hops with graceful stride!

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The pull request title "feat: custom share message" directly and accurately describes the main change in the changeset. The PR introduces a new shareMessage feature that extends the blog post frontmatter interface, updates the SocialShareButtons component to accept and use this field, and includes comprehensive documentation guidelines. The title is concise, uses clear conventional commit format ("feat:"), and is specific enough that a developer scanning the history would immediately understand the primary purpose of this changeset without ambiguity.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch Adelphi/custom-share-message

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 71f2af5 and 291f5ad.

📒 Files selected for processing (5)

• .claude/skills/write-blog-post/SKILL.md (2 hunks)
• src/components/SocialShareButtons.tsx (3 hunks)
• src/layouts/BlogPostLayout.astro (1 hunks)
• src/lib/blog-posts.ts (3 hunks)
• src/pages/blog/the-llm-inflation-paradox.astro (1 hunks)

🔇 Additional comments (14)

src/layouts/BlogPostLayout.astro (1)

114-114: LGTM!

The shareMessage prop is correctly passed to the SocialShareButtons component, maintaining type safety with the optional field from the BlogPost interface.

src/pages/blog/the-llm-inflation-paradox.astro (1)

14-14: LGTM!

Excellent example of the shareMessage feature. The message is concise (59 characters), uses the "Why X might be Y" pattern recommended in the guidelines, and creates curiosity without hype.

src/lib/blog-posts.ts (3)

10-10: LGTM!

The optional shareMessage field is correctly added to the BlogPost interface.

---

22-22: LGTM!

The shareMessage field is properly added to the frontmatter type definition, maintaining consistency with the BlogPost interface.

---

53-53: LGTM!

The shareMessage is correctly extracted from frontmatter and assigned to the blog post object. Since both are optional, this handles the case where shareMessage is undefined appropriately.

.claude/skills/write-blog-post/SKILL.md (3)

49-49: LGTM!

The shareMessage is properly documented in the metadata section with clear constraints (50-100 characters) and guidance on tone.

---

55-106: Excellent documentation!

The Share Message Guidelines section is comprehensive and provides:

• Clear hook techniques with practical examples
• Good vs. bad examples that illustrate the desired tone
• Specific character constraints
• Emphasis on neutral, curiosity-driven messaging

This will help content creators craft effective share messages consistently.

---

142-142: LGTM!

The example shareMessage in the template follows the documented guidelines and provides a clear pattern for content creators to follow.

src/components/SocialShareButtons.tsx (6)

7-7: LGTM!

The optional shareMessage prop is correctly added to the interface, maintaining backward compatibility with existing usage.

---

10-16: LGTM!

The share text logic is well-implemented:

• Provides sensible fallback to title when shareMessage is not provided
• Creates encodedShareText for platforms that use separate text and URL parameters
• Creates encodedText for WhatsApp which combines text and URL in a single parameter
• Properly encodes all variations for safe URL usage

---

29-29: LGTM!

Twitter share URL correctly uses encodedShareText to enable custom share messages.

---

47-47: LGTM!

Reddit share URL correctly uses encodedShareText for the title parameter.

---

53-53: LGTM!

Telegram share URL correctly uses encodedShareText for the text parameter.

---

59-59: LGTM!

WhatsApp correctly uses encodedText which combines the share text and URL in a single parameter, as required by WhatsApp's sharing API.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}