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
/** @jsxImportSource https://esm.sh/hono@latest/jsx **/
import { jsx, Fragment } from 'https://deno.land/x/hono/middleware.ts'
import tailwindURL from "https://esm.town/v/stevekrouse/tailwindURL";
import Header from "https://esm.town/v/iamseeley/Header";
type RootLayoutProps = {
title: string;
children: any;
currentPath?: string;
}
export default function RootLayout({ title, children, currentPath }: RootLayoutProps) {
return (
<html lang="en" hx-boost="true" hx-swap="outerHTML transition:true">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src={tailwindURL} />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Jaro:opsz@6..72&display=swap" rel="stylesheet" />
<script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>
<style>
{`
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.animate-fadeIn {
animation: fadeIn 0.3s ease-in-out;
}
.animate-fadeOut {
animation: fadeOut 0.3s ease-in-out;
}
.hidden {
display: none;
}
`}
</style>
</head>
<body style={{ fontFamily: 'Inter, sans-serif' }}>
<div className="my-6 max-w-2xl mx-auto px-6">
<Header currentPath={currentPath} />
<main className="my-10">
{children}
</main>
</div>
</body>
</html>
)
}