Enchance repo structure script

42cursus · Nov 30, 2024 · d5cca42 · d5cca42
1 parent a372e67
commit d5cca42
Showing 1 changed file with 50 additions and 17 deletions.
diff --git a/docs/index.html b/docs/index.html
@@ -10,6 +10,21 @@
         }
         ul {
             list-style-type: none;
+            margin-left: 20px;
+            padding: 0;
+        }
+        li {
+            cursor: pointer;
+            margin: 5px 0;
+        }
+        .file {
+            cursor: default;
+        }
+        .folder::before {
+            content: "📂 ";
+        }
+        .file::before {
+            content: "📄 ";
         }
     </style>
 </head>
@@ -21,33 +36,51 @@ <h1>Welcome to 42 cursus Libft project</h1>
 </div>
 
 <script>
-    async function fetchRepoStructure() {
+    const repo = '42cursus/libft';
+    const apiBaseUrl = `https://api.github.com/repos/${repo}/contents`;
+
+    async function fetchContents(url, parentElement) {
         try {
-            // GitHub API to fetch repository contents
-            const repo = '42cursus/libft';
-            const apiUrl = `https://api.github.com/repos/${repo}/contents/`;
-            const response = await fetch(apiUrl);
-            const data = await response.json();
+            const response = await fetch(url);
+            const items = await response.json();
 
-            // Build and display the structure
-            const container = document.getElementById('repo-structure');
+            // Create a list to display contents
             const list = document.createElement('ul');
-            data.forEach(item => {
+            items.forEach(item => {
                 const listItem = document.createElement('li');
-                listItem.textContent = `${item.name} (${item.type})`;
+                listItem.textContent = item.name;
+                listItem.classList.add(item.type === 'dir' ? 'folder' : 'file');
                 list.appendChild(listItem);
+
+                if (item.type === 'dir') {
+                    listItem.addEventListener('click', async (e) => {
+                        e.stopPropagation(); // Prevent bubbling
+                        if (listItem.querySelector('ul')) {
+                            // Collapse folder if already expanded
+                            listItem.querySelector('ul').remove();
+                        } else {
+                            // Fetch and display folder contents
+                            const subList = document.createElement('ul');
+                            listItem.appendChild(subList);
+                            await fetchContents(item.url, subList);
+                        }
+                    });
+                }
             });
-            container.innerHTML = ''; // Clear loading message
-            container.appendChild(list);
+
+            // Append the list to the parent element
+            parentElement.appendChild(list);
         } catch (error) {
-            document.getElementById('repo-structure').textContent =
-                'Failed to load repository structure.';
-            console.error(error);
+            console.error("Error fetching repository contents:", error);
+            parentElement.textContent = 'Failed to load repository structure.';
         }
     }
 
-    // Fetch the repository structure when the page loads
-    fetchRepoStructure();
+    // Initialize the structure on page load
+    document.addEventListener('DOMContentLoaded', () => {
+        const container = document.getElementById('repo-structure');
+        fetchContents(apiBaseUrl, container);
+    });
 </script>
 </body>
 </html>