refactor: add optional id prop to various components for improved fle…

…xibility
mosugi · mosugi · Dec 23, 2024 · Dec 23, 2024 · Dec 23, 2024 · Dec 24, 2024
commit dba687be99cd836442f02e5d236ccc983e41589d
diff --git a/apps/notro-tail/src/components/NotionCustomBlocks.astro b/apps/notro-tail/src/components/NotionCustomBlocks.astro
@@ -19,6 +19,7 @@ interface RenderOptions {
   optimizeRemoteImage: boolean;
   useRawHTML: boolean;
   useCalloutContainer: boolean;
+  useNotionId: boolean;
 }
 
 const {
@@ -28,6 +29,7 @@ const {
     optimizeRemoteImage: true,
     useRawHTML: false,
     useCalloutContainer: false,
+    useNotionId: false,
   },
 } = Astro.props;
 

diff --git a/apps/notro-tail/src/pages/[...slug].astro b/apps/notro-tail/src/pages/[...slug].astro
@@ -39,6 +39,7 @@ const options = {
   optimizeRemoteImage: true,
   useRawHTML: true,
   useCalloutContainer: true,
+  useNotionId: false,
 };
 ---
 

diff --git a/apps/notro-tail/src/pages/blog/[slug].astro b/apps/notro-tail/src/pages/blog/[slug].astro
@@ -25,11 +25,12 @@ const options = {
   optimizeRemoteImage: true,
   useRawHTML: true,
   useCalloutContainer: true,
+  useNotionId: false,
 };
 ---
 
-<Layout title={entry.id}>
-  <main class="nt-page" id={entry.id}>
+<Layout title={entry.data.properties.Name.title[0]?.plain_text}>
+  <main class="nt-page" id={options.useNotionId ? entry.id : undefined}>
     <NotionCustomBlocks
       blocks={entry.data.blocks as BlockObjectResponseWithChildrenType[]}
       options={options}

diff --git a/packages/notro/src/components/Bookmark.astro b/packages/notro/src/components/Bookmark.astro
@@ -3,16 +3,13 @@ import type { BookmarkBlockObjectResponseType } from "../loader/schema.ts";
 import RichText from "./RichText.astro";
 interface Props {
   block: BookmarkBlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { block, id } = Astro.props;
 ---
 
-<a
-  id={block.id}
-  class=`nt-selectable nt-bookmark-block`
-  href={block.bookmark.url}
->
+<a {id} class=`nt-selectable nt-bookmark-block` href={block.bookmark.url}>
   {
     block.bookmark.caption.length > 0 ? (
       <RichText richText={block.bookmark.caption} />

diff --git a/packages/notro/src/components/BulletedListItem.astro b/packages/notro/src/components/BulletedListItem.astro
@@ -4,13 +4,14 @@ import RichText from "./RichText.astro";
 
 interface Props {
   block: BulletedListItemBlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { block, id } = Astro.props;
 ---
 
 <li
-  id={block.id}
+  {id}
   class=`nt-selectable nt-bulleted_list-block nt-color-${block.bulleted_list_item.color}`
 >
   <RichText richText={block.bulleted_list_item.rich_text} />

diff --git a/packages/notro/src/components/Callout.astro b/packages/notro/src/components/Callout.astro
@@ -4,13 +4,14 @@ import RichText from "./RichText.astro";
 
 interface Props {
   block: CalloutBlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { block, id } = Astro.props;
 ---
 
 <div
-  id={block.id}
+  {id}
   class={`notion-selectable notion-callout-block notion-color-${block.callout.color}`}
 >
   <RichText richText={block.callout.rich_text} />

diff --git a/packages/notro/src/components/Code.astro b/packages/notro/src/components/Code.astro
@@ -2,11 +2,12 @@
 import type { CodeBlockObjectResponseType } from "../loader/schema.ts";
 interface Props {
   block: CodeBlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { block, id } = Astro.props;
 ---
 
-<code id={block.id} class="nt-selectable nt-code-block">
+<code {id} class="nt-selectable nt-code-block">
   {block.code.rich_text[0].plain_text}
 </code>
diff --git a/packages/notro/src/components/Column.astro b/packages/notro/src/components/Column.astro
@@ -2,11 +2,12 @@
 import type { ColumnBlockObjectResponseType } from "../loader/schema.ts";
 interface Props {
   block: ColumnBlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { id } = Astro.props;
 ---
 
-<div id={block.id} class=`nt-selectable nt-column-block`>
+<div {id} class=`nt-selectable nt-column-block`>
   <slot />
 </div>
diff --git a/packages/notro/src/components/ColumnList.astro b/packages/notro/src/components/ColumnList.astro
@@ -2,11 +2,12 @@
 import type { ColumnListBlockObjectResponseType } from "../loader/schema.ts";
 interface Props {
   block: ColumnListBlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { id } = Astro.props;
 ---
 
-<div id={block.id} class=`nt-selectable nt-column_list-block`>
+<div {id} class=`nt-selectable nt-column_list-block`>
   <slot />
 </div>
diff --git a/packages/notro/src/components/Divider.astro b/packages/notro/src/components/Divider.astro
@@ -2,9 +2,10 @@
 import type { DividerBlockObjectResponseType } from "../loader/schema.ts";
 interface Props {
   block: DividerBlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { id } = Astro.props;
 ---
 
-<hr id={block.id} class=`nt-selectable nt-divider-block` />
+<hr {id} class=`nt-selectable nt-divider-block` />
diff --git a/packages/notro/src/components/Heading1.astro b/packages/notro/src/components/Heading1.astro
@@ -5,13 +5,14 @@ import type { Heading1BlockObjectResponseType } from "../loader/schema.ts";
 
 interface Props {
   block: Heading1BlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { block, id } = Astro.props;
 ---
 
 <h2
-  id={block.id}
+  id={id}
   class=`nt-selectable nt-header-block ${getNotionColor(block.heading_1.color)}`
 >
   <RichText richText={block.heading_1.rich_text} />

diff --git a/packages/notro/src/components/Heading2.astro b/packages/notro/src/components/Heading2.astro
@@ -5,13 +5,14 @@ import type { Heading2BlockObjectResponseType } from "../loader/schema.ts";
 
 interface Props {
   block: Heading2BlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { block, id } = Astro.props;
 ---
 
 <h3
-  id={block.id}
+  id={id}
   class=`nt-selectable nt-sub_header-block ${getNotionColor(block.heading_2.color)}`
 >
   <RichText richText={block.heading_2.rich_text} />

diff --git a/packages/notro/src/components/Heading3.astro b/packages/notro/src/components/Heading3.astro
@@ -5,13 +5,14 @@ import type { Heading3BlockObjectResponseType } from "../loader/schema.ts";
 
 interface Props {
   block: Heading3BlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { block, id } = Astro.props;
 ---
 
 <h4
-  id={block.id}
+  {id}
   class=`nt-selectable nt-sub_sub_header-block ${getNotionColor(block.heading_3.color)}`
 >
   <RichText richText={block.heading_3.rich_text} />

diff --git a/packages/notro/src/components/Image.astro b/packages/notro/src/components/Image.astro
@@ -2,15 +2,16 @@
 import type { ImageBlockObjectResponseType } from "../loader/schema.ts";
 interface Props {
   block: ImageBlockObjectResponseType;
+  id?: string;
 }
 
-const { block } = Astro.props;
+const { block, id } = Astro.props;
 const imageUrl =
   block.image.type === "file" ? block.image.file.url : block.image.external.url;
 ---
 
 <img
-  id={block.id}
+  {id}
   class="nt-selectable nt-image-block"
   src={imageUrl}
   alt={block.image.caption[0]?.plain_text ?? ""}

diff --git a/packages/notro/src/components/LinkToPage.astro b/packages/notro/src/components/LinkToPage.astro
@@ -5,11 +5,12 @@ interface Props {
   block: LinkToPageBlockObjectResponseType;
   href?: string;
   text?: string;
+  id?: string;
 }
 
-const { block, href, text } = Astro.props;
+const { block, href, text, id } = Astro.props;
 ---
 
-<a id={block.id} class=`nt-selectable nt-alias-block` href={href ?? block.id}>
+<a {id} class=`nt-selectable nt-alias-block` href={href ?? block.id}>
   {text ?? block.id}
 </a>
diff --git a/packages/notro/src/components/NotionBlockRenderer.astro b/packages/notro/src/components/NotionBlockRenderer.astro
@@ -27,15 +27,19 @@ interface Props {
 
 interface RenderOptions {
   optimizeRemoteImage: boolean;
+  useNotionId: boolean;
 }
 
 const {
   block,
   options = {
     optimizeRemoteImage: true,
+    useNotionId: false,
   },
 } = Astro.props;
 
+const blockId = options.useNotionId ? block.id : undefined;
+
 const unSupportedBlockTypes: BlockObjectResponseType["type"][] = [
   "synced_block",
   "child_database",
@@ -58,7 +62,7 @@ const unSupportedBlockTypes: BlockObjectResponseType["type"][] = [
 
 {
   block.type === "paragraph" && (
-    <Paragraph block={block}>
+    <Paragraph block={block} id={blockId}>
       <slot />
     </Paragraph>
   )
@@ -67,11 +71,11 @@ const unSupportedBlockTypes: BlockObjectResponseType["type"][] = [
   block.type === "heading_1" &&
     (block.heading_1.is_toggleable ? (
       <ToggleContainer>
-        <Heading1 block={block} slot="summary" />
+        <Heading1 block={block} id={blockId} slot="summary" />
         <slot />
       </ToggleContainer>
     ) : (
-      <Heading1 block={block}>
+      <Heading1 block={block} id={blockId}>
         <slot />
       </Heading1>
     ))
@@ -80,11 +84,11 @@ const unSupportedBlockTypes: BlockObjectResponseType["type"][] = [
   block.type === "heading_2" &&
     (block.heading_2.is_toggleable ? (
       <ToggleContainer>
-        <Heading2 block={block} slot="summary" />
+        <Heading2 block={block} id={blockId} slot="summary" />
         <slot />
       </ToggleContainer>
     ) : (
-      <Heading2 block={block}>
+      <Heading2 block={block} id={blockId}>
         <slot />
       </Heading2>
     ))
@@ -93,80 +97,80 @@ const unSupportedBlockTypes: BlockObjectResponseType["type"][] = [
   block.type === "heading_3" &&
     (block.heading_3.is_toggleable ? (
       <ToggleContainer>
-        <Heading3 block={block} slot="summary" />
+        <Heading3 block={block} id={blockId} slot="summary" />
         <slot />
       </ToggleContainer>
     ) : (
-      <Heading3 block={block}>
+      <Heading3 block={block} id={blockId}>
         <slot />
       </Heading3>
     ))
 }
 {
   block.type === "column_list" && (
-    <ColumnList block={block}>
+    <ColumnList block={block} id={blockId}>
       <slot />
     </ColumnList>
   )
 }
 {
   block.type === "column" && (
-    <Column block={block}>
+    <Column block={block} id={blockId}>
       <slot />
     </Column>
   )
 }
 {
   block.type === "toggle" && (
-    <ToggleContainer block={block}>
+    <ToggleContainer block={block} id={blockId}>
       <slot />
     </ToggleContainer>
   )
 }
-{block.type === "bookmark" && <Bookmark block={block} />}
-{block.type === "divider" && <Divider block={block} />}
+{block.type === "bookmark" && <Bookmark block={block} id={blockId} />}
+{block.type === "divider" && <Divider block={block} id={blockId} />}
 {
   block.type === "quote" && (
-    <Quote block={block}>
+    <Quote block={block} id={blockId}>
       <slot />
     </Quote>
   )
 }
 {
   block.type === "image" && options.optimizeRemoteImage ? (
-    <OptimizedImage block={block} />
+    <OptimizedImage block={block} id={blockId} />
   ) : (
-    block.type === "image" && <Image block={block} />
+    block.type === "image" && <Image block={block} id={blockId} />
   )
 }
-{block.type === "code" && <Code block={block} />}
+{block.type === "code" && <Code block={block} id={blockId} />}
 {
   block.type === "bulleted_list_item" && (
-    <BulletedListItem block={block}>
+    <BulletedListItem block={block} id={blockId}>
       <slot />
     </BulletedListItem>
   )
 }
 {
   block.type === "numbered_list_item" && (
-    <NumberedListItem block={block}>
+    <NumberedListItem block={block} id={blockId}>
       <slot />
     </NumberedListItem>
   )
 }
 {
   block.type === "to_do" && (
-    <TodoListItem block={block}>
+    <TodoListItem block={block} id={blockId}>
       <slot />
     </TodoListItem>
   )
 }
 {
   block.type === "callout" && (
-    <Callout block={block}>
+    <Callout block={block} id={blockId}>
       <slot />
     </Callout>
   )
 }
-{block.type === "link_to_page" && <LinkToPage block={block} />}
+{block.type === "link_to_page" && <LinkToPage block={block} id={blockId} />}
 {unSupportedBlockTypes.includes(block.type) && <Debug {block} />}