Dark surfaces now carry light: frames glow along their edge and shed binary digits (BitAura), dark sections open with a lit seam (BitSeam), the career path is a line of light and "My work" became a dark stage. Buttons carry a travelling light and a spot that follows the pointer (BitGlow). Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
97 lines
2.5 KiB
TypeScript
97 lines
2.5 KiB
TypeScript
import type { Metadata, Viewport } from "next";
|
|
import { Inter, JetBrains_Mono, Newsreader } from "next/font/google";
|
|
import { Analytics } from "@/src/components/Analytics";
|
|
import { BitBurst } from "@/src/components/bits/BitBurst";
|
|
import { BitGlow } from "@/src/components/bits/BitGlow";
|
|
import { Footer } from "@/src/components/Footer";
|
|
import { Header } from "@/src/components/Header";
|
|
import { InteractiveElements } from "@/src/components/InteractiveElements";
|
|
import {
|
|
INDEXING,
|
|
SITE_DESCRIPTION,
|
|
SITE_LANGUAGE,
|
|
SITE_NAME,
|
|
SITE_TITLE,
|
|
SITE_URL,
|
|
} from "@/src/content/site";
|
|
import { robotsMeta } from "@/src/domain/indexing";
|
|
import "./globals.css";
|
|
|
|
const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
|
|
// A real monospaced fallback has almost the same letter width. The default
|
|
// fallback (a resized Arial) wraps the mono labels differently, so the hero
|
|
// jumped when the font arrived.
|
|
const jetbrainsMono = JetBrains_Mono({
|
|
subsets: ["latin"],
|
|
variable: "--font-jetbrains-mono",
|
|
display: "swap",
|
|
adjustFontFallback: false,
|
|
fallback: ["ui-monospace", "Menlo", "Consolas", "monospace"],
|
|
});
|
|
const newsreader = Newsreader({
|
|
subsets: ["latin"],
|
|
variable: "--font-newsreader",
|
|
style: "italic",
|
|
display: "swap",
|
|
});
|
|
|
|
export const metadata: Metadata = {
|
|
metadataBase: new URL(SITE_URL),
|
|
title: {
|
|
default: SITE_TITLE,
|
|
template: `%s | ${SITE_NAME}`,
|
|
},
|
|
description: SITE_DESCRIPTION,
|
|
applicationName: SITE_NAME,
|
|
authors: [{ name: SITE_NAME, url: SITE_URL }],
|
|
creator: SITE_NAME,
|
|
robots: robotsMeta(INDEXING),
|
|
icons: {
|
|
icon: "/favicon.svg",
|
|
apple: "/apple-touch-icon.png",
|
|
},
|
|
// The images come from opengraph-image.png and twitter-image.png next to this file.
|
|
openGraph: {
|
|
type: "website",
|
|
url: "/",
|
|
siteName: SITE_NAME,
|
|
locale: "en_US",
|
|
title: SITE_TITLE,
|
|
description: SITE_DESCRIPTION,
|
|
},
|
|
twitter: {
|
|
card: "summary_large_image",
|
|
title: SITE_TITLE,
|
|
description: SITE_DESCRIPTION,
|
|
},
|
|
};
|
|
|
|
export const viewport: Viewport = {
|
|
themeColor: "#ffffff",
|
|
colorScheme: "light",
|
|
viewportFit: "cover",
|
|
};
|
|
|
|
export default function RootLayout({
|
|
children,
|
|
}: {
|
|
children: React.ReactNode;
|
|
}) {
|
|
return (
|
|
<html
|
|
lang={SITE_LANGUAGE}
|
|
className={`${inter.variable} ${newsreader.variable} ${jetbrainsMono.variable}`}
|
|
>
|
|
<body className="min-h-screen bg-white">
|
|
<Header />
|
|
<main>{children}</main>
|
|
<Footer />
|
|
<InteractiveElements />
|
|
<BitBurst />
|
|
<BitGlow />
|
|
<Analytics />
|
|
</body>
|
|
</html>
|
|
);
|
|
}
|