docs: add docker compose generator (#22956)

* docs: add docker compose generator * docs: add more icon support * Update docs/src/components/DockerComposeGenerator/config/config.yaml Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update docs/src/components/DockerComposeGenerator/config/config.yaml Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update docs/src/components/DockerComposeGenerator/config/config.yaml Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Rename heading from 'Generic Hardware Acceleration' to 'Generic Hardware Devices' * Remove port 5000 configuration for security reasons Removed unauthenticated Web UI port 5000 from configuration due to security risks. * docs: remove 5000 port tips * docs: improve NVIDIA GPU count input * docs: add docker compose tabs * Update docs/src/components/DockerComposeGenerator/config/config.yaml Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update docs/src/components/DockerComposeGenerator/components/OtherOptions.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update docs/src/components/DockerComposeGenerator/config/config.yaml Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update docs/src/components/DockerComposeGenerator/config/config.yaml Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update docs/src/components/DockerComposeGenerator/components/StoragePaths.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update docs/src/components/DockerComposeGenerator/components/StoragePaths.tsx Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * Update docs/src/components/DockerComposeGenerator/config/config.yaml Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com> * docs: Adjust the position of the RTSP password variable option * docs: timezone change to select * docs: add hailo and memryX mx3 driver tips * docs: RTSP password is optional * docs: fix select style --------- Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
2026-07-23 12:19:04 +03:00 · 2026-05-03 13:56:51 -05:00
parent b6fd86a066
commit 882b3a8ffd
20 changed files with 2089 additions and 3 deletions
@@ -0,0 +1,108 @@
+import React from "react";
+import Admonition from "@theme/Admonition";
+import DeviceSelector from "./components/DeviceSelector";
+import HardwareOptions from "./components/HardwareOptions";
+import PortConfigSection from "./components/PortConfig";
+import StoragePaths from "./components/StoragePaths";
+import NvidiaGpuConfig from "./components/NvidiaGpuConfig";
+import OtherOptions from "./components/OtherOptions";
+import GeneratedOutput from "./components/GeneratedOutput";
+import { useConfigGenerator } from "./hooks/useConfigGenerator";
+import styles from "./styles.module.css";
+
+/**
+ * Simple markdown-link-to-React renderer for help text.
+ * Only supports [text](url) syntax — no nested brackets.
+ */
+function renderHelpText(text: string): React.ReactNode {
+  const parts = text.split(/(\[[^\]]+\]\([^)]+\))/g);
+  return parts.map((part, i) => {
+    const match = part.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+    if (match) {
+      return (
+        <a key={i} href={match[2]}>
+          {match[1]}
+        </a>
+      );
+    }
+    return <React.Fragment key={i}>{part}</React.Fragment>;
+  });
+}
+
+export default function DockerComposeGenerator() {
+  const {
+    deviceId, device, hardwareEnabled,
+    portEnabled,
+    nvidiaGpuCount, nvidiaGpuDeviceId,
+    configPath, mediaPath, rtspPassword, timezone, shmSize,
+    shmSizeError, gpuDeviceIdError, configPathError, mediaPathError,
+    hasAnyHardware, generatedYaml,
+    selectDevice, toggleHardware, togglePort,
+    handleShmSizeChange, handleConfigPathChange, handleMediaPathChange,
+    handleNvidiaGpuCountChange, handleNvidiaGpuDeviceIdChange,
+    setRtspPassword, setTimezone, isHardwareDisabled,
+  } = useConfigGenerator();
+
+  return (
+    <div className={styles.generator}>
+      <div className={styles.card}>
+        <DeviceSelector selectedId={deviceId} onSelect={selectDevice} />
+
+        {device.helpText && (
+          <Admonition type={device.helpType || "info"}>
+            {renderHelpText(device.helpText)}
+          </Admonition>
+        )}
+
+        {device.needsNvidiaConfig && (
+          <NvidiaGpuConfig
+            gpuCount={nvidiaGpuCount}
+            gpuDeviceId={nvidiaGpuDeviceId}
+            gpuDeviceIdError={gpuDeviceIdError}
+            onGpuCountChange={handleNvidiaGpuCountChange}
+            onGpuDeviceIdChange={handleNvidiaGpuDeviceIdChange}
+          />
+        )}
+
+        <HardwareOptions
+          deviceId={deviceId}
+          hardwareEnabled={hardwareEnabled}
+          onToggle={toggleHardware}
+          isDisabled={isHardwareDisabled}
+        />
+
+        <StoragePaths
+          configPath={configPath}
+          mediaPath={mediaPath}
+          configPathError={configPathError}
+          mediaPathError={mediaPathError}
+          onConfigPathChange={handleConfigPathChange}
+          onMediaPathChange={handleMediaPathChange}
+        />
+
+        <PortConfigSection
+          portEnabled={portEnabled}
+          onTogglePort={togglePort}
+        />
+
+        <OtherOptions
+          rtspPassword={rtspPassword}
+          timezone={timezone}
+          shmSize={shmSize}
+          shmSizeError={shmSizeError}
+          onRtspPasswordChange={setRtspPassword}
+          onTimezoneChange={setTimezone}
+          onShmSizeChange={handleShmSizeChange}
+        />
+
+        <GeneratedOutput
+          yaml={generatedYaml}
+          configPath={configPath}
+          mediaPath={mediaPath}
+          hasAnyHardware={hasAnyHardware}
+          deviceId={deviceId}
+        />
+      </div>
+    </div>
+  );
+}