forked from mirrors/pkg-proxy
211 lines
8.2 KiB
HTML
211 lines
8.2 KiB
HTML
{{define "title"}}Compare {{.FromVersion}} → {{.ToVersion}} - {{.PackageName}} - git-pkgs proxy{{end}}
|
|
|
|
{{define "content"}}
|
|
<div class="mb-6">
|
|
<nav class="text-sm text-gray-600 dark:text-gray-400 mb-4">
|
|
<a href="/" class="hover:text-gray-900 dark:hover:text-gray-100">Home</a>
|
|
<span class="mx-2">/</span>
|
|
<a href="/package/{{.Ecosystem}}/{{.PackageName}}" class="hover:text-gray-900 dark:hover:text-gray-100">{{.PackageName}}</a>
|
|
<span class="mx-2">/</span>
|
|
<span>Compare Versions</span>
|
|
</nav>
|
|
<h1 class="text-3xl font-bold mb-2">Version Comparison</h1>
|
|
<div class="flex items-center gap-3 text-lg">
|
|
<span class="font-mono text-red-600 dark:text-red-400">{{.FromVersion}}</span>
|
|
<svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
|
|
</svg>
|
|
<span class="font-mono text-green-600 dark:text-green-400">{{.ToVersion}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div id="loading" class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 p-12 text-center">
|
|
<div class="inline-block animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
|
|
<p class="mt-4 text-gray-600 dark:text-gray-400">Generating diff...</p>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div id="error" class="hidden bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-red-200 dark:border-red-900 p-12 text-center">
|
|
<svg class="mx-auto h-12 w-12 text-red-600 dark:text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<p class="mt-4 text-red-600 dark:text-red-400" id="error-message"></p>
|
|
</div>
|
|
|
|
<!-- Stats -->
|
|
<div id="stats" class="hidden grid grid-cols-2 md:grid-cols-5 gap-4 mb-6">
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-4 shadow-sm border border-gray-200 dark:border-gray-800">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Files Changed</div>
|
|
<div class="text-2xl font-bold mt-1" id="stat-changed">0</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-4 shadow-sm border border-gray-200 dark:border-gray-800">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Files Added</div>
|
|
<div class="text-2xl font-bold text-green-600 dark:text-green-400 mt-1" id="stat-added">0</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-4 shadow-sm border border-gray-200 dark:border-gray-800">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Files Deleted</div>
|
|
<div class="text-2xl font-bold text-red-600 dark:text-red-400 mt-1" id="stat-deleted">0</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-4 shadow-sm border border-gray-200 dark:border-gray-800">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Lines Added</div>
|
|
<div class="text-2xl font-bold text-green-600 dark:text-green-400 mt-1" id="stat-lines-added">0</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl p-4 shadow-sm border border-gray-200 dark:border-gray-800">
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">Lines Deleted</div>
|
|
<div class="text-2xl font-bold text-red-600 dark:text-red-400 mt-1" id="stat-lines-deleted">0</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Diff Content -->
|
|
<div id="diff-container" class="hidden bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800">
|
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-gray-800">
|
|
<h2 class="text-lg font-semibold">Changes</h2>
|
|
</div>
|
|
<div id="diff-content" class="p-6"></div>
|
|
</div>
|
|
|
|
<!-- diff2html CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css" />
|
|
|
|
<!-- diff2html JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/diff2html/bundles/js/diff2html-ui.min.js"></script>
|
|
|
|
<script>
|
|
const ecosystem = '{{.Ecosystem}}';
|
|
const packageName = '{{.PackageName}}';
|
|
const fromVersion = '{{.FromVersion}}';
|
|
const toVersion = '{{.ToVersion}}';
|
|
|
|
async function loadDiff() {
|
|
try {
|
|
const url = `/api/compare/${ecosystem}/${packageName}/${fromVersion}/${toVersion}`;
|
|
const response = await fetch(url);
|
|
|
|
if (!response.ok) {
|
|
throw new Error(await response.text());
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
// Hide loading, show content
|
|
document.getElementById('loading').classList.add('hidden');
|
|
document.getElementById('stats').classList.remove('hidden');
|
|
document.getElementById('diff-container').classList.remove('hidden');
|
|
|
|
// Update stats
|
|
document.getElementById('stat-changed').textContent = data.files_changed || 0;
|
|
document.getElementById('stat-added').textContent = data.files_added || 0;
|
|
document.getElementById('stat-deleted').textContent = data.files_deleted || 0;
|
|
document.getElementById('stat-lines-added').textContent = data.total_added || 0;
|
|
document.getElementById('stat-lines-deleted').textContent = data.total_deleted || 0;
|
|
|
|
// Convert to unified diff format for diff2html
|
|
let unifiedDiff = '';
|
|
for (const file of data.files) {
|
|
if (file.diff) {
|
|
unifiedDiff += file.diff + '\n';
|
|
} else if (file.type === 'deleted') {
|
|
unifiedDiff += `--- a/${file.path}\n+++ /dev/null\n`;
|
|
} else if (file.type === 'added' && !file.is_binary) {
|
|
// diff field should already be populated for added files
|
|
if (!file.diff) {
|
|
unifiedDiff += `--- /dev/null\n+++ b/${file.path}\n`;
|
|
}
|
|
}
|
|
|
|
// Add note for binary files
|
|
if (file.is_binary) {
|
|
unifiedDiff += `diff --git a/${file.path} b/${file.path}\n`;
|
|
unifiedDiff += `Binary file ${file.path} has changed\n\n`;
|
|
}
|
|
}
|
|
|
|
if (unifiedDiff) {
|
|
// Render diff with diff2html
|
|
const targetElement = document.getElementById('diff-content');
|
|
const configuration = {
|
|
drawFileList: true,
|
|
fileListToggle: true,
|
|
fileListStartVisible: true,
|
|
fileContentToggle: true,
|
|
matching: 'lines',
|
|
outputFormat: 'side-by-side',
|
|
synchronisedScroll: true,
|
|
highlight: true,
|
|
renderNothingWhenEmpty: false,
|
|
};
|
|
|
|
const diff2htmlUi = new Diff2HtmlUI(targetElement, unifiedDiff, configuration);
|
|
diff2htmlUi.draw();
|
|
} else {
|
|
document.getElementById('diff-content').innerHTML =
|
|
'<p class="text-center text-gray-500 dark:text-gray-400 py-8">No changes detected between these versions</p>';
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Error loading diff:', error);
|
|
document.getElementById('loading').classList.add('hidden');
|
|
document.getElementById('error').classList.remove('hidden');
|
|
document.getElementById('error-message').textContent =
|
|
'Failed to load diff: ' + error.message;
|
|
}
|
|
}
|
|
|
|
// Load diff on page load
|
|
loadDiff();
|
|
</script>
|
|
|
|
<style>
|
|
/* Dark mode adjustments for diff2html */
|
|
.dark .d2h-wrapper {
|
|
background-color: rgb(17 24 39);
|
|
color: rgb(243 244 246);
|
|
}
|
|
|
|
.dark .d2h-file-header {
|
|
background-color: rgb(31 41 55);
|
|
border-color: rgb(55 65 81);
|
|
}
|
|
|
|
.dark .d2h-file-stats {
|
|
color: rgb(156 163 175);
|
|
}
|
|
|
|
.dark .d2h-code-line {
|
|
background-color: rgb(17 24 39);
|
|
color: rgb(243 244 246);
|
|
}
|
|
|
|
.dark .d2h-ins {
|
|
background-color: rgb(5 46 22);
|
|
}
|
|
|
|
.dark .d2h-del {
|
|
background-color: rgb(69 10 10);
|
|
}
|
|
|
|
.dark .d2h-code-line-ctn {
|
|
color: rgb(243 244 246);
|
|
}
|
|
|
|
.dark .d2h-code-linenumber {
|
|
background-color: rgb(31 41 55);
|
|
border-color: rgb(55 65 81);
|
|
color: rgb(156 163 175);
|
|
}
|
|
|
|
.dark .d2h-file-list-wrapper {
|
|
background-color: rgb(31 41 55);
|
|
border-color: rgb(55 65 81);
|
|
}
|
|
|
|
.dark .d2h-file-list-line {
|
|
border-color: rgb(55 65 81);
|
|
}
|
|
|
|
.dark .d2h-file-list-line:hover {
|
|
background-color: rgb(55 65 81);
|
|
}
|
|
</style>
|
|
{{end}}
|