Merge pull request #21 from LandonSchropp/main

Add support for column lists and columns

Author: orlowdev

README.md

@@ -214,6 +214,8 @@ Untouched contents of whatever Notion API returned.
 
 Markdown contents of the page. Limited by blocks currently supported by Notion API. Unsupported blocks turn into HTML comments specifying that Notion marked this block as non-supported.
 
+Since there's not semantic HTML analog for column lists and columns, these Notion blocks are transformed to `<ColumnList>` and `<Column>` components in the markdown. To customize these components, you can write custom components for these and [include them in your `MDXProvider`](https://www.gatsbyjs.com/docs/mdx/importing-and-using-components#make-components-available-globally-as-shortcodes).
+
 ## Attaching images via "Files" property
 
 If you want to turn images attached through the "Files" property into file nodes that you can use with gatsby-image, you need to attach remote file nodes to the "Files" property. In the example below, the `propsToFrontmatter` is set to **true** and the **_Hero Image_** Files property is used for images:

src/transformers/notion-block-to-markdown.js

@@ -133,6 +133,33 @@ exports.notionBlockToMarkdown = (block, lowerTitleLevel) => {
 		return `${EOL_MD}---${EOL_MD}`
 	}
 
+	// Column List
+	if (block.type == "column_list") {
+		return [
+			EOL_MD,
+			"<ColumnList>",
+			EOL_MD,
+			markdown,
+			EOL_MD,
+			"</ColumnList>",
+			EOL_MD
+		].join("")
+	}
+
+	// Column
+	if (block.type == "column") {
+		return [
+			"<Column>",
+			EOL_MD,
+			EOL_MD,
+			markdown,
+			EOL_MD,
+			EOL_MD,
+			"</Column>",
+			EOL_MD
+		].join("")
+	}
+
 	// Unsupported types.
 	// TODO: Add support for callouts, internal video, and files
 	return [EOL_MD, `<!-- This block type '${block.type}' is not supported yet. -->`, EOL_MD].join("")