🎁

vue-notion-x

For running this very blog
Inspired by and

Alternative:

Cloning and then modifying it to render nicer-looking emojis

Or maybe the emojis already look good enough on there?

Hackathon:

Main benefit: Learning more about Nuxtjs (why SSR?)

Overarching question: "I'm a Vue dev, why should I use Nuxt for my project?"

Guesses: Faster render times for pages? Better SEO?
Is it a tradeoff between dev happiness (Vue) vs user speed (Nuxt)?

Dev notes

[2:17pm] Installing Nuxt via https://v3.nuxtjs.org/getting-started/installation

Had to upgrade node on Windows from v16.5.0 to 16.13.0, ugh
[2:21] Cool, seems to be working and using Vite
[3:49] Hm startup time leaves something to be desired compared to pure Vite

Feels more like 10s than 1s. But refresh loop is fast anyways...

Playing around: Wow, so server.mjs is generated with the default code?

‣

Index.vue (source)

‣

server.mjs (built)

Q: Hm, how does this differ from Vite's behavior?

Intermediate plan: Try migrating to Nuxt3?

Q: How does vue-notion work?

First level: It's just a tree renderer, takes the Notion API response, and then converts it into the appropriate block vue component
See: https://github.com/janniks/vue-notion/blob/main/src/blocks/column.vue
Seems to be how React Notion X works too

How about collections?

[3:03] Getting distracted by blogging stuff. Taking a break, then back to "vue-notion on nuxt3", probably with MVP and then some copying.

[3:32] How to actually fetch data from Notion?

vue-notion claims to use — not the official Notion API?

Yeah, it seems to have its own cloudflare worker here
So does react-notion

react-notion-x uses... its own client library

But also based on the private Notion api (notion.so/api/v3/, open) vs the public Notion api (api.notion.so, requires registration?)

Risk: Notion changes their API and my site breaks

~~Get one basic Notion page rendering on Vue (1h)~~

Just using Vue3, no Nuxtsense (nuxt nonsense) for now

Test Notion Page

Front page of Austin's Blog is all collections... Maybe this exact page instead.
Changes:

Get rid of Vue-Fragment

Not needed in vue3!
Cutting Prism for now, otherwise have to install it as a peer dependency

‣

[4:09] It kinda works!

But lacking: Title, Emoji, Formatting as whole notion page

Want there to be 1:1 correlation, so WYSIWYG

‣

Derp. Just needed to add fullPage element. Success!

~~Migrate more of vue-notion to Nuxt3 (1h)~~

Turns out copy+pasting gets you all of it
But it's just Vue atm, if I understand correctly
It's also just a single page, doesn't do the whole linked, router things.

Render two pages using Nuxt3

Question: how should navigation work?

Idea: Going to an arbitrary page calls a specific Vue template to render the missing page

Probably how React-Notion-X does it. Yup: https://github.com/NotionX/react-notion-x/blob/master/example/pages/[pageId].tsx

Has a tree traversal to pregenerate all pages using SSG...

Q: Where is this generated to?

Note: should just clone React-Notion-X's client for the traversal stuff: https://github.com/NotionX/react-notion-x/tree/master/packages/notion-client

Idea: cleaning up notion URLs?

Copy over collections from react-notion-x (2h)

Alternative idea: Capture Notion pages as HTML, and serve that

Someone at Notion should just offer this as a service, they already have the renderer set up