Sign in

flagon-io/g1t

public

g1t/apps/web/app/routes/docs.tsx

157 lines5,037 bytesCodeBlame
1import { ArrowLeft, ArrowRight, ExternalLink } from "lucide-react";
2import { Link, NavLink, data } from "react-router";
3
4import type { Route } from "./+types/docs";
5import { Markdown } from "../components/markdown";
6
7const sources = import.meta.glob<string>("../docs/*.md", {
8 query: "?raw",
9 import: "default",
10 eager: true,
11});
12
13type Page = { slug: string; title: string };
14
15const SECTIONS: { title: string; pages: Page[] }[] = [
16 {
17 title: "Get started",
18 pages: [
19 { slug: "", title: "Quickstart" },
20 { slug: "concepts", title: "Concepts" },
21 ],
22 },
23 {
24 title: "Guides",
25 pages: [
26 { slug: "authentication", title: "Accounts and authentication" },
27 { slug: "git", title: "Git" },
28 { slug: "g1t-agents", title: "g1t agents" },
29 { slug: "agents", title: "Bring your own agent" },
30 ],
31 },
32 {
33 title: "Reference",
34 pages: [{ slug: "api", title: "API overview" }],
35 },
36];
37
38const PAGES = SECTIONS.flatMap((section) => section.pages);
39
40function href(page: Page): string {
41 return page.slug ? `/docs/${page.slug}` : "/docs";
42}
43
44export function meta({ loaderData }: Route.MetaArgs) {
45 return [
46 { title: `${loaderData?.title ?? "Docs"} · g1t docs` },
47 {
48 tagName: "link",
49 rel: "canonical",
50 href: `https://docs.g1t.sh/${loaderData?.slug ?? ""}`,
51 },
52 ];
53}
54
55export function loader({ params }: Route.LoaderArgs) {
56 const slug = params.page ?? "";
57 const index = PAGES.findIndex((candidate) => candidate.slug === slug);
58 const source = sources[`../docs/${slug || "index"}.md`];
59 if (index < 0 || !source) throw data(null, { status: 404 });
60 return {
61 slug,
62 title: PAGES[index].title,
63 source,
64 previous: PAGES[index - 1] ?? null,
65 next: PAGES[index + 1] ?? null,
66 };
67}
68
69export default function Docs({ loaderData }: Route.ComponentProps) {
70 const { source, previous, next } = loaderData;
71 return (
72 <div className="mx-auto grid max-w-6xl gap-10 px-4 py-10 md:grid-cols-[14rem_1fr]">
73 <nav
74 aria-label="Documentation"
75 className="space-y-6 md:sticky md:top-24 md:self-start"
76 >
77 {SECTIONS.map((section) => (
78 <div key={section.title}>
79 <p className="px-3 text-xs font-medium tracking-wide text-faint uppercase">
80 {section.title}
81 </p>
82 <ul className="mt-2 space-y-0.5">
83 {section.pages.map((page) => (
84 <li key={page.slug}>
85 <NavLink
86 to={href(page)}
87 end
88 className={({ isActive }) =>
89 `block rounded-md px-3 py-1.5 text-sm transition-colors ${
90 isActive
91 ? "bg-raised font-medium text-fg"
92 : "text-muted hover:text-fg"
93 }`
94 }
95 >
96 {page.title}
97 </NavLink>
98 </li>
99 ))}
100 {section.title === "Reference" && (
101 <>
102 <li>
103 <a
104 href="/docs/api/reference"
105 className="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-muted hover:text-fg"
106 >
107 API reference
108 <ExternalLink size={12} />
109 </a>
110 </li>
111 <li>
112 <a
113 href="/llms.txt"
114 className="flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm text-muted hover:text-fg"
115 >
116 llms.txt
117 <ExternalLink size={12} />
118 </a>
119 </li>
120 </>
121 )}
122 </ul>
123 </div>
124 ))}
125 </nav>
126 <article className="max-w-3xl min-w-0">
127 <Markdown source={source} />
128 <nav className="mt-16 grid gap-3 border-t border-line pt-6 sm:grid-cols-2">
129 {previous ? (
130 <Link
131 to={href(previous)}
132 className="rounded-xl border border-line p-4 transition-colors hover:border-line-strong"
133 >
134 <span className="flex items-center gap-1.5 text-xs text-faint">
135 <ArrowLeft size={12} /> Previous
136 </span>
137 <span className="mt-1 block font-medium">{previous.title}</span>
138 </Link>
139 ) : (
140 <span />
141 )}
142 {next && (
143 <Link
144 to={href(next)}
145 className="rounded-xl border border-line p-4 text-right transition-colors hover:border-line-strong"
146 >
147 <span className="flex items-center justify-end gap-1.5 text-xs text-faint">
148 Next <ArrowRight size={12} />
149 </span>
150 <span className="mt-1 block font-medium">{next.title}</span>
151 </Link>
152 )}
153 </nav>
154 </article>
155 </div>
156 );
157}