Leaflet Blog in Deno Fresh
knotbin.com
1import { AppBskyFeedDefs } from 'npm:@atproto/api';
2
3type PostSummaryProps = {
4 postUrl: string;
5 post: AppBskyFeedDefs.PostView;
6};
7
8export const PostSummary = ({ postUrl, post }: PostSummaryProps) => {
9 const styles = `
10 .container {
11 max-width: 740px;
12 margin: 0 auto;
13 }
14
15 .statsBar {
16 display: flex;
17 align-items: center;
18 gap: 0.5rem;
19 }
20
21 .statsBar:hover {
22 text-decoration: underline;
23 }
24
25 .statItem {
26 display: flex;
27 align-items: center;
28 gap: 0.25rem;
29 white-space: nowrap;
30 }
31
32 .container a.link {
33 text-decoration: underline;
34 }
35
36 .container a.link:hover {
37 text-decoration: underline;
38 }
39
40 .icon {
41 width: 1.25rem;
42 height: 1.25rem;
43 }
44
45 .errorText, .loadingText {
46 text-align: center;
47 }
48
49 .commentsTitle {
50 margin-top: 1.5rem;
51 font-size: 1.25rem;
52 font-weight: bold;
53 }
54
55 .replyText {
56 margin-top: 0.5rem;
57 font-size: 0.875rem;
58 }
59
60 .divider {
61 margin-top: 0.5rem;
62 }
63
64 .commentsList {
65 margin-top: 0.5rem;
66 display: flex;
67 flex-direction: column;
68 gap: 0.5rem;
69 }
70
71 .container .showMoreButton {
72 margin-top: 0.5rem;
73 font-size: 0.875rem;
74 text-decoration: underline;
75 }
76
77 .container .showMoreButton:hover {
78 text-decoration: underline;
79 }
80
81 .commentContainer {
82 margin: 1rem 0;
83 font-size: 0.875rem;
84 }
85
86 .commentContent {
87 display: flex;
88 max-width: 36rem;
89 flex-direction: column;
90 gap: 0.5rem;
91 }
92
93 .authorLink {
94 display: flex;
95 flex-direction: row;
96 justify-content: flex-start;
97 align-items: center;
98 gap: 0.5rem;
99 }
100
101 .authorLink:hover {
102 text-decoration: underline;
103 }
104
105 .avatar {
106 height: 1rem;
107 width: 1rem;
108 flex-shrink: 0;
109 border-radius: 9999px;
110 background-color: #d1d5db;
111 }
112
113 .authorName {
114 overflow: hidden;
115 text-overflow: ellipsis;
116 white-space: nowrap;
117 display: -webkit-box;
118 -webkit-line-clamp: 1;
119 -webkit-box-orient: vertical;
120 }
121
122 .container a {
123 text-decoration: none;
124 color: inherit;
125 }
126
127 .container a:hover {
128 text-decoration: none;
129 }
130
131 .commentContent .handle {
132 color: #6b7280;
133 }
134 .repliesContainer {
135 border-left: 2px solid #525252;
136 padding-left: 0.5rem;
137 }
138
139 .actionsContainer {
140 margin-top: 0.5rem;
141 display: flex;
142 width: 100%;
143 max-width: 150px;
144 flex-direction: row;
145 align-items: center;
146 justify-content: space-between;
147 opacity: 0.6;
148 }
149
150
151 .actionsRow {
152 display: flex;
153 align-items: center;
154 gap: 0.25rem;
155 }
156 `;
157
158 return (
159 <>
160 <style>{styles}</style>
161 <a href={postUrl} target="_blank" rel="noreferrer noopener">
162 <p className="statsBar">
163 <span className="statItem">
164 <svg
165 className="icon"
166 xmlns="http://www.w3.org/2000/svg"
167 fill="pink"
168 viewBox="0 0 24 24"
169 strokeWidth="1.5"
170 stroke="pink"
171 flood-color="pink"
172 >
173 <path
174 strokeLinecap="round"
175 strokeLinejoin="round"
176 d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"
177 />
178 </svg>
179 <span>{post.likeCount ?? 0} likes</span>
180 </span>
181 <span className="statItem">
182 <svg
183 className="icon"
184 xmlns="http://www.w3.org/2000/svg"
185 fill="none"
186 viewBox="0 0 24 24"
187 strokeWidth="1.5"
188 stroke="green"
189 >
190 <path
191 strokeLinecap="round"
192 strokeLinejoin="round"
193 d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 0 0-3.7-3.7 48.678 48.678 0 0 0-7.324 0 4.006 4.006 0 0 0-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 0 0 3.7 3.7 48.656 48.656 0 0 0 7.324 0 4.006 4.006 0 0 0 3.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3-3 3"
194 />
195 </svg>
196 <span>{post.repostCount ?? 0} reposts</span>
197 </span>
198 <span className="statItem">
199 <svg
200 className="icon"
201 xmlns="http://www.w3.org/2000/svg"
202 fill="#7FBADC"
203 viewBox="0 0 24 24"
204 strokeWidth="1.5"
205 stroke="#7FBADC"
206 >
207 <path
208 strokeLinecap="round"
209 strokeLinejoin="round"
210 d="M12 20.25c4.97 0 9-3.694 9-8.25s-4.03-8.25-9-8.25S3 7.444 3 12c0 2.104.859 4.023 2.273 5.48.432.447.74 1.04.586 1.641a4.483 4.483 0 0 1-.923 1.785A5.969 5.969 0 0 0 6 21c1.282 0 2.47-.402 3.445-1.087.81.22 1.668.337 2.555.337Z"
211 />
212 </svg>
213 <span>{post.replyCount ?? 0} replies</span>
214 </span>
215 </p>
216 </a>
217 <h2 className="commentsTitle">Comments</h2>
218 <p className="replyText">
219 Join the conversation by{' '}
220 <a
221 className="link"
222 href={postUrl}
223 target="_blank"
224 rel="noreferrer noopener"
225 >
226 replying on Bluesky
227 </a>
228 .
229 </p>
230 </>
231 );
232};