Skip to content

Commit 80e36f0

Browse files
blackcoffeexbtblackcoffeexbt
committed
Added user guide to gh site
1 parent 9c7a06c commit 80e36f0

2 files changed

Lines changed: 271 additions & 0 deletions

File tree

‎gh-pages/components/SiteHeader.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ const mobileOpen = ref(false)
33
44
const navLinks = [
55
{ label: 'How It Works', to: '/how-it-works' },
6+
{ label: 'User Guide', to: '/user-guide' },
67
// { label: 'For Business', to: '/lnbits-for-business' },
78
{ label: 'FAQs', to: '/faqs' },
89
]

‎gh-pages/pages/user-guide.vue‎

Lines changed: 270 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,270 @@
1+
<script setup>
2+
const sections = [
3+
{ id: 'introduction', label: 'Introduction' },
4+
{ id: 'unboxing-and-plugging-in', label: 'Unboxing and Plugging In' },
5+
{ id: 'accessing-the-configurator', label: 'Initial Set-up' },
6+
{ id: 'after-configuration', label: 'Managing Your LNbitsBox' },
7+
]
8+
</script>
9+
10+
<template>
11+
<div>
12+
<SiteHeader />
13+
14+
<section class="relative overflow-hidden pt-24 pb-16 px-5 sm:px-8">
15+
<div
16+
class="pointer-events-none absolute -top-40 left-1/2 -translate-x-1/2 w-[700px] h-[500px] rounded-full"
17+
style="background: radial-gradient(ellipse at center, rgba(255,30,230,0.08) 0%, transparent 65%);"
18+
/>
19+
<div class="relative max-w-5xl mx-auto">
20+
<div class="inline-flex items-center gap-2 mb-6">
21+
<span class="w-1.5 h-1.5 rounded-full bg-ln-pink animate-pulse" />
22+
<span class="font-mono text-xs uppercase tracking-widest text-ln-muted">User Guide</span>
23+
</div>
24+
<h1
25+
class="font-display font-bold text-ln-text leading-[1.1] tracking-tight mb-4"
26+
style="font-size: clamp(2rem, 6vw, 3.5rem);"
27+
>
28+
LNbitsBox User Guide
29+
</h1>
30+
</div>
31+
</section>
32+
33+
<section class="px-5 sm:px-8 pb-24 border-t border-ln-border">
34+
<div class="max-w-5xl mx-auto grid lg:grid-cols-[240px_minmax(0,1fr)] gap-10 pt-10">
35+
<aside class="lg:sticky lg:top-24 lg:self-start">
36+
<div class="border border-ln-border rounded-2xl bg-ln-card/70 p-5 backdrop-blur-sm">
37+
<p class="font-mono text-xs uppercase tracking-[0.25em] text-ln-muted mb-4">
38+
On this page
39+
</p>
40+
<nav class="flex flex-col gap-2">
41+
<a
42+
v-for="section in sections"
43+
:key="section.id"
44+
:href="`#${section.id}`"
45+
class="rounded-xl px-3 py-2 font-display text-sm text-ln-muted hover:text-ln-text hover:bg-white/5 transition-colors duration-150"
46+
>
47+
{{ section.label }}
48+
</a>
49+
</nav>
50+
</div>
51+
</aside>
52+
53+
<div class="space-y-6">
54+
<section
55+
id="introduction"
56+
class="scroll-mt-24 border border-ln-border rounded-3xl bg-ln-card/60 p-6 sm:p-8"
57+
>
58+
<p class="font-mono text-xs uppercase tracking-[0.25em] text-ln-pink mb-3">
59+
Introduction
60+
</p>
61+
<h2 class="font-display font-bold text-ln-text text-2xl sm:text-3xl tracking-tight mb-4">
62+
What this guide covers
63+
</h2>
64+
<p class="font-display text-ln-muted text-base sm:text-lg leading-relaxed mb-4">
65+
LNbitsBox simple to get up and running. You can go from unopened box
66+
to working setup in a few minutes using only a browser on the same network.
67+
</p>
68+
<p class="font-display text-ln-muted text-base sm:text-lg leading-relaxed">
69+
This guide walks through the first setup, and shows where to how your LNbitsBox once up and running.
70+
</p>
71+
</section>
72+
73+
<section
74+
id="unboxing-and-plugging-in"
75+
class="scroll-mt-24 border border-ln-border rounded-3xl bg-ln-card/60 p-6 sm:p-8"
76+
>
77+
<p class="font-mono text-xs uppercase tracking-[0.25em] text-ln-pink mb-3">
78+
Unboxing and Plugging In
79+
</p>
80+
<h2 class="font-display font-bold text-ln-text text-2xl sm:text-3xl tracking-tight mb-6">
81+
Connect the hardware
82+
</h2>
83+
84+
<div class="rounded-2xl border border-ln-border bg-black/10 p-5 mb-4">
85+
<h3 class="font-display font-semibold text-ln-text text-lg mb-2">Network</h3>
86+
<p class="font-display text-ln-muted text-sm leading-relaxed mb-3">
87+
You can connect your LNbitsBox to the internet using either Wi-Fi or ethernet.
88+
</p>
89+
<ul class="list-disc list-inside font-display text-ln-muted text-sm leading-relaxed mb-3">
90+
<li>Ethernet cable - Connect to your router for a stable and fast network connection.</li>
91+
<li>Wi-Fi - Remove the SD card from your LNbitsBox and connect to your computer. Copy the file wifi.txt.example to wifi.txt and add your WiFi details.</li>
92+
</ul>
93+
</div>
94+
<div class="rounded-2xl border border-ln-pink/20 bg-ln-pink/5 p-5 mb-4">
95+
<p class="font-display text-ln-text text-sm leading-relaxed">
96+
Tip: Ethernet is usually the fastest way to reach the configurator for the first time.
97+
Wi-Fi works too, but only after the network details have been added to the SD card.
98+
</p>
99+
</div>
100+
<div class="rounded-2xl border border-ln-border bg-black/10 p-5 mb-4">
101+
<h3 class="font-display font-semibold text-ln-text text-lg mb-2">HDMI (optional)</h3>
102+
<p class="font-display text-ln-muted text-sm leading-relaxed">
103+
You do not need a monitor to use LNbitsBox, but connecting one can help. During boot,
104+
it can show device status and local network details.
105+
</p>
106+
</div>
107+
108+
<div class="space-y-4">
109+
<div class="rounded-2xl border border-ln-border bg-black/10 p-5">
110+
<h3 class="font-display font-semibold text-ln-text text-lg mb-2">Power cable</h3>
111+
<p class="font-display text-ln-muted text-sm leading-relaxed">
112+
Connect the included power supply to LNbitsBox and power it on. The device will begin
113+
booting immediately.
114+
</p>
115+
</div>
116+
</div>
117+
</section>
118+
119+
<section
120+
id="accessing-the-configurator"
121+
class="scroll-mt-24 border border-ln-border rounded-3xl bg-ln-card/60 p-6 sm:p-8"
122+
>
123+
<p class="font-mono text-xs uppercase tracking-[0.25em] text-ln-pink mb-3">
124+
Initial Set-up
125+
</p>
126+
<h2 class="font-display font-bold text-ln-text text-2xl sm:text-3xl tracking-tight mb-6">
127+
Open the setup page in your browser
128+
</h2>
129+
130+
<div class="space-y-5">
131+
<div class="rounded-2xl border border-ln-border bg-black/10 p-5">
132+
<h3 class="font-display font-semibold text-ln-text text-lg mb-2">Start with `lnbits.local`</h3>
133+
<p class="font-display text-ln-muted text-sm leading-relaxed mb-2">
134+
On a phone or computer connected to the same network as your LNbitsBox, open a web browser and go to
135+
`http://lnbits.local`.
136+
</p>
137+
<p class="font-display text-ln-muted text-sm leading-relaxed">
138+
You will see the SSL installation page, which is the first step of the configuration process.
139+
Follow the prompts to set up the SSL certificate on your device.
140+
This ensures secure communication between your device and the browser.
141+
</p>
142+
</div>
143+
144+
<div class="rounded-2xl border border-ln-border bg-black/10 p-5">
145+
<h3 class="font-display font-semibold text-ln-text text-lg mb-2">
146+
If `lnbits.local` does not load
147+
</h3>
148+
<p class="font-display text-ln-muted text-sm leading-relaxed mb-3">
149+
Use a network scanner such as Angry IP Scanner to find the device on your local network.
150+
Once you have the IP address, open that address in your browser instead.
151+
</p>
152+
<p class="font-display text-ln-muted text-sm leading-relaxed">
153+
If you connected a monitor, the device may also show its network address during boot.
154+
</p>
155+
</div>
156+
157+
<div class="rounded-2xl border border-ln-border bg-black/10 p-5">
158+
<h3 class="font-display font-semibold text-ln-text text-lg mb-3">Configuration steps</h3>
159+
<ol class="space-y-3">
160+
<li class="flex gap-3">
161+
<span class="w-6 h-6 flex-shrink-0 rounded-lg bg-ln-pink/10 text-ln-pink font-mono text-xs flex items-center justify-center">1</span>
162+
<p class="font-display text-ln-muted text-sm leading-relaxed">
163+
Open the configurator and follow the prompts to create your wallet.
164+
</p>
165+
</li>
166+
<li class="flex gap-3">
167+
<span class="w-6 h-6 flex-shrink-0 rounded-lg bg-ln-pink/10 text-ln-pink font-mono text-xs flex items-center justify-center">2</span>
168+
<p class="font-display text-ln-muted text-sm leading-relaxed">
169+
Write down and securely store the seed phrase shown during setup. This backup is
170+
critical for recovering access if you lose access to your LNbitsBox.
171+
</p>
172+
</li>
173+
<li class="flex gap-3">
174+
<span class="w-6 h-6 flex-shrink-0 rounded-lg bg-ln-pink/10 text-ln-pink font-mono text-xs flex items-center justify-center">3</span>
175+
<p class="font-display text-ln-muted text-sm leading-relaxed">
176+
Choose a strong password and save it somewhere safe. This password protects
177+
administrative access to your LNbitsBox.
178+
</p>
179+
</li>
180+
</ol>
181+
</div>
182+
183+
<div class="grid sm:grid-cols-2 gap-4">
184+
<div class="rounded-2xl border border-ln-pink/20 bg-ln-pink/5 p-5">
185+
<h3 class="font-display font-semibold text-ln-text text-base mb-2">
186+
Back up the seed phrase
187+
</h3>
188+
<p class="font-display text-ln-muted text-sm leading-relaxed">
189+
Treat the seed phrase as the most important part of the setup. If you lose the device,
190+
this is what protects your ability to recover your funds.
191+
</p>
192+
</div>
193+
<div class="rounded-2xl border border-ln-pink/20 bg-ln-pink/5 p-5">
194+
<h3 class="font-display font-semibold text-ln-text text-base mb-2">
195+
Why the SSH password matters
196+
</h3>
197+
<p class="font-display text-ln-muted text-sm leading-relaxed">
198+
The SSH password is for secure device access and management. Use a strong password and
199+
keep it saved somewhere you control.
200+
</p>
201+
</div>
202+
</div>
203+
</div>
204+
</section>
205+
206+
<section
207+
id="after-configuration"
208+
class="scroll-mt-24 border border-ln-border rounded-3xl bg-ln-card/60 p-6 sm:p-8"
209+
>
210+
<p class="font-mono text-xs uppercase tracking-[0.25em] text-ln-pink mb-3">
211+
Managing Your LNbitsBox
212+
</p>
213+
<h2 class="font-display font-bold text-ln-text text-2xl sm:text-3xl tracking-tight mb-6">
214+
The Admin Panel and Remote Access
215+
</h2>
216+
217+
<div class="space-y-4">
218+
<div class="rounded-2xl border border-ln-border bg-black/10 p-5">
219+
<h3 class="font-display font-semibold text-ln-text text-lg mb-2">
220+
Open the admin panel at <a href="http://lnbits.local/box" target="_blank" class="text-ln-pink hover:underline">lnbits.local/box</a>
221+
</h3>
222+
<p class="font-display text-ln-muted text-sm leading-relaxed">
223+
After setup is complete, you can access the admin panel by visiting <a href="http://lnbits.local/box" target="_blank" class="text-ln-pink hover:underline">lnbits.local/box</a> on your
224+
LNbitsBox address. This is where you can manage updates and settings, make backups, monitor device status, and perform other administrative tasks.
225+
</p>
226+
</div>
227+
228+
<div class="rounded-2xl border border-ln-border bg-black/10 p-5">
229+
<h3 class="font-display font-semibold text-ln-text text-lg mb-2">
230+
Use the password from setup
231+
</h3>
232+
<p class="font-display text-ln-muted text-sm leading-relaxed">
233+
Log in to the admin panel using the SSH password you created during configuration.
234+
</p>
235+
</div>
236+
237+
<div class="rounded-2xl border border-ln-border bg-black/10 p-5">
238+
<h3 class="font-display font-semibold text-ln-text text-lg mb-2">
239+
Remote access options
240+
</h3>
241+
<p class="font-display text-ln-muted text-sm leading-relaxed mb-3">
242+
LNbitsBox supports remote access in two ways: through a paid tunnel service, or through
243+
Tor. Both are managed from the box after your initial setup is complete.
244+
</p>
245+
<p class="font-display text-ln-muted text-sm leading-relaxed">
246+
The paid tunnel is designed for straightforward remote access from a normal browser.
247+
Tor provides an alternative route for users who prefer that access method.
248+
</p>
249+
</div>
250+
251+
<div class="rounded-2xl border border-ln-border bg-black/10 p-5">
252+
<h3 class="font-display font-semibold text-ln-text text-lg mb-2">
253+
Running updates
254+
</h3>
255+
<p class="font-display text-ln-muted text-sm leading-relaxed mb-2">
256+
Software updates are handled from the admin panel. When an update is available you will see a notification on the dashboard.
257+
</p>
258+
<p class="font-display text-ln-muted text-sm leading-relaxed">
259+
We recommend applying updates when they become available to ensure you have the latest features and security improvements.
260+
</p>
261+
</div>
262+
</div>
263+
</section>
264+
</div>
265+
</div>
266+
</section>
267+
268+
<SiteFooter />
269+
</div>
270+
</template>

0 commit comments

Comments
 (0)