How to create TG Instant View from Notion page

Title image is MidJourney generated (Notion blended with Instant View TG)

How to format in Notion

To ensure everything displays and works correctly, formatting a page in Notion needs to follow these rules:

• The page title will become the Instant View (IV) title.
• All images must be inserted through /embed. Ordinary insertions will attach the image's URL to amazonaws in such a way that the IV Bot of Telegram cannot fetch it.
• If some paragraphs need to be displayed as Blockquote, in Notion, this block should be made as a Quote type.

How Blockquote looks in IV

---

How the same block was formatted in Notion

In general, it is unlikely to be able to make large articles in IV, and it is also not worth adding many complex blocks to the article. The simpler - the better.

How to customize the IV template

Go to My Templates and insert the article's link into the field and press Enter.

To get the link to the page in Notion, select Share in the upper right corner of the screen and switch the Share to web toggle.

In the window that appears in the center, you need to specify the rules by which the IV Bot will parse the page structure. The minimally working template is as follows:

~version: "2.1"
body: //body
title: "@head//title"
@replace_tag(<figure>): $body//p[.//img]
# <aside> ://p[contains(text(), '<aside>')]
author: "eclipse_it"

“~version” - without specifying a version, the render crashes.

“body: //body” - here, the narrowest block in terms of nesting with useful content is specified. When creating an IV template for a regular blog, it is enough to specify any article if such a tag exists:

body: //article

or div with id="content":

body: //div[@id="cover"]

or div with class "content-page," for example:

body: //div[has-class("content-page")]

---

“title: @head//title” - The title will be placed in the

tag, catch it from there.

“@replace_tag(<figure>): $body//p[.//img]” - don't ask Yes, Notion places the <img> tag inside <p>, and the parser crashes on it.

“author: "eclipse_it""- channel name or author's name.

“# <aside> ://p[contains(text(), '<aside>')]” - here, the line can be removed. I have not yet fully understood how to solve this problem. The thing is that the Callout block from Notion:

In HTML code, it looks like this:

Therefore, it is necessary to somehow transform this <p>.

How to attach IV to a post

After the layout is configured, you need to click Track Changes in the upper right corner, then Mark as checked.

To get the link -> View in Telegram

The obtained link needs to be inserted into the post, but to avoid cluttering the text with a link, you can use the invisible character "ㅤ" (code "U+3164", "&#12644"), on which a link is hung.