¿Cómo estructurar un proyecto en Astro con Marathon?
Crear y gestionar contenido dinámico es vital para el desarrollo de aplicaciones web interactivas y modernas. Aquí exploramos cómo, usando Astro y Marathon, puedes generar, acceder y visualizar contenido de manera eficiente para tu proyecto astrobuild.tips.
¿Cuál es la organización básica del contenido?
Inicia creando una carpeta específica para el contenido dentro de la estructura de tu proyecto Astro. En este caso, debes seguir estos pasos:
Crea la carpeta "Content" dentro del directorio src.
Aquí agregarás archivos .md que contendrán los recursos que deseas iterar en la página principal del proyecto.
Define la estructura básica de cada archivo Markdown.
Cada archivo debe seguir un formato estructurado con los siguientes campos:
---title: "hello-world"
date: "2024-05-07"
description: "Hello, this is my first recommendation."
image: "" # Por ahora vacío
tags: ["Astro", "JavaScript"]---
Esta organización permitirá categorizar y acceder al contenido más fácilmente.
¿Cómo integrar los archivos Markdown con la interfaz de usuario?
Astro ofrece una API que permite manejar los archivos locales de manera dinámica. Te mostraremos cómo integrarlos dentro de la interfaz.
Accede a los archivos desde index.astro dentro de pages.
Utiliza el método Glob de Astro para acceder a todos los archivos en la carpeta Content.
const allPosts =awaitAstro.globb('Content/*.md');
Itera a través de los archivos con JavaScript.
Inserta un render dinámico dentro de tu componente Astro.
Usa Optional Chaining para manejar potenciales datos faltantes y evitar errores en la aplicación.
¿Cómo presentar el contenido en el componente Card?
Una vez que has obtenido los datos del archivo Markdown, es esencial mostrarlos de manera efectiva en la interfaz.
Utiliza map para iterar sobre los tags.
{tags.map(tag=>(<span key={tag}>{tag}</span>))}
Asegúrate de definir el tipo de dato correctamente, especialmente manejando Arrays de strings en TypeScript.
Verifica la correcta presentación en el navegador.
Accede a la página principal y revisa que cada documento se muestra correctamente en la lista (titulos como Hello Astro, Hello JavaScript, etc.).
¿Cómo mejorar las capacidades de Markdown con MDX?
Si deseas extender más allá de las capacidades básicas de Markdown, considera integrar MDX, una herramienta que permite incluir JSX en tus archivos Markdown.
MDX permitirá añadir componentes React dentro de los archivos .md, enriquecer el contenido de tu proyecto y brindar una integración más dinámica.
Mantente motivado y sigue explorando las maravillas que tecnologías como Astro y Marathon pueden ofrecerte en el desarrollo web. ¡La práctica constante y la curiosidad serán tus grandes aliados en este camino de aprendizaje!
En mi caso yo decidí aprovechar otra de las caracteristicas de Astro para hacer esto mismo, y es el uso de colecciones. Esto nos permite generar un esquema con todos los atributos necesarios que deben tener los contenidos que entren dentro de la colección. Para crear nuestras colecciones debemos definir un archivo config.ts con las colecciones que usaremos:
Astro viene con zod, una librería que nos permite generar una validación de esquemas con TypeScript, de está forma definimos las propiedades que debe cumplir nuestra colección, que crearemos con la función defineCollection. Por último exportamos un objeto collections con nuestras colecciones. Es importante saber que debe existir una carpeta con el mismo nombre por colección creada, y en dicha carpeta se encontrarán los ficheros pertenecientes a la colección.
Para consumir dicha colección en el index.astro hacemos lo siguiente:
// src/pages/index.astro// ... other componentsimport{ getCollection }from'astro:content';const allPosts =awaitgetCollection('tips');// Obtenemos la coleccion por el nombre de su directorio (tips)//... layout{ allPosts.map(item=>(<Cardtitle={item?.data?.title}time={item?.data?.pubDate}tags={item?.data?.tags}/>))}
Usamos data envez de frontmatter.
Así quedaría nuestro archivo:
Hay algo que no se explicó en la clase, y es ¿Cómo renderizar el contenido del markdown en el componente Card?
En la clase, el profesor muestra que le pasa al componente Card por props el title, time y tags, los cuales obtiene de los archivos markdown en la propiedad frontmatter al realizar el map del array obtenido de Astro.glob().
Pero, el contenido como tal del markdown, ¿cómo los muestro en el componente?
Debemos crear un <slot /> en el componente Card, donde ubicaremos el contenido a renderizar
Card.astro
//... contenido del componente<p class="mt-2 text-sm leading-relaxed text-gray-500 line-clamp-3"><slot /><!-- su contenido es inyectado aquí --></p><div class="mt-4 flex flex-wrap gap-1">{ tags.map((tag)=>(<span class="whitespace-nowrap rounded-full bg-purple-100 px-2.5 py-0.5 text-xs text-purple-600">{tag}</span>))}</div>
Astro nos proporciona en cada objeto del array devuelto por Astro.glob() un componente llamado Content que devuelve el contenido completo y renderizado del archivo.
Debemos abrir y cerrar el componente Card, <Card></Card> para que podamos inyectar contenido en el slot, y adentro poder llamar el componente de esta forma:
Suponiendo que post es la variable que renderiza el objeto en el map, se llama a: <post.Content />
Este componente renderizará el archivo en formato markdown que interprete el navegador.
Excelente! muchas gracias
el metodo usado en el curso está deprecado!
Para hacerlo con lo más actual de astro sigan la documentación:
Markdown
Markdown se usa comúnmente usado para crear contenido, como publicaciones de blog y documentación. Dicha lenguaje, en Astro se incluye el soporte para documentos en Markdown.
.
Al igual que otros contenidos, podemos generar rutas como vistas dentro del subdirectorio ./src/pages.
.
src/pages/page-1.md
---title: Hello, World---# Hi there!This Markdown file creates a page at `your-domain.com/page-1/`
It probably isn't styled much, but Markdown does support:
-**bold** and _italics._- lists
- links
- and more!
Como característica especial, con Markdown podemos generar contenido a partir de colecciones.
.
✨ Concepto clave
Las colecciones nos ayudan a organizar nuestro contenido en volumen, similar entre sí para generar catálogos o grupos taxonómicos de información (productos, autores, etc.).
.
Características de Markdown
Astro, provee de utilidades como características con los que potencian el uso de Markdown, inyectando y vinculando propiedades útiles como metadata, enrutamiento, etc.
.
Para el caso de metadata, podemos definir atributos de nuestro contenido para después ser presentado y organizado por algún layout mediante frontmatter
.
src/pages/posts/post-1.md
---layout: ../../layouts/BlogPostLayout.astro
title: Astro in brief
author: Himanshu
description: Find out what makes Astro awesome!
---This is a post written in Markdown.
.
src/layouts/BlogPostLayout.astro
---const {frontmatter} = Astro.props;---<html><!-- ... --><h2>{frontmatter.title}</h2><h3>Post author: {frontmatter.author}</h3><p>{frontmatter.description}</p><slot/><!-- Markdown content is injected here --><!-- ... --></html>
Importando contenido en Markdown
Pese a que podemos emplear una página escrita en Markdown para que, después sea dispuesta en el router. Podemos emplear el contenido de Markdown como un repositorio de contenido y disponerla en una página, escrita en .astro por ejemplo, para organizarla según alguna presentación.
.
/src/pages/posts/great-post.md
---title: 'The greatest post of all time'
author: 'Ben'---Here is my _great_ post!
📌 Referencia
Para conocer las propiedades disponibles al importar contenido en Markdown o MDX:
Markdown & MDX
.
Gracias. Astro tiene muchas utilidades. Creo que, esta es una utilidad que ya se podía hacer con otras herramientas web; Astro, la "aterriza" de forma muy "coloquial" para iniciantes e básica (puede ayudar a muchos emprendedores, personas con su primer sitio..etc).
Hola comunidad, como puedo hacer que VSC en windows me de sugerencias como al profe?, por ejemplo cuando esta escribiendo la línea const allPosts = await Astro.glob("../content/*.md") en la ruta le salen sugerencias de los archivos dentro de la carpeta content, cabe mencionar que ya tengo instalada la extensión de Astro para VSC
Es una extensión de vs code, se llama Path Intellisense
¿Dónde queda el Lorem Ipsum que pusimos en cada card? Solo veo el título y la fecha.
Hola Leonardo, para ejemplo no lo renderizo. Cuando obtienes el contenido de los archivos con el método Astro.glob(), esa información va a estar disponible en el array, pero ya depende de nosotros si lo utilizamos o no. En este caso nunca se utilizo.
Content Collections
Las colecciones son una característica de Astro que ayudan a administrar, en documentos de Markdown o MDX, el contenido de algún proyecto. Las colecciones ayudan a organizar su contenido, validan su material de presentación y brindan seguridad automática de tipos de TypeScript para todo el contenido.
.
✨ Concepto clave
Las colecciones de contenido son la mejor forma de trabajar con Markdown y MDX en cualquier proyecto de Astro.
.
Las colecciones son recursos encontrados en el subdirectorio ./src/content.
.
.
Como se mencionó, las colecciones son parte fundamental de un contenido en sitios web. Su identificación se hace evidente por la dependencia e iteración visual que será servido durante la narrativa de nuestra vista o página.
.
✨ Concepto clave
Las colecciones será de gran utilidad cuando disponemos y consumimos recursos específicos agrupados (posts-post, authors-author, products-product, etc.).
.
.
Podemos analizar 2 componentes claro que distribuye nuestra colección de productos:
Products Gallery - Componente para distribuir en grid nuestros productos existentes
Product Item - Componente que representa a un producto
.
De aquí, se menciona la primera estructura visual de alguna colección, lo cual ganamos administración para aislar (similar a un modelo en la arquitectura MVC).
.
Siguiendo la 📚 documentación, se organiza nuestras colecciones en el subdirectorio ./src/content. El cual, al lanzar nuestro proyecto en dev o build, creará y sincronizará un directorio llamado .astro.
.
ℹ️ Definición. astro es un directorio donde gestiona los tipos de las colecciones generadas por Astro, si fuera el caso sincronizarlas manualmente, por algún tipo de error, corremos el comando astro sync.
Se recomienda omitirlo en el archivo .gitignore
.
Al componentizar nuestra aplicación, podemos dividir en piezas nuestros diferentes componentes (diseño basado en composición), del cual tendríamos los siguientes componentes.
.
./src/componentes/Products/Item.astro
El cual será consultado y gestionado por un componente de tipo wrapper, el cual para su uso dependenerá de las colecciones, como modelos, y el producto como plantilla de representación.
.
./src/componentes/Products/Gallery.astro
✨ Concepto clave
Las variantes visuales o de organización de nuestros componentes, pueden estar contenida en su generalización, como Products. Permitiendo utilizar sus diferentes presentaciones de manera selectiva, ProductsGallery y/o ProductsItem.
.
Como se observa, se consumirá de nuestro contenido la siguiente definición de colecciones:
.
./src/content/products/danche.md
---title: Danche
image: /images/products/danche.png---
Ethiopian hand-harvested blend densely packed with vibrant fruit notes.
.
✨ Concepto clave
Donde Astro nos recomienda delimiar y configurar nuestras colecciones para así, extender los diferentes arquetipos de nuestro producto web.
El operador de encadenamiento opcional?. permite leer el valor de una propiedad ubicada dentro de una cadena de objetos conectados sin tener que validar expresamente que cada referencia en la cadena sea válida. El operador ?. funciona de manera similar a el operador de encadenamiento ., excepto que en lugar de causar un error si una referencia es casi-nula (null o undefined), la expresión hace una evaluación de circuito corto con un valor de retorno de undefined. Cuando se usa con llamadas a funciones, devuelve undefined si la función dada no existe.
Hola, alguien sabe por que esta pasando esto:
Literlamente copie y pegue el codigo del profe y no funciona!
Falto conectar los contenidos Markdown con Card.astro, en la parte superior de cada archivo que hicimos en markdown nómas hay que agregarle esta línea:
