tangled
alpha
login
or
join now
leaflet.pub
/
leaflet
289
fork
atom
a tool for shared writing and social publishing
289
fork
atom
overview
issues
29
pulls
pipelines
styles in post, post list
cozylittle.house
10 months ago
47adb651
598f8dba
+64
-46
5 changed files
expand all
collapse all
unified
split
app
lish
[handle]
[publication]
DraftList.tsx
[rkey]
page.tsx
page.tsx
components
Icons
EditTiny.tsx
Pages
PublicationMetadata.tsx
-11
app/lish/[handle]/[publication]/DraftList.tsx
···
52
52
)}
53
53
<div className="text-secondary italic">{props.description}</div>
54
54
</Link>
55
55
-
<DraftOptionsMenu />
56
55
</div>
57
56
);
58
57
}
59
59
-
60
60
-
const DraftOptionsMenu = () => {
61
61
-
return (
62
62
-
<Menu trigger={<MoreOptionsVerticalTiny />}>
63
63
-
<MenuItem onSelect={() => {}}>
64
64
-
<DeleteSmall /> Delete Draft
65
65
-
</MenuItem>
66
66
-
</Menu>
67
67
-
);
68
68
-
};
+15
-8
app/lish/[handle]/[publication]/[rkey]/page.tsx
···
61
61
return (
62
62
<div className="postPage w-full h-screen bg-bg-leaflet flex items-stretch">
63
63
<div className="pubWrapper flex flex-col w-full ">
64
64
-
<div className="pubContent flex flex-col px-4 py-6 mx-auto max-w-prose h-full w-full overflow-auto">
65
65
-
<Link
66
66
-
className="font-bold hover:no-underline text-accent-contrast -mb-2 sm:-mb-3"
67
67
-
href={`/lish/${(await props.params).handle}/${(await props.params).publication}`}
68
68
-
>
69
69
-
{decodeURIComponent((await props.params).publication)}
70
70
-
</Link>
71
71
-
<h1>{record.title}</h1>
64
64
+
<div className="pubContent flex flex-col px-3 sm:px-4 py-3 sm:py-9 mx-auto max-w-prose h-full w-full overflow-auto">
65
65
+
<div className="flex flex-col pb-8">
66
66
+
<Link
67
67
+
className="font-bold hover:no-underline text-accent-contrast"
68
68
+
href={`/lish/${(await props.params).handle}/${(await props.params).publication}`}
69
69
+
>
70
70
+
{decodeURIComponent((await props.params).publication)}
71
71
+
</Link>
72
72
+
<h2 className="">{record.title}</h2>
73
73
+
<p className="italic text-secondary">
74
74
+
This is a placeholder description and I want it to be longer so it
75
75
+
spans two lines.
76
76
+
</p>
77
77
+
<p className="text-sm text-tertiary pt-3">Published 06/02/2025</p>
78
78
+
</div>
72
79
{blocks.map((b, index) => {
73
80
switch (true) {
74
81
case PubLeafletBlocksImage.isMain(b.block): {
+9
-17
app/lish/[handle]/[publication]/page.tsx
···
8
8
import { Footer } from "components/ActionBar/Footer";
9
9
import { PublicationDashboard } from "./PublicationDashboard";
10
10
import { DraftList } from "./DraftList";
11
11
-
import { NewDraftSecondaryButton } from "./NewDraftButton";
12
11
import { getIdentityData } from "actions/getIdentityData";
13
12
import { ThemeProvider } from "components/ThemeManager/ThemeProvider";
14
13
import { Actions } from "./Actions";
···
16
15
import { AtUri } from "@atproto/syntax";
17
16
import { PubLeafletDocument } from "lexicons/api";
18
17
import React from "react";
19
19
-
import { MoreOptionsVerticalTiny } from "components/Icons/MoreOptionsVerticalTiny";
20
20
-
import { Menu, MenuItem } from "components/Layout";
18
18
+
import { EditTiny } from "components/Icons/EditTiny";
21
19
22
20
const idResolver = new IdResolver();
23
21
···
76
74
</Sidebar>
77
75
</div>
78
76
<div
79
79
-
className={`h-full overflow-y-scroll pt-4 px-3 sm:pl-5 sm:pt-9 w-full`}
77
77
+
className={`h-full overflow-y-scroll pt-4 sm:pl-5 sm:pt-9 w-full`}
80
78
>
81
79
<PublicationDashboard
82
80
name={publication.name}
···
105
103
let record = doc.documents
106
104
.data as PubLeafletDocument.Record;
107
105
108
108
-
console.log(record);
109
109
-
110
106
return (
111
107
<React.Fragment key={doc.documents?.uri}>
112
108
<div className="flex w-full ">
113
109
<Link
114
110
href={`/lish/${params.handle}/${params.publication}/${uri.rkey}`}
115
115
-
className="publishedPost grow flex flex-col gap-0 hover:!no-underline"
111
111
+
className="publishedPost grow flex flex-col gap-2 hover:!no-underline"
116
112
>
117
113
<h3 className="text-primary">{record.title}</h3>
118
114
<p className="italic text-secondary">
···
123
119
</p>
124
120
</Link>
125
121
{leaflet && (
126
126
-
<Link href={`/${leaflet.leaflet}`}>edit</Link>
122
122
+
<Link
123
123
+
className="pt-[6px]"
124
124
+
href={`/${leaflet.leaflet}`}
125
125
+
>
126
126
+
<EditTiny />
127
127
+
</Link>
127
128
)}
128
128
-
<MoreOptionsVerticalTiny />
129
129
-
{/* <Menu trigger={<MoreOptionsVerticalTiny />}>
130
130
-
<MenuItem onSelect={() => {}}>
131
131
-
Edit Post
132
132
-
</MenuItem>
133
133
-
<MenuItem onSelect={() => {}}>
134
134
-
Delete Post
135
135
-
</MenuItem>
136
136
-
</Menu> */}
137
129
</div>
138
130
<hr className="last:hidden border-border-light" />
139
131
</React.Fragment>
+18
components/Icons/EditTiny.tsx
···
1
1
+
import { Props } from "./Props";
2
2
+
3
3
+
export const EditTiny = (props: Props) => {
4
4
+
return (
5
5
+
<svg
6
6
+
width="16"
7
7
+
height="16"
8
8
+
viewBox="0 0 16 16"
9
9
+
fill="none"
10
10
+
xmlns="http://www.w3.org/2000/svg"
11
11
+
>
12
12
+
<path
13
13
+
d="M10.1056 1.68769L12.1633 2.08905L12.2336 2.10858C12.3024 2.13294 12.3657 2.17212 12.4181 2.22382L13.8303 3.61933C13.9072 3.69532 13.9578 3.79462 13.9738 3.90155L14.2668 5.8664C14.2902 6.02306 14.2381 6.18207 14.1262 6.29413L7.04803 13.3723C6.99391 13.4263 6.92837 13.4678 6.85662 13.4924L6.78338 13.5109L2.31756 14.3137C2.1587 14.3422 1.99469 14.2925 1.87908 14.1799C1.76354 14.0671 1.70901 13.9049 1.73358 13.7453L2.43768 9.17987L2.45623 9.10272C2.48044 9.02777 2.5221 8.95878 2.5783 8.90253L9.65643 1.8244L9.7033 1.78339C9.8165 1.6953 9.96291 1.6599 10.1056 1.68769ZM3.40155 9.49335L3.10858 11.3879C3.47498 11.4495 3.97079 11.6089 4.1867 11.8312C4.58807 12.2451 4.57767 12.6117 4.5783 12.8908L6.45233 12.5539L13.2404 5.76581L13.1154 4.93085L11.8312 6.21601C11.6361 6.41112 11.3195 6.41084 11.1242 6.21601C10.9289 6.02074 10.9289 5.70424 11.1242 5.50897L12.7111 3.92011L12.05 3.26679L6.89862 8.33808C6.7018 8.53176 6.38528 8.52903 6.19158 8.33222C5.99798 8.13539 6.00066 7.81885 6.19744 7.62519L11.0148 2.88397L10.175 2.71991L3.40155 9.49335ZM10.1213 6.45722C10.3143 6.32736 10.5789 6.34638 10.7512 6.51581C10.9235 6.68535 10.9472 6.94959 10.8205 7.14472L10.757 7.22284L6.67694 11.3693C6.48327 11.5661 6.16674 11.5688 5.9699 11.3752C5.77307 11.1815 5.77037 10.865 5.96405 10.6682L10.0441 6.52167L10.1213 6.45722ZM5.06854 8.71698C5.26259 8.58889 5.5266 8.61065 5.69744 8.78144C5.86828 8.95227 5.88998 9.21627 5.7619 9.41034L5.69744 9.48847L5.35662 9.82929C5.16136 10.0245 4.84485 10.0245 4.64959 9.82929C4.45439 9.63402 4.45435 9.3175 4.64959 9.12226L4.99041 8.78144L5.06854 8.71698Z"
14
14
+
fill="currentColor"
15
15
+
/>
16
16
+
</svg>
17
17
+
);
18
18
+
};
+22
-10
components/Pages/PublicationMetadata.tsx
···
7
7
import { useReplicache } from "src/replicache";
8
8
import { useIdentityData } from "components/IdentityProvider";
9
9
import { AutosizeTextarea } from "components/utils/AutosizeTextarea";
10
10
+
import { Separator } from "components/Layout";
10
11
export const PublicationMetadata = ({
11
12
cardBorderHidden,
12
13
}: {
···
43
44
44
45
return (
45
46
<div
46
46
-
className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-4 ${cardBorderHidden ? "sm:pt-6 pt-0" : "sm:pt-3 pt-2"}`}
47
47
+
className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-5 ${cardBorderHidden ? "sm:pt-6 pt-0" : "sm:pt-3 pt-2"}`}
47
48
>
48
48
-
<Link
49
49
-
href={`/lish/${identity?.resolved_did?.alsoKnownAs?.[0].slice(5)}/${pub.publications.name}`}
50
50
-
className="text-accent-contrast font-bold hover:no-underline"
51
51
-
>
52
52
-
{pub.publications?.name}
53
53
-
</Link>
49
49
+
<div className="flex gap-2">
50
50
+
<Link
51
51
+
href={`/lish/${identity?.resolved_did?.alsoKnownAs?.[0].slice(5)}/${pub.publications.name}`}
52
52
+
className="text-accent-contrast font-bold hover:no-underline"
53
53
+
>
54
54
+
{pub.publications?.name}
55
55
+
</Link>
56
56
+
<div className="font-bold text-tertiary px-1 bg-border-light rounded-md ">
57
57
+
Editor
58
58
+
</div>
59
59
+
</div>
54
60
<Input
55
61
className="text-xl font-bold outline-none bg-transparent"
56
62
value={titleState}
···
61
67
/>
62
68
<AutosizeTextarea
63
69
placeholder="add an optional description..."
64
64
-
className="italic text-secondary outline-none bg-transparent pt-1"
70
70
+
className="italic text-secondary outline-none bg-transparent"
65
71
value={descriptionState}
66
72
onChange={(e) => {
67
73
setDescriptionState(e.currentTarget.value);
68
74
}}
69
75
/>
70
76
{pub.doc ? (
71
71
-
<p>Published</p>
77
77
+
<div className="flex flex-row items-center gap-2 pt-3">
78
78
+
<p className="text-sm text-tertiary">Published XX/XX/XXX</p>
79
79
+
<Separator classname="h-4" />
80
80
+
<Link className="text-sm" href="/">
81
81
+
View Post
82
82
+
</Link>
83
83
+
</div>
72
84
) : (
73
73
-
<p className="text-sm text-tertiary pt-1">Draft</p>
85
85
+
<p className="text-sm text-tertiary pt-2">Draft</p>
74
86
)}
75
87
</div>
76
88
);