Initial

jcordon5 · jcordon5 · commit b3ed9600b56f · 2025-11-02T18:20:15.000+01:00
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -0,0 +1,34 @@
+name: Deploy to GitHub Pages
+on:
+  push:
+    branches: [ main ]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      # No build: es sitio estático puro
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: .
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
diff --git a/.nojekyll b/.nojekyll
diff --git a/index.html b/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>GitHub Folder Downloader</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="container">
+    <h1>📁 GitHub Folder Downloader</h1>
+    <p>Paste a GitHub folder URL to download it as a ZIP.</p>
+    <input type="text" id="folderUrl" placeholder="https://github.com/user/repo/tree/branch/folder">
+    <button id="downloadBtn">Download Folder</button>
+    <div id="status"></div>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,63 @@
+async function fetchFolderContents(repo, branch, path) {
+    const apiUrl = `https://api.github.com/repos/${repo}/contents/${path}?ref=${branch}`;
+    const res = await fetch(apiUrl);
+    if (!res.ok) throw new Error(`Failed to fetch ${apiUrl}`);
+    return res.json();
+  }
+  
+  async function downloadFolder(repo, branch, path) {
+    const JSZip = window.JSZip;
+    const zip = new JSZip();
+  
+    async function addFilesToZip(folder, currentPath) {
+      for (const file of folder) {
+        if (file.type === 'file') {
+          const content = await fetch(file.download_url).then(r => r.blob());
+          zip.file(currentPath + file.name, content);
+        } else if (file.type === 'dir') {
+          const subFolder = await fetchFolderContents(repo, branch, file.path);
+          await addFilesToZip(subFolder, currentPath + file.name + '/');
+        }
+      }
+    }
+  
+    const rootFolder = await fetchFolderContents(repo, branch, path);
+    await addFilesToZip(rootFolder, '');
+  
+    const blob = await zip.generateAsync({ type: "blob" });
+    const a = document.createElement("a");
+    a.href = URL.createObjectURL(blob);
+    a.download = path.split('/').pop() + ".zip";
+    a.click();
+  }
+  
+  function parseGitHubUrl(url) {
+    const match = url.match(/github\.com\/([^\/]+\/[^\/]+)\/tree\/([^\/]+)\/(.+)/);
+    if (!match) throw new Error("Invalid GitHub folder URL");
+    return {
+      repo: match[1],
+      branch: match[2],
+      path: match[3]
+    };
+  }
+  
+  document.getElementById("downloadBtn").addEventListener("click", async () => {
+    const url = document.getElementById("folderUrl").value.trim();
+    const status = document.getElementById("status");
+    status.textContent = "⏳ Downloading...";
+  
+    try {
+      const { repo, branch, path } = parseGitHubUrl(url);
+      await downloadFolder(repo, branch, path);
+      status.textContent = "✅ Download complete!";
+    } catch (e) {
+      console.error(e);
+      status.textContent = "❌ " + e.message;
+    }
+  });
+  
+  // Load JSZip
+  const script = document.createElement("script");
+  script.src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js";
+  document.head.appendChild(script);
+  
diff --git a/style.css b/style.css
@@ -0,0 +1,37 @@
+body {
+    font-family: sans-serif;
+    background: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    padding-top: 50px;
+  }
+  
+  .container {
+    background: white;
+    padding: 2em;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0,0,0,0.1);
+    text-align: center;
+    max-width: 600px;
+    width: 100%;
+  }
+  
+  input {
+    width: 100%;
+    padding: 0.8em;
+    margin-top: 1em;
+    font-size: 1em;
+  }
+  
+  button {
+    margin-top: 1em;
+    padding: 0.8em 2em;
+    font-size: 1em;
+    cursor: pointer;
+  }
+  
+  #status {
+    margin-top: 1em;
+    color: #444;
+  }
+  
