OuterMeasure Website

This project was written in Next.js, project bootstrapped with create-next-app.

Getting Started

The articles data is pulled from Notion via Notion Integrations. As of this writing, an internal integration is used.

Open https://www.notion.so/my-integrations with your browser.
Login to your account
Click on "Create new integration"
Give your integration a name.
You do not have to specify a logo.
Under "Associated workspace" make sure you select the workspace within which your pages exist.
The website only reads the data from Notion. Therefore, unselect "Read content" and "Update content" in "Content Capabilities" section.
Leave "Comment Capabilities" empty.
Under "User Capabilities", select "No user information".
Click on Submit. This will create an internal integration on Notion and redirect you to "Review and edit integration" screen.
Copy the "Internal Integration Token". This is basically the API key that will be passed to Notion.
Go back to your workspace and create a "root" page.
You need to now link the "root" page with the Notion integration that was created earlier. You can do this by opening the page and clicking on the "..." button on the top right corner. Then Add connections > Search <YOUR_INTEGRATION_NAME>.
Now create subpages under the "root" page that you want to view on the website.
Copy the page ID from the URL of your browser. The page ID is a 36 alphanumeric segement at the end of the URL.
In your local repository, create ".env.local" in the repo root with the following entries:

NOTION_API_KEY=...
ROOT_PAGE_ID=...

All the articles are located at http://localhost:3000/articles/<slug>. You can see the output of the NextJS server to see all the slugs that were loaded.

Run the following commands to start the dev server:

yarn install
yarn dev

Open http://localhost:3000 with your browser to see the website.