Coffee journaling on ATProto (alpha)
alpha.arabica.social
coffee
fix: misc styling and code refactor fixes
authored by
Patrick Dewey
and committed by
Tangled
8c23d47f
6345d9a0
+103
-58
+1
-1
internal/feed/service.go
+1
-1
internal/feed/service.go
···
34
34
// PublicFeedCacheSize is the number of items to cache in the server
35
35
PublicFeedCacheSize = 20
36
36
// PublicFeedLimit is the number of items to show for unauthenticated users
37
-
PublicFeedLimit = 5
37
+
PublicFeedLimit = 10
38
38
// Number of feed items to show for authenticated users.
39
39
FeedLimit = 20
40
40
)
+1
-1
internal/web/components/layout.templ
+1
-1
internal/web/components/layout.templ
···
115
115
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml"/>
116
116
<link rel="icon" href="/static/favicon-32.svg" type="image/svg+xml" sizes="32x32"/>
117
117
<link rel="apple-touch-icon" href="/static/icon-192.svg"/>
118
-
<link rel="stylesheet" href="/static/css/output.css?v=0.9.0"/>
118
+
<link rel="stylesheet" href="/static/css/output.css?v=0.9.1"/>
119
119
<style>
120
120
[x-cloak] { display: none !important; }
121
121
</style>
+88
-47
internal/web/pages/create_account.templ
+88
-47
internal/web/pages/create_account.templ
···
2
2
3
3
import "tangled.org/arabica.social/arabica/internal/web/components"
4
4
5
+
// PDSProvider describes a single PDS hosting option.
6
+
type PDSProvider struct {
7
+
URL string // Full URL for the signup form (e.g. "https://arabica.systems")
8
+
Name string // Display name (e.g. "Arabica")
9
+
Domain string // Display domain (e.g. "arabica.systems")
10
+
Description string // Short description shown under the name
11
+
Location string // Geographic location (e.g. "United States")
12
+
Badge string // Status badge text (e.g. "Invite Only", "Open")
13
+
BadgeColor string // Tailwind color prefix for badge (e.g. "amber", "green")
14
+
OperatorName string // Optional: handle of community operator (e.g. "@baileytownsend.dev")
15
+
OperatorURL string // Optional: link to operator profile
16
+
}
17
+
18
+
// PDSCategory groups providers under a heading.
19
+
type PDSCategory struct {
20
+
Title string
21
+
Description string
22
+
Providers []PDSProvider
23
+
}
24
+
25
+
// pdsCategories returns the list of PDS provider categories shown on the create account page.
26
+
func pdsCategories() []PDSCategory {
27
+
return []PDSCategory{
28
+
{
29
+
Title: "App Providers",
30
+
Description: "These apps host your account and data for you.",
31
+
Providers: []PDSProvider{
32
+
{
33
+
URL: "https://arabica.systems",
34
+
Name: "Arabica",
35
+
Domain: "arabica.systems",
36
+
Description: "The official Arabica provider.",
37
+
Location: "United States",
38
+
Badge: "Invite Only",
39
+
BadgeColor: "amber",
40
+
},
41
+
},
42
+
},
43
+
{
44
+
Title: "Independent Providers",
45
+
Description: "Account hosts run by the community. They hold your account and data, independent of any single app.",
46
+
Providers: []PDSProvider{
47
+
{
48
+
URL: "https://selfhosted.social",
49
+
Name: "selfhosted.social",
50
+
Domain: "selfhosted.social",
51
+
Description: "Community provider",
52
+
Location: "United States",
53
+
Badge: "Open",
54
+
BadgeColor: "green",
55
+
OperatorName: "@baileytownsend.dev",
56
+
OperatorURL: "https://bsky.app/profile/baileytownsend.dev",
57
+
},
58
+
},
59
+
},
60
+
}
61
+
}
62
+
5
63
// CreateAccountProps holds state for the account creation page.
6
64
type CreateAccountProps struct {
7
65
Error string // Error message from failed signup attempt
···
31
89
{ props.Error }
32
90
</div>
33
91
}
34
-
<!-- App providers -->
35
-
<div class="mb-6">
36
-
<h2 class="text-sm font-medium text-brown-600 uppercase tracking-wider mb-3">App Providers</h2>
37
-
<p class="text-sm text-brown-500 mb-3">These apps host your account and data { "for" } you.</p>
38
-
<div class="space-y-3">
39
-
@pdsCard("https://arabica.systems") {
40
-
<p class="flex items-baseline gap-2 text-lg font-semibold text-brown-900">
41
-
Arabica
42
-
<span class="relative -top-px inline-flex items-center rounded-full bg-amber-100 px-2 py-0.5 text-xs font-medium text-amber-800">
43
-
Invite Only
44
-
</span>
45
-
</p>
46
-
<p class="text-sm text-brown-700">The official Arabica provider.</p>
47
-
<p class="flex items-center gap-1 text-xs text-brown-500">
48
-
arabica.systems ·
49
-
@locationPin()
50
-
United States
51
-
</p>
52
-
}
92
+
for _, cat := range pdsCategories() {
93
+
<div class="mb-6">
94
+
<h2 class="text-sm font-medium text-brown-600 uppercase tracking-wider mb-3">{ cat.Title }</h2>
95
+
<p class="text-sm text-brown-500 mb-3">{ cat.Description }</p>
96
+
<div class="space-y-3">
97
+
for _, p := range cat.Providers {
98
+
@pdsCard(p)
99
+
}
100
+
</div>
53
101
</div>
54
-
</div>
55
-
<!-- Independent providers -->
56
-
<div class="mb-6">
57
-
<h2 class="text-sm font-medium text-brown-600 uppercase tracking-wider mb-3">Independent Providers</h2>
58
-
<p class="text-sm text-brown-500 mb-3">Account hosts run by the community. They hold your account and data, independent of any single app.</p>
59
-
<div class="space-y-3">
60
-
@pdsCard("https://selfhosted.social") {
61
-
<p class="flex items-baseline gap-2 text-lg font-semibold text-brown-900">
62
-
selfhosted.social
63
-
<span class="relative -top-px inline-flex items-center rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
64
-
Open
65
-
</span>
66
-
</p>
67
-
<p class="text-sm text-brown-700">
68
-
Community provider hosted by
69
-
<a href="https://bsky.app/profile/baileytownsend.dev" target="_blank" rel="noopener noreferrer" class="link-bold">{ "@baileytownsend.dev" }</a>.
70
-
</p>
71
-
<p class="flex items-center gap-1 text-xs text-brown-500">
72
-
selfhosted.social ·
73
-
@locationPin()
74
-
United States
75
-
</p>
76
-
}
77
-
</div>
78
-
</div>
102
+
}
79
103
<!-- Self-hosted note -->
80
104
<div class="text-sm text-brown-500 mb-6">
81
105
<strong class="text-brown-700">Self-hosted:</strong> Technical users can <a href="https://atproto.com/guides/self-hosting" target="_blank" rel="noopener noreferrer" class="link">run their own provider</a> { "for" } full control over their data.
···
92
116
}
93
117
94
118
// pdsCard renders a PDS server option card with a sign-up button.
95
-
templ pdsCard(pdsURL string) {
119
+
templ pdsCard(p PDSProvider) {
96
120
<div class="card card-inner">
97
121
<form method="POST" action="/join/create">
98
-
<input type="hidden" name="pds_url" value={ pdsURL }/>
99
-
{ children... }
122
+
<input type="hidden" name="pds_url" value={ p.URL }/>
123
+
<p class="flex items-baseline gap-2 text-lg font-semibold text-brown-900">
124
+
{ p.Name }
125
+
<span class={ "relative -top-px inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium", "bg-" + p.BadgeColor + "-100", "text-" + p.BadgeColor + "-800" }>
126
+
{ p.Badge }
127
+
</span>
128
+
</p>
129
+
<p class="text-sm text-brown-700">
130
+
{ p.Description }
131
+
if p.OperatorName != "" {
132
+
{ " hosted by " }
133
+
<a href={ templ.SafeURL(p.OperatorURL) } target="_blank" rel="noopener noreferrer" class="link-bold">{ p.OperatorName }</a>.
134
+
}
135
+
</p>
136
+
<p class="flex items-center gap-1 text-xs text-brown-500">
137
+
{ p.Domain } ·
138
+
@locationPin()
139
+
{ p.Location }
140
+
</p>
100
141
<div class="mt-3">
101
142
@components.PrimaryButton(components.ButtonProps{
102
143
Text: "Create Account",
+1
-1
internal/web/pages/home.templ
+1
-1
internal/web/pages/home.templ
···
36
36
37
37
templ CommunityFeedSection(isAuthenticated bool) {
38
38
<div class="card p-2 sm:p-6 mb-8">
39
-
<h3 class="text-xl font-bold text-brown-900 mb-4">Community Feed</h3>
39
+
<h3 class="text-xl font-bold text-brown-900 mb-4">Community Activity</h3>
40
40
if isAuthenticated {
41
41
@FeedFilterBar(FeedQueryState{IsAuthenticated: isAuthenticated})
42
42
}
+7
-3
static/css/app.css
+7
-3
static/css/app.css
···
917
917
box-shadow: inset 0 2px 8px rgba(0,0,0,0.12);
918
918
}
919
919
920
+
.feed-masonry-col {
921
+
display: flex;
922
+
flex-direction: column;
923
+
gap: 0.75rem;
924
+
min-width: 0;
925
+
}
926
+
920
927
@media (min-width: 768px) {
921
928
.feed-grid {
922
929
grid-template-columns: repeat(2, 1fr);
···
925
932
}
926
933
927
934
.feed-masonry-col {
928
-
display: flex;
929
-
flex-direction: column;
930
935
gap: 1.25rem;
931
-
min-width: 0;
932
936
}
933
937
}
934
938