Spaces:

GuaccO
/

githubsupabasesync-wizard

Running

App Files Files Community

GuaccO commited on Oct 27, 2025

Commit

40b4024

verified ·

1 Parent(s): 9de8b68

It doesnt connects me still to them, maybe can I upload files to make it easier?

Browse files

Files changed (5) hide show

README.md +8 -5
api/github-auth.js +51 -0
index.html +113 -19
script.js +115 -0
style.css +23 -19

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Githubsupabasesync Wizard
-emoji: 🔥
-colorFrom: blue
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: GitHubSupabaseSync Wizard 🧙
+colorFrom: red
+colorTo: pink
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

api/github-auth.js ADDED Viewed

	@@ -0,0 +1,51 @@

+import { createClient } from '@supabase/supabase-js';
+export default async function handler(req, res) {
+    if (req.method !== 'POST') {
+        return res.status(405).json({ message: 'Method not allowed' });
+    }
+    const { code } = req.body;
+    try {
+        // Exchange GitHub code for access token
+        const response = await fetch('https://github.com/login/oauth/access_token', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify({
+                client_id: process.env.GITHUB_CLIENT_ID,
+                client_secret: process.env.GITHUB_CLIENT_SECRET,
+                code,
+                redirect_uri: process.env.GITHUB_REDIRECT_URI
+            })
+        });
+        const data = await response.json();
+        if (data.error) {
+            throw new Error(data.error_description || 'GitHub authentication failed');
+        }
+        // Store the token in Supabase (optional)
+        const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY);
+        await supabase
+            .from('user_tokens')
+            .upsert({
+                user_id: req.session.user.id, // You'd need session management
+                github_token: data.access_token,
+                updated_at: new Date().toISOString()
+            });
+        res.status(200).json({
+            access_token: data.access_token,
+            token_type: data.token_type,
+            scope: data.scope
+        });
+    } catch (error) {
+        console.error('GitHub auth error:', error);
+        res.status(500).json({ message: error.message });
+    }
+}

index.html CHANGED Viewed

@@ -1,19 +1,113 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>GitHub ↔️ Supabase Connector</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-12">
+        <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8">
+            <div class="text-center mb-10">
+                <h1 class="text-3xl font-bold text-gray-800 mb-2">Connect GitHub ↔️ Supabase</h1>
+                <p class="text-gray-600">Seamlessly integrate your GitHub repositories with Supabase for automated deployments</p>
+            </div>
+            <div class="grid md:grid-cols-2 gap-8">
+                <!-- GitHub Connection -->
+                <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+                    <div class="flex items-center mb-4">
+                        <i data-feather="github" class="w-6 h-6 mr-2 text-gray-800"></i>
+                        <h2 class="text-xl font-semibold text-gray-800">GitHub Setup</h2>
+                    </div>
+                    <p class="text-gray-600 mb-4">Connect your GitHub account to enable repository access.</p>
+                    <button id="githubAuth" class="w-full bg-gray-800 hover:bg-gray-700 text-white py-2 px-4 rounded-lg flex items-center justify-center">
+                        <i data-feather="github" class="w-5 h-5 mr-2"></i>
+                        Connect GitHub
+                    </button>
+                    <div id="githubStatus" class="mt-4 text-sm text-gray-500 hidden">
+                        <i data-feather="check-circle" class="w-4 h-4 inline mr-1 text-green-500"></i>
+                        <span>Connected</span>
+                    </div>
+                </div>
+                <!-- Supabase Connection -->
+                <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+                    <div class="flex items-center mb-4">
+                        <i data-feather="database" class="w-6 h-6 mr-2 text-gray-800"></i>
+                        <h2 class="text-xl font-semibold text-gray-800">Supabase Setup</h2>
+                    </div>
+                    <div class="space-y-4">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Project URL</label>
+                            <input type="text" id="supabaseUrl" placeholder="https://your-project-ref.supabase.co" class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">API Key</label>
+                            <input type="password" id="supabaseKey" placeholder="your-anon-key" class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                        </div>
+                        <button id="supabaseConnect" class="w-full bg-indigo-600 hover:bg-indigo-700 text-white py-2 px-4 rounded-lg">
+                            Connect Supabase
+                        </button>
+                        <div id="supabaseStatus" class="text-sm text-gray-500 hidden">
+                            <i data-feather="check-circle" class="w-4 h-4 inline mr-1 text-green-500"></i>
+                            <span>Connected</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Configuration Panel (shown after both connected) -->
+            <div id="configPanel" class="mt-10 hidden">
+                <h2 class="text-xl font-semibold text-gray-800 mb-4">Configuration</h2>
+                <div class="bg-gray-50 p-6 rounded-lg border border-gray-200">
+                    <div class="grid md:grid-cols-2 gap-6">
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Select Repository</label>
+                            <select id="repoSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                                <option value="">Loading repositories...</option>
+                            </select>
+                        </div>
+                        <div>
+                            <label class="block text-sm font-medium text-gray-700 mb-1">Select Branch</label>
+                            <select id="branchSelect" class="w-full px-3 py-2 border border-gray-300 rounded-md" disabled>
+                                <option value="">Select repository first</option>
+                            </select>
+                        </div>
+                    </div>
+                    <div class="mt-4">
+                        <label class="block text-sm font-medium text-gray-700 mb-1">Deployment Hook URL</label>
+                        <input type="text" id="hookUrl" placeholder="https://api.supabase.com/v1/hooks/..." class="w-full px-3 py-2 border border-gray-300 rounded-md">
+                    </div>
+                    <button id="saveConfig" class="mt-6 bg-green-600 hover:bg-green-700 text-white py-2 px-6 rounded-lg">
+                        Save Configuration
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+        // Check for GitHub auth status
+        if (localStorage.getItem('githubToken')) {
+            document.getElementById('githubAuth').classList.add('hidden');
+            document.getElementById('githubStatus').classList.remove('hidden');
+        }
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,115 @@

+// Shared JavaScript across all pages
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Supabase client when page loads
+    let supabase = null;
+    // GitHub OAuth flow
+    document.getElementById('githubAuth').addEventListener('click', () => {
+        // Redirect to GitHub OAuth
+        window.location.href = `https://github.com/login/oauth/authorize?client_id=${encodeURIComponent('YOUR_GITHUB_CLIENT_ID')}&scope=${encodeURIComponent('repo,admin:repo_hook')}&redirect_uri=${encodeURIComponent(window.location.origin + '/auth/github/callback')}`;
+    });
+    // Supabase connection
+    document.getElementById('supabaseConnect').addEventListener('click', async () => {
+        const url = document.getElementById('supabaseUrl').value;
+        const key = document.getElementById('supabaseKey').value;
+        if (!url || !key) {
+            alert('Please enter both Supabase URL and API Key');
+            return;
+        }
+        try {
+            supabase = createClient(url, key);
+            // Test connection by making a simple request
+            const { data, error } = await supabase.from('profiles').select('*').limit(1);
+            if (error) throw error;
+            // Connection successful
+            document.getElementById('supabaseConnect').classList.add('hidden');
+            document.getElementById('supabaseStatus').classList.remove('hidden');
+            // If GitHub is also connected, show config panel
+            if (localStorage.getItem('githubToken')) {
+                document.getElementById('configPanel').classList.remove('hidden');
+                loadRepositories();
+            }
+        } catch (error) {
+            alert('Supabase connection failed: ' + error.message);
+        }
+    });
+// Repository selection
+    document.getElementById('repoSelect').addEventListener('change', (e) => {
+        if (e.target.value) {
+            simulateLoadBranches(e.target.value);
+        }
+    });
+    // Save configuration
+    document.getElementById('saveConfig').addEventListener('click', () => {
+        const repo = document.getElementById('repoSelect').value;
+        const branch = document.getElementById('branchSelect').value;
+        const hookUrl = document.getElementById('hookUrl').value;
+        if (repo && branch && hookUrl) {
+            alert('Configuration saved successfully!');
+            // In a real app, this would save to your backend or Supabase
+        } else {
+            alert('Please complete all configuration fields');
+        }
+    });
+});
+async function loadRepositories() {
+    try {
+        const response = await fetch('https://api.github.com/user/repos', {
+            headers: {
+                'Authorization': `token ${localStorage.getItem('githubToken')}`
+            }
+        });
+        if (!response.ok) throw new Error('Failed to fetch repositories');
+        const repos = await response.json();
+        const select = document.getElementById('repoSelect');
+        select.innerHTML = '<option value="">Select a repository</option>';
+        repos.forEach(repo => {
+            const option = document.createElement('option');
+            option.value = repo.full_name;
+            option.textContent = repo.name;
+            select.appendChild(option);
+        });
+        select.disabled = false;
+    } catch (error) {
+        alert('Error loading repositories: ' + error.message);
+    }
+}
+// Handle GitHub OAuth callback
+if (window.location.pathname === '/auth/github/callback') {
+    const code = new URLSearchParams(window.location.search).get('code');
+    if (code) {
+        // Exchange code for access token
+        fetch('/api/github-auth', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({ code })
+        })
+        .then(response => response.json())
+        .then(data => {
+            localStorage.setItem('githubToken', data.access_token);
+            window.location.href = '/'; // Redirect back to main page
+        })
+        .catch(error => {
+            console.error('GitHub auth failed:', error);
+            alert('GitHub authentication failed');
+        });
+    }
+}
+function checkConnectionStatus() {
+    const githubConnected = !document.getElementById('github

style.css CHANGED Viewed

@@ -1,28 +1,32 @@
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 }
-h1 {
-	font-size: 16px;
-	margin-top: 0;
 }
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
 }
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
 }
-.card p:last-child {
-	margin-bottom: 0;
-}

+/* Shared styles across all pages */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
 }
+/* Button transitions */
+button {
+    transition: all 0.2s ease-in-out;
 }
+/* Input focus styles */
+input:focus, select:focus {
+    outline: none;
+    ring: 2px;
+    ring-color: rgba(99, 102, 241, 0.5);
+    border-color: rgba(99, 102, 241, 0.8);
 }
+/* Animation for status messages */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(5px); }
+    to { opacity: 1; transform: translateY(0); }
 }
+.status-message {
+    animation: fadeIn 0.3s ease-out;
+}