designed & coded this animated Buy me a Coffee☕ button for my Notion + Next.js site template.
Rate it out of 10👇🏻

#buildinpublic

page mention preview👇🏻

page thumbnail 👇🏻

Day 32–34: Added inline mention blocks and their previews

- Previews include links, page mentions, files, images, PDFs, videos, and more.
- Mention text and previews now render exactly like @notion.com, but even better, and fully static in @nextjs.org!

Just one block left ✨

#notion #buildinpublic

Day 29, added Google Map embed in Notion-as-CMS Next.js portfolio + blog template

- you can embed official Google Maps embed urls in sites
- but direct Google Maps urls aren’t embeddable they need an API key, which users may not have
- so coded it to embed with or without a key

#buildinpublic

Day 27, added CodePen embed in my Notion-as-CMS Next.js portfolio + blog template

- got the @codepen.io url from the @notion.com api
- converted it to /embed/ format
- rendered via iframe with dynamic theme based on site
- codepen embed in dark/light mode

#buildinpublic #nextjs

Day 26, added Spotify🎧embed in my Notion-as-CMS Next.js portfolio + blog template

- got the Spotify url from the notion api
- converted to /embed/ format url
- dynamically rendered via iframe with height based on content type (track, album, artist, playlist)

#buildinpublic #notion #nextjs #spotify

Day 25, added PDF embed in my Notion-as-CMS Next.js portfolio+blog template

- got the pdf url from the notion api
- rendered in browser using react-pdf on client side
- for multiple-page pdfs only load first 2 pages, then load more on scroll for better performance like notion
#buildinpublic #notion

Day 22 to 24, added X Post embed in my Notion-as-CMS Nextjs portfolio+blog template

- I got the embedded tweet URL from the Notion API and extracted the post ID from it
- renders completely static on the server
- supports both dark and light themes
- uses react-tweet package

#buildinpublic #nextjs