We probably already have a few components for use in MDX articles (things like BlockQuote, Callout, Checklist etc).
Add some more that we know we'll need, probably based on those available in Notion. For example...
Sticky - A sticky note, modelled on those in Figma
Grid - A simple grid which can lay out sticky notes (or videos etc) in 2 or 3 columns.
FurtherReading - A callout which contains one or more links to other resources
These are simple, non-interactive Astro components which just need HTML structure and styling.
Embeds / Enriched External Links
There is another set of components which need to get data from elsewhere. These are
[ ] #8
[ ] #9
[ ] #10
[x] #11
[x] #12
[ ] #13
[ ] #14
For these, we have a few options...
For stuff like Tweets and Youtube videos we can just take a URL and generate the normal embed code. This means they'll render in iFrames and we can't really control the styling much. But it's simple.
For the other stuff we ned to make some requests to get the data we need to "unfurl". We could either do this at build time and generate static code, or ship JS to do the work client-side. The latter has the advantage that it will always show an up-to-date title/cover image etc.
Imagine we want inline links to Notion pages like this:
Which we use like this:
This is an inline link to <Notion url="PUBLICNOTIONURL"></Notion>.
Our Astro component would...
Statically render a placeholder icon and placeholder text like "Notion Page".
If the Notion component has text children like a normal <a>, render that instead of the placeholder.
On page load, hit the URL with a tool like Unfirl to get the title and emoji.
Replace the placeholders with the title and emoji.
Downsides to this
It's more JS for the client to download (especially if we include a lib like unfurl)
Pages with lots of these will make lots of requests. Caching might be hard?
For inline elements, changing titles etc will cause reflow.
We probably already have a few components for use in MDX articles (things like
BlockQuote,Callout,Checklistetc).Add some more that we know we'll need, probably based on those available in Notion. For example...
These are simple, non-interactive Astro components which just need HTML structure and styling.
Embeds / Enriched External Links
There is another set of components which need to get data from elsewhere. These are
For these, we have a few options...
For stuff like Tweets and Youtube videos we can just take a URL and generate the normal embed code. This means they'll render in iFrames and we can't really control the styling much. But it's simple.
For the other stuff we ned to make some requests to get the data we need to "unfurl". We could either do this at build time and generate static code, or ship JS to do the work client-side. The latter has the advantage that it will always show an up-to-date title/cover image etc.
Imagine we want inline links to Notion pages like this:
Which we use like this:
Our Astro component would...
Notioncomponent has text children like a normal<a>, render that instead of the placeholder.Downsides to this
Potentially Useful Libraries