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