mirror of
https://github.com/hnasheralneam/hnasheralneam.github.io.git
synced 2025-06-06 13:24:16 -04:00
Add friends links, add recent github activity and stats, add padding to bottom to show footer
This commit is contained in:
parent
3b02e5258c
commit
5223d7c38c
4 changed files with 268 additions and 50 deletions
34
index.html
34
index.html
|
|
@ -23,6 +23,7 @@
|
|||
<div>
|
||||
<h2 id="about-me">About me</h2>
|
||||
<p>When not doing student things, I enjoy writing unoptimized JavaScript code and messing around with Linux on desktop and server. Over the summer, I plan on working on projects, connecting with people, and getting employed.</p>
|
||||
<p class="github-stats"></p>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
|
|
@ -65,7 +66,37 @@
|
|||
<button onclick="resetTheme()">Reset</button>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
<br>
|
||||
<div>
|
||||
<h2>Friends</h2>
|
||||
<div class="people">
|
||||
<div class="person">
|
||||
<h4>Urdons</h4>
|
||||
<a href="https://burdne.com/">Website</a>
|
||||
<a href="https://github.com/Urdons">GitHub</a>
|
||||
</div>
|
||||
<div class="person">
|
||||
<h4>Sai</h4>
|
||||
<a href="https://github.com/devsai9">GitHub</a>
|
||||
</div>
|
||||
<div class="person">
|
||||
<h4>Kai</h4>
|
||||
<a href="https://github.com/grekand46">GitHub</a>
|
||||
</div>
|
||||
<div class="person">
|
||||
<h4>Raiyan Zaman</h4>
|
||||
<a href="https://raiyantech.com/">Website</a>
|
||||
<a href="https://github.com/rzaman8677">GitHub</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<div>
|
||||
<h2 id="recent-github-activity">Recent GitHub Activity</h2>
|
||||
<div class="github-actions"></div>
|
||||
<button style="display: block; margin: auto" onclick="showAllActions(); this.remove()">Show all</button>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
</div>
|
||||
<br><br>
|
||||
|
|
@ -78,4 +109,5 @@
|
|||
<script src="https://hnasheralneam.github.io/digit/main.js"></script>
|
||||
<script defer src="https://umami.hnasheralneam.dev/script.js"
|
||||
data-website-id="22e45953-378d-4e42-afe7-b31c197d3105"></script>
|
||||
<script src="scripts/github-activity.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
112
scripts/github-activity.js
Normal file
112
scripts/github-activity.js
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
let statsElement = document.querySelector(".github-actions");
|
||||
|
||||
let userData;
|
||||
let userEvents;
|
||||
|
||||
getUserInfo();
|
||||
getEvents();
|
||||
|
||||
async function getUserInfo() {
|
||||
try {
|
||||
const response = await fetch(`https://api.github.com/users/hnasheralneam`);
|
||||
if (response.ok) {
|
||||
userData = await response.json();
|
||||
showData();
|
||||
}
|
||||
else console.error("Failed to fetch user data. Status:", response.status, response);
|
||||
}
|
||||
catch (error) { console.error("Failed to request user data. Error - ", error); }
|
||||
}
|
||||
async function getEvents() {
|
||||
try {
|
||||
const response = await fetch(`https://api.github.com/users/hnasheralneam/events`);
|
||||
if (response.ok) {
|
||||
userEvents = await response.json();
|
||||
showEvents();
|
||||
}
|
||||
else console.error("Failed to fetch user data. Status:", response.status, response);
|
||||
}
|
||||
catch (error) { console.error("Failed to request user data. Error - ", error); }
|
||||
}
|
||||
|
||||
function showData() {
|
||||
document.querySelector(".github-stats").innerHTML = "GitHub stats: <i>" + userData.followers + " followers - " + userData.following + " following - " + userData.public_repos + " repositories </i>";
|
||||
}
|
||||
function showEvents() {
|
||||
const eventsToShow = userEvents.slice(0, 3);
|
||||
renderEvents(eventsToShow);
|
||||
}
|
||||
function showAllActions() {
|
||||
renderEvents(userEvents);
|
||||
}
|
||||
|
||||
function renderEvents(eventsToDisplay) {
|
||||
let eventsHtml = '<div class="github-events-container">';
|
||||
eventsToDisplay.forEach(event => {
|
||||
if (event) { // Ensure event is not null/undefined
|
||||
eventsHtml += showAction(event);
|
||||
}
|
||||
});
|
||||
eventsHtml += '</div>';
|
||||
statsElement.innerHTML = eventsHtml;
|
||||
}
|
||||
|
||||
function showAction(action) {
|
||||
const type = action.type.replace("Event", "");
|
||||
const repoName = action.repo.name;
|
||||
const repoUrl = `https://github.com/${repoName}`;
|
||||
const eventTime = new Date(action.created_at);
|
||||
let details = `<dt>Repository:</dt><dd><a href="${repoUrl}" target="_blank" rel="noopener noreferrer">${repoName}</a></dd>`;
|
||||
|
||||
switch (type) {
|
||||
case "Issues":
|
||||
details += `<dt>Action:</dt><dd>${action.payload.action}</dd>`;
|
||||
details += `<dt>Title:</dt><dd>${action.payload.issue.title}</dd>`;
|
||||
details += `<dt>Issue:</dt><dd><a href="${action.payload.issue.html_url}" target="_blank" rel="noopener noreferrer">#${action.payload.issue.number}</a></dd>`;
|
||||
break;
|
||||
case "IssueComment":
|
||||
details += `<dt>Action:</dt><dd>${action.payload.action} comment</dd>`;
|
||||
if (action.payload.issue) {
|
||||
details += `<dt>On Issue:</dt><dd><a href="${action.payload.issue.html_url}" target="_blank" rel="noopener noreferrer">#${action.payload.issue.number} (${action.payload.issue.title})</a></dd>`;
|
||||
}
|
||||
details += `<dt>Comment:</dt><dd class="event-comment-body">${action.payload.comment.body.substring(0, 150)}${action.payload.comment.body.length > 150 ? '...' : ''}</dd>`;
|
||||
break;
|
||||
case "PullRequest":
|
||||
details += `<dt>Action:</dt><dd>${action.payload.action}</dd>`;
|
||||
details += `<dt>Pull Request:</dt><dd><a href="${action.payload.pull_request.html_url}" target="_blank" rel="noopener noreferrer">#${action.payload.pull_request.number}</a></dd>`;
|
||||
details += `<dt>Title:</dt><dd>${action.payload.pull_request.title}</dd>`;
|
||||
break;
|
||||
case "Create":
|
||||
details += `<dt>Type:</dt><dd>Created ${action.payload.ref_type}</dd>`;
|
||||
if (action.payload.ref) {
|
||||
details += `<dt>Name:</dt><dd>${action.payload.ref}</dd>`;
|
||||
}
|
||||
break;
|
||||
case "Push":
|
||||
details += `<dt>Branch:</dt><dd>${action.payload.ref.replace("refs/heads/", "")}</dd>`;
|
||||
details += `<dt>Commits:</dt><dd>${action.payload.commits.length}</dd>`;
|
||||
// Optionally list first few commit messages
|
||||
if (action.payload.commits && action.payload.commits.length > 0) {
|
||||
details += `<dt>Recent Commit:</dt><dd>${action.payload.commits[0].message.split('\n')[0]}</dd>`;
|
||||
}
|
||||
break;
|
||||
case "Watch":
|
||||
details += `<dt>Action:</dt><dd>${action.payload.action} (starred)</dd>`;
|
||||
break;
|
||||
case "Fork":
|
||||
details += `<dt>Forked To:</dt><dd><a href="${action.payload.forkee.html_url}" target="_blank" rel="noopener noreferrer">${action.payload.forkee.full_name}</a></dd>`;
|
||||
break;
|
||||
default:
|
||||
details += `<dt>Details:</dt><dd>Unhandled event type.</dd>`;
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="github-event-card">
|
||||
<h4 class="event-type">
|
||||
${type}
|
||||
<time class="event-time" datetime="${eventTime.toISOString()}">${eventTime.toLocaleString()}</time>
|
||||
</h4>
|
||||
<dl class="event-details">${details}</dl>
|
||||
<p class="event-time"></p>
|
||||
</div>`;
|
||||
}
|
||||
151
styles/home.css
151
styles/home.css
|
|
@ -84,43 +84,6 @@ a {
|
|||
color: var(--theme-color);
|
||||
}
|
||||
|
||||
.thoughts-preview a {
|
||||
color: initial;
|
||||
text-decoration: initial;
|
||||
}
|
||||
|
||||
.thoughts-bit p {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.thoughts-bit {
|
||||
padding: 1rem;
|
||||
border-radius: .5em;
|
||||
margin: .4rem 1rem;
|
||||
border: solid transparent .2rem;
|
||||
transition: .25s;
|
||||
}
|
||||
|
||||
.thoughts-bit:hover {
|
||||
background-color: #aaaaaa20;
|
||||
border-color: var(--theme-color);
|
||||
}
|
||||
|
||||
.thoughts-bit:hover h4 {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.thoughts {
|
||||
margin: 2rem 2rem 0 0;
|
||||
float: right;
|
||||
color: #888;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
font-size: 1.5rem;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.funsies {
|
||||
padding: .5rem 2rem;
|
||||
}
|
||||
|
|
@ -192,3 +155,117 @@ a {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* People */
|
||||
.people {
|
||||
margin: 0 2rem;
|
||||
}
|
||||
.person {
|
||||
display: inline-block;
|
||||
border: solid .15rem;
|
||||
border-color: #444;
|
||||
background-color: #2a2a2a;
|
||||
width: 12rem;
|
||||
border-radius: .5rem;
|
||||
margin: .4rem .1rem;
|
||||
padding: .6rem .7rem .8rem .7rem;
|
||||
text-align: center;
|
||||
}
|
||||
.person h4 {
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
.person a {
|
||||
margin: .4rem .1rem;
|
||||
padding: .2rem .4rem;
|
||||
background-color: var(--theme-color);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: .2rem;
|
||||
transition: .2s;
|
||||
text-shadow: 0 0 .05rem #000;
|
||||
}
|
||||
.person a:hover {
|
||||
background-color: #fff;
|
||||
color: var(--theme-color);
|
||||
text-shadow: 0 0 .05rem #000;
|
||||
}
|
||||
|
||||
|
||||
/* Recent github actions */
|
||||
.github-actions {
|
||||
font-size: 0.9em;
|
||||
line-height: 1.6;
|
||||
margin: 1rem 2rem;
|
||||
}
|
||||
|
||||
.github-event-card {
|
||||
border: .15rem solid #ddd;
|
||||
border-radius: .5rem;
|
||||
padding: 5px 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
|
||||
.github-event-card .event-type {
|
||||
margin: 5px 0;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.github-event-card .event-details dt {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
float: left;
|
||||
width: 120px;
|
||||
clear: left;
|
||||
}
|
||||
|
||||
.github-event-card .event-details dd {
|
||||
margin-left: 130px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.github-event-card .event-comment-body {
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-size: 0.9em;
|
||||
padding: 5px;
|
||||
max-height: 100px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.github-event-card .event-time {
|
||||
font-size: 0.8em;
|
||||
color: #777;
|
||||
margin-left: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px) {
|
||||
.github-event-card .event-details dt {
|
||||
width: 80px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.github-event-card .event-details dd {
|
||||
margin-left: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.github-event-card {
|
||||
border-color: #444;
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.github-event-card .event-details dt {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.github-event-card .event-details dd {
|
||||
color: #bbb;
|
||||
}
|
||||
|
||||
.github-event-card .event-time {
|
||||
color: #777;
|
||||
}
|
||||
}
|
||||
|
|
@ -65,18 +65,6 @@ a {
|
|||
color: #bbb;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 750px) {
|
||||
.footer {
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.footer {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -151,6 +139,11 @@ a {
|
|||
margin: auto 1rem;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-template-columns: auto;
|
||||
padding: 3rem 1rem 6rem 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
|
|
@ -162,4 +155,8 @@ a {
|
|||
.menu .item img {
|
||||
filter: none;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue