Este proyecto es una “enciclopedia de animales” en HTML + CSS + TypeScript usando Vite como servidor de desarrollo y herramienta de build.
La carpeta dist/ y sus assets/ son salida generada por vite build (no se editan a mano).
index.html: HTML base (punto de entrada de la app en desarrollo).src/: código fuente (TypeScript, CSS, datos).src/main.ts: lógica de UI (render, filtros, diálogo).src/data.ts: datos y tipos de animales.src/style.css: estilos (layout, tarjetas, botones, diálogo).
vite.config.ts: configuración mínima de Vite.tsconfig.json: configuración del compilador TypeScript.dist/: salida de producción generada por Vite.dist/index.html: HTML final con links a assets con hash.dist/assets/*.js: JavaScript empaquetado/minificado.dist/assets/*.css: CSS empaquetado/minificado.
Archivo: animales/index.html
- Define la estructura base del documento:
<head>,<body>y los contenedores. - Carga el CSS de desarrollo:
/<link rel="stylesheet" href="/src/style.css" />. - Carga el entrypoint TypeScript:
<script type="module" src="/src/main.ts"></script>.
Estos elementos se buscan desde src/main.ts para montar la UI:
#filters: contenedor para los botones “chip” de categorías.#grid: contenedor para las tarjetas de animales.#detail:<dialog>nativo para mostrar un animal en detalle.#detail-body: contenido interno del diálogo.#detail-wiki: enlace “Wikipedia” del diálogo.#detail-close: botón “Cerrar” del diálogo.
Archivo: animales/src/data.ts
Contiene:
Animal: interfaz TypeScript con el “shape” de los datos.animals: array con los animales (id, nombre, descripción, etc.).
- El campo
categoryes un union type:"Mamífero" | "Ave" | "Reptil" | "Anfibio" | "Pez" | "Invertebrado"
- En
src/main.tsse usa para:- calcular categorías únicas (filtros)
- filtrar el grid por categoría
- renderizar la “pill” de categoría en tarjeta y detalle
Archivo: animales/src/main.ts
- Importa
animalsyAnimaldesde./data. - Construye las categorías disponibles.
- Renderiza:
- filtros (chips)
- grid de tarjetas
- detalle de un animal en un
<dialog>
- Maneja eventos:
- click en chips (cambiar filtro)
- click en “Ver más” (abrir detalle)
- cerrar diálogo (botón o click en el backdrop)
ALL: string"Todos"para el estado “sin filtro”.categories:["Todos", ...categorías únicas de animals].currentFilter: estado actual del filtro (string).
Función:
- Crea un
<div>, asignatextContenty devuelveinnerHTML. - Se usa para evitar inyectar HTML no deseado cuando se arma HTML con template strings.
Nota: aquí los datos vienen de un archivo local, pero igualmente es una buena práctica si en el futuro los datos vinieran de API o input del usuario.
- Genera botones con clase
chipy undata-cat="...". - Marca activo con
is-active. - Registra listeners para:
- actualizar
currentFilter - re-render de filtros y grid
- actualizar
- Construye el HTML de una tarjeta.
- Corta la descripción a ~160 caracteres para la vista previa.
- Inserta:
- imagen
- nombre, categoría, nombre científico
- descripción recortada
- acciones (“Ver más” y enlace a Wiki)
- Inserta todas las tarjetas en
#grid. - Busca los botones
data-open="id"y añade listeners:- encontrar el animal por
id - abrir el diálogo con
openDetail(animal)
- encontrar el animal por
- Rellena
#detail-bodycon el contenido completo. - Actualiza el
hrefde#detail-wiki. - Abre el diálogo con
dialogEl.showModal().
- Botón “Cerrar” (id
detail-close) llama adialogEl.close(). - Click en el backdrop: si el target del click es el propio
<dialog>, se cierra.
Archivo: animales/src/style.css
Define estilos “vanilla” para:
- Layout general (
.wrap,.site-header,.grid) - Filtros (
.filters,.chip,.chip.is-active) - Tarjetas (
.card,.card-img,.card-body, etc.) - Botones (
.btn, variantesbtn-primary,btn-outline,btn-ghost) - Diálogo de detalle (
.detail-dialogy elementos internos)
En :root se definen tokens de color y UI:
--bg,--surface,--text,--muted,--border--accent,--accent-contrast--radius,--shadow
En .card-desc se usa un clamp de líneas (estilo “3 líneas máximo”) con:
display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;
Archivo: animales/vite.config.ts
Config mínima de Vite:
root: "."indica que el root del proyecto es la carpeta actual.
Vite se encarga de:
- servir
index.htmlen dev - resolver imports TypeScript
- empaquetar/minificar para producción (dist)
Archivo: animales/tsconfig.json
Configurar TypeScript para trabajar con:
- módulos ES (
module: "ESNext") - resolución “bundler” (pensada para Vite)
- DOM types disponibles (
lib: ["ES2022", "DOM", "DOM.Iterable"]) - modo estricto (
strict: true)
Aquí noEmit: true significa que TypeScript no genera archivos .js por su cuenta.
- El “build” real de JavaScript lo hace Vite (esbuild/rollup internamente).
- TypeScript se usa para typecheck.
dist/ es el resultado de ejecutar npm run build (que llama a vite build).
En producción:
- El navegador ya no carga
/src/main.tsdirectamente. - Carga assets compilados en
dist/assets/.
Archivo: animales/dist/index.html
- Similar al
index.htmloriginal, pero Vite:- reemplaza el
<script>por uno que apunta al JS compilado con hash - añade
<link rel="stylesheet">al CSS compilado con hash
- reemplaza el
Ejemplo (hash cambia en cada build):
/assets/index-0h3dzHZ6.js/assets/index-z_s_b6Bm.css
Archivo: animales/dist/assets/index-0h3dzHZ6.js
Es JavaScript:
- bundleado (incluye el código de
src/main.tsysrc/data.ts) - minificado
- con una parte inicial que ayuda a compatibilidad con
modulepreload
Archivo: animales/dist/assets/index-z_s_b6Bm.css
Es CSS:
- empaquetado y minificado a partir de
src/style.css
El hash permite cache busting:
- si cambias el código, cambia el nombre del asset
- el navegador descarga el nuevo sin quedarse con versiones viejas en caché
Desde animales/:
-
Dev:
npm installnpm run dev
-
Build:
npm run buildnpm run preview(sirve el contenido dedist/para probarlo)