From f0752f35fd9c02843d4f97ebbf601efff50f9e4b Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Mon, 6 Nov 2023 16:04:42 +0530 Subject: [PATCH 1/3] Updated the social share block --- blocks/social-share/social-share.css | 1 + blocks/social-share/social-share.js | 47 ++++++++++++++++++++++++++ icons/facebook.svg | 1 + icons/linkedin.svg | 1 + icons/twitter.svg | 1 + styles/Typo.css | 49 ++++++++++++++++++++++++++++ templates/Blog/Blog.js | 44 +++++++++++++++++++++++++ 7 files changed, 144 insertions(+) create mode 100644 blocks/social-share/social-share.css create mode 100644 blocks/social-share/social-share.js create mode 100644 icons/facebook.svg create mode 100644 icons/linkedin.svg create mode 100644 icons/twitter.svg diff --git a/blocks/social-share/social-share.css b/blocks/social-share/social-share.css new file mode 100644 index 00000000..f789b52f --- /dev/null +++ b/blocks/social-share/social-share.css @@ -0,0 +1 @@ +/* social share */ diff --git a/blocks/social-share/social-share.js b/blocks/social-share/social-share.js new file mode 100644 index 00000000..7df3e12a --- /dev/null +++ b/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); +} diff --git a/icons/facebook.svg b/icons/facebook.svg new file mode 100644 index 00000000..1ab0f744 --- /dev/null +++ b/icons/facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/linkedin.svg b/icons/linkedin.svg new file mode 100644 index 00000000..2868dd3a --- /dev/null +++ b/icons/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/icons/twitter.svg b/icons/twitter.svg new file mode 100644 index 00000000..fe1257de --- /dev/null +++ b/icons/twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/styles/Typo.css b/styles/Typo.css index ea7c8eac..da9ae59c 100644 --- a/styles/Typo.css +++ b/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; +} diff --git a/templates/Blog/Blog.js b/templates/Blog/Blog.js index 85b212d3..f2e7e70b 100644 --- a/templates/Blog/Blog.js +++ b/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('title'); + const shareContainer = document.createElement('div'); + shareContainer.className = 'hs-blog-social-share'; + renderShareButtons(shareContainer, 'window.location.href', shareTitle); + main.appendChild(shareContainer); } const archiveSidebar = generateArchiveBlock(filteredResults); From b933e6b282cda9a387639a620d9c5a13b3322543 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Mon, 6 Nov 2023 16:09:45 +0530 Subject: [PATCH 2/3] Fixing small issue --- templates/Blog/Blog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/Blog/Blog.js b/templates/Blog/Blog.js index f2e7e70b..6ea865a2 100644 --- a/templates/Blog/Blog.js +++ b/templates/Blog/Blog.js @@ -288,7 +288,7 @@ export default async function buildAutoBlocks(block) { const shareTitle = getMetadata('title'); const shareContainer = document.createElement('div'); shareContainer.className = 'hs-blog-social-share'; - renderShareButtons(shareContainer, 'window.location.href', shareTitle); + renderShareButtons(shareContainer, new URL(window.location.href), shareTitle); main.appendChild(shareContainer); } From 1adca2782932996955adc3b09344eb2d570bb548 Mon Sep 17 00:00:00 2001 From: TeshuKatepalli Date: Mon, 6 Nov 2023 16:20:27 +0530 Subject: [PATCH 3/3] Updated the title --- templates/Blog/Blog.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/Blog/Blog.js b/templates/Blog/Blog.js index 6ea865a2..9b4ad4ec 100644 --- a/templates/Blog/Blog.js +++ b/templates/Blog/Blog.js @@ -285,7 +285,7 @@ export default async function buildAutoBlocks(block) { } else { const tagList = createPageTopics(); main.appendChild(tagList); - const shareTitle = getMetadata('title'); + const shareTitle = getMetadata('og:title'); const shareContainer = document.createElement('div'); shareContainer.className = 'hs-blog-social-share'; renderShareButtons(shareContainer, new URL(window.location.href), shareTitle);