My fuckup with Notion + GatsbyJS

It is 2020, the HCI course just started. We have the assignment of documenting our course jouney on a portfolio website.

Sure, putting content on a website can be achieved by using popular CMS systems such as WordPress, Joomla or Drupal in the earlier days. I am looking back to a stack of WordPress websites I built from 2014 to 2020.

But there are tons of new web standards out there - Isn't WordPress a bit overkill for the assignment?

I said no - not WordPress again this time. Nor did I want to either recycle one of my old portfolios built from scratch in HTML + CSS or build another one from scratch just to run through the same process yet another time.

What I was looking for was a steep learning curve in using state of the art web technologies such as PWAs (Progressive Web Apps) and JavaScript to exchange content without reloading the entire page, cache elements offline for faster loading etc.

But.. where to start?

Some friends are using WIX to build their websites. In German "wix / wichs(en)" describes the act of male masturbation. I see a parallel line in that, as pages can be created quick and dirty - but are not really customisable. Some other friends use already more advanced tools like WebFlow. But whatever tool they might be using - I would rather call them platforms. Platforms run by companies with interests, customer lock-in. And this is, for a person like me who strives for independence and decentralisation, of course, rather dangerous or at least undesirable :D

Are Flat-File CMSs what I want?

Leaving a platform after so many years and opening up for different approaches is certainly not easy, but i wanted to do stay ahead in the game. After studying a while about flat-file CMS systems such as Grav or Bludit, which I have been using for a different project already, I concluded that they are just like WordPress - with the difference they do not require a Database.

GatsbyJS ticked them all

How do people build blogs in 2020?

During my research one thing in particular popped to my eyes: The market of CMSs is very cluttered but at the same time, platforms like WebFlow are trying to lock customers in.

However, there are big companies using different CMS systems simultaneously as migration processes from CMS to CMS are not always that smooth.

But how do they manage to put all these CMS systems under one roof? I found my personal answer in GatsbyJS. With GatsbyJS you can basically source content from different CMS systems and tell gatsby how to make it look like after all.

Where to source the content from?

There are different options to source content with GatsbyJS - there are headless CMS systems like Ghost, Contentful - but it is even possible to get content from WordPress.

Connecting OneNote to GatsbyJS

So I thought - wait, I am using OneNote to capture my course notes anyways - so why would I even want to manually copy them over to the WordPress editor . Can't there be a smooth way to use GatsbyJS fed by OneNote content?

Well, there is a OneNote API and some person seemed they achieved a text extraction from OneNote to GatsbyJS but besides the fact that Microsoft decided to not actively support that API further it didn't look that reliable to me as it only allowed extracting plain paragraph text without formatting or rich media such as photos, videos and embedded content

Sourcing from Private APIs

Skip to main content Gatsby allows you to pull data from headless CMSs, databases, SaaS services, public API, and your private APIs. From the Gatsby perspective, there is no difference between sourcing from a public or private API. The only difference is the availability of the API to Gatsby to query the data.

https://www.gatsbyjs.org/docs/sourcing-from-private-apis/

OneNote API overview - Microsoft Graph

OneNote is a digital notebook that lets customers track ideas and notes for home, school, or work, by typing, sketching, or voice, on the web, phone, tablet, or desktop. They can freely organize notes, switch devices and pick up where they left off, and collaborate on notes with others in real time.

https://docs.microsoft.com/en-us/graph/integrate-with-onenote

Notion looks more promising

Alongside OneNote, for some courses I tried using Notion, a tool that describes itself as the workspace for everything. Notes in markdown compatible format, Tables, Kanban boards, with linked references etc.

mayneyao/gatsby-source-notion-database

Load data from Notion's database [WIP]. Contribute to mayneyao/gatsby-source-notion-database development by creating an account on GitHub.

https://github.com/mayneyao/gatsby-source-notion-database

Preliminary conclusion

Although I made some process, the overall maturity level of this approach of using GatsbyJS to source content from Notion.so is still quite low.

During the the course, I managed to cover the following aspects:

Paragraph text

Headlines

Images

As during the course I also got to know Notion as tool and wanted to leverage the full potential regarding formatting, special layouts, this was not really possible to transfer 1:1 to GatsbyJS - at least not in the given scope of time.

However, this small research excursion showed me, that there is indeed another world besides WordPress, WebFlow, WIX and websites completely built from scratch. I will defiantly look deeper into the topic as I am planning to learn more about TypeScript, where GatsbyJS is mostly based on.