Evandro Fonseca Junior
6ac87824f3
Legenda do mergulho até Projetos cobrir a cena; transição de página sem blur e com fundo escuro; foco no conteúdo ao trocar de página; listas com marcador e dois pesos de título; vídeos da SEV e da SC Plus regravados sem quadros brancos; scrub a 12-15 fps (-30%); vitrine com uma parada de Tab e setas, contador no celular e CSS sob demanda; âncoras num módulo só (fragment-nav); FramePulse com setInterval; CSS morto removido.
34 lines
2.0 KiB
TypeScript
34 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { ViewTransition } from "react";
|
|
import { useFocusOnNavigation } from "@/app/hooks/useFocusOnNavigation";
|
|
|
|
/**
|
|
* O conteúdo leva o nome "page" e anima com page-out/page-in (globals.css) a cada troca de página.
|
|
* key={pathname}: o template da raiz só remonta quando muda o primeiro segmento da rota (de /cases para
|
|
* /cases/um-projeto ele continua o mesmo), e sem a chave a troca seria uma atualização no lugar, que
|
|
* update="none" corta. Com a chave, a página que sai e a que entra formam o par que o React anima.
|
|
* update="none": a hidratação e a revelação de Suspense também são transições do React e animariam a página
|
|
* inteira na chegada (a tela piscava duas vezes); só a troca de página anima.
|
|
* Depois de cada troca o foco vai para #main-content, sem rolar (useFocusOnNavigation); a carga inicial não mexe no foco.
|
|
*
|
|
* Só no `next dev`, algumas rotas (/servicos/engenharia-de-software, /servicos/arquitetura-de-software e
|
|
* /servicos/integracao-hardware-software-iot, às vezes o 404) mostram no console "Each child in a list should have a
|
|
* unique key prop. Check the render method of OuterLayoutRouter". Não vem da `key` daqui nem do conteúdo da página
|
|
* (uma página vazia também mostra): sem template.tsx o aviso some, e com qualquer template.tsx (testado com um
|
|
* template de servidor e sem `key`) o servidor de desenvolvimento embrulha o template em
|
|
* um nó do explorador de segmentos, e, quando o React o serializa como referência preguiçosa (`$L`) dentro da lista
|
|
* [estilos, scripts, template] do TemplateContext, a conferência de keys o vê sem chave. O embrulho só existe com
|
|
* `__NEXT_DEV_SERVER` e o aviso só existe no React de desenvolvimento: em produção não acontece.
|
|
*/
|
|
export default function Template({ children }: { children: React.ReactNode }) {
|
|
const pathname = usePathname();
|
|
useFocusOnNavigation(pathname);
|
|
return (
|
|
<ViewTransition key={pathname} name="page" update="none">
|
|
{children}
|
|
</ViewTransition>
|
|
);
|
|
}
|