@mailoo/blog 0.0.0-stage → 1.32.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. package/LICENSE +16 -0
  2. package/README.md +142 -2
  3. package/dist/client/article-body.cjs +115 -0
  4. package/dist/client/article-body.cjs.map +1 -0
  5. package/dist/client/article-body.d.cts +15 -0
  6. package/dist/client/article-body.d.ts +15 -0
  7. package/dist/client/article-body.js +80 -0
  8. package/dist/client/article-body.js.map +1 -0
  9. package/dist/client/index.cjs +776 -0
  10. package/dist/client/index.cjs.map +1 -0
  11. package/dist/client/index.d.cts +6 -0
  12. package/dist/client/index.d.ts +6 -0
  13. package/dist/client/index.js +731 -0
  14. package/dist/client/index.js.map +1 -0
  15. package/dist/client/linked-links.cjs +125 -0
  16. package/dist/client/linked-links.cjs.map +1 -0
  17. package/dist/client/linked-links.d.cts +31 -0
  18. package/dist/client/linked-links.d.ts +31 -0
  19. package/dist/client/linked-links.js +100 -0
  20. package/dist/client/linked-links.js.map +1 -0
  21. package/dist/client/marks.cjs +300 -0
  22. package/dist/client/marks.cjs.map +1 -0
  23. package/dist/client/marks.d.cts +30 -0
  24. package/dist/client/marks.d.ts +30 -0
  25. package/dist/client/marks.js +276 -0
  26. package/dist/client/marks.js.map +1 -0
  27. package/dist/client/printable.cjs +106 -0
  28. package/dist/client/printable.cjs.map +1 -0
  29. package/dist/client/printable.d.cts +12 -0
  30. package/dist/client/printable.d.ts +12 -0
  31. package/dist/client/printable.js +82 -0
  32. package/dist/client/printable.js.map +1 -0
  33. package/dist/client/share.cjs +234 -0
  34. package/dist/client/share.cjs.map +1 -0
  35. package/dist/client/share.d.cts +41 -0
  36. package/dist/client/share.d.ts +41 -0
  37. package/dist/client/share.js +205 -0
  38. package/dist/client/share.js.map +1 -0
  39. package/dist/index.cjs +89 -0
  40. package/dist/index.cjs.map +1 -0
  41. package/dist/index.d.cts +5 -0
  42. package/dist/index.d.ts +5 -0
  43. package/dist/index.js +60 -0
  44. package/dist/index.js.map +1 -0
  45. package/dist/routes/index.cjs +266 -0
  46. package/dist/routes/index.cjs.map +1 -0
  47. package/dist/routes/index.d.cts +87 -0
  48. package/dist/routes/index.d.ts +87 -0
  49. package/dist/routes/index.js +240 -0
  50. package/dist/routes/index.js.map +1 -0
  51. package/dist/server/index.cjs +368 -0
  52. package/dist/server/index.cjs.map +1 -0
  53. package/dist/server/index.d.cts +132 -0
  54. package/dist/server/index.d.ts +132 -0
  55. package/dist/server/index.js +339 -0
  56. package/dist/server/index.js.map +1 -0
  57. package/dist/utils-DXbN9MTi.d.cts +120 -0
  58. package/dist/utils-DXbN9MTi.d.ts +120 -0
  59. package/package.json +110 -3
@@ -0,0 +1,731 @@
1
+ "use client";
2
+
3
+ // src/components/blog-article-body.tsx
4
+ import ReactMarkdown from "react-markdown";
5
+ import remarkGfm from "remark-gfm";
6
+
7
+ // src/markdown-link-target.ts
8
+ function markdownHrefOpensInNewTab(href) {
9
+ const h = href.trim();
10
+ if (h === "") return false;
11
+ if (h.startsWith("#") || h.startsWith("?")) return false;
12
+ if (h.startsWith("//")) return true;
13
+ if (h.startsWith("/")) return false;
14
+ if (h.startsWith("./") || h.startsWith("../")) return false;
15
+ const lower = h.toLowerCase();
16
+ return lower.startsWith("http://") || lower.startsWith("https://");
17
+ }
18
+
19
+ // src/server/utils.ts
20
+ var BLOG_ARTICLE_PROSE_CLASSNAME = [
21
+ "prose",
22
+ "prose-gray",
23
+ "prose-lg",
24
+ "max-w-none",
25
+ "dark:prose-invert",
26
+ "prose-a:text-blue-600",
27
+ "hover:prose-a:text-blue-700",
28
+ "dark:prose-a:text-blue-400",
29
+ "dark:hover:prose-a:text-blue-300",
30
+ "prose-blockquote:border-blue-500",
31
+ "prose-img:rounded-lg",
32
+ "prose-img:shadow-sm"
33
+ ].join(" ");
34
+
35
+ // src/components/blog-article-body.tsx
36
+ import { jsx } from "react/jsx-runtime";
37
+ function BlogArticleBody({
38
+ htmlContent,
39
+ markdownFallback,
40
+ className = BLOG_ARTICLE_PROSE_CLASSNAME
41
+ }) {
42
+ const html = htmlContent?.trim();
43
+ if (html) {
44
+ return /* @__PURE__ */ jsx(
45
+ "div",
46
+ {
47
+ className,
48
+ dangerouslySetInnerHTML: { __html: html }
49
+ }
50
+ );
51
+ }
52
+ const md = markdownFallback?.trim();
53
+ if (md) {
54
+ return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
55
+ ReactMarkdown,
56
+ {
57
+ remarkPlugins: [remarkGfm],
58
+ components: {
59
+ a({ children, href, ...props }) {
60
+ const h = href ?? "";
61
+ const openNew = markdownHrefOpensInNewTab(h);
62
+ return /* @__PURE__ */ jsx(
63
+ "a",
64
+ {
65
+ href: h,
66
+ ...openNew ? { target: "_blank", rel: "noopener noreferrer" } : {},
67
+ ...props,
68
+ children
69
+ }
70
+ );
71
+ }
72
+ },
73
+ children: md
74
+ }
75
+ ) });
76
+ }
77
+ return null;
78
+ }
79
+
80
+ // src/components/blog-linked-links-display.tsx
81
+ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
82
+ var TYPE_ORDER = [
83
+ "internal_article",
84
+ "update_announcement",
85
+ "external_resource"
86
+ ];
87
+ function groupByType(links) {
88
+ const sorted = [...links].sort((a, b) => a.sortOrder - b.sortOrder);
89
+ const map = /* @__PURE__ */ new Map();
90
+ for (const t of TYPE_ORDER) map.set(t, []);
91
+ for (const link of sorted) {
92
+ const bucket = map.get(link.type);
93
+ if (bucket) bucket.push(link);
94
+ }
95
+ return map;
96
+ }
97
+ function hrefForLink(url, blogLocale) {
98
+ if (blogLocale && url.startsWith("/blog/")) {
99
+ return `/${blogLocale}${url}`;
100
+ }
101
+ return url;
102
+ }
103
+ function BlogLinkedLinksDisplay({
104
+ links,
105
+ title,
106
+ typeLabels,
107
+ variant = "article",
108
+ blogLocale,
109
+ LinkComponent
110
+ }) {
111
+ if (!links.length) return null;
112
+ const grouped = groupByType(links);
113
+ const sectionClass = variant === "article" ? "mt-10 border-t border-gray-200 pt-8 dark:border-gray-700" : "mt-4 rounded-lg border border-dashed border-gray-300 p-4 dark:border-gray-600";
114
+ const Link = LinkComponent ?? (({ href, className, children }) => /* @__PURE__ */ jsx2("a", { href, className, children }));
115
+ return /* @__PURE__ */ jsxs(
116
+ "section",
117
+ {
118
+ className: sectionClass,
119
+ "aria-labelledby": "mailoo-linked-links-heading",
120
+ children: [
121
+ /* @__PURE__ */ jsx2(
122
+ "h2",
123
+ {
124
+ id: "mailoo-linked-links-heading",
125
+ className: variant === "article" ? "mb-6 text-xl font-semibold text-gray-900 dark:text-white" : "mb-3 text-sm font-semibold text-gray-800 dark:text-gray-200",
126
+ children: title
127
+ }
128
+ ),
129
+ /* @__PURE__ */ jsx2("div", { className: "space-y-8", children: TYPE_ORDER.map((type) => {
130
+ const items = grouped.get(type) ?? [];
131
+ if (!items.length) return null;
132
+ return /* @__PURE__ */ jsxs("div", { children: [
133
+ /* @__PURE__ */ jsx2(
134
+ "h3",
135
+ {
136
+ className: variant === "article" ? "mb-3 text-sm font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400" : "mb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400",
137
+ children: typeLabels[type]
138
+ }
139
+ ),
140
+ /* @__PURE__ */ jsx2("ul", { className: "space-y-4", children: items.map((item) => /* @__PURE__ */ jsxs(
141
+ "li",
142
+ {
143
+ children: [
144
+ /* @__PURE__ */ jsx2(
145
+ Link,
146
+ {
147
+ href: hrefForLink(item.url, blogLocale),
148
+ className: variant === "article" ? "text-lg font-medium text-blue-600 hover:underline dark:text-blue-400" : "text-sm font-medium text-blue-600 hover:underline dark:text-blue-400",
149
+ children: item.label
150
+ }
151
+ ),
152
+ item.date && /* @__PURE__ */ jsx2(
153
+ "p",
154
+ {
155
+ className: variant === "article" ? "mt-1 text-sm text-gray-500 dark:text-gray-400" : "mt-0.5 text-xs text-gray-500 dark:text-gray-400",
156
+ children: /* @__PURE__ */ jsx2("time", { dateTime: item.date, children: new Date(item.date).toLocaleDateString() })
157
+ }
158
+ ),
159
+ item.intro && /* @__PURE__ */ jsx2(
160
+ "p",
161
+ {
162
+ className: variant === "article" ? "mt-2 text-sm text-gray-600 dark:text-gray-300" : "mt-1 text-xs text-gray-600 dark:text-gray-300",
163
+ children: item.intro
164
+ }
165
+ )
166
+ ]
167
+ },
168
+ item.id ?? `${item.type}-${item.url}-${item.sortOrder}`
169
+ )) })
170
+ ] }, type);
171
+ }) })
172
+ ]
173
+ }
174
+ );
175
+ }
176
+
177
+ // src/components/blog-printable-buttons.tsx
178
+ import { useEffect } from "react";
179
+ var PRINT_BUTTON_CLASSNAME = [
180
+ "inline-flex items-center justify-center rounded-lg font-medium transition-colors",
181
+ "focus:outline-none focus:ring-2 focus:ring-offset-2",
182
+ "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus:ring-gray-500",
183
+ "dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
184
+ "px-3 py-1.5 text-sm"
185
+ ].join(" ");
186
+ function escapeHtml(text) {
187
+ return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
188
+ }
189
+ function printMailooSection(section) {
190
+ const body = section.querySelector(".mailoo-printable-body");
191
+ if (!body) return;
192
+ const printTitle = section.getAttribute("data-print-title")?.trim() || document.title;
193
+ const win = window.open("", "_blank", "noopener,noreferrer");
194
+ if (!win) return;
195
+ const html = `<!DOCTYPE html>
196
+ <html lang="en">
197
+ <head>
198
+ <meta charset="utf-8">
199
+ <title>${escapeHtml(printTitle)}</title>
200
+ <style>
201
+ body {
202
+ font-family: system-ui, -apple-system, sans-serif;
203
+ line-height: 1.6;
204
+ max-width: 48rem;
205
+ margin: 2rem auto;
206
+ padding: 0 1rem;
207
+ color: #111;
208
+ }
209
+ img { max-width: 100%; height: auto; }
210
+ a { color: #2563eb; }
211
+ </style>
212
+ </head>
213
+ <body>
214
+ ${body.innerHTML}
215
+ </body>
216
+ </html>`;
217
+ win.document.open();
218
+ win.document.write(html);
219
+ win.document.close();
220
+ win.focus();
221
+ win.onload = () => {
222
+ win.print();
223
+ };
224
+ setTimeout(() => {
225
+ win.print();
226
+ }, 300);
227
+ }
228
+ function BlogPrintableButtons({
229
+ printLabel = "Print summary",
230
+ buttonClassName = PRINT_BUTTON_CLASSNAME
231
+ } = {}) {
232
+ useEffect(() => {
233
+ const sections = document.querySelectorAll(
234
+ "[data-mailoo-print]:not([data-mailoo-print-enhanced])"
235
+ );
236
+ for (const section of sections) {
237
+ section.setAttribute("data-mailoo-print-enhanced", "true");
238
+ const actions = document.createElement("div");
239
+ actions.className = "mailoo-printable-actions";
240
+ const button = document.createElement("button");
241
+ button.type = "button";
242
+ button.className = buttonClassName;
243
+ button.textContent = printLabel;
244
+ button.addEventListener("click", () => {
245
+ printMailooSection(section);
246
+ });
247
+ actions.appendChild(button);
248
+ section.insertBefore(actions, section.firstChild);
249
+ }
250
+ }, [printLabel, buttonClassName]);
251
+ return null;
252
+ }
253
+
254
+ // src/components/blog-article-marks.tsx
255
+ import { useCallback, useEffect as useEffect2, useMemo, useState } from "react";
256
+ import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
257
+ var STORAGE_KEY = "mailoo_blog_visitor_key";
258
+ var VISITOR_STATE_PREFIX = "mailoo_blog_mark:";
259
+ var BTN = "inline-flex items-center gap-1.5 rounded-lg border px-3 py-1.5 text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-60";
260
+ var BTN_IDLE = "border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus:ring-gray-500 dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800";
261
+ var BTN_ACTIVE = "border-blue-600 bg-blue-50 text-blue-800 focus:ring-blue-500 dark:border-blue-400 dark:bg-blue-950 dark:text-blue-200";
262
+ function createVisitorKey() {
263
+ if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
264
+ return crypto.randomUUID();
265
+ }
266
+ return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
267
+ const r = Math.random() * 16 | 0;
268
+ const v = c === "x" ? r : r & 3 | 8;
269
+ return v.toString(16);
270
+ });
271
+ }
272
+ function readVisitorKey() {
273
+ try {
274
+ const existing = localStorage.getItem(STORAGE_KEY);
275
+ if (existing && existing.length >= 32) return existing;
276
+ const next = createVisitorKey();
277
+ localStorage.setItem(STORAGE_KEY, next);
278
+ return next;
279
+ } catch {
280
+ return createVisitorKey();
281
+ }
282
+ }
283
+ function readLocalMark(slug) {
284
+ try {
285
+ const raw = localStorage.getItem(`${VISITOR_STATE_PREFIX}${slug}`);
286
+ if (!raw) return { sentiment: null, hasFeedback: false };
287
+ const parsed = JSON.parse(raw);
288
+ return {
289
+ sentiment: parsed.sentiment === "LIKE" || parsed.sentiment === "DISLIKE" ? parsed.sentiment : null,
290
+ hasFeedback: Boolean(parsed.hasFeedback)
291
+ };
292
+ } catch {
293
+ return { sentiment: null, hasFeedback: false };
294
+ }
295
+ }
296
+ function writeLocalMark(slug, mark) {
297
+ try {
298
+ localStorage.setItem(
299
+ `${VISITOR_STATE_PREFIX}${slug}`,
300
+ JSON.stringify(mark)
301
+ );
302
+ } catch {
303
+ }
304
+ }
305
+ async function postMark(apiBasePath, slug, kind, body) {
306
+ const res = await fetch(
307
+ `${apiBasePath}/slug/${encodeURIComponent(slug)}/${kind}`,
308
+ {
309
+ method: "POST",
310
+ headers: { "Content-Type": "application/json" },
311
+ body: JSON.stringify(body)
312
+ }
313
+ );
314
+ const json = await res.json();
315
+ if (!res.ok || !json.data) {
316
+ throw new Error(json.message || json.error || `HTTP ${res.status}`);
317
+ }
318
+ return json.data;
319
+ }
320
+ function BlogArticleMarks({
321
+ slug,
322
+ locale,
323
+ likeCount = 0,
324
+ dislikeCount = 0,
325
+ feedbackCount = 0,
326
+ apiBasePath = "/api/v1/blog",
327
+ labels,
328
+ className
329
+ }) {
330
+ const [visitorKey, setVisitorKey] = useState(null);
331
+ const [counts, setCounts] = useState({
332
+ likeCount,
333
+ dislikeCount,
334
+ feedbackCount
335
+ });
336
+ const [sentiment, setSentiment] = useState(
337
+ null
338
+ );
339
+ const [hasFeedback, setHasFeedback] = useState(false);
340
+ const [pending, setPending] = useState(false);
341
+ const [error, setError] = useState(null);
342
+ const [modal, setModal] = useState(null);
343
+ const [comment, setComment] = useState("");
344
+ useEffect2(() => {
345
+ const key = readVisitorKey();
346
+ setVisitorKey(key);
347
+ const local = readLocalMark(slug);
348
+ setSentiment(local.sentiment);
349
+ setHasFeedback(local.hasFeedback);
350
+ }, [slug]);
351
+ useEffect2(() => {
352
+ setCounts({ likeCount, dislikeCount, feedbackCount });
353
+ }, [likeCount, dislikeCount, feedbackCount]);
354
+ const applyState = useCallback(
355
+ (state) => {
356
+ setCounts({
357
+ likeCount: state.likeCount,
358
+ dislikeCount: state.dislikeCount,
359
+ feedbackCount: state.feedbackCount
360
+ });
361
+ setSentiment(state.sentiment);
362
+ setHasFeedback(state.hasFeedback);
363
+ writeLocalMark(slug, {
364
+ sentiment: state.sentiment,
365
+ hasFeedback: state.hasFeedback
366
+ });
367
+ },
368
+ [slug]
369
+ );
370
+ const run = useCallback(
371
+ async (kind, body) => {
372
+ if (!visitorKey || pending) return;
373
+ setPending(true);
374
+ setError(null);
375
+ try {
376
+ const state = await postMark(apiBasePath, slug, kind, {
377
+ ...body,
378
+ visitorKey,
379
+ ...locale ? { locale } : {}
380
+ });
381
+ applyState(state);
382
+ setModal(null);
383
+ setComment("");
384
+ } catch {
385
+ setError(labels.error);
386
+ } finally {
387
+ setPending(false);
388
+ }
389
+ },
390
+ [apiBasePath, applyState, labels.error, locale, pending, slug, visitorKey]
391
+ );
392
+ const onLike = useCallback(() => {
393
+ if (sentiment === "LIKE") {
394
+ void run("reaction", { action: "clear" });
395
+ return;
396
+ }
397
+ void run("reaction", { action: "set", sentiment: "LIKE" });
398
+ }, [run, sentiment]);
399
+ const onDislikeClick = useCallback(() => {
400
+ if (sentiment === "DISLIKE") {
401
+ void run("reaction", { action: "clear" });
402
+ return;
403
+ }
404
+ if (hasFeedback) {
405
+ void run("reaction", { action: "set", sentiment: "DISLIKE" });
406
+ return;
407
+ }
408
+ setModal("dislike");
409
+ }, [hasFeedback, run, sentiment]);
410
+ const onSubmitModal = useCallback(() => {
411
+ const trimmed = comment.trim();
412
+ if (!trimmed) {
413
+ setError(labels.dislikeRequiresComment);
414
+ return;
415
+ }
416
+ if (modal === "dislike") {
417
+ void run("reaction", {
418
+ action: "set",
419
+ sentiment: "DISLIKE",
420
+ comment: trimmed
421
+ });
422
+ return;
423
+ }
424
+ void run("feedback", { action: "set", comment: trimmed });
425
+ }, [comment, labels.dislikeRequiresComment, modal, run]);
426
+ const rootClass = useMemo(
427
+ () => [
428
+ "mt-8 flex flex-col gap-3 border-t border-gray-200 pt-6 dark:border-gray-700",
429
+ className
430
+ ].filter(Boolean).join(" "),
431
+ [className]
432
+ );
433
+ return /* @__PURE__ */ jsxs2("div", { className: rootClass, children: [
434
+ /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-2", children: [
435
+ /* @__PURE__ */ jsxs2(
436
+ "button",
437
+ {
438
+ type: "button",
439
+ className: `${BTN} ${sentiment === "LIKE" ? BTN_ACTIVE : BTN_IDLE}`,
440
+ disabled: pending || !visitorKey,
441
+ onClick: onLike,
442
+ "aria-pressed": sentiment === "LIKE",
443
+ children: [
444
+ /* @__PURE__ */ jsx3("span", { children: labels.like }),
445
+ /* @__PURE__ */ jsx3("span", { className: "tabular-nums", children: counts.likeCount })
446
+ ]
447
+ }
448
+ ),
449
+ /* @__PURE__ */ jsxs2(
450
+ "button",
451
+ {
452
+ type: "button",
453
+ className: `${BTN} ${sentiment === "DISLIKE" ? BTN_ACTIVE : BTN_IDLE}`,
454
+ disabled: pending || !visitorKey,
455
+ onClick: onDislikeClick,
456
+ "aria-pressed": sentiment === "DISLIKE",
457
+ children: [
458
+ /* @__PURE__ */ jsx3("span", { children: labels.dislike }),
459
+ /* @__PURE__ */ jsx3("span", { className: "tabular-nums", children: counts.dislikeCount })
460
+ ]
461
+ }
462
+ ),
463
+ /* @__PURE__ */ jsxs2(
464
+ "button",
465
+ {
466
+ type: "button",
467
+ className: `${BTN} ${hasFeedback ? BTN_ACTIVE : BTN_IDLE}`,
468
+ disabled: pending || !visitorKey,
469
+ onClick: () => {
470
+ setError(null);
471
+ setModal("feedback");
472
+ },
473
+ "aria-pressed": hasFeedback,
474
+ children: [
475
+ /* @__PURE__ */ jsx3("span", { children: labels.feedback }),
476
+ /* @__PURE__ */ jsx3("span", { className: "tabular-nums", children: counts.feedbackCount })
477
+ ]
478
+ }
479
+ )
480
+ ] }),
481
+ error ? /* @__PURE__ */ jsx3("p", { className: "text-sm text-red-600 dark:text-red-400", role: "alert", children: error }) : null,
482
+ modal ? /* @__PURE__ */ jsxs2("div", { className: "rounded-lg border border-gray-200 p-4 dark:border-gray-700", children: [
483
+ /* @__PURE__ */ jsx3("label", { className: "mb-2 block text-sm font-medium text-gray-800 dark:text-gray-200", children: modal === "dislike" ? labels.dislikeRequiresComment : labels.feedback }),
484
+ /* @__PURE__ */ jsx3(
485
+ "textarea",
486
+ {
487
+ className: "mb-3 w-full rounded-md border border-gray-300 bg-white p-2 text-sm text-gray-900 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-100",
488
+ rows: 3,
489
+ maxLength: 1e3,
490
+ value: comment,
491
+ placeholder: labels.feedbackPlaceholder,
492
+ onChange: (e) => setComment(e.target.value)
493
+ }
494
+ ),
495
+ /* @__PURE__ */ jsxs2("div", { className: "flex gap-2", children: [
496
+ /* @__PURE__ */ jsx3(
497
+ "button",
498
+ {
499
+ type: "button",
500
+ className: `${BTN} ${BTN_ACTIVE}`,
501
+ disabled: pending,
502
+ onClick: onSubmitModal,
503
+ children: labels.submit
504
+ }
505
+ ),
506
+ /* @__PURE__ */ jsx3(
507
+ "button",
508
+ {
509
+ type: "button",
510
+ className: `${BTN} ${BTN_IDLE}`,
511
+ disabled: pending,
512
+ onClick: () => {
513
+ setModal(null);
514
+ setComment("");
515
+ setError(null);
516
+ },
517
+ children: labels.cancel
518
+ }
519
+ )
520
+ ] })
521
+ ] }) : null
522
+ ] });
523
+ }
524
+
525
+ // src/components/blog-article-share.tsx
526
+ import { useCallback as useCallback2, useState as useState2 } from "react";
527
+
528
+ // src/lib/share-urls.ts
529
+ function requireAbsoluteHttpUrl(pageUrl) {
530
+ const trimmed = pageUrl.trim();
531
+ if (!trimmed) {
532
+ throw new Error("Share URL must be a non-empty absolute http(s) URL");
533
+ }
534
+ let parsed;
535
+ try {
536
+ parsed = new URL(trimmed);
537
+ } catch {
538
+ throw new Error(`Share URL is not a valid absolute URL: ${pageUrl}`);
539
+ }
540
+ if (parsed.protocol !== "http:" && parsed.protocol !== "https:") {
541
+ throw new Error(`Share URL must use http or https: ${pageUrl}`);
542
+ }
543
+ return trimmed;
544
+ }
545
+ function buildFacebookSharerUrl(pageUrl, quote) {
546
+ const params = new URLSearchParams({
547
+ u: requireAbsoluteHttpUrl(pageUrl)
548
+ });
549
+ const trimmedQuote = quote?.trim();
550
+ if (trimmedQuote) {
551
+ params.set("quote", trimmedQuote);
552
+ }
553
+ return `https://www.facebook.com/sharer/sharer.php?${params.toString()}`;
554
+ }
555
+ function buildXIntentTweetUrl(pageUrl, text) {
556
+ const params = new URLSearchParams({
557
+ text,
558
+ url: requireAbsoluteHttpUrl(pageUrl)
559
+ });
560
+ return `https://twitter.com/intent/tweet?${params.toString()}`;
561
+ }
562
+ function buildLinkedInShareUrl(pageUrl) {
563
+ const params = new URLSearchParams({
564
+ url: requireAbsoluteHttpUrl(pageUrl)
565
+ });
566
+ return `https://www.linkedin.com/sharing/share-offsite/?${params.toString()}`;
567
+ }
568
+ function getSharePageUrlFromLocation(location) {
569
+ return `${location.origin}${location.pathname}`;
570
+ }
571
+
572
+ // src/components/blog-article-share.tsx
573
+ import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
574
+ var DEFAULT_BUTTON_CLASSNAME = [
575
+ "inline-flex items-center justify-center rounded-lg font-medium transition-colors",
576
+ "focus:outline-none focus:ring-2 focus:ring-offset-2",
577
+ "border border-gray-300 bg-transparent text-gray-700 hover:bg-gray-50 focus:ring-gray-500",
578
+ "dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-800",
579
+ "px-3 py-1.5 text-sm"
580
+ ].join(" ");
581
+ var DEFAULT_HEADING_CLASSNAME = "mb-4 text-lg font-semibold text-gray-900 dark:text-white";
582
+ var DEFAULT_SECTION_CLASSNAME = "mt-12 border-t border-gray-200 pt-8 dark:border-gray-700";
583
+ function resolveShareUrl(url) {
584
+ if (url !== void 0) {
585
+ return requireAbsoluteHttpUrl(url);
586
+ }
587
+ if (typeof window === "undefined") {
588
+ throw new Error("Share URL requires a browser location when url is omitted");
589
+ }
590
+ return getSharePageUrlFromLocation(window.location);
591
+ }
592
+ function openShareWindow(href) {
593
+ window.open(href, "_blank", "noopener,noreferrer");
594
+ }
595
+ function BlogArticleShare({
596
+ title: _title,
597
+ text,
598
+ labels,
599
+ url,
600
+ className = DEFAULT_SECTION_CLASSNAME,
601
+ headingClassName = DEFAULT_HEADING_CLASSNAME,
602
+ buttonClassName = DEFAULT_BUTTON_CLASSNAME
603
+ }) {
604
+ const [linkCopied, setLinkCopied] = useState2(false);
605
+ const shareUrl = useCallback2(() => resolveShareUrl(url), [url]);
606
+ const onCopy = useCallback2(async () => {
607
+ try {
608
+ await navigator.clipboard.writeText(shareUrl());
609
+ setLinkCopied(true);
610
+ setTimeout(() => setLinkCopied(false), 2e3);
611
+ } catch {
612
+ }
613
+ }, [shareUrl]);
614
+ return /* @__PURE__ */ jsxs3("div", { className, children: [
615
+ /* @__PURE__ */ jsx4("h3", { className: headingClassName, children: labels.heading }),
616
+ /* @__PURE__ */ jsxs3("div", { className: "flex flex-wrap gap-4", children: [
617
+ /* @__PURE__ */ jsxs3(
618
+ "button",
619
+ {
620
+ type: "button",
621
+ className: buttonClassName,
622
+ onClick: () => {
623
+ openShareWindow(buildXIntentTweetUrl(shareUrl(), text));
624
+ },
625
+ children: [
626
+ /* @__PURE__ */ jsx4(
627
+ "svg",
628
+ {
629
+ className: "mr-2 h-4 w-4",
630
+ fill: "currentColor",
631
+ viewBox: "0 0 24 24",
632
+ "aria-hidden": "true",
633
+ children: /* @__PURE__ */ jsx4("path", { d: "M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0022 5.92a8.19 8.19 0 01-2.357.646 4.118 4.118 0 001.804-2.27 8.224 8.224 0 01-2.605.996 4.107 4.107 0 00-6.993 3.743 11.65 11.65 0 01-8.457-4.287 4.106 4.106 0 001.27 5.477A4.072 4.072 0 012.8 9.713v.052a4.105 4.105 0 003.292 4.022 4.095 4.095 0 01-1.853.07 4.108 4.108 0 003.834 2.85A8.233 8.233 0 012 18.407a11.616 11.616 0 006.29 1.84" })
634
+ }
635
+ ),
636
+ labels.x
637
+ ]
638
+ }
639
+ ),
640
+ /* @__PURE__ */ jsxs3(
641
+ "button",
642
+ {
643
+ type: "button",
644
+ className: buttonClassName,
645
+ onClick: () => {
646
+ openShareWindow(buildFacebookSharerUrl(shareUrl()));
647
+ },
648
+ children: [
649
+ /* @__PURE__ */ jsx4(
650
+ "svg",
651
+ {
652
+ className: "mr-2 h-4 w-4",
653
+ fill: "currentColor",
654
+ viewBox: "0 0 24 24",
655
+ "aria-hidden": "true",
656
+ children: /* @__PURE__ */ jsx4("path", { d: "M24 12.073C24 5.405 18.627 0 12 0S0 5.405 0 12.073C0 18.1 4.388 23.094 10.125 24v-8.435H7.078v-3.492h3.047V9.414c0-3.025 1.792-4.697 4.533-4.697 1.312 0 2.686.236 2.686.236v2.974h-1.513c-1.49 0-1.956.931-1.956 1.887v2.259h3.328l-.532 3.492h-2.796V24C19.612 23.094 24 18.1 24 12.073z" })
657
+ }
658
+ ),
659
+ labels.facebook
660
+ ]
661
+ }
662
+ ),
663
+ /* @__PURE__ */ jsxs3(
664
+ "button",
665
+ {
666
+ type: "button",
667
+ className: buttonClassName,
668
+ onClick: () => {
669
+ openShareWindow(buildLinkedInShareUrl(shareUrl()));
670
+ },
671
+ children: [
672
+ /* @__PURE__ */ jsx4(
673
+ "svg",
674
+ {
675
+ className: "mr-2 h-4 w-4",
676
+ fill: "currentColor",
677
+ viewBox: "0 0 24 24",
678
+ "aria-hidden": "true",
679
+ children: /* @__PURE__ */ jsx4("path", { d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" })
680
+ }
681
+ ),
682
+ labels.linkedin
683
+ ]
684
+ }
685
+ ),
686
+ /* @__PURE__ */ jsxs3(
687
+ "button",
688
+ {
689
+ type: "button",
690
+ className: buttonClassName,
691
+ onClick: () => void onCopy(),
692
+ children: [
693
+ /* @__PURE__ */ jsx4(
694
+ "svg",
695
+ {
696
+ className: "mr-2 h-4 w-4",
697
+ fill: "none",
698
+ stroke: "currentColor",
699
+ viewBox: "0 0 24 24",
700
+ "aria-hidden": "true",
701
+ children: /* @__PURE__ */ jsx4(
702
+ "path",
703
+ {
704
+ strokeLinecap: "round",
705
+ strokeLinejoin: "round",
706
+ strokeWidth: 2,
707
+ d: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"
708
+ }
709
+ )
710
+ }
711
+ ),
712
+ linkCopied ? labels.linkCopied : labels.copyLink
713
+ ]
714
+ }
715
+ )
716
+ ] })
717
+ ] });
718
+ }
719
+ export {
720
+ BlogArticleBody,
721
+ BlogArticleMarks,
722
+ BlogArticleShare,
723
+ BlogLinkedLinksDisplay,
724
+ BlogPrintableButtons,
725
+ buildFacebookSharerUrl,
726
+ buildLinkedInShareUrl,
727
+ buildXIntentTweetUrl,
728
+ getSharePageUrlFromLocation,
729
+ requireAbsoluteHttpUrl
730
+ };
731
+ //# sourceMappingURL=index.js.map