Add page generation for documentation (#25)

Author: JackTench

package-lock.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",

package.json

@@ -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/auto-splitters.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/home.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/settings-keybinds.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/split-files.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/themes.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/app/troubleshooting.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>
+  );
+}