mirror of
https://github.com/dalbodeule/hop-gate.git
synced 2025-12-08 12:55:44 +09:00
[feat](errorpages): add custom templates for HTTP errors and assets
- Implemented custom HTML templates for `400`, `404`, `500`, and `525` error pages with multilingual support. - Added embedded file system for error page templates and assets. - Introduced fallback mechanism to serve minimal plain text for missing error templates. - Integrated TailwindCSS for styling error pages, with a build script in `package.json`.
This commit is contained in:
dalbodeule
33
internal/errorpages/templates/400.html
Normal file
33
internal/errorpages/templates/400.html
Normal file
@@ -0,0 +1,33 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>400 Bad Request - HopGate</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Tailwind build output should be bundled into this file -->
|
||||
<link rel="stylesheet" href="/__hopgate_assets__/errors.css">
|
||||
</head>
|
||||
<body class="min-h-screen bg-slate-950 text-slate-50 flex items-center justify-center px-4">
|
||||
<div class="w-full max-w-xl text-center">
|
||||
<div class="inline-flex items-center gap-3 mb-8">
|
||||
<img src="/__hopgate_assets__/hop-gate.png" alt="HopGate" class="h-8 w-auto opacity-90" />
|
||||
<span class="text-sm font-medium tracking-[0.25em] uppercase text-slate-400">HopGate</span>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex items-baseline gap-4 mb-4">
|
||||
<span class="text-6xl md:text-7xl font-extrabold tracking-[0.25em] text-amber-300">400</span>
|
||||
<span class="text-lg md:text-xl font-semibold text-slate-100">Bad Request</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm md:text-base text-slate-300 leading-relaxed">
|
||||
The request was malformed or invalid.<br>
|
||||
요청 형식이 올바르지 않거나 지원되지 않습니다.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 text-xs md:text-sm text-slate-500">
|
||||
If you typed the URL directly, please check it for spelling.<br>
|
||||
URL을 직접 입력하셨다면 철자를 다시 한 번 확인해 주세요.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
internal/errorpages/templates/404.html
Normal file
32
internal/errorpages/templates/404.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>404 Not Found - HopGate</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/__hopgate_assets__/errors.css">
|
||||
</head>
|
||||
<body class="min-h-screen bg-slate-950 text-slate-50 flex items-center justify-center px-4">
|
||||
<div class="w-full max-w-xl text-center">
|
||||
<div class="inline-flex items-center gap-3 mb-8">
|
||||
<img src="/__hopgate_assets__/hop-gate.png" alt="HopGate" class="h-8 w-auto opacity-90" />
|
||||
<span class="text-sm font-medium tracking-[0.25em] uppercase text-slate-400">HopGate</span>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex items-baseline gap-4 mb-4">
|
||||
<span class="text-6xl md:text-7xl font-extrabold tracking-[0.25em] text-sky-400">404</span>
|
||||
<span class="text-lg md:text-xl font-semibold text-slate-100">Domain or page not found</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm md:text-base text-slate-300 leading-relaxed">
|
||||
The requested domain or path does not exist on this HopGate edge.<br>
|
||||
요청하신 도메인 또는 경로를 찾을 수 없습니다.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 text-xs md:text-sm text-slate-500">
|
||||
Please check the URL or try again later.<br>
|
||||
URL을 다시 확인하시거나 잠시 후 다시 시도해 주세요.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
internal/errorpages/templates/500.html
Normal file
32
internal/errorpages/templates/500.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>500 Internal Server Error - HopGate</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/__hopgate_assets__/errors.css">
|
||||
</head>
|
||||
<body class="min-h-screen bg-slate-950 text-slate-50 flex items-center justify-center px-4">
|
||||
<div class="w-full max-w-xl text-center">
|
||||
<div class="inline-flex items-center gap-3 mb-8">
|
||||
<img src="/__hopgate_assets__/hop-gate.png" alt="HopGate" class="h-8 w-auto opacity-90" />
|
||||
<span class="text-sm font-medium tracking-[0.25em] uppercase text-slate-400">HopGate</span>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex items-baseline gap-4 mb-4">
|
||||
<span class="text-6xl md:text-7xl font-extrabold tracking-[0.25em] text-rose-400">500</span>
|
||||
<span class="text-lg md:text-xl font-semibold text-slate-100">Internal Server Error</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm md:text-base text-slate-300 leading-relaxed">
|
||||
Something went wrong while processing your request.<br>
|
||||
요청을 처리하는 중 서버 내부 오류가 발생했습니다.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 text-xs md:text-sm text-slate-500">
|
||||
The issue has been logged and may be investigated by the operator.<br>
|
||||
이 문제는 로그로 기록되었으며, 운영자가 확인할 수 있습니다.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
32
internal/errorpages/templates/525.html
Normal file
32
internal/errorpages/templates/525.html
Normal file
@@ -0,0 +1,32 @@
|
||||
ㄱ<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>525 TLS Handshake Failed - HopGate</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="/__hopgate_assets__/errors.css">
|
||||
</head>
|
||||
<body class="min-h-screen bg-slate-950 text-slate-50 flex items-center justify-center px-4">
|
||||
<div class="w-full max-w-xl text-center">
|
||||
<div class="inline-flex items-center gap-3 mb-8">
|
||||
<img src="/__hopgate_assets__/hop-gate.png" alt="HopGate" class="h-8 w-auto opacity-90" />
|
||||
<span class="text-sm font-medium tracking-[0.25em] uppercase text-slate-400">HopGate</span>
|
||||
</div>
|
||||
|
||||
<div class="inline-flex items-baseline gap-4 mb-4">
|
||||
<span class="text-6xl md:text-7xl font-extrabold tracking-[0.25em] text-amber-300">525</span>
|
||||
<span class="text-lg md:text-xl font-semibold text-slate-100">TLS/DTLS Handshake Failed</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm md:text-base text-slate-300 leading-relaxed">
|
||||
The secure tunnel to the backend could not be established.<br>
|
||||
백엔드와의 TLS/DTLS 핸드셰이크에 실패하여 요청을 처리할 수 없습니다.
|
||||
</p>
|
||||
|
||||
<div class="mt-8 text-xs md:text-sm text-slate-500">
|
||||
This is usually a temporary issue between the edge and the origin service.<br>
|
||||
보통 엣지와 백엔드 서비스 간의 일시적인 문제일 수 있습니다.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user