Skip to content

Commit

Permalink
Update Project.html
Browse files Browse the repository at this point in the history
  • Loading branch information
Bacon_Space committed Jan 6, 2024
1 parent de3b7fa commit c6773d8
Showing 1 changed file with 105 additions and 26 deletions.
131 changes: 105 additions & 26 deletions Project.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TheBaconSpace's Profile</title>
<!-- Include Bootstrap 5.3.0 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://bootswatch.com/5/quartz/bootstrap.min.css" rel="stylesheet">
<!-- Include Font Awesome 6.4.2 CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<!-- Custom CSS for styling -->
Expand All @@ -16,7 +16,7 @@
background-color: #f5f5f5;
margin: 0;
padding: 0;
text-align: center;
text-align: -webkit-center;
}

header {
Expand Down Expand Up @@ -50,26 +50,6 @@
text-align: center;
padding: 10px 0;
}

/* Adjusted styling for the repository cards */
.card {
width: 18rem;
height: 25rem;
margin: 15px;
display: inline-block;
vertical-align: top;
}

.card-header {
background-color: #007bff;
color: #fff;
font-weight: bold;
}

.card-footer {
background-color: #f8f9fa;
color: #6c757d;
}
</style>
</head>

Expand All @@ -87,7 +67,7 @@ <h1>TheBaconSpace</h1>
<h1>TheBaconSpace's Repositories</h1>

<!-- Placeholder for the list of repositories -->
<div id="repo-cards">
<div id="repo-cards" class="row">
<!-- Repository cards will be dynamically added here using JavaScript -->
</div>
</div>
Expand All @@ -100,6 +80,31 @@ <h1>TheBaconSpace's Repositories</h1>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<!-- JavaScript to fetch and display GitHub repositories -->
<script>
// Function to generate a random color excluding unreadable colors and white
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
do {
color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
} while (isUnreadableColor(color) || color === '#FFFFFF'); // Exclude unreadable and white colors
return color;
}

// Function to check if a color is unreadable
function isUnreadableColor(hexColor) {
// Check if the color is too bright (light text on light background) or too dark (dark text on dark background)
const rgb = parseInt(hexColor.substring(1), 16);
const r = (rgb >> 16) & 0xff;
const g = (rgb >> 8) & 0xff;
const b = (rgb >> 0) & 0xff;

const brightness = (r * 299 + g * 587 + b * 114) / 1000;
return brightness > 200 || brightness < 50; // Modify these thresholds as needed
}

// Function to fetch social links from the specified JSON file
function fetchAndRenderSocialLinks() {
fetch("https://thebaconspace.github.io/links.json")
Expand Down Expand Up @@ -129,14 +134,88 @@ <h1>TheBaconSpace's Repositories</h1>
});
}

// Your existing JavaScript code here
// Function to fetch repositories from GitHub API and render cards
function fetchAndRenderRepositories() {
fetch('https://api.github.com/users/TheBaconSpace/repos')
.then(response => response.json())
.then(repos => {
// Select the container for repository cards
const repoCards = document.getElementById('repo-cards');

// Clear existing repository cards
repoCards.innerHTML = '';

// Iterate through the repositories and create cards
repos.forEach(repo => {
// Create card element
const card = document.createElement('div');
card.classList.add('card', 'mb-3', 'col-md-6');

// Include card header template
card.innerHTML = `
<h3 class="card-header">${repo.name}</h3>
<div class="card-body">
<h5 class="card-title">${repo.description || `Plugin For Fivem Server Called TheBaconSpace`}</h5>
<h6 class="card-subtitle text-muted"></h6>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
Stars
<span class="badge bg-primary rounded-pill">${repo.stargazers_count}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Watchers
<span class="badge bg-primary rounded-pill">${repo.watchers_count}</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
Forks
<span class="badge bg-primary rounded-pill">${repo.forks_count}</span>
</li>
</ul>
</div>
<svg xmlns="http://www.w3.org/2000/svg" class="d-block user-select-none" width="100%" height="200"
aria-label="${repo.name}" focusable="false" role="img" preserveAspectRatio="xMidYMid slice"
viewBox="0 0 318 180" style="font-size:1.125rem;text-anchor:middle">
<rect width="100%" height="100%" fill="${getRandomColor()}"></rect>
<text x="50%" y="50%" fill="#dee2e6" dy=".3em">${repo.name}</text>
</svg>
<ul class="list-group list-group-flush">
<li class="list-group-item">${repo.description || `Plugin For Fivem Server Called TheBaconSpace`}</li>
</ul>
<div class="card-body">
<a href="${repo.html_url}" class="card-link">Link</a>
</div>
<div class="card-footer text-muted" id="repo-created-at-${repo.id}"></div>
`;

// Format and set the created_at timestamp using Moment.js
const createdTimestamp = moment(repo.created_at).fromNow();
const createdAtElement = card.querySelector(`#repo-created-at-${repo.id}`);
createdAtElement.textContent = `Created ${createdTimestamp}`;

// Append the card to the container
repoCards.appendChild(card);
});
})
.catch(error => console.error('Error fetching repositories:', error));
}

// Fetch and render repositories initially
fetchAndRenderRepositories();
// Function to update the current year in the specified timezone
function updateCurrentYear() {
const currentYearElement = document.getElementById('current-year');
const timezone = 'America/Toronto'; // Specify your desired timezone here
const currentYear = new Date().toLocaleString('en-US', { timeZone: timezone, year: 'numeric' });
currentYearElement.textContent = `${currentYear}`;
}

// Fetch and render social links initially
fetchAndRenderSocialLinks();

// Fetch and render repositories initially
fetchAndRenderRepositories();

// Automatically refresh social links every 3 minutes (180,000 milliseconds)
setInterval(fetchAndRenderSocialLinks, 3 * 60 * 1000); // 3 minutes in milliseconds

// Update the current year
updateCurrentYear();
</script>
Expand Down

0 comments on commit c6773d8

Please sign in to comment.