feat: ✨ add divider component

src/fixtures/notion-renderer/astro/blog-post.astro

@@ -120,6 +120,10 @@ const blocks = Astro.props.blocks;
         // * problem: when I get images from Notion, there is no width & height
         return <img src={block.url} alt={block.caption} />;
       }
+
+      if (block.type === "divider") {
+        return <hr />;
+      }
     })
   }
 </article>

src/fixtures/notion-renderer/blocks.ts

@@ -63,6 +63,10 @@ type Image = {
   caption: string;
 };
 
+type Divider = {
+  type: "divider";
+};
+
 export type Block =
   | Paragraph
   | Heading
@@ -72,14 +76,16 @@ export type Block =
   | TodoListItem
   | TodoList
   | Quote
-  | Image;
+  | Image
+  | Divider;
 
 export const getBlockStyleProps = (block: Block): StyleProps | undefined => {
   if (
     block.type !== "unorderedList" &&
     block.type !== "orderedList" &&
     block.type !== "todoList" &&
-    block.type !== "image"
+    block.type !== "image" &&
+    block.type !== "divider"
   ) {
     return block.style;
   }
@@ -164,6 +170,12 @@ const imageFactory = (url: string, caption: string): Image => {
   };
 };
 
+const dividerFactory = (): Divider => {
+  return {
+    type: "divider",
+  };
+};
+
 const factory = {
   paragraph: paragraphFactory,
   heading1: (text: string, style: StyleProps) => headingFactory(1, text, style),
@@ -177,6 +189,7 @@ const factory = {
   todoList: todoListFactory,
   quote: quoteFactory,
   image: imageFactory,
+  divider: dividerFactory,
 };
 
 export default factory;

src/fixtures/notion-renderer/index.ts

@@ -172,17 +172,16 @@ export const mapNotionBlocks = (
 
       case "image": {
         const b = block.image;
-
-        if (!b) {
-          return prev;
-        }
-
         const url = b.type === "external" ? b.external.url : b.file.url;
         const caption = b.caption?.[0]?.plain_text;
 
         return [...prev, factory.image(url, caption)];
       }
 
+      case "divider": {
+        return [...prev, factory.divider()];
+      }
+
       default: {
         notionRendererLogger.error({ block }, "Unsupported block type");
         throw new Error("Unsupported block type");

todo.md

@@ -17,6 +17,7 @@
   - [x] - image
   - [x] - todolist
   - [x] - numbered list
+  - [x] - quote
+  - [x] - divider
   - [ ] - code
   - [ ] - toggle list
-  - [ ] - quote