Sh3d/zed-bridge
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial public release

Browse Source
This commit is contained in:
scottp
2026-07-16 12:08:54 +10:00
commit 07fe81b462
12 changed files with 1554 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
example/edit-button.html
+236
View File
@@ -0,0 +1,236 @@
<!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>&lt;a class="edit-btn"
href="http://localhost:7654/open?repo=mysite&amp;file=content/posts/hello-world.md"
target="_blank"
rel="noopener"&gt;
Edit in Zed
&lt;/a&gt;</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>&lt;script&gt;
function editInZed(repo, file) {
const url = 'http://localhost:7654/open'
+ '?repo=' + encodeURIComponent(repo)
+ '&amp;file=' + encodeURIComponent(file);
window.open(url, 'zed-bridge',
'width=420,height=160,menubar=no,toolbar=no,location=no,status=no');
}
&lt;/script&gt;
&lt;button onclick="editInZed('mysite', 'content/posts/hello-world.md')"&gt;
Edit in Zed
&lt;/button&gt;</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 }}`}}
&lt;button class="edit-btn"
onclick="editInZed('mysite', '{{`{{ .File.Path }}`}}');"&gt;
✏️ Edit in Zed
&lt;/button&gt;
{{`{{ end }}`}}</code></pre>
<p>Add the <code>editInZed()</code> function once in your base layout's <code>&lt;head&gt;</code> or footer:</p>
<pre><code>&lt;script&gt;
function editInZed(repo, file) {
var url = 'http://localhost:7654/open'
+ '?repo=' + encodeURIComponent(repo)
+ '&amp;file=' + encodeURIComponent(file);
window.open(url, 'zed-bridge',
'width=420,height=160,menubar=no,toolbar=no,location=no');
}
&lt;/script&gt;</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" }}`}}
&lt;!-- edit button here --&gt;
{{`{{ 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>