a tool for shared writing and social publishing
fix headers
Jared Pereira
(May 21, 2026, 2:10 PM EDT)
5dd1c964
ee6e0beb
+94
-57
+44
-33
app/lish/[did]/[publication]/PublicationContent.tsx
+44
-33
app/lish/[did]/[publication]/PublicationContent.tsx
···
4
4
import { PublicationHeader } from "./PublicationHeader";
5
5
import { PublicationNav } from "./PublicationNav";
6
6
import { PublicationStickyHeader } from "./PublicationStickyHeader";
7
+
import { PublicationFullHeader } from "./PublicationFullHeader";
7
8
import {
8
9
normalizePublicationRecord,
9
10
normalizeDocumentRecord,
···
91
92
uri={publication.uri}
92
93
showPageBackground={!!showPageBackground}
93
94
stickyHeader={
94
-
<PublicationStickyHeader
95
-
nav={
96
-
navPages.length > 0 ? (
95
+
navPages.length > 0 ? (
96
+
<PublicationStickyHeader
97
+
nav={
97
98
<PublicationNav
98
99
publicationUrl={getPublicationURL(publication)}
99
100
pages={navPages}
100
101
activePath="/"
101
102
/>
102
-
) : undefined
103
-
}
104
-
>
105
-
<PublicationHeader
106
-
iconUrl={
107
-
record?.icon ? blobRefToSrc(record.icon.ref, did) : undefined
108
103
}
109
-
publicationName={publication.name}
110
-
description={record?.description}
111
-
author={
112
-
profile ? (
113
-
<PublicationAuthor
114
-
did={profile.did}
115
-
displayName={profile.displayName}
116
-
handle={profile.handle}
117
-
/>
118
-
) : undefined
119
-
}
120
-
subscribeButton={
121
-
<div className="max-w-sm mx-auto">
122
-
<SubscribeInput
123
-
publicationUri={publication.uri}
124
-
publicationUrl={record?.url}
125
-
publicationName={record?.name ?? publication.name}
126
-
publicationDescription={record?.description}
127
-
newsletterMode={newsletterMode}
128
-
/>
129
-
</div>
130
-
}
131
-
/>
132
-
</PublicationStickyHeader>
104
+
>
105
+
<PublicationHeader
106
+
variant="inline"
107
+
iconUrl={
108
+
record?.icon ? blobRefToSrc(record.icon.ref, did) : undefined
109
+
}
110
+
publicationName={publication.name}
111
+
/>
112
+
</PublicationStickyHeader>
113
+
) : (
114
+
<PublicationFullHeader>
115
+
<PublicationHeader
116
+
iconUrl={
117
+
record?.icon ? blobRefToSrc(record.icon.ref, did) : undefined
118
+
}
119
+
publicationName={publication.name}
120
+
description={record?.description}
121
+
author={
122
+
profile ? (
123
+
<PublicationAuthor
124
+
did={profile.did}
125
+
displayName={profile.displayName}
126
+
handle={profile.handle}
127
+
/>
128
+
) : undefined
129
+
}
130
+
subscribeButton={
131
+
<div className="max-w-sm mx-auto">
132
+
<SubscribeInput
133
+
publicationUri={publication.uri}
134
+
publicationUrl={record?.url}
135
+
publicationName={record?.name ?? publication.name}
136
+
publicationDescription={record?.description}
137
+
newsletterMode={newsletterMode}
138
+
/>
139
+
</div>
140
+
}
141
+
/>
142
+
</PublicationFullHeader>
143
+
)
133
144
}
134
145
>
135
146
<PublicationPostsList
+11
app/lish/[did]/[publication]/PublicationFullHeader.tsx
+11
app/lish/[did]/[publication]/PublicationFullHeader.tsx
···
1
+
import React from "react";
2
+
3
+
export function PublicationFullHeader(props: { children: React.ReactNode }) {
4
+
return (
5
+
<div className="pubFullHeader shrink-0">
6
+
<div className="sm:max-w-(--page-width-units) w-full mx-auto px-3 sm:px-4 pt-5">
7
+
{props.children}
8
+
</div>
9
+
</div>
10
+
);
11
+
}
+2
-4
app/lish/[did]/[publication]/PublicationStickyHeader.tsx
+2
-4
app/lish/[did]/[publication]/PublicationStickyHeader.tsx
···
4
4
5
5
export function PublicationStickyHeader(props: {
6
6
sticky?: boolean;
7
-
nav?: React.ReactNode;
7
+
nav: React.ReactNode;
8
8
children: React.ReactNode;
9
9
}) {
10
10
let ref = useRef<HTMLDivElement>(null);
11
11
let pathname = usePathname();
12
12
let sticky = props.sticky ?? true;
13
-
let hasNav = !!props.nav;
14
13
15
14
useEffect(() => {
16
-
if (!hasNav) return;
17
15
let el = ref.current;
18
16
let parent = el?.parentElement;
19
17
if (!el || !parent) return;
···
54
52
if (rafId !== null) cancelAnimationFrame(rafId);
55
53
parent.removeEventListener("scroll", onScroll, true);
56
54
};
57
-
}, [hasNav]);
55
+
}, []);
58
56
59
57
useEffect(() => {
60
58
ref.current?.style.setProperty("--header-shrink", "0");
+28
-15
app/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx
+28
-15
app/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx
···
26
26
import { PublicationHeader } from "../PublicationHeader";
27
27
import { PublicationHomeLayout } from "../PublicationHomeLayout";
28
28
import { PublicationStickyHeader } from "../PublicationStickyHeader";
29
+
import { PublicationFullHeader } from "../PublicationFullHeader";
29
30
import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
30
31
import { blobRefToSrc } from "src/utils/blobRefToSrc";
31
32
···
179
180
uri={publication.uri}
180
181
showPageBackground={showPageBackground}
181
182
stickyHeader={
182
-
<PublicationStickyHeader
183
-
nav={
184
-
navPages.length > 0 ? (
183
+
navPages.length > 0 ? (
184
+
<PublicationStickyHeader
185
+
nav={
185
186
<PublicationNav
186
187
publicationUrl={getPublicationURL(publication)}
187
188
pages={navPages}
188
189
activePath={page.path}
189
190
/>
190
-
) : undefined
191
-
}
192
-
>
193
-
<PublicationHeader
194
-
iconUrl={
195
-
normalizedPublication?.icon
196
-
? blobRefToSrc(normalizedPublication.icon.ref, did)
197
-
: undefined
198
191
}
199
-
publicationName={publication.name}
200
-
description={normalizedPublication?.description}
201
-
/>
202
-
</PublicationStickyHeader>
192
+
>
193
+
<PublicationHeader
194
+
variant="inline"
195
+
iconUrl={
196
+
normalizedPublication?.icon
197
+
? blobRefToSrc(normalizedPublication.icon.ref, did)
198
+
: undefined
199
+
}
200
+
publicationName={publication.name}
201
+
/>
202
+
</PublicationStickyHeader>
203
+
) : (
204
+
<PublicationFullHeader>
205
+
<PublicationHeader
206
+
iconUrl={
207
+
normalizedPublication?.icon
208
+
? blobRefToSrc(normalizedPublication.icon.ref, did)
209
+
: undefined
210
+
}
211
+
publicationName={publication.name}
212
+
description={normalizedPublication?.description}
213
+
/>
214
+
</PublicationFullHeader>
215
+
)
203
216
}
204
217
>
205
218
<div className="pubPageContent pt-6">
+9
-5
app/lish/[did]/[publication]/edit/[[...route]]/layout.tsx
+9
-5
app/lish/[did]/[publication]/edit/[[...route]]/layout.tsx
···
97
97
publicationName={params.publication}
98
98
/>
99
99
<div className="pubWrapper flex flex-col grow min-h-0 bg-bg-page rounded-t-lg overflow-hidden">
100
-
<PublicationStickyHeader sticky={false}>
100
+
<PublicationStickyHeader
101
+
sticky={false}
102
+
nav={
103
+
<PublicationPagesNav
104
+
did={params.did}
105
+
publicationName={params.publication}
106
+
/>
107
+
}
108
+
>
101
109
<PublicationHeader
102
110
variant="inline"
103
111
iconUrl={iconUrl}
···
105
113
description={record?.description}
106
114
/>
107
115
</PublicationStickyHeader>
108
-
<PublicationPagesNav
109
-
did={params.did}
110
-
publicationName={params.publication}
111
-
/>
112
116
<div className="grow min-h-0 flex flex-col">{props.children}</div>
113
117
</div>
114
118
</div>