a tool for shared writing and social publishing
use static post content for rss
+146
-24
+2
-3
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
+2
-3
app/lish/[did]/[publication]/[rkey]/PostContent.tsx
···
11
11
import { TextBlock } from "./TextBlock";
12
12
import { Popover } from "components/Popover";
13
13
import { theme } from "tailwind.config";
14
-
import { ServerSafePopover } from "./ServerSafePopover";
15
14
import { ImageAltSmall } from "components/Icons/ImageAlt";
16
15
17
16
export function PostContent({
···
134
133
/>
135
134
{b.block.alt && (
136
135
<div className="absolute bottom-1.5 right-2 h-max">
137
-
<ServerSafePopover
136
+
<Popover
138
137
className="text-sm max-w-xs min-w-0"
139
138
side="left"
140
139
trigger={<ImageAltSmall fillColor={theme.colors["bg-page"]} />}
···
142
141
<div className="text-sm text-secondary w-full">
143
142
{b.block.alt}
144
143
</div>
145
-
</ServerSafePopover>
144
+
</Popover>
146
145
</div>
147
146
)}
148
147
</div>
-19
app/lish/[did]/[publication]/[rkey]/ServerSafePopover.tsx
-19
app/lish/[did]/[publication]/[rkey]/ServerSafePopover.tsx
···
1
-
import { Popover } from "components/Popover";
2
-
3
-
export const ServerSafePopover = (props: {
4
-
trigger: React.ReactNode;
5
-
disabled?: boolean;
6
-
children: React.ReactNode;
7
-
align?: "start" | "end" | "center";
8
-
side?: "top" | "bottom" | "left" | "right";
9
-
background?: string;
10
-
border?: string;
11
-
className?: string;
12
-
open?: boolean;
13
-
onOpenChange?: (open: boolean) => void;
14
-
asChild?: boolean;
15
-
arrowFill?: string;
16
-
}) => {
17
-
if (typeof window === "undefined") return props.trigger;
18
-
return <Popover {...props} />;
19
-
};
+142
app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
+142
app/lish/[did]/[publication]/[rkey]/StaticPostContent.tsx
···
1
+
import {
2
+
PubLeafletBlocksHeader,
3
+
PubLeafletBlocksImage,
4
+
PubLeafletBlocksText,
5
+
PubLeafletBlocksUnorderedList,
6
+
PubLeafletBlocksWebsite,
7
+
PubLeafletDocument,
8
+
PubLeafletPagesLinearDocument,
9
+
} from "lexicons/api";
10
+
import { blobRefToSrc } from "src/utils/blobRefToSrc";
11
+
import { TextBlock } from "./TextBlock";
12
+
13
+
export function StaticPostContent({
14
+
blocks,
15
+
did,
16
+
}: {
17
+
blocks: PubLeafletPagesLinearDocument.Block[];
18
+
did: string;
19
+
}) {
20
+
return (
21
+
<div className="postContent flex flex-col">
22
+
{blocks.map((b, index) => {
23
+
return <Block block={b} did={did} key={index} />;
24
+
})}
25
+
</div>
26
+
);
27
+
}
28
+
29
+
let Block = ({
30
+
block,
31
+
did,
32
+
isList,
33
+
}: {
34
+
block: PubLeafletPagesLinearDocument.Block;
35
+
did: string;
36
+
isList?: boolean;
37
+
}) => {
38
+
let b = block;
39
+
40
+
switch (true) {
41
+
case PubLeafletBlocksUnorderedList.isMain(b.block): {
42
+
return (
43
+
<ul>
44
+
{b.block.children.map((child, index) => (
45
+
<ListItem item={child} did={did} key={index} />
46
+
))}
47
+
</ul>
48
+
);
49
+
}
50
+
case PubLeafletBlocksWebsite.isMain(b.block): {
51
+
return (
52
+
<a href={b.block.src} target="_blank">
53
+
<h3>{b.block.title}</h3>
54
+
<p>{b.block.description}</p>
55
+
{b.block.previewImage && (
56
+
<div
57
+
className={`imagePreview w-[120px] m-2 -mb-2 bg-cover shrink-0 rounded-t-md border border-border rotate-[4deg] origin-center relative`}
58
+
style={{
59
+
backgroundImage: `url(${blobRefToSrc(b.block.previewImage?.ref, did)})`,
60
+
backgroundPosition: "center",
61
+
}}
62
+
/>
63
+
)}
64
+
</a>
65
+
);
66
+
}
67
+
case PubLeafletBlocksImage.isMain(b.block): {
68
+
return (
69
+
<img
70
+
alt={b.block.alt}
71
+
height={b.block.aspectRatio?.height}
72
+
width={b.block.aspectRatio?.width}
73
+
src={blobRefToSrc(b.block.image.ref, did)}
74
+
/>
75
+
);
76
+
}
77
+
case PubLeafletBlocksText.isMain(b.block):
78
+
return (
79
+
<p>
80
+
<TextBlock facets={b.block.facets} plaintext={b.block.plaintext} />
81
+
</p>
82
+
);
83
+
case PubLeafletBlocksHeader.isMain(b.block): {
84
+
if (b.block.level === 1)
85
+
return (
86
+
<h1>
87
+
<TextBlock {...b.block} />
88
+
</h1>
89
+
);
90
+
if (b.block.level === 2)
91
+
return (
92
+
<h2>
93
+
<TextBlock {...b.block} />
94
+
</h2>
95
+
);
96
+
if (b.block.level === 3)
97
+
return (
98
+
<h3>
99
+
<TextBlock {...b.block} />
100
+
</h3>
101
+
);
102
+
// if (b.block.level === 4) return <h4>{b.block.plaintext}</h4>;
103
+
// if (b.block.level === 5) return <h5>{b.block.plaintext}</h5>;
104
+
return (
105
+
<h6>
106
+
<TextBlock {...b.block} />
107
+
</h6>
108
+
);
109
+
}
110
+
default:
111
+
return null;
112
+
}
113
+
};
114
+
115
+
function ListItem(props: {
116
+
item: PubLeafletBlocksUnorderedList.ListItem;
117
+
did: string;
118
+
className?: string;
119
+
}) {
120
+
return (
121
+
<li className={`!pb-0 flex flex-row gap-2`}>
122
+
<div
123
+
className={`listMarker shrink-0 mx-2 z-[1] mt-[14px] h-[5px] w-[5px] rounded-full bg-secondary`}
124
+
/>
125
+
<div className="flex flex-col">
126
+
<Block block={{ block: props.item.content }} did={props.did} isList />
127
+
{props.item.children?.length ? (
128
+
<ul className="-ml-[7px] sm:ml-[7px]">
129
+
{props.item.children.map((child, index) => (
130
+
<ListItem
131
+
item={child}
132
+
did={props.did}
133
+
key={index}
134
+
className={props.className}
135
+
/>
136
+
))}
137
+
</ul>
138
+
) : null}
139
+
</div>
140
+
</li>
141
+
);
142
+
}
+2
-2
app/lish/[did]/[publication]/rss/route.ts
+2
-2
app/lish/[did]/[publication]/rss/route.ts
···
10
10
import { NextRequest, NextResponse } from "next/server";
11
11
import { createElement } from "react";
12
12
import { supabaseServerClient } from "supabase/serverClient";
13
-
import { PostContent } from "../[rkey]/PostContent";
13
+
import { StaticPostContent } from "../[rkey]/StaticPostContent";
14
14
15
15
export async function GET(
16
16
req: Request,
···
64
64
id: `https://${pubRecord.base_path}/${rkey}`,
65
65
link: `https://${pubRecord.base_path}/${rkey}`,
66
66
content: renderToStaticMarkup(
67
-
createElement(PostContent, { blocks, did: uri.host }),
67
+
createElement(StaticPostContent, { blocks, did: uri.host }),
68
68
),
69
69
});
70
70
});