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