Home shell

A home-style blog template with roaming sidenotes

Prototype layout that keeps the hero in the right rail before giving way to sidenotes.

This template borrows the homepage two-column feel: words on the left, a single, tall hero on the right The right column is powered by a new right-rail context so posts can claim the space.. As you scroll through the piece, the right rail swaps the hero for sidenotes Notes populate from the same <Sidenote /> components used in the standard Tufte layout., letting annotations live in the space that previously hosted the image.

Why this layout

The homepage grid already splits attention between story and visual. This post format keeps that contract but gives the image job security only until readers move deeper into the article A quick scroll triggers the switch; the hero fades and the sidenotes fade in.. The notes travel to the right rail instead of the left metadata rail so inline references still have breathing room.

Using the template

Swap your hero source and metadata at the top of the MDX, then wrap your prose in HomeBlogTemplate. The layout automatically:

  • Sends the hero to the root sidebar.
  • Keeps metadata wired into the existing rails.
  • Streams sidenotes over to the right column after the intro.

Continue writing as normal Because the template uses the same footnote provider, no new syntax is required.. The endnotes section from the default blog layout still renders beneath your article so readers can navigate however they like.