Live video on the AT Protocol
1---
2import { Card, CardGrid } from "@astrojs/starlight/components";
3
4interface Props {
5 searchPlaceholder?: string;
6}
7---
8
9<div class="helpdesk">
10
11 <h2>How can we help?</h2>
12 <p>Search the knowledge base, or check out topics below.</p>
13
14 <CardGrid>
15 <Card title="Getting Started" icon="rocket">
16 <p>New to Streamplace? Start here to set up your first stream.</p>
17 <ul>
18 <li><a href="/docs/guides/start-streaming/quick-start">Quick start guide</a></li>
19 <li><a href="/docs/guides/start-streaming/obs">Stream with OBS</a></li>
20 </ul>
21 </Card>
22
23 <Card title="Developers & Self-Hosters" icon="laptop">
24 <p>Building with Streamplace or running your own node?</p>
25 <ul>
26 <li><a href="/docs/developers">Developer documentation</a></li>
27 </ul>
28 </Card>
29 </CardGrid>
30</div>
31
32<style>
33 .helpdesk {
34 margin: 0 auto;
35 }
36
37 .helpdesk-search {
38 margin-bottom: 2rem;
39 }
40
41 .search-input {
42 width: 100%;
43 padding: 1rem 1.5rem;
44 font-size: 1.125rem;
45 border: 2px solid var(--sl-color-gray-5);
46 border-radius: 0.5rem;
47 background: var(--sl-color-bg);
48 color: var(--sl-color-text);
49 transition: border-color 0.2s;
50 }
51
52 .search-input:focus {
53 outline: none;
54 border-color: var(--sl-color-accent);
55 }
56
57 .helpdesk h2 {
58 margin-bottom: 1.5rem;
59 }
60</style>