embed-dlsurf-blogs 1.0.0

package/dist/index.js

@@ -0,0 +1,649 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  BlogRenderer: () => BlogRenderer,
+  default: () => BlogRenderer,
+  renderText: () => renderText
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/BlogRenderer.tsx
+var import_react = require("react");
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (!css || typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/BlogRenderer.css
+styleInject('.edlsb-wrapper {\n  background-color: #f8fafc;\n  font-family:\n    var(--font-merriweather),\n    "Merriweather",\n    Georgia,\n    serif;\n}\n.edlsb-progressBar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 4px;\n  background-color: #4f46e5;\n  transform-origin: left center;\n  z-index: 100;\n}\n.edlsb-main {\n  position: relative;\n}\n.edlsb-headerSection {\n  padding-top: 2rem;\n  padding-bottom: 5rem;\n  position: relative;\n  overflow: hidden;\n}\n.edlsb-headerContainer {\n  width: 100%;\n  max-width: 56rem;\n  margin: 0 auto;\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  position: relative;\n  z-index: 10;\n}\n.edlsb-headerContent {\n  text-align: center;\n}\n.edlsb-headerContent > * + * {\n  margin-top: 2rem;\n}\n@media (min-width: 768px) {\n  .edlsb-headerContent {\n    text-align: left;\n  }\n}\n.edlsb-metaRow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: 1rem;\n  color: #94a3b8;\n  font-weight: 700;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  text-transform: uppercase;\n  letter-spacing: 0.1em;\n  justify-content: center;\n}\n@media (min-width: 768px) {\n  .edlsb-metaRow {\n    justify-content: flex-start;\n  }\n}\n.edlsb-articleBadge {\n  padding: 0.25rem 0.75rem;\n  background-color: #ffffff;\n  border-radius: 0.5rem;\n  border: 1px solid #e2e8f0;\n  color: #4f46e5;\n}\n.edlsb-dot {\n  width: 0.25rem;\n  height: 0.25rem;\n  background-color: #cbd5e1;\n  border-radius: 9999px;\n}\n.edlsb-metaItem {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.edlsb-icon {\n  width: 1rem;\n  height: 1rem;\n}\n.edlsb-postTitle {\n  font-size: 2.25rem;\n  line-height: 0.95;\n  font-weight: 1000;\n  color: #0f172a;\n  letter-spacing: -0.04em;\n}\n@media (min-width: 768px) {\n  .edlsb-postTitle {\n    font-size: 3.75rem;\n  }\n}\n@media (min-width: 1024px) {\n  .edlsb-postTitle {\n    font-size: 4.5rem;\n  }\n}\n.edlsb-bodyContainer {\n  width: 100%;\n  max-width: 56rem;\n  margin: 0 auto;\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n  padding-top: 5rem;\n  padding-bottom: 5rem;\n}\n.edlsb-thumbnailWrapper {\n  margin-bottom: 2rem;\n  border-radius: 1rem;\n  overflow: hidden;\n  box-shadow: 0 25px 50px -12px rgb(49 46 129 / 0.1);\n  margin-top: -8rem;\n  position: relative;\n  z-index: 20;\n}\n.edlsb-thumbnail {\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n  max-height: 600px;\n}\n.edlsb-tocWrapper {\n  margin-bottom: 2.5rem;\n}\n.edlsb-tocToggle {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 0.75rem;\n  padding: 1rem 1.25rem;\n  border-radius: 1rem;\n  background-color: rgba(241, 245, 249, 0.8);\n  border: none;\n  cursor: pointer;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.edlsb-tocToggle:hover {\n  background-color: #f1f5f9;\n}\n.edlsb-tocToggle:hover .edlsb-tocIconWrap {\n  color: #334155;\n}\n.edlsb-tocToggleInner {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n.edlsb-tocIconWrap {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 1.75rem;\n  height: 1.75rem;\n  border-radius: 0.5rem;\n  background-color: rgba(226, 232, 240, 0.8);\n  color: #64748b;\n  transition-property: color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.edlsb-tocLabel {\n  font-size: 13px;\n  font-weight: 600;\n  color: #475569;\n}\n.edlsb-tocCount {\n  color: #94a3b8;\n  font-weight: 400;\n  margin-left: 0.25rem;\n}\n.edlsb-chevronIcon {\n  width: 1rem;\n  height: 1rem;\n  color: #94a3b8;\n  transition-property: transform;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 200ms;\n}\n.edlsb-chevronIconOpen {\n  transform: rotate(180deg);\n}\n.edlsb-tocPanelInner {\n  margin-top: 0.375rem;\n  border-radius: 1rem;\n  background-color: rgba(241, 245, 249, 0.8);\n  padding: 0.5rem;\n}\n.edlsb-tocGrid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 0.125rem;\n}\n@media (min-width: 640px) {\n  .edlsb-tocGrid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n}\n.edlsb-tocItem {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n  text-align: left;\n  border-radius: 0.75rem;\n  padding: 0.625rem 0.75rem;\n  font-size: 13px;\n  border: none;\n  cursor: pointer;\n  background-color: transparent;\n  color: #475569;\n  transition-property: all;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.edlsb-tocItem:hover {\n  background-color: #ffffff;\n  color: #0f172a;\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n.edlsb-tocItemActive {\n  background-color: #0f172a;\n  color: #ffffff;\n  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n}\n.edlsb-tocItemActive:hover {\n  background-color: #0f172a;\n  color: #ffffff;\n}\n.edlsb-tocItemLevel3 {\n  padding-left: 2rem;\n}\n.edlsb-tocBadge {\n  flex-shrink: 0;\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 0.375rem;\n  font-size: 10px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: rgba(226, 232, 240, 0.8);\n  color: #94a3b8;\n}\n.edlsb-tocBadgeActive {\n  background-color: rgba(255, 255, 255, 0.15);\n  color: rgba(255, 255, 255, 0.8);\n}\n.edlsb-tocItemText {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.edlsb-shareSection {\n  margin-top: 3.5rem;\n  border-top: 1px solid #e2e8f0;\n  padding-top: 1.5rem;\n}\n.edlsb-shareInner {\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n@media (min-width: 640px) {\n  .edlsb-shareInner {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n}\n.edlsb-shareTitle {\n  font-size: 1rem;\n  line-height: 1.5rem;\n  font-weight: 600;\n  color: #0f172a;\n}\n.edlsb-shareSubtitle {\n  font-size: 0.875rem;\n  line-height: 1.25rem;\n  color: #64748b;\n}\n.edlsb-shareButtons {\n  display: flex;\n  align-items: center;\n  gap: 0.625rem;\n}\n.edlsb-shareBtn {\n  height: 2.5rem;\n  padding-left: 1rem;\n  padding-right: 1rem;\n  border-radius: 9999px;\n  border: 1px solid #e2e8f0;\n  background-color: #ffffff;\n  color: #334155;\n  font-size: 0.875rem;\n  font-weight: 600;\n  cursor: pointer;\n  transition-property:\n    color,\n    background-color,\n    border-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.edlsb-shareBtn:hover {\n  border-color: #cbd5e1;\n  color: #0f172a;\n}\n.edlsb-shareBtnInner {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n.edlsb-copyBtn {\n  height: 2.5rem;\n  width: 2.5rem;\n  border-radius: 9999px;\n  border: 1px solid #e2e8f0;\n  background-color: #ffffff;\n  color: #475569;\n  cursor: pointer;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  transition-property:\n    color,\n    background-color,\n    border-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 150ms;\n}\n.edlsb-copyBtn:hover {\n  border-color: #cbd5e1;\n  color: #0f172a;\n}\n.edlsb-bodyContainer .blog-content {\n  color: #1e293b;\n  line-height: 1.8;\n  font-size: 1.05rem;\n  overflow-wrap: anywhere;\n}\n.edlsb-bodyContainer .blog-content > * + * {\n  margin-top: 1rem;\n}\n.edlsb-bodyContainer .blog-content pre {\n  margin: 1.25rem 0;\n  padding: 0.9rem 1rem;\n  border-radius: 0.75rem;\n  background: #0b1220;\n  color: #e2e8f0;\n  overflow-x: auto;\n  border: 1px solid #1f2937;\n  -webkit-overflow-scrolling: touch;\n}\n.edlsb-bodyContainer .blog-content pre code {\n  background: transparent;\n  padding: 0;\n  border-radius: 0;\n  color: inherit;\n  font-size: 0.875rem;\n  line-height: 1.6;\n}\n.edlsb-bodyContainer .blog-content code {\n  font-family:\n    ui-monospace,\n    SFMono-Regular,\n    Menlo,\n    Monaco,\n    Consolas,\n    "Liberation Mono",\n    "Courier New",\n    monospace;\n  background: #e2e8f0;\n  color: #0f172a;\n  padding: 0.15rem 0.4rem;\n  border-radius: 0.35rem;\n  font-size: 0.875em;\n}\n.edlsb-bodyContainer .blog-content img {\n  display: block;\n  max-width: 100%;\n  width: auto;\n  height: auto;\n  margin: 1.25rem auto;\n  border-radius: 0.75rem;\n}\n.edlsb-bodyContainer .blog-content a {\n  color: #2563eb;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n');
+
+// src/tiptap-renderer.ts
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
+}
+function applyMark(html, mark) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  switch (mark.type) {
+    case "bold":
+      return `<strong>${html}</strong>`;
+    case "italic":
+      return `<em>${html}</em>`;
+    case "strike":
+      return `<s>${html}</s>`;
+    case "underline":
+      return `<u>${html}</u>`;
+    case "code":
+      return `<code>${html}</code>`;
+    case "link": {
+      const href = escapeHtml((_b = (_a = mark.attrs) == null ? void 0 : _a.href) != null ? _b : "");
+      const target = escapeHtml((_d = (_c = mark.attrs) == null ? void 0 : _c.target) != null ? _d : "_blank");
+      return `<a href="${href}" target="${target}" rel="noopener noreferrer">${html}</a>`;
+    }
+    case "textStyle": {
+      const color = (_e = mark.attrs) == null ? void 0 : _e.color;
+      const fontSize = (_f = mark.attrs) == null ? void 0 : _f.fontSize;
+      const style = [
+        color ? `color:${color}` : "",
+        fontSize ? `font-size:${fontSize}` : ""
+      ].filter(Boolean).join(";");
+      return style ? `<span style="${style}">${html}</span>` : html;
+    }
+    case "highlight": {
+      const color = (_g = mark.attrs) == null ? void 0 : _g.color;
+      const style = color ? ` style="background-color:${color}"` : "";
+      return `<mark${style}>${html}</mark>`;
+    }
+    default:
+      return html;
+  }
+}
+function renderChildren(node) {
+  if (!Array.isArray(node == null ? void 0 : node.content)) return "";
+  return node.content.map(renderNode).join("");
+}
+function renderNode(node) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+  if (!node) return "";
+  switch (node.type) {
+    // ── Document root ────────────────────────────────────────────────────
+    case "doc":
+      return renderChildren(node);
+    // ── Block nodes ──────────────────────────────────────────────────────
+    case "paragraph": {
+      const inner = renderChildren(node);
+      if (!inner) return `<p><br /></p>`;
+      return `<p>${inner}</p>`;
+    }
+    case "heading": {
+      const level = (_b = (_a = node.attrs) == null ? void 0 : _a.level) != null ? _b : 1;
+      return `<h${level}>${renderChildren(node)}</h${level}>`;
+    }
+    case "blockquote":
+      return `<blockquote>${renderChildren(node)}</blockquote>`;
+    case "bulletList":
+      return `<ul>${renderChildren(node)}</ul>`;
+    case "orderedList":
+      return `<ol>${renderChildren(node)}</ol>`;
+    case "listItem":
+      return `<li>${renderChildren(node)}</li>`;
+    case "taskList":
+      return `<ul class="task-list">${renderChildren(node)}</ul>`;
+    case "taskItem": {
+      const checked = ((_c = node.attrs) == null ? void 0 : _c.checked) ? " checked" : "";
+      return `<li class="task-item"><input type="checkbox"${checked} disabled /><div>${renderChildren(node)}</div></li>`;
+    }
+    case "codeBlock": {
+      const lang = ((_d = node.attrs) == null ? void 0 : _d.language) ? ` data-language="${escapeHtml(node.attrs.language)}"` : "";
+      return `<pre${lang}><code>${renderChildren(node)}</code></pre>`;
+    }
+    case "horizontalRule":
+      return `<hr />`;
+    case "hardBreak":
+      return `<br />`;
+    // ── Media / embeds ───────────────────────────────────────────────────
+    case "image": {
+      const src = escapeHtml((_f = (_e = node.attrs) == null ? void 0 : _e.src) != null ? _f : "");
+      const alt = escapeHtml((_h = (_g = node.attrs) == null ? void 0 : _g.alt) != null ? _h : "");
+      const title = ((_i = node.attrs) == null ? void 0 : _i.title) ? ` title="${escapeHtml(node.attrs.title)}"` : "";
+      return `<img src="${src}" alt="${alt}"${title} loading="lazy" />`;
+    }
+    case "resizableImage": {
+      const src = escapeHtml((_k = (_j = node.attrs) == null ? void 0 : _j.src) != null ? _k : "");
+      const alt = escapeHtml((_m = (_l = node.attrs) == null ? void 0 : _l.alt) != null ? _m : "");
+      const width = ((_n = node.attrs) == null ? void 0 : _n.width) ? ` width="${escapeHtml(String(node.attrs.width))}"` : "";
+      return `<img src="${src}" alt="${alt}"${width} loading="lazy" />`;
+    }
+    case "youtube": {
+      const src = escapeHtml((_p = (_o = node.attrs) == null ? void 0 : _o.src) != null ? _p : "");
+      const width = (_r = (_q = node.attrs) == null ? void 0 : _q.width) != null ? _r : 640;
+      const height = (_t = (_s = node.attrs) == null ? void 0 : _s.height) != null ? _t : 480;
+      if (!src) return "";
+      return `<div class="rounded-lg my-4 overflow-hidden" style="position:relative;padding-bottom:56.25%;height:0;"><iframe src="${src}" width="${width}" height="${height}" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>`;
+    }
+    case "twitter":
+    case "tweet": {
+      const url = escapeHtml((_x = (_w = (_u = node.attrs) == null ? void 0 : _u.src) != null ? _w : (_v = node.attrs) == null ? void 0 : _v.url) != null ? _x : "");
+      if (!url) return "";
+      return `<div class="max-w-xl"><a href="${url}" target="_blank" rel="noopener noreferrer" class="text-themecolor font-semibold underline underline-offset-[3px] hover:text-themecolorhover transition-colors">${url}</a></div>`;
+    }
+    // ── Inline nodes ─────────────────────────────────────────────────────
+    case "text": {
+      let out = escapeHtml((_y = node.text) != null ? _y : "");
+      if (Array.isArray(node.marks)) {
+        for (const mark of node.marks) {
+          out = applyMark(out, mark);
+        }
+      }
+      return out;
+    }
+    default:
+      return renderChildren(node);
+  }
+}
+function renderTiptapToHTML(jsonContent) {
+  try {
+    if (!jsonContent) return "";
+    let contentObj;
+    if (typeof jsonContent === "string") {
+      try {
+        contentObj = JSON.parse(jsonContent);
+      } catch (e) {
+        return jsonContent;
+      }
+    } else {
+      contentObj = jsonContent;
+    }
+    if (!contentObj || typeof contentObj !== "object") {
+      return String(jsonContent);
+    }
+    return renderNode(contentObj);
+  } catch (error) {
+    console.error("Failed to parse Tiptap JSON to HTML:", error);
+    return "<p>Error loading content.</p>";
+  }
+}
+
+// src/BlogRenderer.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var styles = {
+  wrapper: "edlsb-wrapper",
+  progressBar: "edlsb-progressBar",
+  main: "edlsb-main",
+  headerSection: "edlsb-headerSection",
+  headerContainer: "edlsb-headerContainer",
+  headerContent: "edlsb-headerContent",
+  metaRow: "edlsb-metaRow",
+  articleBadge: "edlsb-articleBadge",
+  dot: "edlsb-dot",
+  metaItem: "edlsb-metaItem",
+  icon: "edlsb-icon",
+  postTitle: "edlsb-postTitle",
+  bodyContainer: "edlsb-bodyContainer",
+  thumbnailWrapper: "edlsb-thumbnailWrapper",
+  thumbnail: "edlsb-thumbnail",
+  tocWrapper: "edlsb-tocWrapper",
+  tocToggle: "edlsb-tocToggle",
+  tocToggleInner: "edlsb-tocToggleInner",
+  tocIconWrap: "edlsb-tocIconWrap",
+  tocLabel: "edlsb-tocLabel",
+  tocCount: "edlsb-tocCount",
+  chevronIcon: "edlsb-chevronIcon",
+  chevronIconOpen: "edlsb-chevronIconOpen",
+  tocPanelInner: "edlsb-tocPanelInner",
+  tocGrid: "edlsb-tocGrid",
+  tocItem: "edlsb-tocItem",
+  tocItemActive: "edlsb-tocItemActive",
+  tocItemLevel3: "edlsb-tocItemLevel3",
+  tocBadge: "edlsb-tocBadge",
+  tocBadgeActive: "edlsb-tocBadgeActive",
+  tocItemText: "edlsb-tocItemText",
+  shareSection: "edlsb-shareSection",
+  shareInner: "edlsb-shareInner",
+  shareTitle: "edlsb-shareTitle",
+  shareSubtitle: "edlsb-shareSubtitle",
+  shareButtons: "edlsb-shareButtons",
+  shareBtn: "edlsb-shareBtn",
+  shareBtnInner: "edlsb-shareBtnInner",
+  copyBtn: "edlsb-copyBtn"
+};
+var baseIconProps = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  style: { flexShrink: 0 },
+  "aria-hidden": true
+};
+var Calendar = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, baseIconProps), {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), props), {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2", strokeWidth: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", y1: "2", x2: "16", y2: "6", strokeWidth: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "6", strokeWidth: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10", strokeWidth: "2" })
+    ]
+  })
+);
+var Clock = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, baseIconProps), {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), props), {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9", strokeWidth: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "7", x2: "12", y2: "12", strokeWidth: "2" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "12", x2: "15", y2: "14", strokeWidth: "2" })
+    ]
+  })
+);
+var ChevronDown = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  "svg",
+  __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, baseIconProps), {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), props), {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "6 9 12 15 18 9", strokeWidth: "2" })
+  })
+);
+var Twitter = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, baseIconProps), { viewBox: "0 0 24 24", fill: "currentColor" }), props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18.244 2h3.308l-7.227 8.26L22.8 22h-6.637l-5.197-6.787L4.99 22H1.68l7.73-8.835L1.2 2h6.806l4.697 6.21L18.244 2Zm-1.16 18h1.833L7.01 3.896H5.044L17.083 20Z" }) }));
+var Linkedin = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, baseIconProps), { viewBox: "0 0 24 24", fill: "currentColor" }), props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6.94 8.5a1.94 1.94 0 1 1 0-3.88 1.94 1.94 0 0 1 0 3.88ZM5.26 9.94h3.36V20H5.26V9.94Zm5.28 0h3.22v1.38h.05c.45-.85 1.55-1.74 3.2-1.74 3.42 0 4.05 2.1 4.05 4.84V20h-3.36v-4.95c0-1.18-.02-2.7-1.78-2.7-1.78 0-2.05 1.3-2.05 2.62V20h-3.33V9.94Z" }) }));
+var Facebook = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, baseIconProps), { viewBox: "0 0 24 24", fill: "currentColor" }), props), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13.5 22v-8h2.7l.5-3h-3.2V9.2c0-.9.3-1.5 1.6-1.5h1.7V5c-.3 0-1.3-.1-2.4-.1-2.4 0-4 1.4-4 3.9V11H8v3h2.4v8h3.1Z" }) }));
+var LinkIcon = (props) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, baseIconProps), {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), props), {
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: "M10 14a5 5 0 0 1 0-7l1.5-1.5a5 5 0 0 1 7 7L17 14",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "path",
+        {
+          d: "M14 10a5 5 0 0 1 0 7l-1.5 1.5a5 5 0 1 1-7-7L7 10",
+          strokeWidth: "2"
+        }
+      )
+    ]
+  })
+);
+var stripProseWrappers = (html) => {
+  let result = html;
+  const proseDiv = /^\s*<div[^>]*\bprose\b[^>]*>([\s\S]*)<\/div>\s*$/;
+  let prev = "";
+  while (prev !== result) {
+    prev = result;
+    const match = result.match(proseDiv);
+    if (match) result = match[1].trim();
+  }
+  return result;
+};
+function BlogRenderer({ post }) {
+  const rawHtml = post.content_json ? renderTiptapToHTML(post.content_json) : "<p>Could not render content</p>";
+  const htmlContent = stripProseWrappers(rawHtml);
+  const articleRef = (0, import_react.useRef)(null);
+  const [renderedHtml, setRenderedHtml] = (0, import_react.useState)(htmlContent);
+  const [tocItems, setTocItems] = (0, import_react.useState)([]);
+  const [activeHeadingId, setActiveHeadingId] = (0, import_react.useState)("");
+  const [tocOpen, setTocOpen] = (0, import_react.useState)(false);
+  const [scrollProgress, setScrollProgress] = (0, import_react.useState)(0);
+  const [mounted, setMounted] = (0, import_react.useState)(false);
+  const getFullThumbnail = (path) => {
+    if (!path) return void 0;
+    if (path.startsWith("http")) return path;
+    return `https://cdn.dl.surf/${path}`;
+  };
+  const thumbUrl = getFullThumbnail(post.thumbnail_path);
+  const publishDate = post.created_at || (/* @__PURE__ */ new Date()).toISOString();
+  const formattedDate = new Date(publishDate).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  });
+  const shareUrl = typeof window !== "undefined" ? window.location.href : "";
+  const shareTitle = post.title;
+  const shareOnTwitter = () => window.open(
+    `https://twitter.com/intent/tweet?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(shareTitle)}`,
+    "_blank"
+  );
+  const shareOnFacebook = () => window.open(
+    `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`,
+    "_blank"
+  );
+  const shareOnLinkedIn = () => window.open(
+    `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`,
+    "_blank"
+  );
+  const copyLink = () => {
+    navigator.clipboard.writeText(shareUrl);
+    alert("Link copied to clipboard!");
+  };
+  (0, import_react.useEffect)(() => {
+    setMounted(true);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const handleScroll = () => {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop;
+      const docHeight = document.documentElement.scrollHeight - window.innerHeight;
+      setScrollProgress(docHeight > 0 ? scrollTop / docHeight : 0);
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const wrapper = document.createElement("div");
+    wrapper.innerHTML = htmlContent || "";
+    const headings = Array.from(wrapper.querySelectorAll("h2, h3"));
+    const nextTocItems = [];
+    const usedIds = /* @__PURE__ */ new Set();
+    headings.forEach((heading, index) => {
+      var _a;
+      const text = ((_a = heading.textContent) == null ? void 0 : _a.trim()) || `Section ${index + 1}`;
+      const level = heading.tagName.toLowerCase() === "h2" ? 2 : 3;
+      const base = text.toLowerCase().replace(/[^a-z0-9\s-]/g, "").trim().replace(/\s+/g, "-") || `section-${index + 1}`;
+      let id = base;
+      let suffix = 2;
+      while (usedIds.has(id)) {
+        id = `${base}-${suffix}`;
+        suffix += 1;
+      }
+      usedIds.add(id);
+      heading.setAttribute("id", id);
+      nextTocItems.push({ id, text, level });
+    });
+    setRenderedHtml(wrapper.innerHTML);
+    setTocItems(nextTocItems);
+  }, [htmlContent]);
+  (0, import_react.useEffect)(() => {
+    if (!tocItems.length) return;
+    const headingElements = tocItems.map((item) => document.getElementById(item.id)).filter((el) => Boolean(el));
+    if (!headingElements.length) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        var _a, _b;
+        const visible = entries.filter((entry) => entry.isIntersecting).sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if ((_b = (_a = visible[0]) == null ? void 0 : _a.target) == null ? void 0 : _b.id) {
+          setActiveHeadingId(visible[0].target.id);
+        }
+      },
+      { rootMargin: "-90px 0px -65% 0px", threshold: 0.1 }
+    );
+    headingElements.forEach((el) => observer.observe(el));
+    return () => observer.disconnect();
+  }, [tocItems, renderedHtml]);
+  const scrollToHeading = (id) => {
+    setTocOpen(false);
+    setTimeout(() => {
+      const el = document.getElementById(id);
+      if (!el) return;
+      const offset = 110;
+      const top = el.getBoundingClientRect().top + window.scrollY - offset;
+      window.scrollTo({ top, behavior: "smooth" });
+    }, 280);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.wrapper, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: styles.progressBar,
+        style: { transform: `scaleX(${scrollProgress})` }
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("main", { className: styles.main, ref: articleRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.headerSection, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.headerContainer, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          className: styles.headerContent,
+          style: {
+            opacity: mounted ? 1 : 0,
+            transform: mounted ? "none" : "translateY(20px)",
+            transition: "opacity 0.4s ease, transform 0.4s ease"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.metaRow, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.articleBadge, children: "Article" }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.dot }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: styles.metaItem, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Clock, { className: styles.icon }),
+                " 5 Min Read"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.dot }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: styles.metaItem, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Calendar, { className: styles.icon }),
+                " ",
+                formattedDate
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h1", { className: styles.postTitle, children: post.title })
+          ]
+        }
+      ) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.bodyContainer, children: [
+        thumbUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: styles.thumbnailWrapper,
+            style: {
+              opacity: mounted ? 1 : 0,
+              transform: mounted ? "none" : "scale(0.95)",
+              transition: "opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s"
+            },
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "img",
+              {
+                src: thumbUrl,
+                alt: post.title,
+                className: styles.thumbnail
+              }
+            )
+          }
+        ),
+        tocItems.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.tocWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "button",
+            {
+              onClick: () => setTocOpen(!tocOpen),
+              className: styles.tocToggle,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.tocToggleInner, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.tocIconWrap, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "svg",
+                    {
+                      width: "14",
+                      height: "14",
+                      viewBox: "0 0 16 16",
+                      fill: "none",
+                      xmlns: "http://www.w3.org/2000/svg",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                        "path",
+                        {
+                          d: "M2 4h12M2 8h8M2 12h10",
+                          stroke: "currentColor",
+                          strokeWidth: "1.5",
+                          strokeLinecap: "round"
+                        }
+                      )
+                    }
+                  ) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: styles.tocLabel, children: [
+                    "Table of contents",
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: styles.tocCount, children: [
+                      "\xB7 ",
+                      tocItems.length,
+                      " sections"
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  ChevronDown,
+                  {
+                    className: `${styles.chevronIcon}${tocOpen ? ` ${styles.chevronIconOpen}` : ""}`
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              style: {
+                overflow: "hidden",
+                maxHeight: tocOpen ? "2000px" : "0px",
+                opacity: tocOpen ? 1 : 0,
+                transition: "max-height 0.25s ease-in-out, opacity 0.25s ease-in-out"
+              },
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.tocPanelInner, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.tocGrid, children: tocItems.map((item, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "button",
+                {
+                  onClick: () => scrollToHeading(item.id),
+                  className: [
+                    styles.tocItem,
+                    activeHeadingId === item.id ? styles.tocItemActive : "",
+                    item.level === 3 ? styles.tocItemLevel3 : ""
+                  ].filter(Boolean).join(" "),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                      "span",
+                      {
+                        className: [
+                          styles.tocBadge,
+                          activeHeadingId === item.id ? styles.tocBadgeActive : ""
+                        ].filter(Boolean).join(" "),
+                        children: idx + 1
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.tocItemText, children: item.text })
+                  ]
+                },
+                item.id
+              )) }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: "blog-content",
+            dangerouslySetInnerHTML: { __html: renderedHtml }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.shareSection, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.shareInner, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: styles.shareTitle, children: "Share this article" }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: styles.shareSubtitle, children: "If it helped, pass it on." })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.shareButtons, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: shareOnTwitter, className: styles.shareBtn, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: styles.shareBtnInner, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Twitter, { className: styles.icon }),
+              " X"
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: shareOnLinkedIn, className: styles.shareBtn, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: styles.shareBtnInner, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Linkedin, { className: styles.icon }),
+              " LinkedIn"
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { onClick: shareOnFacebook, className: styles.shareBtn, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: styles.shareBtnInner, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Facebook, { className: styles.icon }),
+              " Facebook"
+            ] }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                onClick: copyLink,
+                className: styles.copyBtn,
+                title: "Copy link",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkIcon, { className: styles.icon })
+              }
+            )
+          ] })
+        ] }) })
+      ] })
+    ] })
+  ] });
+}
+
+// src/index.ts
+function renderText() {
+  return "Hello World";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  BlogRenderer,
+  renderText
+});
+//# sourceMappingURL=index.js.map