Update and rename app.js to hnlSite.js

Author: jonathanmonney

js/app.js

@@ -0,0 +1,270 @@
+// ==== CONFIG ====
+const OWNER = "HumanNeuronLab";                     // Username
+const REPO = "HumanNeuronLab.github.io";            // Repository name
+const BRANCH = "main";                              // Branch to display
+const SUBFOLDER = "pages";                          // Root for all pages to be displayed
+const ICONSPATH = `${SUBFOLDER}/icons/`;            // Folder containing inline SVG icons (defaults to "unlisted.icon" if none specified). File names are case-insensitive.
+const ORDERPATH = `${SUBFOLDER}/order.txt`;         // File containing ordering list for the navigation bar. Unlisted items are appended in alphabetical order. Order of display is depth-specific. File names are case-insensitive.
+
+const API_URL = `https://api.github.com/repos/${OWNER}/${REPO}/git/trees/${BRANCH}?recursive=1`;
+const RAW_BASE = `https://raw.githubusercontent.com/${OWNER}/${REPO}/${BRANCH}/`;
+
+
+// ==== EXECUTE ====
+main();
+
+
+// ==== HELPERS ====
+function capitalizeName(file, type) {
+    let base = file;
+    if (type === "file") {
+        const dot = base.lastIndexOf(".");
+        if (dot > 0) base = base.slice(0, dot);
+    }
+    return base.charAt(0).toUpperCase() + base.slice(1);
+}
+
+function normalizeType(apiType) {
+    return apiType === "blob" ? "file" : "directory";
+}
+
+// recursively build a nested tree from flat paths
+function buildTree(flat, basePath = "", depth = 0) {
+    const tree = [];
+
+    const entries = flat
+        .filter(f => f.path.startsWith(basePath) && f.path !== basePath)
+        .map(f => {
+        const relPath = f.path.slice(basePath.length).replace(/^\/+/, "");
+        const firstPart = relPath.split("/")[0];
+        return { ...f, relPath, firstPart };
+        });
+
+    const groups = {};
+    for (const e of entries) {
+        if (!groups[e.firstPart]) groups[e.firstPart] = [];
+        groups[e.firstPart].push(e);
+    }
+
+    for (const [part, group] of Object.entries(groups)) {
+        const fullPath = basePath ? basePath + "/" + part : part;
+        const first = group[0];
+        const type = group.some(g => g.relPath.includes("/")) ? "directory" : normalizeType(first.type);
+
+        // skip order.txt and icons folder
+        if (part.toLowerCase() === "order.txt") continue;
+        if (part.toLowerCase() === "icons") continue;
+
+        const node = {
+        file: part,
+        path: fullPath,
+        name: capitalizeName(part, type),
+        type,
+        depth,
+        download_url: type === "file" ? RAW_BASE + fullPath : null,
+        svg: null,
+        children: []
+        };
+
+        if (type === "directory") {
+        node.children = buildTree(group, fullPath, depth + 1);
+        }
+
+        tree.push(node);
+    }
+
+    return tree;
+}
+
+// reorder children recursively using order.txt
+function reorderTree(tree, orders, icons) {
+    function reorderChildren(children, orderList) {
+        const orderLower = orderList.map(x => x.toLowerCase().trim());
+        const listed = [];
+        const unlisted = [];
+
+        for (const child of children) {
+        const matchIdx = orderLower.indexOf(child.file.toLowerCase());
+        if (matchIdx >= 0) {
+            listed[matchIdx] = child;
+        } else {
+            unlisted.push(child);
+        }
+        }
+
+        const sortedUnlisted = unlisted.sort((a, b) =>
+        a.file.toLowerCase().localeCompare(b.file.toLowerCase())
+        );
+
+        const reordered = listed.filter(Boolean).concat(sortedUnlisted);
+
+        // attach svg icons properly
+        for (const child of reordered) {
+        // strip extension if file, keep folder name as-is
+        let iconKey = (child.type === "file"
+            ? child.file.replace(/\.[^/.]+$/, "")
+            : child.file).toLowerCase().trim();
+
+        if (icons[iconKey]) {
+            child.svg = icons[iconKey];
+        } else if (icons["unlisted"]) {
+            child.svg = icons["unlisted"];
+        }
+
+        if (child.type === "directory") {
+            child.children = reorderChildren(child.children, orderList);
+        }
+        console.log("Looking for icon:", iconKey, "Available:", Object.keys(icons));
+        }
+
+        return reordered;
+    }
+
+    return reorderChildren(tree, orders);
+}
+
+function createNavbar(finalTree,elementParent) {
+    const ul = document.createElement('ul');
+    elementParent.appendChild(ul);
+    var subparent = [];
+    if (elementParent.id === "sidebar") {
+        const uli = document.createElement('li');
+        ul.appendChild(uli);
+        const span = document.createElement('span');
+        span.className = "logo";
+        span.innerText = 'Human Neuron Lab';
+        uli.appendChild(span);
+        const uliButton = document.createElement('button');
+        uli.appendChild(uliButton);
+        uliButton.setAttribute('onclick','toggleSidebar(this)');
+        uliButton.setAttribute('id','toggle-btn');
+        uliButton.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="m313-480 155 156q11 11 11.5 27.5T468-268q-11 11-28 11t-28-11L228-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T468-692q11 11 11 28t-11 28L313-480Zm264 0 155 156q11 11 11.5 27.5T732-268q-11 11-28 11t-28-11L492-452q-6-6-8.5-13t-2.5-15q0-8 2.5-15t8.5-13l184-184q11-11 27.5-11.5T732-692q11 11 11 28t-11 28L577-480Z"/></svg>';
+        uli.appendChild(uliButton);
+        subparent = ul;
+    } else {
+        ul.className = 'sub-menu';
+        const div = document.createElement('div');
+        ul.appendChild(div);
+        subparent = div;
+    }
+    for (const currentEntry of finalTree){
+        const li = document.createElement('li');
+        subparent.appendChild(li);
+        const liButton = document.createElement('button');
+        if (elementParent.id === "sidebar" && finalTree.indexOf(currentEntry) === 0){
+            li.className = "active";
+        }
+        liButton.innerHTML = currentEntry.svg;
+        li.appendChild(liButton);
+        const span = document.createElement('span');
+        span.innerText = currentEntry.name;
+        liButton.appendChild(span);
+        if (currentEntry.type === "file"){
+            if (elementParent.id === "sidebar" && finalTree.indexOf(currentEntry) === 0){
+                liButton.setAttribute('id','homePage');
+            }
+            liButton.className = 'menu-btn';
+            liButton.setAttribute('onclick','openSesame(this)');
+            liButton.setAttribute('HNL-link',currentEntry.download_url);
+        } else {
+            liButton.className = 'dropdown-btn';
+            liButton.setAttribute('onclick','toggleSubMenu(this)');
+            liButton.innerHTML += '<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e8eaed"><path d="M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z"/></svg>';
+        }
+        console.log(currentEntry);
+        const idx = finalTree.indexOf(currentEntry);
+        console.log(idx);
+        if (currentEntry.children.length > 0){
+            createNavbar(currentEntry.children,li);
+        };
+    }
+}
+
+function toggleSidebar(toggleButton){
+    const sidebar = document.getElementById("sidebar");
+    sidebar.classList.toggle('close')
+    toggleButton.classList.toggle('rotate')
+
+    closeAllSubMenus()
+}
+
+function toggleSubMenu(button){
+
+    if(!button.nextElementSibling.classList.contains('show')){
+        closeAllSubMenus()
+    }
+
+    button.nextElementSibling.classList.toggle('show')
+    button.classList.toggle('rotate')
+
+    if(sidebar.classList.contains('close')){
+        sidebar.classList.toggle('close')
+        toggleButton.classList.toggle('rotate')
+    }
+}
+
+function closeAllSubMenus(){
+    const sidebar = document.getElementById("sidebar");
+    Array.from(sidebar.getElementsByClassName('show')).forEach(ul => {
+        ul.classList.remove('show')
+        ul.previousElementSibling.classList.remove('rotate')
+    })
+}
+
+async function openSesame(button){
+    let x = await fetch(button.getAttribute("hnl-link"));
+    let y = await x.text();
+    document.getElementById("logger").innerHTML = y;
+    myList = document.getElementsByTagName("li");
+    for (i = 0; i < myList.length; i++) {
+      myList[i].classList.remove("active");
+    }
+    button.parentNode.classList.add("active");
+}
+
+async function main() {
+    try {
+        // 1. Fetch repo tree
+        const res = await fetch(API_URL);
+        if (!res.ok) throw new Error("Failed to fetch repo tree");
+        const repoData = await res.json();
+        const flat = repoData.tree;
+
+        // 2. Fetch all icons
+        const icons = {};
+        const iconFiles = flat.filter(f => f.path.startsWith(ICONSPATH) && f.path.endsWith(".icon"));
+        for (const icon of iconFiles) {
+        const svgRes = await fetch(RAW_BASE + icon.path);
+        if (svgRes.ok) {
+            const svgText = await svgRes.text();
+            const key = icon.path.split("/").pop().replace(/\.icon$/i, "").toLowerCase();
+            icons[key] = svgText;
+        }
+        }
+
+        // 3. Fetch order.txt (only root-level)
+        let orderList = [];
+        const orderFile = flat.find(f => f.path.toLowerCase() === ORDERPATH);
+        if (orderFile) {
+        const orderRes = await fetch(RAW_BASE + orderFile.path);
+        orderPath = RAW_BASE + orderFile.path;
+        if (orderRes.ok) {
+            const text = await orderRes.text();
+            orderList = text.split(/\r?\n/).filter(Boolean);
+        }
+        }
+
+        // 4. Build + reorder
+        const tree = buildTree(flat, SUBFOLDER, 0);
+        const finalTree = reorderTree(tree, orderList, icons);
+
+        //5. Create and populate the navbar
+        const sidebar = document.getElementById("sidebar");
+        createNavbar(finalTree,sidebar);
+        openSesame(document.getElementById("homePage"));
+
+        // document.getElementById("output").textContent = JSON.stringify(finalTree, null, 2);
+    } catch (err) {
+        // document.getElementById("output").textContent = "Error: " + err.message;
+    }
+}