Add page generation for documentation

package.json

@@ -15,6 +15,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.16",
     "@radix-ui/react-navigation-menu": "^1.2.14",
     "@radix-ui/react-slot": "^1.2.3",
+    "@tanstack/react-query": "^5.90.12",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.548.0",

src/app/auto-splitters.tsx

@@ -0,0 +1,9 @@
+import { AppGitHubGenericMarkdown } from "@/components/libresplit/AppGitHubGenericMarkdown";
+
+export function AutoSplitters() {
+  return (
+    <div>
+      <AppGitHubGenericMarkdown url="https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/docs/auto-splitters.md" />
+    </div>
+  );
+}

src/app/home.tsx

@@ -1,11 +1,11 @@
-import { AppGitHubReadme } from "@/components/libresplit/AppGitHubReadme";
+import { AppGitHubGenericMarkdown } from "@/components/libresplit/AppGitHubGenericMarkdown";
 import { AppHero } from "@/components/libresplit/AppHero";
 
 export function Home() {
   return (
     <div className="flex flex-col items-center justify-center">
       <AppHero />
-      <AppGitHubReadme />
+      <AppGitHubGenericMarkdown url="https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/README.md" />
     </div>
   );
 }

src/app/settings-keybinds.tsx

@@ -0,0 +1,9 @@
+import { AppGitHubGenericMarkdown } from "@/components/libresplit/AppGitHubGenericMarkdown";
+
+export function SettingsKeybinds() {
+  return (
+    <div>
+      <AppGitHubGenericMarkdown url="https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/docs/settings-keybinds.md" />
+    </div>
+  );
+}

src/app/split-files.tsx

@@ -0,0 +1,9 @@
+import { AppGitHubGenericMarkdown } from "@/components/libresplit/AppGitHubGenericMarkdown";
+
+export function SplitFiles() {
+  return (
+    <div>
+      <AppGitHubGenericMarkdown url="https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/docs/settings-keybinds.md" />
+    </div>
+  );
+}

src/app/themes.tsx

@@ -0,0 +1,9 @@
+import { AppGitHubGenericMarkdown } from "@/components/libresplit/AppGitHubGenericMarkdown";
+
+export function Themes() {
+  return (
+    <div>
+      <AppGitHubGenericMarkdown url="https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/docs/themes.md" />
+    </div>
+  );
+}

src/app/troubleshooting.tsx

@@ -0,0 +1,9 @@
+import { AppGitHubGenericMarkdown } from "@/components/libresplit/AppGitHubGenericMarkdown";
+
+export function Troubleshooting() {
+  return (
+    <div>
+      <AppGitHubGenericMarkdown url="https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/docs/troubleshooting.md" />
+    </div>
+  );
+}

src/components/libresplit/AppGitHubGenericMarkdown.tsx

@@ -0,0 +1,37 @@
+import { AppLoading } from "./AppLoading";
+import { Markdown } from "@/lib/markdown";
+import { useQuery } from "@tanstack/react-query";
+
+async function fetchMarkdown(url: string): Promise<string> {
+  const res = await fetch(url);
+
+  if (!res.ok) {
+    throw new Error("Failed to fetch markdown from GitHub.");
+  }
+
+  return res.text();
+}
+
+type AppGitHubGenericMarkdownProps = {
+  url: string;
+};
+
+export function AppGitHubGenericMarkdown({
+  url,
+}: AppGitHubGenericMarkdownProps) {
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["markdown-text"],
+    queryFn: () => fetchMarkdown(url),
+    enabled: !!url,
+  });
+
+  if (isLoading) return <AppLoading />;
+  if (error) return <div>Failed to fetch markdown from GitHub.</div>;
+  if (!data) return <div>Failed to fetch markdown from GitHub.</div>;
+
+  return (
+    <div>
+      <Markdown content={data} />
+    </div>
+  );
+}

src/main.tsx

@@ -2,21 +2,26 @@ import { StrictMode } from "react";
 
 import App from "./app";
 import "./index.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ThemeProvider } from "next-themes";
 import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router";
 
+const queryClient = new QueryClient();
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <ThemeProvider
-      attribute="class"
-      defaultTheme="system"
-      enableSystem
-      disableTransitionOnChange
-    >
-      <BrowserRouter>
-        <App />
-      </BrowserRouter>
-    </ThemeProvider>
+    <QueryClientProvider client={queryClient}>
+      <ThemeProvider
+        attribute="class"
+        defaultTheme="system"
+        enableSystem
+        disableTransitionOnChange
+      >
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>
+      </ThemeProvider>
+    </QueryClientProvider>
   </StrictMode>,
 );

src/router.tsx

@@ -1,6 +1,11 @@
+import { AutoSplitters } from "./app/auto-splitters";
 import { Converter } from "./app/converter";
 import { Home } from "./app/home";
 import { NotFound } from "./app/not-found";
+import { SettingsKeybinds } from "./app/settings-keybinds";
+import { SplitFiles } from "./app/split-files";
+import { Themes } from "./app/themes";
+import { Troubleshooting } from "./app/troubleshooting";
 import { Route, Routes } from "react-router";
 
 export default function AppRouter() {
@@ -9,6 +14,13 @@ export default function AppRouter() {
       <Route path="/" element={<Home />} />
       <Route path="/converter" element={<Converter />} />
 
+      {/* Documentation pages pulled from GitHub. */}
+      <Route path="/docs/auto-splitters.md" element={<AutoSplitters />} />
+      <Route path="/docs/settings-keybinds.md" element={<SettingsKeybinds />} />
+      <Route path="/docs/split-files.md" element={<SplitFiles />} />
+      <Route path="/docs/themes.md" element={<Themes />} />
+      <Route path="/docs/troubleshooting.md" element={<Troubleshooting />} />
+
       {/* Fall back on app's 404 page. This is because of the SPA routing trick with 404.html used in GitHub Pages. */}
       <Route path="*" element={<NotFound />} />
     </Routes>

vite.config.ts

@@ -13,7 +13,14 @@ export default defineConfig({
     copyIndexTo404(),
     sitemap({
       hostname: "https://libresplit.org",
-      dynamicRoutes: ["/converter"],
+      dynamicRoutes: [
+        "/converter",
+        "/docs/auto-splitters.md",
+        "/docs/settings-keybinds.md",
+        "/docs/split-files.md",
+        "/docs/themes.md",
+        "/docs/troubleshooting.md",
+      ],
       exclude: ["/404"],
     }),
   ],