viruus.zip
forked from
tangled.org/core
Monorepo for Tangled
appview/repo/fragments: integrate pierre diffs with progressive enhancement
render server-side diffs by default. when js loads, enhance with client-side
rendering using @pierre/diffs library. gracefully degrades if js unavailable
or library fails to load
Signed-off-by: dropalltables <80474621+dropalltables@users.noreply.github.com>
Amp-Thread-ID: https://ampcode.com/threads/T-019c7ca9-f797-773a-9650-20d5ed91167e
Co-authored-by: Amp <amp@ampcode.com>
+54
-1
+54
-1
appview/pages/templates/repo/fragments/diff.html
+54
-1
appview/pages/templates/repo/fragments/diff.html
···
9
9
</style>
10
10
11
11
{{ template "diffTopbar" . }}
12
-
{{ block "diffLayout" . }} {{ end }}
12
+
13
+
<!-- Server-side rendered diffs (baseline) -->
14
+
<div id="diff-server-rendered">
15
+
{{ block "diffLayout" . }} {{ end }}
16
+
</div>
17
+
13
18
{{ template "fragments/resizable" }}
19
+
20
+
<!-- Progressive enhancement: load Pierre Diffs to replace server rendering -->
21
+
<script src="https://cdn.jsdelivr.net/npm/@pierre/diffs@1.0.10"></script>
22
+
<script>
23
+
window.__diffData = {
24
+
patch: {{ .RawPatch | js }},
25
+
isSplit: {{ .DiffOpts.Split }}
26
+
};
27
+
28
+
// Enhance with client-side rendering when library loads
29
+
window.addEventListener('load', async function() {
30
+
if (!window.PierreDiffs || !window.__diffData.patch) {
31
+
return; // Gracefully degrade to server-rendered version
32
+
}
33
+
34
+
try {
35
+
const { parsePatchFiles } = window.PierreDiffs;
36
+
const serverContainer = document.getElementById('diff-server-rendered');
37
+
if (!serverContainer) return;
38
+
39
+
// Parse patch
40
+
const files = parsePatchFiles(window.__diffData.patch);
41
+
42
+
// Replace server-rendered diffs with enhanced client version
43
+
const newContainer = document.createElement('div');
44
+
newContainer.id = 'diff-server-rendered';
45
+
46
+
for (const file of files) {
47
+
const fileDiv = document.createElement('div');
48
+
fileDiv.className = 'border border-gray-200 dark:border-gray-700 rounded bg-white dark:bg-gray-800 drop-shadow-sm mb-4';
49
+
newContainer.appendChild(fileDiv);
50
+
51
+
new window.PierreDiffs.FileDiff({
52
+
oldFile: file.oldFile,
53
+
newFile: file.newFile,
54
+
renderOptions: {
55
+
displayMode: window.__diffData.isSplit ? 'split' : 'unified'
56
+
}
57
+
});
58
+
}
59
+
60
+
serverContainer.replaceWith(newContainer);
61
+
} catch (e) {
62
+
console.error('Error enhancing diffs with Pierre Diffs, keeping server version:', e);
63
+
// Server-rendered version stays visible on error
64
+
}
65
+
});
66
+
</script>
14
67
{{ end }}
15
68
16
69
{{ define "diffTopbar" }}