jekyll-ham 0.3.3 → 1.0.2

data/assets/entry-parser.js

@@ -23,10 +23,19 @@ function parseRawEntry(originalContent, onThisPageEntry, siteTitle, siteTagline)
   var headingTags = ['H2', 'H3', 'H4', 'H5', 'H6'];
   var i, j;
   var taglinePlaced = false;
-  var children = originalContent.childNodes;
+  var originalChildren = originalContent.childNodes;
   var currentAccordionId = '';
-  for (i = 0; i < children.length; i++){
-    var node = children[i];
+  
+  var onThisPageEntryDraft = document.createElement('ul');
+  onThisPageEntryDraft.className = 'list-group';
+
+  var firstH2 = true;
+  var accordionContainer = document.createElement('div');
+  accordionContainer.className = 'accordion';
+
+  // Scan the content to generate On This Page list and style blockquotes
+  for (i = 0; i < originalChildren.length; i++) {
+    var node = originalChildren[i];
     if (node.nodeName == 'H1' && !taglinePlaced && typeof siteTitle === 'string' && siteTitle.length > 0){
       var newTagline = document.createElement('span');
       newTagline.textContent = 'from ' + siteTitle;
@@ -47,23 +56,82 @@ function parseRawEntry(originalContent, onThisPageEntry, siteTitle, siteTagline)
       }
 
       // Create "On This Page entry"
+      var newLi = document.createElement('li');
+      newLi.className = 'list-group-item';
       var newA = document.createElement('a');
       newA.href = '#' + node.id;
-      newA.className = 'sidebar-link text-truncate';
-      newA.setAttribute('onclick', 'expandAccordion(\'' + currentAccordionId + '\')');
+      newA.className = 'nav-link text-truncate';
+      newA.setAttribute('data-bs-dismiss', 'offcanvas');
+      newA.setAttribute('data-bs-target', '#_ham_sidebar');
+      newA.setAttribute('onclick', 'expandAccordion(\'' + currentAccordionId + '\', \'' + node.id + '\')');
       for (j = 2; j < currentHeadingLevel; j++){
         var newSpan = document.createElement('span');
-        newSpan.className = 'ml-10 d-inline-block';
+        if (j == currentHeadingLevel - 1) {
+          newSpan.className = 'me-1 d-inline-block text-body-tertiary';
+          newSpan.innerHTML = '<i class="bi bi-arrow-return-right"></i>';
+        } else {
+          newSpan.className = 'ms-3 d-inline-block';
+        }
         newSpan.setAttribute('aria-hidden', true);
         newA.appendChild(newSpan);
       }
       newA.appendChild(document.createTextNode(node.textContent));
-      onThisPageEntry.appendChild(newA);
+      newLi.appendChild(newA)
+      onThisPageEntryDraft.appendChild(newLi);
+    }
+    if (node.nodeName == 'BLOCKQUOTE') {
+      var blockquoteChildren = node.childNodes;
+      node.className = 'alert';
+      var firstP = true;
+      for (j = 0; j < blockquoteChildren.length; j++) {
+        // Support GitHub-style Note, Important, and Warning blockquote style
+        if (blockquoteChildren[j].nodeName == 'P' && firstP) {
+          switch (blockquoteChildren[j].textContent) {
+            case '[!NOTE]':
+              node.className += ' alert-primary';
+              blockquoteChildren[j].className = ' fs-5 fw-bolder text-primary';
+              blockquoteChildren[j].innerHTML = '<i class="bi bi-info-circle"></i> Note';
+              break;
+            case '[!TIP]':
+              node.className += ' alert-success';
+              blockquoteChildren[j].className = ' fs-5 fw-bolder text-success';
+              blockquoteChildren[j].innerHTML = '<i class="bi bi-lightbulb"></i> Tip';
+              break;
+            case '[!IMPORTANT]':
+              node.className += ' alert-info';
+              blockquoteChildren[j].className = ' fs-5 fw-bolder text-info';
+              blockquoteChildren[j].innerHTML = '<i class="bi bi-exclamation-diamond"></i> Important';
+              break;
+            case '[!WARNING]':
+              node.className += ' alert-warning';
+              blockquoteChildren[j].className = ' fs-5 fw-bolder text-warning';
+              blockquoteChildren[j].innerHTML = '<i class="bi bi-exclamation-triangle"></i> Warning';
+              break;
+            case '[!CAUTION]':
+              node.className += ' alert-danger';
+              blockquoteChildren[j].className = ' fs-5 fw-bolder text-danger';
+              blockquoteChildren[j].innerHTML = '<i class="bi bi-exclamation-octagon"></i> Caution';
+              break;
+            default:
+              node.className += ' alert-secondary';
+          }
+          firstP = false;
+        }
+      }
     }
   }
+
+  // Rescan the content to create collapsible headings
+  var children = originalContent.cloneNode(true).childNodes;
   for (i = 0; i < children.length; i++){
     var node = children[i];
     if (node.nodeName === 'H2'){
+      if (firstH2) {
+        // Delete the original children to create a new accordion container
+        for (j = i; j < originalChildren.length; j++) originalChildren[j].remove();
+        firstH2 = false;
+      }
+
       var start = i; end = i;
       var collapseChildren = [];
       while (end + 1 < children.length && children[end + 1].nodeName !== 'H2') end++;
@@ -77,21 +145,38 @@ function parseRawEntry(originalContent, onThisPageEntry, siteTitle, siteTagline)
       }
       
       // Create actual collapse
-      var newDetails = document.createElement('details');
-      newDetails.className = 'collapse-panel w-full _ham_accordion_autoexpand';
-      var newSummary = document.createElement('summary');
-      newSummary.className = 'collapse-header font-size-20 h2';
-      newSummary.innerHTML = node.innerHTML;
-      var newDiv = document.createElement('div');
-      newDiv.className = 'collapse-content';
-      for (j = 0; j < collapseChildren.length; j++) newDiv.appendChild(collapseChildren[j]);
-      newDetails.appendChild(newSummary);
-      newDetails.appendChild(newDiv);
-
+      var newDetails = document.createElement('div')
+      newDetails.className = 'accordion-item';
       newDetails.id = children[i].id;
-      children[i].outerHTML = newDetails.outerHTML;
+      var newSummary = document.createElement('h2');
+      newSummary.className = 'accordion-header';
+      var newSummaryButton = document.createElement('button');
+      newSummaryButton.className = 'accordion-button fs-4';
+      newSummaryButton.setAttribute('type', 'button');
+      newSummaryButton.setAttribute('data-bs-toggle', 'collapse');
+      newSummaryButton.setAttribute('data-bs-target', '#' + children[i].id + "-content");
+      newSummaryButton.setAttribute('aria-expanded', 'true');
+      newSummaryButton.setAttribute('aria-controls', children[i].id + "-content");
+      newSummaryButton.setAttribute('type', 'button');
+      newSummaryButton.setAttribute('type', 'button');
+      newSummaryButton.innerHTML = node.innerHTML;
+      newSummary.appendChild(newSummaryButton);
+
+      var newCollapse = document.createElement('div');
+      newCollapse.className = 'accordion-collapse collapse show';
+      newCollapse.id = children[i].id + "-content";
+      var newBody = document.createElement('div');
+      newBody.className = 'accordion-body';
+      for (j = 0; j < collapseChildren.length; j++) newBody.appendChild(collapseChildren[j]);
+      newCollapse.appendChild(newBody);
+      newDetails.appendChild(newSummary);
+      newDetails.appendChild(newCollapse);
+      accordionContainer.appendChild(newDetails);
     }
   }
+  
+  originalContent.appendChild(accordionContainer);
+  onThisPageEntry.appendChild(onThisPageEntryDraft);
 }
 
 var _ham_state_is_all_accordion_collapsed = true;
@@ -110,9 +195,14 @@ function autoexpandAccordion(){
   }
 }
 
-function expandAccordion(id){
-  var el = document.getElementById(id);
-  el.setAttribute('open', 'true');
+async function expandAccordion(collapsibleId, contentId){
+  var el = new bootstrap.Collapse(document.getElementById(collapsibleId + "-content"), {toggle: false});
+  await el.show();
+  if (contentId) {
+    location.hash = "";
+    location.hash = "#" + contentId;
+    scrollBy(0, -66);
+  }
 }
 
 window.addEventListener("load", autoexpandAccordion);