Skip to content

Commit 2fa8564

Browse files
successbyfailuresuccessbyfailure
committed
Add demo page with docker compose setup
1 parent c02edd8 commit 2fa8564

File tree

7 files changed

+152
-8
lines changed

7 files changed

+152
-8
lines changed

‎.github/workflows/publish-image.yml‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
name: Build and Publish Image
2+
3+
on:
4+
push:
5+
branches:
6+
- main
7+
workflow_dispatch:
8+
9+
permissions:
10+
contents: read
11+
packages: write
12+
13+
jobs:
14+
build:
15+
runs-on: ubuntu-latest
16+
steps:
17+
- name: Checkout
18+
uses: actions/checkout@v4
19+
20+
- name: Set up Docker Buildx
21+
uses: docker/setup-buildx-action@v3
22+
23+
- name: Log in to GHCR
24+
uses: docker/login-action@v3
25+
with:
26+
registry: ghcr.io
27+
username: ${{ github.actor }}
28+
password: ${{ secrets.GITHUB_TOKEN }}
29+
30+
- name: Build and push
31+
uses: docker/build-push-action@v6
32+
with:
33+
context: .
34+
push: true
35+
tags: |
36+
ghcr.io/${{ github.repository }}:latest
37+
ghcr.io/${{ github.repository }}:${{ github.sha }}

‎CURRENT_PLAN.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22

33
Usa esta lista para acordar los pasos antes de ejecutar cambios. Actualízala según avances.
44

5-
- [x] Revisar instrucciones en AGENTS.md y archivos relacionados.
6-
- [x] Confirmar petición actual: recomendar extensiones extra (Git/Docker) y mantener sincronía.
7-
- [x] Añadir recomendaciones en configuraciones de VS Code/DevContainer.
8-
- [x] Ajustar documentación si aplica para reflejar nuevas recomendaciones.
9-
- [x] Revisar el diff y preparar commit + PR message.
5+
- [x] Revisar instrucciones vigentes y el estado base del repo.
6+
- [x] Definir flujo de GitHub Actions para construir y publicar la imagen.
7+
- [x] Ajustar Docker Compose para permitir descargar la imagen desde GitHub.
8+
- [x] Documentar el uso de la imagen remota y notas relevantes.
9+
- [x] Actualizar notas en FOUND_WHILE_WORKING.md si aparecen hallazgos.

‎Dockerfile‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
FROM nginx:alpine
2+
3+
COPY index.html /usr/share/nginx/html/index.html

‎FOUND_WHILE_WORKING.md‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,4 @@
22

33
Registra descubrimientos, problemas o ideas que surjan mientras trabajas. Mantén entradas breves y con contexto.
44

5-
- [ ] Describir hallazgo o problema.
6-
- [ ] Impacto o prioridad.
7-
- [ ] Próximos pasos sugeridos.
5+
- [x] Se elimino `version` de `docker-compose.yml` para evitar el warning de Compose.

‎README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@ Plantilla minima para trabajar con VS Code, devcontainers y agentes de programac
1111
2) Cuando se te pregunte, selecciona "Reopen in Container" (o `Dev Containers: Reopen in Container` desde la paleta).
1212
3) Espera a que se construya el contenedor. Se instalan Node LTS + pnpm, Python 3.11 + pip, Git y Docker CLI (con acceso al socket del host).
1313

14+
## Demo con Docker Compose
15+
1) `docker compose up --build`
16+
2) Abre `http://localhost:8080` en tu navegador.
17+
18+
## Demo con imagen publicada (GHCR)
19+
1) En `docker-compose.yml`, comenta `build` y descomenta `image` + `pull_policy`.
20+
2) Ejecuta `docker compose up` y abre `http://localhost:8080`.
21+
1422
## Trabajo con agentes de programacion
1523
- Dentro del contenedor se instalan extensiones de IA variadas (OpenAI, Anthropic, Google, Qwen, Continue y SST OpenCode) junto con Copilot y GitLens; habilitalas en VS Code para autocompletado, chat contextual y trazabilidad de Git.
1624
- Usa la terminal de VS Code dentro del contenedor para ejecutar tus comandos (node, pnpm, python, pip, etc).

‎docker-compose.yml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
services:
2+
web:
3+
build: .
4+
# image: ghcr.io/makespacemadrid/workshop-optional-humans:latest
5+
# pull_policy: always
6+
ports:
7+
- "8080:80"
8+
9+
# watchtower:
10+
# image: containrrr/watchtower:latest
11+
# command: --interval 60
12+
# volumes:
13+
# - /var/run/docker.sock:/var/run/docker.sock

‎index.html‎

Lines changed: 85 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,85 @@
1+
<!doctype html>
2+
<html lang="es">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<meta http-equiv="refresh" content="60">
7+
<title>Humanos ¿Opcionales? - Demo</title>
8+
<style>
9+
:root {
10+
color-scheme: light;
11+
font-family: "Georgia", "Times New Roman", serif;
12+
}
13+
14+
body {
15+
margin: 0;
16+
min-height: 100vh;
17+
display: grid;
18+
place-items: center;
19+
background: radial-gradient(circle at top, #f4f1ea, #e7efe6 55%, #dfe9ef 100%);
20+
color: #1b1b1b;
21+
}
22+
23+
.card {
24+
background: #ffffff;
25+
padding: 48px;
26+
border-radius: 24px;
27+
box-shadow: 0 18px 40px rgba(30, 40, 60, 0.12);
28+
text-align: center;
29+
max-width: 520px;
30+
margin: 24px;
31+
}
32+
33+
h1 {
34+
font-size: 32px;
35+
margin: 0 0 16px;
36+
}
37+
38+
p {
39+
font-size: 18px;
40+
margin: 0 0 28px;
41+
line-height: 1.4;
42+
}
43+
44+
button {
45+
background: #1f8f3a;
46+
color: #ffffff;
47+
border: none;
48+
border-radius: 999px;
49+
padding: 14px 36px;
50+
font-size: 18px;
51+
cursor: pointer;
52+
transition: transform 0.2s ease, box-shadow 0.2s ease;
53+
}
54+
55+
button:hover {
56+
transform: translateY(-2px);
57+
box-shadow: 0 10px 20px rgba(31, 143, 58, 0.25);
58+
}
59+
60+
#mensaje {
61+
margin-top: 24px;
62+
font-size: 20px;
63+
font-weight: 600;
64+
min-height: 24px;
65+
}
66+
</style>
67+
</head>
68+
<body>
69+
<main class="card">
70+
<h1>Humanos ¿Opcionales?</h1>
71+
<p>Demo del workshop sobre programar en tiempos de IA y automatizaciones.</p>
72+
<button id="boton-hola" type="button">Hola</button>
73+
<div id="mensaje" aria-live="polite"></div>
74+
</main>
75+
76+
<script>
77+
const botonHola = document.getElementById("boton-hola");
78+
const mensaje = document.getElementById("mensaje");
79+
80+
botonHola.addEventListener("click", () => {
81+
mensaje.textContent = "Hola mundo!";
82+
});
83+
</script>
84+
</body>
85+
</html>

0 commit comments

Comments
 (0)