apuntes astro

Instalar node fedora

sudo dnf module install nodejs:18/common
Checkear version node --version

Crear un proyecto en astro

npm create astro
Cuando pida la configuracion de TS ponerla en relaxed
npm run dev para ejecutar el servidor de desarrollo

--- bloque de codigo js a ejecutar para desarrollo ---
Con esto podemos setear valores dentro de este bloque de desarrollo como variables y leerlas dentro de atributos o etiquetas html usando {}

Ejemplo:


    ---

    let text = 'lorem ipsum'

    let color = 'blue'

    ---

< h1 class={color}> {text} < /h1>

Se genera js en las etiquetas script y estilos en styles

Componentes Astro

Crear e importar componente

Creamos una carpeta components al nivel de pages solo para ser mas ordenados con los componentes.
Creamos un archivo [nombre].astro
Introducimos el codigo html o js o ambos que queramos usar como componente
Vamos a la pagina que quieremos usar el componente y usaremos la etiqueta de desarrollo para importar el componente:
import [como se llamara el componente] from 'ruta ej: ../components/componente1.astro'
Usar la etiqueta con el nombre del componente que le dimos para invocar a este.

Contenido del componente


---

interface Props{

    title?: string;

    description?: string;

}

const {title = "Titulo repositorio", description = "Descripción repositorio"} = Astro.props

---

Se crea una interfaz para definir de manera estatica los tipos de datos de las variables y luego se define que variables podrán ser pasadas como parámetros mediantes astro.props.
en este caso al definirle un texto, este se queda por defecto en caso de que al invocar el componente pero no pasarle parámetros, usará estos valores por defecto.

Astro Markdown

Astro también puede generar sitios desde archivos markdown, simplemente creando un archivo [nombrePagina/archivo].md

Contenido


---

Card: ../components/cards.astro

Header: ../components/header.astro

---

Para importar en vez de usar import, solo hace basta el [nombre]:[ruta]
y luego todo el contenido en markdown sin problemas.

Astro Global (Doc)

Funcion para precargar multiples archivos estáticos
Astro.glob() Ej:
const posts = await Astro.glob('./posts/*.md)
Esto indica que una vez entrado a posts se cargaran todos los archivos md que estan dentro de esa carpeta/ruta

keaguirre / astroPortfolioTest