Skip to content

Commit af1686b

Browse files
melvincarvalhomelvincarvalho
committed
Improve installation guide on test page with comprehensive step-by-step instructions
1 parent 7f9fa33 commit af1686b

1 file changed

Lines changed: 128 additions & 73 deletions

File tree

‎test-page/index.html‎

Lines changed: 128 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -226,107 +226,162 @@ <h1>🔑 Podkey Test Page</h1>
226226
</div>
227227

228228
<div class="status-card" id="installationCard" style="display: none">
229-
<h2>📦 Installation Instructions</h2>
229+
<div style="text-align: center; margin-bottom: 24px">
230+
<h2 style="margin-bottom: 8px">📦 Install Podkey Extension</h2>
231+
<p style="color: #64748b; font-size: 14px">
232+
Get started with <strong>did:nostr</strong> and <strong>Solid</strong> authentication
233+
</p>
234+
</div>
235+
236+
<div style="background: #f8fafc; padding: 16px; border-radius: 12px; margin-bottom: 20px; border-left: 4px solid #7c3aed">
237+
<p style="margin-bottom: 8px; font-size: 15px">
238+
<strong>What is Podkey?</strong>
239+
</p>
240+
<p style="font-size: 14px; color: #475569; line-height: 1.6">
241+
Podkey is a browser extension that provides <strong>NIP-07</strong> wallet functionality for the Nostr protocol.
242+
It enables seamless authentication to <strong>Solid pods</strong> using <strong>did:nostr</strong> decentralized identifiers.
243+
Your cryptographic keys stay secure in your browser, giving you full control over your identity and data.
244+
</p>
245+
</div>
246+
247+
<div style="background: #fef3c7; padding: 12px; border-radius: 8px; margin-bottom: 20px; border: 1px solid #fbbf24">
248+
<p style="margin: 0; font-size: 13px">
249+
<strong>📋 Prerequisites:</strong> You'll need <strong>Node.js</strong> (v18+) and <strong>Git</strong> installed.
250+
<a href="https://nodejs.org/" target="_blank" style="color: #7c3aed; font-weight: 600">Download Node.js</a> |
251+
<a href="https://git-scm.com/" target="_blank" style="color: #7c3aed; font-weight: 600">Download Git</a>
252+
</p>
253+
</div>
254+
255+
<h3 style="margin-bottom: 16px; font-size: 18px; color: #1e293b">Step-by-Step Installation</h3>
230256
<div style="line-height: 1.8; font-size: 14px">
231-
<p><strong>Don't have Podkey installed yet?</strong></p>
232-
<ol style="margin-left: 20px; margin-top: 12px">
233-
<li style="margin-bottom: 8px">
234-
<strong>Clone the repository:</strong><br />
257+
<ol style="margin-left: 20px; margin-top: 12px; counter-reset: step-counter">
258+
<li style="margin-bottom: 20px; padding-left: 8px">
259+
<strong style="color: #7c3aed">Step 1: Clone the Repository</strong><br />
260+
<div style="margin-top: 8px; margin-bottom: 4px">Open your terminal and run:</div>
235261
<code
236262
style="
237-
background: #f1f5f9;
238-
padding: 4px 8px;
239-
border-radius: 4px;
240-
font-size: 12px;
263+
display: block;
264+
background: #1e293b;
265+
color: #e2e8f0;
266+
padding: 12px;
267+
border-radius: 6px;
268+
font-size: 13px;
269+
font-family: 'Courier New', monospace;
270+
margin-top: 6px;
271+
overflow-x: auto;
241272
"
242273
>
243274
git clone https://github.com/JavaScriptSolidServer/podkey.git
244275
</code>
245276
</li>
246-
<li style="margin-bottom: 8px">
247-
<strong>Install dependencies:</strong><br />
277+
<li style="margin-bottom: 20px; padding-left: 8px">
278+
<strong style="color: #7c3aed">Step 2: Navigate and Install Dependencies</strong><br />
279+
<div style="margin-top: 8px; margin-bottom: 4px">Enter the directory and install required packages:</div>
248280
<code
249281
style="
250-
background: #f1f5f9;
251-
padding: 4px 8px;
252-
border-radius: 4px;
253-
font-size: 12px;
282+
display: block;
283+
background: #1e293b;
284+
color: #e2e8f0;
285+
padding: 12px;
286+
border-radius: 6px;
287+
font-size: 13px;
288+
font-family: 'Courier New', monospace;
289+
margin-top: 6px;
290+
overflow-x: auto;
254291
"
255292
>
256-
cd podkey && npm install
293+
cd podkey<br />
294+
npm install
257295
</code>
258296
</li>
259-
<li style="margin-bottom: 8px">
260-
<strong>Build the extension:</strong><br />
297+
<li style="margin-bottom: 20px; padding-left: 8px">
298+
<strong style="color: #7c3aed">Step 3: Build the Extension</strong><br />
299+
<div style="margin-top: 8px; margin-bottom: 4px">Compile the extension for browser use:</div>
261300
<code
262301
style="
263-
background: #f1f5f9;
264-
padding: 4px 8px;
265-
border-radius: 4px;
266-
font-size: 12px;
302+
display: block;
303+
background: #1e293b;
304+
color: #e2e8f0;
305+
padding: 12px;
306+
border-radius: 6px;
307+
font-size: 13px;
308+
font-family: 'Courier New', monospace;
309+
margin-top: 6px;
310+
overflow-x: auto;
267311
"
268312
>
269313
npm run build
270314
</code>
315+
<div style="margin-top: 6px; font-size: 12px; color: #64748b">
316+
✓ This creates <code style="background: #f1f5f9; padding: 2px 4px; border-radius: 3px; font-size: 11px">src/background.bundle.js</code>
317+
</div>
271318
</li>
272-
<li style="margin-bottom: 8px">
273-
<strong>Load in Chrome:</strong>
274-
<ul style="margin-left: 20px; margin-top: 4px">
275-
<li>
276-
Open
277-
<code
278-
style="
279-
background: #f1f5f9;
280-
padding: 2px 6px;
281-
border-radius: 4px;
282-
font-size: 11px;
283-
"
284-
>chrome://extensions/</code
285-
>
319+
<li style="margin-bottom: 20px; padding-left: 8px">
320+
<strong style="color: #7c3aed">Step 4: Load Extension in Chrome/Edge</strong><br />
321+
<div style="margin-top: 8px; margin-bottom: 8px">Follow these steps in your browser:</div>
322+
<ul style="margin-left: 20px; margin-top: 4px; list-style-type: disc">
323+
<li style="margin-bottom: 6px">
324+
Open <strong>chrome://extensions/</strong> (or <strong>edge://extensions/</strong> for Edge) in a new tab
325+
</li>
326+
<li style="margin-bottom: 6px">
327+
Enable <strong>"Developer mode"</strong> using the toggle in the top-right corner
286328
</li>
287-
<li>
288-
Enable <strong>"Developer mode"</strong> (top-right toggle)
329+
<li style="margin-bottom: 6px">
330+
Click the <strong>"Load unpacked"</strong> button that appears
289331
</li>
290-
<li>Click <strong>"Load unpacked"</strong></li>
291-
<li>
292-
Select the
293-
<code
294-
style="
295-
background: #f1f5f9;
296-
padding: 2px 6px;
297-
border-radius: 4px;
298-
font-size: 11px;
299-
"
300-
>podkey</code
301-
>
302-
directory
332+
<li style="margin-bottom: 6px">
333+
Navigate to and select the <code style="background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 11px">podkey</code> directory
334+
(the one containing <code style="background: #f1f5f9; padding: 2px 6px; border-radius: 4px; font-size: 11px">manifest.json</code>)
303335
</li>
304336
</ul>
305337
</li>
306-
<li>
307-
<strong>Reload this page</strong> and the extension should be
308-
detected!
338+
<li style="margin-bottom: 20px; padding-left: 8px">
339+
<strong style="color: #7c3aed">Step 5: Verify Installation</strong><br />
340+
<div style="margin-top: 8px">
341+
<strong>Reload this page</strong> (F5 or Ctrl+R) and the extension should be detected!
342+
You'll see a green checkmark above and can start testing Podkey's features.
343+
</div>
309344
</li>
310345
</ol>
311-
<p
312-
style="
313-
margin-top: 16px;
314-
padding: 12px;
315-
background: #fef3c7;
316-
border-radius: 8px;
317-
border: 1px solid #fbbf24;
318-
"
319-
>
320-
<strong>💡 Tip:</strong> Podkey is an extension for
321-
<strong>did:nostr</strong> and
322-
<strong>Solid</strong> authentication. Learn more at
323-
<a
324-
href="https://nostrcg.github.io/did-nostr/"
325-
target="_blank"
326-
style="color: #7c3aed; font-weight: 600"
327-
>did-nostr specification</a
328-
>
329-
</p>
346+
347+
<div style="background: #ecfdf5; padding: 16px; border-radius: 8px; margin-top: 24px; border: 1px solid #10b981">
348+
<p style="margin: 0 0 8px 0; font-size: 14px">
349+
<strong>✅ First Time Setup:</strong> After installation, click the Podkey extension icon in your browser toolbar
350+
to generate or import your first keypair. This creates your <strong>did:nostr</strong> identity!
351+
</p>
352+
</div>
353+
354+
<div style="background: #fef3c7; padding: 16px; border-radius: 8px; margin-top: 16px; border: 1px solid #fbbf24">
355+
<p style="margin: 0 0 12px 0; font-size: 14px">
356+
<strong>💡 Learn More:</strong>
357+
</p>
358+
<ul style="margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8">
359+
<li>
360+
<a href="https://github.com/JavaScriptSolidServer/podkey" target="_blank" style="color: #7c3aed; font-weight: 600">📚 GitHub Repository</a> - Source code and documentation
361+
</li>
362+
<li>
363+
<a href="https://nostrcg.github.io/did-nostr/" target="_blank" style="color: #7c3aed; font-weight: 600">🔗 did:nostr Specification</a> - Learn about Nostr DIDs
364+
</li>
365+
<li>
366+
<a href="https://solidproject.org/" target="_blank" style="color: #7c3aed; font-weight: 600">🌐 Solid Project</a> - Decentralized web platform
367+
</li>
368+
<li>
369+
<a href="https://github.com/nostr-protocol/nips/blob/master/07.md" target="_blank" style="color: #7c3aed; font-weight: 600">📖 NIP-07 Specification</a> - Nostr wallet standard
370+
</li>
371+
</ul>
372+
</div>
373+
374+
<div style="background: #fee2e2; padding: 16px; border-radius: 8px; margin-top: 16px; border: 1px solid #ef4444">
375+
<p style="margin: 0 0 8px 0; font-size: 14px">
376+
<strong>🔧 Troubleshooting:</strong>
377+
</p>
378+
<ul style="margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.8">
379+
<li><strong>Extension not detected?</strong> Make sure you reloaded this page after installation</li>
380+
<li><strong>Build errors?</strong> Ensure Node.js v18+ is installed: <code style="background: #f1f5f9; padding: 2px 4px; border-radius: 3px; font-size: 11px">node --version</code></li>
381+
<li><strong>Can't find "Load unpacked"?</strong> Developer mode must be enabled first</li>
382+
<li><strong>Extension icon not showing?</strong> Check chrome://extensions/ to ensure it's enabled</li>
383+
</ul>
384+
</div>
330385
</div>
331386
</div>
332387

0 commit comments

Comments
 (0)