Spaces:

Uvix
/

git-project-visualizer-deluxe

Running

App Files Files Community

Uvix commited on Nov 18, 2025

Commit

94ad5eb

verified ·

1 Parent(s): e1f1e4e

אתה מסוגל למשוך פרוייקט גיט ?

Browse files

Files changed (6) hide show

README.md +7 -4
components/footer.js +29 -0
components/navbar.js +32 -0
index.html +57 -19
script.js +157 -0
style.css +30 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Git Project Visualizer Deluxe
-emoji: 🐠
 colorFrom: gray
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: Git Project Visualizer Deluxe 🚀
 colorFrom: gray
+colorTo: green
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/footer.js ADDED Viewed

	@@ -0,0 +1,29 @@

+class CustomFooter extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .footer-link:hover {
+                    color: #3b82f6;
+                }
+            </style>
+            <footer class="bg-white border-t border-gray-200 py-6">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="md:flex md:justify-between">
+                        <div class="mb-4 md:mb-0">
+                            <p class="text-gray-500 text-sm">&copy; ${new Date().getFullYear()} Git Project Visualizer. All rights reserved.</p>
+                        </div>
+                        <div class="flex space-x-6">
+                            <a href="https://docs.github.com/en/rest" target="_blank" class="footer-link text-gray-500 hover:text-blue-600 text-sm">GitHub API Docs</a>
+                            <a href="https://github.com/public-apis/public-apis" target="_blank" class="footer-link text-gray-500 hover:text-blue-600 text-sm">Public APIs</a>
+                            <a href="https://github.com/hash3liZer/git-project-visualizer" target="_blank" class="footer-link text-gray-500 hover:text-blue-600 text-sm flex items-center">
+                                <i data-feather="github" class="mr-1"></i> Source
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </footer>
+        `;
+    }
+}
+customElements.define('custom-footer', CustomFooter);

components/navbar.js ADDED Viewed

	@@ -0,0 +1,32 @@

+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .nav-link:hover {
+                    color: #3b82f6;
+                }
+            </style>
+            <nav class="bg-white shadow-sm">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+                    <div class="flex justify-between h-16">
+                        <div class="flex">
+                            <div class="flex-shrink-0 flex items-center">
+                                <a href="index.html" class="font-bold text-xl text-gray-900 flex items-center">
+                                    <i data-feather="git-branch" class="mr-2"></i> GitViz
+                                </a>
+                            </div>
+                        </div>
+                        <div class="flex items-center space-x-4">
+                            <a href="index.html" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium">Home</a>
+                            <a href="https://github.com" target="_blank" class="nav-link text-gray-700 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium flex items-center">
+                                <i data-feather="github" class="mr-1"></i> GitHub
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html CHANGED Viewed

@@ -1,19 +1,57 @@
-<!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>Git Project Visualizer</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex flex-col">
+    <custom-navbar></custom-navbar>
+    <main class="flex-grow container mx-auto px-4 py-8">
+        <div class="max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
+            <h1 class="text-3xl font-bold text-gray-800 mb-6">Git Project Visualizer</h1>
+            <div class="mb-8">
+                <h2 class="text-xl font-semibold text-gray-700 mb-4">Enter GitHub Repository Details</h2>
+                <form id="repoForm" class="space-y-4">
+                    <div>
+                        <label for="username" class="block text-sm font-medium text-gray-700 mb-1">GitHub Username</label>
+                        <input type="text" id="username" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
+                    </div>
+                    <div>
+                        <label for="repo" class="block text-sm font-medium text-gray-700 mb-1">Repository Name</label>
+                        <input type="text" id="repo" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
+                    </div>
+                    <button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-6 rounded-md transition duration-200 flex items-center">
+                        <i data-feather="github" class="mr-2"></i> Fetch Repository
+                    </button>
+                </form>
+            </div>
+            <div id="loading" class="hidden text-center py-12">
+                <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500 mx-auto mb-4"></div>
+                <p class="text-gray-600">Fetching repository data...</p>
+            </div>
+            <div id="results" class="hidden">
+                <!-- Results will be displayed here -->
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="script.js"></script>
+    <script>
+        feather.replace();
+    </script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js ADDED Viewed

	@@ -0,0 +1,157 @@

+document.addEventListener('DOMContentLoaded', () => {
+    const repoForm = document.getElementById('repoForm');
+    const loading = document.getElementById('loading');
+    const results = document.getElementById('results');
+    repoForm.addEventListener('submit', async (e) => {
+        e.preventDefault();
+        const username = document.getElementById('username').value.trim();
+        const repo = document.getElementById('repo').value.trim();
+        if (!username || !repo) {
+            alert('Please enter both GitHub username and repository name');
+            return;
+        }
+        // Show loading indicator
+        loading.classList.remove('hidden');
+        results.classList.add('hidden');
+        try {
+            const response = await fetch(`https://api.github.com/repos/${username}/${repo}`);
+            if (!response.ok) {
+                throw new Error('Repository not found or API rate limit exceeded');
+            }
+            const data = await response.json();
+            displayResults(data, username, repo);
+            // Fetch README.md content
+            const readmeResponse = await fetch(`https://api.github.com/repos/${username}/${repo}/readme`, {
+                headers: {
+                    'Accept': 'application/vnd.github.v3.raw'
+                }
+            });
+            if (readmeResponse.ok) {
+                const readmeContent = await readmeResponse.text();
+                displayReadme(readmeContent);
+            }
+        } catch (error) {
+            results.innerHTML = `
+                <div class="bg-red-50 border-l-4 border-red-500 p-4 mb-6">
+                    <div class="flex">
+                        <div class="flex-shrink-0">
+                            <i data-feather="alert-circle" class="text-red-500"></i>
+                        </div>
+                        <div class="ml-3">
+                            <h3 class="text-sm font-medium text-red-800">Error fetching repository</h3>
+                            <div class="mt-2 text-sm text-red-700">
+                                <p>${error.message}</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            `;
+            feather.replace();
+        } finally {
+            loading.classList.add('hidden');
+            results.classList.remove('hidden');
+        }
+    });
+    function displayResults(data, username, repo) {
+        results.innerHTML = `
+            <div class="mb-8">
+                <div class="flex items-start">
+                    <img src="${data.owner.avatar_url}" alt="Avatar" class="w-16 h-16 rounded-full mr-4">
+                    <div>
+                        <h2 class="text-2xl font-bold text-gray-800">${data.name}</h2>
+                        <p class="text-gray-600 mb-2">${data.description || 'No description'}</p>
+                        <div class="flex flex-wrap gap-4 text-sm">
+                            <span class="flex items-center text-gray-600">
+                                <i data-feather="star" class="w-4 h-4 mr-1"></i> ${data.stargazers_count}
+                            </span>
+                            <span class="flex items-center text-gray-600">
+                                <i data-feather="eye" class="w-4 h-4 mr-1"></i> ${data.watchers_count}
+                            </span>
+                            <span class="flex items-center text-gray-600">
+                                <i data-feather="git-branch" class="w-4 h-4 mr-1"></i> ${data.forks_count}
+                            </span>
+                            <span class="flex items-center text-gray-600">
+                                <i data-feather="alert-circle" class="w-4 h-4 mr-1"></i> ${data.open_issues_count}
+                            </span>
+                            <a href="${data.html_url}" target="_blank" class="text-blue-600 hover:text-blue-800 flex items-center">
+                                <i data-feather="external-link" class="w-4 h-4 mr-1"></i> View on GitHub
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h3 class="font-semibold text-gray-700 mb-2">Repository Details</h3>
+                    <ul class="space-y-2">
+                        <li class="flex"><span class="text-gray-600 w-32">Language</span> ${data.language || 'Not specified'}</li>
+                        <li class="flex"><span class="text-gray-600 w-32">License</span> ${data.license?.name || 'Not specified'}</li>
+                        <li class="flex"><span class="text-gray-600 w-32">Created</span> ${new Date(data.created_at).toLocaleDateString()}</li>
+                        <li class="flex"><span class="text-gray-600 w-32">Last Updated</span> ${new Date(data.updated_at).toLocaleDateString()}</li>
+                        <li class="flex"><span class="text-gray-600 w-32">Size</span> ${Math.round(data.size / 1024)} MB</li>
+                        <li class="flex"><span class="text-gray-600 w-32">Default Branch</span> ${data.default_branch}</li>
+                    </ul>
+                </div>
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <h3 class="font-semibold text-gray-700 mb-2">Quick Links</h3>
+                    <div class="space-y-2">
+                        <a href="${data.html_url}/archive/refs/heads/${data.default_branch}.zip" class="flex items-center text-blue-600 hover:text-blue-800">
+                            <i data-feather="download" class="w-4 h-4 mr-2"></i> Download as ZIP
+                        </a>
+                        <a href="${data.html_url}/blob/${data.default_branch}/README.md" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800">
+                            <i data-feather="file-text" class="w-4 h-4 mr-2"></i> View README
+                        </a>
+                        <a href="${data.html_url}/issues" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800">
+                            <i data-feather="alert-circle" class="w-4 h-4 mr-2"></i> View Issues
+                        </a>
+                        <a href="${data.html_url}/pulls" target="_blank" class="flex items-center text-blue-600 hover:text-blue-800">
+                            <i data-feather="git-pull-request" class="w-4 h-4 mr-2"></i> View Pull Requests
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div id="readme-container" class="mb-8">
+                <h3 class="font-semibold text-gray-700 mb-4">README</h3>
+                <div class="bg-gray-50 p-4 rounded-lg">
+                    <div id="readme-content" class="prose max-w-none">
+                        Loading README...
+                    </div>
+                </div>
+            </div>
+        `;
+        feather.replace();
+    }
+    function displayReadme(content) {
+        const readmeContainer = document.getElementById('readme-content');
+        if (content) {
+            // Simple markdown to HTML conversion for basic formatting
+            let htmlContent = content
+                .replace(/^#\s(.+)$/gm, '<h1>$1</h1>')
+                .replace(/^##\s(.+)$/gm, '<h2>$1</h2>')
+                .replace(/^###\s(.+)$/gm, '<h3>$1</h3>')
+                .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+                .replace(/\*(.+?)\*/g, '<em>$1</em>')
+                .replace(/`(.+?)`/g, '<code>$1</code>')
+                .replace(/!\[(.*?)\]\((.*?)\)/g, '<img src="$2" alt="$1">')
+                .replace(/\[(.*?)\]\((.*?)\)/g, '<a href="$2" target="_blank">$1</a>');
+            readmeContainer.innerHTML = htmlContent;
+        } else {
+            readmeContainer.innerHTML = '<p class="text-gray-500">No README found for this repository.</p>';
+        }
+    }
+});

style.css CHANGED Viewed

@@ -1,28 +1,40 @@
 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;
 }

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 body {
+    font-family: 'Inter', sans-serif;
+}
+#readme-content {
+    word-wrap: break-word;
 }
+#readme-content img {
+    max-width: 100%;
+    height: auto;
+    margin: 1rem 0;
+    border-radius: 0.5rem;
 }
+#readme-content pre {
+    background-color: #f5f5f5;
+    padding: 1rem;
+    border-radius: 0.5rem;
+    overflow-x: auto;
+    margin: 1rem 0;
 }
+#readme-content code {
+    background-color: #f5f5f5;
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.25rem;
+    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
 }
+#readme-content a {
+    color: #3b82f6;
+    text-decoration: underline;
 }
+#readme-content a:hover {
+    color: #2563eb;
+}