ewancroft.uk
a Linkat frontend.
fix: improve welcome screen layout and setup instructions
- Widen container from max-w-md to max-w-4xl to prevent text overflow
- Add word-breaking classes to handle long DIDs and URLs properly
- Update setup instructions to match actual .env.example file
- Add required PUBLIC_ORIGIN configuration step
- Style code elements with theme-consistent background colors
- Add overflow protection and responsive padding
+1
.gitignore
+1
.gitignore
+8
-7
src/routes/+page.svelte
+8
-7
src/routes/+page.svelte
···
99
99
/>
100
100
101
101
<div class="container mx-auto px-4 py-8">
102
-
{#if data.noUsersConfigured}
102
+
{#if data.noUsersConfigured}
103
103
<div class="text-center py-12">
104
-
<div class="max-w-md mx-auto">
104
+
<div class="max-w-4xl mx-auto px-4">
105
105
<p class="text-lg mb-4 opacity-75">
106
106
Welcome to Linkat Directory! No users are currently configured.
107
107
</p>
108
-
<div class="bg-[var(--muted-bg)] rounded-lg p-6 text-left">
108
+
<div class="bg-[var(--muted-bg)] rounded-lg p-6 text-left overflow-hidden">
109
109
<h3 class="font-semibold mb-2">To get started:</h3>
110
110
<ol class="list-decimal list-inside space-y-2 text-sm">
111
-
<li>Create a <code>.env</code> file in your project root</li>
112
-
<li>Add your user DID: <code>DIRECTORY_OWNER=did:plc:your-did-here</code></li>
113
-
<li>Or add multiple users: <code>PUBLIC_LINKAT_USERS=did:plc:user1,did:web:user2</code></li>
114
-
<li>Restart the development server</li>
111
+
<li class="break-words">Copy <code class="break-all bg-[var(--card-bg)] px-1 py-0.5 rounded text-xs">. env.example</code> to <code class="break-all bg-[var(--card-bg)] px-1 py-0.5 rounded text-xs">.env</code></li>
112
+
<li class="break-words">Set your DID: <code class="break-all bg-[var(--card-bg)] px-1 py-0.5 rounded text-xs">DIRECTORY_OWNER=did:plc:your-did-here</code></li>
113
+
<li class="break-words">Set the origin: <code class="break-all bg-[var(--card-bg)] px-1 py-0.5 rounded text-xs">PUBLIC_ORIGIN=http://localhost:5713</code></li>
114
+
<li class="break-words">Optionally add more users: <code class="break-all bg-[var(--card-bg)] px-1 py-0.5 rounded text-xs">PUBLIC_LINKAT_USERS=did:plc:user1,did:plc:user2</code></li>
115
+
<li class="break-words">Restart the development server</li>
115
116
</ol>
116
117
</div>
117
118
</div>