rsgranne · October 31, 2023 09:16 · Oct 31, 2023
diff --git a/breadcrumb.js b/breadcrumb.js
@@ -0,0 +1,84 @@
+// To use, insert the following in `<body>`: <script src="/js/breadcrumb.js"></script>
+
+// Function to capitalize the first letter of a string
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+// Function to replace hyphens with spaces and format words
+function formatBreadcrumbItem(item) {
+  return item
+    .replace(/-/g, ' ') // Replace hyphens with spaces
+    .split(' ') // Split the string into words
+    .map((word, index) =>
+      index === 0 || !['a', 'and', 'or', 'the'].includes(word)
+        ? capitalizeFirstLetter(word)
+        : word.toLowerCase()
+    ) // Capitalize the first word and keep exceptions lowercase
+    .join(' '); // Join the words back into a string
+}
+
+// Function to generate the breadcrumb list
+function generateBreadcrumb() {
+  // Get the current file path
+  const currentPath = window.location.pathname;
+  const pathParts = currentPath.split('/').filter(Boolean); // Split the path and remove empty parts
+
+  // Create the breadcrumb list
+  const breadcrumbList = document.createElement('ol');
+  breadcrumbList.classList.add('breadcrumb');
+  breadcrumbList.id = 'breadcrumb-list';
+
+  // Add the "Home" link as the first item
+  const homeListItem = document.createElement('li');
+  homeListItem.innerHTML = '<a href="/" class="text-decoration-none text-success">Home</a>';
+  breadcrumbList.appendChild(homeListItem);
+
+  // Build the breadcrumb list for the folders and pages
+  let currentURL = '/';
+  for (let i = 0; i < pathParts.length; i++) {
+    currentURL += pathParts[i] + '/';
+
+    const listItem = document.createElement('li');
+    let folderName = formatBreadcrumbItem(pathParts[i]);
+
+    // Remove the ".html" extension from the last item
+    if (i === pathParts.length - 1) {
+      const extensionIndex = folderName.lastIndexOf('.html');
+      if (extensionIndex !== -1) {
+        folderName = folderName.substring(0, extensionIndex);
+      }
+    }
+
+    // If it's the last item, don't create a link
+    if (i === pathParts.length - 1) {
+      listItem.textContent = folderName;
+    } else {
+      listItem.innerHTML = `<a href="${currentURL}" class="text-decoration-none text-success">${folderName}</a>`;
+    }
+
+    // Add "active" class and aria-current="page" to the last item
+    if (i === pathParts.length - 1) {
+      listItem.classList.add('active');
+      listItem.setAttribute('aria-current', 'page');
+    }
+
+    breadcrumbList.appendChild(listItem);
+  }
+
+  // Create the breadcrumb nav and wrap it in a container
+  const breadcrumbNav = document.createElement('nav');
+  breadcrumbNav.setAttribute('aria-label', 'breadcrumb');
+  breadcrumbNav.appendChild(breadcrumbList);
+
+  const breadcrumbContainer = document.createElement('div');
+  breadcrumbContainer.classList.add('container-fluid');
+  breadcrumbContainer.appendChild(breadcrumbNav);
+
+  // Append the breadcrumb to the header
+  const header = document.getElementById('header');
+  header.appendChild(breadcrumbContainer);
+}
+
+// Call the function when the page loads
+window.onload = generateBreadcrumb;