https://github.com/sudo-self/gitx
https://github.com/sudo-self/gitx
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/sudo-self/gitx
- Owner: sudo-self
- Created: 2024-02-16T08:01:00.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-18T13:54:43.000Z (over 2 years ago)
- Last Synced: 2025-01-24T14:47:00.142Z (over 1 year ago)
- Language: JavaScript
- Homepage: https://xplor.sudo-self.com
- Size: 1.19 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Security: SECURITY.md
Awesome Lists containing this project
README
### Domain xplor.sudo-self.com
### Vercel git-xplore.vercel.app
### App.js
```
import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import ReactDOM from 'react-dom';
import { useAuth0, Auth0Provider } from '@auth0/auth0-react';
import './App.css';
import { kv } from '@vercel/kv';
const App = () => {
const { loginWithRedirect, isAuthenticated, logout } = useAuth0();
const [username, setUsername] = useState('');
const [repositories, setRepositories] = useState([]);
const [following, setFollowing] = useState([]);
const [showRepoList, setShowRepoList] = useState(true);
const [selectedRepoURL, setSelectedRepoURL] = useState('');
const [views, setViews] = useState(0);
useEffect(() => {
const fetchData = async () => {
try {
// Fetch count value from KV storage
const views = await kv.get('views');
setViews(parseInt(views) || 0);
} catch (error) {
console.error('Error fetching count:', error);
}
};
fetchData();
}, []); // Empty dependency array means this effect runs once after the initial render
useEffect(() => {
const incrementViews = async () => {
try {
await kv.put('views', (views + 1).toString());
setViews(views + 1);
} catch (error) {
console.error('Error incrementing count:', error);
}
};
incrementViews();
}, [views]); // Increment view count whenever it changes
useEffect(() => {
const fetchFollowing = async () => {
try {
const followingResponse = await fetch(`https://api.github.com/users/${username}/following?per_page=50`);
const followingData = await followingResponse.json();
if (Array.isArray(followingData)) {
setFollowing(followingData);
} else {
console.error('Invalid following data:', followingData);
}
} catch (error) {
console.error('Error fetching following data:', error);
}
};
if (username) {
fetchFollowing();
}
}, [username]);
const debounce = (func, delay) => {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, delay);
};
};
const delayedFetchRepos = debounce(async () => {
try {
const reposResponse = await fetch(`https://api.github.com/users/${username}/repos?per_page=50`);
const reposData = await reposResponse.json();
const filteredRepos = reposData.filter(repo => repo.deployments_url);
setRepositories(filteredRepos);
setShowRepoList(true);
} catch (error) {
console.error('Error fetching data:', error);
}
}, 500); // Adjust debounce delay as needed
const handleInputChange = (event) => {
setUsername(event.target.value);
delayedFetchRepos();
};
const handleSubmit = (event) => {
event.preventDefault();
delayedFetchRepos();
};
const handleBackButtonClick = () => {
setShowRepoList(true);
setSelectedRepoURL('');
};
const handleRepoClick = (repoName) => {
setShowRepoList(false);
setSelectedRepoURL(`https://${username}.github.io/${repoName}`);
};
return (
{isAuthenticated ? (
logout({ returnTo: window.location.origin })}>Logout
) : (
Sign in
)}
{showRepoList ? (
git 🔍 Xplor {views}
view websites deployed with github pages
Search
Pages:
{repositories.map(repo => (
- handleRepoClick(repo.name)}>
{repo.name} - View Page
))}
) : (
Back
{selectedRepoURL && (
)}
)}
Followers:
{following.map(user => (
- {user.login}
))}
JR ❤ Auth0 React Vercel kv ©2024
);
};
ReactDOM.render(
,
document.getElementById('root')
);
export default App;
```
### Index.js
```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Auth0Provider } from '@auth0/auth0-react';
ReactDOM.render(
,
document.getElementById('root')
);
```
### Logo.svg
```
Created by potrace 1.10, written by Jesse Roper 2024
```
### npm install
### npm start
### App.css
```
body {
background-color: #cfe0f2; /* Set background color of the body */
margin: 0; /* Remove default body margin */
font-family: Arial, sans-serif; /* Specify a fallback font */
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
.logo {
width: 100px; /* Adjust width as needed */
height: auto;
color: #fff;
}
.App {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.github-link {
font-size: 18px;
color: #ffffff;
text-decoration: none;
}
.github-link:hover {
text-decoration: underline;
}
.card {
background-color: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Add a subtle box shadow */
margin-bottom: 20px; /* Add margin at the bottom */
}
```