☰

Github Gist Compact View (With Private Gists)

Displays Gists (including private ones) in a compact view with clickable links, visibility status, and last update date

  1. // ==UserScript==
  2. // @name         Github Gist Compact View (With Private Gists)
  3. // @namespace    http://tampermonkey.net/
  4. // @version      2.0
  5. // @description  Displays Gists (including private ones) in a compact view with clickable links, visibility status, and last update date
  6. // @author       Sergi0
  7. // @match        https://gist.github.com/*
  8. // @grant        none
  9. // @icon         https://gist.github.com/favicon.ico
  10. // @license      MIT
  11. // @homepageURL  https://greasyfork.org/en/scripts/529737-github-gist-compact-view
  12. // @supportURL   https://greasyfork.org/en/scripts/529737-github-gist-compact-view/feedback
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.     'use strict';
  17.  
  18.     console.log("UserScript GitHub Gist Compact View started...");
  19.  
  20.     // Replace with your personal access token (PAT)
  21.     const personalAccessToken = 'YOUR_PERSONAL_ACCESS_TOKEN_HERE';
  22.  
  23.     // Wait until the page has fully loaded
  24.     window.addEventListener('load', () => {
  25.  
  26.         // Extract the username from the URL
  27.         const pathParts = window.location.pathname.split("/").filter(Boolean);
  28.         const username = pathParts.length > 0 ? pathParts[0] : null;
  29.  
  30.         if (!username) {
  31.             console.warn("No username found in the URL.");
  32.             return;
  33.         }
  34.  
  35.         console.log(`Detected user: ${username}`);
  36.  
  37.         // Function to load the Gists and display them in the container
  38.         function loadGists() {
  39.             fetch(`https://api.github.com/users/${username}/gists`, {
  40.                 method: 'GET',
  41.                 headers: {
  42.                     'Authorization': `token ${personalAccessToken}` // Authenticate with the token
  43.                 }
  44.             })
  45.             .then(response => {
  46.                 if (!response.ok) {
  47.                     throw new Error(`Request error: ${response.status} ${response.statusText}`);
  48.                 }
  49.                 return response.json();
  50.             })
  51.             .then(gists => {
  52.                 if (gists.length === 0) {
  53.                     console.warn("The user has no Gists.");
  54.                     return;
  55.                 }
  56.  
  57.                 // Find the container to display the information
  58.                 const container = document.querySelector("#gist-pjax-container > div > div > div.col-9.col-md-9.col-12");
  59.  
  60.                 if (!container) {
  61.                     console.warn("Container not found.");
  62.                     return;
  63.                 }
  64.  
  65.                 // Clear the container
  66.                 container.innerHTML = "";
  67.  
  68.                 // Create a new container for the Gists
  69.                 const newContainer = document.createElement("div");
  70.                 newContainer.className = "custom-gist-container";
  71.                 newContainer.innerHTML = `<h3>Gists of ${username} (${gists.length})</h3><ul>`;
  72.  
  73.                 // Add each Gist as a clickable link with visibility and last update date
  74.                 gists.forEach(gist => {
  75.                     const listItem = document.createElement("li");
  76.                     const gistLink = document.createElement("a");
  77.                     gistLink.href = gist.html_url;
  78.                     gistLink.target = "_blank"; // Open link in a new tab
  79.                     gistLink.textContent = gist.description || "No description";
  80.                     
  81.                     // Determine visibility (public or private)
  82.                     const visibility = gist.public ? 'Public' : 'Private';
  83.  
  84.                     // Get the last update date or creation date
  85.                     const lastUpdated = new Date(gist.updated_at);
  86.                     const lastUpdatedDate = lastUpdated.toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' });
  87.  
  88.                     // Append visibility and last update date
  89.                     listItem.innerHTML = `
  90.                         ${gistLink.outerHTML} 
  91.                         <span>(${visibility})</span> 
  92.                         <span>Last updated: ${lastUpdatedDate}</span>
  93.                     `;
  94.                     newContainer.appendChild(listItem);
  95.                 });
  96.  
  97.                 // Close the list and insert the new container into the page
  98.                 newContainer.innerHTML += "</ul>";
  99.                 container.appendChild(newContainer);
  100.                 console.log("New Gist view successfully inserted.");
  101.             })
  102.             .catch(error => console.error("Error loading Gists:", error));
  103.         }
  104.  
  105.         // Execute the function to load Gists
  106.         loadGists();
  107.     });
  108.  
  109. })();