Merge pull request #81 from hlxsites/feature/author

Author block

blocks/author/author.css

@@ -0,0 +1,111 @@
+.author {
+    padding: 20px 0;
+    border: 1px solid #999;
+}
+
+.author .tablist {
+    background-color: #999;
+    display: block!important;
+}
+
+.author .mmg-tabs .tab {
+    border: none!important;
+    border-radius: 0!important;
+    font-size: 15px!important;
+    color: #fff!important;
+    background-color: #999!important;
+}
+
+.author .mmg-tabs .tab.active {
+    color: #1A1919!important;
+    background-color: #fff!important;
+}
+
+.author .mmg-tabs .tab.active:hover {
+    color: #1A1919!important;
+    background-color: #fff!important;
+}
+
+.author .mmg-tabs .tabpanel {
+    border: none;
+}
+
+.author .mmg-tabs .tabpanel img {
+    border-radius: 50%;
+    border: 1px solid #CCC;
+}
+
+.author p {
+    padding: 0;
+}
+
+.author .author-info h4 {
+    padding-top: 0
+}
+
+.author #author-profile {
+    display: flex;
+    gap: 20px;
+    flex-direction: row;
+    justify-content: space-between;
+}
+
+.author .author-recent-posts {
+    font-size: 14px;
+    line-height: normal
+}
+
+.author .author-recent-posts .post {
+    padding: .4em 0
+}
+
+.author .date {
+    padding-left: .5em;
+    color: #b8bec1;
+    font-size: 14px!important;
+}
+
+.author #latest-post-panel a {
+    font-size: 14px;
+}
+
+.author .tabpanel li {
+    padding: 0 16px;
+}
+
+.author .tabpanel li::before {
+    top: 0.2rem!important;
+}
+
+@media(max-width: 414px) {
+    .author .tablist {
+        display: flex!important;
+    }
+
+    .author #author-profile {
+        flex-direction: column;
+    }
+
+    .author .author-info h4 {
+        text-align: center
+    }
+
+    .author .author-avatar {
+        /* float: none; */
+        width: 100%;
+        display: block;
+        text-align: center;
+        padding-bottom: 1em
+    }
+
+    .author .author-avatar img {
+        width: 80%;
+        max-width: 300px;
+        margin: 0 auto
+    }
+
+    .author .author-info,.author-info.has-avatar {
+        display: block;
+        width: 100%
+    }
+}

blocks/author/author.js

@@ -0,0 +1,148 @@
+import {
+  div, button,
+} from '../../scripts/dom-builder.js';
+
+function removeActiveClasses(content) {
+  const contentElements = content.querySelectorAll('.tabpanel');
+  [...contentElements].forEach((element) => {
+    element.classList.remove('active');
+  });
+  const listElements = content.querySelectorAll('button');
+  [...listElements].forEach((element) => {
+    element.classList.remove('active');
+  });
+}
+
+function activeFirstElements(content) {
+  const contentElement = content.querySelector('.tabpanel');
+  contentElement.classList.add('active');
+  const listElement = content.querySelector('button');
+  listElement.classList.add('active');
+}
+
+function makeAuthorBlock(elements) {
+  const authorBlock = document.createElement('div');
+  authorBlock.className = 'author-block';
+
+  if (elements.querySelector('picture')) {
+    const imgDiv = document.createElement('div');
+    const AnchorTag = elements.querySelector('a');
+    const copyTag = AnchorTag.cloneNode(true);
+    imgDiv.appendChild(copyTag);
+    copyTag.innerText = '';
+    imgDiv.className = 'author-avatar';
+    const img = elements.querySelector('picture');
+    copyTag.appendChild(img.cloneNode(true));
+    authorBlock.appendChild(imgDiv);
+  }
+
+  const contentDiv = document.createElement('div');
+  contentDiv.className = 'author-info';
+  const remainingContent = elements.cloneNode(true);
+  if (remainingContent.querySelector('picture')) {
+    remainingContent.querySelector('picture').remove();
+    contentDiv.classList.add('has-avatar');
+  }
+  contentDiv.appendChild(remainingContent);
+  authorBlock.appendChild(contentDiv);
+
+  return authorBlock;
+}
+
+async function fetchBlogData() {
+  try {
+    const response = await fetch('/query-index.json');
+    const jsonData = await response.json();
+    return jsonData.data;
+  } catch (error) {
+    return [];
+  }
+}
+
+function createArticleList(articles) {
+  const ul = document.createElement('ul');
+
+  articles.forEach((article) => {
+    const li = document.createElement('li');
+    const link = document.createElement('a');
+    const date = new Date(Number(article.date) * 1000).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
+    link.href = article.path;
+    link.textContent = article.title;
+    const span = document.createElement('span');
+    span.className = 'date';
+    span.innerText = ` - ${date}`;
+    li.appendChild(link);
+    li.appendChild(span);
+    ul.appendChild(li);
+  });
+
+  return ul;
+}
+
+async function getLatestPosts(authorUrl) {
+  const searchParams = new URLSearchParams(authorUrl.split('?')[1]);
+  let finalArticles = [];
+
+  try {
+    const data = await fetchBlogData();
+    const filteredResults = data.filter((item) => {
+      const path = item.path.toLowerCase();
+      const regex = /^\/blog\/.+/;
+      return regex.test(path);
+    });
+
+    if (searchParams.has('author')) {
+      const author = searchParams.get('author');
+      finalArticles = filteredResults.filter(
+        (art) => art.author.toLowerCase() === author.toLowerCase(),
+      );
+    }
+  } catch (error) {
+    return '';
+  }
+  return createArticleList(finalArticles);
+}
+
+export default async function decorate(block) {
+  const tabComponent = document.createElement('div');
+  tabComponent.className = 'mmg-tabs';
+  const ul = document.createElement('div');
+  ul.className = 'tablist';
+  const tabContent = document.createElement('div');
+  tabContent.className = 'tabpanels';
+  [...block.children].forEach((row) => {
+    const itemContent = makeAuthorBlock(row.children[1]);
+    itemContent.id = 'author-profile';
+    itemContent.className = 'tabpanel';
+    const li = document.createElement('button');
+    li.className = 'tab';
+    li.appendChild(row.children[0]);
+
+    li.addEventListener('click', () => {
+      removeActiveClasses(tabComponent);
+      li.classList.add('active');
+      itemContent.classList.add('active');
+    });
+    ul.appendChild(li);
+    tabContent.appendChild(itemContent);
+  });
+
+  const latestPostTab = button({ class: 'tab', id: 'latest-post' }, div('LATEST POSTS'));
+
+  ul.appendChild(latestPostTab);
+  const latestPostContent = div({ class: 'tabpanel', id: 'latest-post-panel' });
+  const authorUrl = block.querySelector('a').href;
+  const tabList = await getLatestPosts(authorUrl);
+  latestPostContent.appendChild(tabList);
+  tabContent.appendChild(latestPostContent);
+  latestPostTab.addEventListener('click', () => {
+    removeActiveClasses(tabComponent);
+    latestPostTab.classList.add('active');
+    latestPostContent.classList.add('active');
+  });
+  block.textContent = '';
+  tabComponent.appendChild(ul);
+  tabComponent.appendChild(tabContent);
+  block.appendChild(tabComponent);
+  activeFirstElements(tabComponent);
+}