Something went wrong. Try again.
My website. cameron.stream
Something went wrong. Try again.
3.8 kB · 75 lines
TSX
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576import { raw } from "hono/html";
export type ShellChild = | import("hono/utils/html").HtmlEscapedString | Promise<import("hono/utils/html").HtmlEscapedString>;
const themeInitScript = `(function(){try{var t=localStorage.getItem("theme");if(t==="dark"||t==="light")document.documentElement.setAttribute("data-theme",t)}catch(e){}})()`;const aroundFontUrl = "/public/fonts/around-regular.woff2?v=20260712-12";
export function Shell({ children, title, wide = false, noIndex = false, stylesheets = [], recordLinks = {},}: { children: ShellChild; title?: string; wide?: boolean; noIndex?: boolean; stylesheets?: string[]; recordLinks?: { publication?: string; document?: string };}) { const pageTitle = title ? `${title} — Cameron's website` : "Cameron's website"; return ( <html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> {noIndex && <meta name="robots" content="noindex, nofollow, noarchive" />} {recordLinks.publication && <link rel="site.standard.publication" href={recordLinks.publication} />} {recordLinks.document && <link rel="site.standard.document" href={recordLinks.document} />} <title>{pageTitle}</title> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous" /> <link rel="preload" href={aroundFontUrl} as="font" type="font/woff2" crossorigin="anonymous" /> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" /> <link rel="icon" href="/public/favicon.svg" type="image/svg+xml" /> <link rel="icon" href="/public/favicon-32x32.png" type="image/png" sizes="32x32" /> <link rel="icon" href="/public/favicon-16x16.png" type="image/png" sizes="16x16" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" sizes="180x180" /> <link rel="stylesheet" href="/public/host-primitives.css" /> <link rel="stylesheet" href="/public/host-theme.css" /> <link rel="stylesheet" href="/public/site.css" /> <link rel="stylesheet" href="/public/type.css" /> <link rel="stylesheet" href="/public/artifacts.css" /> {stylesheets.map((href) => <link rel="stylesheet" href={href} />)} {raw(`<script>${themeInitScript}</script>`)} {raw(`<style> .page-container { max-width: var(--site-max-width); margin: 0 auto; padding: 0 1.25em 3em; } </style>`)} </head> <body> <div class={wide ? "page-container page-container-wide" : "page-container"}>{children}</div> {raw(`<button class="theme-toggle" id="theme-toggle" type="button" aria-label="Use dark theme"></button> <div class="theme-preferences" aria-labelledby="theme-preferences-label"> <span class="theme-preferences-label" id="theme-preferences-label">Appearance</span> <div class="theme-choice-group" role="group" aria-labelledby="theme-preferences-label"> <button class="theme-choice" type="button" data-theme-choice="system" aria-pressed="false">System</button> <button class="theme-choice" type="button" data-theme-choice="light" aria-pressed="false">Light</button> <button class="theme-choice" type="button" data-theme-choice="dark" aria-pressed="false">Dark</button> </div> </div>`)} <script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script> <script src="/public/theme.js"></script> </body> </html> );}