feat : added social sharing button to blog posts

[Aerospace-prog]

Add Social Sharing Buttons to Blog Posts

Overview

This PR implements a comprehensive social sharing functionality for blog posts, allowing readers to share content across multiple social media platforms easily. The implementation addresses issue #12 and enhances the user experience by providing seamless content-sharing capabilities.

Features

Social Media Integration

• Twitter Sharing: Pre-formatted tweets with post title and URL
• Facebook Sharing: Direct sharing with proper URL parameters
• LinkedIn Sharing: Professional network integration
• Reddit Sharing: Community engagement functionality
• WhatsApp Sharing: Mobile-friendly sharing option

Technical Implementation

• Created modular SocialShare.astro component
• Implemented proper URL encoding for titles and URLs
• Utilized lucide-astro package for consistent icons
• Added TypeScript interfaces for type safety
• Implemented proper component structure and organization

Accessibility Features

• ARIA labels for all sharing buttons
• Semantic HTML structure
• Screen reader-friendly button descriptions
• Keyboard navigation support
• Clear visual feedback for interactive elements

UI/UX Improvements

• Responsive Design:
  • Adapts to all screen sizes
  • Proper spacing on mobile and desktop
  • Flexible layout with flex-wrap
• Visual Feedback:
  • Smooth hover transitions
  • Color changes on interaction
  • Consistent with site's design language
• Dark Mode Support:
  • Proper color contrast in both modes
  • Consistent styling across themes
  • Smooth theme transitions

Code Quality

• TypeScript type safety
• Clean component organization
• Proper prop interfaces
• Consistent code style
• DCO sign-off included
• Proper error handling

Testing Done

• Verified sharing functionality across all platforms
• Tested URL encoding with special characters
• Validated responsive design on multiple devices
• Checked accessibility using screen readers
• Verified dark mode compatibility
• Tested hover states and interactions
• Confirmed proper icon rendering

Screenshots

Desktop View

Social sharing buttons in desktop view showing all five platforms (Twitter, Facebook, LinkedIn, Reddit, WhatsApp) with proper spacing and hover effects

Mobile View

Social sharing buttons on mobile devices demonstrating responsive layout and touch-friendly design

Light Mode

Social sharing buttons in dark mode showing proper contrast and theme consistency

Hover States

Demonstration of hover effects and interactive states for the sharing buttons

Related Issues

Closes #12

Additional Notes

• The component is designed to be reusable across different types of content
• Social media platforms were chosen based on popularity and relevance
• Implementation follows best practices for social media sharing
• Performance optimised with minimal dependencies
• Maintains consistency with existing site design

Checklist

• Code follows project style guidelines
• Component is properly documented
• All social sharing links work correctly
• Accessibility features implemented
• Responsive design verified
• Dark mode support confirmed
• DCO sign-off included
• No console errors or warnings
• Proper TypeScript types
• Clean commit history

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
dev-rhylme-website	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 11, 2025 5:42am