moq.dev/src/layouts/global.astro at 23872ea015ca014b33d66d2332070040ea431fbb · moq-dev/moq.dev · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
---
import "./global.css";

// NOTE: This is magically used as the type for Astro.props
interface Props {
	title: string;
	description: string;

	frontmatter?: {
		title: string;
		date: string;
		description: string;
		cover?: string;
	};
}

let { title, frontmatter, description } = Astro.props;
if (frontmatter?.title) title = frontmatter.title;
if (frontmatter?.description) description = frontmatter.description;

const siteUrl = Astro.site?.toString().replace(/\/$/, "") ?? "https://moq.dev";
const pageUrl = new URL(Astro.url.pathname, siteUrl).toString();
const fullTitle = title ? `${title} - Media over QUIC` : "Media over QUIC";
const fullDescription = description
	? `Media over QUIC: ${description}`
	: "Media over QUIC is a new live media protocol designed for simplicity and scale. It uses new browser technologies like WebTransport and WebCodecs to deliver media with latency that rivals WebRTC.";
const ogImage = new URL(frontmatter?.cover ?? "/layout/icon.png", siteUrl).toString();
---

<!doctype html>
<html lang="en" class="text-slate-100 sl-theme-dark">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content={fullDescription} />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<link rel="icon" type="image/svg+xml" href="/layout/favicon.svg" />
		<link rel="alternate" type="application/rss+xml" title="moq.dev RSS Feed" href={new URL("rss.xml", Astro.site)} />
		<meta name="generator" content={Astro.generator} />
		<title>{fullTitle}</title>

		<!-- Open Graph -->
		<meta property="og:type" content={frontmatter?.date ? "article" : "website"} />
		<meta property="og:title" content={fullTitle} />
		<meta property="og:description" content={fullDescription} />
		<meta property="og:url" content={pageUrl} />
		<meta property="og:site_name" content="Media over QUIC" />
		<meta property="og:image" content={ogImage} />
		<meta property="og:image:width" content="650" />
		<meta property="og:image:height" content="600" />

		<!-- Twitter Card -->
		<meta name="twitter:card" content="summary_large_image" />
		<meta name="twitter:title" content={fullTitle} />
		<meta name="twitter:description" content={fullDescription} />
		<meta name="twitter:image" content={ogImage} />

		<!-- Theme color -->
		<meta name="theme-color" content="#0f172a" />
	</head>
	<body class="min-h-screen bg-slate-900 flex justify-center">
		<div class="flex flex-col md:flex-row gap-0 bg-slate-900 shadow-2xl max-w-6xl w-full p-4">
			<nav class="flex flex-row items-center md:flex-col md:gap-12 gap-4 md:w-64 w-full p-4">
				<div class="w-1/2 md:w-full flex justify-center">
					<a href="/">
						<img src="/layout/logo.svg" class="w-52" alt="Media over QUIC" />
					</a>
				</div>
				<div class="flex md:flex-col flex-row flex-wrap items-center justify-center gap-4 md:w-32 w-1/2">
					<a href="/watch">
						<img src="/layout/watch.svg" class="w-32" alt="Watch" />
					</a>
					<a href="/publish">
						<img src="/layout/publish.svg" class="w-32" alt="Publish" />
					</a>
					<a href="/blog">
						<img src="/layout/explain.svg" class="w-32" alt="Blog" />
					</a>
					<a href="/source">
						<img src="/layout/source.svg" class="w-32" alt="Source" />
					</a>
					<a href="https://discord.gg/FCYF3p99mr">
						<img src="/layout/discord.svg" class="w-32" alt="Discord" />
					</a>
				</div>
			</nav>
			<article class="markdown p-4 flex-1">
				{
					frontmatter?.date && (
						<p class="text-sm text-gray-400 text-right">
							published {new Date(frontmatter.date).toLocaleDateString()}
						</p>
					)
				}
				<slot />
			</article>
		</div>
	</body>
</html>