leaflet.pub
a tool for shared writing and social publishing
added indication that post is on non-leaflet page is applicable
cozylittle.house
+27
-16
+2
-6
app/(home-pages)/reader/InboxContent.tsx
+2
-6
app/(home-pages)/reader/InboxContent.tsx
···
7
7
import { useEffect, useRef, useState } from "react";
8
8
import Link from "next/link";
9
9
import { PostListing } from "components/PostListing";
10
-
import { SortSmall } from "components/Icons/SortSmall";
11
-
import { Input } from "components/Input";
12
10
import { useHasBackgroundImage } from "components/Pages/useHasBackgroundImage";
13
11
import {
14
12
SelectedPostListing,
15
13
useSelectedPostListing,
16
14
} from "src/useSelectedPostState";
17
-
import { AtUri } from "@atproto/api";
18
-
import { MentionsDrawerContent } from "app/lish/[did]/[publication]/[rkey]/Interactions/Quotes";
19
15
import { CommentsDrawerContent } from "app/lish/[did]/[publication]/[rkey]/Interactions/Comments";
20
16
import { CloseTiny } from "components/Icons/CloseTiny";
21
17
import { SpeedyLink } from "components/SpeedyLink";
···
87
83
let hasBackgroundImage = useHasBackgroundImage();
88
84
89
85
return (
90
-
<div className="flex flex-row gap-6 ">
91
-
<div className="flex flex-col gap-8 relative">
86
+
<div className="flex flex-row gap-6 w-full ">
87
+
<div className="flex flex-col gap-8 w-full relative">
92
88
{sortedPosts.map((p) => (
93
89
<PostListing {...p} key={p.documents.uri} />
94
90
))}
+25
-10
components/PostListing.tsx
+25
-10
components/PostListing.tsx
···
20
20
import { ShareTiny } from "./Icons/ShareTiny";
21
21
import { useSelectedPostListing } from "src/useSelectedPostState";
22
22
import { mergePreferences } from "src/utils/mergePreferences";
23
+
import { ExternalLinkTiny } from "./Icons/ExternalLinkTiny";
23
24
24
25
export const PostListing = (props: Post) => {
25
26
let pubRecord = props.publication?.pubRecord as
···
125
126
<p className="postListingDescription text-secondary line-clamp-3 sm:text-base text-sm">
126
127
{postRecord.description}
127
128
</p>
128
-
<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">
129
+
<div className="flex flex-col-reverse gap-2 text-sm text-tertiary items-center justify-start pt-1.5 w-full">
129
130
{props.publication && pubRecord && (
130
131
<PubInfo
131
132
href={props.publication.href}
···
163
164
pubRecord: NormalizedPublication;
164
165
uri: string;
165
166
}) => {
167
+
let isLeaflet =
168
+
props.pubRecord.theme?.$type === "pub.leaflet.publication#theme";
169
+
let cleanUrl = props.pubRecord.url
170
+
?.replace(/^https?:\/\//, "")
171
+
.replace(/^www\./, "");
172
+
166
173
return (
167
-
<div className="flex flex-col md:w-auto shrink-0 w-full">
168
-
<hr className="md:hidden block border-border-light mb-1" />
169
-
<Link
170
-
href={props.href}
171
-
className="text-accent-contrast font-bold no-underline text-sm flex gap-[6px] items-center md:w-fit relative shrink-0"
172
-
>
173
-
<PubIcon tiny record={props.pubRecord} uri={props.uri} />
174
-
{props.pubRecord.name}
175
-
</Link>
174
+
<div className="flex flex-col shrink-0 w-full">
175
+
<hr className=" block border-border-light mb-1" />
176
+
<div className="flex justify-between gap-4 w-full ">
177
+
<Link
178
+
href={props.href}
179
+
className="text-accent-contrast font-bold no-underline text-sm flex gap-[6px] items-center relative grow w-max shrink-0 min-w-0"
180
+
>
181
+
<PubIcon tiny record={props.pubRecord} uri={props.uri} />
182
+
<div className="w-max min-w-0">{props.pubRecord.name}</div>
183
+
</Link>
184
+
{!isLeaflet && (
185
+
<div className="text-sm flex flex-row items-center text-tertiary gap-1 min-w-0">
186
+
<div className="truncate min-w-0">{cleanUrl}</div>
187
+
<ExternalLinkTiny className="shrink-0" />
188
+
</div>
189
+
)}
190
+
</div>
176
191
</div>
177
192
);
178
193
};