<div className="flex h-screen overflow-hidden">
  <AppSidebar />
  <main className="flex-1 overflow-y-auto">{children}</main>
</div>

Isso dá uma sensação de aplicação, e quebra duas coisas que normalmente funcionam de graça.

Títulos param atrás do header#

Clicar em um link de âncora rola o título até o topo do container, exatamente onde fica o header fixo de 4rem. O título some atrás dele.

scroll-margin-top resolve, e o valor precisa considerar a altura do header:

.prose h2,
.prose h3 {
  scroll-margin-top: 5rem;
}

A propriedade vai no elemento de destino, não no container. Isso é contraintuitivo na primeira vez: você quer mexer no que rola, mas quem precisa do recuo é quem chega.

IntersectionObserver observa a janela por padrão#

O segundo tropeço: para destacar a seção ativa em um índice lateral, o IntersectionObserver precisa saber qual é o container de scroll. O padrão é o viewport, e com o scroll no main nenhum título nunca entra ou sai de vista do ponto de vista dele.

const observer = new IntersectionObserver(callback, {
  root: document.querySelector("main"),
  rootMargin: "-80px 0px -70% 0px",
});

Sem o root, o callback dispara uma vez no carregamento e nunca mais.

template.replace("<!--app-html-->", html);

Funciona na maioria dos casos, e falha de um jeito difícil de rastrear quando o HTML contém certos caracteres.

O detalhe: mesmo quando o padrão é uma string comum, a substituição passa pelo processamento de padrões. Sequências como $&, $1, $` e $' têm significado especial:

"alvo".replace("alvo", "a$&b");
// "aalvob"  -- e nao "a$&b"

Em HTML real isso aparece em lugar nenhum óbvio, até alguém escrever um artigo sobre expressões regulares e $& ir junto no texto. Aí um pedaço do documento simplesmente se duplica ou desaparece.

A correção é usar uma função como substituição, porque o retorno dela é inserido literalmente:

template.replace("<!--app-html-->", () => html);

Vale para qualquer conteúdo que você não controla: HTML renderizado, texto de usuário, JSON serializado. Se o valor vem de fora, use função.