import { createRootRoute, HeadContent, Outlet, Scripts } from "@tanstack/react-router";
import appCss from "../styles.css?url";
const BASE = import.meta.env.BASE_URL;
const APP_NAME = "Bitbrush";
const APP_DESCRIPTION =
"A retro pixel-art studio. Draw on a resizable grid with a limited palette, fill, undo, and export PNG.";
export const Route = createRootRoute({
head: () => ({
meta: [
{ charSet: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1, viewport-fit=cover" },
{ title: APP_NAME },
{ name: "description", content: APP_DESCRIPTION },
{ name: "theme-color", content: "#0c0d0b" },
{ name: "application-name", content: APP_NAME },
{ name: "apple-mobile-web-app-title", content: APP_NAME },
{ name: "apple-mobile-web-app-capable", content: "yes" },
{ property: "og:type", content: "website" },
{ property: "og:title", content: APP_NAME },
{ property: "og:description", content: APP_DESCRIPTION },
{ property: "og:image", content: `${BASE}og.jpg` },
{ name: "twitter:card", content: "summary_large_image" },
],
links: [
{ rel: "icon", type: "image/svg+xml", href: `${BASE}favicon.svg` },
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400&family=Pixelify+Sans:wght@500;600&display=swap",
},
{ rel: "stylesheet", href: appCss },
{ rel: "manifest", href: `${BASE}manifest.webmanifest` },
{ rel: "apple-touch-icon", href: `${BASE}icon-180.png` },
],
}),
component: () => (
),
});