Showcase of all content features of my Notion to HTML API. A complementary article to the Notion to Webflow blog tutorial. See the video tutorial here.
ㅤ
ㅤ
📝 Two notes on functionality
🖼️ Image storage
By default, each image that was imported to Notion will expire after one hour after fetched. This is solved by automatically uploading each image on Cloudinary.
🔗 Heading links
You can get a link to block through Notion inline menu > Copy link to block. You can insert the heading id as a link and use it to reference other section + jump to them. See the table of contents at the top of the article for an example of in-document anchors.
Hover over a heading and see an anchor to the left of it. You can use this to share an exact blog section with someone.
🙅♂️ Current limitations
Nested blocks are fetched only on list, toggle and callout blocks (and only one level deep)
ㅤ
🤩 Content showcase
Blocks you can use
✅ Supported: paragraph, heading_1, heading_2, heading_3, bulleted_list_item, numbered_list_item, to_do, toggle, child_page (link), image, divider, quote, code, file, callout, video
❎ Unsupported: bookmark, pdf, table_of_contents, breadcrumb, embed, link_preview, synced_block, table, table_row, child_database
Links, row+inline colors, annotations, code style
- Like this
- Or this.
- Link
- Inline code. I said inline code!
- Nested listst!
- Nested list 2
Numbered lists
- One
- Two
- Nested numbered
- Nested numebered 2
- Four 😆
- Nested bullet list
- Nested numbered list
To-do’s
Not sure what you would use these for in a blog article, but whatever!
Fancy code formatting + copy button by finsweet
<!DOCTYPE html>
<h2>Hello</h2>
<p>This is a paragraph</p>Copyㅤ
Callouts
Newline, check!
New row, check
Next callout headline, check.
Code styles, check
ㅤ
Images
Full-width images:
ㅤ
Smaller + centered images:
ㅤ
Toggles, dividers
▶No JS used!
Headline
Some text
- List, idk
▶Open me ╰(*°▽°*)╯
Now here’s a link
▶Toggles look better with dividers
That’s just a fact
ㅤ