Initial Commit

public/js/projects.js

@@ -0,0 +1,64 @@
+async function fetchProjects() {
+  let repos = [];
+  let page = 1;
+  let perPage = 100;
+
+  try {
+    // Fetch all repositories using pagination
+    while (true) {
+      const response = await fetch(`/projects/fetch?page=${page}&per_page=${perPage}`);
+      const pageRepos = await response.json();
+
+      if (pageRepos.length === 0) {
+        break; // No more repos to fetch
+      }
+
+      repos = repos.concat(pageRepos);
+      page++;
+    }
+
+    // Function to truncate text with "..." only if necessary
+    function truncateText(text, maxLength) {
+      return text.length > maxLength ? text.slice(0, maxLength - 3) + '...' : text;
+    }
+
+    // Function to pad text with spaces to ensure proper column alignment
+    function padText(text, length) {
+      return text.padEnd(length, ' ');
+    }
+
+    // Function to dynamically pad the repo_id (install command) for alignment
+    function padRepoId(index) {
+      const id = index + 1; // Repo index starts from 1
+      return `/install.sh?repo_id=${id}`; // Removed the "example.com" part
+    }
+
+    // Column widths to match the HTML header size
+    const maxNameLength = 24; // Adjusted to ensure proper width
+    const maxDescriptionLength = 63; // Adjusted for consistency
+    const maxInstallCommandLength = 30; // Adjusted for the install command path
+
+    // Build table rows (without the header since it's in HTML)
+    const tableContent = repos.map((repo, index) => {
+      const name = padText(truncateText(repo.name || 'Unknown', maxNameLength), maxNameLength); // Pad and truncate name
+      const description = padText(truncateText(repo.description || 'No description', maxDescriptionLength), maxDescriptionLength); // Pad and truncate description
+
+      // Make the project name clickable, linking to the GitHub URL
+      const clickableName = `<a href="${repo.html_url}" class="clickable-repo" target="_blank">${name}</a>`;
+
+      // Curl install command dynamically generated based on the index with proper padding
+      const curlInstall = padText(padRepoId(index), maxInstallCommandLength);
+
+      // Return the formatted ASCII table row with the clickable project name
+      return `| ${clickableName} | ${description} | ${curlInstall} |`;
+    }).join('\n');
+
+    // Add the table rows to the pre-existing header and footer in HTML
+    document.getElementById('projects-table-content').innerHTML = tableContent; // Insert as HTML to preserve the clickable links
+  } catch (error) {
+    console.error('Error fetching projects:', error);
+  }
+}
+
+// Fetch projects when the page loads
+fetchProjects();