forked from
joebasser.com/atmosphere-account
this repo has no description
fix(dev-resources): API reference layout + snippet overflow
Replace inline query-string hints with a Parameters list under each
endpoint card. Add section-heading spacing for Endpoints and Schema.
Constrain playground snippet grid with minmax(0,1fr) and min-width:0
so long URLs scroll inside the card instead of breaking the layout.
Made-with: Cursor
+148
-15
+82
-6
assets/styles.css
+82
-6
assets/styles.css
···
3575
3575
flex-direction: column;
3576
3576
gap: 1rem;
3577
3577
text-align: left;
3578
+
/* min-width: 0 lets the inner <pre> blocks honour overflow:auto
3579
+
* instead of pushing the card wider than its parent (the default
3580
+
* min-width: auto on flex/grid items expands to fit content). */
3581
+
min-width: 0;
3578
3582
}
3579
3583
3580
3584
.api-playground-tabs {
···
3733
3737
max-height: 360px;
3734
3738
overflow: auto;
3735
3739
white-space: pre;
3740
+
/* Prevents grid/flex parents from expanding to the longest line —
3741
+
* without this, a long fetch URL pushes the snippet column past
3742
+
* the playground card and off the page. */
3743
+
min-width: 0;
3744
+
max-width: 100%;
3736
3745
}
3737
3746
3738
3747
.api-playground-snippets {
3739
3748
display: grid;
3740
3749
gap: 0.85rem;
3741
3750
grid-template-columns: 1fr;
3751
+
/* Required so the inner <pre> can scroll horizontally instead of
3752
+
* stretching the grid past its parent. */
3753
+
min-width: 0;
3742
3754
}
3743
3755
3744
3756
@media (min-width: 720px) {
3745
3757
.api-playground-snippets {
3746
-
grid-template-columns: 1fr 1fr;
3758
+
/* `minmax(0, 1fr)` keeps both columns equal-width regardless of
3759
+
* the longest line in either snippet (defaults to min-content
3760
+
* which would otherwise overflow). */
3761
+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
3747
3762
}
3748
3763
}
3749
3764
···
3751
3766
display: flex;
3752
3767
flex-direction: column;
3753
3768
gap: 0.4rem;
3769
+
min-width: 0;
3754
3770
}
3755
3771
3756
3772
.api-playground-snippet-header {
···
3815
3831
font-size: 0.75rem;
3816
3832
}
3817
3833
3834
+
.api-endpoint-summary {
3835
+
margin: 0;
3836
+
font-size: 0.9rem;
3837
+
color: rgba(14, 20, 40, 0.78);
3838
+
line-height: 1.5;
3839
+
}
3840
+
3841
+
/* Per-card parameters block. Renders below the summary as a
3842
+
* "Parameters" label + indented bullet list — much easier to scan
3843
+
* than the previous inline `?q=&...` query-string template. */
3818
3844
.api-endpoint-params {
3819
-
font-size: 0.78rem;
3820
-
color: rgba(14, 20, 40, 0.6);
3845
+
margin: 0;
3846
+
display: flex;
3847
+
flex-direction: column;
3848
+
gap: 0.3rem;
3821
3849
}
3822
3850
3823
-
.api-endpoint-summary {
3851
+
.api-endpoint-params-label {
3852
+
font-size: 0.7rem;
3853
+
font-weight: 600;
3854
+
letter-spacing: 0.04em;
3855
+
text-transform: uppercase;
3856
+
color: rgba(14, 20, 40, 0.55);
3857
+
}
3858
+
3859
+
.api-endpoint-params-list {
3824
3860
margin: 0;
3825
-
font-size: 0.9rem;
3861
+
padding-left: 1.1rem;
3862
+
display: flex;
3863
+
flex-direction: column;
3864
+
gap: 0.2rem;
3865
+
font-size: 0.85rem;
3826
3866
color: rgba(14, 20, 40, 0.78);
3827
3867
line-height: 1.5;
3828
3868
}
3829
3869
3870
+
.api-endpoint-param-name {
3871
+
font-family: "IBM Plex Mono", monospace;
3872
+
font-size: 0.8rem;
3873
+
color: #1f4f96;
3874
+
}
3875
+
3876
+
.api-endpoint-param-default {
3877
+
color: rgba(14, 20, 40, 0.55);
3878
+
font-size: 0.8rem;
3879
+
}
3880
+
3881
+
.api-endpoint-param-default code {
3882
+
font-family: "IBM Plex Mono", monospace;
3883
+
}
3884
+
3830
3885
.api-endpoint-cache {
3831
3886
margin: 0;
3832
3887
font-size: 0.75rem;
···
3837
3892
font-family: "IBM Plex Mono", monospace;
3838
3893
}
3839
3894
3895
+
/* Sub-section headings inside the Profile API panel (Endpoints,
3896
+
* Schema). Centred to match the page's other section headers, with
3897
+
* generous top spacing so the divider feels intentional rather than
3898
+
* crammed against the preceding card. */
3899
+
.api-section-heading {
3900
+
margin: 3rem 0 1.25rem;
3901
+
text-align: center;
3902
+
}
3903
+
3904
+
.api-section-heading .divider {
3905
+
margin-top: 0.6rem;
3906
+
}
3907
+
3840
3908
/* Dark phase — keep the playground readable when the sky is in its
3841
3909
* darker pass. The /developer-resources page forces sky-static today
3842
3910
* (effectsOff allowlist), but mobile and reduced-motion users may
···
3867
3935
border-color: rgba(255, 255, 255, 0.12);
3868
3936
}
3869
3937
.dark-phase .api-endpoint-summary,
3870
-
.dark-phase .api-endpoint-cache {
3938
+
.dark-phase .api-endpoint-cache,
3939
+
.dark-phase .api-endpoint-params-list {
3871
3940
color: rgba(245, 247, 250, 0.78);
3872
3941
}
3873
3942
.dark-phase .api-endpoint-path {
3874
3943
color: rgba(245, 247, 250, 0.95);
3875
3944
}
3945
+
.dark-phase .api-endpoint-params-label,
3946
+
.dark-phase .api-endpoint-param-default {
3947
+
color: rgba(245, 247, 250, 0.6);
3948
+
}
3949
+
.dark-phase .api-endpoint-param-name {
3950
+
color: #cfdfff;
3951
+
}
+39
-7
components/DeveloperResources.tsx
+39
-7
components/DeveloperResources.tsx
···
75
75
76
76
<RegistryApiPlayground />
77
77
78
-
<h3 class="text-subsection mt-5">{tApi.endpointsHeading}</h3>
79
-
<div class="divider" />
78
+
{/* Visual gap between the playground card and the next
79
+
subheading. We don't use the global mt-* utilities here
80
+
because they top out at mt-4 (2rem); the Endpoints/Schema
81
+
dividers want a touch more breathing room. */}
82
+
<div class="api-section-heading">
83
+
<h3 class="text-subsection">{tApi.endpointsHeading}</h3>
84
+
<div class="divider" />
85
+
</div>
80
86
<dl class="api-endpoints">
81
87
{(["profile", "search", "featured", "avatar"] as const).map(
82
88
(key) => {
83
89
const e = tApi.endpoints[key];
90
+
const params = "params" in e ? e.params : undefined;
84
91
return (
85
92
<div class="api-endpoint" key={key}>
86
93
<dt class="api-endpoint-path">
87
94
<span class="api-endpoint-method">{e.method}</span>
88
95
<code>{e.path}</code>
89
-
{"params" in e && e.params && (
90
-
<code class="api-endpoint-params">{e.params}</code>
91
-
)}
92
96
</dt>
93
97
<dd class="api-endpoint-summary">{e.summary}</dd>
98
+
{params && params.length > 0 && (
99
+
<dd class="api-endpoint-params">
100
+
<span class="api-endpoint-params-label">
101
+
{tApi.paramsLabel}
102
+
</span>
103
+
<ul class="api-endpoint-params-list">
104
+
{params.map((p) => (
105
+
<li key={p.name}>
106
+
<code class="api-endpoint-param-name">
107
+
{p.name}
108
+
</code>
109
+
<span class="api-endpoint-param-desc">
110
+
{" — "}
111
+
{p.desc}
112
+
</span>
113
+
{"default" in p && p.default && (
114
+
<span class="api-endpoint-param-default">
115
+
{" "}
116
+
({tApi.paramDefault}: <code>{p.default}</code>)
117
+
</span>
118
+
)}
119
+
</li>
120
+
))}
121
+
</ul>
122
+
</dd>
123
+
)}
94
124
<dd class="api-endpoint-cache">
95
125
<code>cache-control: {e.cache}</code>
96
126
</dd>
···
100
130
)}
101
131
</dl>
102
132
103
-
<h3 class="text-subsection mt-5">{tApi.schemaHeading}</h3>
104
-
<div class="divider" />
133
+
<div class="api-section-heading">
134
+
<h3 class="text-subsection">{tApi.schemaHeading}</h3>
135
+
<div class="divider" />
136
+
</div>
105
137
<p class="text-body mt-2 mb-3">{tApi.schemaBody}</p>
106
138
<div class="badge-downloads">
107
139
<a
+27
-2
i18n/messages/en.tsx
+27
-2
i18n/messages/en.tsx
···
319
319
missingId: "Enter a handle or DID first.",
320
320
},
321
321
endpointsHeading: "Endpoints",
322
+
paramsLabel: "Parameters",
323
+
paramDefault: "default",
322
324
endpoints: {
323
325
profile: {
324
326
method: "GET",
···
332
334
path: "/api/registry/search",
333
335
summary:
334
336
"Paginated profile search. Filter by free-text query, category, and subcategory. Returns { profiles, total, page, pageSize }.",
335
-
params: "?q=&category=&subcategory=&page=1&pageSize=24",
337
+
params: [
338
+
{ name: "q", desc: "Free-text search query." },
339
+
{
340
+
name: "category",
341
+
desc:
342
+
"One of app, accountProvider, moderator, infrastructure, developerTool.",
343
+
},
344
+
{
345
+
name: "subcategory",
346
+
desc: "Subcategory string, e.g. photo or microblog.",
347
+
},
348
+
{ name: "page", desc: "Page number.", default: "1" },
349
+
{
350
+
name: "pageSize",
351
+
desc: "Results per page (max 48).",
352
+
default: "24",
353
+
},
354
+
],
336
355
cache: "public, max-age=10, s-maxage=30",
337
356
},
338
357
featured: {
···
340
359
path: "/api/registry/featured",
341
360
summary:
342
361
"Curated featured list, ordered by position. Returns { profiles }.",
343
-
params: "?limit=12",
362
+
params: [
363
+
{
364
+
name: "limit",
365
+
desc: "Number of profiles to return (max 48).",
366
+
default: "12",
367
+
},
368
+
],
344
369
cache: "public, max-age=30, s-maxage=120",
345
370
},
346
371
avatar: {