DEV Community

Cover image for How to create TG Instant View from Notion page
artpani
artpani

Posted on • Edited on

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 Blockquote looks in IV


How the same block was formatted in Notion

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"
Enter fullscreen mode Exit fullscreen mode

~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
Enter fullscreen mode Exit fullscreen mode

or div with id="content":

body: //div[@id="cover"]
Enter fullscreen mode Exit fullscreen mode

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

body: //div[has-class("content-page")]
Enter fullscreen mode Exit fullscreen mode

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:The thing is that the Callout block from Notion

In HTML code, it looks like this:

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.

Empty symbol

Top comments (0)