Implementación completa del sitio JAILGAMES (bloques A–J)
Sitio estático generado con Eleventy (11ty) + Nginx en Docker: - Plantillas Nunjucks con layout base, tarjetas y fichas individuales - Datos de juegos en YAML, colección ordenada por fecha - CSS con tema oscuro gaming y diseño responsive (3/2/1 columnas) - Lightbox vanilla JS para capturas de pantalla - Build multi-stage Docker (node:20-alpine → nginx:alpine) - 2 juegos de ejemplo con imágenes SVG placeholder Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,58 @@
|
||||
const yaml = require("js-yaml");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
// Parsear archivos YAML
|
||||
eleventyConfig.addDataExtension("yaml,yml", (contents) =>
|
||||
yaml.load(contents)
|
||||
);
|
||||
|
||||
// Copiar archivos estáticos al build
|
||||
// static/logo → _site/logo, static/games → _site/games
|
||||
eleventyConfig.addPassthroughCopy({ "static/logo": "logo" });
|
||||
eleventyConfig.addPassthroughCopy({ "static/games": "games" });
|
||||
eleventyConfig.addPassthroughCopy("downloads");
|
||||
eleventyConfig.addPassthroughCopy("src/css");
|
||||
eleventyConfig.addPassthroughCopy("src/js");
|
||||
|
||||
// Colección: todos los juegos ordenados por fecha
|
||||
eleventyConfig.addCollection("games", function () {
|
||||
const gamesDir = path.join(__dirname, "src", "games");
|
||||
const files = fs.readdirSync(gamesDir).filter((f) => f.endsWith(".yaml"));
|
||||
return files
|
||||
.map((f) => {
|
||||
const data = yaml.load(
|
||||
fs.readFileSync(path.join(gamesDir, f), "utf-8")
|
||||
);
|
||||
return data;
|
||||
})
|
||||
.sort((a, b) => new Date(b.release_date) - new Date(a.release_date));
|
||||
});
|
||||
|
||||
// Filtro para formatear fechas en español
|
||||
eleventyConfig.addFilter("dateFormat", function (dateStr) {
|
||||
const d = new Date(dateStr + "T00:00:00");
|
||||
return d.toLocaleDateString("es-ES", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
});
|
||||
|
||||
// Filtro Markdown para descripciones
|
||||
const markdownIt = require("markdown-it");
|
||||
const md = markdownIt({ html: true });
|
||||
eleventyConfig.addFilter("markdown", (content) => md.render(content || ""));
|
||||
|
||||
return {
|
||||
dir: {
|
||||
input: "src",
|
||||
includes: "_includes",
|
||||
data: "_data",
|
||||
output: "_site",
|
||||
},
|
||||
templateFormats: ["njk", "md"],
|
||||
htmlTemplateEngine: "njk",
|
||||
};
|
||||
};
|
||||
+14
@@ -0,0 +1,14 @@
|
||||
# Build output
|
||||
_site/
|
||||
|
||||
# Node
|
||||
node_modules/
|
||||
|
||||
# OS
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# Editor
|
||||
.vscode/
|
||||
.idea/
|
||||
*.swp
|
||||
+26
@@ -0,0 +1,26 @@
|
||||
# ---------- ETAPA 1: Build ----------
|
||||
FROM node:20-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
|
||||
COPY src/ src/
|
||||
COPY static/ static/
|
||||
COPY .eleventy.js ./
|
||||
|
||||
RUN npx @11ty/eleventy
|
||||
|
||||
# ---------- ETAPA 2: Servir ----------
|
||||
FROM nginx:alpine
|
||||
|
||||
# Configuración personalizada de Nginx
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Copiar el sitio generado
|
||||
COPY --from=builder /app/_site /usr/share/nginx/html
|
||||
|
||||
# Copiar descargas (no pasan por Eleventy)
|
||||
COPY downloads/ /usr/share/nginx/html/downloads/
|
||||
|
||||
EXPOSE 80
|
||||
@@ -0,0 +1,925 @@
|
||||
# JAILGAMES — Plan Técnico Completo
|
||||
|
||||
---
|
||||
|
||||
## 1. Arquitectura General
|
||||
|
||||
### Decisión: Eleventy (11ty) como generador de sitio estático
|
||||
|
||||
Se descartan tres alternativas y se elige una:
|
||||
|
||||
| Opción | Ventajas | Inconvenientes |
|
||||
|---|---|---|
|
||||
| HTML/CSS/JS puro | Sin dependencias | Hay que duplicar HTML por cada juego; cualquier cambio en el layout obliga a tocar todos los archivos |
|
||||
| Astro / Vite | Moderno, componentes | Pesado para <10 juegos; requiere Node + build complejo |
|
||||
| Microframework (Flask, Express) | Dinámico | Necesita servidor con runtime activo; innecesario para contenido estático en ferias |
|
||||
| **Eleventy (11ty)** | **Plantillas Nunjucks, lee JSON/YAML nativamente, genera HTML puro, cero JS en el navegador** | **Requiere Node para el build (no en producción)** |
|
||||
|
||||
**Justificación concreta:**
|
||||
|
||||
- **Mantenimiento sencillo**: añadir un juego = crear un archivo YAML + copiar imágenes. Nada más.
|
||||
- **Cero dependencias en producción**: el resultado es HTML/CSS/JS estático servido por Nginx.
|
||||
- **Funciona sin internet**: perfecto para ferias presenciales. Se sirve desde un portátil con Docker.
|
||||
- **Nginx en lugar de Apache**: más ligero, configuración mínima para servir estáticos. Si se prefiere Apache, el cambio es trivial (se indica en la sección Docker).
|
||||
|
||||
---
|
||||
|
||||
## 2. Estructura de Carpetas
|
||||
|
||||
```
|
||||
jailgames/
|
||||
├── src/ # ← Fuentes (nunca se sirven directamente)
|
||||
│ ├── _data/
|
||||
│ │ └── site.json # Datos globales (nombre del sitio, redes, etc.)
|
||||
│ ├── _includes/
|
||||
│ │ ├── base.njk # Layout base HTML (head, header, footer)
|
||||
│ │ ├── game-card.njk # Componente: tarjeta de juego para la home
|
||||
│ │ └── game-page.njk # Layout: ficha individual de juego
|
||||
│ ├── games/ # Un archivo YAML por juego
|
||||
│ │ ├── cosmic-escape.yaml
|
||||
│ │ ├── pixel-dungeon.yaml
|
||||
│ │ └── ...
|
||||
│ ├── css/
|
||||
│ │ └── style.css # Estilos globales
|
||||
│ ├── js/
|
||||
│ │ └── main.js # JS mínimo (lightbox, filtros, etc.)
|
||||
│ ├── index.njk # Página principal (home)
|
||||
│ └── game.njk # Plantilla que genera cada /game/slug/
|
||||
│
|
||||
├── static/ # ← Archivos copiados tal cual al build
|
||||
│ ├── logo/
|
||||
│ │ └── jailgames-logo.png # Logo general del sitio
|
||||
│ ├── games/ # Carpeta por juego (nombre = slug)
|
||||
│ │ ├── cosmic-escape/
|
||||
│ │ │ ├── logo.png
|
||||
│ │ │ ├── screenshot-1.png
|
||||
│ │ │ ├── screenshot-2.png
|
||||
│ │ │ └── screenshot-3.png
|
||||
│ │ └── pixel-dungeon/
|
||||
│ │ ├── logo.png
|
||||
│ │ └── ...
|
||||
│ └── favicon.ico
|
||||
│
|
||||
├── downloads/ # ← Binarios descargables
|
||||
│ ├── cosmic-escape/
|
||||
│ │ ├── cosmic-escape-v1.2-windows.zip
|
||||
│ │ ├── cosmic-escape-v1.2-linux.tar.gz
|
||||
│ │ └── cosmic-escape-v1.2-mac.dmg
|
||||
│ └── pixel-dungeon/
|
||||
│ └── ...
|
||||
│
|
||||
├── _site/ # ← Salida del build (se sirve con Nginx)
|
||||
│
|
||||
├── .eleventy.js # Configuración de Eleventy
|
||||
├── package.json
|
||||
├── Dockerfile
|
||||
├── docker-compose.yml
|
||||
├── nginx.conf # Configuración de Nginx
|
||||
└── README.md
|
||||
```
|
||||
|
||||
### Resumen de ubicaciones
|
||||
|
||||
| Contenido | Ruta |
|
||||
|---|---|
|
||||
| Datos de cada juego | `src/games/<slug>.yaml` |
|
||||
| Imágenes de cada juego | `static/games/<slug>/` |
|
||||
| Binarios descargables | `downloads/<slug>/` |
|
||||
| Plantillas HTML | `src/_includes/` |
|
||||
| Página principal | `src/index.njk` |
|
||||
| Logo del sitio | `static/logo/jailgames-logo.png` |
|
||||
| CSS | `src/css/style.css` |
|
||||
| Salida final | `_site/` |
|
||||
|
||||
---
|
||||
|
||||
## 3. Formato de Datos por Juego
|
||||
|
||||
Cada juego se define en un archivo YAML independiente dentro de `src/games/`. El nombre del archivo es el **slug** (identificador URL).
|
||||
|
||||
### Ejemplo: `src/games/cosmic-escape.yaml`
|
||||
|
||||
```yaml
|
||||
name: "Cosmic Escape"
|
||||
slug: "cosmic-escape"
|
||||
tagline: "Escapa de la estación antes de que colapse"
|
||||
description: |
|
||||
Un juego de plataformas 2D donde controlas a un astronauta atrapado en una
|
||||
estación espacial que se desmorona. Recoge oxígeno, esquiva meteoritos y
|
||||
encuentra la cápsula de escape antes de que se agote el tiempo.
|
||||
|
||||
Desarrollado en Godot Engine. Incluye 12 niveles y modo contrarreloj.
|
||||
|
||||
version: "1.2.0"
|
||||
release_date: "2025-11-15"
|
||||
tags:
|
||||
- plataformas
|
||||
- 2D
|
||||
- singleplayer
|
||||
|
||||
logo: "/games/cosmic-escape/logo.png"
|
||||
|
||||
screenshots:
|
||||
- "/games/cosmic-escape/screenshot-1.png"
|
||||
- "/games/cosmic-escape/screenshot-2.png"
|
||||
- "/games/cosmic-escape/screenshot-3.png"
|
||||
|
||||
downloads:
|
||||
- platform: "Windows"
|
||||
file: "/downloads/cosmic-escape/cosmic-escape-v1.2-windows.zip"
|
||||
size: "85 MB"
|
||||
- platform: "Linux"
|
||||
file: "/downloads/cosmic-escape/cosmic-escape-v1.2-linux.tar.gz"
|
||||
size: "78 MB"
|
||||
- platform: "macOS"
|
||||
file: "/downloads/cosmic-escape/cosmic-escape-v1.2-mac.dmg"
|
||||
size: "90 MB"
|
||||
|
||||
# Campos opcionales
|
||||
engine: "Godot 4.2"
|
||||
players: "1 jugador"
|
||||
genre: "Plataformas / Acción"
|
||||
repo: "https://gitea.local/jailgames/cosmic-escape" # Solo referencia interna
|
||||
```
|
||||
|
||||
### Campos obligatorios vs opcionales
|
||||
|
||||
| Campo | Obligatorio | Descripción |
|
||||
|---|---|---|
|
||||
| `name` | Sí | Nombre visible del juego |
|
||||
| `slug` | Sí | Identificador para URLs y carpetas |
|
||||
| `description` | Sí | Texto descriptivo (soporta párrafos) |
|
||||
| `version` | Sí | Versión del juego |
|
||||
| `release_date` | Sí | Fecha de publicación (YYYY-MM-DD) |
|
||||
| `downloads` | Sí | Al menos una entrada con platform/file/size |
|
||||
| `screenshots` | Sí | Al menos una captura |
|
||||
| `logo` | No | Si no existe, se usa una imagen placeholder |
|
||||
| `tagline` | No | Frase corta para la tarjeta de la home |
|
||||
| `tags` | No | Etiquetas para filtrar |
|
||||
| `engine` | No | Motor de desarrollo |
|
||||
| `players` | No | Número de jugadores |
|
||||
| `genre` | No | Género del juego |
|
||||
| `repo` | No | Enlace al repositorio (solo referencia) |
|
||||
|
||||
---
|
||||
|
||||
## 4. Generación de Páginas
|
||||
|
||||
### 4.1 Configuración de Eleventy (`.eleventy.js`)
|
||||
|
||||
```javascript
|
||||
const yaml = require("js-yaml");
|
||||
const fs = require("fs");
|
||||
const path = require("path");
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
// Parsear archivos YAML
|
||||
eleventyConfig.addDataExtension("yaml,yml", (contents) =>
|
||||
yaml.load(contents)
|
||||
);
|
||||
|
||||
// Copiar archivos estáticos al build
|
||||
eleventyConfig.addPassthroughCopy("static");
|
||||
eleventyConfig.addPassthroughCopy("downloads");
|
||||
eleventyConfig.addPassthroughCopy("src/css");
|
||||
eleventyConfig.addPassthroughCopy("src/js");
|
||||
|
||||
// Colección: todos los juegos ordenados por fecha
|
||||
eleventyConfig.addCollection("games", function () {
|
||||
const gamesDir = path.join(__dirname, "src", "games");
|
||||
const files = fs.readdirSync(gamesDir).filter((f) => f.endsWith(".yaml"));
|
||||
return files
|
||||
.map((f) => {
|
||||
const data = yaml.load(
|
||||
fs.readFileSync(path.join(gamesDir, f), "utf-8")
|
||||
);
|
||||
return data;
|
||||
})
|
||||
.sort((a, b) => new Date(b.release_date) - new Date(a.release_date));
|
||||
});
|
||||
|
||||
// Filtro para formatear fechas
|
||||
eleventyConfig.addFilter("dateFormat", function (dateStr) {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString("es-ES", {
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
});
|
||||
});
|
||||
|
||||
// Filtro Markdown para descripciones
|
||||
const markdownIt = require("markdown-it");
|
||||
const md = markdownIt({ html: true });
|
||||
eleventyConfig.addFilter("markdown", (content) => md.render(content || ""));
|
||||
|
||||
return {
|
||||
dir: {
|
||||
input: "src",
|
||||
includes: "_includes",
|
||||
data: "_data",
|
||||
output: "_site",
|
||||
},
|
||||
templateFormats: ["njk", "md"],
|
||||
htmlTemplateEngine: "njk",
|
||||
};
|
||||
};
|
||||
```
|
||||
|
||||
### 4.2 Página Principal (`src/index.njk`)
|
||||
|
||||
La home itera sobre la colección `games` y renderiza una tarjeta por cada juego.
|
||||
|
||||
```html
|
||||
---
|
||||
layout: base.njk
|
||||
title: "JAILGAMES — Nuestros Juegos"
|
||||
---
|
||||
|
||||
<section class="hero">
|
||||
<img src="/logo/jailgames-logo.png" alt="JAILGAMES" class="site-logo" />
|
||||
<p class="hero-subtitle">Juegos caseros, hechos con cariño</p>
|
||||
</section>
|
||||
|
||||
<section class="games-grid">
|
||||
{% for game in collections.games %}
|
||||
{% include "game-card.njk" %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
```
|
||||
|
||||
### 4.3 Tarjeta de Juego (`src/_includes/game-card.njk`)
|
||||
|
||||
```html
|
||||
<a href="/game/{{ game.slug }}/" class="game-card">
|
||||
<div class="game-card__image">
|
||||
{% if game.logo %}
|
||||
<img src="{{ game.logo }}" alt="{{ game.name }} logo" loading="lazy" />
|
||||
{% else %}
|
||||
<div class="game-card__placeholder">🎮</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="game-card__info">
|
||||
<h2 class="game-card__title">{{ game.name }}</h2>
|
||||
{% if game.tagline %}
|
||||
<p class="game-card__tagline">{{ game.tagline }}</p>
|
||||
{% endif %}
|
||||
<div class="game-card__meta">
|
||||
<span class="game-card__version">v{{ game.version }}</span>
|
||||
{% if game.tags %}
|
||||
{% for tag in game.tags %}
|
||||
<span class="game-card__tag">{{ tag }}</span>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
```
|
||||
|
||||
### 4.4 Generación de Fichas Individuales (`src/game.njk`)
|
||||
|
||||
Eleventy genera una página por cada archivo YAML mediante **paginación**:
|
||||
|
||||
```html
|
||||
---
|
||||
pagination:
|
||||
data: collections.games
|
||||
size: 1
|
||||
alias: game
|
||||
permalink: "/game/{{ game.slug }}/"
|
||||
layout: game-page.njk
|
||||
eleventyComputed:
|
||||
title: "{{ game.name }} — JAILGAMES"
|
||||
---
|
||||
```
|
||||
|
||||
### 4.5 Layout de Ficha (`src/_includes/game-page.njk`)
|
||||
|
||||
```html
|
||||
{% extends "base.njk" %}
|
||||
|
||||
{% block content %}
|
||||
<article class="game-detail">
|
||||
|
||||
<header class="game-detail__header">
|
||||
{% if game.logo %}
|
||||
<img src="{{ game.logo }}" alt="{{ game.name }}" class="game-detail__logo" />
|
||||
{% endif %}
|
||||
<div>
|
||||
<h1>{{ game.name }}</h1>
|
||||
{% if game.tagline %}<p class="game-detail__tagline">{{ game.tagline }}</p>{% endif %}
|
||||
<div class="game-detail__meta">
|
||||
<span>v{{ game.version }}</span>
|
||||
<span>{{ game.release_date | dateFormat }}</span>
|
||||
{% if game.genre %}<span>{{ game.genre }}</span>{% endif %}
|
||||
{% if game.players %}<span>{{ game.players }}</span>{% endif %}
|
||||
{% if game.engine %}<span>{{ game.engine }}</span>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<section class="game-detail__screenshots">
|
||||
{% for img in game.screenshots %}
|
||||
<img src="{{ img }}" alt="Captura de {{ game.name }}" loading="lazy"
|
||||
class="game-detail__screenshot" />
|
||||
{% endfor %}
|
||||
</section>
|
||||
|
||||
<section class="game-detail__description">
|
||||
{{ game.description | markdown | safe }}
|
||||
</section>
|
||||
|
||||
<section class="game-detail__downloads">
|
||||
<h2>Descargar</h2>
|
||||
<div class="download-buttons">
|
||||
{% for dl in game.downloads %}
|
||||
<a href="{{ dl.file }}" class="download-btn" download>
|
||||
<span class="download-btn__platform">{{ dl.platform }}</span>
|
||||
<span class="download-btn__size">{{ dl.size }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if game.tags %}
|
||||
<section class="game-detail__tags">
|
||||
{% for tag in game.tags %}
|
||||
<span class="tag">{{ tag }}</span>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<a href="/" class="back-link">← Volver al catálogo</a>
|
||||
|
||||
</article>
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
### 4.6 Descargas Locales
|
||||
|
||||
Las descargas se enlazan directamente a archivos en `/downloads/<slug>/`. El atributo `download` en el `<a>` fuerza la descarga en lugar de abrir el archivo en el navegador. Nginx sirve estos archivos como estáticos. No hay enlaces a Gitea ni servicios externos.
|
||||
|
||||
---
|
||||
|
||||
## 5. Diseño y Estilo
|
||||
|
||||
### 5.1 Framework CSS: PicoCSS
|
||||
|
||||
Se recomienda **PicoCSS** (`@picocss/pico`) por:
|
||||
|
||||
- Estilo limpio sin necesidad de clases (aplica estilos directamente a elementos HTML semánticos).
|
||||
- Muy ligero (~10 KB).
|
||||
- Soporte nativo de tema oscuro/claro.
|
||||
- Responsive por defecto.
|
||||
- Sin dependencias de build (se puede usar como archivo CSS estático).
|
||||
|
||||
Si se prefiere más control visual, la alternativa es **Tailwind CSS** (requiere build step).
|
||||
|
||||
### 5.2 Esquema de Layout
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ HEADER │
|
||||
│ [Logo JAILGAMES] Juegos caseros... │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ ┌──────┐ ┌──────┐ ┌──────┐ │
|
||||
│ │ Logo │ │ Logo │ │ Logo │ │
|
||||
│ │ │ │ │ │ │ │
|
||||
│ │ Name │ │ Name │ │ Name │ ← Grid │
|
||||
│ │ Tag │ │ Tag │ │ Tag │ 3 cols │
|
||||
│ └──────┘ └──────┘ └──────┘ │
|
||||
│ │
|
||||
│ ┌──────┐ ┌──────┐ │
|
||||
│ │ ... │ │ ... │ │
|
||||
│ └──────┘ └──────┘ │
|
||||
│ │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
│ JAILGAMES · Hecho con ♥ │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
**Ficha individual:**
|
||||
|
||||
```
|
||||
┌──────────────────────────────────────────────┐
|
||||
│ ← Volver HEADER │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ │
|
||||
│ [Logo] Nombre del Juego │
|
||||
│ v1.2.0 · 15 nov 2025 · Godot │
|
||||
│ │
|
||||
│ ┌──────────────────────────────────────┐ │
|
||||
│ │ Galería de capturas │ │
|
||||
│ │ [img1] [img2] [img3] │ │
|
||||
│ └──────────────────────────────────────┘ │
|
||||
│ │
|
||||
│ Descripción del juego en prosa... │
|
||||
│ Párrafo 1... │
|
||||
│ Párrafo 2... │
|
||||
│ │
|
||||
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
|
||||
│ │ Windows │ │ Linux │ │ macOS │ │
|
||||
│ │ 85 MB │ │ 78 MB │ │ 90 MB │ │
|
||||
│ └──────────┘ └──────────┘ └──────────┘ │
|
||||
│ │
|
||||
│ #plataformas #2D #singleplayer │
|
||||
│ │
|
||||
├──────────────────────────────────────────────┤
|
||||
│ FOOTER │
|
||||
└──────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 5.3 Diseño Responsive
|
||||
|
||||
- **Desktop (>1024px)**: Grid de 3 columnas para tarjetas.
|
||||
- **Tablet (768–1024px)**: Grid de 2 columnas.
|
||||
- **Móvil (<768px)**: 1 columna, capturas en scroll horizontal.
|
||||
|
||||
### 5.4 Paleta de Colores Sugerida
|
||||
|
||||
```css
|
||||
:root {
|
||||
--color-bg: #0f0f0f;
|
||||
--color-surface: #1a1a2e;
|
||||
--color-primary: #e94560;
|
||||
--color-secondary: #16213e;
|
||||
--color-text: #eaeaea;
|
||||
--color-text-muted: #a0a0a0;
|
||||
--color-accent: #0f3460;
|
||||
--color-success: #4ecca3;
|
||||
--font-main: "Inter", "Segoe UI", sans-serif;
|
||||
--font-heading: "Space Grotesk", "Inter", sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
Tema oscuro por defecto (estética gaming), con contraste suficiente para legibilidad.
|
||||
|
||||
---
|
||||
|
||||
## 6. Pipeline de Actualización
|
||||
|
||||
### Añadir un juego nuevo
|
||||
|
||||
```
|
||||
Paso 1 Crear el archivo YAML
|
||||
→ src/games/<slug>.yaml
|
||||
(copiar de un juego existente y modificar campos)
|
||||
|
||||
Paso 2 Crear carpeta de imágenes
|
||||
→ static/games/<slug>/
|
||||
Copiar: logo.png, screenshot-1.png, screenshot-2.png, ...
|
||||
|
||||
Paso 3 Crear carpeta de descargas
|
||||
→ downloads/<slug>/
|
||||
Copiar binarios: <slug>-v<version>-<platform>.<ext>
|
||||
|
||||
Paso 4 Verificar que las rutas en el YAML coinciden con los archivos copiados.
|
||||
|
||||
Paso 5 Regenerar el sitio:
|
||||
$ npm run build
|
||||
(Esto ejecuta: npx @11ty/eleventy)
|
||||
|
||||
Paso 6 Verificar localmente:
|
||||
$ npm run serve
|
||||
(Esto ejecuta: npx @11ty/eleventy --serve)
|
||||
Abrir http://localhost:8080 y comprobar.
|
||||
|
||||
Paso 7 Reconstruir el contenedor Docker:
|
||||
$ docker compose up --build -d
|
||||
```
|
||||
|
||||
### Modificar un juego existente
|
||||
|
||||
```
|
||||
Paso 1 Editar src/games/<slug>.yaml
|
||||
Paso 2 Si hay imágenes nuevas, copiarlas a static/games/<slug>/
|
||||
Paso 3 Si hay binarios nuevos, copiarlos a downloads/<slug>/
|
||||
Paso 4 Regenerar: npm run build
|
||||
Paso 5 Reconstruir Docker: docker compose up --build -d
|
||||
```
|
||||
|
||||
### Diagrama del flujo
|
||||
|
||||
```
|
||||
[YAML nuevo] + [Imágenes] + [Binarios]
|
||||
│
|
||||
▼
|
||||
npm run build ← Eleventy lee YAML, genera HTML
|
||||
│
|
||||
▼
|
||||
_site/ ← HTML/CSS/JS estático listo
|
||||
│
|
||||
▼
|
||||
docker compose up ← Nginx sirve _site/ + downloads/
|
||||
│
|
||||
▼
|
||||
http://localhost ← Web lista para la feria
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 7. Plan de Docker
|
||||
|
||||
### 7.1 Dockerfile
|
||||
|
||||
```dockerfile
|
||||
# ---------- ETAPA 1: Build ----------
|
||||
FROM node:20-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
COPY package.json package-lock.json ./
|
||||
RUN npm ci
|
||||
|
||||
COPY src/ src/
|
||||
COPY static/ static/
|
||||
COPY .eleventy.js ./
|
||||
|
||||
RUN npx @11ty/eleventy
|
||||
|
||||
# ---------- ETAPA 2: Servir ----------
|
||||
FROM nginx:alpine
|
||||
|
||||
# Configuración personalizada de Nginx
|
||||
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||
|
||||
# Copiar el sitio generado
|
||||
COPY --from=builder /app/_site /usr/share/nginx/html
|
||||
|
||||
# Copiar descargas (no pasan por Eleventy)
|
||||
COPY downloads/ /usr/share/nginx/html/downloads/
|
||||
|
||||
EXPOSE 80
|
||||
```
|
||||
|
||||
### 7.2 docker-compose.yml
|
||||
|
||||
```yaml
|
||||
version: "3.8"
|
||||
|
||||
services:
|
||||
jailgames:
|
||||
build: .
|
||||
container_name: jailgames-web
|
||||
ports:
|
||||
- "80:80"
|
||||
volumes:
|
||||
# Volumen para descargas: permite actualizar binarios
|
||||
# sin reconstruir la imagen completa
|
||||
- ./downloads:/usr/share/nginx/html/downloads:ro
|
||||
# Volumen para imágenes de juegos (opcional, misma idea)
|
||||
- ./static/games:/usr/share/nginx/html/games:ro
|
||||
restart: unless-stopped
|
||||
```
|
||||
|
||||
### 7.3 nginx.conf
|
||||
|
||||
```nginx
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Compresión para HTML/CSS/JS
|
||||
gzip on;
|
||||
gzip_types text/html text/css application/javascript application/json image/svg+xml;
|
||||
gzip_min_length 256;
|
||||
|
||||
# Cacheo agresivo para assets estáticos (feria local)
|
||||
location ~* \.(png|jpg|jpeg|gif|svg|ico|webp)$ {
|
||||
expires 7d;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# Descargas: forzar descarga en lugar de abrir en navegador
|
||||
location /downloads/ {
|
||||
add_header Content-Disposition "attachment";
|
||||
sendfile on;
|
||||
tcp_nopush on;
|
||||
}
|
||||
|
||||
# SPA fallback (por si se accede directamente a /game/slug/)
|
||||
location / {
|
||||
try_files $uri $uri/ $uri.html =404;
|
||||
}
|
||||
|
||||
# Página 404 personalizada
|
||||
error_page 404 /404.html;
|
||||
}
|
||||
```
|
||||
|
||||
### 7.4 Uso con Apache (alternativa)
|
||||
|
||||
Si se prefiere Apache, reemplazar la etapa 2 del Dockerfile:
|
||||
|
||||
```dockerfile
|
||||
FROM httpd:alpine
|
||||
COPY --from=builder /app/_site /usr/local/apache2/htdocs/
|
||||
COPY downloads/ /usr/local/apache2/htdocs/downloads/
|
||||
COPY apache.conf /usr/local/apache2/conf/httpd.conf
|
||||
EXPOSE 80
|
||||
```
|
||||
|
||||
### 7.5 Despliegue en Ferias sin Internet
|
||||
|
||||
```
|
||||
1. En la máquina de desarrollo (con internet):
|
||||
$ docker compose build
|
||||
$ docker save jailgames-web:latest | gzip > jailgames-image.tar.gz
|
||||
|
||||
2. Copiar jailgames-image.tar.gz al portátil de la feria (USB).
|
||||
|
||||
3. En el portátil de la feria (sin internet):
|
||||
$ gunzip -c jailgames-image.tar.gz | docker load
|
||||
$ docker run -d -p 80:80 \
|
||||
-v /ruta/local/downloads:/usr/share/nginx/html/downloads:ro \
|
||||
--name jailgames jailgames-web:latest
|
||||
|
||||
4. Abrir http://localhost en cualquier navegador.
|
||||
(O configurar un punto de acceso WiFi para que otros dispositivos
|
||||
se conecten a la IP local del portátil)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 8. Lista de Tareas para Claude Code
|
||||
|
||||
Copiar esta lista tal cual y dársela a Claude Code como instrucciones paso a paso.
|
||||
|
||||
---
|
||||
|
||||
### BLOQUE A — Inicialización del Proyecto
|
||||
|
||||
```
|
||||
TAREA A1: Crear la estructura de carpetas del proyecto "jailgames"
|
||||
|
||||
Crear los siguientes directorios:
|
||||
- src/_data/
|
||||
- src/_includes/
|
||||
- src/games/
|
||||
- src/css/
|
||||
- src/js/
|
||||
- static/logo/
|
||||
- static/games/
|
||||
- downloads/
|
||||
|
||||
TAREA A2: Inicializar package.json
|
||||
|
||||
Ejecutar: npm init -y
|
||||
Instalar dependencias:
|
||||
npm install --save-dev @11ty/eleventy js-yaml markdown-it
|
||||
|
||||
Añadir scripts a package.json:
|
||||
"build": "npx @11ty/eleventy",
|
||||
"serve": "npx @11ty/eleventy --serve --port=8080",
|
||||
"clean": "rm -rf _site"
|
||||
```
|
||||
|
||||
### BLOQUE B — Configuración de Eleventy
|
||||
|
||||
```
|
||||
TAREA B1: Crear .eleventy.js en la raíz del proyecto
|
||||
|
||||
Contenido: Configuración de Eleventy que:
|
||||
- Parsea archivos YAML con js-yaml
|
||||
- Copia "static" y "downloads" como passthrough
|
||||
- Copia "src/css" y "src/js" como passthrough
|
||||
- Crea una colección "games" leyendo todos los .yaml de src/games/
|
||||
- Ordena los juegos por release_date (más recientes primero)
|
||||
- Añade filtro "dateFormat" que formatea fechas en español
|
||||
- Añade filtro "markdown" que convierte texto a HTML con markdown-it
|
||||
- Input: src/, Output: _site/, Includes: _includes/, Data: _data/
|
||||
|
||||
TAREA B2: Crear src/_data/site.json
|
||||
|
||||
Contenido:
|
||||
{
|
||||
"name": "JAILGAMES",
|
||||
"tagline": "Juegos caseros, hechos con cariño",
|
||||
"url": "http://localhost",
|
||||
"lang": "es"
|
||||
}
|
||||
```
|
||||
|
||||
### BLOQUE C — Plantillas HTML (Nunjucks)
|
||||
|
||||
```
|
||||
TAREA C1: Crear src/_includes/base.njk
|
||||
|
||||
Layout base HTML5 que incluya:
|
||||
- DOCTYPE html, lang="es"
|
||||
- Meta charset, viewport
|
||||
- Title dinámico: {{ title }} o fallback a site.name
|
||||
- Enlace a /css/style.css
|
||||
- Header con logo de JAILGAMES (enlazado a /)
|
||||
- Bloque {% block content %}{% endblock %}
|
||||
- Footer con "JAILGAMES · Hecho con ♥"
|
||||
- Enlace a /js/main.js antes de cerrar body
|
||||
|
||||
TAREA C2: Crear src/_includes/game-card.njk
|
||||
|
||||
Componente tarjeta de juego:
|
||||
- Enlace <a> a /game/{{ game.slug }}/
|
||||
- Imagen del logo del juego (o placeholder si no hay logo)
|
||||
- Nombre del juego <h2>
|
||||
- Tagline si existe
|
||||
- Versión y tags en un div de metadatos
|
||||
|
||||
TAREA C3: Crear src/_includes/game-page.njk
|
||||
|
||||
Layout para ficha individual. Extiende base.njk. Incluye:
|
||||
- Header con logo del juego + nombre + tagline + metadatos
|
||||
(versión, fecha formateada, género, players, engine)
|
||||
- Sección de galería de capturas (iterar screenshots)
|
||||
- Sección de descripción (usar filtro markdown)
|
||||
- Sección de descargas: un botón por cada entrada en downloads
|
||||
(con atributo download, mostrar plataforma y tamaño)
|
||||
- Sección de tags
|
||||
- Enlace "← Volver al catálogo" a /
|
||||
|
||||
TAREA C4: Crear src/index.njk
|
||||
|
||||
Página principal:
|
||||
- Layout: base.njk
|
||||
- Sección hero con logo y subtítulo
|
||||
- Sección games-grid que itera collections.games
|
||||
e incluye game-card.njk para cada juego
|
||||
|
||||
TAREA C5: Crear src/game.njk
|
||||
|
||||
Plantilla de paginación que genera /game/<slug>/ para cada juego:
|
||||
- Front matter con pagination (data: collections.games, size: 1, alias: game)
|
||||
- Permalink: /game/{{ game.slug }}/
|
||||
- Layout: game-page.njk
|
||||
- eleventyComputed title
|
||||
```
|
||||
|
||||
### BLOQUE D — Estilos CSS
|
||||
|
||||
```
|
||||
TAREA D1: Crear src/css/style.css
|
||||
|
||||
Archivo CSS completo que incluya:
|
||||
- Variables CSS (colores tema oscuro gaming, fuentes)
|
||||
- Reset mínimo (box-sizing, margin 0)
|
||||
- Body: fondo oscuro, color claro, fuente sans-serif
|
||||
- .site-header: flex, centrado, con logo a la izquierda
|
||||
- .site-logo: max-height 60px
|
||||
- .hero: centrado, padding generoso
|
||||
- .hero-subtitle: color muted
|
||||
- .games-grid: CSS Grid, 3 columnas en desktop, 2 en tablet, 1 en móvil
|
||||
- .game-card: bloque con fondo surface, borde redondeado, hover con sombra,
|
||||
transición suave. Sin text-decoration.
|
||||
- .game-card__image img: object-fit contain, altura fija
|
||||
- .game-card__title: color blanco
|
||||
- .game-card__tagline: color muted, font-size pequeño
|
||||
- .game-card__tag: badge pequeño con color accent
|
||||
- .game-detail: max-width 900px, centrado, padding
|
||||
- .game-detail__header: flex, logo a la izquierda, info a la derecha
|
||||
- .game-detail__screenshots: grid o flex con scroll horizontal en móvil
|
||||
- .game-detail__screenshot: borde redondeado, max-width 100%
|
||||
- .download-buttons: flex, wrap
|
||||
- .download-btn: botón grande con color primary, hover,
|
||||
icono de plataforma si es posible
|
||||
- .tag: badge igual que game-card__tag
|
||||
- .back-link: estilo enlace simple
|
||||
- .site-footer: centrado, padding, color muted
|
||||
- Media queries para responsive (768px, 1024px)
|
||||
```
|
||||
|
||||
### BLOQUE E — JavaScript Mínimo
|
||||
|
||||
```
|
||||
TAREA E1: Crear src/js/main.js
|
||||
|
||||
Funcionalidad mínima:
|
||||
- Lightbox simple para capturas: al hacer clic en una screenshot,
|
||||
mostrarla en overlay a pantalla completa. Clic en overlay = cerrar.
|
||||
- (Opcional) Filtrado de juegos por tags en la home.
|
||||
- No usar frameworks, vanilla JS puro.
|
||||
```
|
||||
|
||||
### BLOQUE F — Datos de Ejemplo
|
||||
|
||||
```
|
||||
TAREA F1: Crear 2 archivos YAML de ejemplo en src/games/
|
||||
|
||||
Archivo 1: src/games/cosmic-escape.yaml
|
||||
- Rellenar con datos ficticios pero realistas
|
||||
- Incluir al menos 3 screenshots, 2 plataformas de descarga
|
||||
- Incluir todos los campos opcionales como ejemplo
|
||||
|
||||
Archivo 2: src/games/pixel-dungeon.yaml
|
||||
- Rellenar con datos ficticios diferentes
|
||||
- Incluir solo campos obligatorios (ejemplo minimalista)
|
||||
|
||||
TAREA F2: Crear imágenes placeholder
|
||||
|
||||
- static/logo/jailgames-logo.png → placeholder SVG o imagen genérica
|
||||
- static/games/cosmic-escape/logo.png → placeholder
|
||||
- static/games/cosmic-escape/screenshot-1.png → placeholder 800x450
|
||||
- static/games/cosmic-escape/screenshot-2.png → placeholder 800x450
|
||||
- static/games/pixel-dungeon/logo.png → placeholder
|
||||
|
||||
(Pueden ser SVGs generados con texto identificativo)
|
||||
|
||||
TAREA F3: Crear archivos de descarga de ejemplo
|
||||
|
||||
- downloads/cosmic-escape/README.txt
|
||||
(archivo de texto que diga "Aquí irá el binario de Cosmic Escape")
|
||||
- downloads/pixel-dungeon/README.txt
|
||||
(archivo de texto que diga "Aquí irá el binario de Pixel Dungeon")
|
||||
```
|
||||
|
||||
### BLOQUE G — Página 404
|
||||
|
||||
```
|
||||
TAREA G1: Crear src/404.njk
|
||||
|
||||
Página de error 404:
|
||||
- Layout: base.njk
|
||||
- Permalink: /404.html
|
||||
- Mensaje amigable: "Página no encontrada"
|
||||
- Enlace de vuelta a la home
|
||||
```
|
||||
|
||||
### BLOQUE H — Docker
|
||||
|
||||
```
|
||||
TAREA H1: Crear Dockerfile en la raíz
|
||||
|
||||
Multi-stage build:
|
||||
- Etapa 1 (builder): node:20-alpine, npm ci, npx @11ty/eleventy
|
||||
- Etapa 2 (serve): nginx:alpine, copiar _site y downloads, copiar nginx.conf
|
||||
|
||||
TAREA H2: Crear nginx.conf en la raíz
|
||||
|
||||
Configuración Nginx:
|
||||
- Puerto 80, root /usr/share/nginx/html
|
||||
- Gzip activado para text/html, text/css, application/javascript
|
||||
- Cache de imágenes 7 días
|
||||
- Descargas con Content-Disposition: attachment
|
||||
- try_files para rutas limpias
|
||||
- error_page 404 → /404.html
|
||||
|
||||
TAREA H3: Crear docker-compose.yml en la raíz
|
||||
|
||||
Servicio jailgames:
|
||||
- Build desde el directorio actual
|
||||
- Puerto 80:80
|
||||
- Volumen downloads como read-only
|
||||
- restart: unless-stopped
|
||||
```
|
||||
|
||||
### BLOQUE I — Documentación
|
||||
|
||||
```
|
||||
TAREA I1: Crear README.md en la raíz
|
||||
|
||||
Incluir:
|
||||
- Nombre del proyecto y descripción breve
|
||||
- Requisitos previos (Node.js 18+, Docker)
|
||||
- Cómo instalar dependencias (npm ci)
|
||||
- Cómo ejecutar en desarrollo (npm run serve)
|
||||
- Cómo hacer build (npm run build)
|
||||
- Cómo añadir un juego nuevo (los 7 pasos del pipeline)
|
||||
- Cómo desplegar con Docker (docker compose up --build)
|
||||
- Cómo desplegar sin internet (docker save/load)
|
||||
- Estructura de carpetas resumida
|
||||
```
|
||||
|
||||
### BLOQUE J — Verificación Final
|
||||
|
||||
```
|
||||
TAREA J1: Ejecutar npm run build y verificar que _site/ se genera correctamente.
|
||||
|
||||
TAREA J2: Ejecutar npm run serve y verificar en http://localhost:8080:
|
||||
- La home muestra las tarjetas de los 2 juegos de ejemplo
|
||||
- Hacer clic en una tarjeta lleva a la ficha individual
|
||||
- La ficha muestra logo, capturas, descripción y botones de descarga
|
||||
- Los botones de descarga funcionan (descargan el archivo)
|
||||
- El enlace "Volver" funciona
|
||||
- La página 404 funciona al visitar una ruta inexistente
|
||||
- El diseño es responsive (probar en móvil con DevTools)
|
||||
|
||||
TAREA J3: Ejecutar docker compose up --build y verificar en http://localhost:80
|
||||
que todo funciona igual que en J2.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Resumen Ejecutivo
|
||||
|
||||
| Aspecto | Decisión |
|
||||
|---|---|
|
||||
| Generador | Eleventy (11ty) |
|
||||
| Formato de datos | YAML (1 archivo por juego) |
|
||||
| Plantillas | Nunjucks |
|
||||
| CSS | CSS custom con tema oscuro (opcionalmente PicoCSS) |
|
||||
| Servidor | Nginx en Docker |
|
||||
| Build | Multi-stage Docker (Node → Nginx) |
|
||||
| Tiempo para añadir un juego | ~5 minutos (crear YAML + copiar archivos + rebuild) |
|
||||
| Funciona sin internet | Sí (docker save/load) |
|
||||
@@ -0,0 +1,151 @@
|
||||
# JAILGAMES
|
||||
|
||||
Sitio web estático para publicar y descargar juegos indie del estudio JAILGAMES.
|
||||
Generado con **Eleventy (11ty)** y servido con **Nginx en Docker**.
|
||||
|
||||
---
|
||||
|
||||
## Requisitos previos
|
||||
|
||||
- **Node.js 18+** (para el build local)
|
||||
- **Docker** + **Docker Compose** (para despliegue)
|
||||
|
||||
---
|
||||
|
||||
## Instalación
|
||||
|
||||
```bash
|
||||
npm ci
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Desarrollo local
|
||||
|
||||
```bash
|
||||
npm run serve
|
||||
```
|
||||
|
||||
Abre [http://localhost:8080](http://localhost:8080) en el navegador.
|
||||
Eleventy reconstruye automáticamente al guardar cambios.
|
||||
|
||||
---
|
||||
|
||||
## Build estático
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
El resultado queda en `_site/`. Para limpiar:
|
||||
|
||||
```bash
|
||||
npm run clean
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Añadir un juego nuevo
|
||||
|
||||
1. **Crear el archivo YAML** del juego:
|
||||
```
|
||||
src/games/<slug>.yaml
|
||||
```
|
||||
Copiar de un juego existente y modificar los campos. El `slug` es el identificador URL (solo letras minúsculas, números y guiones).
|
||||
|
||||
2. **Crear la carpeta de imágenes:**
|
||||
```
|
||||
static/games/<slug>/
|
||||
```
|
||||
Copiar: `logo.png` (o `.svg`), `screenshot-1.png`, `screenshot-2.png`, ...
|
||||
|
||||
3. **Crear la carpeta de descargas:**
|
||||
```
|
||||
downloads/<slug>/
|
||||
```
|
||||
Copiar los binarios: `<slug>-v<version>-<plataforma>.<ext>`
|
||||
|
||||
4. **Verificar** que las rutas en el YAML coinciden exactamente con los archivos copiados.
|
||||
|
||||
5. **Regenerar el sitio:**
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
6. **Verificar localmente:**
|
||||
```bash
|
||||
npm run serve
|
||||
```
|
||||
Abrir [http://localhost:8080](http://localhost:8080) y comprobar el juego nuevo.
|
||||
|
||||
7. **Reconstruir el contenedor Docker:**
|
||||
```bash
|
||||
docker compose up --build -d
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Despliegue con Docker
|
||||
|
||||
```bash
|
||||
docker compose up --build -d
|
||||
```
|
||||
|
||||
Acceder en [http://localhost](http://localhost).
|
||||
|
||||
Para detener:
|
||||
```bash
|
||||
docker compose down
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Despliegue sin internet (ferias)
|
||||
|
||||
**En la máquina con internet:**
|
||||
```bash
|
||||
docker compose build
|
||||
docker save jailgames-web:latest | gzip > jailgames-image.tar.gz
|
||||
```
|
||||
|
||||
**Copiar** `jailgames-image.tar.gz` al portátil de la feria (USB).
|
||||
|
||||
**En el portátil de la feria (sin internet):**
|
||||
```bash
|
||||
gunzip -c jailgames-image.tar.gz | docker load
|
||||
docker run -d -p 80:80 \
|
||||
-v /ruta/local/downloads:/usr/share/nginx/html/downloads:ro \
|
||||
--name jailgames jailgames-web:latest
|
||||
```
|
||||
|
||||
Abrir [http://localhost](http://localhost) en cualquier navegador.
|
||||
|
||||
---
|
||||
|
||||
## Estructura de carpetas
|
||||
|
||||
```
|
||||
jailgames/
|
||||
├── src/
|
||||
│ ├── _data/site.json # Datos globales del sitio
|
||||
│ ├── _includes/
|
||||
│ │ ├── base.njk # Layout base HTML
|
||||
│ │ ├── game-card.njk # Tarjeta de juego (home)
|
||||
│ │ └── game-page.njk # Ficha individual de juego
|
||||
│ ├── games/ # Un archivo YAML por juego
|
||||
│ ├── css/style.css # Estilos globales
|
||||
│ ├── js/main.js # JS mínimo (lightbox)
|
||||
│ ├── index.njk # Página principal
|
||||
│ ├── game.njk # Generador de fichas individuales
|
||||
│ └── 404.njk # Página de error 404
|
||||
├── static/
|
||||
│ ├── logo/ # Logo del sitio
|
||||
│ └── games/<slug>/ # Imágenes de cada juego
|
||||
├── downloads/<slug>/ # Binarios descargables
|
||||
├── _site/ # Build generado (no versionar)
|
||||
├── .eleventy.js # Configuración de Eleventy
|
||||
├── package.json
|
||||
├── Dockerfile
|
||||
├── docker-compose.yml
|
||||
└── nginx.conf
|
||||
```
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
services:
|
||||
jailgames:
|
||||
build: .
|
||||
container_name: jailgames-web
|
||||
ports:
|
||||
- "80:80"
|
||||
volumes:
|
||||
# Permite actualizar binarios sin reconstruir la imagen completa
|
||||
- ./downloads:/usr/share/nginx/html/downloads:ro
|
||||
# Permite actualizar imágenes de juegos sin reconstruir
|
||||
- ./static/games:/usr/share/nginx/html/games:ro
|
||||
restart: unless-stopped
|
||||
@@ -0,0 +1,15 @@
|
||||
Aquí irá el binario de Cosmic Escape.
|
||||
|
||||
Nombre del juego: Cosmic Escape
|
||||
Versión: 1.2.0
|
||||
Motor: Godot 4.2
|
||||
|
||||
Plataformas disponibles:
|
||||
- Windows: cosmic-escape-v1.2-windows.zip (~85 MB)
|
||||
- Linux: cosmic-escape-v1.2-linux.tar.gz (~78 MB)
|
||||
- macOS: cosmic-escape-v1.2-mac.dmg (~90 MB)
|
||||
|
||||
Instrucciones de instalación:
|
||||
Windows: Descomprimir el ZIP y ejecutar CosmiEscape.exe
|
||||
Linux: Descomprimir el tar.gz y ejecutar ./cosmic-escape
|
||||
macOS: Abrir el DMG y arrastrar la app a Aplicaciones
|
||||
@@ -0,0 +1,10 @@
|
||||
Aquí irá el binario de Pixel Dungeon.
|
||||
|
||||
Nombre del juego: Pixel Dungeon
|
||||
Versión: 0.9.1
|
||||
|
||||
Plataformas disponibles:
|
||||
- Windows: pixel-dungeon-v0.9.1-windows.zip (~22 MB)
|
||||
|
||||
Instrucciones de instalación:
|
||||
Windows: Descomprimir el ZIP y ejecutar PixelDungeon.exe
|
||||
+33
@@ -0,0 +1,33 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name localhost;
|
||||
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
# Compresión para HTML/CSS/JS
|
||||
gzip on;
|
||||
gzip_types text/html text/css application/javascript application/json image/svg+xml;
|
||||
gzip_min_length 256;
|
||||
|
||||
# Cacheo para assets estáticos (feria local)
|
||||
location ~* \.(png|jpg|jpeg|gif|svg|ico|webp)$ {
|
||||
expires 7d;
|
||||
add_header Cache-Control "public, immutable";
|
||||
}
|
||||
|
||||
# Descargas: forzar descarga en lugar de abrir en navegador
|
||||
location /downloads/ {
|
||||
add_header Content-Disposition "attachment";
|
||||
sendfile on;
|
||||
tcp_nopush on;
|
||||
}
|
||||
|
||||
# Rutas limpias
|
||||
location / {
|
||||
try_files $uri $uri/ $uri.html =404;
|
||||
}
|
||||
|
||||
# Página 404 personalizada
|
||||
error_page 404 /404.html;
|
||||
}
|
||||
Generated
+1525
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "web_jailgames",
|
||||
"version": "1.0.0",
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"build": "npx @11ty/eleventy",
|
||||
"serve": "npx @11ty/eleventy --serve --port=8080",
|
||||
"clean": "rm -rf _site"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitea.sustancia.synology.me/jaildesigner-utilitats/web_jailgames.git"
|
||||
},
|
||||
"keywords": [],
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.5",
|
||||
"js-yaml": "^4.1.1",
|
||||
"markdown-it": "^14.1.1"
|
||||
}
|
||||
}
|
||||
+12
@@ -0,0 +1,12 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: "404 — Página no encontrada — JAILGAMES"
|
||||
permalink: /404.html
|
||||
---
|
||||
|
||||
<div class="not-found">
|
||||
<h1>404</h1>
|
||||
<h2>Página no encontrada</h2>
|
||||
<p>La página que buscas no existe o ha sido movida.</p>
|
||||
<a href="/" class="download-btn" style="display:inline-flex;">← Volver al catálogo</a>
|
||||
</div>
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"name": "JAILGAMES",
|
||||
"tagline": "Juegos caseros, hechos con cariño",
|
||||
"url": "http://localhost",
|
||||
"lang": "es"
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="{{ site.lang | default('es') }}">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>{{ title if title else site.name }}</title>
|
||||
<link rel="stylesheet" href="/css/style.css" />
|
||||
<link rel="icon" href="/favicon.ico" type="image/x-icon" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="site-header">
|
||||
<a href="/" class="site-header__logo-link">
|
||||
<img src="/logo/jailgames-logo.svg" alt="{{ site.name }}" class="site-logo" />
|
||||
<span class="site-header__name">{{ site.name }}</span>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main class="site-main">
|
||||
{{ content | safe }}
|
||||
</main>
|
||||
|
||||
<footer class="site-footer">
|
||||
<p>{{ site.name }} · Hecho con ♥</p>
|
||||
</footer>
|
||||
|
||||
<script src="/js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,23 @@
|
||||
<a href="/game/{{ game.slug }}/" class="game-card">
|
||||
<div class="game-card__image">
|
||||
{% if game.logo %}
|
||||
<img src="{{ game.logo }}" alt="{{ game.name }} logo" loading="lazy" />
|
||||
{% else %}
|
||||
<div class="game-card__placeholder">🎮</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="game-card__info">
|
||||
<h2 class="game-card__title">{{ game.name }}</h2>
|
||||
{% if game.tagline %}
|
||||
<p class="game-card__tagline">{{ game.tagline }}</p>
|
||||
{% endif %}
|
||||
<div class="game-card__meta">
|
||||
<span class="game-card__version">v{{ game.version }}</span>
|
||||
{% if game.tags %}
|
||||
{% for tag in game.tags %}
|
||||
<span class="game-card__tag">{{ tag }}</span>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
layout: base.njk
|
||||
---
|
||||
<article class="game-detail">
|
||||
|
||||
<header class="game-detail__header">
|
||||
{% if game.logo %}
|
||||
<img src="{{ game.logo }}" alt="{{ game.name }}" class="game-detail__logo" />
|
||||
{% endif %}
|
||||
<div class="game-detail__header-info">
|
||||
<h1>{{ game.name }}</h1>
|
||||
{% if game.tagline %}
|
||||
<p class="game-detail__tagline">{{ game.tagline }}</p>
|
||||
{% endif %}
|
||||
<div class="game-detail__meta">
|
||||
<span>v{{ game.version }}</span>
|
||||
<span>{{ game.release_date | dateFormat }}</span>
|
||||
{% if game.genre %}<span>{{ game.genre }}</span>{% endif %}
|
||||
{% if game.players %}<span>{{ game.players }}</span>{% endif %}
|
||||
{% if game.engine %}<span>{{ game.engine }}</span>{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{% if game.screenshots and game.screenshots.length %}
|
||||
<section class="game-detail__screenshots">
|
||||
{% for img in game.screenshots %}
|
||||
<img src="{{ img }}" alt="Captura {{ loop.index }} de {{ game.name }}"
|
||||
loading="lazy" class="game-detail__screenshot" />
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<section class="game-detail__description">
|
||||
{{ game.description | markdown | safe }}
|
||||
</section>
|
||||
|
||||
<section class="game-detail__downloads">
|
||||
<h2>Descargar</h2>
|
||||
<div class="download-buttons">
|
||||
{% for dl in game.downloads %}
|
||||
<a href="{{ dl.file }}" class="download-btn" download>
|
||||
<span class="download-btn__platform">{{ dl.platform }}</span>
|
||||
<span class="download-btn__size">{{ dl.size }}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% if game.tags %}
|
||||
<section class="game-detail__tags">
|
||||
{% for tag in game.tags %}
|
||||
<span class="tag">{{ tag }}</span>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endif %}
|
||||
|
||||
<a href="/" class="back-link">← Volver al catálogo</a>
|
||||
|
||||
</article>
|
||||
@@ -0,0 +1,531 @@
|
||||
/* =============================================
|
||||
VARIABLES — Tema oscuro gaming
|
||||
============================================= */
|
||||
:root {
|
||||
--color-bg: #0f0f0f;
|
||||
--color-surface: #1a1a2e;
|
||||
--color-surface-hover: #22223a;
|
||||
--color-primary: #e94560;
|
||||
--color-primary-hover: #c73650;
|
||||
--color-secondary: #16213e;
|
||||
--color-text: #eaeaea;
|
||||
--color-text-muted: #a0a0a0;
|
||||
--color-accent: #0f3460;
|
||||
--color-success: #4ecca3;
|
||||
--color-border: #2a2a4a;
|
||||
--font-main: "Segoe UI", "Inter", system-ui, sans-serif;
|
||||
--font-heading: "Segoe UI", "Inter", system-ui, sans-serif;
|
||||
--radius: 8px;
|
||||
--radius-lg: 12px;
|
||||
--shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
--shadow-hover: 0 8px 32px rgba(233, 69, 96, 0.3);
|
||||
--transition: 0.2s ease;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
RESET MÍNIMO
|
||||
============================================= */
|
||||
*, *::before, *::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
BASE
|
||||
============================================= */
|
||||
body {
|
||||
background-color: var(--color-bg);
|
||||
color: var(--color-text);
|
||||
font-family: var(--font-main);
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
h1, h2, h3 {
|
||||
font-family: var(--font-heading);
|
||||
margin: 0 0 0.5em;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
HEADER
|
||||
============================================= */
|
||||
.site-header {
|
||||
background-color: var(--color-secondary);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
padding: 0.75rem 2rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.site-header__logo-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.site-logo {
|
||||
max-height: 48px;
|
||||
width: auto;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.site-header__name {
|
||||
font-family: var(--font-heading);
|
||||
font-size: 1.4rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
MAIN
|
||||
============================================= */
|
||||
.site-main {
|
||||
flex: 1;
|
||||
padding: 2rem 1.5rem;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
HERO
|
||||
============================================= */
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 3rem 1rem 2rem;
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
max-height: 120px;
|
||||
margin: 0 auto 1.5rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.2rem;
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
GAMES GRID
|
||||
============================================= */
|
||||
.games-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
GAME CARD
|
||||
============================================= */
|
||||
.game-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
color: var(--color-text);
|
||||
transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
|
||||
}
|
||||
|
||||
.game-card:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: var(--shadow-hover);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.game-card__image {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-color: var(--color-accent);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.game-card__image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.game-card__placeholder {
|
||||
font-size: 4rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.game-card__info {
|
||||
padding: 1rem 1.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.game-card__title {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
color: var(--color-text);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.game-card__tagline {
|
||||
font-size: 0.875rem;
|
||||
color: var(--color-text-muted);
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.game-card__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.4rem;
|
||||
margin-top: auto;
|
||||
padding-top: 0.5rem;
|
||||
}
|
||||
|
||||
.game-card__version {
|
||||
font-size: 0.75rem;
|
||||
color: var(--color-success);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.game-card__tag {
|
||||
font-size: 0.7rem;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-text);
|
||||
border-radius: 4px;
|
||||
padding: 0.15em 0.5em;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
GAME DETAIL
|
||||
============================================= */
|
||||
.game-detail {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.game-detail__header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1.5rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.game-detail__logo {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
object-fit: contain;
|
||||
border-radius: var(--radius);
|
||||
background-color: var(--color-accent);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.game-detail__header-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.game-detail__header-info h1 {
|
||||
font-size: 2rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.game-detail__tagline {
|
||||
font-size: 1rem;
|
||||
color: var(--color-text-muted);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.game-detail__meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.game-detail__meta span {
|
||||
font-size: 0.8rem;
|
||||
background-color: var(--color-surface);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
padding: 0.2em 0.6em;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
SCREENSHOTS
|
||||
============================================= */
|
||||
.game-detail__screenshots {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
overflow-x: auto;
|
||||
padding-bottom: 0.5rem;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-border) transparent;
|
||||
}
|
||||
|
||||
.game-detail__screenshot {
|
||||
width: 320px;
|
||||
min-width: 280px;
|
||||
height: 180px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--color-border);
|
||||
cursor: pointer;
|
||||
transition: transform var(--transition), box-shadow var(--transition);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.game-detail__screenshot:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
DESCRIPCIÓN
|
||||
============================================= */
|
||||
.game-detail__description {
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.game-detail__description p {
|
||||
margin: 0 0 1em;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
DESCARGAS
|
||||
============================================= */
|
||||
.game-detail__downloads {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.game-detail__downloads h2 {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 1rem;
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.download-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.75rem 1.5rem;
|
||||
background-color: var(--color-primary);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius);
|
||||
font-weight: 600;
|
||||
transition: background-color var(--transition), transform var(--transition);
|
||||
min-width: 120px;
|
||||
gap: 0.2rem;
|
||||
}
|
||||
|
||||
.download-btn:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.download-btn__platform {
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.download-btn__size {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.85;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
TAGS
|
||||
============================================= */
|
||||
.game-detail__tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.tag {
|
||||
font-size: 0.8rem;
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-text);
|
||||
border-radius: 4px;
|
||||
padding: 0.25em 0.7em;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
BACK LINK
|
||||
============================================= */
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-top: 1rem;
|
||||
color: var(--color-text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
transition: color var(--transition);
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
FOOTER
|
||||
============================================= */
|
||||
.site-footer {
|
||||
background-color: var(--color-secondary);
|
||||
border-top: 1px solid var(--color-border);
|
||||
text-align: center;
|
||||
padding: 1.5rem;
|
||||
color: var(--color-text-muted);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
404
|
||||
============================================= */
|
||||
.not-found {
|
||||
text-align: center;
|
||||
padding: 4rem 1rem;
|
||||
}
|
||||
|
||||
.not-found h1 {
|
||||
font-size: 5rem;
|
||||
color: var(--color-primary);
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.not-found p {
|
||||
color: var(--color-text-muted);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
LIGHTBOX
|
||||
============================================= */
|
||||
.lightbox-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.92);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
cursor: zoom-out;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.lightbox-overlay img {
|
||||
max-width: 95vw;
|
||||
max-height: 90vh;
|
||||
object-fit: contain;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.lightbox-close {
|
||||
position: absolute;
|
||||
top: 1.5rem;
|
||||
right: 1.5rem;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 2rem;
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0.25rem 0.5rem;
|
||||
opacity: 0.8;
|
||||
transition: opacity var(--transition);
|
||||
}
|
||||
|
||||
.lightbox-close:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
RESPONSIVE — Tablet (≤ 1024px)
|
||||
============================================= */
|
||||
@media (max-width: 1024px) {
|
||||
.games-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* =============================================
|
||||
RESPONSIVE — Móvil (≤ 768px)
|
||||
============================================= */
|
||||
@media (max-width: 768px) {
|
||||
.site-main {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.games-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.game-detail__header {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.game-detail__meta {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.game-detail__header-info h1 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.download-buttons {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.download-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.hero-logo {
|
||||
max-height: 80px;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
---
|
||||
pagination:
|
||||
data: collections.games
|
||||
size: 1
|
||||
alias: game
|
||||
permalink: "/game/{{ game.slug }}/"
|
||||
layout: game-page.njk
|
||||
eleventyComputed:
|
||||
title: "{{ game.name }} — JAILGAMES"
|
||||
---
|
||||
@@ -0,0 +1,40 @@
|
||||
name: "Cosmic Escape"
|
||||
slug: "cosmic-escape"
|
||||
tagline: "Escapa de la estación antes de que colapse"
|
||||
description: |
|
||||
Un juego de plataformas 2D donde controlas a un astronauta atrapado en una
|
||||
estación espacial que se desmorona. Recoge oxígeno, esquiva meteoritos y
|
||||
encuentra la cápsula de escape antes de que se agote el tiempo.
|
||||
|
||||
Desarrollado en Godot Engine. Incluye 12 niveles y modo contrarreloj.
|
||||
Ideal para partidas cortas e intensas.
|
||||
|
||||
version: "1.2.0"
|
||||
release_date: "2025-11-15"
|
||||
tags:
|
||||
- plataformas
|
||||
- 2D
|
||||
- singleplayer
|
||||
|
||||
logo: "/games/cosmic-escape/logo.svg"
|
||||
|
||||
screenshots:
|
||||
- "/games/cosmic-escape/screenshot-1.svg"
|
||||
- "/games/cosmic-escape/screenshot-2.svg"
|
||||
- "/games/cosmic-escape/screenshot-3.svg"
|
||||
|
||||
downloads:
|
||||
- platform: "Windows"
|
||||
file: "/downloads/cosmic-escape/README.txt"
|
||||
size: "85 MB"
|
||||
- platform: "Linux"
|
||||
file: "/downloads/cosmic-escape/README.txt"
|
||||
size: "78 MB"
|
||||
- platform: "macOS"
|
||||
file: "/downloads/cosmic-escape/README.txt"
|
||||
size: "90 MB"
|
||||
|
||||
engine: "Godot 4.2"
|
||||
players: "1 jugador"
|
||||
genre: "Plataformas / Acción"
|
||||
repo: "https://gitea.local/jailgames/cosmic-escape"
|
||||
@@ -0,0 +1,23 @@
|
||||
name: "Pixel Dungeon"
|
||||
slug: "pixel-dungeon"
|
||||
description: |
|
||||
Un roguelike de mazmorras con gráficos pixel art de 16x16. Explora
|
||||
generaciones procedurales de niveles, recoge objetos y derrota al jefe
|
||||
final. Cada partida es única.
|
||||
|
||||
version: "0.9.1"
|
||||
release_date: "2025-08-03"
|
||||
tags:
|
||||
- roguelike
|
||||
- pixel-art
|
||||
- singleplayer
|
||||
|
||||
logo: "/games/pixel-dungeon/logo.svg"
|
||||
|
||||
screenshots:
|
||||
- "/games/pixel-dungeon/screenshot-1.svg"
|
||||
|
||||
downloads:
|
||||
- platform: "Windows"
|
||||
file: "/downloads/pixel-dungeon/README.txt"
|
||||
size: "22 MB"
|
||||
@@ -0,0 +1,15 @@
|
||||
---
|
||||
layout: base.njk
|
||||
title: "JAILGAMES — Nuestros Juegos"
|
||||
---
|
||||
|
||||
<section class="hero">
|
||||
<img src="/logo/jailgames-logo.svg" alt="JAILGAMES" class="site-logo hero-logo" />
|
||||
<p class="hero-subtitle">{{ site.tagline }}</p>
|
||||
</section>
|
||||
|
||||
<section class="games-grid">
|
||||
{% for game in collections.games %}
|
||||
{% include "game-card.njk" %}
|
||||
{% endfor %}
|
||||
</section>
|
||||
@@ -0,0 +1,59 @@
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
// ── Lightbox para capturas de pantalla ──────────────────────────────────
|
||||
function initLightbox() {
|
||||
const screenshots = document.querySelectorAll(".game-detail__screenshot");
|
||||
if (!screenshots.length) return;
|
||||
|
||||
const overlay = document.createElement("div");
|
||||
overlay.className = "lightbox-overlay";
|
||||
overlay.setAttribute("role", "dialog");
|
||||
overlay.setAttribute("aria-modal", "true");
|
||||
overlay.setAttribute("aria-label", "Vista ampliada de captura");
|
||||
|
||||
const img = document.createElement("img");
|
||||
const closeBtn = document.createElement("button");
|
||||
closeBtn.className = "lightbox-close";
|
||||
closeBtn.textContent = "\u00D7";
|
||||
closeBtn.setAttribute("aria-label", "Cerrar");
|
||||
|
||||
overlay.appendChild(img);
|
||||
overlay.appendChild(closeBtn);
|
||||
|
||||
function open(src, alt) {
|
||||
img.src = src;
|
||||
img.alt = alt;
|
||||
document.body.appendChild(overlay);
|
||||
document.body.style.overflow = "hidden";
|
||||
closeBtn.focus();
|
||||
}
|
||||
|
||||
function close() {
|
||||
if (overlay.parentNode) {
|
||||
document.body.removeChild(overlay);
|
||||
document.body.style.overflow = "";
|
||||
}
|
||||
}
|
||||
|
||||
screenshots.forEach(function (el) {
|
||||
el.addEventListener("click", function () {
|
||||
open(el.src, el.alt);
|
||||
});
|
||||
});
|
||||
|
||||
overlay.addEventListener("click", function (e) {
|
||||
if (e.target === overlay) close();
|
||||
});
|
||||
|
||||
closeBtn.addEventListener("click", close);
|
||||
|
||||
document.addEventListener("keydown", function (e) {
|
||||
if (e.key === "Escape") close();
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
initLightbox();
|
||||
});
|
||||
})();
|
||||
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
|
||||
<rect width="200" height="200" fill="#0f3460" rx="12"/>
|
||||
<text x="100" y="90" text-anchor="middle" font-family="monospace" font-size="56" fill="#e94560">🚀</text>
|
||||
<text x="100" y="130" text-anchor="middle" font-family="monospace" font-size="13" fill="#eaeaea">COSMIC ESCAPE</text>
|
||||
<text x="100" y="155" text-anchor="middle" font-family="monospace" font-size="11" fill="#4ecca3">v1.2.0</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 496 B |
@@ -0,0 +1,12 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
|
||||
<rect width="800" height="450" fill="#0a0a1a"/>
|
||||
<rect x="0" y="380" width="800" height="70" fill="#1a1a2e"/>
|
||||
<circle cx="120" cy="80" r="40" fill="#f4d03f" opacity="0.8"/>
|
||||
<circle cx="300" cy="50" r="8" fill="#eaeaea" opacity="0.4"/>
|
||||
<circle cx="500" cy="120" r="5" fill="#eaeaea" opacity="0.5"/>
|
||||
<circle cx="700" cy="30" r="10" fill="#eaeaea" opacity="0.3"/>
|
||||
<rect x="350" y="250" width="40" height="60" fill="#4ecca3"/>
|
||||
<rect x="360" y="220" width="20" height="30" fill="#a0a0a0"/>
|
||||
<text x="400" y="430" text-anchor="middle" font-family="monospace" font-size="18" fill="#e94560">COSMIC ESCAPE — Nivel 1</text>
|
||||
<text x="400" y="230" text-anchor="middle" font-family="monospace" font-size="12" fill="#a0a0a0">[Captura 1 — Placeholder]</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 861 B |
@@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
|
||||
<rect width="800" height="450" fill="#16213e"/>
|
||||
<rect x="50" y="200" width="700" height="20" fill="#0f3460"/>
|
||||
<rect x="50" y="300" width="300" height="20" fill="#0f3460"/>
|
||||
<rect x="500" y="320" width="250" height="20" fill="#0f3460"/>
|
||||
<circle cx="200" cy="190" r="15" fill="#e94560" opacity="0.9"/>
|
||||
<circle cx="400" cy="290" r="15" fill="#e94560" opacity="0.7"/>
|
||||
<rect x="370" y="160" width="30" height="40" fill="#4ecca3"/>
|
||||
<text x="400" y="430" text-anchor="middle" font-family="monospace" font-size="18" fill="#e94560">COSMIC ESCAPE — Nivel 4</text>
|
||||
<text x="400" y="60" text-anchor="middle" font-family="monospace" font-size="12" fill="#a0a0a0">[Captura 2 — Placeholder]</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 799 B |
@@ -0,0 +1,10 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
|
||||
<rect width="800" height="450" fill="#1a0a0a"/>
|
||||
<rect x="0" y="350" width="800" height="100" fill="#2a1a1a"/>
|
||||
<ellipse cx="400" cy="200" rx="200" ry="120" fill="#e94560" opacity="0.15"/>
|
||||
<circle cx="400" cy="200" r="60" fill="#c73650" opacity="0.6"/>
|
||||
<text x="400" y="208" text-anchor="middle" font-family="monospace" font-size="36" fill="#eaeaea">👾</text>
|
||||
<rect x="360" y="330" width="30" height="20" fill="#4ecca3"/>
|
||||
<text x="400" y="430" text-anchor="middle" font-family="monospace" font-size="18" fill="#e94560">COSMIC ESCAPE — Jefe Final</text>
|
||||
<text x="400" y="50" text-anchor="middle" font-family="monospace" font-size="12" fill="#a0a0a0">[Captura 3 — Placeholder]</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 797 B |
@@ -0,0 +1,13 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
|
||||
<rect width="200" height="200" fill="#16213e" rx="12"/>
|
||||
<rect x="60" y="60" width="20" height="20" fill="#4ecca3"/>
|
||||
<rect x="80" y="60" width="20" height="20" fill="#4ecca3"/>
|
||||
<rect x="100" y="60" width="20" height="20" fill="#4ecca3"/>
|
||||
<rect x="60" y="80" width="20" height="20" fill="#4ecca3"/>
|
||||
<rect x="100" y="80" width="20" height="20" fill="#4ecca3"/>
|
||||
<rect x="60" y="100" width="20" height="20" fill="#4ecca3"/>
|
||||
<rect x="80" y="100" width="20" height="20" fill="#4ecca3"/>
|
||||
<rect x="100" y="100" width="20" height="20" fill="#4ecca3"/>
|
||||
<text x="100" y="150" text-anchor="middle" font-family="monospace" font-size="11" fill="#eaeaea">PIXEL DUNGEON</text>
|
||||
<text x="100" y="170" text-anchor="middle" font-family="monospace" font-size="10" fill="#a0a0a0">v0.9.1</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 888 B |
@@ -0,0 +1,23 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450">
|
||||
<rect width="800" height="450" fill="#0a0a12"/>
|
||||
<!-- Cuadrícula de tiles -->
|
||||
<rect x="100" y="100" width="600" height="260" fill="#16213e"/>
|
||||
<!-- Paredes -->
|
||||
<rect x="100" y="100" width="600" height="20" fill="#0f3460"/>
|
||||
<rect x="100" y="340" width="600" height="20" fill="#0f3460"/>
|
||||
<rect x="100" y="100" width="20" height="260" fill="#0f3460"/>
|
||||
<rect x="680" y="100" width="20" height="260" fill="#0f3460"/>
|
||||
<!-- Pasillos -->
|
||||
<rect x="300" y="100" width="20" height="80" fill="#0a0a12"/>
|
||||
<rect x="480" y="280" width="20" height="80" fill="#0a0a12"/>
|
||||
<!-- Jugador -->
|
||||
<rect x="190" y="200" width="16" height="16" fill="#4ecca3"/>
|
||||
<rect x="194" y="196" width="8" height="8" fill="#eaeaea"/>
|
||||
<!-- Enemigo -->
|
||||
<rect x="500" y="230" width="16" height="16" fill="#e94560"/>
|
||||
<rect x="504" y="226" width="8" height="8" fill="#a02040"/>
|
||||
<!-- Objetos -->
|
||||
<rect x="380" y="230" width="10" height="10" fill="#f4d03f"/>
|
||||
<rect x="420" y="210" width="8" height="14" fill="#8e44ad"/>
|
||||
<text x="400" y="430" text-anchor="middle" font-family="monospace" font-size="14" fill="#4ecca3">PIXEL DUNGEON — Nivel B1</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="80" viewBox="0 0 300 80">
|
||||
<rect width="300" height="80" fill="#1a1a2e" rx="6"/>
|
||||
<text x="20" y="52" font-family="monospace" font-size="36" font-weight="bold" fill="#e94560">JAIL</text>
|
||||
<text x="115" y="52" font-family="monospace" font-size="36" font-weight="bold" fill="#4ecca3">GAMES</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 365 B |
Reference in New Issue
Block a user