index-token.html

<!DOCTYPE html>
<html>
<head>
    <title>GitHub Repo Reader</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f2f2f2;
        }

        h1 {
            color: #333;
            border-bottom: 1px solid #ccc;
            padding-bottom: 10px;
        }

        input {
            margin-top: 10px;
            padding: 10px;
            width: 300px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        button {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #0056b3;
        }

        #output {
            margin-top: 30px;
            padding: 15px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        #output h2 {
            color: #007bff;
            margin-top: 20px;
        }

        pre {
            background-color: #f9f9f9;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>GitHub Repo Reader</h1>

    <input type="text" id="repoInput" placeholder="Enter repo link or name">
    <input type="text" id="fileFilter" placeholder="Enter file filter (optional)">
    <input type="text" id="fileUnselect" placeholder="Enter file unselect filter (optional)">
    <input type="password" id="tokenInput" placeholder="Enter GitHub Token (optional)">

    <button onclick="getRepoContent()">Get Repo Content</button>
    <button onclick="copyToClipboard()" style="display:none;" id="copyBtn">Copy to Clipboard</button>

    <div id="output"></div>

    <script>
        function escapeHTML(text) {
            const map = {
                '<': '&lt;',
                '>': '&gt;',
                '&': '&amp;',
                '"': '&quot;',
                "'": '&#039;'
            };

            return text.replace(/[<>&"']/g, function(m) { return map[m]; });
        }

        async function getRepoContent() {
            const repoInput = document.getElementById('repoInput').value;
            const pathFilter = document.getElementById('fileFilter').value;
            const token = document.getElementById('tokenInput').value;
            const outputDiv = document.getElementById('output');
            const copyBtn = document.getElementById('copyBtn');

            let [_, owner, repo, ...path] = repoInput.split('/').filter(Boolean);
            if (repoInput.startsWith('https://')) {
                [_, _, owner, repo, ...path] = repoInput.split('/').filter(Boolean);
            }
            if (!owner || !repo) {
                alert('Invalid input. Please input a complete GitHub URL or "owner/repo" format');
                return;
            }
            const apiBaseUrl = 'https://api.github.com/repos';
            let url = `${apiBaseUrl}/${owner}/${repo}/contents/${path.join('/')}`;

            outputDiv.innerHTML = '';

            await fetchRepoContent(url, pathFilter, outputDiv, token);

            copyBtn.style.display = 'block';
        }

        async function fetchRepoContent(url, pathFilter, outputDiv, token) {
            const unselectFilter = document.getElementById('fileUnselect').value;  // Get the unselect filter
            const skipFolders = ['node_modules', 'dist']; // Example folders to skip
            const headers = token ? { 'Authorization': `token ${token}` } : {};
            let response = await fetch(url, { headers: headers });
            let data = await response.json();

            if (!Array.isArray(data)) {
                alert(`Error fetching repo content: ${data.message}`);
                return;
            }

            for (let item of data) {
                if (item.type === 'dir') {
                    // Skip the folder if its name matches any in the skipFolders array
                    if (skipFolders.some(folder => item.path.includes(folder))) {
                        continue; // Skip this folder and continue with the next item
                    }
                    await fetchRepoContent(item.url, pathFilter, outputDiv, token);
                } else if (item.type === 'file' && (pathFilter === '' || item.path.includes(pathFilter)) && !(unselectFilter !== '' && item.path.includes(unselectFilter))) {
                    // Check against unselectFilter
                    let fileResponse = await fetch(item.git_url, { headers: headers });
                    let fileData = await fileResponse.json();
                    let fileContent = atob(fileData.content);
                    let binaryString = Uint8Array.from(atob(fileData.content), c => c.charCodeAt(0));
                    let textDecoder = new TextDecoder('utf-8');
                    let decodedContent = textDecoder.decode(binaryString);
                    let escapedContent = escapeHTML(decodedContent);

                    outputDiv.innerHTML += `<h2>${item.path}</h2>
                                            <pre><code>${escapedContent}</code></pre>`;
                }
            }
        }

        function copyToClipboard() {
            const outputDiv = document.getElementById('output');
            const textToCopy = outputDiv.innerText;

            let tempTextArea = document.createElement('textarea');
            tempTextArea.value = textToCopy;
            document.body.appendChild(tempTextArea);
            tempTextArea.select();
            document.execCommand('copy');
            document.body.removeChild(tempTextArea);

            alert('Content copied to clipboard');
        }
    </script>
</body>
</html>