leaflet.pub
a tool for shared writing and social publishing
adjustments to postListing and tag page
cozylittle.house
+10
-91
-9
app/(home-pages)/tag/TagHeader.tsx
-9
app/(home-pages)/tag/TagHeader.tsx
+2
-2
app/(home-pages)/tag/[tag]/page.tsx
+2
-2
app/(home-pages)/tag/[tag]/page.tsx
···
52
52
53
53
const TagHeader = (props: { tag: string; postCount: number }) => {
54
54
return (
55
-
<div className="flex flex-col gap-2 items-center">
56
-
<div className="flex items-center gap-2 text-4xl font-bold text-primary">
55
+
<div className="flex flex-col leading-tight items-center">
56
+
<div className="flex items-center gap-3 text-xl font-bold text-primary">
57
57
<TagTiny className="scale-150" />
58
58
<h1>{props.tag}</h1>
59
59
</div>
-60
app/(home-pages)/tag/page.tsx
-60
app/(home-pages)/tag/page.tsx
···
1
-
import { DashboardLayout } from "components/PageLayouts/DashboardLayout";
2
-
import { TagHeader } from "./TagHeader";
3
-
import { Tag } from "components/Tags";
4
-
import { Separator } from "components/Layout";
5
-
6
-
export default async function TagPage(props: {}) {
7
-
return (
8
-
<DashboardLayout
9
-
id="tag"
10
-
cardBorderHidden={false}
11
-
currentPage="tag"
12
-
defaultTab="default"
13
-
actions={null}
14
-
tabs={{
15
-
default: {
16
-
controls: null,
17
-
content: <TagContent />,
18
-
},
19
-
}}
20
-
/>
21
-
);
22
-
}
23
-
24
-
const TagContent = () => {
25
-
return (
26
-
<div className="max-w-prose mx-auto w-full grow shrink-0">
27
-
<div className="discoverHeader flex flex-col gap-3 items-center text-center pt-2 px-4">
28
-
<TagHeader />
29
-
<RelatedTags />
30
-
</div>
31
-
<div className="pt-6 flex flex-col gap-3">
32
-
<DummyPost />
33
-
<DummyPost />
34
-
<DummyPost />
35
-
<DummyPost />
36
-
<DummyPost />
37
-
<DummyPost />
38
-
<DummyPost />
39
-
<DummyPost />
40
-
</div>
41
-
</div>
42
-
);
43
-
};
44
-
const DummyPost = () => {
45
-
return (
46
-
<div className="h-[202px] w-full bg-bg-page border border-border-light rounded-lg" />
47
-
);
48
-
};
49
-
50
-
const RelatedTags = () => {
51
-
return (
52
-
<div className="flex flex-wrap gap-1 text-tertiary text-sm items-center ">
53
-
<div className="font-bold pr-2">Related</div>
54
-
<Tag name="i am" />
55
-
<Tag name="a related tag" />
56
-
<Tag name="but i don't know" />
57
-
<Tag name="if I'm in scope" />
58
-
</div>
59
-
);
60
-
};
-2
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
-2
app/lish/[did]/[publication]/[rkey]/Interactions/Interactions.tsx
···
19
19
import { ManageSubscription, SubscribeWithBluesky } from "app/lish/Subscribe";
20
20
import { EditTiny } from "components/Icons/EditTiny";
21
21
import { getPublicationURL } from "app/lish/createPub/getPublicationURL";
22
-
import { PubListing } from "app/(home-pages)/discover/PubListing";
23
-
import { PubIcon } from "components/ActionBar/Publications";
24
22
25
23
export type InteractionState = {
26
24
drawerOpen: undefined | boolean;
+2
-2
components/InteractionsPreview.tsx
+2
-2
components/InteractionsPreview.tsx
···
31
31
<>
32
32
<TagPopover tags={props.tags!} />
33
33
{interactionsAvailable || props.share ? (
34
-
<Separator classname="h-4" />
34
+
<Separator classname="h-4!" />
35
35
) : null}
36
36
</>
37
37
)}
···
55
55
</SpeedyLink>
56
56
)}
57
57
{interactionsAvailable && props.share ? (
58
-
<Separator classname="h-4 !min-h-0" />
58
+
<Separator classname="h-4! !min-h-0" />
59
59
) : null}
60
60
{props.share && (
61
61
<>
+6
-16
components/PostListing.tsx
+6
-16
components/PostListing.tsx
···
69
69
>
70
70
<h3 className="text-primary truncate">{postRecord.title}</h3>
71
71
72
-
<p className="text-secondary">{postRecord.description}</p>
73
-
<div className="flex flex-col-reverse md:flex-row md gap-4 md:gap-2 text-sm text-tertiary items-center justify-start pt-1.5 md:pt-3 w-full">
72
+
<p className="text-secondary italic">{postRecord.description}</p>
73
+
<div className="flex flex-col-reverse md:flex-row md gap-2 text-sm text-tertiary items-center justify-start pt-1.5 md:pt-3 w-full">
74
74
<PubInfo
75
75
href={props.publication.href}
76
-
author={props.author || ""}
77
76
pubRecord={pubRecord}
78
77
uri={props.publication.uri}
79
78
/>
80
-
<Separator classname="h-4 !min-h-0 md:block hidden" />
81
79
<div className="flex flex-row justify-between gap-2 items-center w-full">
82
-
<PostInfo
83
-
author={props.author || ""}
84
-
publishedAt={postRecord.publishedAt}
85
-
/>
80
+
<PostInfo publishedAt={postRecord.publishedAt} />
86
81
<InteractionPreview
87
82
postUrl={`${props.publication.href}/${postUri.rkey}`}
88
83
quotesCount={quotes}
···
103
98
href: string;
104
99
pubRecord: PubLeafletPublication.Record;
105
100
uri: string;
106
-
author: string;
107
101
}) => {
108
102
return (
109
-
<div className="flex gap-2 md:w-auto shrink-0 w-full">
103
+
<div className="flex flex-col md:w-auto shrink-0 w-full">
104
+
<hr className="md:hidden block border-border-light mb-2" />
110
105
<Link
111
106
href={props.href}
112
107
className="text-accent-contrast font-bold no-underline text-sm flex gap-1 items-center md:w-fit relative shrink-0"
···
114
109
<PubIcon small record={props.pubRecord} uri={props.uri} />
115
110
{props.pubRecord.name}
116
111
</Link>
117
-
118
-
<div className="truncate">{props.author}</div>
119
112
</div>
120
113
);
121
114
};
122
115
123
-
const PostInfo = (props: {
124
-
author: string;
125
-
publishedAt: string | undefined;
126
-
}) => {
116
+
const PostInfo = (props: { publishedAt: string | undefined }) => {
127
117
return (
128
118
<div className="flex gap-2 items-center shrink-0 self-start">
129
119
{props.publishedAt && (