diff --git a/blocks/author-box/author-box.css b/blocks/author-box/author-box.css index 530ee56b..039ff66a 100644 --- a/blocks/author-box/author-box.css +++ b/blocks/author-box/author-box.css @@ -84,7 +84,7 @@ main .author-box-container > div { } main .author-box-info .blog-author-blurb { - max-width: 300px; + max-width: 290px; margin-left: 10px; border-left: 1px solid grey; display: block; diff --git a/blocks/author-box/author-box.js b/blocks/author-box/author-box.js index 5db469a3..9ebf97f8 100644 --- a/blocks/author-box/author-box.js +++ b/blocks/author-box/author-box.js @@ -13,30 +13,59 @@ function openPopup(e) { ); } -async function buildSharing(githubId) { +async function buildSharing(id, type = 'github') { const authorName = getMetadata('author'); const sharing = document.createElement('div'); sharing.classList.add('sharing-details'); const scriptUrl = new URL(import.meta.url); - const iconsPath = new URL('../../icons/icon-github.svg', scriptUrl).href; + let iconsPath; + if (type === 'github') { + iconsPath = new URL('../../icons/icon-github.svg', scriptUrl).href; + } else if (type === 'linkedin') { + iconsPath = new URL('../../icons/icon-linkedin.svg', scriptUrl).href; + } // Fetch SVG content const response = await fetch(iconsPath); const svgContent = await response.text(); + + const profiles = { + github: { + dataType: 'GitHub', + altText: 'share-github', + ariaLabel: 'share-github', + titleText: `${authorName}'s GitHub Profile`, + }, + linkedin: { + dataType: 'LinkedIn', + altText: 'share-linkedin', + ariaLabel: 'share-linkedin', + titleText: `${authorName}'s LinkedIn Profile`, + }, + }; + + const { + dataType, altText, ariaLabel, titleText, + } = profiles[type] || profiles.github; + sharing.innerHTML = ` - - ${svgContent} - - `; + + ${svgContent} + + `; sharing.querySelectorAll('[data-href]').forEach((link) => { link.addEventListener('click', openPopup); }); return sharing; } -async function addProfileLinkToImage(authorImage, githubId) { +async function addProfileLinkToImage(authorImage, profileId, type = 'github') { const authorLink = document.createElement('a'); authorLink.classList.add('blog-author-link'); - authorLink.setAttribute('data-href', githubId); + if (type === 'github') { + authorLink.setAttribute('data-href', `https://github.com/${profileId}`); + } else if (type === 'linkedin') { + authorLink.setAttribute('data-href', profileId); + } authorLink.append(authorImage); authorLink.addEventListener('click', openPopup); return authorLink; @@ -61,14 +90,23 @@ function validateDate(dateTag, dateString) { export default async function decorateAuthorBox(blockEl) { const githubId = getMetadata('github'); + const linkedinLink = getMetadata('linkedin'); const childrenEls = Array.from(blockEl.children); const bylineContainer = childrenEls[0]; bylineContainer.classList.add('author-box-info'); // author image const authorImage = bylineContainer.firstElementChild; authorImage.classList.add('blog-author-image'); - const addAuthorLink = await addProfileLinkToImage(authorImage, githubId); - bylineContainer.prepend(addAuthorLink); + // author profile link + let addAuthorLink; + if (githubId) { + addAuthorLink = await addProfileLinkToImage(authorImage, githubId, 'github'); + } else if (linkedinLink) { + addAuthorLink = await addProfileLinkToImage(authorImage, linkedinLink, 'linkedin'); + } + if (addAuthorLink) { + bylineContainer.prepend(addAuthorLink); + } // author name bylineContainer.lastElementChild.classList.add('blog-author-details'); const authorDetails = bylineContainer.lastElementChild; @@ -82,6 +120,13 @@ export default async function decorateAuthorBox(blockEl) { const authorBlurb = await createAuthorBlurb(blurb); bylineContainer.append(authorBlurb); // sharing - const shareBlock = await buildSharing(githubId); - bylineContainer.append(shareBlock); + let shareBlock; + if (githubId) { + shareBlock = await buildSharing(githubId, 'github'); + } else if (linkedinLink) { + shareBlock = await buildSharing(linkedinLink, 'linkedin'); + } + if (shareBlock) { + bylineContainer.append(shareBlock); + } } diff --git a/icons/icon-linkedin.svg b/icons/icon-linkedin.svg new file mode 100644 index 00000000..4cc45ff8 --- /dev/null +++ b/icons/icon-linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file