feat: implement basic HTTP server with static file serving and error handling

2025-10-05 22:58:56 -05:00
parent 009e72faca
commit 40625a9f74
7 changed files with 1944 additions and 1 deletions
--- a/src/server/README.md
+++ b/src/server/README.md
@@ -0,0 +1,78 @@
+# Amayo Docs (Static)
+
+Sitio web estático para documentar el flujo de creación de contenido dentro del bot Amayo. Incluye guías para items, mobs, áreas, niveles, logros, misiones, cofres, crafteos, mutaciones y consumibles.
+
+## 🚀 Características
+
+- UI moderna en una sola página con navegación responsiva.
+- Plantillas JSON listas para copiar en los modales del bot.
+- Resumen de servicios principales (`EconomyService`, `MinigamesService`).
+- Servidor HTTP minimalista (sin dependencias externas) pensado para Heroku.
+
+## 📦 Estructura
+
+```
+server/
+├── Procfile            # Entrada para Heroku (web: npm start)
+├── package.json        # Scripts y metadata del mini proyecto
+├── server.js           # Servidor Node para archivos estáticos
+├── public/
+│   ├── index.html      # Página principal con toda la documentación
+│   ├── 404.html        # Página de error
+│   └── assets/
+│       ├── css/styles.css
+│       └── js/main.js
+└── README.md           # Este archivo
+```
+
+## 🛠️ Uso local
+
+```bash
+cd server
+npm install  # (opcional, no se instalan paquetes pero genera package-lock)
+npm start
+```
+
+El sitio quedará disponible en `http://localhost:3000`.
+
+## ☁️ Despliegue en Heroku
+
+### 1. Crear una app nueva
+
+```bash
+heroku create amayo-docs
+```
+
+### 2. Empujar solo la carpeta `server`
+
+```bash
+git subtree push --prefix server heroku main
+```
+
+> Si prefieres desplegar desde otra rama, reemplaza `main` por la rama deseada.
+
+### 3. Variables recomendadas
+
+```bash
+heroku config:set NODE_ENV=production -a amayo-docs
+```
+
+La app usará el `Procfile` incluido (`web: npm start`).
+
+## 🔍 Validación
+
+Para asegurarte de que el servidor arranca sin errores de sintaxis:
+
+```bash
+node --check server/server.js
+```
+
+## 🧭 Próximos pasos sugeridos
+
+- Añadir ejemplos visuales (capturas o diagramas) en `public/assets/img/`.
+- Integrar métricas básicas (por ejemplo, contador simple con Cloudflare Analytics).
+- Automatizar despliegue usando GitHub Actions + Heroku API.
+
+---
+
+Made with ❤ para la comunidad de administradores que usan Amayo.
--- a/src/server/public/404.html
+++ b/src/server/public/404.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Página no encontrada | Amayo Docs</title>
+    <link rel="stylesheet" href="./assets/css/styles.css" />
+    <style>
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .error-card {
+        max-width: 32rem;
+        text-align: center;
+      }
+      .error-card h1 {
+        font-size: clamp(2.5rem, 7vw, 4rem);
+        margin-bottom: 0.5rem;
+      }
+      .error-card p {
+        margin-bottom: 1.5rem;
+      }
+      .error-card a {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+        color: rgba(129, 140, 248, 0.95);
+        font-weight: 600;
+        text-decoration: none;
+      }
+      .error-card a::after {
+        content: '↻';
+        font-size: 1.2rem;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="card error-card">
+      <h1>404</h1>
+      <p>No encontramos la página que buscabas.</p>
+      <a href="/">Regresar al índice</a>
+    </div>
+  </body>
+</html>
--- a/src/server/public/assets/css/styles.css
+++ b/src/server/public/assets/css/styles.css
@@ -0,0 +1,407 @@
+:root {
+  color-scheme: dark;
+}
+
+body {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
+
+code {
+  font-feature-settings: "calt" 0;
+}:root {
+  color-scheme: light dark;
+  --bg: #0f172a;
+  --bg-soft: rgba(15, 23, 42, 0.6);
+  --bg-card: rgba(15, 23, 42, 0.85);
+  --bg-card-light: #f8fafc;
+  --text: #0f172a;
+  --text-light: #f8fafc;
+  --accent: #6366f1;
+  --accent-soft: rgba(99, 102, 241, 0.15);
+  --border: rgba(148, 163, 184, 0.2);
+  --success: #22c55e;
+  --warning: #f59e0b;
+  --info: #0ea5e9;
+  --card-shadow: 0 24px 48px -24px rgba(15, 23, 42, 0.45);
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    sans-serif;
+  background: linear-gradient(180deg, #020617 0%, #0f172a 55%, #111827 100%);
+  color: var(--text-light);
+  min-height: 100vh;
+  line-height: 1.6;
+  display: flex;
+  flex-direction: column;
+}
+
+a {
+  color: inherit;
+}
+
+a:hover {
+  color: var(--accent);
+}
+
+.hero {
+  padding: clamp(3rem, 8vw, 6rem) clamp(2rem, 6vw, 5rem) clamp(2rem, 6vw, 4rem);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.hero::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 10% 20%, rgba(99, 102, 241, 0.35), transparent 55%),
+    radial-gradient(circle at 80% 10%, rgba(56, 189, 248, 0.25), transparent 60%),
+    radial-gradient(circle at 20% 80%, rgba(236, 72, 153, 0.15), transparent 65%);
+  opacity: 0.75;
+  z-index: 0;
+}
+
+.hero__content {
+  max-width: 60rem;
+  position: relative;
+  z-index: 1;
+}
+
+.hero h1 {
+  font-size: clamp(2.5rem, 4vw, 3.8rem);
+  margin-bottom: 1.2rem;
+  font-weight: 700;
+}
+
+.hero p {
+  max-width: 45rem;
+  font-size: 1.1rem;
+  color: rgba(248, 250, 252, 0.85);
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.hero__cta {
+  margin-top: 2.5rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+}
+
+.hero__meta {
+  margin-top: 2rem;
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+  position: relative;
+  z-index: 1;
+  justify-content: center;
+}
+
+.layout {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: clamp(1.5rem, 5vw, 3rem);
+  padding: 0 clamp(1.5rem, 6vw, 4rem) 4rem;
+}
+
+.badge {
+  background: rgba(15, 23, 42, 0.55);
+  border: 1px solid rgba(148, 163, 184, 0.35);
+  border-radius: 999px;
+  padding: 0.45rem 0.9rem;
+  font-size: 0.85rem;
+  letter-spacing: 0.02em;
+}
+
+.btn {
+  border: none;
+  border-radius: 999px;
+  padding: 0.75rem 1.6rem;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.btn.primary {
+  background: linear-gradient(90deg, var(--accent) 0%, #7c3aed 100%);
+  color: white;
+  box-shadow: 0 18px 36px -18px rgba(99, 102, 241, 0.85);
+}
+
+.btn.ghost {
+  background: rgba(15, 23, 42, 0.45);
+  border: 1px solid rgba(148, 163, 184, 0.4);
+  color: rgba(248, 250, 252, 0.9);
+}
+
+.btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 22px 40px -24px rgba(99, 102, 241, 0.9);
+}
+
+.toc {
+  position: sticky;
+  top: 1.5rem;
+  margin: 2rem auto;
+  padding: 1.5rem;
+  background: rgba(15, 23, 42, 0.5);
+  border: 1px solid var(--border);
+  border-radius: 1.25rem;
+  backdrop-filter: blur(24px);
+  width: min(90vw, 22rem);
+  box-shadow: var(--card-shadow);
+}
+
+.toc__title {
+  font-weight: 600;
+  margin-bottom: 1rem;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  font-size: 0.9rem;
+  color: rgba(148, 163, 184, 0.85);
+}
+
+.toc ul {
+  list-style: none;
+  display: grid;
+  gap: 0.65rem;
+}
+
+.toc a {
+  text-decoration: none;
+  color: rgba(226, 232, 240, 0.95);
+  font-size: 0.95rem;
+  transition: color 0.2s ease;
+}
+
+.content {
+  margin: 2rem auto 5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+  width: min(1100px, calc(100% - 4rem));
+  align-items: center;
+}
+
+.card {
+  padding: clamp(1.8rem, 3vw, 2.4rem);
+  border-radius: 1.5rem;
+  background: var(--bg-card);
+  border: 1px solid rgba(148, 163, 184, 0.2);
+  box-shadow: var(--card-shadow);
+  width: min(100%, 960px);
+  text-align: center;
+}
+
+.card h2 {
+  font-size: clamp(1.8rem, 2.8vw, 2.2rem);
+  margin-bottom: 1rem;
+}
+
+.card h3 {
+  font-size: 1.15rem;
+  margin-bottom: 0.75rem;
+}
+
+.card p {
+  color: rgba(226, 232, 240, 0.9);
+  margin-bottom: 1rem;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 48rem;
+}
+
+.card ul {
+  padding-left: 1.25rem;
+  margin-bottom: 1rem;
+  text-align: left;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 48rem;
+}
+
+.card li + li {
+  margin-top: 0.5rem;
+}
+
+.card__sub {
+  padding: 1.4rem;
+  border-radius: 1rem;
+  background: rgba(15, 23, 42, 0.55);
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  text-align: left;
+  width: 100%;
+}
+
+.grid {
+  display: grid;
+  gap: 1.25rem;
+  justify-items: center;
+}
+
+.grid.two {
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+}
+
+pre {
+  background: rgba(15, 23, 42, 0.8);
+  color: rgba(244, 244, 255, 0.95);
+  padding: 1rem 1.25rem;
+  border-radius: 1rem;
+  overflow-x: auto;
+  border: 1px solid rgba(99, 102, 241, 0.25);
+  font-size: 0.9rem;
+  margin: 0 auto 1rem;
+  max-width: 48rem;
+}
+
+code {
+  font-family: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, SFMono,
+    "Segoe UI Mono", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  padding: 0.15rem 0.35rem;
+  border-radius: 0.5rem;
+  background: rgba(99, 102, 241, 0.18);
+  color: #cbd5f5;
+}
+
+.card details {
+  background: rgba(15, 23, 42, 0.55);
+  border: 1px solid rgba(148, 163, 184, 0.14);
+  padding: 1rem 1.25rem;
+  border-radius: 1rem;
+  color: rgba(226, 232, 240, 0.9);
+  text-align: left;
+}
+
+.card details + details {
+  margin-top: 1rem;
+}
+
+.card details summary {
+  font-weight: 600;
+  cursor: pointer;
+  list-style: none;
+}
+
+.card details[open] summary {
+  color: rgba(129, 140, 248, 0.95);
+}
+
+.callout {
+  border-radius: 1.2rem;
+  padding: 1.25rem 1.5rem;
+  border: 1px solid transparent;
+  margin-top: 1.25rem;
+  display: flex;
+  gap: 1rem;
+}
+
+.callout strong {
+  font-weight: 700;
+}
+
+.callout.info {
+  background: rgba(14, 165, 233, 0.12);
+  border-color: rgba(14, 165, 233, 0.32);
+  color: rgba(125, 211, 252, 0.95);
+}
+
+.callout.success {
+  background: rgba(34, 197, 94, 0.12);
+  border-color: rgba(34, 197, 94, 0.32);
+  color: rgba(134, 239, 172, 0.95);
+}
+
+.callout.warning {
+  background: rgba(245, 158, 11, 0.12);
+  border-color: rgba(245, 158, 11, 0.35);
+  color: rgba(253, 224, 71, 0.95);
+}
+
+.footer {
+  margin-top: auto;
+  padding: 3rem 1.5rem;
+  text-align: center;
+  color: rgba(203, 213, 225, 0.7);
+  font-size: 0.95rem;
+}
+
+.footer a {
+  display: inline-block;
+  margin-top: 0.75rem;
+  color: rgba(129, 140, 248, 0.9);
+}
+
+@media (max-width: 1024px) {
+  body {
+    padding-bottom: 4rem;
+  }
+
+  .toc {
+    position: fixed;
+    inset: 0;
+    margin: 0;
+    max-width: none;
+    border-radius: 0;
+    z-index: 99;
+    transform: translateY(-110%);
+    transition: transform 0.25s ease;
+    overflow-y: auto;
+  }
+
+  .toc.open {
+    transform: translateY(0);
+  }
+
+  .toc ul {
+    padding-bottom: 4rem;
+  }
+
+  .content {
+    margin: 0 auto 4rem;
+    width: min(1100px, calc(100% - 2.5rem));
+  }
+
+  .layout {
+    padding: 0 clamp(1.25rem, 8vw, 3rem) 3.5rem;
+  }
+}
+
+@media (max-width: 640px) {
+  .hero__content {
+    max-width: 100%;
+  }
+
+  .hero__cta {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .card {
+    padding: 1.5rem;
+  }
+
+  .card__sub {
+    padding: 1.1rem;
+  }
+
+  pre {
+    font-size: 0.85rem;
+  }
+}
--- a/src/server/public/assets/js/main.js
+++ b/src/server/public/assets/js/main.js
@@ -0,0 +1,70 @@
+const toggleButton = document.querySelector("#toggle-nav");
+const toc = document.querySelector("#toc");
+
+const mobileOverlayClasses = [
+  "fixed",
+  "inset-0",
+  "z-50",
+  "mx-auto",
+  "max-w-md",
+  "overflow-y-auto",
+  "bg-slate-950/95",
+  "p-6",
+  "backdrop-blur"
+];
+
+const openToc = () => {
+  if (!toc) return;
+  toc.classList.remove("hidden");
+  if (window.innerWidth < 1024) {
+    toc.classList.add(...mobileOverlayClasses);
+    document.body.style.overflow = "hidden";
+  }
+};
+
+const closeToc = () => {
+  if (!toc) return;
+  toc.classList.remove(...mobileOverlayClasses);
+  document.body.style.overflow = "";
+  if (window.innerWidth < 1024) {
+    toc.classList.add("hidden");
+  }
+};
+
+const syncTocToViewport = () => {
+  if (!toc) return;
+  if (window.innerWidth >= 1024) {
+    toc.classList.remove("hidden", ...mobileOverlayClasses);
+    document.body.style.overflow = "";
+  } else {
+    toc.classList.add("hidden");
+    toc.classList.remove(...mobileOverlayClasses);
+    document.body.style.overflow = "";
+  }
+};
+
+if (toggleButton && toc) {
+  toggleButton.addEventListener("click", () => {
+    if (toc.classList.contains("hidden")) {
+      openToc();
+    } else {
+      closeToc();
+    }
+  });
+
+  toc.addEventListener("click", (event) => {
+    const target = event.target;
+    if (target instanceof HTMLAnchorElement) {
+      closeToc();
+    }
+  });
+}
+
+window.addEventListener("keydown", (event) => {
+  if (event.key === "Escape") {
+    closeToc();
+  }
+});
+
+window.addEventListener("resize", syncTocToViewport);
+window.addEventListener("load", syncTocToViewport);
--- a/src/server/public/index.html
+++ b/src/server/public/index.html
--- a/src/server/server.ts
+++ b/src/server/server.ts
@@ -0,0 +1,105 @@
+import { createServer, IncomingMessage, ServerResponse } from "node:http";
+import { promises as fs } from "node:fs";
+import path from "node:path";
+
+const publicDir = path.join(__dirname, "public");
+
+const MIME_TYPES: Record<string, string> = {
+  ".html": "text/html; charset=utf-8",
+  ".css": "text/css; charset=utf-8",
+  ".js": "application/javascript; charset=utf-8",
+  ".json": "application/json; charset=utf-8",
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".svg": "image/svg+xml",
+  ".webp": "image/webp",
+  ".ico": "image/x-icon",
+  ".woff": "font/woff",
+  ".woff2": "font/woff2",
+};
+
+const PORT = Number(process.env.PORT) || 3000;
+
+const resolvePath = (pathname: string): string => {
+  const decoded = decodeURIComponent(pathname);
+  let target = decoded;
+
+  if (target.endsWith("/")) {
+    target = `${target}index.html`;
+  }
+
+  if (!path.extname(target)) {
+    target = `${target}.html`;
+  }
+
+  return path.join(publicDir, target);
+};
+
+const sendResponse = async (
+  res: ServerResponse,
+  filePath: string,
+  statusCode = 200
+): Promise<void> => {
+  const extension = path.extname(filePath).toLowerCase();
+  const mimeType = MIME_TYPES[extension] || "application/octet-stream";
+  const cacheControl = extension.match(/\.(?:html)$/)
+    ? "no-cache"
+    : "public, max-age=86400, immutable";
+
+  const data = await fs.readFile(filePath);
+  res.writeHead(statusCode, {
+    "Content-Type": mimeType,
+    "Cache-Control": cacheControl,
+  });
+  res.end(data);
+};
+
+export const server = createServer(async (req: IncomingMessage, res: ServerResponse) => {
+  try {
+    // 🔒 Forzar HTTPS en producción (Heroku)
+    if (process.env.NODE_ENV === "production") {
+      const proto = req.headers["x-forwarded-proto"];
+      if (proto && proto !== "https") {
+        res.writeHead(301, {
+          Location: `https://${req.headers.host}${req.url}`,
+        });
+        return res.end();
+      }
+    }
+
+    const url = new URL(req.url ?? "/", `http://${req.headers.host ?? "localhost"}`);
+    const filePath = resolvePath(url.pathname);
+
+    if (!filePath.startsWith(publicDir)) {
+      res.writeHead(403);
+      res.end("Forbidden");
+      return;
+    }
+
+    try {
+      await sendResponse(res, filePath);
+    } catch (error: any) {
+      if (error.code === "ENOENT") {
+        const notFoundPath = path.join(publicDir, "404.html");
+        try {
+          await sendResponse(res, notFoundPath, 404);
+        } catch {
+          res.writeHead(404, { "Content-Type": "text/plain; charset=utf-8" });
+          res.end("404 - Recurso no encontrado");
+        }
+      } else if (error.code === "EISDIR") {
+        const indexPath = path.join(filePath, "index.html");
+        await sendResponse(res, indexPath);
+      } else {
+        console.error("[Server] Error al servir archivo:", error);
+        res.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
+        res.end("500 - Error interno del servidor");
+      }
+    }
+  } catch (error) {
+    console.error("[Server] Error inesperado:", error);
+    res.writeHead(500, { "Content-Type": "text/plain; charset=utf-8" });
+    res.end("500 - Error interno");
+  }
+});