Construir una aplicación completa requiere dividir la interfaz en componentes bien definidos. En esta etapa de Pugstagram se crean dos piezas fundamentales: el componente card, que representa cada publicación dentro del timeline, y el componente comments, que gestiona la interacción de los usuarios con cada fotografía. Todo se conecta utilizando Svelte y su sistema de importación de componentes.
¿Cómo se estructura el componente timeline?
El punto de partida es el componente timeline, que actúa como contenedor principal de las publicaciones. Su estructura es sencilla: un div con la clase timeline-container que aloja el componente card [0:30].
Para integrar card dentro de timeline se utiliza la etiqueta <script> con una importación directa:
svelte
<script>
import Card from './Card.svelte';
</script>
Después se crea el archivo Card.svelte dentro de la carpeta de componentes. Esta separación permite mantener cada pieza de la interfaz con su propia lógica y estilos.
¿Qué elementos componen la card de una publicación?
Analizando la referencia visual de Instagram, la card se divide en varias secciones bien diferenciadas [1:30]:
- Header: imagen de perfil, nombre de usuario, ubicación y botón de ajustes.
- Foto: la imagen principal de la publicación.
- Íconos de interacción: like, compartir y bookmark.
- Descripción: usuario que publicó y su mensaje.
- Comentarios: sección delegada a un componente independiente.
¿Cómo se construye el header de la card?
Dentro de card-container se genera un div con clase card-header que contiene dos bloques [2:10]:
- card-user: incluye una etiqueta
<img> con la foto de perfil y un <h2> con el username (en este caso elmo.pug). Dentro del <h2> se añade un <span> para la ubicación, como "Bogotá, Colombia".
- card-settings: utiliza un ícono de Font Awesome con la clase
fas fa-ellipsis-h, que muestra los tres puntos característicos de Instagram.
¿Cómo se manejan la foto y los íconos?
Para la foto se usa un div con clase card-photo que envuelve un <figure> con una etiqueta <img> [3:50]. Se emplea <figure> porque más adelante se agregarán configuraciones adicionales.
Los íconos se organizan en dos grupos dentro de card-icons [4:15]:
- card-icons-first: contiene los íconos de corazón (
fas fa-heart) y el avión de papel (fas fa-paper-plane) para compartir.
- card-icons-second: aloja únicamente el ícono de bookmark (
fas fa-bookmark).
La descripción se resuelve con un div llamado card-description que contiene un <h3> con el nombre del usuario y el mensaje de la publicación [5:15].
¿Por qué separar los comentarios en su propio componente?
La lógica de comentarios requiere manejo independiente porque eventualmente necesitará funcionalidad para agregar nuevos comentarios. Por eso se crea Comments.svelte y se importa dentro de card [5:40]:
svelte
<script>
import Comments from './Comments.svelte';
</script>
El componente comments tiene dos secciones principales:
- comments-users: muestra los comentarios existentes con un
<h3> para el nombre del usuario y un <span> con el texto del comentario.
- comments-off: contiene un
<form> con un <input> de tipo texto, clase comments-input, placeholder "Agregar comentario..." e ID texto. Junto al input se coloca un <button> de tipo submit con el texto "Post" [7:00].
Un detalle importante al nombrar clases es la nomenclatura de componentes. Cuando se separa un componente, las clases CSS deben reflejar el nuevo contexto. Dentro de Comments.svelte las clases comienzan con comments- y no con card-, ya que card ya no es el componente padre directo [6:30].
¿Cómo verificar que todo está conectado?
Antes de avanzar a los estilos, se revisa cada archivo: card con sus importaciones, comments con su estructura, footer como reto previo, header, main, profile, sidebar y stories [8:10]. Se verifica que la terminal compile sin errores y que el navegador muestre todos los elementos HTML de Pugstagram, aunque todavía sin CSS.
Con toda la maqueta HTML lista y los componentes correctamente enlazados, el siguiente paso será aplicar estilos para transformar esta estructura en una interfaz visual completa. ¿Qué parte de la estructura te resultó más interesante de implementar?
