🪲

Cover (Image & Icon)

The Cover component gives you access to both the icon and cover image on each page

A brief digression: How notion2svelte handles images

1. Notion original

2. Notion API

Partial output of src/routes/[slug]/notion-export.js

{
  "object": "page",
  …
  "cover": {
    "type": "file",
    "file": {
      "url": "https://s3.us-west-2.amazonaws.com/secure.notion-static.com/2648cd63-fb9b-47c4-9ec2-c2ea152d0c15/IMG_1865.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220128%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220128T023745Z&X-Amz-Expires=3600&X-Amz-Signature=f43b7af10139323e63149096654253d4a6156c7cc41df6dd6ec340d969762750&X-Amz-SignedHeaders=host&x-id=GetObject",
      "expiry_time": "2022-01-28T03:37:45.980Z"
    }
  },
  …
}
  javascript

3. Svelte output

Partial output of src/routes/[slug].svelte

<Cover
  coverURL={'https://s3.us-west-2.amazonaws.com/secure.notion-static.com/2648cd63-fb9b-47c4-9ec2-c2ea152d0c15/IMG_1865.jpeg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20220128%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20220128T110028Z&X-Amz-Expires=3600&X-Amz-Signature=438ced7db084ce6bd25d2a08f498b78c8e2b0b6fad1c231ba2ba148c42bc7a3d&X-Amz-SignedHeaders=host&x-id=GetObject'}
  iconEmojiOrURL={'🪲'}
/>
  html

Why is it called iconEmojiOrURL?

A mouthful, I know. This naming reflects the uncertainty of the icon payload coming from Notion…or at least, of the way in which I’ve decided to handle that payload.

Basically, you get a string, and it’s either super short, and, therefore, an emoji, or it’s lots longer because it starts with http, in which case you should treat it as an image URL.

$: assumeURL = iconEmojiOrURL.length > 3;
  javascript

This assumption works because image names are UUIDs (or similar), generated by Notion/Amazon, and they’re all super long. Brittle, I know. ¯\_(ツ)_/¯

4. Example rendering

See cover and icon 👆 at the top of this page, rendered by Cover.svelte

🏠 Browse the docs ⚘

High-level Discussion

Where notion2svelte Fits

Configuring your .env

Turn-intoable Block Components

Paragraph (aka “Text”)

Toggle Headings (not yet implemented)

Layout-only Components

IndentGroup

Column & ColumnList

Page-level Components

Title (aka Name)

Cover (Image & Icon)

Annotation Components

bold → <strong>

italic → <em>

~~strikethrough~~ → <s>

Other Components