Add initial troubleshooting tree framework

package.json

@@ -37,6 +37,7 @@
         "docusaurus-theme-openapi-docs": "^3.0.1",
         "prism-react-renderer": "^2.1.0",
         "react": "^18.0.0",
+        "react-decision-tree-flow": "^2.1.0",
         "react-dom": "^18.0.0",
         "react-markdown": "^9.0.0"
     },

src/components/TroubleshootingTree/StepProps.tsx

@@ -0,0 +1,7 @@
+export interface StepData {
+	path: string[];
+}
+
+export default interface StepProps {
+	data: StepData;
+}

src/components/TroubleshootingTree/index.tsx

@@ -0,0 +1,51 @@
+import { Controls, Step, useControls, Wizard } from 'react-decision-tree-flow'
+
+import Step1 from './steps/Step1'
+import Error from './steps/Error'
+import Step3 from './steps/Step3'
+import Step2 from './steps/Step2'
+import { useEffect, useState } from 'react'
+import { StepData } from './StepProps'
+
+const stepComponents = [
+	Step1,
+	Step2,
+	Step3,
+	Error
+]
+
+// Build the steps object from the stepComponents array
+function formatStepName(name: string): string {
+	return name.charAt(0).toLowerCase() + name.slice(1)
+}
+const steps = Object.fromEntries(stepComponents.map((Component) => [formatStepName(Component.name), Component]))
+
+// Make a tree so all steps can go to all others
+const tree = Object.fromEntries(Object.keys(steps).map((key, i, arr) => {
+	return [key, arr]
+}))
+
+function TreeInternals(): JSX.Element {
+	const [data, setData] = useState<StepData>({
+		path: []
+	})
+	
+	const { step } = useControls();
+	useEffect(() => {
+		setData(data => ({...data, path: [...data.path, step as string]}))
+	}, [step])
+
+	return (
+		<>
+			{Object.entries(steps).map(([name, Component]) => <Step key={name} name={name}><Component data={data}/></Step>)}
+		</>
+	)
+}
+
+export default function TroubleshootingTree(): JSX.Element {
+	return (
+		<Wizard tree={tree} first={Object.keys(steps)[0]}>
+			<TreeInternals />
+		</Wizard>
+	)
+}

src/components/TroubleshootingTree/steps/Error.tsx

@@ -0,0 +1,16 @@
+import { useControls } from "react-decision-tree-flow";
+import StepProps from "../StepProps";
+
+export default function Error({ data }: StepProps): JSX.Element {
+	const { step, tree, destinations, back } = useControls();
+
+	return (
+		<>
+			I am error
+			<br />
+			Path: {data.path.join(' -> ')}
+			<br />
+			<button onClick={() => destinations.step1({...data, path: [...data.path, step]})}>Go back to start</button>
+		</>
+	)
+}

src/components/TroubleshootingTree/steps/Step1.tsx

@@ -0,0 +1,14 @@
+import { useControls } from "react-decision-tree-flow";
+import StepProps from "../StepProps";
+
+export default function Step1({ data }: StepProps): JSX.Element {
+	const { step, tree, destinations, back } = useControls();
+
+	return (
+		<>
+			I am step 1
+			<br />
+			<button onClick={() => destinations.step2({...data, path: [...data.path, step]})}>Go to Step 2</button>
+		</>
+	)
+}

src/components/TroubleshootingTree/steps/Step2.tsx

@@ -0,0 +1,17 @@
+import { useControls } from "react-decision-tree-flow";
+import StepProps from "../StepProps";
+
+export default function Step2({ data }: StepProps): JSX.Element {
+	const { step, tree, destinations, back } = useControls();
+
+	return (
+		<>
+			I am step 2
+			<br />
+			<div>
+				<button onClick={() => destinations.error({...data, path: [...data.path, step]})}>Go to error</button>
+				<button onClick={() => destinations.step3({...data, path: [...data.path, step]})}>Go to Step 3</button>
+			</div>
+		</>
+	)
+}

src/components/TroubleshootingTree/steps/Step3.tsx

@@ -0,0 +1,12 @@
+import { useControls } from "react-decision-tree-flow";
+import StepProps from "../StepProps";
+
+export default function Step3({ data }: StepProps): JSX.Element {
+	const { step, tree, destinations, back } = useControls();
+
+	return (
+		<>
+			I am step 3. No steps after me!
+		</>
+	)
+}

wiki/geyser/fixing-unable-to-connect-to-world.mdx

@@ -3,6 +3,10 @@ title: Fixing 'Unable to Connect to World'
 description: Common issues and solutions for the 'Unable to Connect to World' error.
 ---
 
+import TroubleshootingTree from '@site/src/components/TroubleshootingTree';
+
+<TroubleshootingTree />
+
 ## Fixing 'Unable to Connect to World' errors {#fixing-unable-to-connect-to-world-errors}
 This is by far the most common error people get when attempting to set up Geyser. Here's some steps on how to solve it.
 Usually, this error is caused by improper configuration of Geyser, or issues with your network.