notion-to-jsx 1.1.1 → 1.2.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/components/Renderer/index.tsx
-import React6, { useState as useState4, useMemo as useMemo2, useCallback } from "react";
+import React7, { useState as useState5, useMemo as useMemo2, useCallback } from "react";
 
 // src/components/Renderer/styles.css.ts
 var container = "styles_container__epva5u0";
@@ -38,19 +38,29 @@ var richText = _7a4682({ defaultClassName: "styles_richText__fdf3tw0", variantCl
 
 // src/components/Renderer/components/RichText/RichTexts.tsx
 import { Fragment, jsx as jsx2 } from "react/jsx-runtime";
+var renderLink = (href, content3) => /* @__PURE__ */ jsx2("a", { href, target: "_blank", rel: "noopener noreferrer", className: link, children: content3 });
 var RichTexts = ({ richTexts }) => {
   return /* @__PURE__ */ jsx2(Fragment, { children: richTexts.map((text, index) => {
-    const { bold, italic, strikethrough, underline, code, color } = text.annotations;
-    const content3 = text.text.link ? /* @__PURE__ */ jsx2(
-      "a",
-      {
-        href: text.text.link,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className: link,
-        children: text.text.content
+    const { bold, italic, strikethrough, underline, code } = text.annotations;
+    let content3;
+    switch (text.type) {
+      case "text": {
+        if (text.text) {
+          const { text: textData } = text;
+          content3 = textData.link ? renderLink(textData.link, textData.content) : textData.content;
+        } else {
+          content3 = text.plain_text;
+        }
+        break;
+      }
+      case "mention": {
+        content3 = text.href ? renderLink(text.href, text.plain_text) : text.plain_text;
+        break;
       }
-    ) : text.text.content;
+      default: {
+        content3 = text.plain_text;
+      }
+    }
     return /* @__PURE__ */ jsx2(
       "span",
       {
@@ -247,8 +257,8 @@ var fetchOpenGraphData = async (url) => {
     if (!response.ok) {
       throw new Error("Failed to fetch metadata");
     }
-    const { status, data: metaData } = data;
-    if (status !== "success") {
+    const { status, data: metaData, statusCode } = data;
+    if (status !== "success" || statusCode !== 200) {
       throw new Error("API returned error status");
     }
     const parsedUrl = new URL(url);
@@ -321,13 +331,15 @@ var Bookmark_default = Bookmark;
 import { useState as useState3, useEffect as useEffect3 } from "react";
 
 // src/components/Renderer/components/LinkPreview/styles.css.ts
-var card2 = "styles_card__o1p3m11";
 var content2 = "styles_content__o1p3m12";
+var description2 = "styles_description__o1p3m16";
+var githubContent = "styles_githubContent__o1p3m18";
+var githubPreview = "styles_githubPreview__o1p3m17";
 var icon = "styles_icon__o1p3m14";
 var iconContainer = "styles_iconContainer__o1p3m13";
 var link3 = "styles_link__o1p3m10";
+var preview = "styles_preview__o1p3m11";
 var title2 = "styles_title__o1p3m15";
-var updatedText = "styles_updatedText__o1p3m16";
 
 // src/components/Renderer/components/LinkPreview/LinkPreview.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -345,6 +357,48 @@ var fetchGitHubRepoData = async (repoPath) => {
     return null;
   }
 };
+var extractFigmaData = (url) => {
+  try {
+    const parsedUrl = new URL(url);
+    if (parsedUrl.hostname.includes("figma.com")) {
+      const pathSegments = parsedUrl.pathname.split("/");
+      const fileSegment = pathSegments.find(
+        (segment) => segment.includes("file")
+      );
+      if (!fileSegment) return null;
+      const fileIdMatch = fileSegment.match(/file\/([^/]+)/);
+      const fileId = fileIdMatch ? fileIdMatch[1] : "";
+      let fileName = "";
+      let mode = "";
+      if (pathSegments.length > 3) {
+        const encodedName = pathSegments[3];
+        if (encodedName) {
+          fileName = decodeURIComponent(encodedName).replace(/-/g, " ");
+        }
+      }
+      if (!fileName && parsedUrl.pathname.includes("-")) {
+        const nameMatch = parsedUrl.pathname.match(/\/([^/]+)(?:\?|$)/);
+        if (nameMatch && nameMatch[1]) {
+          fileName = decodeURIComponent(nameMatch[1].replace(/-/g, " "));
+        }
+      }
+      if (parsedUrl.search) {
+        const searchParams = new URLSearchParams(parsedUrl.search);
+        mode = searchParams.get("mode") || "";
+      }
+      fileName = fileName || "Figma Design";
+      return {
+        name: fileName,
+        url,
+        thumbnailUrl: "https://static.figma.com/app/icon/1/favicon.svg"
+      };
+    }
+    return null;
+  } catch (error) {
+    console.error("Error parsing Figma URL:", error);
+    return null;
+  }
+};
 var extractRepoPathFromUrl = (url) => {
   try {
     const parsedUrl = new URL(url);
@@ -361,6 +415,19 @@ var extractRepoPathFromUrl = (url) => {
     return null;
   }
 };
+var getLinkType = (url) => {
+  try {
+    const parsedUrl = new URL(url);
+    if (parsedUrl.hostname === "github.com") {
+      return "github";
+    } else if (parsedUrl.hostname.includes("figma.com")) {
+      return "figma";
+    }
+    return "unknown";
+  } catch {
+    return "unknown";
+  }
+};
 var formatUpdatedTime = (dateString) => {
   const date = new Date(dateString);
   const now = /* @__PURE__ */ new Date();
@@ -396,35 +463,77 @@ var formatUpdatedTime = (dateString) => {
 };
 var LinkPreview = ({ url }) => {
   const [repoData, setRepoData] = useState3(null);
+  const [figmaData, setFigmaData] = useState3(null);
   const [loading, setLoading] = useState3(true);
+  const [linkType, setLinkType] = useState3(
+    "unknown"
+  );
   useEffect3(() => {
-    const loadRepoData = async () => {
+    const loadLinkData = async () => {
       setLoading(true);
-      const repoPath = extractRepoPathFromUrl(url);
-      if (repoPath) {
-        const data = await fetchGitHubRepoData(repoPath);
-        setRepoData(data);
+      const type = getLinkType(url);
+      setLinkType(type);
+      if (type === "github") {
+        const repoPath = extractRepoPathFromUrl(url);
+        if (repoPath) {
+          const data = await fetchGitHubRepoData(repoPath);
+          setRepoData(data);
+        }
+      } else if (type === "figma") {
+        const data = extractFigmaData(url);
+        setFigmaData(data);
       }
       setLoading(false);
     };
-    loadRepoData();
+    loadLinkData();
   }, [url]);
   const repoName = repoData?.name || extractRepoPathFromUrl(url)?.split("/")[1] || "Repository";
   const updatedTimeText = repoData?.updated_at ? formatUpdatedTime(repoData.updated_at) : "";
-  return /* @__PURE__ */ jsx5("a", { href: url, target: "_blank", rel: "noopener noreferrer", className: link3, children: /* @__PURE__ */ jsxs3("div", { className: card2, children: [
-    /* @__PURE__ */ jsx5("div", { className: iconContainer, children: /* @__PURE__ */ jsx5(
-      "img",
-      {
-        src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
-        alt: "Repository icon",
-        className: icon
-      }
-    ) }),
-    /* @__PURE__ */ jsxs3("div", { className: content2, children: [
-      /* @__PURE__ */ jsx5("div", { className: title2, children: repoName }),
-      /* @__PURE__ */ jsx5("div", { className: updatedText, children: loading ? "Loading..." : `NotionX \u2022 ${updatedTimeText}` })
-    ] })
-  ] }) });
+  return /* @__PURE__ */ jsx5(
+    "a",
+    {
+      href: url,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: link3,
+      children: linkType === "figma" && figmaData ? (
+        // Figma 프리뷰 렌더링
+        /* @__PURE__ */ jsxs3("div", { className: preview, children: [
+          /* @__PURE__ */ jsx5("div", { className: iconContainer, children: /* @__PURE__ */ jsx5(
+            "img",
+            {
+              src: figmaData.thumbnailUrl || "https://static.figma.com/app/icon/1/favicon.svg",
+              alt: "Figma icon",
+              className: icon
+            }
+          ) }),
+          /* @__PURE__ */ jsxs3("div", { className: content2, children: [
+            /* @__PURE__ */ jsx5("div", { className: title2, children: figmaData.name }),
+            /* @__PURE__ */ jsx5("div", { className: description2, children: "www.figma.com" })
+          ] })
+        ] })
+      ) : linkType === "github" ? (
+        // GitHub 프리뷰 렌더링
+        /* @__PURE__ */ jsxs3("div", { className: `${preview} ${githubPreview}`, children: [
+          /* @__PURE__ */ jsx5("div", { className: iconContainer, children: /* @__PURE__ */ jsx5(
+            "img",
+            {
+              src: repoData?.owner?.avatar_url || "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png",
+              alt: "Repository icon",
+              className: icon
+            }
+          ) }),
+          /* @__PURE__ */ jsxs3("div", { className: `${content2} ${githubContent}`, children: [
+            /* @__PURE__ */ jsx5("div", { className: title2, children: repoName }),
+            /* @__PURE__ */ jsx5("div", { className: description2, children: loading ? "Loading..." : `${repoName} \u2022 ${updatedTimeText}` })
+          ] })
+        ] })
+      ) : (
+        // 기본 링크 프리뷰 렌더링
+        /* @__PURE__ */ jsx5("div", { className: preview, children: /* @__PURE__ */ jsx5("div", { className: content2, children: /* @__PURE__ */ jsx5("div", { className: title2, children: url }) }) })
+      )
+    }
+  );
 };
 var LinkPreview_default = LinkPreview;
 
@@ -455,8 +564,7 @@ var MemoizedLinkPreview = React4.memo(
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var RecursiveListItem = ({ block, index }) => {
   const blockProps = {
-    tabIndex: 0,
-    "data-block-id": block.id
+    tabIndex: 0
   };
   const blockType = block.type;
   const richTexts = block[blockType]?.rich_text;
@@ -581,34 +689,195 @@ var Heading3 = ({
   return /* @__PURE__ */ jsx8("h3", { className: heading3, ...props, children });
 };
 
-// src/components/Renderer/components/Block/BlockRenderer.tsx
+// src/components/Renderer/components/Column/styles.css.ts
+var columnContainer = "styles_columnContainer__wle6we0";
+var columnListContainer = "styles_columnListContainer__wle6we1";
+
+// src/components/Renderer/components/Column/Column.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
+var Column = ({ block, onFocus }) => {
+  if (!block || !block.children) return null;
+  return /* @__PURE__ */ jsx9("div", { className: columnContainer, children: block.children.map((childBlock, index) => /* @__PURE__ */ jsx9(
+    BlockRenderer_default,
+    {
+      block: childBlock,
+      onFocus,
+      index
+    },
+    childBlock.id
+  )) });
+};
+var Column_default = Column;
+
+// src/components/Renderer/components/Column/ColumnList.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+var ColumnList = ({ block, onFocus }) => {
+  if (!block || !block.children) return null;
+  return /* @__PURE__ */ jsx10("div", { className: columnListContainer, children: block.children.map((column) => /* @__PURE__ */ jsx10(Column_default, { block: column, onFocus }, column.id)) });
+};
+var ColumnList_default = ColumnList;
+
+// src/components/Renderer/components/Quote/styles.css.ts
+var container2 = "styles_container__mra9n0";
+
+// src/components/Renderer/components/Quote/Quote.tsx
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Quote = ({ richTexts, tabIndex }) => {
+  return /* @__PURE__ */ jsx11("blockquote", { className: container2, tabIndex, children: /* @__PURE__ */ jsx11(MemoizedRichText, { richTexts }) });
+};
+var Quote_default = Quote;
+
+// src/components/Renderer/components/Table/styles.css.ts
+var firstCell = "styles_firstCell__1rvbzfo4";
+var hasRowHeader = "styles_hasRowHeader__1rvbzfo6";
+var headerCell = "styles_headerCell__1rvbzfo2";
+var lastCell = "styles_lastCell__1rvbzfo5";
+var table = "styles_table__1rvbzfo1";
+var tableCell = "styles_tableCell__1rvbzfo3";
+var tableContainer = "styles_tableContainer__1rvbzfo0";
+
+// src/components/Renderer/components/Table/TableRow.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var TableRow = ({
+  rowBlock,
+  cellClassName = "",
+  rowHeaderIndex = -1
+}) => {
+  if (!rowBlock.table_row?.cells) {
+    return null;
+  }
+  const { cells } = rowBlock.table_row;
+  return /* @__PURE__ */ jsx12("tr", { children: cells.map((cell, index) => {
+    const isFirstCell = index === 0;
+    const isLastCell = index === cells.length - 1;
+    const isRowHeader = index === rowHeaderIndex;
+    let cellClasses = [tableCell, cellClassName];
+    if (isFirstCell) cellClasses.push(firstCell);
+    if (isLastCell) cellClasses.push(lastCell);
+    if (isRowHeader) cellClasses.push(hasRowHeader);
+    return /* @__PURE__ */ jsx12(
+      "td",
+      {
+        className: cellClasses.filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsx12(MemoizedRichText, { richTexts: cell })
+      },
+      `${rowBlock.id}-cell-${index}`
+    );
+  }) });
+};
+var TableRow_default = TableRow;
+
+// src/components/Renderer/components/Table/Table.tsx
+import { Fragment as Fragment3, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+var Table = ({ block, tabIndex = 0 }) => {
+  if (!block.table || !block.children) {
+    return null;
+  }
+  const { table_width, has_column_header, has_row_header } = block.table;
+  const rows = block.children?.filter(
+    (child) => child.type === "table_row"
+  ) || [];
+  return /* @__PURE__ */ jsx13("div", { className: tableContainer, children: /* @__PURE__ */ jsx13("table", { className: table, tabIndex, children: rows.length > 0 && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    has_column_header && rows[0] && /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsx13(TableRow_default, { rowBlock: rows[0], cellClassName: headerCell }) }),
+    /* @__PURE__ */ jsx13("tbody", { children: rows.filter(
+      (row) => row !== void 0 && row.type === "table_row"
+    ).map((row, rowIndex) => {
+      if (has_column_header && rowIndex === 0) {
+        return null;
+      }
+      const actualRowIndex = has_column_header ? rowIndex - 1 : rowIndex;
+      return /* @__PURE__ */ jsx13(
+        TableRow_default,
+        {
+          rowBlock: row,
+          rowHeaderIndex: has_row_header ? 0 : -1
+        },
+        row.id
+      );
+    }) })
+  ] }) }) });
+};
+var Table_default = Table;
+
+// src/components/Renderer/components/Table/index.ts
+var Table_default2 = Table_default;
+
+// src/components/Renderer/components/Toggle/Toggle.tsx
+import { useState as useState4 } from "react";
+
+// src/components/Renderer/components/Toggle/styles.css.ts
+var toggleContainer = "styles_toggleContainer__p7ue1z0";
+var toggleContent = "styles_toggleContent__p7ue1z4";
+var toggleHeader = "styles_toggleHeader__p7ue1z1";
+var toggleIcon = "styles_toggleIcon__p7ue1z2";
+var toggleIconOpen = "styles_toggleIconOpen__p7ue1z3";
+
+// src/components/Renderer/components/Toggle/Toggle.tsx
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+var Toggle = ({ block, tabIndex = 0, onFocus }) => {
+  const [isOpen, setIsOpen] = useState4(false);
+  if (!block.toggle || !block.children) {
+    return null;
+  }
+  const handleToggle = () => {
+    setIsOpen(!isOpen);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      handleToggle();
+    }
+  };
+  return /* @__PURE__ */ jsxs7("div", { className: toggleContainer, children: [
+    /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        className: toggleHeader,
+        onClick: handleToggle,
+        onKeyDown: handleKeyDown,
+        tabIndex,
+        onFocus,
+        role: "button",
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsx14("span", { className: `${toggleIcon} ${isOpen ? toggleIconOpen : ""}`, children: "\u25B6" }),
+          /* @__PURE__ */ jsx14(RichTexts_default, { richTexts: block.toggle.rich_text })
+        ]
+      }
+    ),
+    isOpen && block.children && /* @__PURE__ */ jsx14("div", { className: toggleContent, children: block.children.map((childBlock, index) => /* @__PURE__ */ jsx14(
+      BlockRenderer_default,
+      {
+        block: childBlock,
+        index
+      },
+      childBlock.id
+    )) })
+  ] });
+};
+var Toggle_default = Toggle;
+
+// src/components/Renderer/components/Block/BlockRenderer.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
 var BlockRenderer = ({ block, onFocus, index }) => {
   if (!block) return null;
   const blockProps = {
     tabIndex: 0,
-    onFocus,
-    "data-block-id": block.id
+    onFocus
   };
   switch (block.type) {
     case "link_preview":
-      return /* @__PURE__ */ jsx9(
-        MemoizedLinkPreview,
-        {
-          url: block.link_preview.url,
-          ...blockProps
-        }
-      );
+      return /* @__PURE__ */ jsx15(MemoizedLinkPreview, { url: block.link_preview.url, ...blockProps });
     case "paragraph":
-      return /* @__PURE__ */ jsx9(Paragraph, { ...blockProps, children: /* @__PURE__ */ jsx9(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
+      return /* @__PURE__ */ jsx15(Paragraph, { ...blockProps, children: /* @__PURE__ */ jsx15(MemoizedRichText, { richTexts: block.paragraph.rich_text }) });
     case "heading_1":
-      return /* @__PURE__ */ jsx9(Heading1, { ...blockProps, children: /* @__PURE__ */ jsx9(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
+      return /* @__PURE__ */ jsx15(Heading1, { ...blockProps, children: /* @__PURE__ */ jsx15(MemoizedRichText, { richTexts: block.heading_1.rich_text }) });
     case "heading_2":
-      return /* @__PURE__ */ jsx9(Heading2, { ...blockProps, children: /* @__PURE__ */ jsx9(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
+      return /* @__PURE__ */ jsx15(Heading2, { ...blockProps, children: /* @__PURE__ */ jsx15(MemoizedRichText, { richTexts: block.heading_2.rich_text }) });
     case "heading_3":
-      return /* @__PURE__ */ jsx9(Heading3, { ...blockProps, children: /* @__PURE__ */ jsx9(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
+      return /* @__PURE__ */ jsx15(Heading3, { ...blockProps, children: /* @__PURE__ */ jsx15(MemoizedRichText, { richTexts: block.heading_3.rich_text }) });
     case "code":
-      return /* @__PURE__ */ jsx9("div", { ...blockProps, children: /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx15("div", { ...blockProps, children: /* @__PURE__ */ jsx15(
         CodeBlock_default,
         {
           code: block.code.rich_text[0].text.content,
@@ -617,7 +886,7 @@ var BlockRenderer = ({ block, onFocus, index }) => {
         }
       ) });
     case "image":
-      return /* @__PURE__ */ jsx9("figure", { ...blockProps, children: /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx15("figure", { ...blockProps, children: /* @__PURE__ */ jsx15(
         MemoizedImage,
         {
           src: block.image.file?.url || block.image.external?.url,
@@ -627,7 +896,24 @@ var BlockRenderer = ({ block, onFocus, index }) => {
         }
       ) });
     case "bookmark":
-      return /* @__PURE__ */ jsx9(MemoizedBookmark, { url: block.bookmark.url });
+      return /* @__PURE__ */ jsx15(MemoizedBookmark, { url: block.bookmark.url });
+    case "column_list":
+      return /* @__PURE__ */ jsx15(ColumnList_default, { block, onFocus });
+    case "column":
+      return null;
+    case "quote":
+      return /* @__PURE__ */ jsx15(Quote_default, { richTexts: block.quote.rich_text, ...blockProps });
+    case "table":
+      return /* @__PURE__ */ jsx15(Table_default2, { block, tabIndex: blockProps.tabIndex });
+    case "toggle":
+      return /* @__PURE__ */ jsx15(
+        Toggle_default,
+        {
+          block,
+          tabIndex: blockProps.tabIndex,
+          onFocus
+        }
+      );
     default:
       return null;
   }
@@ -639,9 +925,9 @@ var darkTheme = "theme_darkTheme__sq3jkb15";
 var lightTheme = "theme_lightTheme__sq3jkb14";
 
 // src/components/Title/index.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Title = ({ title: title3 }) => {
-  return /* @__PURE__ */ jsx10(Heading1, { children: title3 });
+  return /* @__PURE__ */ jsx16(Heading1, { children: title3 });
 };
 var Title_default = Title;
 
@@ -649,18 +935,18 @@ var Title_default = Title;
 var cover = "styles_cover__p0cp8d0";
 
 // src/components/Cover/index.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var Cover = ({ src, alt }) => {
-  return /* @__PURE__ */ jsx11("img", { src, alt, className: cover });
+  return /* @__PURE__ */ jsx17("img", { src, alt, className: cover });
 };
 var Cover_default = Cover;
 
 // src/components/Renderer/index.tsx
-import { Fragment as Fragment3, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
-var Renderer = React6.memo(
+import { Fragment as Fragment4, jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var Renderer = React7.memo(
   ({ blocks, isDarkMode = false, title: title3, cover: cover2, onBlockFocus }) => {
     const theme = isDarkMode ? darkTheme : lightTheme;
-    const [focusedIndex, setFocusedIndex] = useState4(-1);
+    const [focusedIndex, setFocusedIndex] = useState5(-1);
     const handleBlockFocus = useCallback(
       (index) => {
         setFocusedIndex(index);
@@ -677,7 +963,7 @@ var Renderer = React6.memo(
           const listItemType = `${listType}_list_item`;
           if (block.type === listItemType && (i === 0 || blocks[i - 1]?.type !== listItemType)) {
             result.push(
-              /* @__PURE__ */ jsx12(
+              /* @__PURE__ */ jsx18(
                 ListBlocksRenderer_default,
                 {
                   blocks,
@@ -698,7 +984,7 @@ var Renderer = React6.memo(
           continue;
         } else {
           result.push(
-            /* @__PURE__ */ jsx12(
+            /* @__PURE__ */ jsx18(
               BlockRenderer_default,
               {
                 block,
@@ -712,15 +998,15 @@ var Renderer = React6.memo(
       }
       return result;
     }, [blocks, handleBlockFocus]);
-    return /* @__PURE__ */ jsxs6(Fragment3, { children: [
-      cover2 && /* @__PURE__ */ jsx12(Cover_default, { src: cover2, alt: title3 || "Notion page content" }),
-      /* @__PURE__ */ jsxs6(
+    return /* @__PURE__ */ jsxs8(Fragment4, { children: [
+      cover2 && /* @__PURE__ */ jsx18(Cover_default, { src: cover2, alt: title3 || "Notion page content" }),
+      /* @__PURE__ */ jsxs8(
         "article",
         {
           className: `${theme} ${container}`,
           "aria-label": title3 || "Notion page content",
           children: [
-            title3 && /* @__PURE__ */ jsx12(Title_default, { title: title3 }),
+            title3 && /* @__PURE__ */ jsx18(Title_default, { title: title3 }),
             renderedBlocks
           ]
         }