Transform GitHub repositories into beautiful grid cards with README preview on hover
// ==UserScript==
// @name GitHub Repos Enhanced (Grid Layout + README Preview)
// @namespace http://tampermonkey.net/
// @version 2.0
// @description Transform GitHub repositories into beautiful grid cards with README preview on hover
// @author You
// @match https://github.com/*?tab=repositories*
// @match https://github.com/*/*
// @icon https://github.githubassets.com/favicons/favicon.svg
// @require https://code.jquery.com/jquery-3.6.0.min.js
// @grant GM_addStyle
// @license MIT
// ==/UserScript==
(function() {
'use strict';
// === GitHub Token 設定（選填，避免 API 限制） ===
const GITHUB_TOKEN = "";
// 添加 CSS 樣式
GM_addStyle(`
/* Grid Container */
#repo-grid-container {
display: grid;
gap: 20px;
padding: 20px;
transition: all 0.3s ease;
}
#repo-grid-container.cols-1 { grid-template-columns: repeat(1, 1fr); }
#repo-grid-container.cols-2 { grid-template-columns: repeat(2, 1fr); }
#repo-grid-container.cols-3 { grid-template-columns: repeat(3, 1fr); }
#repo-grid-container.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* 響應式設計 */
@media (max-width: 1400px) {
#repo-grid-container.cols-4 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1024px) {
#repo-grid-container.cols-4,
#repo-grid-container.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
#repo-grid-container { grid-template-columns: repeat(1, 1fr) !important; }
}
/* Card 樣式 */
.repo-card {
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
height: 100%;
position: relative;
overflow: hidden;
}
.repo-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(31, 35, 40, 0.15);
border-color: #0969da;
}
.repo-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, #0969da, #1a7f37);
opacity: 0;
transition: opacity 0.3s ease;
}
.repo-card:hover::before {
opacity: 1;
}
/* 標題 */
.repo-card-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 12px;
color: #0969da;
text-decoration: none;
display: flex;
align-items: center;
gap: 8px;
}
.repo-card-title:hover {
text-decoration: underline;
}
/* 描述 */
.repo-card-description {
color: #57606a;
font-size: 14px;
margin-bottom: 16px;
flex-grow: 1;
line-height: 1.5;
}
/* 底部資訊 */
.repo-card-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
font-size: 12px;
color: #57606a;
padding-top: 12px;
border-top: 1px solid #d0d7de;
}
.repo-card-language {
display: flex;
align-items: center;
gap: 6px;
}
.language-color {
width: 12px;
height: 12px;
border-radius: 50%;
}
.repo-card-stars {
display: flex;
align-items: center;
gap: 4px;
}
/* Badge 樣式 - 柔和配色 */
.repo-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 12px;
font-size: 11px;
font-weight: 500;
border: 1px solid;
}
.repo-badge.public {
color: #1a7f37;
border-color: #1a7f37;
background: #dafbe1;
}
.repo-badge.private {
color: #bf8700;
border-color: #bf8700;
background: #fff8c5;
}
/* Layout 下拉選單樣式 */
#grid-layout-dropdown {
display: inline-block;
position: relative;
margin-left: 8px;
}
#grid-layout-dropdown summary {
list-style: none;
cursor: pointer;
}
#grid-layout-dropdown summary::-webkit-details-marker {
display: none;
}
.grid-layout-menu {
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 8px;
box-shadow: 0 8px 24px rgba(31, 35, 40, 0.15);
min-width: 140px;
z-index: 1000;
}
.grid-layout-menu ul {
padding: 4px;
}
.grid-layout-menu-item {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 10px;
border-radius: 4px;
cursor: pointer;
transition: background 0.15s ease;
position: relative;
}
.grid-layout-menu-item:hover {
background: #f6f8fa;
}
.grid-layout-menu-item.active {
background: #ddf4ff;
}
.grid-layout-menu-item > svg:first-child {
width: 14px;
height: 14px;
flex-shrink: 0;
color: #57606a;
}
.grid-layout-menu-item.active > svg:first-child {
color: #0969da;
}
.grid-layout-menu-item-text {
flex: 1;
font-size: 13px;
color: #24292f;
font-weight: 400;
}
.grid-layout-menu-item.active .grid-layout-menu-item-text {
font-weight: 500;
color: #0969da;
}
.grid-layout-menu-item-check {
width: 14px;
height: 14px;
color: #0969da;
opacity: 0;
transition: opacity 0.15s ease;
}
.grid-layout-menu-item.active .grid-layout-menu-item-check {
opacity: 1;
}
/* 浮動控制面板（備用方案） */
#grid-control-panel {
display: none;
position: fixed;
bottom: 30px;
right: 30px;
background: #ffffff;
border: 1px solid #d0d7de;
border-radius: 16px;
padding: 16px;
box-shadow: 0 8px 32px rgba(31, 35, 40, 0.15);
z-index: 10000;
}
#grid-control-panel h3 {
margin: 0 0 12px 0;
font-size: 14px;
color: #24292f;
font-weight: 600;
}
.grid-buttons {
display: flex;
gap: 8px;
}
.grid-btn {
padding: 8px 16px;
background: #f6f8fa;
border: 1px solid #d0d7de;
border-radius: 8px;
color: #24292f;
cursor: pointer;
transition: all 0.2s ease;
font-size: 13px;
font-weight: 500;
}
.grid-btn:hover {
background: #ffffff;
border-color: #0969da;
color: #0969da;
}
.grid-btn.active {
background: #0969da;
border-color: #0969da;
color: white;
}
/* ============ README Preview 樣式 ============ */
.repo-preview {
position: absolute;
z-index: 9999;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 16px;
padding: 24px;
width: 700px;
max-height: 500px;
overflow: auto;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15),
0 3px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9);
display: none;
font-size: 13px;
line-height: 1.7;
border: 1px solid rgba(0, 0, 0, 0.08);
opacity: 0;
transform: translateY(-10px) scale(0.95);
transition: opacity 0.2s ease, transform 0.2s ease;
backdrop-filter: blur(10px);
}
.repo-preview.show {
opacity: 1;
transform: translateY(0) scale(1);
}
.repo-preview::-webkit-scrollbar {
width: 8px;
}
.repo-preview::-webkit-scrollbar-track {
background: rgba(0, 0, 0, 0.05);
border-radius: 10px;
}
.repo-preview::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.2);
border-radius: 10px;
}
.repo-preview::-webkit-scrollbar-thumb:hover {
background: rgba(0, 0, 0, 0.3);
}
.repo-preview * {
transform: scale(0.92);
transform-origin: left top;
}
.repo-preview h1 {
font-size: 28px;
margin-top: 0;
margin-bottom: 16px;
color: #24292f;
font-weight: 600;
border-bottom: 2px solid #e1e4e8;
padding-bottom: 10px;
}
.repo-preview h2 {
font-size: 22px;
margin-top: 24px;
margin-bottom: 12px;
color: #24292f;
font-weight: 600;
border-bottom: 1px solid #e1e4e8;
padding-bottom: 8px;
}
.repo-preview h3 {
font-size: 18px;
margin-top: 20px;
margin-bottom: 10px;
color: #24292f;
font-weight: 600;
}
.repo-preview p {
margin: 12px 0;
color: #57606a;
}
.repo-preview pre {
background: #f6f8fa;
padding: 16px;
border-radius: 8px;
overflow-x: auto;
border: 1px solid #d0d7de;
margin: 16px 0;
}
.repo-preview code {
background: #eff1f3;
padding: 3px 6px;
border-radius: 6px;
font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
font-size: 85%;
color: #24292f;
}
.repo-preview pre code {
background: transparent;
padding: 0;
border-radius: 0;
font-size: 13px;
}
.repo-preview img {
max-width: 100%;
height: auto;
border-radius: 8px;
margin: 12px 0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.repo-preview a {
color: #0969da;
text-decoration: none;
}
.repo-preview a:hover {
text-decoration: underline;
}
.repo-preview ul, .repo-preview ol {
margin: 12px 0;
padding-left: 24px;
}
.repo-preview li {
margin: 6px 0;
color: #57606a;
}
.repo-preview blockquote {
border-left: 4px solid #d0d7de;
padding-left: 16px;
margin: 16px 0;
color: #57606a;
font-style: italic;
}
.repo-preview table {
border-collapse: collapse;
width: 100%;
margin: 16px 0;
}
.repo-preview th, .repo-preview td {
border: 1px solid #d0d7de;
padding: 8px 12px;
text-align: left;
}
.repo-preview th {
background: #f6f8fa;
font-weight: 600;
}
.repo-preview hr {
border: none;
border-top: 2px solid #e1e4e8;
margin: 24px 0;
}
.preview-header {
font-size: 11px;
color: #6e7781;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 1px solid #e1e4e8;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
`);
// 語言顏色映射
const languageColors = {
'JavaScript': '#f1e05a',
'TypeScript': '#3178c6',
'Python': '#3572A5',
'HTML': '#e34c26',
'CSS': '#563d7c',
'Vue': '#41b883',
'Java': '#b07219',
'C++': '#f34b7d',
'Go': '#00ADD8',
'Rust': '#dea584',
'PHP': '#4F5D95',
'Ruby': '#701516',
'Swift': '#ffac45',
'Kotlin': '#A97BFF',
'C#': '#178600',
'Shell': '#89e051',
};
function getLanguageColor(lang) {
return languageColors[lang] || '#8b949e';
}
// ============ README Preview 功能 ============
const preview = document.createElement("div");
preview.className = "repo-preview";
document.body.appendChild(preview);
let hideTimeout;
let currentLink = null;
let currentRepo = null;
let isOverPreview = false;
async function fetchReadme(owner, repo) {
const url = `https://api.github.com/repos/${owner}/${repo}/readme`;
const headers = { "Accept": "application/vnd.github.v3.raw" };
if (GITHUB_TOKEN) headers["Authorization"] = "token " + GITHUB_TOKEN;
const res = await fetch(url, { headers });
if (!res.ok) return "📄 No README found or API limit reached.";
return res.text();
}
function showPreview(x, y, immediate = false) {
clearTimeout(hideTimeout);
preview.style.left = (x + 20) + "px";
preview.style.top = (y + 20) + "px";
if (preview.style.display === "none") {
preview.style.display = "block";
if (immediate) {
preview.classList.add('show');
} else {
setTimeout(() => preview.classList.add('show'), 10);
}
}
}
function hidePreview(delay = 300) {
clearTimeout(hideTimeout);
hideTimeout = setTimeout(() => {
if (!isOverPreview) {
preview.classList.remove('show');
setTimeout(() => {
if (!isOverPreview) {
preview.style.display = "none";
currentLink = null;
currentRepo = null;
}
}, 200);
}
}, delay);
}
document.addEventListener("mouseover", async (e) => {
const link = e.target.closest("a[itemprop='name codeRepository']");
if (link) {
const url = new URL(link.href);
const [owner, repo] = url.pathname.split("/").filter(Boolean);
const repoKey = `${owner}/${repo}`;
if (currentRepo === repoKey) {
showPreview(e.pageX, e.pageY, true);
return;
}
currentLink = link;
currentRepo = repoKey;
showPreview(e.pageX, e.pageY, preview.style.display !== "none");
preview.innerHTML = `<div class="preview-header">📖 README Preview</div><em style="color: #6e7781;">Loading README...</em>`;
try {
const readme = await fetchReadme(owner, repo);
if (currentRepo === repoKey) {
preview.innerHTML = `<div class="preview-header">📖 ${owner}/${repo}</div>` + marked.parse(readme);
}
} catch(err) {
if (currentRepo === repoKey) {
preview.innerHTML = `<div class="preview-header">❌ Error</div><span style="color: #cf222e;">Error loading README</span>`;
}
}
}
});
document.addEventListener("mouseout", (e) => {
const link = e.target.closest("a[itemprop='name codeRepository']");
const relatedTarget = e.relatedTarget;
if (link && !preview.contains(relatedTarget)) {
const nextLink = relatedTarget?.closest?.("a[itemprop='name codeRepository']");
if (!nextLink) {
hidePreview();
}
}
});
preview.addEventListener("mouseenter", () => {
isOverPreview = true;
clearTimeout(hideTimeout);
});
preview.addEventListener("mouseleave", () => {
isOverPreview = false;
hidePreview();
});
// ============ Grid Layout 功能 ============
function waitForElement(selector, timeout = 5000) {
return new Promise((resolve) => {
if ($(selector).length) {
resolve($(selector));
return;
}
const observer = new MutationObserver(() => {
if ($(selector).length) {
observer.disconnect();
resolve($(selector));
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
setTimeout(() => {
observer.disconnect();
resolve(null);
}, timeout);
});
}
async function transformRepoList() {
console.log('🔍 Starting transformation...');
let repoList = await waitForElement('#user-repositories-list');
if (!repoList || repoList.length === 0) {
repoList = await waitForElement('[data-filterable-for="your-repos-filter"]');
}
if (!repoList || repoList.length === 0) {
repoList = $('div[data-hpc] ul').first();
}
if (!repoList || repoList.length === 0) {
console.log('❌ Repository list not found');
return;
}
const $gridContainer = $('<div id="repo-grid-container" class="cols-3"></div>');
let $repos = repoList.find('li');
if ($repos.length === 0) {
$repos = repoList.children();
}
$repos.each(function() {
const $repo = $(this);
let $link = $repo.find('a[itemprop="name codeRepository"]');
if ($link.length === 0) {
$link = $repo.find('h3 a').first();
}
if ($link.length === 0) {
$link = $repo.find('a').first();
}
const repoName = $link.text().trim();
const repoUrl = $link.attr('href');
if (!repoName) return;
let description = $repo.find('p[itemprop="description"]').text().trim();
if (!description) {
description = $repo.find('p').first().text().trim();
}
description = description || '無描述';
let language = $repo.find('[itemprop="programmingLanguage"]').text().trim();
if (!language) {
language = $repo.find('span[class*="color-fg"]').first().text().trim();
}
const stars = $repo.find('a[href*="/stargazers"]').text().trim();
const isPublic = $repo.find('span').filter(function() {
return $(this).text().trim() === 'Public';
}).length > 0;
let updated = $repo.find('relative-time').attr('datetime');
if (!updated) {
updated = $repo.find('relative-time').attr('title') || new Date().toISOString();
}
const $card = $(`
<div class="repo-card">
<div>
<a href="${repoUrl}" class="repo-card-title" itemprop="name codeRepository">
<svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z"></path>
</svg>
${repoName}
</a>
<span class="repo-badge ${isPublic ? 'public' : 'private'}">
${isPublic ? 'Public' : 'Private'}
</span>
</div>
<div class="repo-card-description">${description}</div>
<div class="repo-card-meta">
${language ? `
<span class="repo-card-language">
<span class="language-color" style="background-color: ${getLanguageColor(language)}"></span>
${language}
</span>
` : ''}
${stars ? `
<span class="repo-card-stars">
<svg height="16" width="16" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z"></path>
</svg>
${stars}
</span>
` : ''}
<span>Updated ${new Date(updated).toLocaleDateString()}</span>
</div>
</div>
`);
$gridContainer.append($card);
});
if (repoList.next().length > 0) {
repoList.after($gridContainer);
} else if (repoList.parent().length > 0) {
repoList.parent().append($gridContainer);
} else {
repoList.append($gridContainer);
}
repoList.hide();
createGridControls($gridContainer);
}
function createGridControls($gridContainer) {
let $sortContainer = $('summary[aria-haspopup="menu"]').filter(function() {
return $(this).find('span').text().includes('Sort');
}).parent();
if ($sortContainer.length === 0) {
$sortContainer = $('details').filter(function() {
return $(this).find('summary').text().includes('Sort');
}).first();
}
if ($sortContainer.length === 0) {
createFallbackControls($gridContainer);
return;
}
const $gridDropdown = $(`
<details id="grid-layout-dropdown" class="details-reset details-overlay">
<summary class="btn" aria-haspopup="menu" role="button">
<span>Layout</span>
<span class="dropdown-caret"></span>
</summary>
<div class="grid-layout-menu">
<ul style="list-style: none; margin: 0; padding: 0;">
<li class="grid-layout-menu-item" data-cols="1">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="4" width="10" height="2" rx="0.5"/>
<rect x="3" y="7" width="10" height="2" rx="0.5"/>
<rect x="3" y="10" width="10" height="2" rx="0.5"/>
</svg>
<span class="grid-layout-menu-item-text">列表</span>
<svg class="grid-layout-menu-item-check" viewBox="0 0 16 16" fill="currentColor">
<path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
</svg>
</li>
<li class="grid-layout-menu-item" data-cols="2">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="3" y="4" width="4.5" height="8" rx="0.5"/>
<rect x="8.5" y="4" width="4.5" height="8" rx="0.5"/>
</svg>
<span class="grid-layout-menu-item-text">兩欄</span>
<svg class="grid-layout-menu-item-check" viewBox="0 0 16 16" fill="currentColor">
<path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
</svg>
</li>
<li class="grid-layout-menu-item active" data-cols="3">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2.5" y="4" width="3" height="8" rx="0.5"/>
<rect x="6.5" y="4" width="3" height="8" rx="0.5"/>
<rect x="10.5" y="4" width="3" height="8" rx="0.5"/>
</svg>
<span class="grid-layout-menu-item-text">三欄</span>
<svg class="grid-layout-menu-item-check" viewBox="0 0 16 16" fill="currentColor">
<path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
</svg>
</li>
<li class="grid-layout-menu-item" data-cols="4">
<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
<rect x="2" y="4" width="2.2" height="8" rx="0.5"/>
<rect x="5" y="4" width="2.2" height="8" rx="0.5"/>
<rect x="8" y="4" width="2.2" height="8" rx="0.5"/>
<rect x="11" y="4" width="2.2" height="8" rx="0.5"/>
</svg>
<span class="grid-layout-menu-item-text">四欄</span>
<svg class="grid-layout-menu-item-check" viewBox="0 0 16 16" fill="currentColor">
<path d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path>
</svg>
</li>
</ul>
</div>
</details>
`);
$sortContainer.after($gridDropdown);
$('.grid-layout-menu-item').on('click', function(e) {
e.preventDefault();
const cols = $(this).data('cols');
$('.grid-layout-menu-item').removeClass('active');
$(this).addClass('active');
$gridContainer.attr('class', `cols-${cols}`);
window.gridLayoutPreference = cols;
$('#grid-layout-dropdown').removeAttr('open');
});
const savedCols = window.gridLayoutPreference || '3';
$(`.grid-layout-menu-item[data-cols="${savedCols}"]`).addClass('active').siblings().removeClass('active');
$gridContainer.attr('class', `cols-${savedCols}`);
}
function createFallbackControls($gridContainer) {
const $controlPanel = $(`
<div id="grid-control-panel" style="display: block !important;">
<h3>📐 Grid Layout</h3>
<div class="grid-buttons">
<button class="grid-btn" data-cols="1">1 列</button>
<button class="grid-btn" data-cols="2">2 列</button>
<button class="grid-btn active" data-cols="3">3 列</button>
<button class="grid-btn" data-cols="4">4 列</button>
</div>
</div>
`);
$('body').append($controlPanel);
$('#grid-control-panel .grid-btn').on('click', function() {
const cols = $(this).data('cols');
$('#grid-control-panel .grid-btn').removeClass('active');
$(this).addClass('active');
$gridContainer.attr('class', `cols-${cols}`);
window.gridLayoutPreference = cols;
});
const savedCols = window.gridLayoutPreference || '3';
$(`#grid-control-panel .grid-btn[data-cols="${savedCols}"]`).click();
}
// 頁面載入
$(document).ready(function() {
console.log('🚀 GitHub Repos Enhanced loaded');
if (window.location.href.includes('?tab=repositories') ||
window.location.href.includes('&tab=repositories')) {
setTimeout(() => {
transformRepoList();
}, 1000);
}
});
// 監聽 URL 變化
let lastUrl = location.href;
new MutationObserver(() => {
const url = location.href;
if (url !== lastUrl) {
lastUrl = url;
if (url.includes('?tab=repositories') || url.includes('&tab=repositories')) {
setTimeout(() => {
transformRepoList();
}, 1500);
}
}
}).observe(document, {subtree: true, childList: true});
})();