a tool for shared writing and social publishing
adding in a rss on the subscibe button, fixing up some wierd padding
+104
-56
+1
-1
app/(app)/lish/[did]/[publication]/PublicationHeader.tsx
+1
-1
app/(app)/lish/[did]/[publication]/PublicationHeader.tsx
+1
-1
app/(app)/lish/[did]/[publication]/PublicationHomeLayout.tsx
+1
-1
app/(app)/lish/[did]/[publication]/PublicationHomeLayout.tsx
+1
-1
app/(app)/lish/[did]/[publication]/PublicationPostsList.tsx
+1
-1
app/(app)/lish/[did]/[publication]/PublicationPostsList.tsx
+1
-1
components/Icons/RSSSmall.tsx
+1
-1
components/Icons/RSSSmall.tsx
···
11
11
{...props}
12
12
>
13
13
<path
14
-
d="M4.1123 8.41895C10.5525 8.41901 15.9862 13.4839 15.9863 20.293C15.9863 21.3974 15.0908 22.2929 13.9863 22.293C12.8819 22.2929 11.9864 21.3974 11.9863 20.293C11.9862 15.7699 8.42101 12.419 4.1123 12.4189C3.00778 12.4189 2.11237 11.5235 2.1123 10.4189C2.1123 9.31438 3.00774 8.41895 4.1123 8.41895ZM4.1123 1.70703C14.2057 1.7071 22.6982 9.63232 22.6982 20.293C22.6982 21.3975 21.8028 22.2929 20.6982 22.293C19.5937 22.293 18.6982 21.3975 18.6982 20.293C18.6982 11.9183 12.0743 5.70709 4.1123 5.70703C3.00774 5.70703 2.1123 4.8116 2.1123 3.70703C2.1123 2.60246 3.00774 1.70703 4.1123 1.70703ZM5.88965 16.1738C7.31836 16.174 8.4764 17.332 8.47656 18.7607C8.47656 20.1896 7.31846 21.3484 5.88965 21.3486C4.46067 21.3486 3.30176 20.1897 3.30176 18.7607C3.30192 17.3319 4.46077 16.1738 5.88965 16.1738Z"
14
+
d="M4.77355 8.87949C10.3855 8.87954 15.1204 13.293 15.1205 19.2264C15.1205 20.1889 14.3402 20.9692 13.3777 20.9692C12.4153 20.9692 11.635 20.1889 11.6349 19.2264C11.6348 15.2851 8.52813 12.3651 4.77355 12.3651C3.81107 12.3651 3.03082 11.5847 3.03076 10.6223C3.03076 9.65976 3.81104 8.87949 4.77355 8.87949ZM4.77355 3.03076C13.5689 3.03082 20.9692 9.93682 20.9692 19.2264C20.9692 20.1889 20.1889 20.9692 19.2264 20.9692C18.2639 20.9692 17.4837 20.189 17.4837 19.2264C17.4836 11.9288 11.7116 6.5164 4.77355 6.51634C3.81104 6.51634 3.03076 5.73607 3.03076 4.77355C3.03076 3.81104 3.81104 3.03076 4.77355 3.03076ZM6.32232 15.6371C7.56729 15.6372 8.5764 16.6463 8.57654 17.8913C8.57654 19.1364 7.56738 20.1462 6.32232 20.1463C5.07711 20.1463 4.06724 19.1365 4.06724 17.8913C4.06739 16.6462 5.0772 15.6371 6.32232 15.6371Z"
15
15
fill="currentColor"
16
16
/>
17
17
</svg>
+47
-31
components/Subscribe/EmailSubscribe.tsx
+47
-31
components/Subscribe/EmailSubscribe.tsx
···
1
1
"use client";
2
2
import * as OneTimePasswordField from "@radix-ui/react-one-time-password-field";
3
-
import { ButtonPrimary } from "components/Buttons";
3
+
import { ButtonSecondary } from "components/Buttons";
4
+
import { RSSTiny } from "components/Icons/RSSTiny";
4
5
import { Input } from "components/Input";
5
6
import { DotLoader } from "components/utils/DotLoader";
6
7
import { onMouseDown as iosOnPointerDown } from "src/utils/iosInputMouseDown";
···
15
16
onChange: (val: string) => void;
16
17
disabled?: boolean;
17
18
loading?: boolean;
19
+
publicationUrl?: string;
18
20
}) => {
19
21
return (
20
-
<div
21
-
className={` input-with-border flex gap-2 w-full items-center mx-auto py-0! ${props.large && "px-2!"} `}
22
-
style={
23
-
props.loading
24
-
? {
25
-
backgroundColor: theme.colors["border-light"],
26
-
color: theme.colors.tertiary,
27
-
}
28
-
: {
29
-
backgroundColor: theme.colors["bg-page"],
30
-
color: theme.colors.primary,
31
-
}
32
-
}
33
-
>
34
-
{props.leading && (
35
-
<div className="text-tertiary shrink-0 flex items-center">
36
-
{props.leading}
22
+
<div className="flex gap-1 w-full">
23
+
<div
24
+
className={` input-with-border flex gap-2 w-full items-center mx-auto py-0! min-w-0 ${props.large && "px-2!"} `}
25
+
style={
26
+
props.loading
27
+
? {
28
+
backgroundColor: theme.colors["border-light"],
29
+
color: theme.colors.tertiary,
30
+
}
31
+
: {
32
+
backgroundColor: theme.colors["bg-page"],
33
+
color: theme.colors.primary,
34
+
}
35
+
}
36
+
>
37
+
{props.leading && (
38
+
<div className="text-tertiary shrink-0 flex items-center">
39
+
{props.leading}
40
+
</div>
41
+
)}
42
+
<Input
43
+
type="email"
44
+
autoFocus={props.autoFocus}
45
+
className={`appearance-none! outline-none! grow min-w-0 ${props.large ? "py-1!" : "py-0.5 disabled:text-tertiary disabled:italic disabled:border-border-light"}`}
46
+
disabled={props.disabled || props.loading}
47
+
placeholder="email@example.com"
48
+
size={0}
49
+
value={props.value}
50
+
onChange={(e) => props.onChange(e.target.value)}
51
+
/>
52
+
<div className={` text-accent-contrast flex items-center shrink-0 `}>
53
+
{props.loading ? <DotLoader /> : props.action}
37
54
</div>
55
+
</div>
56
+
{props.publicationUrl && (
57
+
<a
58
+
href={`${props.publicationUrl}/rss`}
59
+
target="_blank"
60
+
rel="noopener noreferrer"
61
+
className={`no-underlinetext-accent-contrast`}
62
+
>
63
+
<ButtonSecondary className="p-[6px]! border-border!">
64
+
<RSSTiny />
65
+
</ButtonSecondary>
66
+
</a>
38
67
)}
39
-
<Input
40
-
type="email"
41
-
autoFocus={props.autoFocus}
42
-
className={`appearance-none! outline-none! grow min-w-0 ${props.large ? "py-1!" : "py-0.5 disabled:text-tertiary disabled:italic disabled:border-border-light"}`}
43
-
disabled={props.disabled || props.loading}
44
-
placeholder="email@example.com"
45
-
size={0}
46
-
value={props.value}
47
-
onChange={(e) => props.onChange(e.target.value)}
48
-
/>
49
-
<div className={` text-accent-contrast flex items-center shrink-0 `}>
50
-
{props.loading ? <DotLoader /> : props.action}
51
-
</div>
52
68
</div>
53
69
);
54
70
};
+49
-21
components/Subscribe/HandleSubscribe.tsx
+49
-21
components/Subscribe/HandleSubscribe.tsx
···
1
1
"use client";
2
-
import { ButtonPrimary } from "components/Buttons";
2
+
import { ButtonPrimary, ButtonSecondary } from "components/Buttons";
3
3
import { Popover } from "components/Popover";
4
4
import Link from "next/link";
5
5
import { useState } from "react";
···
14
14
import { useIdentityData } from "components/IdentityProvider";
15
15
import { useRecordFromDid } from "src/utils/useRecordFromDid";
16
16
import { LinkIdentityModal } from "./LinkIdentityModal";
17
+
import { RSSTiny } from "components/Icons/RSSTiny";
17
18
const apps = [
18
19
{ name: "Leaflet", logo: "https://leaflet.pub/logos/leaflet.svg" },
19
20
{ name: "Bluesky", logo: "https://leaflet.pub/logos/bluesky.svg" },
···
40
41
export const SubscribeWithHandle = (props: {
41
42
autoFocus?: boolean;
42
43
publicationUri: string;
44
+
publicationUrl?: string;
43
45
onSubscribed?: () => void;
44
46
onAtSuccess?: () => void;
45
47
leading?: React.ReactNode;
···
78
80
if (props.user.loggedIn && props.user.handle) {
79
81
return (
80
82
<div className="flex flex-col gap-2 w-max max-w-full mx-auto">
81
-
<div className="flex items-center gap-2">
83
+
<div className="flex items-center gap-1">
82
84
<ButtonPrimary
83
85
className="mx-auto max-w-full grow"
84
86
disabled={subscribing}
···
128
130
</>
129
131
)}
130
132
</ButtonPrimary>
133
+
{props.publicationUrl && (
134
+
<a
135
+
href={`${props.publicationUrl}/rss`}
136
+
target="_blank"
137
+
rel="noopener noreferrer"
138
+
className={`no-underlinetext-accent-contrast`}
139
+
>
140
+
<ButtonPrimary className="p-[6px]!">
141
+
<RSSTiny />
142
+
</ButtonPrimary>
143
+
</a>
144
+
)}
131
145
</div>
132
146
{oauthError && (
133
147
<OAuthErrorMessage
···
139
153
);
140
154
} else
141
155
return (
142
-
<div className="max-w-sm mx-auto w-full ">
143
-
<HandleInput
144
-
autoFocus={props.autoFocus}
145
-
loading={loading}
146
-
leading={props.leading}
147
-
onSubmit={(handle) => {
148
-
let trimmed = handle.trim();
149
-
if (!trimmed) return;
150
-
if (needsLinkConfirmation) {
151
-
setPendingLinkHandle(trimmed);
152
-
return;
153
-
}
154
-
setLoading(true);
155
-
redirectToOauthForSubscribe(trimmed, false);
156
-
}}
157
-
action=<div className="bg-accent-1 rounded-md px-1 text-accent-2 font-bold text-sm">
158
-
Subscribe
159
-
</div>
160
-
/>
156
+
<div className="subscribeHandleInputWrapper max-w-sm mx-auto w-full">
157
+
<div className="flex gap-1 w-full">
158
+
<HandleInput
159
+
autoFocus={props.autoFocus}
160
+
loading={loading}
161
+
leading={props.leading}
162
+
onSubmit={(handle) => {
163
+
let trimmed = handle.trim();
164
+
if (!trimmed) return;
165
+
if (needsLinkConfirmation) {
166
+
setPendingLinkHandle(trimmed);
167
+
return;
168
+
}
169
+
setLoading(true);
170
+
redirectToOauthForSubscribe(trimmed, false);
171
+
}}
172
+
action=<div className="bg-accent-1 rounded-md px-1 text-accent-2 font-bold text-sm">
173
+
Subscribe
174
+
</div>
175
+
/>
176
+
{props.publicationUrl && (
177
+
<a
178
+
href={`${props.publicationUrl}/rss`}
179
+
target="_blank"
180
+
rel="noopener noreferrer"
181
+
className={`no-underlinetext-accent-contrast`}
182
+
>
183
+
<ButtonSecondary className="p-[6px]! border-border!">
184
+
<RSSTiny />
185
+
</ButtonSecondary>
186
+
</a>
187
+
)}
188
+
</div>
161
189
<div className=" pt-1 ">
162
190
<AtmosphericHandleInfo />
163
191
</div>
+4
components/Subscribe/SubscribeButton.tsx
+4
components/Subscribe/SubscribeButton.tsx
···
173
173
<div className="font-bold">Opt in to get updates via email!</div>
174
174
<div className="max-w-sm w-full mx-auto">
175
175
<EmailInput
176
+
publicationUrl={props.publicationUrl}
176
177
value={email}
177
178
onChange={setEmail}
178
179
disabled={user.loggedIn && !!user.email}
···
204
205
<div className="max-w-sm w-full mx-auto">
205
206
{subscribeMode === "email" ? (
206
207
<EmailInput
208
+
publicationUrl={props.publicationUrl}
207
209
value={email}
208
210
onChange={setEmail}
209
211
disabled={user.loggedIn && !!user.email}
···
232
234
user={user}
233
235
autoFocus={props.autoFocus}
234
236
publicationUri={props.publicationUri}
237
+
publicationUrl={props.publicationUrl}
235
238
onAtSuccess={() => setAtSuccessOpen(true)}
236
239
leading={modeMenu}
237
240
/>
···
242
245
user={user}
243
246
autoFocus={props.autoFocus}
244
247
publicationUri={props.publicationUri}
248
+
publicationUrl={props.publicationUrl}
245
249
onSubscribed={() => setLocallySubscribed(true)}
246
250
/>
247
251
)}