notion2svelte passes blockProps to every paragraph* so that your component implementation can optionally make use of Notion’s block metadata.
<Paragraph
blockProps={{
pageId: …,
id: …,
created_time: …,
last_edited_time: …
}}
>
ur content
</Paragraph>
blockProps take the most useful pieces of block metadata and provide them to your components* to use (or ignore) however you see fit. On my own personal site, I hope to use them to:
Provide a UX, built into each block, whereby readers can provide feedback with the reference page & block automatically included in the message
Support automatic “bookmarking” as readers progress through my online fiction
Enable deep links to specific blocks, as already supported by Notion with URLs like this, but fully-self-contained in your Svelte app
https://www.notion.so/nvlgzr/blockProps-38ed521bf46e49be8d2af67a53a37c6e#68aaea5ec56a4430bf02f999db534af4
Feed into site analytics
<aside>
🚧 *As of this writing, the blockProps attribute only gets passed to Paragraph components. At some point, I expect to do the grunt work required to pass them in to all components. Watch this space, I guess. 🙄
</aside>
Say you’ve got a simple paragraph in Notion, exported to Svelte via notion2svelte. The resulting .svelte file will include something like this
…
import Paragraph from '$lib/notion2svelte/Paragraph.svelte';
…
…
<Paragraph blockProps={{
pageId: "38ed521bf46e49be8d2af67a53b37c6e"
id: "db9fe47b407a41ea952e1c6e891ecd23b1a25fff",
created_time: "2022-01-09T05:46:00.000Z",
last_edited_time: "2022-01-24T01:05:00.000Z"
}}>
Dying is the greatest, most interesting thing any of us get to do. If I knew I could do it twice, I’d do it right now. As it is, I’ll probably avoid it as long as possible. Save the best for last, you know?
</Paragraph>
…
Inside Paragraph.svelte, blockProps gets accessed in the usual way, using export let blockProps. After that, the sky’s the limit.
You’re staring at it. In fact, you might have already noticed that, when you hover over text — like, say, this very paragraph — a ֍ appears over there to the left of the block. If you haven’t already clicked one of those buttons, take a second now to give it a go!
It should look like this ↓
The JSON is a straight dump of blockProps. The URL behind the “Highlight block in Notion” button gets assembled by combining pageId with the block id. Click it to visit the source page in Notion. Nifty, no?
<aside> 🧠 In case you’re wondering, this → ֍ ← is a right-facing Armenian eternity sign. That’s all I know about it. Fwiw, Unicode also offers the left-facing Armenian eternity sign: ֎
Elegant, no? 😃 You take a sliver-moon of just the right proportions, double it once so that the resulting duo has the same rotational symmetry as an S, double it again so that you’ve got what looks like a 4-bladed fan, then double once more, twisting the double so that its blades perfectly overlap the first fan to form what appears to be an impossibly-circular snip of rope. Lovely.
</aside>