pub fn Layout(ctx: zx.LayoutContext, children: zx.Component) zx.Component {
    const path = ctx.request.pathname;
    const description = "A full-stack web framework for Zig. Write declarative UI components using familiar JSX patterns, transpiled to efficient Zig code.";
    const title = "Ziex - Full-stack Web Framework for Zig";
    const site_url = zx.info.homepage;
    const keywords = "zig, zx, ziex, web framework, jsx, full-stack, ssr, ssg, wasm, components, server-side rendering, static site generation, zig web development, zig frameworks, zig tutorials, zig open source, zig web apps, zig SSR, zig SSG, zig WASM, zig cloud, zig hosting, zig deployment, zig frontend, zig backend, zig devtools, zig IDE, zig editor, zig playground, zig comparison, zig performance, zig reliability, zig security, zig async, zig concurrency, zig middleware, zig routing, zig template, zig spa, zig mpa, zig api, zig rest, zig graphql, zig docker, zig CI, zig CD, zig testing, zig lint, zig build, zig compile, zig package, zig module, zig dependency, zig version, zig release, zig changelog, zig community, zig forum, zig discord, zig github, zig git, zig code, zig software, zig examples, zig guide, zig docs, zig project, modern web, fast web, scalable web, open source web, developer tools, cloud hosting, web apps, frontend, backend";
    const js_href = std.fmt.allocPrint(ctx.arena, "/assets/docs.js?v={s}", .{zx.info.version}) catch unreachable;
    const needs_js = !std.mem.eql(u8, path, "/") and !std.mem.startsWith(u8, path, "/playground");

    if (std.mem.eql(u8, path, "/overview") or
        std.mem.eql(u8, path, "/time"))
    {
        return (
            <html lang="en" @allocator={ctx.arena}>
                <head>
                    <title>{title}</title>
                    <meta name="description" content={description} />
                </head>
                <body>
                    {children}
                </body>
            </html>
        );
    }

    if (std.mem.startsWith(u8, path, "/r/")) {
        return (<fragment @allocator={ctx.arena}>{children}</fragment>);
    }

    return (
        <html lang="en" @allocator={ctx.arena}>
            <head>
                <meta charset="UTF-8" />
                <meta name="viewport" content="width=device-width, initial-scale=1.0" />

                <title>{title}</title>
                <meta name="description" content={description} />

                <meta name="keywords" content={keywords} />
                <meta name="author" content="Nurul Huda" />
                <meta name="robots" content="index, follow" />
                <meta name="theme-color" content="#0055b3" />

                <link rel="canonical" href={site_url} />
                <link rel="icon" href="/favicon.ico" type="image/x-icon" />

                {if (needs_js) (<link rel="preload" href={js_href} as="script" />)}

                <meta property="og:type" content="website" />
                <meta property="og:title" content={title} />
                <meta property="og:description" content={description} />
                <meta property="og:url" content={site_url} />
                <meta property="og:site_name" content="ZX" />
                <meta property="og:locale" content="en_US" />

                <meta name="twitter:card" content="summary_large_image" />
                <meta name="twitter:title" content={title} />
                <meta name="twitter:description" content={description} />
                <meta name="twitter:creator" content="@aspect_dev" />
                <meta property="og:title" content="Ziex - Zig Web Framework" />
                <meta property="og:description" content="Ziex is a modern web framework for Zig. Build fast, reliable, and scalable web applications with Zig and ziex." />
                <meta property="og:type" content="website" />
                <meta property="og:url" content="https://ziex.dev" />
                <meta property="og:image" content="https://ziex.dev/assets/ziex-og-image.png" />
                <script type="application/ld+json">
                    {std.json.Stringify.valueAlloc(ctx.arena,.{
                    .context = "https://schema.org",
                    .@"type" = "WebSite",
                    .name = "Ziex - Zig Web Framework",
                    .url = "https://ziex.dev",
                    .description = "Ziex is a modern web framework for Zig. Build fast, reliable, and scalable web applications with Zig and ziex.",
                    .keywords = keywords,
                    }, .{}) catch null}
                </script>

                <GtmHead />

                <style @escaping={.none}>
                    {getCss(ctx)}
                </style>
            </head>
            <body>
                <GtmBody />
                {children}
            </body>
        </html>
    );
}

fn getCss(ctx: zx.LayoutContext) []const u8 {
    const req_path = ctx.request.pathname;
    return if (std.mem.eql(u8, req_path, "/"))
        @embedFile("../assets/home.css")
    else if (std.mem.eql(u8, req_path, "/overview"))
        ""
    else if (std.mem.eql(u8, req_path, "/time"))
        ""
    else
        @embedFile("../assets/docs.css");
}

const GtmHead = @import("components/tags.zx").GtmHead;
const GtmBody = @import("components/tags.zx").GtmBody;
const zx = @import("zx");
const std = @import("std");
