feat: Remove unused SVG widgets and update file_tree layout

khiemgluong · May 20, 2024 · de906cc · de906cc
1 parent 6e7c4e8
commit de906cc
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 100 deletions.
diff --git a/assets/js/file_tree.js b/assets/js/file_tree.js
@@ -1,74 +1,73 @@
-document.addEventListener("DOMContentLoaded", function() {
-    function renderFileTree(container, nodes) {
-      nodes.forEach(node => {
-        const element = document.createElement('div');
-        element.classList.add('file-tree-node');
-        element.textContent = node.name;
-
-        if (node.type === 'directory') {
-          element.classList.add('directory');
-          const childrenContainer = document.createElement('div');
-          childrenContainer.classList.add('children');
-          renderFileTree(childrenContainer, node.children);
-          element.appendChild(childrenContainer);
+function buildFileTree(element, tree) {
+  const ul = document.createElement('ul');
+  element.appendChild(ul);
+
+  tree.forEach(child => {
+    const li = document.createElement('li');
+    ul.appendChild(li);
+
+    const button = document.createElement('button');
+    button.textContent = child.name;
+    li.appendChild(button);
+
+    if (child.type === 'dir') {
+      li.classList.add('dir');
+      const svgCollapsed = '<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m9 5 7 7-7 7"/></svg>';
+      const svgExpanded = '<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 9-7 7-7-7"/></svg>';
+      button.innerHTML = svgCollapsed + button.textContent;
+
+      var expanded = false;
+      button.addEventListener('click', () => {
+        expanded = !expanded;
+        button.innerHTML = (expanded ? svgExpanded : svgCollapsed) + button.textContent;
+
+        if (expanded) {
+          // Check if the child nodes have already been created
+          if (!li.querySelector('ul')) {
+            buildFileTree(li, child.children);
+          }
         } else {
-          element.classList.add('file');
+          const nestedUl = li.querySelector('ul');
+          if (nestedUl) {
+            li.removeChild(nestedUl);
+          }
         }
-
-        container.appendChild(element);
+      });
+    } else if (child.type === 'file') {
+      li.classList.add('file');
+      button.addEventListener('click', () => {
+        console.log(child.path);
       });
     }
-
-    const fileTreeContainer = document.getElementById('file-tree');
-    renderFileTree(fileTreeContainer, fileTreeData);
   });
+}
 
-  //STUFF
-
-//   function buildFileTree(element, tree) {
-//     const ul = document.createElement('ul');
-//     element.appendChild(ul);
-
-//     tree.forEach(child => {
-//         const li = document.createElement('li');
-//         ul.appendChild(li);
 
-//         const button = document.createElement('button');
-//         button.textContent = child.name;
-//         li.appendChild(button);
-
-//         if (child.type === 'dir') {
-//             var expanded = false;
-//             button.addEventListener('click', () => {
-//                 expanded = !expanded;
-//                 if (expanded) {
-//                     // Check if the child nodes have already been created
-//                     if (!li.querySelector('ul')) {
-//                         buildFileTree(li, child.children);
-//                     }
-//                 } else {
-//                     const nestedUl = li.querySelector('ul');
-//                     if (nestedUl) {
-//                         li.removeChild(nestedUl); // Corrected line
-//                     }
-//                 }
-//             });
-//         } else if (child.type === 'file') {
-//             button.addEventListener('click', () => {
-//                 console.log(child.path);
-//             });
-//         }
-//     });
-// }
-
-// var obsidianFilesJson = '{{ site.data.obsidian_files_json | escape }}';
-// var parsedObsidianFilesJson = JSON.parse(obsidianFilesJson.replace(/&quot;/g, '"'));
-
-// document.addEventListener('DOMContentLoaded', () => {
-//     const rootElement = document.getElementById('fileTree');
-//     buildFileTree(rootElement, parsedObsidianFilesJson);
-// });
+var obsidianFilesJson = '{{ site.data.obsidian_files_json | escape }}';
+var parsedObsidianFilesJson = JSON.parse(obsidianFilesJson.replace(/&quot;/g, '"'));
 
+function sortObsidianFiles(tree) {
+  tree.sort((a, b) => {
+    if (a.type === 'dir' && b.type === 'file') {
+      return -1;
+    } else if (a.type === 'file' && b.type === 'dir') {
+      return 1;
+    } else {
+      return a.name.localeCompare(b.name);
+    }
+  });
+  tree.forEach(child => {
+    if (child.type === 'dir') {
+      sortObsidianFiles(child.children);
+    }
+  });
+  return tree;
+}
 
-// const fileTreeElement = document.getElementById('fileTree');
-// createFileTree(fileTreeElement, tree);
+document.addEventListener('DOMContentLoaded', () => {
+  const rootElement = document.getElementById('file-tree');
+  const sortedFiles = sortObsidianFiles(parsedObsidianFilesJson);
+  buildFileTree(rootElement, sortedFiles);
+});
+console.log(parsedObsidianFilesJson);
+console.log("DIR root " + '{{ site.obsidian_vault | escape }}')
diff --git a/assets/widgets/arrowdown.html b/assets/widgets/arrowdown.html
diff --git a/assets/widgets/arrowright.html b/assets/widgets/arrowright.html
diff --git a/assets/widgets/file_tree.html b/assets/widgets/file_tree.html
@@ -1,7 +1,9 @@
 <body>
     <!-- Your widget content goes here -->
-    <div id="file-tree"></div>
-
+    <div class="container">
+        <div id="file-tree"></div>
+        <div id="file-reader"></div>
+    </div>
 </body>
 
 <script lang="text/javascript">
@@ -89,4 +91,9 @@
     ul ul {
         padding-left: 20px;
     }
+
+    .container {
+        display: flex;
+        flex-direction: row;
+    }
 </style>
diff --git a/assets/widgets/filetree.js b/assets/widgets/filetree.js
diff --git a/lib/jekyll/obsidian.rb b/lib/jekyll/obsidian.rb
@@ -17,7 +17,7 @@ def generate(site)
         obsidian_files = collect_files(source_dir)
         site.data["obsidian_files"] = obsidian_files
         site.data["obsidian_files_json"] = obsidian_files.to_json
-        obsidian_dir = File.join(File.dirname(site.dest), "_obsidian")
+        obsidian_dir = File.join(File.dirname(site.dest), "_includes", "_obsidian")
 
         project_root = File.expand_path("../..", File.dirname(__FILE__))
         assets_dir = File.join(project_root, "assets")