Archive Block >50 tags

<script>
document.addEventListener('DOMContentLoaded', function() {
  const archiveBlock = document.querySelector('details.archive-block-wrapper ul.archive-group-list');
  if (!archiveBlock) return;

  const firstLink = archiveBlock.querySelector('.archive-group-name-link');
  if (!firstLink) return;

  const href = firstLink.getAttribute('href');
  const blogPath = href.substring(0, href.indexOf('/tag/'));

  fetch(`${blogPath}?format=json-pretty`)
    .then(response => response.json())
    .then(blogData => {
      const allTags = new Set();
      blogData.items.forEach(item => {
        if (item.tags && Array.isArray(item.tags)) {
          item.tags.forEach(tag => {
            if (tag && tag.trim()) allTags.add(tag.trim());
          });
        }
      });

      const existingTags = new Set();
      archiveBlock.querySelectorAll('.archive-group-name-link').forEach(link => {
        existingTags.add(link.textContent.trim());
      });

      const missingTags = Array.from(allTags).filter(tag => !existingTags.has(tag));

      missingTags.forEach(tag => {
        const urlSafeTag = encodeURIComponent(tag.replace(/\s+/g, '+'));
        const li = document.createElement('li');
        li.className = 'archive-group';
        li.innerHTML = `<a href="${blogPath}/tag/${urlSafeTag}" class="archive-group-name-link">${tag}</a>`;
        archiveBlock.appendChild(li);
      });

      const allLinks = Array.from(archiveBlock.querySelectorAll('.archive-group-name-link'))
        .sort((a, b) => a.textContent.trim().localeCompare(b.textContent.trim()));

      archiveBlock.innerHTML = '';
      allLinks.forEach(link => {
        const li = document.createElement('li');
        li.className = 'archive-group';
        li.appendChild(link);
        archiveBlock.appendChild(li);
      });
    })
    .catch(error => console.error('Error fetching blog data:', error));
});
</script>