leaflet.pub
a tool for shared writing and social publishing
added empty states and fixed some issues
cozylittle.house
+40
-18
+1
-1
app/discover/PubListing.tsx
+1
-1
app/discover/PubListing.tsx
···
45
45
hover:outline-accent-contrast hover:border-accent-contrast`}
46
46
>
47
47
<div
48
-
className={`flex w-full flex-col justify-center text-center max-h-48 pt-4 pb-3 px-3 rounded-lg ${props.resizeHeight ? "" : "sm:h-48 h-full"}${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] " : ""}`}
48
+
className={`flex w-full flex-col justify-center text-center max-h-48 pt-4 pb-3 px-3 rounded-lg ${props.resizeHeight ? "" : "sm:h-48 h-full"} ${record.theme?.showPageBackground ? "bg-[rgba(var(--bg-page),var(--bg-page-alpha))] " : ""}`}
49
49
>
50
50
<div className="mx-auto pb-1">
51
51
<PubIcon record={record} uri={props.uri} large />
+27
-8
app/reader/ReaderContent.tsx
+27
-8
app/reader/ReaderContent.tsx
···
2
2
import { AtUri } from "@atproto/api";
3
3
import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
4
4
import { PubIcon } from "components/ActionBar/Publications";
5
+
import { ButtonPrimary } from "components/Buttons";
6
+
import { DiscoverSmall } from "components/Icons/DiscoverSmall";
5
7
import { ShareSmall } from "components/Icons/ShareSmall";
6
8
import { Separator } from "components/Layout";
7
9
import { useCardBorderHidden } from "components/Pages/useCardBorderHidden";
···
24
26
documents: { data: Json; uri: string; indexed_at: string };
25
27
}[];
26
28
}) => {
29
+
if (props.posts.length === 0) return <ReaderEmpty />;
27
30
return (
28
31
<div className="flex flex-col gap-3">
29
-
{props.posts?.map((p) => <Post {...p} />)}
32
+
{props.posts?.map((p) => <Post {...p} key={p.documents.uri} />)}
30
33
</div>
31
34
);
32
35
};
···
59
62
60
63
return (
61
64
<BaseThemeProvider {...theme} local>
62
-
<SpeedyLink
63
-
href={`${props.publication.href}/${postUri.rkey}`}
65
+
<div
64
66
style={{
65
67
backgroundImage: `url(${backgroundImage})`,
66
68
backgroundRepeat: backgroundImageRepeat ? "repeat" : "no-repeat",
67
69
backgroundSize: `${backgroundImageRepeat ? `${backgroundImageSize}px` : "cover"}`,
68
70
}}
69
-
className={`no-underline! flex flex-row gap-2 w-full
71
+
className={`no-underline! flex flex-row gap-2 w-full relative
70
72
bg-bg-leaflet
71
73
border border-border-light rounded-lg
72
74
sm:p-2 p-2 selected-outline
73
75
hover:outline-accent-contrast hover:border-accent-contrast
74
76
`}
75
77
>
78
+
<SpeedyLink
79
+
className="h-full w-full absolute top-0 left-0"
80
+
href={`${props.publication.href}/${postUri.rkey}`}
81
+
/>
76
82
<div
77
83
className={`${showPageBackground ? "bg-bg-page " : "bg-transparent"} rounded-md w-full px-[10px] pt-2 pb-2`}
78
84
style={{
···
87
93
<h3 className="text-primary truncate">{postRecord.title}</h3>
88
94
89
95
<p className="text-secondary">{postRecord.description}</p>
96
+
90
97
<div className="flex gap-2 text-sm text-tertiary items-center pt-3">
91
-
<Link
98
+
<SpeedyLink
92
99
href={props.publication.href}
93
-
className="text-accent-contrast font-bold no-underline text-sm flex gap-[6px] items-center"
100
+
className="text-accent-contrast font-bold no-underline text-sm flex gap-[6px] items-center relative"
94
101
>
95
102
<PubIcon small record={pubRecord} uri={props.publication.uri} />
96
103
{pubRecord.name}
97
-
</Link>
104
+
</SpeedyLink>
98
105
<Separator classname="h-4 !min-h-0" />
99
106
NAME HERE
100
107
<Separator classname="h-4 !min-h-0" />
···
106
113
})}
107
114
</div>
108
115
</div>
109
-
</SpeedyLink>
116
+
</div>
110
117
</BaseThemeProvider>
111
118
);
112
119
};
120
+
121
+
const ReaderEmpty = () => {
122
+
return (
123
+
<div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center font-bold text-tertiary">
124
+
Nothing to read yet… <br />
125
+
Subscribe to publications and find their posts here!
126
+
<ButtonPrimary className="mx-auto place-self-center">
127
+
<DiscoverSmall /> Discover Publications
128
+
</ButtonPrimary>
129
+
</div>
130
+
);
131
+
};
+12
-9
app/reader/SubscriptionsContent.tsx
+12
-9
app/reader/SubscriptionsContent.tsx
···
13
13
}[];
14
14
}[];
15
15
}) => {
16
-
if (props.publications.length === 0)
17
-
return (
18
-
<div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center font-bold text-tertiary">
19
-
Looks like you don't have any publication subscriptions yet!
20
-
<ButtonPrimary className="mx-auto place-self-center">
21
-
<DiscoverSmall /> Discover Publications!
22
-
</ButtonPrimary>
23
-
</div>
24
-
);
16
+
if (props.publications.length === 0) return <SubscriptionsEmpty />;
25
17
26
18
return (
27
19
<div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 gap-3">
···
29
21
</div>
30
22
);
31
23
};
24
+
25
+
const SubscriptionsEmpty = () => {
26
+
return (
27
+
<div className="flex flex-col gap-2 container bg-[rgba(var(--bg-page),.7)] sm:p-4 p-3 justify-between text-center font-bold text-tertiary">
28
+
You haven't subscribed to any publications yet!
29
+
<ButtonPrimary className="mx-auto place-self-center">
30
+
<DiscoverSmall /> Discover Publications
31
+
</ButtonPrimary>
32
+
</div>
33
+
);
34
+
};