leaflet.pub
a tool for shared writing and social publishing
adjusted the post publish page
cozylittle.house
+64
-47
+64
-47
app/[leaflet_id]/publish/PublishPost.tsx
+64
-47
app/[leaflet_id]/publish/PublishPost.tsx
···
3
3
import { DotLoader } from "components/utils/DotLoader";
4
4
import { ButtonPrimary, ButtonTertiary } from "components/Buttons";
5
5
import { Checkbox } from "components/Checkbox";
6
-
import { useState, useRef } from "react";
6
+
import { useState, useRef, RefObject } from "react";
7
7
import { useParams } from "next/navigation";
8
8
import Link from "next/link";
9
9
import { AutosizeTextarea } from "components/utils/AutosizeTextarea";
10
-
import { PubLeafletPublication } from "lexicons/api";
10
+
import { PubLeafletDocument, PubLeafletPublication } from "lexicons/api";
11
11
import { publishPostToBsky } from "./publishBskyPost";
12
12
import { ProfileViewDetailed } from "@atproto/api/dist/client/types/app/bsky/actor/defs";
13
13
import { AtUri } from "@atproto/syntax";
···
67
67
68
68
let editorStateRef = useRef<EditorState | null>(null);
69
69
let [isLoading, setIsLoading] = useState(false);
70
-
let [charCount, setCharCount] = useState(0);
71
70
let params = useParams();
72
71
let { rep } = useReplicache();
73
72
···
115
114
>
116
115
<div className="container flex flex-col gap-3 p-3 pt-2 sm:pt-3 sm:p-4">
117
116
<div className="flex flex-col ">
118
-
<div className=" flex justify-between items-center">
117
+
<div className=" flex justify-between items-start">
119
118
<Checkbox
120
119
checked={shareOption.email === true}
121
120
onChange={(e) => {
···
126
125
}
127
126
}}
128
127
>
129
-
<div className="font-bold">
130
-
Email {subscribers} Subscriber
131
-
{subscribers === 1 ? "" : "s"}
128
+
<div>
129
+
<div className="font-bold">
130
+
Send to {subscribers} Subscriber
131
+
{subscribers === 1 ? "" : "s"}
132
+
</div>
133
+
<div className="text-sm text-tertiary font-normal">
134
+
3 Email Updates | 8 Bluesky DMs
135
+
</div>
132
136
</div>
133
137
</Checkbox>
134
138
<SendTest checked={shareOption.email} />
···
147
151
<div className="flex flex-col">
148
152
<div className="font-bold">Share on Bluesky</div>
149
153
<div className="text-sm text-tertiary font-normal">
150
-
Pub subscribers will be updated via a custom Bluesky feed
151
-
</div>
152
-
153
-
<div
154
-
className={`publishBskyPostEditor opaque-container p-3 rounded-lg! w-full ml-5 mb-4 ${shareOption.bluesky === false ? "opacity-50" : ""}`}
155
-
>
156
-
<div className="flex gap-2">
157
-
<img
158
-
className="bg-test rounded-full w-[42px] h-[42px] shrink-0"
159
-
src={props.profile.avatar}
160
-
/>
161
-
<div className="flex flex-col w-full">
162
-
<div className="flex gap-2 pb-1">
163
-
<p className="font-bold">{props.profile.displayName}</p>
164
-
<p className="text-tertiary">@{props.profile.handle}</p>
165
-
</div>
166
-
<div className="flex flex-col">
167
-
<BlueskyPostEditorProsemirror
168
-
editorStateRef={editorStateRef}
169
-
onCharCountChange={setCharCount}
170
-
/>
171
-
</div>
172
-
<div className="opaque-container overflow-hidden flex flex-col mt-4 w-full">
173
-
{/* <div className="h-[260px] w-full bg-test" /> */}
174
-
<div className="flex flex-col p-2">
175
-
<div className="font-bold">{props.title}</div>
176
-
<div className="text-tertiary">{props.description}</div>
177
-
<hr className="border-border-light mt-2 mb-1" />
178
-
<p className="text-xs text-tertiary">
179
-
{props.record?.base_path}
180
-
</p>
181
-
</div>
182
-
</div>
183
-
<div className="text-xs text-secondary italic place-self-end pt-2">
184
-
{charCount}/300
185
-
</div>
186
-
</div>
187
-
</div>
154
+
Share to add your post to our Discover and Reader custom feeds!
188
155
</div>
189
156
</div>
190
157
</Checkbox>
158
+
<BlueskyPostEditor
159
+
{...props}
160
+
editorStateRef={editorStateRef}
161
+
disabled={shareOption.bluesky === false}
162
+
/>
191
163
<hr className="border-border-light mt-1" />
192
164
193
165
<div className="flex justify-between">
···
204
176
) : shareOption.email === false &&
205
177
shareOption.bluesky === false ? (
206
178
"Post Quietly"
207
-
) : shareOption.email === true ? (
208
-
`Publish to ${subscribers} Subscriber${subscribers === 1 ? "!" : "s!"}`
209
179
) : (
210
180
"Publish this Post!"
211
181
)}
···
214
184
</div>
215
185
</div>
216
186
</form>
187
+
</div>
188
+
);
189
+
};
190
+
191
+
const BlueskyPostEditor = (props: {
192
+
record?: PubLeafletPublication.Record;
193
+
profile: ProfileViewDetailed;
194
+
title: string;
195
+
description: string;
196
+
editorStateRef: RefObject<EditorState | null>;
197
+
disabled: boolean;
198
+
}) => {
199
+
let [charCount, setCharCount] = useState(0);
200
+
201
+
return (
202
+
<div
203
+
className={`publishBskyPostEditor w-full pl-5 pb-4 ${props.disabled ? "opacity-50" : ""}`}
204
+
>
205
+
<div className="flex gap-2 opaque-container p-3 rounded-lg! w-full">
206
+
<img
207
+
className="rounded-full w-[42px] h-[42px] shrink-0"
208
+
src={props.profile.avatar}
209
+
/>
210
+
<div className="flex flex-col w-full text-sm">
211
+
<div className="flex gap-2 pb-1">
212
+
<p className="font-bold">{props.profile.displayName}</p>
213
+
<p className="text-tertiary">@{props.profile.handle}</p>
214
+
</div>
215
+
<div className="flex flex-col">
216
+
<BlueskyPostEditorProsemirror
217
+
editorStateRef={props.editorStateRef}
218
+
onCharCountChange={setCharCount}
219
+
/>
220
+
</div>
221
+
<div className="opaque-container overflow-hidden flex flex-col mt-4 w-full">
222
+
<div className="flex flex-col p-2">
223
+
<div className="font-bold">{props.title}</div>
224
+
<div className="text-tertiary">{props.description}</div>
225
+
<hr className="border-border-light mt-2 mb-1" />
226
+
<p className="text-xs text-tertiary">{props.record?.base_path}</p>
227
+
</div>
228
+
</div>
229
+
<div className="text-xs text-secondary italic place-self-end pt-2">
230
+
{charCount}/300
231
+
</div>
232
+
</div>
233
+
</div>
217
234
</div>
218
235
);
219
236
};