Add friends links, add recent github activity and stats, add padding to bottom to show footer

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>

scripts/github-activity.js

@@ -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>`;
+}

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;
 }
@@ -191,4 +154,118 @@ a {
          background-color: #77777720;
       }
    }
+}
+
+/* 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;
+   }
 }

styles/styles.css

@@ -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;
+   }
 }