Implement pages for each documentation file

src/app/auto-splitters.tsx

@@ -0,0 +1,9 @@
+import { AppGitHubAutoSplitters } from "@/components/libresplit/AppGitHubAutoSplitters";
+
+export function AutoSplitters() {
+  return (
+    <div>
+      <AppGitHubAutoSplitters />
+    </div>
+  );
+}

src/app/settings-keybinds.tsx

@@ -0,0 +1,9 @@
+import { AppGitHubSettingsKeybinds } from "@/components/libresplit/AppGitHubSettingsKeybinds";
+
+export function SettingsKeybinds() {
+  return (
+    <div>
+      <AppGitHubSettingsKeybinds />
+    </div>
+  );
+}

src/app/split-files.tsx

@@ -0,0 +1,9 @@
+import { AppGitHubSplitFiles } from "@/components/libresplit/AppGitHubSplitFiles";
+
+export function SplitFiles() {
+  return (
+    <div>
+      <AppGitHubSplitFiles />
+    </div>
+  );
+}

src/app/themes.tsx

@@ -0,0 +1,9 @@
+import { AppGitHubThemes } from "@/components/libresplit/AppGitHubThemes";
+
+export function Themes() {
+  return (
+    <div>
+      <AppGitHubThemes />
+    </div>
+  );
+}

src/app/troubleshooting.tsx

@@ -0,0 +1,9 @@
+import { AppGitHubTroubleshooting } from "@/components/libresplit/AppGitHubTroubleshooting";
+
+export function Troubleshooting() {
+  return (
+    <div>
+      <AppGitHubTroubleshooting />
+    </div>
+  );
+}

src/components/libresplit/AppGitHubAutoSplitters.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+
+import { AppLoading } from "./AppLoading";
+import { Markdown } from "@/lib/markdown";
+
+export function AppGitHubAutoSplitters() {
+  const [autoSplitters, setAutoSplitters] = useState<string>("Loading...");
+  const [isLoading, setIsLoading] = useState(true);
+
+  const urlAutoSplitters =
+    "https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/docs/auto-splitters.md";
+
+  // Fetch markdown from GitHub page for LibreSplit, place into the readme state.
+  useEffect(() => {
+    fetch(urlAutoSplitters)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP Error! Status: ${res.status}`);
+        return res.text();
+      })
+      .then((text) => setAutoSplitters(text))
+      .catch(() => setAutoSplitters("Failed to load README from GitHub."))
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  if (isLoading) {
+    return <AppLoading />;
+  }
+
+  return (
+    <div>
+      <Markdown content={autoSplitters} />
+    </div>
+  );
+}

src/components/libresplit/AppGitHubSettingsKeybinds.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useState } from "react";
+
+import { AppLoading } from "./AppLoading";
+import { Markdown } from "@/lib/markdown";
+
+export function AppGitHubSettingsKeybinds() {
+  const [settingsKeybinds, setSettingsKeybinds] =
+    useState<string>("Loading...");
+  const [isLoading, setIsLoading] = useState(true);
+
+  const urlSettingsKeybinds =
+    "https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/docs/settings-keybinds.md";
+
+  // Fetch markdown from GitHub page for LibreSplit, place into the readme state.
+  useEffect(() => {
+    fetch(urlSettingsKeybinds)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP Error! Status: ${res.status}`);
+        return res.text();
+      })
+      .then((text) => setSettingsKeybinds(text))
+      .catch(() => setSettingsKeybinds("Failed to load README from GitHub."))
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  if (isLoading) {
+    return <AppLoading />;
+  }
+
+  return (
+    <div>
+      <Markdown content={settingsKeybinds} />
+    </div>
+  );
+}

src/components/libresplit/AppGitHubSplitFiles.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+import { AppLoading } from "./AppLoading";
+import { Markdown } from "@/lib/markdown";
+
+export function AppGitHubSplitFiles() {
+  const [splitFiles, setSplitFiles] = useState<string>("Loading...");
+  const [isLoading, setIsLoading] = useState(true);
+
+  const urlSplitFiles =
+    "https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/docs/split-files.md";
+
+  useEffect(() => {
+    fetch(urlSplitFiles)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP Error! Status: ${res.status}`);
+        return res.text();
+      })
+      .then((text) => setSplitFiles(text))
+      .catch(() => setSplitFiles("Failed to load README from GitHub."))
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  if (isLoading) {
+    return <AppLoading />;
+  }
+
+  return (
+    <div>
+      <Markdown content={splitFiles} />
+    </div>
+  );
+}

src/components/libresplit/AppGitHubThemes.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+import { AppLoading } from "./AppLoading";
+import { Markdown } from "@/lib/markdown";
+
+export function AppGitHubThemes() {
+  const [themes, setThemes] = useState<string>("Loading...");
+  const [isLoading, setIsLoading] = useState(true);
+
+  const urlThemes =
+    "https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/docs/themes.md";
+
+  useEffect(() => {
+    fetch(urlThemes)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP Error! Status: ${res.status}`);
+        return res.text();
+      })
+      .then((text) => setThemes(text))
+      .catch(() => setThemes("Failed to load README from GitHub."))
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  if (isLoading) {
+    return <AppLoading />;
+  }
+
+  return (
+    <div>
+      <Markdown content={themes} />
+    </div>
+  );
+}

src/components/libresplit/AppGitHubTroubleshooting.tsx

@@ -0,0 +1,33 @@
+import { useEffect, useState } from "react";
+
+import { AppLoading } from "./AppLoading";
+import { Markdown } from "@/lib/markdown";
+
+export function AppGitHubTroubleshooting() {
+  const [troubleshooting, setTroubleshooting] = useState<string>("Loading...");
+  const [isLoading, setIsLoading] = useState(true);
+
+  const urlTroubleshooting =
+    "https://raw.githubusercontent.com/LibreSplit/LibreSplit/refs/heads/main/docs/troubleshooting.md";
+
+  useEffect(() => {
+    fetch(urlTroubleshooting)
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP Error! Status: ${res.status}`);
+        return res.text();
+      })
+      .then((text) => setTroubleshooting(text))
+      .catch(() => setTroubleshooting("Failed to load README from GitHub."))
+      .finally(() => setIsLoading(false));
+  }, []);
+
+  if (isLoading) {
+    return <AppLoading />;
+  }
+
+  return (
+    <div>
+      <Markdown content={troubleshooting} />
+    </div>
+  );
+}

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 { Themes } from "./app/themes";
+import { Troubleshooting } from "./app/troubleshooting";
+import { AppGitHubSplitFiles } from "./components/libresplit/AppGitHubSplitFiles";
 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 */}
+      <Route path="/docs/auto-splitters.md" element={<AutoSplitters />} />
+      <Route path="/docs/settings-keybinds.md" element={<SettingsKeybinds />} />
+      <Route path="/docs/split-files.md" element={<AppGitHubSplitFiles />} />
+      <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"],
     }),
   ],