Sudip Pokhrel

Title but no excerpt or tags works

Sat, 01 Mar 2025 00:00:00 GMT

Note: This RSS feed strips out SVGs and embeds. You might want to read the post on the webpage here.

March 1, 2025

Content here?

xychart-beta
    title "Sales Revenue"
    x-axis [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec]
    y-axis "Revenue (in $)" 4000 --> 11000
    bar [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]
    line [5000, 6000, 7500, 8200, 9500, 10500, 11000, 10200, 9200, 8500, 7000, 6000]

Test Page That Has Such A long Title For Short Term Testing

Sat, 01 Mar 2025 00:00:00 GMT

Note: This RSS feed strips out SVGs and embeds. You might want to read the post on the webpage here.

Heya! Test Page That Has Such A long Description For Short Term Testing

March 1, 2025

Tools

testing notion page embeds

testing custom emojis

Test Page That Has Such A long Title For Short Term Testing

Testing nocodedb

Testing teable

Bookmark for https://app.teable.io/share/shrCLQo5nm3Gki0fzuY/view?hideToolBar=true&embed=true

Table

Know that Table column/row colors do not show up in Notion API

Simple	🏷️ Table	Ika	Tako	🔢 Shake	Hello
abma	mac	a	55	55,55	just adding some content here
aama	android	b	6	6,55	just adding some content here
A	mac	c	-444	-444	just adding some content here

Simple	Table	Ika	Tako	Shake	Hello
abma	mac	a	55	55,55	just adding some content here
aama	android	b	6	6,55	just adding some content here
A	mac	c	-444	-444	just adding some content here

Simple	Table	Ika	Tako	Shake
abma	2	a	4	5
aama	b	b	d	e
A	B	c	D	E

h1

hello

other page block mention:

same page block mention:

other page

same page

h2

but no media or links!

Comes from Introducing Webtrotion

Current page block link !

searchterm

Mentions tweet

h11

searchterm

Mentions tweet

Hello

⬜

Really long link test: Refractor based off this later? https://github.com/chrismwilliams/astro-theme-cactus/commit/bd1a17c7895ec8c86cf477267b71fbb8e4635d04

edited it

Introducing Webtrotion

Tue, 28 Nov 2023 00:00:00 GMT

Note: This RSS feed strips out SVGs and embeds. You might want to read the post on the webpage here.

Learn about and how to use this theme here!

November 28, 2023

🪴 Potted Guide

Are you curious on Jun 25, 2024 whether to use Notion Sites v2 or Webtrotion? Check this out!

Just take me to the github link:
Bookmark for https://github.com/nerdymomocat-templates/webtrotion-astro-notion-cms-website-blog

Support me on product hunt!
(Pssst... check out how this looks hosted through Webtrotion!)

New Features and Changelog

Jul 6, 2024: Simple tables with search and sort . Unlike notion where your simple tables are basically just a form of displaying data, you can now search and sort your simple tables in webtrotion. Just have column headers and use <<🗂️>> in the first cell ( modifiable in constants-config ).

Your browser does not support the video tag.

Jul 4, 2024: Breaking change → the shortcode for HTML rendering in an iframe (if you want to use external libraries like d3.js has changed to <!DOCTYPE html>  and for injecting it directly into the body is now <!DOCTYPE html> . This helps you have code blocks that are in html and start with <!DOCTYPE html> without rendering them.

Jun 30, 2024: View transitions are back in and use ⌘K or ^K to search

Your browser does not support the video tag.

Jun 28, 2024: Floating table of contents and shiki transforms for code blocks (updated to astro 4.11), and added view transitions

Jun 14, 2024: Pin posts to top

Jun 15, 2024: Add tag descriptions

Dec 12, 2023: Add support for preview popovers

Dec 2, 2023: Added interlinked content section

Dec 4, 2023: Add support for recent posts on homepage

Nov 29, 2023: Caching

Webtrotion is a simple to install, configurable to nthn^{th}nth limit starter built with the Astro framework in conjunction with Notion. Use it to create an easy-to-use blogor website.

(Skip to features and setup)

Acknowledgements

This theme is built based off three major contributions:

Webtrotion Cat

Why Webtrotion

Webtrotion was built with the simple idea - most notion based builders, require at least one of these four things:

A custom domain, or being willing to use a vercel like domain
Just have blogposts be editable in Notion while pages are edited in the repo
Require some third party tools, or are not free to use.
Are not configurable because they are either based off third parties like super.so or the configuring requires editing multiple code files.

And I did not want that. We want something that converts well into a static site, can be hosted on github for free using the github.io domain, and can have both pages and blog posts and be configured pretty easily.

Why Notion and Astro

I use Notion for all my notes, and it did not make sense for me to download them into an md file, carefully figure out the logistics and push/pull with other SSGs like Quartro, Eleventy, Hugo or Jekyll.
I could have used another CMS but again, I use Notion, and it is easier to keep the content in one place. Notion also comes with interesting affordances that other CMS don’t: WYSIWYG for various components, block level permissions (to add drafts to post text), easy collaboration etc.
There are some NextJS options that kinda fulfill this criteria but I do not know NextJS and I did not want to figure it out at the moment, for example: Notion Next, Morethan-log, and Notion-Blog-NextJs

Key Features

Astro v4.11
Integrates with Notion to create a website and not just a blog
Single file configuration
TailwindCSS Utility classes withNotionColorMatchingforeverything.
Accessible, semantic HTML markup
Responsive & SEO-friendly
Dark / Light mode, using Tailwind and CSS variables that can be modified using a single config file
Satori for creating open graph png images that includes your featured image
Pagination
Automatic RSS feed
Webmentions
Giscus comments
Auto-generated sitemap
Pagefind static search library integration
View Transitions
Pinned Posts
Shiki Transformers for Code Blocks
API request output caching on Github Actions for fast build times
Mini blog streams (idea copied from Linus’s stream)
Auto-generated related content and pages that link to this page
Pretty looking wikipedia like popups on hover that works with links to any block on any page.
Footnote blocks, aka, use the popover to show footnotes on your post

Demo

Check out the Demo, hosted on Github using Github actions

Quick start

Notion Setup

Duplicate this database into your Notion account. Remember to duplicate it as a standalone new page, rather than into an existing page.
Create a Notion integration
Get your API secret
Give your integration permission to the complete database you just duplicated
Get your database id of the database you duplicated. Database id is the 32 character alphanumeric string right after your workspace in the URL. It is the easiest to get this ID on a web browser rather than the Notion app.
Database id from notion url

Github Setup

Create a new repo from this template if you want to have a one and done standalone repository. If you want to be able to access and sync changes made in the template to your repository, choose to fork it instead.
If you do not choose to add a custom domain, the name of your repository matters. If the name of the repository you create is <username>.github.io; your website will be accessible at <username>.github.io if you use github actions. If you use any other name, the website will instead be hosted at <username>.github.io/<reponame>.
When you first fork the repository, you will see that the github action output fails. This is because we haven’t added or changed notion integration information. Don’t worry, once you add those, it will run successfully.
In your repository settings:
1. Uncheck template repository if it is checked.
2. Turn on Discussions in features to use Giscus
3. Go to Actions → General and set it to Allow All
4. Go to Pages and set Source as Github Actions
5. Go to Environments → github-pages; Scroll down to Environment Secrets, click Add New Secret. Set name as NOTION_API_SECRET and the value to the API secret you obtained in Notion Setup
6. Very Optional (if you are tech-savvy or want to try): Get a personal access token to delete caches and set another environment secret named DELETE_CACHES_GH_TOKEN to this token
  Details
  Obtain a personal access token that you can limit to this repository using the process mentioned here: GitHub DocsManaging your personal access tokens - GitHub Docs. You only need the repo scope and remember to set the validity to no expiration. Remember to save this token somewhere because you will not see it again.
  In the environment secrets section, add another environment secret named DELETE_CACHES_GH_TOKEN and set it to the token you obtained in the previous step.
  Why do this at all? Because I like cleaner lists — and here is some information from Github’s end: GitHub DocsCaching dependencies to speed up workflows - GitHub Docs
Go to the actions tab, and choose I understand and want to run actions. On the left sidebar click the action “Deploy Github pages”. It will show a warning saying the scheduled action is disabled in forks. Click Enable workflow.
Set up giscus as mentioned on the website giscus.app. Keep the script it produces open as we will use it in the next step.
Go back to your cloned (forked or created through a template) repository.
Open file constants-config.json in the web UI. This file is the complete setup file for your website. For now, we will make four major modifications:
1. Change DATABASE_ID to your database id that you obtained from Notion.
2. Add your name to AUTHOR (this is used for HTML semantics and OG image generation)
3. Add your socials (you can also remove the value for this-github-repo)
4. Add your giscus information to the GISCUS key. If you do not want you use Giscus, remove value for data-repo in GISCUS and that will disable the feature.
Save the file and commit+merge to the main repo.
The github action by default runs every 8 hours or on commits to the repo. This can be modified in .github/astro.yml file. You can choose any cron duration.

And we are done! You can access your website on <username>.github.io or <username>.github.io/<reponame> depending on what you chose. Checkout all Supported blocks but tl;dr all blocks are supported except child databases and child pages.

Remember, the cron schedule is by default set to every 8 hours. You can change it to run every 2 hours or if you want to push out a change immediately, you can also manually run the github action if you are deploying on github. The workflow name is “Deploy Github Pages”.

Preview

Light mode preview

Dark mode preview

Notion Properties

Pages or posts are only published if: their Published property is checked ANDif the explicit publish date is empty or is before the current date.

Property	Usage
Page	Title of the page or post being rendered
Tags	Tags displayed for the post
Excerpt	Description used in OG images and RSS feeds
Collection	Collection in which the post/page goes. Anything tagged with main or your `menu-pages-collection`is rendered as a page.
Published	Your post or page is only published when you tick publish
FeaturedImage	Image used to generate your page’s or post’s open graph image
Specific Slug	The template generates a slug using formula, but if you want a specific slug, you can specify it here
Explicit Publish Date	By default, the formula considers the date notion page was created to be publish date. You can override it by setting a date for this property.
Explicit Publish Date	By default, the formula considers the date notion page was last edited to be last edited date. You can override it by setting a date for this property.
Rank	Want to order single pages (Updates before Papers?) Set rank in ascending order
Pinned	Pins post to the top of any collection page, except those tagged with `menu-pages-collection`.
Bluesky Post Link	Use bluesky post as a commenting mechanism, see variable: `bluesky-comments`

Don’t rename the columns of DB. They are used in the astro code. You can reorder the columns or add any other columns you want.

Local Run

You can run the code locally by cloning the repo.

cd folderexport NOTION_API_SECRET=YOUR_KEY_HEREnpm installnpm run build #we need to build once because that is when all icons are downloadednpm run dev

Extra configuration options

P.S.: You can search this simple table!

Key	Value
public-ga-tracking-id	Your google tracking property id. Steps here.
google-search-console-html-tag	Content value of search console property verification tag. More here
webmention	Webmention API Key and link obtained from https://webmention.io/
custom-domain	If you want to host the site somewhere else
base-path	Or subdomain inside the custom domain
shortocdes	There are 3 shortcodes atm, two supported, two in works. `html` shortcode is used to embed html code blocks that start with this line directly into the page. `shiki-transform` is used to transform code blocks into more expressive representations. `table` is used to set the identifier for data-tables enabling search and sort.
references	To show related pages, external links, and mentioned media at the end of the post. Set `popovers` to true to display a snippet when hovering over a post link in the body.
theme	Colors for light mode and dark mode
fontfamily-google-fonts	Combined URL link for all fonts you want to use from google fonts. Remember to escape spaces in font names if needed
number-of-posts-per-page	Number of posts in a page for pagination purposes
enable-lightbox	Set to true if you want people to be able to click on your image to open in a new tab
request-timeout-ms	Timeout for API requests
menu-pages-collection	Collection select value in Notion database that decides if these are pages or blogposts. Set this to value you use for pages.
heading-blocks	Which top-level blocks blocks should form the table of contents on right
full-preview-collections	Stream like view, where each post is a mini-blog in the same page as a scrollable page instead of being links to individual pages. Any Collection name added to this list will be rendered as stream view.
hide-underscore-slugs-in-lists	If the slug starts with `_`, hide those in post lists, rss and sitemap, but still render them, so that you can share them
home-page-slug	By default is set to `home` but can be anything that you want for the renderer to recognize which is your home page from the database
og-setup	Open graph setup refers to the images displayed when sharing links. It includes excerpts and creates two columns if a featured image is available. You can customize the title and footnote fonts for the og-image, particularly for non-English blogs. Ensure that each URL has only one font and, if it has a weight, the weight is above 400
optimize-images	Converts images to next-gen formats like webp for more responsive sites
redirects	Intentional redirects, especially if you are moving systems that astro should redirect to
all-footnotes-page-slug	Defaults to `_all-footnotes`. This page is not visible in post list because it starts with a `_` but you can use this show popup blocks on any of your pages.
bluesky-comments	`show-comments-from-bluesky` to turn on/off a Bluesky comment section. `auto-search-for-match` searches your profile for parent posts mentioning the link, controlled by `turn-on-auto-search`, with `author` specifying your Bluesky handle; `echo-feed-emoji` filters these searches.

License

MIT

Notes

Don’t rename the columns of DB. They are used in the astro code. You can reorder the columns or add any other columns you want.

Update Jun 19, 2024: I included a keep alive workflow which will hopefully work to keep the action running without any manual intervention. Fingers crossed 🤞.

Webtrotion relies on GitHub Actions if you're deploying on GitHub Pages. If you don't commit any changes to the repository, remember to manually enable the workflow every 60 days.

Screenshot of the email you’ll get warning you about the workflow being disabled.

[GitHub] The "Deploy to GitHub Pages" workflow in nerdymomocat/nerdymomocat.github.io will be disabled soon

Aggressive Caching

Remember that the setup uses aggressive caching for github actions. These caches are public. If you want to remove caches, you can go to github action workflow and manually delete the caches

Multilingual/Non-English blogs

Open graph setup refers to the images displayed when sharing links. It includes excerpts and creates two columns if a featured image is available. You can customize the title and footnote fonts for the og-image, particularly for non-English blogs. Ensure that each URL has only one font and, if it has a weight, the weight is above 400

Supported blocks

Tue, 28 Nov 2023 00:00:00 GMT

Note: This RSS feed strips out SVGs and embeds. You might want to read the post on the webpage here.

Almost all of them!

November 25, 2023

Last Updated: November 28, 2023

Information

For using the template and the corresponding code, go to Introducing Webtrotion

Updates

The main thing to remember is it does not support child databases and child pages.

Heading 1

Catus felis silvestris, murrarum et gattonum, in domibus humanorum feliciter vivere solet, mollibus pulvinis dormiens et lanae globulis ludens.

Heading 2

Catus felis silvestris, murrarum et gattonum, in domibus humanorum feliciter vivere solet, mollibus pulvinis dormiens et lanae globulis ludens.

Heading 3

Catus felis silvestris, murrarum et gattonum, in domibus humanorum feliciter vivere solet, mollibus pulvinis dormiens et lanae globulis ludens.

Toggleable Heading 1

contents

Toggleable Heading 2

content

Toggleable Heading 3

Paragraph

bold

italic

Underline

Strike

link

code

← No access page

Empty Block below

color

color background

common latex code 4=54=54=5

colored block

colored text with colored block

Color Test

Color guide for reference:

Name	Text LM (Hex)	Text DM (Hex)	BG LM (Hex)	BG DM (Hex)	Select LM (Hex)	Select DM (Hex)
Default	37352F	FFFFFF (90%)	FFFFFF	2F3437	CECDCA (50%)	505558
Gray	9B9A97	979A9B (95%)	EBECED	454B4E	9B9A97 (40%)	979A9B (50%)
Brown	64473A	937264	E9E5E3	434040	8C2E00 (20%)	937264 (50%)
Orange	D9730D	FFA344	FAEBDD	594A3A	F55D00 (20%)	FFA344 (50%)
Yellow	DFAB01	FFDC49	FBF3DB	59563B	E9A800 (20%)	FFDC49 (50%)
Green	0F7B6C	4DAB9A	DDEDEA	354C4B	00876B (20%)	4DAB9A (50%)
Blue	0B6E99	529CCA	DDEBF1	364954	0078DF (20%)	529CCA (50%)
Purple	6940A5	9A6DD7	EAE4F2	443F57	6724DE (20%)	9A6DD7 (50%)
Pink	AD1A72	E255A1	F4DFEB	533B4C	DD0081 (20%)	E255A1 (50%)
Red	E03E3E	FF7369	FBE4E4	594141	FF001A (20%)	FF7369 (50%)

Background

the lazycatmeowsandmeowsattheflailingkitten

Text

the lazycatmeowsandmeowsattheflailingkitten

Bulleted List

Bulleted List
Uni
Tako
- AAA
- BBB

Numbered List

Numbered List
Kani
Ika
1. 111
2. 222
  1. Third!

To Do

✅

To-do 1

⬜

Todo 2

⬜

A bit complicated now

⬜

A bit more
complicated now?

What if child has no box?

What if there is `suddenly` a heading?

💡

Huh?

⬜

Column List

Column 1

Column 2

Columns inside columns

Column 1

Column 1 still

Column 2

Column 2a

Column2 b

Divider

Callout

ℹ️

Callout
Line break

Hello

⬜

SO many callout tests!

Like cols

And more cols

Colored Callout and background color

Code

const root = ReactDOM.createRoot(document.getElementById('root'));root.render(<h1>Hello, world!</h1>);

This is code caption.

a=32if a:	x =23

Also supports shiki transformers:

What you write

# <<shiki-transform>> # use this keyword to tell it to transform codea=32if a: 	x =23

What you get

a=32if a: 	x =23

CodePen Embed

Code with Mermaid diagram

flowchart LR;
  A[Hard Edge] --->|LinkText|B(Round Edge)

Mermaid notation

Trying HTML injection

Remember this directive can be changed, check out Introducing Webtrotion

Hover Me

Pasta

Spaguetti Bolognese

30 Mins | 1 Serving

A random fancy hover card (source)

Trying HTML rendering

Remember this directive can be changed, check out Introducing Webtrotion

Quote

Quote Block

Colored Quote Block

Equation

Inline equation here 1+q2(1−q)+q6(1−q)(1−q2)+⋯=∏j=0∞1(1−q5j+2)(1−q5j+3),for ∣q∣<1.1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \quad\quad \text{for }\lvert q\rvert<1. 1+(1−q)q2+(1−q)(1−q2)q6+⋯=∏j=0∞(1−q5j+2)(1−q5j+3)1,for ∣q∣<1. for testing

Block equation below.

ΔE00∗=(ΔL′kLSL)2+(ΔC′kCSC)2+(ΔH′kHSH)2+RTΔC′kCSCΔH′kHSH\Delta E^*_{00} = \sqrt{ \Big(\frac{\Delta L'}{k_LS_L}\Big)^2 + \Big(\frac{\Delta C'}{k_CS_C}\Big)^2 + \Big(\frac{\Delta H'}{k_HS_H}\Big)^2 + R_T \frac{\Delta C'}{k_CS_C} \frac{\Delta H'}{k_HS_H} }ΔE00∗=(kLSLΔL′)2+(kCSCΔC′)2+(kHSHΔH′)2+RTkCSCΔC′kHSHΔH′

Table

Know that table column/row colors do not show up in Notion API

Simple	Table	Ika	Tako	Shake
1	2	3	4	5
a	b	c	d	e
A	B	C	D	E

File

A file about XYZ Download Preview

Indented File

PDFTriage: Question Answering over Long, Structured Documents Download Preview

Toggle

This is toggled details.

Toggle inside toggle

More toggles!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut volutpat nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut volutpat nunc.

Long enough toggle to see what happens to the marker here.

Link to page

Introducing Webtrotion

Synced Block

♻️

Synced Block

♻️

Synced Block

Synced block from a different page

New Features and Changelog

Your browser does not support the video tag.

Jun 30, 2024: View transitions are back in and use ⌘K or ^K to search

Your browser does not support the video tag.

Jun 28, 2024: Floating table of contents and shiki transforms for code blocks (updated to astro 4.11), and added view transitions

Jun 14, 2024: Pin posts to top

Jun 15, 2024: Add tag descriptions

Dec 12, 2023: Add support for preview popovers

Dec 2, 2023: Added interlinked content section

Dec 4, 2023: Add support for recent posts on homepage

Nov 29, 2023: Caching

All Mentions

Dates

Dates: Nov 23, 2023, 05:27 AM Nov 22, 2023 Nov 17, 2023 to Nov 22, 2023 Nov 23, 2023, 05:00 PM and People:

I did something very normal Nov 22, 2023 which is a huge deal!

Linked Blocks and Pages

This links to heading Column List

But we can also have links that are not on direct children of the page, right?

This inside toggle links to heading Column List

This links to a heading in another webpage

This links to a heading in same page but an internal block (not main page , nested in)

This links to block Ika (Now supported)

This links to a block in another same site page

Linked page with URL

What are complete links?

Link to main pages

Home

But paste link as mention doesn’t work: Mind map & Outline Ideas - Escape

Image

Caption for an image

Audio

Your browser does not support the audio element.

Link Preview & Bookmark

Bookmark for https://github.com/otoyo/easy-notion-blog

Bookmark for https://thezal.dev/article_giscus_astro/

Other Embeds

Twitter

Mentions tweet

And a caption for the tweet!

Spotify

I got a blank space baby and I’ll write your name 😉

tldraw

Raindrop

YouTube

And a caption for youtube video

Tiktok

@twiniboo

Cat gets a bath! https://www.tiktok.com/@twiniboo/video/7013145735747079429?lang=en

Instagram

View this post on Instagram
A post shared by Instagram

Shelby Grace Instagram with orange hair

Maps

Using the embed link by google

Captions work?

Using general link by google (it auto converts)

Bookmark for https://maps.app.goo.gl/dyjQVyHP87ZsVBPn6

Using Notion embed

Bookmark for https://www.google.com/maps/place/Universal+Studios+Singapore/@1.2541727,103.8204697,17z/data=!3m1!4b1!4m6!3m5!1s0x31da1955a615a343:0x3094037d34e6529f!8m2!3d1.2540421!4d103.8238084!16s/m/026_mw1?entry=ttu

Using HTML directive

<!DOCTYPE html><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3988.8625104973885!2d103.82304464999999!3d1.2541673500000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31da1955a615a343%3A0x3094037d34e6529f!2sUniversal%20Studios%20Singapore!5e0!3m2!1sen!2sus!4v1701509011225!5m2!1sen!2sus" width="200" height="150" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>

This google maps will go out of margin if we set width to 600 and height to 450. So, embeds are usually a better idea!

In columns

Loom

Loom/any video embed using Notion’s option is not supported at the moment

But it works if you use their embed URL

Direct Uploaded Video

Your browser does not support the video tag.

This is a direct uploaded video caption!

Known stuff that is not supported/has bugs

Multiple injections on a single page if not handled carefully, have clashes can have a problem!
Resizing for embedded html is a problem, for things like d3.js, but does it matter? How does distil handle it?
If you use npm run dev without npm run build, some things may not be download leading to:
CSS generation is also now associated with build. Run the build command once before running dev please.

Table column colors are not supported through API
Block mentions are not supported through API
Comments are not supported
Word breaks are an issue on smaller screen if there is no viable place to break them. Currently I am using word-wrap:normal;
I do not plan to add support for inline databases but I’d love if anyone wants to contribute?
Child Pages are too much work to support and I do not have a personal usecase for it!
Column widths and embed widths are not exposed in API
Backlinks are not exposed in API so I do not know how to do Links to This Note
Right now, if I click on a tag from “unlisted” URL and that tag is only attached to that post, no tag page is generated, and I think that isn’t a bad thing!
If you post a parent block with child sync block to another workspace, it will not show up in UI but does show up in API causing warnings/errors
Heading ids are generated based off text. If you have two headings with same names, that is an issue. I can change it to use block id, but then they are illegible to anyone using an href link for them to share.

Lorem ipsum dolor sit amet 我爱你 with 愛してます

Tue, 25 Jul 2023 00:00:00 GMT

Note: This RSS feed strips out SVGs and embeds. You might want to read the post on the webpage here.

This is lorem ipsum

July 25, 2023

Note-Taking Guide Tools 我爱你

Lorem ipsum content with an image and a random file below

import process from "node:process";import { TodoistApi } from "npm:@doist/todoist-api-typescript";import { Client } from "npm:@notionhq/client";const TODOIST_API_KEY = process.env.TODOIST_API_KEY;const todoistapi = new TodoistApi(TODOIST_API_KEY);const NOTION_API_KEY = process.env.NOTION_API_KEY;const notion = new Client({  auth: NOTION_API_KEY,});var add_to_notion_todoist_project_id = "PROJECT_ID_HERE";var todoist_dict_mapping = {  "habit": {    "todoist-section-id": "SECTION_ID_HERE",    "notion-map-type": "page",    "notion-id": "PAGE_ID_HERE",  },  "papers": {    "todoist-section-id": "SECTION_ID_HERE",    "notion-map-type": "database",    "notion-id": "DB_ID_HERE",  },};function getNotionId(section_id) {  if (!section_id) {    return [todoist_dict_mapping["dump"]["notion-map-type"], todoist_dict_mapping["dump"]["notion-id"]];  }  for (var key in todoist_dict_mapping) {    if (todoist_dict_mapping[key]["todoist-section-id"] === section_id) {      return [        todoist_dict_mapping[key]["notion-map-type"] || todoist_dict_mapping["dump"]["notion-map-type"],        todoist_dict_mapping[key]["notion-id"] || todoist_dict_mapping["dump"]["notion-id"],      ];    }  }  return [todoist_dict_mapping["dump"]["notion-map-type"], todoist_dict_mapping["dump"]["notion-id"]];}function convertDateObject(due) {  function convertToISOWithOffset(datetimeStr, timezoneStr) {    const date = new Date(datetimeStr);    const [, sign, hours, minutes] = timezoneStr.match(/GMT ([+-])(\d{1,2}):(\d{2})/);    date.setUTCMinutes(date.getUTCMinutes() + (parseInt(hours) * 60 + parseInt(minutes)) * (sign === "+" ? 1 : -1));    return date.toISOString().split(".")[0]      + `${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;  }  const formatDate = (date, datetime, timezone) => {    let isoString = datetime ? datetime : date;    if (timezone && timezone.startsWith("GMT") && timezone.length > 3) {      return convertToISOWithOffset(datetime, timezone);    } else {      return isoString;    }  };  return {    start: due ? formatDate(due.date, due.datetime, due.timezone) : new Date().toISOString(),    end: null,    time_zone: due && due.datetime && due.timezone && due.timezone.startsWith("GMT") && due.timezone.length > 3      ? null      : (due && due.datetime && due.timezone ? due.timezone : "America/Los_Angeles"),  };}async function addCalloutToNotionPage(page_id, content, date) {  console.log(JSON.stringify(date));  const response = await notion.blocks.children.append({    block_id: page_id,    children: [{      "callout": {        "rich_text": [{          "type": "mention",          "mention": {            "type": "date",            "date": date,          },        }],        "icon": {          "type": "external",          "external": {            "url": "https://www.notion.so/icons/circle-dot_lightgray.svg",          },        },        "children": [{          "paragraph": {            "rich_text": [{              "text": {                "content": content,              },            }],          },        }],      },    }],  });  console.log(JSON.stringify(response));}async function addPageToNotionDatabse(database_id, content) {  const response = await notion.pages.create({    "parent": {      "type": "database_id",      "database_id": database_id,    },    "properties": {      "Name": {        "title": [{          "text": {            "content": content,          },        }],      },    },  });}export default async function(interval: Interval) {  var tasks = await todoistapi.getTasks({    projectId: add_to_notion_todoist_project_id,  });  for (const task of tasks) {    console.log(task);    const [mappedNotionType, mappedNotionId] = getNotionId(task.sectionId);    if (mappedNotionId)    {      if (mappedNotionType == "page" && mappedNotionId) {        addCalloutToNotionPage(mappedNotionId, task.content, convertDateObject(task.due));      }      else if (mappedNotionType == "database" && mappedNotionId) {        addPageToNotionDatabse(mappedNotionId, task.content);      }      todoistapi.deleteTask(task.id);    }  }}

Remember this code is in format of val town and hence the weird imports. You would need to switch that to require probably (I ain’t good at JS)

Code in case you want to host somewhere else

import process from "node:process";import { TodoistApi } from "npm:@doist/todoist-api-typescript";import { Client } from "npm:@notionhq/client";const TODOIST_API_KEY = process.env.TODOIST_API_KEY;const todoistapi = new TodoistApi(TODOIST_API_KEY);const NOTION_API_KEY = process.env.NOTION_API_KEY;const notion = new Client({  auth: NOTION_API_KEY,});var add_to_notion_todoist_project_id = "PROJECT_ID_HERE";var todoist_dict_mapping = {  "habit": {    "todoist-section-id": "SECTION_ID_HERE",    "notion-map-type": "page",    "notion-id": "PAGE_ID_HERE",  },  "papers": {    "todoist-section-id": "SECTION_ID_HERE",    "notion-map-type": "database",    "notion-id": "DB_ID_HERE",  },};function getNotionId(section_id) {  if (!section_id) {    return [todoist_dict_mapping["dump"]["notion-map-type"], todoist_dict_mapping["dump"]["notion-id"]];  }  for (var key in todoist_dict_mapping) {    if (todoist_dict_mapping[key]["todoist-section-id"] === section_id) {      return [        todoist_dict_mapping[key]["notion-map-type"] || todoist_dict_mapping["dump"]["notion-map-type"],        todoist_dict_mapping[key]["notion-id"] || todoist_dict_mapping["dump"]["notion-id"],      ];    }  }  return [todoist_dict_mapping["dump"]["notion-map-type"], todoist_dict_mapping["dump"]["notion-id"]];}function convertDateObject(due) {  function convertToISOWithOffset(datetimeStr, timezoneStr) {    const date = new Date(datetimeStr);    const [, sign, hours, minutes] = timezoneStr.match(/GMT ([+-])(\d{1,2}):(\d{2})/);    date.setUTCMinutes(date.getUTCMinutes() + (parseInt(hours) * 60 + parseInt(minutes)) * (sign === "+" ? 1 : -1));    return date.toISOString().split(".")[0]      + `${sign}${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}`;  }  const formatDate = (date, datetime, timezone) => {    let isoString = datetime ? datetime : date;    if (timezone && timezone.startsWith("GMT") && timezone.length > 3) {      return convertToISOWithOffset(datetime, timezone);    } else {      return isoString;    }  };  return {    start: due ? formatDate(due.date, due.datetime, due.timezone) : new Date().toISOString(),    end: null,    time_zone: due && due.datetime && due.timezone && due.timezone.startsWith("GMT") && due.timezone.length > 3      ? null      : (due && due.datetime && due.timezone ? due.timezone : "America/Los_Angeles"),  };}async function addCalloutToNotionPage(page_id, content, date) {  console.log(JSON.stringify(date));  const response = await notion.blocks.children.append({    block_id: page_id,    children: [{      "callout": {        "rich_text": [{          "type": "mention",          "mention": {            "type": "date",            "date": date,          },        }],        "icon": {          "type": "external",          "external": {            "url": "https://www.notion.so/icons/circle-dot_lightgray.svg",          },        },        "children": [{          "paragraph": {            "rich_text": [{              "text": {                "content": content,              },            }],          },        }],      },    }],  });  console.log(JSON.stringify(response));}async function addPageToNotionDatabse(database_id, content) {  const response = await notion.pages.create({    "parent": {      "type": "database_id",      "database_id": database_id,    },    "properties": {      "Name": {        "title": [{          "text": {            "content": content,          },        }],      },    },  });}export default async function(interval: Interval) {  var tasks = await todoistapi.getTasks({    projectId: add_to_notion_todoist_project_id,  });  for (const task of tasks) {    console.log(task);    const [mappedNotionType, mappedNotionId] = getNotionId(task.sectionId);    if (mappedNotionId)    {      if (mappedNotionType == "page" && mappedNotionId) {        addCalloutToNotionPage(mappedNotionId, task.content, convertDateObject(task.due));      }      else if (mappedNotionType == "database" && mappedNotionId) {        addPageToNotionDatabse(mappedNotionId, task.content);      }      todoistapi.deleteTask(task.id);    }  }}

Remember this code is in format of val town and hence the weird imports. You would need to switch that to require probably (I ain’t good at JS)

sample2.html Download

Sudip Pokhrel

Title but no excerpt or tags works

Test Page That Has Such A long Title For Short Term Testing

Table

h1

h2

h11

Introducing Webtrotion

New Features and Changelog

Acknowledgements

Why Webtrotion

Why Notion and Astro

Key Features

Demo

Quick start

Notion Setup

Github Setup

Preview

Notion Properties

Local Run

Extra configuration options

License

Notes

Supported blocks

Heading 1

Heading 2

Heading 3

Toggleable Heading 1

Toggleable Heading 2

Toggleable Heading 3

Paragraph

Color Test

Bulleted List

Numbered List

To Do

What if there is suddenly a heading?

Column List

Columns inside columns

Divider

Callout

Code

CodePen Embed

Code with Mermaid diagram

Trying HTML injection

Trying HTML rendering

Quote

Equation

Table

File

Toggle

Link to page

Synced Block

Synced block from a different page

New Features and Changelog

All Mentions

Dates

Linked Blocks and Pages

Image

Audio

Link Preview & Bookmark

Other Embeds

Twitter

Spotify

tldraw

Raindrop

YouTube

Tiktok

Instagram

Maps

Loom

Direct Uploaded Video

Known stuff that is not supported/has bugs

Lorem ipsum dolor sit amet 我爱你 with 愛してます

What if there is `suddenly` a heading?