(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1---
2import { ClientRouter } from 'astro:transitions';
3import '../styles/global.css';
4import PostHog from '../components/posthog.astro';
5
6interface Props {
7 title?: string;
8 description?: string;
9 image?: string;
10}
11
12const { title = 'Margin', description = 'Annotate the web', image = 'https://margin.at/og.png' } = Astro.props;
13---
14
15<!DOCTYPE html>
16<html lang="en" style="color-scheme: light dark">
17 <head>
18 <meta charset="UTF-8" />
19 <meta name="description" content={description} />
20 <meta name="viewport" content="width=device-width" />
21 <link rel="icon" type="image/svg+xml" href="/logo.svg" />
22 <link rel="preconnect" href="https://fonts.googleapis.com">
23 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
24 <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700&display=swap" rel="stylesheet">
25 <meta name="generator" content={Astro.generator} />
26 <meta name="color-scheme" content="light dark" />
27 <meta name="theme-color" media="(prefers-color-scheme: light)" content="#ffffff" />
28 <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0f172a" />
29 <meta property="og:type" content="website" />
30 <meta property="og:url" content={Astro.url} />
31 <meta property="og:title" content={title} />
32 <meta property="og:description" content={description} />
33 <meta property="og:image" content={image} />
34 <meta property="og:site_name" content="Margin" />
35 <meta name="twitter:card" content="summary_large_image" />
36 <meta name="twitter:title" content={title} />
37 <meta name="twitter:description" content={description} />
38 <meta name="twitter:image" content={image} />
39
40 <title>{title}</title>
41
42 <ClientRouter />
43 <PostHog />
44
45 <script is:inline>
46 (function() {
47 function applyTheme() {
48 var theme = localStorage.getItem('theme') || 'system';
49 var root = document.documentElement;
50 if (theme === 'system') {
51 root.dataset.theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
52 } else {
53 root.dataset.theme = theme;
54 }
55 }
56 applyTheme();
57 document.addEventListener('astro:before-swap', function(e) {
58 var theme = localStorage.getItem('theme') || 'system';
59 var dark = theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
60 e.newDocument.documentElement.dataset.theme = dark ? 'dark' : 'light';
61 });
62 document.addEventListener('astro:after-swap', applyTheme);
63 })();
64 </script>
65 </head>
66 <body class="bg-surface-50 dark:bg-surface-950 min-h-screen text-surface-900 dark:text-white">
67 <slot />
68 </body>
69</html>