Files
3x-ui/docs/components/tools/reverse-proxy-generator.tsx
T
MHSanaei 9b91f0f42e docs: vendor the documentation site into the monorepo
Fold the standalone 3x-ui-docs project (Next.js 16 + Fumadocs, deployed to
docs.sanaei.dev) into docs/ so the panel and its documentation share a single
source of truth, the way sing-box keeps its docs in-tree. The old repo becomes
redundant and can be retired.

- Import the full site under docs/ (app, components, content, lib, public,
  scripts, config). The self-contained pnpm project sits alongside the existing
  engineering notes with no filename collisions.
- Re-point "Edit on GitHub" links from MHSanaei/3x-ui-docs to this repo's
  docs/content/docs path (docs/lib/shared.ts, docs/app/.../page.tsx).
- Add docs-ci.yml and docs-deploy.yml under .github/workflows/, scoped to
  docs/** and run with working-directory: docs, since GitHub only runs
  workflows from the repo-root .github/. deploy-static.yml's GitHub Pages
  publish (CNAME docs.sanaei.dev) carries over unchanged.

Follow-up (outside this commit): attach the docs.sanaei.dev custom domain to
this repository's Pages (or set the Vercel project's root directory to docs),
confirm the site is live from the monorepo, then delete MHSanaei/3x-ui-docs.
2026-07-07 23:07:14 +02:00

70 lines
2.3 KiB
TypeScript

'use client';
import { useState } from 'react';
import {
buildProxyConfig,
buildCertCommand,
type ProxyServer,
type CertTool,
type ReverseProxyOptions,
} from '@/lib/xray/reverse-proxy';
import { ToolFrame } from './tool-frame';
import { TextField, SelectField } from './shared/fields';
import { OutputBlock } from './shared/output-block';
export function ReverseProxyGenerator() {
const [server, setServer] = useState<ProxyServer>('nginx');
const [domain, setDomain] = useState('panel.example.com');
const [panelPort, setPanelPort] = useState('2053');
const [panelPath, setPanelPath] = useState('/panel');
const [certTool, setCertTool] = useState<CertTool>('certbot');
const options: ReverseProxyOptions = { server, domain, panelPort, panelPath, certTool };
return (
<ToolFrame
title="Reverse-proxy config generator"
description="Generate an Nginx or Caddy reverse-proxy config (with WebSocket support) and a matching certificate command."
>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
<SelectField
label="Server"
value={server}
onChange={(v) => setServer(v as ProxyServer)}
options={['nginx', 'caddy']}
/>
<TextField label="Domain" value={domain} onChange={setDomain} />
<TextField
label="Panel port"
value={panelPort}
onChange={setPanelPort}
inputMode="numeric"
/>
<TextField label="Panel web base path" value={panelPath} onChange={setPanelPath} />
{server === 'nginx' ? (
<SelectField
label="Certificate tool"
value={certTool}
onChange={(v) => setCertTool(v as CertTool)}
options={['certbot', 'acme.sh']}
/>
) : null}
</div>
<div className="mt-4 grid grid-cols-1 gap-4">
<OutputBlock
label={server === 'nginx' ? 'nginx server block' : 'Caddyfile'}
value={buildProxyConfig(options)}
/>
{server === 'nginx' ? (
<OutputBlock label="Obtain a certificate" value={buildCertCommand(options)} />
) : (
<p className="text-sm text-fd-muted-foreground">
Caddy obtains and renews TLS certificates automatically no extra command needed.
</p>
)}
</div>
</ToolFrame>
);
}