index.html

---
layout: default
---

<ul id="gist-list">Loading...</ul>
    <script>
        const username = "Andre-Tan"; // CHANGE THIS
        const gistAPI = `https://api.github.com/users/${username}/gists?per_page=10`; // fetch 10 to check if >5 exist

        fetch(gistAPI)
        .then(res => res.json())
        .then(gists => {
          const list = document.getElementById("gist-list");
          const moreLink = document.getElementById("more-link");
          list.innerHTML = "";

          gists.slice(0, 5).forEach(gist => {
            const desc = gist.description || "No description";
            const url = gist.html_url;
            const files = Object.keys(gist.files).join(", ");
            const date = gist.updated_at.slice(0, 10);

            const article = document.createElement("article");
            article.className = "gist-item";

            const title = document.createElement("h3");
            title.innerHTML = `<a href="${url}" target="_blank">${files}</a>`;

            const description = document.createElement("p");
            description.textContent = desc;

            const dateTag = document.createElement("small");
            dateTag.textContent = `Last updated: ${date}`;

            article.appendChild(title);
            article.appendChild(description);
            article.appendChild(dateTag);

            list.appendChild(article);
          });

          if (gists.length > 5) {
            moreLink.innerHTML = `<a class="button" href="https://gist.github.com/${username}" target="_blank">View all gists →</a>`;
          }
        })
        .catch(() => {
          document.getElementById("gist-list").innerHTML = "<li>Failed to load gists.</li>";
        });
        </script>
<div id="more-link"></div>

<style>
.gist-item {
  margin-bottom: 1.2em;
  border-bottom: 1px solid #eee;
  padding-bottom: 0.5em;
}

.gist-item h3 {
  font-size: 1.1rem;
  margin: 0 0 0.2em;
}

.gist-item p {
  font-size: 0.95rem;
  margin: 0.25em 0 0.5em;
}

.gist-item small {
  font-size: 0.8rem;
  color: #888;
  display: block;
  margin-top: 0.5em;
}
</style>