Skip to content

Commit 12ae363

Browse files
CopexitCopexit
committed
docs: move Umbrel app to top of setup guide as recommended option
1 parent ef6b752 commit 12ae363

File tree

1 file changed

+89
-80
lines changed

1 file changed

+89
-80
lines changed

‎src/app/setup-guide/page.tsx‎

Lines changed: 89 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,8 @@ export default function SetupGuidePage() {
7171
<nav className="flex flex-wrap gap-2 text-xs" aria-label="Page sections">
7272
{[
7373
{ label: "Why Self-Host", id: "why" },
74-
{ label: "CORS Headers", id: "cors" },
75-
{ label: "SSH Tunnel", id: "ssh-tunnel" },
7674
{ label: "Umbrel App", id: "umbrel" },
75+
{ label: "Manual Setup", id: "manual" },
7776
{ label: "Start9", id: "start9" },
7877
{ label: "Docker", id: "docker" },
7978
{ label: "CORS Proxy", id: "cors-proxy" },
@@ -102,22 +101,94 @@ export default function SetupGuidePage() {
102101
</p>
103102
<p className="text-muted leading-relaxed">
104103
By pointing am-i.exposed at your own node, API requests never leave your local network.
105-
Combined with the SSH tunnel approach below, not even your ISP can see what you are querying.
106104
</p>
107105
</div>
108106
</section>
109107

110-
{/* Important callout */}
111-
<div className="bg-warning/10 border border-warning/30 rounded-xl p-5 flex gap-3">
112-
<AlertTriangle size={20} className="text-warning shrink-0 mt-0.5" />
113-
<div className="space-y-2">
114-
<p className="text-foreground font-medium text-sm">Two things must be true for this to work</p>
115-
<ol className="text-muted text-sm leading-relaxed space-y-1 list-decimal list-inside">
116-
<li>Your mempool instance must have <strong className="text-foreground">CORS headers</strong> enabled (mempool does not include them by default)</li>
117-
<li>Your URL must end with <code className="text-bitcoin">/api</code> (e.g., <code className="text-bitcoin">http://localhost:3006/api</code>)</li>
108+
{/* Umbrel - recommended */}
109+
<section id="umbrel" className="space-y-4">
110+
<h2 className="text-2xl font-semibold text-foreground flex items-center gap-2">
111+
<Terminal size={22} />
112+
Umbrel
113+
</h2>
114+
115+
<div className="bg-card-bg border border-bitcoin/30 rounded-xl p-6 space-y-4">
116+
<div className="flex items-center gap-2">
117+
<span className="text-[10px] font-bold uppercase tracking-wider text-bitcoin bg-bitcoin/10 px-2 py-0.5 rounded">
118+
Recommended
119+
</span>
120+
</div>
121+
<h3 className="text-lg font-semibold text-foreground">Install the Umbrel App</h3>
122+
<p className="text-muted leading-relaxed">
123+
The easiest way. Install <span className="text-foreground font-medium">am-i.exposed</span> directly
124+
on your Umbrel and it automatically connects to your local mempool instance.
125+
No CORS headers, no SSH tunnel, no configuration needed.
126+
</p>
127+
<ol className="space-y-2 text-muted leading-relaxed">
128+
<li className="flex gap-2">
129+
<span className="text-bitcoin shrink-0 font-bold">1.</span>
130+
<span>
131+
Open your Umbrel dashboard and go to the <strong className="text-foreground">App Store</strong>
132+
</span>
133+
</li>
134+
<li className="flex gap-2">
135+
<span className="text-bitcoin shrink-0 font-bold">2.</span>
136+
<span>
137+
Click the <strong className="text-foreground">three-dot menu</strong> (top right)
138+
and select <strong className="text-foreground">Community App Stores</strong>
139+
</span>
140+
</li>
141+
<li className="flex gap-2">
142+
<span className="text-bitcoin shrink-0 font-bold">3.</span>
143+
<span>
144+
Paste the store URL and click <strong className="text-foreground">Add</strong>:
145+
</span>
146+
</li>
118147
</ol>
148+
<div className="relative">
149+
<pre className="bg-surface-inset rounded-lg p-3 text-sm font-mono overflow-x-auto text-bitcoin">
150+
https://github.com/Copexit/copexit-umbrel-app-store
151+
</pre>
152+
<CopyButton text="https://github.com/Copexit/copexit-umbrel-app-store" />
153+
</div>
154+
<ol start={4} className="space-y-2 text-muted leading-relaxed">
155+
<li className="flex gap-2">
156+
<span className="text-bitcoin shrink-0 font-bold">4.</span>
157+
<span>
158+
Find <strong className="text-foreground">am-i.exposed</strong> in the store and click <strong className="text-foreground">Install</strong>
159+
</span>
160+
</li>
161+
</ol>
162+
<p className="text-muted leading-relaxed">
163+
The app detects your local mempool automatically. All API requests stay on your local network
164+
and Chainalysis lookups are routed through a built-in Tor proxy.
165+
</p>
119166
</div>
120-
</div>
167+
</section>
168+
169+
{/* Manual setup for other platforms */}
170+
<section id="manual" className="space-y-4">
171+
<h2 className="text-2xl font-semibold text-foreground">
172+
Manual Setup
173+
</h2>
174+
<p className="text-muted leading-relaxed">
175+
For Start9, Docker, bare-metal, or if you prefer using the{" "}
176+
<a href="https://am-i.exposed" target="_blank" rel="noopener noreferrer" className="text-bitcoin underline hover:text-bitcoin/80">am-i.exposed</a>{" "}
177+
website with your own node instead of the Umbrel app.
178+
</p>
179+
180+
{/* Important callout */}
181+
<div className="bg-warning/10 border border-warning/30 rounded-xl p-5 flex gap-3">
182+
<AlertTriangle size={20} className="text-warning shrink-0 mt-0.5" />
183+
<div className="space-y-2">
184+
<p className="text-foreground font-medium text-sm">Two things must be true for manual setup</p>
185+
<ol className="text-muted text-sm leading-relaxed space-y-1 list-decimal list-inside">
186+
<li>Your mempool instance must have <strong className="text-foreground">CORS headers</strong> enabled (mempool does not include them by default)</li>
187+
<li>Your URL must end with <code className="text-bitcoin">/api</code> (e.g., <code className="text-bitcoin">http://localhost:3006/api</code>)</li>
188+
</ol>
189+
</div>
190+
</div>
191+
</section>
121192

122193
{/* CORS headers */}
123194
<section id="cors" className="space-y-4">
@@ -194,81 +265,19 @@ export default function SetupGuidePage() {
194265
</div>
195266
</section>
196267

197-
{/* Umbrel */}
198-
<section id="umbrel" className="space-y-4">
268+
{/* Umbrel manual */}
269+
<section className="space-y-4">
199270
<h2 className="text-2xl font-semibold text-foreground flex items-center gap-2">
200271
<Terminal size={22} />
201-
Umbrel
272+
Umbrel (Manual)
202273
</h2>
203-
204-
{/* Recommended: Umbrel app */}
205-
<div className="bg-card-bg border border-bitcoin/30 rounded-xl p-6 space-y-4">
206-
<div className="flex items-center gap-2">
207-
<span className="text-[10px] font-bold uppercase tracking-wider text-bitcoin bg-bitcoin/10 px-2 py-0.5 rounded">
208-
Recommended
209-
</span>
210-
</div>
211-
<h3 className="text-lg font-semibold text-foreground">Install the Umbrel App</h3>
212-
<p className="text-muted leading-relaxed">
213-
The easiest way. Install <span className="text-foreground font-medium">am-i.exposed</span> directly
214-
on your Umbrel and it automatically connects to your local mempool instance.
215-
No CORS headers, no SSH tunnel, no configuration needed.
216-
</p>
217-
<ol className="space-y-2 text-muted leading-relaxed">
218-
<li className="flex gap-2">
219-
<span className="text-bitcoin shrink-0 font-bold">1.</span>
220-
<span>
221-
Open your Umbrel dashboard and go to the <strong className="text-foreground">App Store</strong>
222-
</span>
223-
</li>
224-
<li className="flex gap-2">
225-
<span className="text-bitcoin shrink-0 font-bold">2.</span>
226-
<span>
227-
Click the <strong className="text-foreground">three-dot menu</strong> (top right)
228-
and select <strong className="text-foreground">Community App Stores</strong>
229-
</span>
230-
</li>
231-
<li className="flex gap-2">
232-
<span className="text-bitcoin shrink-0 font-bold">3.</span>
233-
<span>
234-
Paste the store URL and click <strong className="text-foreground">Add</strong>:
235-
</span>
236-
</li>
237-
</ol>
238-
<div className="relative">
239-
<pre className="bg-surface-inset rounded-lg p-3 text-sm font-mono overflow-x-auto text-bitcoin">
240-
https://github.com/Copexit/copexit-umbrel-app-store
241-
</pre>
242-
<CopyButton text="https://github.com/Copexit/copexit-umbrel-app-store" />
243-
</div>
244-
<ol start={4} className="space-y-2 text-muted leading-relaxed">
245-
<li className="flex gap-2">
246-
<span className="text-bitcoin shrink-0 font-bold">4.</span>
247-
<span>
248-
Find <strong className="text-foreground">am-i.exposed</strong> in the store and click <strong className="text-foreground">Install</strong>
249-
</span>
250-
</li>
251-
</ol>
252-
<p className="text-muted leading-relaxed">
253-
The app detects your local mempool automatically. All API requests stay on your local network
254-
and Chainalysis lookups are routed through a built-in Tor proxy.
255-
</p>
256-
</div>
257-
258-
{/* Alternative: manual setup */}
259274
<div className="bg-card-bg border border-card-border rounded-xl p-6 space-y-5">
260-
<h3 className="text-lg font-semibold text-foreground">
261-
Alternative: Use the Website with Your Umbrel Node
262-
</h3>
263275
<p className="text-muted leading-relaxed">
264-
If you prefer using <span className="text-foreground font-medium">am-i.exposed</span> from the public
276+
If you prefer using the{" "}
277+
<a href="https://am-i.exposed" target="_blank" rel="noopener noreferrer" className="text-bitcoin underline hover:text-bitcoin/80">am-i.exposed</a>{" "}
265278
website instead of the Umbrel app, you can point it at your Umbrel&apos;s mempool instance.
266-
This requires CORS headers and an SSH tunnel.
267-
</p>
268-
<p className="text-muted leading-relaxed">
269-
On Umbrel, the mempool app listens on <span className="text-foreground font-medium">port 3006</span> via
279+
The mempool app listens on <span className="text-foreground font-medium">port 3006</span> via
270280
Umbrel&apos;s <code className="text-foreground text-xs">app_proxy</code> container.
271-
Authentication is disabled for the mempool app, so no session token is needed.
272281
</p>
273282

274283
<div className="space-y-2">

0 commit comments

Comments
 (0)