Hamilton Wiki on Notion

Hamilton Wiki on Notion

Shared: Sep 22, 2020

πŸŒƒ The Story of Tonight

I don't have to tell you how incredible the musical Hamilton is. If you haven't seen it yet, you should watch this masterpiece of musical theatre, now...don't wait for it, here.

To my shame, I lived in New York through its debut and original cast run but my freshman brain could not comprehend spending over $1000 on a ticket. I don't regret much but that's definitely a stinger. Tangent but I want to be in a financial position where I'll never have to miss out on a historic once in a lifetime performance due to my financial situation.

Anyway, after watching the recording of the show in July and listening to the soundtrack, without exaggeration, every single day, I decided to combine the show's rich lore with my other obsession: Notion.

Fast forward, three tweets, 30ish hours of work, and Luisa and I put together...πŸ₯πŸ₯πŸ₯

πŸšͺ The Room Where It Happened

Notion is the the perfect tool for project or business documentation, and creating this wiki was a joy. The "everything is a block" philosophy and flexibility of "linked database views" allowed to create a clean, detailed and powerful website. Without a line, of course. Here's how it works.

🏠Homepage

At the very top there is a navigation bar that is just a text block where the individual words are hyperlinked to the block link within the page. When hyperlinking a text, whether it's a header or quote, you can just select the word and paste the link.

image

The sections after this are variations of columnized linked database view, quote blocks and text. Each view is filtered to show specific content. Sometimes, it's easy to do, like with "Act I" section there is only one filter that uses the "sequence" property. In other cases, like "media" we filtered by the "media type" tag (simple) and added a rollup filter (not simple). The latter is created based on the relation property between the Media and Tracklist databases; once the relation exists, a rollup looks up properties from the related record.

image

image

The rest of the page is more of the same. The Twitter feed embed is made with Apption and the section headings are just images that I made in Figma:

🎡 Track Page

I really enjoyed creating the individual track "dashboards." Each track contains eight block types:

  1. Embed: Spotify link embedded that shows the track's 30 second highlight
  2. H3: Section headers with an emoji
  3. Text: Lyrics enriched with backlinks to characters and references
  4. Quote: brief description of the events taking place in the song
  5. Linked Database View List (2): the relevant cast members and leitmotifs
  6. Linked Database View Gallery (2): the relevant media and references
  7. Divider: to divide πŸ˜‚
  8. Callout (3): the previous, home, next buttons for navigation

image
image

The secret behind making these pages beautifully consistent is templates . It's super duper important to settle on a template with all the settings, from font to layout, more less set on. We didn't skip that step but found ourselves going back to pages and adding components to each page after creation. Don't do that πŸ™ƒ

Making #6 Gallery Views was a bit of a pain because the thumbnail that you can be generated from three options: cover photo, page content (first visual), specific media property. It's good a idea to keep properties at a minimum, so the last option is out. I don't like to have a "pointless" image in the page (option two), so that why I opt to plug the image into the cover photo slot. Thankfully, a handy extension called Save To Notion, allows to scrape the image from genius.com pages.

In #3 I really liked taking advantage of Notion's new bi-directional linking feature. In the lyrics for each track, each character is linked to their respective page. This enables the visitor to surf and browse around database records seamlessly (personally, that's the way to use Notion).

image

image

For a while I was confused by Lin-Manuel's Miranda's choice to cast four people to play eight characters but having the links visualized in front me, got my brain understanding the parallelism between the characters. I officially spend too much time in Notion...

image

πŸ’Ώ Databases

One thing I learned from my Notion work with business clients is to hide the complexity of a Notion workspace behind functional and simple to edit dashboards. That's why we're getting to the databases or the foundations of the Hamilton Wiki last.

There's actually not much to say anyway, the wiki is built on these six databases and in across the whole website you're seeing linked views of these databases.

One of the most magical Notion features is this ability to take overwhelming spreadsheets or lists of data and creating digestible and actionable "portals."

image

☝️One Last Time

That's what I thought when once again editing the Tracklist template (it was not the last time). And that's what I'm thinking as I post this but, all in all, creating a wiki for a show or this "Hamilverse" was a super fun activity.

I'm feeling kinda down to do it for my other passions like Catan and Logic's music. If that sounds like something you wanna help on with, message me on Twitter or email me (tem@optemization)!

Bye and have a great rest of ya week πŸ‘‹

πŸ’Œ You Will Never Be Satisfied but Subscribe

About β€’ Clients β€’ Projects β€’ Newsletter β€’ Founder β€’Β Inquire