(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970---import { ClientRouter } from 'astro:transitions';import '../styles/global.css';import PostHog from '../components/posthog.astro';
interface Props { title?: string; description?: string; image?: string;}
const { title = 'Margin', description = 'Annotate the web', image = 'https://margin.at/og.png' } = Astro.props;---
<!DOCTYPE html><html lang="en" style="color-scheme: light dark"> <head> <meta charset="UTF-8" /> <meta name="description" content={description} /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/logo.svg" /> <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@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet"> <meta name="generator" content={Astro.generator} /> <meta name="color-scheme" content="light dark" /> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" /> <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f172a" /> <meta property="og:type" content="website" /> <meta property="og:url" content={Astro.url} /> <meta property="og:title" content={title} /> <meta property="og:description" content={description} /> <meta property="og:image" content={image} /> <meta property="og:site_name" content="Margin" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content={title} /> <meta name="twitter:description" content={description} /> <meta name="twitter:image" content={image} />
<title>{title}</title>
<ClientRouter /> <PostHog />
<script is:inline> (function() { function applyTheme() { var theme = localStorage.getItem('theme') || 'system'; var root = document.documentElement; if (theme === 'system') { root.dataset.theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'; } else { root.dataset.theme = theme; } } applyTheme(); document.addEventListener('astro:before-swap', function(e) { var theme = localStorage.getItem('theme') || 'system'; var dark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches); e.newDocument.documentElement.dataset.theme = dark ? 'dark' : 'light'; }); document.addEventListener('astro:after-swap', applyTheme); })(); </script> </head> <body class="bg-surface-50 dark:bg-surface-950 min-h-screen text-surface-900 dark:text-white"> <slot /> </body></html>