Feature: Better server hosting provider setup guide

src/components/Provider.tsx

@@ -1,8 +1,7 @@
 import type { HostingProvider, ProviderType } from "@site/src/types/providers";
 import ReactMarkdown from "react-markdown";
-import Admonition from '@theme/Admonition';
 import React, { useState } from 'react';
-import Translate, { translate } from "@docusaurus/Translate";
+import { translate } from "@docusaurus/Translate";
 import { providersData } from "../data/providers";
 
 export const noP = (props: { children: any; }) => {
@@ -29,7 +28,7 @@ export const Provider = ({ type }) => {
     )
 }
 
-export const ProviderSelector = () => {
+export const ProviderSelector = ({setProvider}) => {
     const providers: HostingProvider[] = [
         ...Object.values(providersData.built_in),
         ...Object.values(providersData.support), 
@@ -38,9 +37,17 @@ export const ProviderSelector = () => {
 
     providers.unshift({
         name: 'Not listed',
-        description: translate({
-            id: 'providers.provider.not_listed.description',
-            message: "If your hosting provider is not listed, try enabling the `clone-remote-port` option in the config. Then, restart the server, and try connecting with the same IP and port as on Java Edition. <br> If this does not work, ask your server hosting provider for a UDP port, and use that. For VPS/KVM servers please follow the self-hosting steps."
+        url: null,
+        config: {
+            clone_remote_port: true
+        },
+        connect_instructions: translate({
+            id: 'providers.connect.templates.java_ip_port',
+            message: 'Connect with the Java server IP and Java server port.'
+        }),
+        info: translate({
+            id: 'providers.provider.not_listed.info',
+            message: "If these instructions do not work, contact your server hosting provider and ask for a UDP port. Then, set clone-remote-port to false, and set 'bedrock port' to the port you got. For VPS/KVM servers, please follow the self-hosting steps."
         })
     } as HostingProvider);
 
@@ -51,6 +58,7 @@ export const ProviderSelector = () => {
         const selectedName = event.target.value;
         const provider = providers.find(p => p.name === selectedName);
         setSelectedProvider(provider);
+        setProvider(provider);
     }
 
     return (
@@ -63,15 +71,6 @@ export const ProviderSelector = () => {
                     </option>
                 ))}
             </select>
-            <Admonition type="tip" title={<Translate id='components.provider.instructions'>Provider Instructions</Translate>}>
-                {selectedProvider ? (
-                    <ReactMarkdown>{selectedProvider.description}</ReactMarkdown>
-                ) : (
-                    <p>
-                        <Translate id='components.provider.select'>Select a provider to see specific installation instructions</Translate>
-                    </p>
-                )}
-            </Admonition>
         </div>
     );
 }

src/types/providers.ts

@@ -3,7 +3,24 @@ import React from "react";
 export type HostingProvider = {
     name: string;
     url: string;
-    description: React.ReactNode;
+    hosting_article?: String; // Many hosts have their own articles for Geyser
+    hosting_support?: String; // A link to the host support, can show when setup help fails
+    custom_install_location?: React.ReactNode; // e.g. aternos, can skip the entire download/config process on setup guide
+    config?: ConfigDetails; // If present, geyser config must be modified to function
+    connect_instructions: React.ReactNode; // what players must input to connect
+    additional_step?: React.ReactNode; // e.g.: must enable udp in settings/enable geyser mode
+    info?: React.ReactNode; // Additional information. Displayed in info bubble.
+    warn?: React.ReactNode; // shaming server hosting providers with issues.
+}
+
+// Either: clone-remote-port, or
+export type ConfigDetails = {
+    port?: number;
+    address?: string;
+    clone_remote_port?: boolean;
+    port_instruction?: React.ReactNode; // Instructions on where to get a port
+    address_instruction?: React.ReactNode; // Instructions on where to get the bedrock address
+    other_instructions?: React.ReactNode; // Other message on which config settings can be changed
 }
 
 export type ProviderType = "built_in" | "support" | "no_support";

wiki/geyser/setup.mdx

@@ -4,60 +4,76 @@ page_sidebar: false
 description: Guides to setup Geyser on all supported platforms
 ---
 
-import Tabs from "@theme/Tabs";
-import TabItem from "@theme/TabItem";
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+import Admonition from '@theme/Admonition';
+import Translate from "@docusaurus/Translate";
 
-import ModdedServers from './setup/provider/modded-servers.mdx';
-import ProxyServers from './setup/provider/proxy-servers.mdx';
-import PaperSpigot from './setup/provider/paper-spigot.mdx';
+import ModdedServers from '@site/wiki/geyser/setup/provider/_modded-servers.mdx'
+import ProxyServers from '@site/wiki/geyser/setup/provider/_proxy-servers.mdx'
+import PaperSpigot from '@site/wiki/geyser/setup/provider/_paper-spigot.mdx'
 
-import ModdedServersSelf from './setup/self/modded-servers.mdx';
-import ProxyServersSelf from './setup/self/proxy-servers.mdx';
-import PaperSpigotSelf from './setup/self/paper-spigot.mdx';
-import ViaProxy from './setup/self/viaproxy.mdx';
-import Standalone from './setup/self/standalone.mdx';
+import ModdedServersSelf from '@site/wiki/geyser/setup/self/modded-servers.mdx'
+import ProxyServersSelf from '@site/wiki/geyser/setup/self/proxy-servers.mdx'
+import PaperSpigotSelf from '@site/wiki/geyser/setup/self/paper-spigot.mdx'
+import ViaProxy from '@site/wiki/geyser/setup/self/viaproxy.mdx'
+import Standalone from '@site/wiki/geyser/setup/self/standalone.mdx'
 
 import PlatformIcon from '@site/src/components/PlatformIcon'
-import ModIcon from '@site/static/img/icons/fabric.png';
-import ProxyServersIcon from '@site/static/img/icons/velocity.png';
-import PaperSpigotIcon from '@site/static/img/icons/paper.png';
-import ViaProxyIcon from '@site/static/img/icons/viaproxy.png';
-import StandaloneIcon from '@site/static/img/icons/geyser.png';
+import ModIcon from '@site/static/img/icons/fabric.png'
+import ProxyServersIcon from '@site/static/img/icons/velocity.png'
+import PaperSpigotIcon from '@site/static/img/icons/paper.png'
+import ViaProxyIcon from '@site/static/img/icons/viaproxy.png'
+import StandaloneIcon from '@site/static/img/icons/geyser.png'
 
-import { ProviderSelector } from "@site/src/components/Provider";
+import { ProviderSelector } from '@site/src/components/Provider'
+import { useState } from 'react'
 
-<Tabs queryString="host" className="tabs-host-type">
-    <TabItem value="provider" label="Host Provider" default>
-        <ProviderSelector/>
-        <Tabs queryString="platform">
-            <TabItem value="paper-spigot" label={<PlatformIcon img={PaperSpigotIcon} text="Paper / Spigot"/>} default>
-                <PaperSpigot/>
+export const SetupGuide = () => {
+    const [provider, setProvider] = useState(null)
+    return (
+        <Tabs queryString='host' className='tabs-host-type'>
+            <TabItem value='provider' label='Host Provider' default>
+                <ProviderSelector setProvider={setProvider} />
+                {provider ? (
+                    <>
+                        {provider.connect_instructions ? (
+                            <Tabs queryString='platform'>
+                                <TabItem value='paper-spigot' label={<PlatformIcon img={PaperSpigotIcon} text='Paper / Spigot' />} default>
+                                    <PaperSpigot provider={provider} />
+                                </TabItem>
+                                <TabItem value='modded-servers' label={<PlatformIcon img={ModIcon} text='Modded Servers' />}>
+                                    <ModdedServers provider={provider}/>
+                                </TabItem>
+                                <TabItem value='proxy-servers' label={<PlatformIcon img={ProxyServersIcon} text='Proxy Servers' />}>
+                                    <ProxyServers provider={provider}/>
+                                </TabItem>
+                            </Tabs>
+                        ) : (<Admonition type="warning" title={<Translate id='components.provider.no_support'>Not supported</Translate>}>{provider.warn}</Admonition>)}
+                    </>
+                ) : null}
             </TabItem>
-            <TabItem value="modded-servers" label={<PlatformIcon img={ModIcon} text="Modded Servers"/>}>
-                <ModdedServers/>
-            </TabItem>
-            <TabItem value="proxy-servers" label={<PlatformIcon img={ProxyServersIcon} text="Proxy Servers"/>}>
-                <ProxyServers/>
-            </TabItem>
-        </Tabs>
-    </TabItem>
-    <TabItem value="self" label="Self Host">
-        <Tabs queryString="platform">
-            <TabItem value="paper-spigot" label={<PlatformIcon img={PaperSpigotIcon} text="Paper / Spigot"/>} default>
-                <PaperSpigotSelf/>
-            </TabItem>
-            <TabItem value="modded-servers" label={<PlatformIcon img={ModIcon} text="Modded Servers"/>}>
-                <ModdedServersSelf/>
-            </TabItem>
-            <TabItem value="proxy-servers" label={<PlatformIcon img={ProxyServersIcon} text="Proxy Servers"/>}>
-                <ProxyServersSelf/>
-            </TabItem>
-            <TabItem value="viaproxy" label={<PlatformIcon img={ViaProxyIcon} text="ViaProxy"/>}>
-                <ViaProxy/>
-            </TabItem>
-            <TabItem value="standalone" label={<PlatformIcon img={StandaloneIcon} text="Standalone"/>}>
-                <Standalone/>
+            <TabItem value='self' label='Self Host'>
+                <Tabs queryString='platform'>
+                    <TabItem value='paper-spigot' label={<PlatformIcon img={PaperSpigotIcon} text='Paper / Spigot' />} default>
+                        <PaperSpigotSelf />
+                    </TabItem>
+                    <TabItem value='modded-servers' label={<PlatformIcon img={ModIcon} text='Modded Servers' />}>
+                        <ModdedServersSelf />
+                    </TabItem>
+                    <TabItem value='proxy-servers' label={<PlatformIcon img={ProxyServersIcon} text='Proxy Servers' />}>
+                        <ProxyServersSelf />
+                    </TabItem>
+                    <TabItem value='viaproxy' label={<PlatformIcon img={ViaProxyIcon} text='ViaProxy' />}>
+                        <ViaProxy />
+                    </TabItem>
+                    <TabItem value='standalone' label={<PlatformIcon img={StandaloneIcon} text='Standalone' />}>
+                        <Standalone />
+                    </TabItem>
+                </Tabs>
             </TabItem>
         </Tabs>
-    </TabItem>
-</Tabs>
+    )
+}
+
+<SetupGuide />

wiki/geyser/setup/provider/_modded-servers.mdx

@@ -0,0 +1,70 @@
+import Admonition from '@theme/Admonition';
+
+import { Versions } from '@site/src/components/Versions'
+
+:::caution
+Geyser-Fabric and Geyser-NeoForge run **only** on a <Versions platform="java"/> server.
+See [this page](/wiki/geyser/supported-versions#fabric-neoforge-servers) for more details.
+:::
+
+:::info
+Geyser only works with **server-side** mods. Mods that require a client-side install will not work!
+:::
+
+{props.provider.warn ? <Admonition type="warning" title='Warn'>{props.provider.warn}</Admonition> : null}
+
+<h3>Installing Geyser:</h3>
+{props.provider.custom_install_location ? props.provider.custom_install_location : (
+    <ol>
+        <li>Download the mod from [the download page](/download).</li>
+        <li>Place the Geyser mod jar in the `mods` folder. **For Fabric, you will also need the [FabricAPI](https://modrinth.com/mod/fabric-api) mod.**</li>
+        <li>Restart the server.</li>
+    </ol>
+)}
+<br />
+
+{props.provider.config ? (
+    <>
+        <h3>Geyser config changes:</h3>
+        Open your Geyser config. It is located in `/config/Geyser-Fabric/config.yml` (or
+        `/config/Geyser-NeoForge/config.yml`), and change the following:
+        <ul>
+            {props.provider.config.address ? <li>Change the `address` to `{props.provider.config.address}`</li> : null}
+            {props.provider.config.port ? <li>Change the `port` to `{props.provider.config.port}`</li> : null}
+            {props.provider.config.clone_remote_port ? <li>Change `clone-remote-port` to `true`</li> : null}
+            {props.provider.config.port_instruction ? <li>{props.provider.config.port_instruction}</li> : null}
+            {props.provider.config.address_instruction ? <li>{props.provider.config.address_instruction}</li> : null}
+            {props.provider.config.other_instructions ? <li>{props.provider.config.other_instructions}</li> : null}
+        </ul>
+    </>
+) : null}
+
+{props.provider.additional_step ? (
+    <>
+        <h3>Additional Steps:</h3>
+        {props.provider.additional_step}
+        <br />
+    </>
+) : null}
+
+
+{props.provider.connect_instructions ? (
+    <>
+        <h3>Connecting on Bedrock:</h3>
+        {props.provider.connect_instructions}
+    </>
+) : null}
+
+
+{props.provider.info ? <Admonition type="info" title='Info'>{props.provider.info}</Admonition> : null}
+
+
+{props.provider.hosting_article || props.provider.hosting_support ? (
+    <>
+        <h4>More Information:</h4>
+        <ul>
+            {props.provider.hosting_article ? (<li><a href={props.provider.hosting_article} target='_blank'>Hosting provider article</a></li>) : null}
+            {props.provider.hosting_support ? (<li><a href={props.provider.hosting_support} target='_blank'>Hosting provider support</a></li>) : null}
+        </ul>
+    </>
+) : null}

wiki/geyser/setup/provider/_paper-spigot.mdx

@@ -0,0 +1,65 @@
+import Admonition from '@theme/Admonition';
+
+import { Versions } from '@site/src/components/Versions'
+
+:::info
+If your server is not running <Versions platform="java"/>, you will need to install <a href="https://viaversion.com/">ViaVersion</a>.
+See also [this page](/wiki/geyser/supported-versions/) on supported versions.
+:::
+
+{props.provider.warn ? <Admonition type="warning" title='Warn'>{props.provider.warn}</Admonition> : null}
+
+<h3>Installing Geyser:</h3>
+{props.provider.custom_install_location ? props.provider.custom_install_location : (
+    <ol>
+        <li>Download the plugin from [the download page](/download).</li>
+        <li>Place the Geyser-Spigot.jar in the `plugins` folder.</li>
+        <li>Restart the server.</li>
+    </ol>
+)}
+<br />
+
+{props.provider.config ? (
+    <>
+        <h3>Geyser config changes:</h3>
+        Open your Geyser config. It is located in `/plugins/Geyser-Spigot/config.yml`.
+        <ul>
+            {props.provider.config.address ? <li>Change the `address` to `{props.provider.config.address}`</li> : null}
+            {props.provider.config.port ? <li>Change the `port` to `{props.provider.config.port}`</li> : null}
+            {props.provider.config.clone_remote_port ? <li>Change `clone-remote-port` to `true`</li> : null}
+            {props.provider.config.port_instruction ? <li>{props.provider.config.port_instruction}</li> : null}
+            {props.provider.config.address_instruction ? <li>{props.provider.config.address_instruction}</li> : null}
+            {props.provider.config.other_instructions ? <li>{props.provider.config.other_instructions}</li> : null}
+        </ul>
+    </>
+) : null}
+
+{props.provider.additional_step ? (
+    <>
+        <h3>Additional Steps:</h3>
+        {props.provider.additional_step}
+        <br />
+    </>
+) : null}
+
+
+{props.provider.connect_instructions ? (
+    <>
+        <h3>Connecting on Bedrock:</h3>
+        {props.provider.connect_instructions}
+    </>
+) : null}
+<br />
+
+{props.provider.info ? <Admonition type="info" title='Info'>{props.provider.info}</Admonition> : null}
+
+
+{props.provider.hosting_article || props.provider.hosting_support ? (
+    <>
+        <h4>More Information:</h4>
+        <ul>
+            {props.provider.hosting_article ? (<li><a href={props.provider.hosting_article} target='_blank'>Hosting provider article</a></li>) : null}
+            {props.provider.hosting_support ? (<li><a href={props.provider.hosting_support} target='_blank'>Hosting provider support</a></li>) : null}
+        </ul>
+    </>
+) : null}