リストブロックでディレクトリ構造を表現したら技術系ブログで便利に使えるんじゃ？

document.addEventListener('DOMContentLoaded', () => {
    document.querySelectorAll('ul.directory-tree li').forEach(li => {
      const hasSubList = li.querySelector('ul');
      const manuallyMarked = li.classList.contains('folder');
      const textOnly = li.cloneNode(true);
      textOnly.querySelectorAll('ul').forEach(el => el.remove());
      const text = textOnly.textContent.trim();
  
      if (text === '') {
        li.remove();
        return;
      }
  
      li.classList.remove('folder', 'file', 'open', 'closed');
  
      if (manuallyMarked || hasSubList) {
        li.classList.add('folder');
        const subLis = li.querySelectorAll('ul > li');
        const hasVisibleChild = Array.from(subLis).some(childLi => {
          const childText = childLi.textContent.trim();
          return childText !== '';
        });
        li.classList.add(hasVisibleChild ? 'open' : 'closed');
      } else {
        li.classList.add('file');
      }
    });
  });
  
  

ul.directory-tree{
    padding: 1em 2em;
    background: rgba(255,255,255,0.25);
    border-radius: 0.5em;
}



ul.directory-tree,ul.directory-tree *{
    list-style: none;
    position: relative;

}

ul.directory-tree ul::after{
    content:'';
    height: calc(100% - 0.5em);
    width: 0.5em;
    position:absolute;
    border-left: 2px solid #AAA;
    border-bottom: 2px solid #AAA;
    top: 0;
    left: 0.5em;
    border-radius: 0 0 0 3px;
}

ul.directory-tree ul li{
    position: relative;
}

ul.directory-tree ul li:not(:last-child)::after {
    content:'';
    height: 0.5em;
    width: 0.5em;
    border-bottom: 2px solid #AAA;
    position:absolute;
    top: 0.5em;
    left: -1em;
}

ul.directory-tree > li::after{
    display: none;
}


ul.directory-tree li::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    display: inline-block;
    margin-right: 0.5em;
  }
  
  ul.directory-tree li.folder::before {
    content: "\f07b";
    color: #4da6ff
  }
  
  ul.directory-tree li.folder.open::before {
    content: "\f07c";
    color: #4da6ff;
  }
  
  ul.directory-tree li.folder.closed::before {
    content: "\f07b";
    color: #4da6ff;
    opacity: 0.6;
  }
  
  ul.directory-tree li.file::before {
    content: "\f15b";
    color: #e5d5c3;
  }