Evandro Fonseca Junior
318a764190
Projetos sobem sobre o palco do hero e o celular tem hero de uma tela sem mergulho; passagens com animation-timeline em CSS, sem GSAP nem motion; troca da vitrine sem texto duplicado; moldura de celular só com pôster e scrub reencodado em 960 px (9,4 para 5,2 MB); 3D monta na primeira interação e para quando parado; transição entre páginas do mesmo segmento; foco em anel duplo; texto de 15 px no celular; código morto removido.
31 lines
1.8 KiB
TypeScript
31 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import { ViewTransition } from "react";
|
|
|
|
/**
|
|
* 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.
|
|
*
|
|
* 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();
|
|
return (
|
|
<ViewTransition key={pathname} name="page" update="none">
|
|
{children}
|
|
</ViewTransition>
|
|
);
|
|
}
|