Demo Astro Notion Setup

December 3, 2023

test [@sweig42] test footnote test

this is a start of child block based Current page block link! footnote Introducing Webtrotion Oct 24, 2025

why do this at all then? why it be a child-block. because see this child-block has block children and can be mixed media. o

so this footnote is not just multiline, but multi-block.

all of the children of a footnote content block are part of footnote though

it can have unrelated children too which are not footnotes! they all will be after the footnote block set though [@steward03] says!

ttt popover with citation on another page

Testing page link after copied

Testing block link on a different page after copied

Testing block link on same page after copied

external website page link

same workspace page link not included here but public

November 28, 2023

Oct 28, 2025: Comprehensive Citation and Footnote System. Webtrotion now has a complete citation and footnote system. You can now add citations from BibTeX files and have them automatically formatted. Footnotes are also supported, with popovers for easy reading.

Oct 25, 2025: Enhanced OG Images. OG images for tags and collections now include descriptions. A new automated workflow has been added to clean up template-specific files when you create a new repository from the template or pull updates from it. This keeps your project clean and free of unnecessary files.

Sep 11, 2025: Search from Query Parameters and UI improvements. You can now pre-fill the search box with a query parameter in the URL. The UI for the tags page has also been updated for a cleaner look.

Sep 10, 2025: Cache Recovery Workflow. A new GitHub Actions workflow has been added to allow you to recover your cache.

Sep 4, 2025: Upgraded Notion API. The project has been updated to use a newer version of the Notion API, ensuring better stability and compatibility with future Notion features.

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> <!-- iframe --> and for injecting it directly into the body is now <!DOCTYPE html> <!-- inject -->. 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 4, 2023: Add support for recent posts on homepage

Dec 2, 2023: Added interlinked content section

Nov 29, 2023: Caching

Webtrotion is a extensively configurable, simple to install website builder, 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:

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#use npm run build-local to reflect code changes#use npm run preview to see the final state

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.

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

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. Just specify any Google font name (no URLs needed starting version 2.0), and set the font weight if desired (default is 400).

November 25, 2023

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

July 25, 2023

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);    }  }}