Gitiles
Code Review Sign In
code.v1.dodo.cloud / sketch / 5bff650e0d5603dc77efccb4b4610648aa83cbf6 / . / webui / src / web-components / demo / sketch-diff-view.demo.html
blob: 04cf7d0519912541b127f90acd7398ce42895829 [file] [log] [blame]
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]1<!doctype html>
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]2<html lang="en">
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Sketch Diff Viewer Demo</title>
7 <link
8 rel="stylesheet"
9 href="../../../node_modules/diff2html/bundles/css/diff2html.min.css"
10 />
Philip Zeyliger72682df2025-04-23 13:09:46 -0700[diff] [blame]11 <script type="module" src="../sketch-diff-view.ts"></script>
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]12 <style>
13 body {
David Crawshaw5bff6502025-04-26 09:11:40 -0700[diff] [blame^]14 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
15 Helvetica, Arial, sans-serif;
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]16 max-width: 1200px;
17 margin: 0 auto;
18 padding: 2rem;
19 }
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]20
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]21 h1 {
22 color: #333;
23 margin-bottom: 2rem;
24 }
25
26 .control-panel {
27 margin-bottom: 2rem;
28 padding: 1rem;
29 background-color: #f0f0f0;
30 border-radius: 4px;
31 }
32
33 input {
34 padding: 0.5rem;
35 border-radius: 4px;
36 border: 1px solid #ccc;
37 width: 300px;
38 }
39
40 button {
41 padding: 0.5rem 1rem;
42 background-color: #2196f3;
43 color: white;
44 border: none;
45 border-radius: 4px;
46 cursor: pointer;
47 margin-left: 1rem;
48 }
49
50 button:hover {
51 background-color: #0d8bf2;
52 }
53 </style>
54
55 <script>
56 document.addEventListener("DOMContentLoaded", () => {
57 const diffViewer = document.getElementById("diffViewer");
58 const commitHashInput = document.getElementById("commitHash");
59 const viewDiffButton = document.getElementById("viewDiff");
60 let commit = false;
61 viewDiffButton.addEventListener("click", () => {
62 let diffContent = `diff --git a/sample.txt b/sample.txt
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]63index 1111111..2222222 100644
64--- a/sample.txt
65+++ b/sample.txt
66@@ -1,5 +1,5 @@
67 This is a sample file
68-This line will be removed
69+This line is added as a replacement
70 This line stays the same
71-Another line to remove
72+A completely new line
73 The last line is unchanged`;
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]74 if (commit) {
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]75 // For demo purposes, generate fake diff based on commit hash
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]76 diffContent = `diff --git a/file-${commit.substring(0, 5)}.txt b/file-${commit.substring(0, 5)}.txt
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]77index 3333333..4444444 100644
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]78--- a/file-${commit.substring(0, 5)}.txt
79+++ b/file-${commit.substring(0, 5)}.txt
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]80@@ -1,4 +1,6 @@
81 File with commit: ${commit}
82+This line was added in commit ${commit}
83 This line exists in both versions
84-This line was removed in commit ${commit}
85+This line replaced the removed line
86+Another new line added in this commit
87 Last line of the file`;
88 }
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]89 diffViewer.diffText = diffContent;
90 diffViewer.commitHash = commitHashInput.value.trim();
91 });
92 });
93 </script>
94 </head>
95 <body>
96 <h1>Sketch Diff Viewer Demo</h1>
Sean McCullough86b56862025-04-18 13:04:03 -0700[diff] [blame]97
Sean McCullough71941bd2025-04-18 13:31:48 -0700[diff] [blame]98 <div class="control-panel">
99 <label for="commitHash"
100 >Commit Hash (leave empty for unstaged changes):</label
101 >
102 <input type="text" id="commitHash" placeholder="Enter commit hash" />
103 <button id="viewDiff">View Diff</button>
104 </div>
105
106 <sketch-diff-view id="diffViewer"></sketch-diff-view>
107 </body>
108</html>