mirror of
https://github.com/hanzoai/zod.git
synced 2026-09-24 17:04:49 +00:00
86da833722
* fix(docs): prevent FOUC on website homepage logo - Add HeroLogo component with loading states and skeleton placeholder - Implement image preloading in layout for critical resources - Add CSS optimizations to prevent flash of unstyled content - Replace direct img tags with optimized Next.js Image component - Ensures consistent 170px height during logo loading Fixes #4606 * style: fix formatting in hero-logo component * fix: remove unused ReactNode import to resolve lint error * fix: apply Biome formatting to hero-logo component - Fixed import order in hero-logo.tsx to comply with project linting rules - Ran 'pnpm format' to auto-fix formatting issues * refactor: use size-20 instead of w-20 h-20 for better Tailwind CSS optimization - Apply code review feedback to minify sizing classes - Use semantic size-* utility instead of separate width/height classes * fix(docs): resolve FOUC issue with Zod logo - Optimize HeroLogo component with smooth fade-in transitions - Remove skeleton placeholder for cleaner UX experience - Add loading state management with React useState - Set priority image loading to prevent flash - Clean up global CSS by removing unnecessary FOUC styles - Maintain fixed 170px height to prevent layout shifts - Increase transition duration to 500ms for smoother effect * fix(docs): prevent layout shift in aside logo - Create SidebarLogo component with Next.js Image optimization - Add proper sizing and loading states to prevent CLS - Update layout to use optimized component - Add preload for Zod 3 SVG logo Fixes layout shift reported in PR feedback for md+ screen sizes * Update packages/docs/components/sidebar-logo.tsx Co-authored-by: ByteEVM <[email protected]> * Update packages/docs/components/sidebar-logo.tsx Co-authored-by: ByteEVM <[email protected]> * fix(docs): eliminate CLS on aside logo for md+ screens - Fix height container with md:h-7 to prevent layout shift - Use LogoWhite for dark theme instead of Logo - Remove redundant md:w-8 classes for cleaner code - Address layout shift issue identified in PR review * Fix sizing --------- Co-authored-by: ByteEVM <[email protected]> Co-authored-by: Colin McDonnell <[email protected]>
54 lines
1.6 KiB
TypeScript
54 lines
1.6 KiB
TypeScript
import { InkeepBubble } from "@/components/inkeep-bubble";
|
|
import InkeepSearchBox from "@/components/inkeep-search";
|
|
|
|
import "./global.css";
|
|
import Scroller from "@/components/scroller";
|
|
import { Analytics } from "@vercel/analytics/react";
|
|
import { Banner } from "fumadocs-ui/components/banner";
|
|
import { RootProvider } from "fumadocs-ui/provider";
|
|
import { Inter } from "next/font/google";
|
|
import { type ReactNode, Suspense } from "react";
|
|
|
|
const inter = Inter({
|
|
subsets: ["latin"],
|
|
});
|
|
|
|
export default function Layout({ children }: { children: ReactNode }) {
|
|
return (
|
|
<html lang="en" className={inter.className} suppressHydrationWarning>
|
|
<head>
|
|
{/* Preload critical images to prevent FOUC */}
|
|
<link rel="preload" as="image" href="/logo/logo-glow.png" />
|
|
<link rel="preload" as="image" href="/logo/logo.png" />
|
|
<link
|
|
rel="preload"
|
|
as="image"
|
|
href="https://raw.githubusercontent.com/colinhacks/zod/3782fe29920c311984004c350b9fefaf0ae4c54a/logo.svg"
|
|
/>
|
|
</head>
|
|
<body className="flex flex-col min-h-screen">
|
|
<Banner id="zod4">
|
|
💎 Zod 4 is now stable! <span> </span>
|
|
<a className="underline" href="/v4">
|
|
Read the announcement.
|
|
</a>
|
|
</Banner>
|
|
<InkeepBubble />
|
|
<Analytics />
|
|
<RootProvider
|
|
search={{
|
|
enabled: true,
|
|
SearchDialog: InkeepSearchBox,
|
|
}}
|
|
theme={{}}
|
|
>
|
|
{children}
|
|
</RootProvider>
|
|
<Suspense fallback={null}>
|
|
<Scroller />
|
|
</Suspense>
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|