How to create a page in a workspace

[oudmane]

Hello @Devorein, I just found this project here, I realize it's a project in the working. I've read through your code trying to figure out how can I create a page in a workspace.
I only understood how to fetch things, but not creating.
Can you please, publish an example on how to create a page, then add a headline, text, image ?

[Devorein]

Absolutely, but make sure you've passed your token otherwise nishan will throw an error. There are two types of page you can create in a workspace one being a RootPage another being a RootCollectionViewPage just use createRootPage or createRootCollectionViewPage method on the obtained space.

Here's a brief description on what these two types of pages are:

RootPage

A regular page situated at the top level of a space, which can be viewed in the TOC on the left side. Since a page can contain any number of other types of blocks, you can do so in this type of page.

RooCollectionViewPage

A regular full page db situated at the top level of a space, which can also be viewed in the TOC on the left side. But unlike a page it cannot contain other types of blocks inside it only a full page db.

Creating headline

Both those methods takes in an argument where you can specify a lot of things one being the headline or the title of the page using this format

await space.createRootPage({
    properties:{
        title: [["Your headline here"]] // Please dont forget to use an array of array
    }
})

Creating text block

Everything is block in Notion, so in order to create a text block just use createContent or createContents on the obtained page object. But you can do all sorts of formatting provided by Nishan on those text blocks, using the inlineBlocks utils method.

import Nishan, {inlineText} from "../dist/Nishan"; // Sorry for that, will convert to a package asap

/* This is better than using multiple single text block creation as it consolidates all 
the api requests into one and sends them altogether */
await page.createContents([
	{
		type: 'text',
		properties: {
			title: inlineText('Javascript').yellow.bold.text
		}
	},
	{
		type: 'text',
		properties: {
			title: inlineText('Python').blue.bold.text
		}
	}
]);

// Or if you prefer to create a single text block

await page.createContent({
	type: 'text',
	properties: {
		title: inlineText('Node').teal.bold.text
	}
});

Image block

Unfortunately I'vent figured out how to upload any content to Nishan yet :( But you can use the url of an image instead

await page.createContent({
	type: "image",
	properties: {
		source: [[ "https://your-image.png" ]] // Please dont forget to use an array of array
	}
})

And thank you for the issue I just realized that it'd be better if the page and page content creation can be done in one method.
If you got any more questions or face any issues do let me know

[oudmane]

Thank you so much, your examples worked for Me

I have an other question, I managed to create a Table page using

space.createRootCollectionViewPage({
  properties: {
    title: [['Products']],
  },
  schema: [
    ["title", "title", {name:"Name"}],
    ["ref", "text", {name:"Reference"}],
    ["ean", "text", {name:"Ean"}],
    ["sku", "text", {name:"SKU"}]
  ],
  views: [
     {
      name: 'Table',
      type: 'table',
    }
  ],
})

How can add an other page as a row to this collection ?

[oudmane]

Thank you so much, your examples worked for Me

I have an other question, I managed to create a Table page using

space.createRootCollectionViewPage({
  properties: {
    title: [['Products']],
  },
  schema: [
    ["title", "title", {name:"Name"}],
    ["ref", "text", {name:"Reference"}],
    ["ean", "text", {name:"Ean"}],
    ["sku", "text", {name:"SKU"}]
  ],
  views: [
     {
      name: 'Table',
      type: 'table',
    }
  ],
})

How can add an other page as a row to this collection ?

I found collection.addRows function, I managed to do it with this

page.collection.addRows([
  {
    properties: {
      title: [['Product tile']],
      ref: [['123']],
      ean: [['93872987342']],
      sku: [['UV293874']]
    }
  }
])