Notion and 11ty

Get a list of posts in a databse on Notion and parse it to the 11ty.

👉 Official Notion Developers site.
👉 11ty & Nunjucks

Follow Step 1 & Step 2 in this official tutorial. Note that, we don't use @notionhq/client, so you don't have to install it. Instead, install following packages,

Create an .env file on the project directory + add ".env" to .gitignore!

In your _data folder, create notion.js (or whatever you want).

⚠️

If you request the API within 1 day (duration: "1d" in the above codes), it keeps using the .cache and you may not see the newest changes from the API! In this case, you can remove .cache and try again!

Go to the official API site for more use cases.

☝

You can use Postman or any other API platform to try the queries from Notion API first.

An example of the returned json (before the line json = json.),

A return result will be stored in notion.json, you can use it in your template as {{ notion.json }}. Note that, the word "notion" is corresponding to the name of the file notion.js!

To show the list of titles from the returned json,

The result will be,

1const EleventyFetch = require("@11ty/eleventy-fetch"); 2require("dotenv").config(); 3const { get } = require("lodash"); 4 5module.exports = async function () { 6 let url = `https://api.notion.com/v1/databases/${process.env.NOTION_TEST_ID}/query`; 7 8 let json = await EleventyFetch(url, { 9 duration: "1d", 10 type: "json", 11 fetchOptions: { 12 method: "POST", 13 headers: { 14 Authorization: `Bearer ${process.env.NOTION_TOKEN}`, 15 "Notion-Version": `${process.env.NOTION_VERSION}`, 16 "Content-Type": "application/json", 17 }, 18 }, 19 }); 20 21 json = json.results.map((post) => ({ 22 title: get(post, 'properties.Name.title[0].text.content', 'Untitled'), 23 })); 24 25 return { 26 json, 27 }; 28};

1{ 2 "object": "list", 3 "results": [ 4 { 5 // other fields.... 6 "properties": { 7 // other fields.... 8 "Name": { 9 // other fields.... 10 "title": [ 11 { 12 // other fields.... 13 "text": { 14 "content": "Testing 1", 15 // other fields.... 16 }, 17 // other fields.... 18 } 19 ] 20 } 21 }, 22 "url": "<https://www.notion.so/url-of-testing-1>" 23 }, 24 { 25 // other fields.... 26 "properties": { 27 // other fields.... 28 "Name": { 29 // other fields.... 30 "title": [ 31 { 32 // other fields.... 33 "text": { 34 "content": "Testing 2", 35 // other fields.... 36 }, 37 // other fields.... 38 } 39 ] 40 } 41 }, 42 "url": "<https://www.notion.so/url-of-testing-2>" 43 }, 44 ], 45 "next_cursor": null, 46 "has_more": false, 47 "type": "page", 48 "page": {} 49}