a tool for shared writing and social publishing
list styling
+63
-27
+61
-25
app/lish/[did]/[publication]/[rkey]/page.tsx
+61
-25
app/lish/[did]/[publication]/[rkey]/page.tsx
···
63
63
return (
64
64
<ThemeProvider entityID={null}>
65
65
<div className="postPage w-full h-screen bg-[#FDFCFA] flex items-stretch">
66
-
<div className="pubWrapper flex flex-col w-full ">
67
-
<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">
68
-
<div className="flex flex-col pb-8">
66
+
<div className="postWrapper flex flex-col w-full ">
67
+
<div className="pub flex flex-col px-3 sm:px-4 py-3 sm:py-9 mx-auto max-w-prose h-full w-full overflow-auto">
68
+
<div className="pubHeader flex flex-col pb-5">
69
69
<Link
70
70
className="font-bold hover:no-underline text-accent-contrast"
71
71
href={getPublicationURL(
···
89
89
</p>
90
90
) : null}
91
91
</div>
92
-
{blocks.map((b, index) => {
93
-
return <Block block={b} did={did} key={index} />;
94
-
})}
92
+
<div className="postContent flex flex-col ">
93
+
{blocks.map((b, index) => {
94
+
return <Block block={b} did={did} key={index} />;
95
+
})}
96
+
</div>
95
97
</div>
96
98
</div>
97
99
</div>
···
102
104
let Block = ({
103
105
block,
104
106
did,
107
+
isList,
105
108
}: {
106
109
block: PubLeafletPagesLinearDocument.Block;
107
110
did: string;
111
+
isList?: boolean;
108
112
}) => {
109
113
let b = block;
110
-
let className = `${b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignRight" ? "text-right" : b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignCenter" ? "text-center" : ""}`;
111
-
console.log(b.alignment);
114
+
115
+
// non text blocks, they need this padding, pt-3 sm:pt-4, which is applied in each case
116
+
let className = `
117
+
postBlockWrapper
118
+
pt-1
119
+
${isList ? "isListItem pb-0" : " pb-2 last:pb-3 last:sm:pb-4 first:pt-2 sm:first:pt-3"}
120
+
${b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignRight" ? "text-right" : b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignCenter" ? "text-center" : ""}
121
+
`;
122
+
112
123
switch (true) {
113
124
case PubLeafletBlocksUnorderedList.isMain(b.block): {
114
125
return (
115
-
<ul>
126
+
<ul className="-ml-[1px] sm:ml-[9px]">
116
127
{b.block.children.map((child, index) => (
117
-
<ListItem item={child} did={did} key={index} />
128
+
<ListItem
129
+
item={child}
130
+
did={did}
131
+
key={index}
132
+
className={className}
133
+
/>
118
134
))}
119
135
</ul>
120
136
);
···
124
140
<img
125
141
height={b.block.aspectRatio?.height}
126
142
width={b.block.aspectRatio?.width}
127
-
className={`pb-2 sm:pb-3 ${className}`}
143
+
className={`!pt-3 sm:!pt-4 ${className}`}
128
144
src={`https://bsky.social/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${(b.block.image.ref as unknown as { $link: string })["$link"]}`}
129
145
/>
130
146
);
131
147
}
132
148
case PubLeafletBlocksText.isMain(b.block):
133
149
return (
134
-
<div className={`pt-0 pb-2 sm:pb-3 ${className}`}>
150
+
<div className={` ${className}`}>
135
151
<TextBlock facets={b.block.facets} plaintext={b.block.plaintext} />
136
152
</div>
137
153
);
138
154
case PubLeafletBlocksHeader.isMain(b.block): {
139
155
if (b.block.level === 1)
140
156
return (
141
-
<h1 className={`pb-0 pt-2 sm:pt-3 ${className}`}>
157
+
<h2 className={`${className}`}>
142
158
<TextBlock {...b.block} />
143
-
</h1>
159
+
</h2>
144
160
);
145
161
if (b.block.level === 2)
146
162
return (
147
-
<h3 className={`pb-0 pt-2 sm:pt-3 ${className}`}>
163
+
<h3 className={`${className}`}>
148
164
<TextBlock {...b.block} />
149
165
</h3>
150
166
);
151
167
if (b.block.level === 3)
152
168
return (
153
-
<h4 className={`pb-0 pt-2 sm:pt-3 ${className}`}>
169
+
<h4 className={`${className}`}>
154
170
<TextBlock {...b.block} />
155
171
</h4>
156
172
);
···
170
186
function ListItem(props: {
171
187
item: PubLeafletBlocksUnorderedList.ListItem;
172
188
did: string;
189
+
className?: string;
173
190
}) {
191
+
// ${
192
+
// props.type === "heading"
193
+
// ? headingLevel === 3
194
+
// ? "pt-[12px]"
195
+
// : headingLevel === 2
196
+
// ? "pt-[15px]"
197
+
// : "pt-[20px]"
198
+
// : "pt-[12px]"
199
+
// }
174
200
return (
175
-
<li>
176
-
<Block block={{ block: props.item.content }} did={props.did} />
177
-
{props.item.children?.length ? (
178
-
<ul>
179
-
{props.item.children.map((child, index) => (
180
-
<ListItem item={child} did={props.did} key={index} />
181
-
))}
182
-
</ul>
183
-
) : null}
201
+
<li className={`!pb-0 flex flex-row gap-2`}>
202
+
<div
203
+
className={`listMarker shrink-0 mx-2 z-[1] mt-[14px] h-[5px] w-[5px] rounded-full bg-secondary`}
204
+
/>
205
+
<div className="flex flex-col">
206
+
<Block block={{ block: props.item.content }} did={props.did} isList />
207
+
{props.item.children?.length ? (
208
+
<ul className="-ml-[7px] sm:ml-[7px]">
209
+
{props.item.children.map((child, index) => (
210
+
<ListItem
211
+
item={child}
212
+
did={props.did}
213
+
key={index}
214
+
className={props.className}
215
+
/>
216
+
))}
217
+
</ul>
218
+
) : null}
219
+
</div>
184
220
</li>
185
221
);
186
222
}
+2
-2
components/Pages/PublicationMetadata.tsx
+2
-2
components/Pages/PublicationMetadata.tsx
···
54
54
55
55
return (
56
56
<div
57
-
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"}`}
57
+
className={`flex flex-col px-3 sm:px-4 pb-5 ${cardBorderHidden ? "sm:pt-6 pt-0" : "sm:pt-3 pt-2"}`}
58
58
>
59
59
<div className="flex gap-2">
60
60
<Link
···
122
122
if (!pub || !pub.publications) return null;
123
123
124
124
return (
125
-
<div className={`flex flex-col px-3 sm:px-4 pb-4 sm:pb-5 sm:pt-3 pt-2`}>
125
+
<div className={`flex flex-col px-3 sm:px-4 pb-5 sm:pt-3 pt-2`}>
126
126
<div className="text-accent-contrast font-bold hover:no-underline">
127
127
{pub.publications?.name}
128
128
</div>