Here: this website

This website is an experiment using Notion as a CMS. This allows me to have a much better editing experience, which should encourage me to write more content and keep the content more up to date.

The process for updating content is easy as editing in Notion and triggering a rebuild/redeploy (at least in theory).

The site is built using Astro, which statically generates the site and helps me minimize the amount of JavaScript that’s sent to the client. Fun fact: everything on this website should work without JavaScript.

You can find the source code to this site on GitHub. Feel free to file issues if you find a bug.

Below (the divider) is what I used to test the Notion parser that I “wrote” (copied a lot of code from existing solutions) to convert Notion blocks to Markdown, which is then rendered using Astro’s built-in support for Markdown (underneath the hood, it uses remark-rehype).

Milestones

Some tasks that I’m proud of completing while building this website:

• Wrote a collection of scripts to parse Notion blocks to Markdown + made sure everything was accessible!
• Attempted to make the website SEO friendly (it still ranks really low in searches rip)
• Iterated a ton on the navigation bar to make it work without JavaScript (and spent a lot of time reverse engineering apple.com’s nav bar)
• Migrated content architecture to local MDX files

Tasks

• [dev] make parsing more robust
  • accessibility
  • support empty lines
  • more predictable formatting - tests should be easy to write
  • support callouts
• [dev] fix image optimization - use getPicture
• [dev] use satori for social media cards
• [design] use more semantic tokens for spacing (sm, md, lg, etc.)

✅ done

• [design] do something fun with gradients or colors and transparency?? on the homepage/elsewhere
• [design] fix font and line height to be more readable
• [dev] improve SEO - still not showing up in top results on google
  • https://developers.google.com/search/docs/crawling-indexing/robots/create-robots-txt
• [dev] optimize updating content - check page update date (part of mdx migration)
• [design] add syntax highlighting (part of mdx migration)
• [design] finalize font selection - maybe use a serif
• [design] gutters (on mobile) for readability + better polish
• [content] add more content to website
  • add blog :)
• [dev] download and use local mdx

heading 1

heading 2

heading 3

rich text testing bold text italic text underline text strikethrough text all four styles

rainbow text

default

colored link text but this is also colored text

colorful list text:

• red
• pink
• purple
• blue
• green but override to be red
• yellow
• orange
• brown
• gray
• default

interesting edge case:

might mess with line breaks

and also,

ok but what about if there’s a less than symbol: <3? or greater than: >3?

paragraph text

• unorganized list
• another item
• another item
  • nested item

1. organized list
2. another item
   1. nested item

quote

• nested item in quote

1. hello world
2. hello world 2

inline code block this is like code thingy

function parse() {
	return "hello world";
}

E = mc^2

<span class="!bg-gray-200">hello
hello
hello</span>

tables

without column or row headers

with column and row headers

links

testing links in the paragraph. (this stuff in the parentheses) should link to robinhood.com (as should this link).

todo list

• work on this website
• finish this website
  • no actually though

multiple images and files below

http://google.com

https://soundcloud.com/herbbeatz/moving?in=kungpaogao/sets/corncorncorn

https://www.google.com/maps/place/Breakneck+Hill+Conservation+Land,+Southborough,+MA+01772/@42.2724994,-71.5345255,14z/data=!4m5!3m4!1s0x89e38a6ff7c803af:0x88e2e02613bc306f!8m2!3d42.2853249!4d-71.5145283