notion-blog-nextjs icon indicating copy to clipboard operation
notion-blog-nextjs copied to clipboard

Published 20 hours ago • verified publisher icon samuelkraft

Make lists more semantic

Open dashkevych opened this issue 3 years ago • 3 comments

Thank you for a great tutorial!

Currently, lists are missing <ul> and <ol>: https://github.com/samuelkraft/notion-blog-nextjs/blob/ed24ec2d9864e07781507ef9cfd24d41114a2151/pages/%5Bid%5D.js#L63-L69

It would be great if you could provide a possible solution to making Notion lists more semantic.

Thank you 🙏

dashkevych avatar Dec 09 '21 02:12 dashkevych

Thanks for reporting! This is a little bit tricky due to how the Notion API response looks like. I haven't had time to look at it myself, but there's a couple of solutions out there for reference:

  • https://github.com/samuelkraft/notion-blog-nextjs/pull/18/files#diff-eaa1d26b6c19c559d3e5141a68ff4b59df4a8af8d3741c0b54443dd54ed73fecR114
  • https://github.com/splitbee/react-notion/blob/master/src/block.tsx#L239

samuelkraft avatar Jan 19 '22 21:01 samuelkraft

maybe this could help? I decided to preprocess the blocks before they go to the renderer

https://github.com/maximousblk/maximousblk.me/blob/57a446c4da10057e90f7c7061018e6a54035378b/lib/notion.ts#L196-L223

maximousblk avatar Jan 20 '22 04:01 maximousblk

maybe this could help? I decided to preprocess the blocks before they go to the renderer

https://github.com/maximousblk/maximousblk.me/blob/57a446c4da10057e90f7c7061018e6a54035378b/lib/notion.ts#L196-L223

Nice @maximousblk! Would you mind sending a PR?

samuelkraft avatar Jan 21 '22 08:01 samuelkraft