Rules-based browser launcher for TUI + GNOME.
switchyard.aly.codes
tui
gome
bowser
go
website: add docs landing page + in-line svg logo
Aly Raffauf
(Jun 22, 2026, 1:54 PM EDT)
3bf0fc1f
a37fa60a
+136
-21
+1
-4
website/astro.config.mjs
+1
-4
website/astro.config.mjs
+51
website/src/components/Logo.astro
+51
website/src/components/Logo.astro
···
1
+
---
2
+
interface Props {
3
+
class?: string;
4
+
}
5
+
const { class: className } = Astro.props;
6
+
---
7
+
8
+
<svg
9
+
class={className}
10
+
viewBox="0 0 1024 1024"
11
+
xmlns="http://www.w3.org/2000/svg"
12
+
aria-hidden="true"
13
+
>
14
+
<defs>
15
+
<linearGradient
16
+
id="switchyard-icon-gradient"
17
+
x1="205.42"
18
+
y1="205.42"
19
+
x2="846.69"
20
+
y2="846.69"
21
+
gradientUnits="userSpaceOnUse"
22
+
>
23
+
<stop offset="0" stop-color="#6dd791"></stop>
24
+
<stop offset="1" stop-color="#366946"></stop>
25
+
</linearGradient>
26
+
</defs>
27
+
<rect
28
+
fill="url(#switchyard-icon-gradient)"
29
+
x="0"
30
+
y="0"
31
+
width="1024"
32
+
height="1024"
33
+
rx="512"
34
+
ry="512"></rect>
35
+
<g fill="#fff">
36
+
<path
37
+
d="M737.91,324.02c-12.21,3-24.19,6.98-35.87,11.92-28.55,12.08-54.2,29.37-76.24,51.41-21.36,21.36-38.27,46.12-50.29,73.63,12.32,14.08,19.79,32.49,19.79,52.62,0,29.45-15.99,55.22-39.74,69.11v222.6c142.22-21.05,251.36-143.64,251.36-291.72,0-72.19-25.94-138.32-69-189.58Z"
38
+
></path>
39
+
<path
40
+
d="M512,393.76c14.27-24.76,31.73-47.53,52.2-68,28.12-28.12,60.58-50.58,96.58-66.84-43.68-25.57-94.51-40.23-148.78-40.23s-105.1,14.66-148.78,40.23c36,16.27,68.46,38.73,96.58,66.84,20.47,20.47,37.93,43.24,52.2,68Z"
41
+
></path>
42
+
<path
43
+
d="M435.29,513.6c0-17.66,5.75-33.99,15.48-47.24-.38-.92-.76-1.84-1.15-2.76-12.08-28.55-29.37-54.2-51.41-76.24-22.04-22.04-47.69-39.34-76.24-51.41-11.68-4.94-23.66-8.92-35.87-11.92-43.06,51.26-69,117.39-69,189.58,0,148.08,109.14,270.66,251.36,291.72v-226.9c-20.07-14.55-33.16-38.18-33.16-64.81Z"
44
+
></path>
45
+
<circle
46
+
cx="515.24"
47
+
cy="514.23"
48
+
r="29.86"
49
+
transform="translate(-104.36 132.13) rotate(-13.28)"></circle>
50
+
</g>
51
+
</svg>
+2
-3
website/src/components/SiteHeader.astro
+2
-3
website/src/components/SiteHeader.astro
···
1
1
---
2
2
import { Icon } from "astro-icon/components";
3
+
import Logo from "./Logo.astro";
3
4
4
5
interface BreadcrumbItem {
5
6
href: string;
···
44
45
aria-hidden="true"
45
46
/>
46
47
)}
47
-
{item.switchyardIcon && (
48
-
<img src="/icon.svg" alt="" class="w-4 h-4" />
49
-
)}
48
+
{item.switchyardIcon && <Logo class="w-4 h-4 shrink-0" />}
50
49
{item.label}
51
50
</a>
52
51
</>
+2
-1
website/src/layouts/DocsLayout.astro
+2
-1
website/src/layouts/DocsLayout.astro
···
2
2
import type { CollectionEntry } from "astro:content";
3
3
import SiteFooter from "../components/SiteFooter.astro";
4
4
import SiteHeader from "../components/SiteHeader.astro";
5
+
import Logo from "../components/Logo.astro";
5
6
import { DEV_URL } from "../site";
6
7
7
8
type DocsEntry = CollectionEntry<"docs">;
···
49
50
href="/docs/"
50
51
class="flex items-center gap-2.5 text-text hover:text-primary transition-colors"
51
52
>
52
-
<img src="/icon.svg" alt="" class="w-7 h-7" />
53
+
<Logo class="w-7 h-7" />
53
54
<span class="text-lg font-bold tracking-tight">Switchyard Docs</span>
54
55
</a>
55
56
<p class="mt-3 mb-5 text-sm leading-relaxed text-text-muted">
+70
-1
website/src/pages/docs/index.astro
+70
-1
website/src/pages/docs/index.astro
···
1
1
---
2
-
return Astro.redirect("/docs/using/");
2
+
import "../../styles/index.css";
3
+
import { getCollection } from "astro:content";
4
+
import SiteFooter from "../../components/SiteFooter.astro";
5
+
import SiteHeader from "../../components/SiteHeader.astro";
6
+
import Logo from "../../components/Logo.astro";
7
+
import { DEV_URL } from "../../site";
8
+
9
+
const docs = (await getCollection("docs")).sort(
10
+
(a, b) =>
11
+
a.data.order - b.data.order || a.data.title.localeCompare(b.data.title),
12
+
);
3
13
---
14
+
15
+
<!doctype html>
16
+
<html lang="en">
17
+
<head>
18
+
<meta charset="UTF-8" />
19
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
20
+
<title>Switchyard Docs</title>
21
+
<meta
22
+
name="description"
23
+
content="Guides for browser rules, URL redirections, custom URI links, the browser extension, and more."
24
+
/>
25
+
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
26
+
<meta name="theme-color" content="#4f895d" />
27
+
</head>
28
+
<body class="min-h-screen flex flex-col">
29
+
<SiteHeader
30
+
items={[
31
+
{ href: DEV_URL, label: "Aly Raffauf", icon: "lucide:rose" },
32
+
{ href: "/", label: "Switchyard", switchyardIcon: true },
33
+
{ href: "/docs/", label: "Docs", current: true },
34
+
]}
35
+
/>
36
+
37
+
<main
38
+
class="w-full max-w-[900px] mx-auto px-4 md:px-8 py-10 md:py-16 flex-1"
39
+
>
40
+
<div class="flex items-center gap-3 mb-3">
41
+
<Logo class="w-10 h-10" />
42
+
<h1 class="text-2xl md:text-3xl font-bold tracking-tight">
43
+
Switchyard Docs
44
+
</h1>
45
+
</div>
46
+
<p class="text-text-muted text-base mb-8 md:mb-10 max-w-[560px]">
47
+
Guides for browser rules, URL redirections, custom URI links, the
48
+
browser extension, and more.
49
+
</p>
50
+
51
+
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4 md:gap-6">
52
+
{
53
+
docs.map((doc) => (
54
+
<a
55
+
href={`/docs/${doc.id}/`}
56
+
class="group block bg-bg p-5 md:p-6 rounded-2xl border border-border transition-all duration-300 hover:shadow-default hover:-translate-y-0.5 hover:border-primary/40"
57
+
>
58
+
<h2 class="text-base md:text-lg font-bold mb-1 group-hover:text-primary transition-colors">
59
+
{doc.data.title}
60
+
</h2>
61
+
<p class="text-text-muted text-sm leading-relaxed">
62
+
{doc.data.description}
63
+
</p>
64
+
</a>
65
+
))
66
+
}
67
+
</div>
68
+
</main>
69
+
70
+
<SiteFooter variant="docs" />
71
+
</body>
72
+
</html>
+8
-6
website/src/pages/index.astro
+8
-6
website/src/pages/index.astro
···
3
3
import { Icon } from "astro-icon/components";
4
4
import SiteFooter from "../components/SiteFooter.astro";
5
5
import SiteHeader from "../components/SiteHeader.astro";
6
+
import Logo from "../components/Logo.astro";
6
7
import { Image } from "astro:assets";
7
8
import imgLauncher from "../assets/screenshots/launcher.png";
8
9
import imgBrowserRules from "../assets/screenshots/browser-rules.png";
···
24
25
] as const;
25
26
26
27
const heroButtons = [
27
-
{ href: FLATHUB_URL, label: "Flathub", icon: "simple-icons:flatpak", primary: true },
28
+
{
29
+
href: FLATHUB_URL,
30
+
label: "Flathub",
31
+
icon: "simple-icons:flatpak",
32
+
primary: true,
33
+
},
28
34
{ href: "/docs/", label: "Docs", icon: "lucide:book-open" },
29
35
{ href: DONATE_URL, label: "Donate", icon: "lucide:heart" },
30
36
] as const;
···
223
229
<div
224
230
class="flex items-center gap-3 md:gap-4 justify-center md:justify-start mb-4 order-1"
225
231
>
226
-
<img
227
-
src="/icon.svg"
228
-
alt=""
229
-
class="w-14 h-14 md:w-[72px] md:h-[72px] shrink-0"
230
-
/>
232
+
<Logo class="w-14 h-14 md:w-[72px] md:h-[72px] shrink-0" />
231
233
<h1
232
234
class="text-3xl md:text-[3.5rem] font-bold leading-tight tracking-tight bg-gradient-to-br from-text to-text-muted bg-clip-text text-transparent"
233
235
>