moq.dev/src/layouts/global.astro at 1f29e85ba995aaf3fe2f130ffc4ef7975febdbf5 · 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
---
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;
	};
}

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

<!doctype html>
<html lang="en" class="bg-slate-900 text-slate-100 sl-theme-dark">
	<head>
		<meta charset="UTF-8" />
		<meta name="description" content={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 (and arbitrary data) with latency that rivals WebRTC. It is being standardized by the IETF as a new RFC." } />
		<meta name="viewport" content="width=device-width" />
		<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>{title ? `${title} - Media over QUIC` : "Media over QUIC"}</title>
	</head>
	<body>
		<div class="flex flex-col md:flex-row gap-8 md:p-8 p-4 justify-center">
			<nav class="flex flex-row items-center md:flex-col md:gap-12 gap-4 md:w-52 w-full">
				<div class="w-1/2 md:w-52 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">
				{
					frontmatter?.date && (
						<p class="text-sm text-gray-400 text-right">
							published {new Date(frontmatter.date).toLocaleDateString()}
						</p>
					)
				}
				<slot />
			</article>
		</div>
	</body>
</html>