| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>Sketch Monaco Viewer Demo</title> |
| <script type="module" src="../sketch-monaco-view.ts"></script> |
| <style> |
| body { |
| font-family: |
| -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, |
| Arial, sans-serif; |
| max-width: 1200px; |
| margin: 0 auto; |
| padding: 2rem; |
| } |
| |
| h1 { |
| color: #333; |
| margin-bottom: 2rem; |
| } |
| |
| .control-panel { |
| margin-bottom: 2rem; |
| padding: 1rem; |
| background-color: #f0f0f0; |
| border-radius: 4px; |
| } |
| |
| button { |
| padding: 8px 12px; |
| background-color: #4285f4; |
| color: white; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| margin-right: 8px; |
| } |
| |
| button:hover { |
| background-color: #3367d6; |
| } |
| |
| sketch-monaco-view { |
| margin-top: 20px; |
| height: 500px; |
| } |
| </style> |
| </head> |
| <body> |
| <h1>Sketch Monaco Viewer Demo</h1> |
| |
| <div class="control-panel"> |
| <p>This is a demo page for the sketch-monaco-view component.</p> |
| <div> |
| <button id="example1">Example 1: JavaScript</button> |
| <button id="example2">Example 2: HTML</button> |
| <button id="example3">Example 3: Go</button> |
| </div> |
| </div> |
| |
| <sketch-monaco-view id="diffEditor"></sketch-monaco-view> |
| |
| <script> |
| document.addEventListener("DOMContentLoaded", () => { |
| const diffEditor = document.getElementById("diffEditor"); |
| |
| // Set initial example |
| diffEditor.originalCode = `function hello() { |
| console.log("Hello World"); |
| return true; |
| }`; |
| |
| diffEditor.modifiedCode = `function hello() { |
| // Add a comment |
| console.log("Hello Updated World"); |
| return true; |
| }`; |
| |
| // Example 1: JavaScript |
| document.getElementById("example1").addEventListener("click", () => { |
| diffEditor.setOriginalCode( |
| `function calculateTotal(items) { |
| return items |
| .map(item => item.price * item.quantity) |
| .reduce((a, b) => a + b, 0); |
| }`, |
| "original.js", |
| ); |
| |
| diffEditor.setModifiedCode( |
| `function calculateTotal(items) { |
| // Apply discount if available |
| return items |
| .map(item => { |
| const price = item.discount ? |
| item.price * (1 - item.discount) : |
| item.price; |
| return price * item.quantity; |
| }) |
| .reduce((a, b) => a + b, 0); |
| }`, |
| "modified.js", |
| ); |
| }); |
| |
| // Example 2: HTML |
| document.getElementById("example2").addEventListener("click", () => { |
| diffEditor.setOriginalCode( |
| `<!DOCTYPE html> |
| <html> |
| <head> |
| <title>Demo Page</title> |
| </head> |
| <body> |
| <h1>Hello World</h1> |
| <p>This is a paragraph.</p> |
| </body> |
| </html>`, |
| "original.html", |
| ); |
| |
| diffEditor.setModifiedCode( |
| `<!DOCTYPE html> |
| <html> |
| <head> |
| <title>Demo Page</title> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <link rel="stylesheet" href="styles.css"> |
| </head> |
| <body> |
| <header> |
| <h1>Hello World</h1> |
| </header> |
| <main> |
| <p>This is a paragraph with some <strong>bold</strong> text.</p> |
| </main> |
| <footer> |
| <p>© 2025</p> |
| </footer> |
| </body> |
| </html>`, |
| "modified.html", |
| ); |
| }); |
| |
| // Example 3: Go |
| document.getElementById("example3").addEventListener("click", () => { |
| diffEditor.setOriginalCode( |
| `package main |
| |
| import "fmt" |
| |
| func main() { |
| fmt.Println("Hello, world!") |
| }`, |
| "original.go", |
| ); |
| |
| diffEditor.setModifiedCode( |
| `package main |
| |
| import ( |
| "fmt" |
| "time" |
| ) |
| |
| func main() { |
| fmt.Println("Hello, world!") |
| fmt.Printf("The time is %s\n", time.Now().Format(time.RFC3339)) |
| }`, |
| "modified.go", |
| ); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |