ewancroft.uk
+1
.gitignore
+1
.gitignore
+7
.vscode/settings.json
+7
.vscode/settings.json
+1
-1
src/routes/+layout.svelte
+1
-1
src/routes/+layout.svelte
+49
-42
src/routes/+page.svelte
+49
-42
src/routes/+page.svelte
···
11
11
// Environment variable for directory owner
12
12
let directoryOwner = env.DIRECTORY_OWNER ?? "";
13
13
14
-
// Profile state for directory owner
15
-
let ownerProfile = $state<{ displayName?: string; handle?: string } | null>(null);
14
+
// Profile state for directory owner - initialize with data.profile if available
15
+
let ownerProfile = $state<{ displayName?: string; handle?: string } | null>(
16
+
data.profile || null
17
+
);
16
18
17
-
// Load the directory owner's profile
19
+
// Load the directory owner's profile only if we don't already have it
18
20
$effect(() => {
19
-
if (directoryOwner) {
21
+
if (directoryOwner && !ownerProfile) {
20
22
const loadOwner = async () => {
21
23
try {
22
24
const result = await getProfile(fetch);
···
56
58
57
59
const getDisplayName = (p: { displayName?: string; handle?: string } | null | undefined) =>
58
60
p?.displayName || p?.handle || null;
61
+
62
+
// Computed title that prioritizes display name, then handle, then DID
63
+
const pageTitle = $derived(() => {
64
+
if (!directoryOwner) return "Linkat Directory";
65
+
66
+
const displayName = getDisplayName(ownerProfile);
67
+
if (displayName) {
68
+
return `${displayName}'s Linkat Directory`;
69
+
}
70
+
71
+
// Fallback to directoryOwner (DID) while loading
72
+
return `${directoryOwner}'s Linkat Directory`;
73
+
});
74
+
75
+
const pageDescription = $derived(() => {
76
+
if (!directoryOwner) return "Discover amazing users curated by the Linkat community";
77
+
78
+
const displayName = getDisplayName(ownerProfile) || directoryOwner;
79
+
return `Discover users' links curated by ${displayName} in ${displayName}'s Linkat Directory`;
80
+
});
81
+
82
+
const pageKeywords = $derived(() => {
83
+
const baseKeywords = "Linkat, directory, links, Bluesky, community, curation";
84
+
if (!directoryOwner) return baseKeywords;
85
+
86
+
const displayName = getDisplayName(ownerProfile) || directoryOwner;
87
+
return `${baseKeywords}, ${displayName}`;
88
+
});
59
89
</script>
60
90
61
91
<DynamicHead
62
-
title={
63
-
directoryOwner
64
-
? `${getDisplayName(ownerProfile) || directoryOwner}'s Linkat Directory`
65
-
: "Linkat Directory"
66
-
}
67
-
description={
68
-
directoryOwner
69
-
? `Discover users' links curated by ${getDisplayName(ownerProfile) || directoryOwner} in ${getDisplayName(ownerProfile) || directoryOwner}'s Linkat Directory`
70
-
: "Discover amazing users curated by the Linkat community"
71
-
}
72
-
keywords={`Linkat, directory, links, Bluesky, community, curation${directoryOwner ? `, ${getDisplayName(ownerProfile) || directoryOwner}` : ""}`}
73
-
ogTitle={
74
-
directoryOwner
75
-
? `${getDisplayName(ownerProfile) || directoryOwner}'s Linkat Directory`
76
-
: "Linkat Directory"
77
-
}
78
-
ogDescription={
79
-
directoryOwner
80
-
? `Discover users' links curated by ${getDisplayName(ownerProfile) || directoryOwner} in ${getDisplayName(ownerProfile) || directoryOwner}'s Linkat Directory`
81
-
: "Discover amazing users' links curated by the Linkat community"
82
-
}
83
-
twitterTitle={
84
-
directoryOwner
85
-
? `${getDisplayName(ownerProfile) || directoryOwner}'s Linkat Directory`
86
-
: "Linkat Directory"
87
-
}
88
-
twitterDescription={
89
-
directoryOwner
90
-
? `Discover users' links curated by ${getDisplayName(ownerProfile) || directoryOwner} in ${getDisplayName(ownerProfile) || directoryOwner}'s Linkat Directory`
91
-
: "Discover amazing users' links curated by the Linkat community"
92
-
}
92
+
title={pageTitle()}
93
+
description={pageDescription()}
94
+
keywords={pageKeywords()}
95
+
ogTitle={pageTitle()}
96
+
ogDescription={pageDescription()}
97
+
twitterTitle={pageTitle()}
98
+
twitterDescription={pageDescription()}
93
99
/>
94
100
95
101
<div class="container mx-auto px-4 py-8">
96
-
{#if data.noUsersConfigured}
102
+
{#if data.noUsersConfigured}
97
103
<div class="text-center py-12">
98
-
<div class="max-w-md mx-auto">
104
+
<div class="max-w-4xl mx-auto px-4">
99
105
<p class="text-lg mb-4 opacity-75">
100
106
Welcome to Linkat Directory! No users are currently configured.
101
107
</p>
102
-
<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">
103
109
<h3 class="font-semibold mb-2">To get started:</h3>
104
110
<ol class="list-decimal list-inside space-y-2 text-sm">
105
-
<li>Create a <code>.env</code> file in your project root</li>
106
-
<li>Add your user DID: <code>DIRECTORY_OWNER=did:plc:your-did-here</code></li>
107
-
<li>Or add multiple users: <code>PUBLIC_LINKAT_USERS=did:plc:user1,did:web:user2</code></li>
108
-
<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>
109
116
</ol>
110
117
</div>
111
118
</div>