jack.is
a tool for shared writing and social publishing
update pub pages layout and add options
author
Jared Pereira
date
(May 28, 2026, 4:35 PM -0400)
commit
39bafdf2
39bafdf2abbff31bbd63dd05702134a270bf2dec
parent
e77a7233
e77a7233b0efee808a929d7d03eb2054c0f22b4c
+244
-160
+30
actions/updatePublicationPage.ts
+30
actions/updatePublicationPage.ts
···
1
+
"use server";
2
+
import { getIdentityData } from "actions/getIdentityData";
3
+
import { supabaseServerClient } from "supabase/serverClient";
4
+
5
+
export async function updatePublicationPage(args: {
6
+
publication_uri: string;
7
+
page_id: number;
8
+
title: string;
9
+
path: string;
10
+
}): Promise<{ success: boolean }> {
11
+
let identity = await getIdentityData();
12
+
if (!identity || !identity.atp_did) return { success: false };
13
+
14
+
let { data: publication } = await supabaseServerClient
15
+
.from("publications")
16
+
.select("uri, identity_did")
17
+
.eq("uri", args.publication_uri)
18
+
.single();
19
+
if (!publication || publication.identity_did !== identity.atp_did)
20
+
return { success: false };
21
+
22
+
let { error } = await supabaseServerClient
23
+
.from("publication_pages")
24
+
.update({ title: args.title, path: args.path })
25
+
.eq("id", args.page_id)
26
+
.eq("publication", args.publication_uri);
27
+
if (error) return { success: false };
28
+
29
+
return { success: true };
30
+
}
+25
-54
app/(app)/lish/[did]/[publication]/PublicationContent.tsx
+25
-54
app/(app)/lish/[did]/[publication]/PublicationContent.tsx
···
1
1
import React from "react";
2
2
import { PublicationHomeLayout } from "./PublicationHomeLayout";
3
3
import { PublicationAuthor } from "./PublicationAuthor";
4
-
import { PublicationHeader } from "./PublicationHeader";
5
-
import { PublicationNav } from "./PublicationNav";
6
-
import { PublicationStickyHeader } from "./PublicationStickyHeader";
7
-
import { PublicationFullHeader } from "./PublicationFullHeader";
8
4
import {
9
5
normalizePublicationRecord,
10
6
normalizeDocumentRecord,
···
91
87
<PublicationHomeLayout
92
88
uri={publication.uri}
93
89
showPageBackground={!!showPageBackground}
94
-
stickyHeader={
95
-
navPages.length > 0 ? (
96
-
<PublicationStickyHeader
97
-
nav={
98
-
<PublicationNav
99
-
publicationUrl={getPublicationURL(publication)}
100
-
pages={navPages}
101
-
activePath="/"
102
-
/>
103
-
}
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
-
)
90
+
iconUrl={record?.icon ? blobRefToSrc(record.icon.ref, did) : undefined}
91
+
publicationName={publication.name}
92
+
description={record?.description}
93
+
navPages={navPages}
94
+
publicationUrl={getPublicationURL(publication)}
95
+
activePath="/"
96
+
author={
97
+
profile ? (
98
+
<PublicationAuthor
99
+
did={profile.did}
100
+
displayName={profile.displayName}
101
+
handle={profile.handle}
102
+
/>
103
+
) : undefined
104
+
}
105
+
subscribeButton={
106
+
<div className="max-w-sm mx-auto">
107
+
<SubscribeInput
108
+
publicationUri={publication.uri}
109
+
publicationUrl={record?.url}
110
+
publicationName={record?.name ?? publication.name}
111
+
publicationDescription={record?.description}
112
+
newsletterMode={newsletterMode}
113
+
/>
114
+
</div>
144
115
}
145
116
>
146
117
<PublicationPostsList
-11
app/(app)/lish/[did]/[publication]/PublicationFullHeader.tsx
-11
app/(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
-
}
+45
-2
app/(app)/lish/[did]/[publication]/PublicationHomeLayout.tsx
+45
-2
app/(app)/lish/[did]/[publication]/PublicationHomeLayout.tsx
···
1
1
"use client";
2
2
3
+
import React from "react";
3
4
import { usePreserveScroll } from "src/hooks/usePreserveScroll";
5
+
import { PublicationHeader } from "./PublicationHeader";
6
+
import { PublicationNav, type PublicationNavPage } from "./PublicationNav";
7
+
import { PublicationStickyHeader } from "./PublicationStickyHeader";
4
8
5
9
export function PublicationHomeLayout(props: {
6
10
uri: string;
7
11
showPageBackground: boolean;
8
-
stickyHeader?: React.ReactNode;
12
+
iconUrl?: string;
13
+
publicationName: string;
14
+
description?: string;
15
+
author?: React.ReactNode;
16
+
subscribeButton?: React.ReactNode;
17
+
navPages: PublicationNavPage[];
18
+
publicationUrl: string;
19
+
activePath: string;
9
20
children: React.ReactNode;
10
21
}) {
11
22
let { ref } = usePreserveScroll<HTMLDivElement>(props.uri);
23
+
let hasNav = props.navPages.length > 0;
24
+
25
+
let header = hasNav ? (
26
+
<PublicationStickyHeader
27
+
nav={
28
+
<PublicationNav
29
+
publicationUrl={props.publicationUrl}
30
+
pages={props.navPages}
31
+
activePath={props.activePath}
32
+
/>
33
+
}
34
+
>
35
+
<PublicationHeader
36
+
variant="inline"
37
+
iconUrl={props.iconUrl}
38
+
publicationName={props.publicationName}
39
+
/>
40
+
</PublicationStickyHeader>
41
+
) : (
42
+
<div className="pubFullHeader shrink-0">
43
+
<div className="sm:max-w-(--page-width-units) w-full mx-auto px-3 sm:px-4 pt-5">
44
+
<PublicationHeader
45
+
iconUrl={props.iconUrl}
46
+
publicationName={props.publicationName}
47
+
description={props.description}
48
+
author={props.author}
49
+
subscribeButton={props.subscribeButton}
50
+
/>
51
+
</div>
52
+
</div>
53
+
);
54
+
12
55
let inner = (
13
56
<>
14
-
{props.stickyHeader}
57
+
{header}
15
58
<div className="pubContent sm:max-w-(--page-width-units) w-full mx-auto px-3 sm:px-4 pb-5">
16
59
{props.children}
17
60
</div>
+1
-7
app/(app)/lish/[did]/[publication]/PublicationStickyHeader.tsx
+1
-7
app/(app)/lish/[did]/[publication]/PublicationStickyHeader.tsx
···
3
3
import { usePathname } from "next/navigation";
4
4
5
5
export function PublicationStickyHeader(props: {
6
-
sticky?: boolean;
7
6
nav: React.ReactNode;
8
7
children: React.ReactNode;
9
8
}) {
10
9
let ref = useRef<HTMLDivElement>(null);
11
10
let pathname = usePathname();
12
-
let sticky = props.sticky ?? true;
13
11
14
12
useEffect(() => {
15
13
let el = ref.current;
···
62
60
return (
63
61
<div
64
62
ref={ref}
65
-
className={
66
-
sticky
67
-
? "pubStickyHeader sticky top-0 z-10 bg-bg-page shrink-0"
68
-
: "pubStickyHeader shrink-0"
69
-
}
63
+
className="pubStickyHeader sticky top-0 z-10 bg-bg-page shrink-0"
70
64
>
71
65
<div
72
66
className="sm:max-w-(--page-width-units) w-full mx-auto px-3 sm:px-4"
+9
-38
app/(app)/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx
+9
-38
app/(app)/lish/[did]/[publication]/[rkey]/PublicationPageRenderer.tsx
···
23
23
import {
24
24
type PublicationPostsListPost,
25
25
} from "../PublicationPostsList";
26
-
import { PublicationNav } from "../PublicationNav";
27
-
import { PublicationHeader } from "../PublicationHeader";
28
26
import { PublicationHomeLayout } from "../PublicationHomeLayout";
29
-
import { PublicationStickyHeader } from "../PublicationStickyHeader";
30
-
import { PublicationFullHeader } from "../PublicationFullHeader";
31
27
import { getPublicationURL } from "app/(app)/lish/createPub/getPublicationURL";
32
28
import { blobRefToSrc } from "src/utils/blobRefToSrc";
33
29
···
180
176
<PublicationHomeLayout
181
177
uri={publication.uri}
182
178
showPageBackground={showPageBackground}
183
-
stickyHeader={
184
-
navPages.length > 0 ? (
185
-
<PublicationStickyHeader
186
-
nav={
187
-
<PublicationNav
188
-
publicationUrl={getPublicationURL(publication)}
189
-
pages={navPages}
190
-
activePath={page.path}
191
-
/>
192
-
}
193
-
>
194
-
<PublicationHeader
195
-
variant="inline"
196
-
iconUrl={
197
-
normalizedPublication?.icon
198
-
? blobRefToSrc(normalizedPublication.icon.ref, did)
199
-
: undefined
200
-
}
201
-
publicationName={publication.name}
202
-
/>
203
-
</PublicationStickyHeader>
204
-
) : (
205
-
<PublicationFullHeader>
206
-
<PublicationHeader
207
-
iconUrl={
208
-
normalizedPublication?.icon
209
-
? blobRefToSrc(normalizedPublication.icon.ref, did)
210
-
: undefined
211
-
}
212
-
publicationName={publication.name}
213
-
description={normalizedPublication?.description}
214
-
/>
215
-
</PublicationFullHeader>
216
-
)
179
+
iconUrl={
180
+
normalizedPublication?.icon
181
+
? blobRefToSrc(normalizedPublication.icon.ref, did)
182
+
: undefined
217
183
}
184
+
publicationName={publication.name}
185
+
description={normalizedPublication?.description}
186
+
navPages={navPages}
187
+
publicationUrl={getPublicationURL(publication)}
188
+
activePath={page.path}
218
189
>
219
190
<div className="pubPageContent pt-6">
220
191
<PostContent
+2
-5
app/(app)/lish/[did]/[publication]/dashboard/PublicationSWRProvider.tsx
+2
-5
app/(app)/lish/[did]/[publication]/dashboard/PublicationSWRProvider.tsx
···
2
2
3
3
import type { GetPublicationDataReturnType } from "app/api/rpc/[command]/get_publication_data";
4
4
import { callRPC } from "app/api/rpc/client";
5
-
import { createContext, useContext, useEffect, useMemo } from "react";
6
-
import useSWR, { SWRConfig, KeyedMutator, mutate } from "swr";
5
+
import { createContext, useContext, useMemo } from "react";
6
+
import useSWR, { SWRConfig, KeyedMutator } from "swr";
7
7
import { produce, Draft as ImmerDraft } from "immer";
8
8
import {
9
9
normalizePublicationRecord,
···
24
24
children: React.ReactNode;
25
25
}) {
26
26
let key = `publication-data-${props.publication_did}-${props.publication_rkey}`;
27
-
useEffect(() => {
28
-
mutate(key, props.publication_data);
29
-
}, [props.publication_data]);
30
27
return (
31
28
<PublicationContext
32
29
value={{ name: props.publication_rkey, did: props.publication_did }}
+12
-15
app/(app)/lish/[did]/[publication]/edit/[[...route]]/layout.tsx
+12
-15
app/(app)/lish/[did]/[publication]/edit/[[...route]]/layout.tsx
···
12
12
import { PublicationPagesNav } from "./PublicationPagesNav";
13
13
import { PublicationEditHeader } from "./PublicationEditHeader";
14
14
import { PublicationHeader } from "../../PublicationHeader";
15
-
import { PublicationStickyHeader } from "../../PublicationStickyHeader";
16
15
import { PublicationEditDirtyProvider } from "./dirtyContext";
17
16
18
17
export async function generateMetadata(props: {
···
99
98
publicationName={params.publication}
100
99
/>
101
100
<div className="pubWrapper flex flex-col grow min-h-0 bg-bg-page rounded-t-lg overflow-hidden">
102
-
<PublicationStickyHeader
103
-
sticky={false}
104
-
nav={
105
-
<PublicationPagesNav
106
-
did={params.did}
107
-
publicationName={params.publication}
101
+
<div className="shrink-0">
102
+
<div className="sm:max-w-(--page-width-units) w-full mx-auto px-3 sm:px-4 pt-5">
103
+
<PublicationHeader
104
+
variant="inline"
105
+
iconUrl={iconUrl}
106
+
publicationName={publication.name}
107
+
description={record?.description}
108
108
/>
109
-
}
110
-
>
111
-
<PublicationHeader
112
-
variant="inline"
113
-
iconUrl={iconUrl}
114
-
publicationName={publication.name}
115
-
description={record?.description}
109
+
</div>
110
+
<PublicationPagesNav
111
+
did={params.did}
112
+
publicationName={params.publication}
116
113
/>
117
-
</PublicationStickyHeader>
114
+
</div>
118
115
<div className="grow min-h-0 flex flex-col">{props.children}</div>
119
116
</div>
120
117
</div>