A brief digression: How notion2svelte handles images
1. Notion original
2. Notion API
{
"object": "block",
"id": "4b8866c2-40ba-4b69-9570-b433e2261e63",
"created_time": "2022-01-28T00:10:00.000Z",
"last_edited_time": "2022-01-28T00:11:00.000Z",
"has_children": false,
"archived": false,
"type": "image",
"image": {
"caption": [],
"type": "file",
"file": {
"url": "https://s3.us-west-2.amazonaws.com/secure.notion-static.com/4c737e93-7d21-42a1-9b66-23a53ecc0bca/282A2480-D6DE-4CA4-889E-068415F73B90_1_105_c.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220131%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220131T203424Z&X-Amz-Expires=3600&X-Amz-Signature=b9b59221adc2ec38dc21fe86a6d9adfff3966e77511b6be3185a5b6439eab0f3&X-Amz-SignedHeaders=host&x-id=GetObject",
"expiry_time": "2022-01-31T21:34:23.999Z"
}
}
}
json
3. Svelte output
<Image url="/assets/other-components/image/64680bf8-12ce-46f7-adfb-2c9822d2346b.jpg">cyborg tita</Image>
html
The image is stored locally, using block id as the filename.
4. Example rendering
🏠 Browse the docs ⚘
High-level Discussion
Turn-intoable Block Components
Toggle Headings (not yet implemented)
Layout-only Components
Page-level Components
Annotation Components
bold → <strong>
italic → <em>
strikethrough → <s>