- For running this very blog
- Inspired by
Embed GitHub and
- Alternative:
- Cloning Embed GitHub 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?
- Q: Hm, how does this differ from Vite's behavior?
- Intermediate plan: Try migrating Embed GitHub 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 Embed GitHub — 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
‣
Index.vue (source)‣
server.mjs (built)- 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
‣
- But lacking: Title, Emoji, Formatting as whole notion page
- Want there to be 1:1 correlation, so WYSIWYG
‣
fullPage element. Success!- 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