Merge pull request #85 from hlxsites/feature/social-share

Updated the social share block

blocks/social-share/social-share.css

@@ -0,0 +1 @@
+/* social share  */

blocks/social-share/social-share.js

@@ -0,0 +1,47 @@
+function createShareButton(network, url, title) {
+  const baseUrl = {
+    twitter: 'https://twitter.com/intent/tweet?url=',
+    linkedin: 'https://www.linkedin.com/sharing/share-offsite/?url=',
+    facebook: 'https://www.facebook.com/sharer/sharer.php?u=',
+  };
+
+  const fullUrl = `${baseUrl[network]}${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`;
+
+  const listItem = document.createElement('li');
+  listItem.className = 'hs-blog-social-share-item';
+  const link = document.createElement('a');
+  link.className = `hs-blog-social-share-item-link hs-blog-social-share-item-${network}`;
+  link.href = fullUrl;
+  const img = document.createElement('img');
+  img.setAttribute('src', `/icons/${network}.svg`);
+  const label = document.createElement('span');
+  label.innerText = network === 'twitter' ? 'Tweet' : 'Share';
+  link.appendChild(img);
+  link.appendChild(label);
+  listItem.appendChild(link);
+
+  return listItem;
+}
+
+function renderShareButtons(container, url, title) {
+  const networks = ['twitter', 'linkedin', 'facebook'];
+  const list = document.createElement('ul');
+  list.className = 'hs-blog-social-share-list';
+
+  networks.forEach((network) => {
+    const listItem = createShareButton(network, url, title);
+    list.appendChild(listItem);
+  });
+
+  container.appendChild(list);
+}
+
+export default function decorate(block) {
+  const title = block.querySelector('h1');
+  const link = block.querySelector('a');
+  const shareContainer = document.createElement('div');
+  shareContainer.className = 'hs-blog-social-share';
+  renderShareButtons(shareContainer, link.href, title.innerText);
+  block.innerText = '';
+  block.appendChild(shareContainer);
+}

styles/Typo.css

@@ -1147,3 +1147,52 @@ form.hs-form .hs-input[type="checkbox"] {
         width: auto;
     }
 }
+
+/* social share */
+.hs-blog-social-share-list {
+    list-style-type: none;
+    display: flex;
+}
+
+.hs-blog-social-share-list .hs-blog-social-share-item {
+    padding-left: 0;
+    padding-right: 10px;
+    outline: none;
+}
+
+.hs-blog-social-share-list .hs-blog-social-share-item .hs-blog-social-share-item-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 3px 10px;
+    border-radius: 20px;
+    text-decoration: none;
+    line-height: 15px;
+}
+
+.hs-blog-social-share-list .hs-blog-social-share-item .hs-blog-social-share-item-linkedin {
+    background-color: #0073b1!important;
+}
+
+.hs-blog-social-share-list .hs-blog-social-share-item .hs-blog-social-share-item-facebook {
+    background-color: #385898!important;
+}
+
+.hs-blog-social-share-list .hs-blog-social-share-item .hs-blog-social-share-item-twitter {
+    background-color: #1d9bf0!important;
+}
+
+.hs-blog-social-share-list .hs-blog-social-share-item img {
+    height: 15px;
+}
+
+.hs-blog-social-share-list .hs-blog-social-share-item span {
+    color: #fff;
+    padding-left: 3px;
+    font-size: 16px;
+    font-weight: bold;
+}
+
+.hs-blog-social-share-list .hs-blog-social-share-item::before {
+    content: ''!important;
+}

templates/Blog/Blog.js

@@ -172,6 +172,45 @@ function createPageTopics() {
   return tagList;
 }
 
+function createShareButton(network, url, title) {
+  const baseUrl = {
+    twitter: 'https://twitter.com/intent/tweet?url=',
+    linkedin: 'https://www.linkedin.com/sharing/share-offsite/?url=',
+    facebook: 'https://www.facebook.com/sharer/sharer.php?u=',
+  };
+
+  const fullUrl = `${baseUrl[network]}${encodeURIComponent(url)}&title=${encodeURIComponent(title)}`;
+
+  const listItem = document.createElement('li');
+  listItem.className = 'hs-blog-social-share-item';
+  const link = document.createElement('a');
+  link.className = `hs-blog-social-share-item-link hs-blog-social-share-item-${network}`;
+  link.href = fullUrl;
+  const image = document.createElement('img');
+  image.setAttribute('src', `/icons/${network}.svg`);
+  const label = document.createElement('span');
+  label.innerText = network === 'twitter' ? 'Tweet' : 'Share';
+  link.appendChild(image);
+  link.appendChild(label);
+
+  listItem.appendChild(link);
+
+  return listItem;
+}
+
+function renderShareButtons(container, url, title) {
+  const networks = ['twitter', 'linkedin', 'facebook'];
+  const list = document.createElement('ul');
+  list.className = 'hs-blog-social-share-list';
+
+  networks.forEach((network) => {
+    const listItem = createShareButton(network, url, title);
+    list.appendChild(listItem);
+  });
+
+  container.appendChild(list);
+}
+
 export default async function buildAutoBlocks(block) {
   const searchParams = new URLSearchParams(window.location.search);
   let pageNumber = 1; // Use let instead of const
@@ -246,6 +285,11 @@ export default async function buildAutoBlocks(block) {
   } else {
     const tagList = createPageTopics();
     main.appendChild(tagList);
+    const shareTitle = getMetadata('og:title');
+    const shareContainer = document.createElement('div');
+    shareContainer.className = 'hs-blog-social-share';
+    renderShareButtons(shareContainer, new URL(window.location.href), shareTitle);
+    main.appendChild(shareContainer);
   }
 
   const archiveSidebar = generateArchiveBlock(filteredResults);