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