arena/src/routes/__root.tsx at 41374a13ac890a40b007450cc76642399fdda27b · appwrite/arena · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
import { createRootRoute, HeadContent, Outlet, Scripts } from "@tanstack/react-router";
import Footer from "../components/Footer";
import Header from "../components/Header";
import JsonLd from "../components/JsonLd";
import { PlausibleAnalytics } from "../components/PlausibleAnalytics";
import { fetchGitHubStars } from "../lib/github-stars";
import { OG_IMAGE, SITE_DESCRIPTION, SITE_TITLE, SITE_URL } from "../lib/site";

import appCss from "../styles.css?url";

const WEBSITE_JSON_LD = {
	"@context": "https://schema.org",
	"@type": "WebSite",
	name: "Appwrite Arena",
	description: SITE_DESCRIPTION,
	url: SITE_URL,
} as const;

export const Route = createRootRoute({
	loader: () => fetchGitHubStars(),
	head: () => ({
		meta: [
			{ charSet: "utf-8" },
			{ name: "viewport", content: "width=device-width, initial-scale=1" },
			{ title: SITE_TITLE },
			{ name: "description", content: SITE_DESCRIPTION },

			// Open Graph
			{ property: "og:type", content: "website" },
			{ property: "og:url", content: SITE_URL },
			{ property: "og:title", content: SITE_TITLE },
			{ property: "og:description", content: SITE_DESCRIPTION },
			{ property: "og:image", content: OG_IMAGE },
			{ property: "og:site_name", content: "Appwrite Arena" },

			// Twitter / X
			{ name: "twitter:card", content: "summary_large_image" },
			{ name: "twitter:url", content: SITE_URL },
			{ name: "twitter:title", content: SITE_TITLE },
			{ name: "twitter:description", content: SITE_DESCRIPTION },
			{ name: "twitter:image", content: OG_IMAGE },

			// Misc
			{ name: "theme-color", content: "#19191C" },
		],
		links: [
			{ rel: "stylesheet", href: appCss },
			{ rel: "icon", type: "image/svg+xml", href: "/favicon.svg" },
			{ rel: "canonical", href: SITE_URL },
			{ rel: "manifest", href: "/manifest.json" },
		],
		scripts: [{ src: "/theme-init.js" }],
	}),
	shellComponent: RootShell,
	component: RootLayout,
});

function RootShell({ children }: { children: React.ReactNode }) {
	return (
		<html
			lang="en"
			className="dark"
			data-theme="dark"
			style={{ colorScheme: "dark" }}
		>
			<head>
				<HeadContent />
			</head>
			<body className="flex min-h-screen flex-col font-sans antialiased wrap-anywhere selection:bg-[rgba(253,54,110,0.2)]">
				<JsonLd data={WEBSITE_JSON_LD} />
				<PlausibleAnalytics />
				{children}
				<Scripts />
			</body>
		</html>
	);
}

function RootLayout() {
	const stars = Route.useLoaderData();
	return (
		<>
			<Header stars={stars} />
			<Outlet />
			<Footer />
		</>
	);
}