Merge pull request #38 from sumitkumar9128/add-social-sharing-feature

Added social media sharing functionality for blog posts

public/css/style.css

@@ -406,3 +406,28 @@ img {
 .welcome-section a.cta-button:hover {
   background-color: #004d40;
 }
+
+.share-buttons {
+  display: flex;
+  gap: 10px; /* Space between buttons */
+  margin-top: 20px; /* Space above the buttons */
+}
+
+.share-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 8px 12px; 
+  background-color: #f0f0f0; 
+  border: none; 
+  border-radius: 5px; 
+  cursor: pointer; 
+  text-decoration: none; 
+  color: #333; 
+  transition: background-color 0.3s; 
+}
+
+.share-button:hover {
+  background-color: #e0e0e0; 
+}
+

public/js/share.js

@@ -0,0 +1,6 @@
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('Social media share buttons ready!');
+    // Add any future JS code for handling sharing events here
+    // basically if want to expand in future
+  });
+

views/layouts/main.ejs

@@ -19,6 +19,7 @@
     </main>
     <%- include('../partials/footer.ejs')  %>
   </div>  
+  <script src="/js/share.js"></script>
 
 </body>
 </html>

views/partials/share_buttons.ejs

@@ -0,0 +1,34 @@
+<div class="share-buttons">
+    <!-- Facebook Share Button -->
+    <a href="https://www.facebook.com/sharer/sharer.php?u=<%= encodeURIComponent(currentUrl) %>" 
+       target="_blank" 
+       rel="noopener noreferrer" 
+       class="share-button facebook">
+      <img src="/img/facebook.svg" alt="Share on Facebook" />
+    </a>
+
+    <!-- Twitter Share Button -->
+    <a href="https://twitter.com/intent/tweet?text=<%= encodeURIComponent(locals.title) %>&url=<%= encodeURIComponent(currentUrl) %>" 
+       target="_blank" 
+       rel="noopener noreferrer" 
+       class="share-button twitter">
+      <img src="/img/twitter.svg" alt="Share on Twitter" />
+    </a>
+
+    <!-- LinkedIn Share Button -->
+    <a href="https://www.linkedin.com/shareArticle?mini=true&url=<%= encodeURIComponent(currentUrl) %>&title=<%= encodeURIComponent(locals.title) %>" 
+       target="_blank" 
+       rel="noopener noreferrer" 
+       class="share-button linkedin">
+      <img src="/img/linkedin.svg" alt="Share on LinkedIn" />
+    </a>
+
+    <!-- WhatsApp Share Button -->
+    <a href="https://api.whatsapp.com/send?text=<%= encodeURIComponent(locals.title + ' ' + currentUrl) %>" 
+       target="_blank" 
+       rel="noopener noreferrer" 
+       class="share-button whatsapp">
+      <img src="/img/whatsapp.svg" alt="Share on WhatsApp" />
+    </a>
+  </div>
+

views/post.ejs

@@ -1,3 +1,10 @@
 <h1><%= locals.title %></h1>
 <p>By: <%= authorName %></p> <!-- Displaying the author's username -->
 <article class="article"><%= data.body %></article>
+
+<!-- Social Media Sharing Section -->
+<div class="share-section">
+  <h3>Share this post:</h3>
+  <!-- Include the share-buttons partial -->
+  <%- include('partials/share-buttons') %>
+</div>