237 lines
7.9 KiB
HTML
237 lines
7.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>zed-bridge — Integration Examples</title>
|
||
<style>
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
font-family: system-ui, sans-serif;
|
||
max-width: 860px;
|
||
margin: 2em auto;
|
||
padding: 0 1.5em;
|
||
background: #f8f9fa;
|
||
color: #333;
|
||
}
|
||
h1 { color: #1a1a2e; }
|
||
h2 { color: #16213e; margin-top: 2em; border-bottom: 2px solid #e0e0e0; padding-bottom: .3em; }
|
||
pre {
|
||
background: #1e1e2e;
|
||
color: #cdd6f4;
|
||
border-radius: 8px;
|
||
padding: 1.2em;
|
||
overflow-x: auto;
|
||
font-size: .9em;
|
||
}
|
||
code { font-family: 'Cascadia Code', 'Fira Mono', monospace; }
|
||
|
||
/* --- Edit button styles --- */
|
||
.edit-btn {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
gap: .4em;
|
||
background: #6c8ebf;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 5px;
|
||
padding: .35em .8em;
|
||
font-size: .85em;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
transition: background .15s;
|
||
}
|
||
.edit-btn:hover { background: #4a6fa5; }
|
||
.edit-btn svg { width: 14px; height: 14px; fill: currentColor; }
|
||
|
||
/* --- Demo table --- */
|
||
table { border-collapse: collapse; width: 100%; margin: 1em 0; }
|
||
th, td { text-align: left; padding: .6em .8em; border-bottom: 1px solid #ddd; }
|
||
th { background: #eef0f4; }
|
||
tr:hover { background: #f5f7ff; }
|
||
|
||
.demo-section { background: #fff; border-radius: 10px; padding: 1.5em; margin: 1em 0;
|
||
box-shadow: 0 2px 8px #0001; }
|
||
.bridge-status { font-size: .85em; color: #888; margin-top: .4em; }
|
||
.bridge-status.ok { color: #2d7a2d; }
|
||
.bridge-status.err { color: #c0392b; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<h1>🔗 zed-bridge Integration Examples</h1>
|
||
<p>
|
||
This page shows how to add <strong>Edit in Zed</strong> buttons to your remote site.
|
||
Clicking any button below will open the file in Zed on your local workstation
|
||
(as long as <code>zed-bridge</code> is running).
|
||
</p>
|
||
|
||
<div id="bridge-check" class="bridge-status">Checking if zed-bridge is running…</div>
|
||
|
||
<!-- ===================================================================== -->
|
||
<h2>Example 1 — Simple anchor link</h2>
|
||
<p>The simplest approach. Opens a small pop-up tab that closes itself after 1.8s.</p>
|
||
|
||
<div class="demo-section">
|
||
<a class="edit-btn"
|
||
href="http://localhost:7654/open?repo=mysite&file=content/posts/hello-world.md"
|
||
target="_blank"
|
||
rel="noopener">
|
||
<!-- pencil icon -->
|
||
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
||
Edit in Zed
|
||
</a>
|
||
</div>
|
||
|
||
<pre><code><a class="edit-btn"
|
||
href="http://localhost:7654/open?repo=mysite&file=content/posts/hello-world.md"
|
||
target="_blank"
|
||
rel="noopener">
|
||
Edit in Zed
|
||
</a></code></pre>
|
||
|
||
<!-- ===================================================================== -->
|
||
<h2>Example 2 — JavaScript pop-up (cleaner UX)</h2>
|
||
<p>
|
||
Opens a small 400×160 browser pop-up that closes itself automatically.
|
||
Doesn't leave a stray tab in your tab bar.
|
||
</p>
|
||
|
||
<div class="demo-section">
|
||
<button class="edit-btn" onclick="editInZed('mysite', 'content/posts/hello-world.md')">
|
||
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
||
Edit in Zed (pop-up)
|
||
</button>
|
||
</div>
|
||
|
||
<pre><code><script>
|
||
function editInZed(repo, file) {
|
||
const url = 'http://localhost:7654/open'
|
||
+ '?repo=' + encodeURIComponent(repo)
|
||
+ '&file=' + encodeURIComponent(file);
|
||
window.open(url, 'zed-bridge',
|
||
'width=420,height=160,menubar=no,toolbar=no,location=no,status=no');
|
||
}
|
||
</script>
|
||
|
||
<button onclick="editInZed('mysite', 'content/posts/hello-world.md')">
|
||
Edit in Zed
|
||
</button></code></pre>
|
||
|
||
<!-- ===================================================================== -->
|
||
<h2>Example 3 — Content listing table (Hugo / static site style)</h2>
|
||
<p>
|
||
A realistic file list, like you might generate from a Hugo template or a
|
||
server-side script. Each row has an edit button.
|
||
</p>
|
||
|
||
<div class="demo-section">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>File</th>
|
||
<th>Path</th>
|
||
<th>Action</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Hello World</td>
|
||
<td><code>content/posts/hello-world.md</code></td>
|
||
<td>
|
||
<button class="edit-btn"
|
||
onclick="editInZed('mysite', 'content/posts/hello-world.md')">
|
||
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
||
Edit
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Solar Setup Guide</td>
|
||
<td><code>content/posts/solar-setup.md</code></td>
|
||
<td>
|
||
<button class="edit-btn"
|
||
onclick="editInZed('mysite', 'content/posts/solar-setup.md')">
|
||
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
||
Edit
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>LoRa Node Config</td>
|
||
<td><code>content/docs/lora-node.md</code></td>
|
||
<td>
|
||
<button class="edit-btn"
|
||
onclick="editInZed('mysite', 'content/docs/lora-node.md')">
|
||
<svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zm17.71-10.21a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
|
||
Edit
|
||
</button>
|
||
</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- ===================================================================== -->
|
||
<h2>Example 4 — Hugo template snippet</h2>
|
||
<p>Drop this into any Hugo list or single template. Requires <code>{{ .File.Path }}</code>.</p>
|
||
|
||
<pre><code>{{`{{ if .File }}`}}
|
||
<button class="edit-btn"
|
||
onclick="editInZed('mysite', '{{`{{ .File.Path }}`}}');">
|
||
✏️ Edit in Zed
|
||
</button>
|
||
{{`{{ end }}`}}</code></pre>
|
||
|
||
<p>Add the <code>editInZed()</code> function once in your base layout's <code><head></code> or footer:</p>
|
||
|
||
<pre><code><script>
|
||
function editInZed(repo, file) {
|
||
var url = 'http://localhost:7654/open'
|
||
+ '?repo=' + encodeURIComponent(repo)
|
||
+ '&file=' + encodeURIComponent(file);
|
||
window.open(url, 'zed-bridge',
|
||
'width=420,height=160,menubar=no,toolbar=no,location=no');
|
||
}
|
||
</script></code></pre>
|
||
|
||
<p>
|
||
<strong>Tip:</strong> Wrap the button in an environment check so it only appears
|
||
in development or when accessed from your own IP:
|
||
</p>
|
||
|
||
<pre><code>{{`{{ if eq (getenv "HUGO_ENV") "development" }}`}}
|
||
<!-- edit button here -->
|
||
{{`{{ end }}`}}</code></pre>
|
||
|
||
|
||
<!-- ===================================================================== -->
|
||
<script>
|
||
// --- Bridge status check ---
|
||
(function() {
|
||
var el = document.getElementById('bridge-check');
|
||
fetch('http://localhost:7654/health')
|
||
.then(function(r) { return r.json(); })
|
||
.then(function() {
|
||
el.textContent = '✅ zed-bridge is running on localhost:7654';
|
||
el.className = 'bridge-status ok';
|
||
})
|
||
.catch(function() {
|
||
el.textContent = '⚠️ zed-bridge not detected — buttons will not work until you start it.';
|
||
el.className = 'bridge-status err';
|
||
});
|
||
})();
|
||
|
||
// --- Edit in Zed helper ---
|
||
function editInZed(repo, file) {
|
||
var url = 'http://localhost:7654/open'
|
||
+ '?repo=' + encodeURIComponent(repo)
|
||
+ '&file=' + encodeURIComponent(file);
|
||
window.open(url, 'zed-bridge',
|
||
'width=420,height=160,menubar=no,toolbar=no,location=no,status=no');
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|