a tool for shared writing and social publishing
add alignment to publication
+73
-51
+13
actions/publishToPublication.ts
+13
actions/publishToPublication.ts
···
153
153
return blocks.flatMap((b) => {
154
154
if (b.type !== "text" && b.type !== "heading" && b.type !== "image")
155
155
return [];
156
+
let alignmentValue =
157
+
scan.eav(b.value, "block/text-alignment")[0]?.data.value || "left";
158
+
159
+
let alignment =
160
+
alignmentValue === "center"
161
+
? "lex:pub.leaflet.pages.linearDocument#textAlignCenter"
162
+
: alignmentValue === "right"
163
+
? "lex:pub.leaflet.pages.linearDocument#textAlignRight"
164
+
: undefined;
165
+
156
166
if (b.type === "heading") {
157
167
let [headingLevel] = scan.eav(b.value, "block/heading-level");
158
168
···
160
170
return [
161
171
{
162
172
$type: "pub.leaflet.pages.linearDocument#block",
173
+
alignment,
163
174
block: {
164
175
$type: "pub.leaflet.blocks.header",
165
176
level: headingLevel?.data.value || 1,
···
175
186
return [
176
187
{
177
188
$type: "pub.leaflet.pages.linearDocument#block",
189
+
alignment,
178
190
block: {
179
191
$type: ids.PubLeafletBlocksText,
180
192
plaintext: stringValue,
···
191
203
return [
192
204
{
193
205
$type: "pub.leaflet.pages.linearDocument#block",
206
+
alignment,
194
207
block: {
195
208
$type: "pub.leaflet.blocks.image",
196
209
image: blobref,
+60
-51
app/lish/[did]/[publication]/[rkey]/page.tsx
+60
-51
app/lish/[did]/[publication]/[rkey]/page.tsx
···
89
89
) : null}
90
90
</div>
91
91
{blocks.map((b, index) => {
92
-
switch (true) {
93
-
case PubLeafletBlocksImage.isMain(b.block): {
94
-
return (
95
-
<img
96
-
key={index}
97
-
height={b.block.aspectRatio?.height}
98
-
width={b.block.aspectRatio?.width}
99
-
className="pb-2 sm:pb-3"
100
-
src={`https://bsky.social/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${(b.block.image.ref as unknown as { $link: string })["$link"]}`}
101
-
/>
102
-
);
103
-
}
104
-
case PubLeafletBlocksText.isMain(b.block):
105
-
return (
106
-
<div key={index} className="pt-0 pb-2 sm:pb-3">
107
-
<TextBlock
108
-
facets={b.block.facets}
109
-
plaintext={b.block.plaintext}
110
-
/>
111
-
</div>
112
-
);
113
-
case PubLeafletBlocksHeader.isMain(b.block): {
114
-
if (b.block.level === 1)
115
-
return (
116
-
<h1 key={index} className="pb-0 pt-2 sm:pt-3">
117
-
<TextBlock {...b.block} />
118
-
</h1>
119
-
);
120
-
if (b.block.level === 2)
121
-
return (
122
-
<h3 key={index} className="pb-0 pt-2 sm:pt-3">
123
-
<TextBlock {...b.block} />
124
-
</h3>
125
-
);
126
-
if (b.block.level === 3)
127
-
return (
128
-
<h4 key={index} className="pb-0 pt-2 sm:pt-3">
129
-
<TextBlock {...b.block} />
130
-
</h4>
131
-
);
132
-
// if (b.block.level === 4) return <h4>{b.block.plaintext}</h4>;
133
-
// if (b.block.level === 5) return <h5>{b.block.plaintext}</h5>;
134
-
return (
135
-
<h6 key={index}>
136
-
<TextBlock {...b.block} />
137
-
</h6>
138
-
);
139
-
}
140
-
default:
141
-
return null;
142
-
}
92
+
return <Block block={b} did={did} key={index} />;
143
93
})}
144
94
</div>
145
95
</div>
···
147
97
</ThemeProvider>
148
98
);
149
99
}
100
+
101
+
let Block = ({
102
+
block,
103
+
did,
104
+
}: {
105
+
block: PubLeafletPagesLinearDocument.Block;
106
+
did: string;
107
+
}) => {
108
+
let b = block;
109
+
let className = `${b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignRight" ? "text-right" : b.alignment === "lex:pub.leaflet.pages.linearDocument#textAlignCenter" ? "text-center" : ""}`;
110
+
console.log(b.alignment);
111
+
switch (true) {
112
+
case PubLeafletBlocksImage.isMain(b.block): {
113
+
return (
114
+
<img
115
+
height={b.block.aspectRatio?.height}
116
+
width={b.block.aspectRatio?.width}
117
+
className={`pb-2 sm:pb-3 ${className}`}
118
+
src={`https://bsky.social/xrpc/com.atproto.sync.getBlob?did=${did}&cid=${(b.block.image.ref as unknown as { $link: string })["$link"]}`}
119
+
/>
120
+
);
121
+
}
122
+
case PubLeafletBlocksText.isMain(b.block):
123
+
return (
124
+
<div className={`pt-0 pb-2 sm:pb-3 ${className}`}>
125
+
<TextBlock facets={b.block.facets} plaintext={b.block.plaintext} />
126
+
</div>
127
+
);
128
+
case PubLeafletBlocksHeader.isMain(b.block): {
129
+
if (b.block.level === 1)
130
+
return (
131
+
<h1 className={`pb-0 pt-2 sm:pt-3 ${className}`}>
132
+
<TextBlock {...b.block} />
133
+
</h1>
134
+
);
135
+
if (b.block.level === 2)
136
+
return (
137
+
<h3 className={`pb-0 pt-2 sm:pt-3 ${className}`}>
138
+
<TextBlock {...b.block} />
139
+
</h3>
140
+
);
141
+
if (b.block.level === 3)
142
+
return (
143
+
<h4 className={`pb-0 pt-2 sm:pt-3 ${className}`}>
144
+
<TextBlock {...b.block} />
145
+
</h4>
146
+
);
147
+
// if (b.block.level === 4) return <h4>{b.block.plaintext}</h4>;
148
+
// if (b.block.level === 5) return <h5>{b.block.plaintext}</h5>;
149
+
return (
150
+
<h6 className={`${className}`}>
151
+
<TextBlock {...b.block} />
152
+
</h6>
153
+
);
154
+
}
155
+
default:
156
+
return null;
157
+
}
158
+
};