AstroJs

Que es AstroJs

Es un framework que va a escalar contigo, para construir sitios web basados en contenido, que permitirá crear poderozas aplicaciones web y tambien APIs Dinámicas.

¿Quien lo ha usado?

Introducción

AstroJs 4.0, es él framework de JS, que es independiente o no está específicamente ligado a una biblioteca de javascript, ya que se pueden utilizar unas integraciones tales como AlpineJs, Lit, Preact, React, Solid-Js, Svelte y Vue.

Como tambien se puede hacer una web sin usar ninguna Biblioteca, ya que astro trae sus propias dependencias de desarrollo.

¿Que son las Islands?

Es una nueva estructura de desarrollo web, que se define por tener una sección de nuestra web con javascript, mientras todo lo demás es estático.

Integraciones

Server Side Rendering Adapters

Otras Integraciones.

The Astro Dev Toolbar, una forma de personalizar nuestra experiencia de desarrollo, inpeccionando elementos en tiempo real

Las plantillas

Astro cuenta con un monton de plantillas para poder iniciar tus proyectos con una base, tenemos para Blog, Marketing, Agencias, E-Commerce y Portafolios. tanto gratuitas como de pago.

Preparando entorno de desarrollo

Crear Aplicación con Npm

# create a new project with npm
npm create astro@latest

# revisa los scripts que se pueden ejecutar con
npm run

# create a new project with an official example
npm create astro@latest -- --template <example-name>

# create a new project based on a GitHub repository’s main branch
npm create astro@latest -- --template <github-username>/<github-repo>

Estructura de Carpetas

src/* - El código fuente de nuestro proyecto (components, pages, styles, etc.)
public/* - nuestro archivos estaticos (fonts, icons, etc.)
package.json - archivo donde encontraremos las dependencias y scripts.
astro.config.mjs - el archivo de configuración del proyecto Astro.
tsconfig.json - el archivo de configuración para Typescript.

Modificando nuestra página principal

Podrás modificar tu primera página en el archivo src/pages/index.astro

---
    import { Header } from './components/Header.astro' //puedes importar otros componentes astro
    const title = "AstroJs 4.0" // o definir variables para usar en tu página
---

<html>
    <head>
        <title>{title}</title>
    </head>
    <body>
        <Header />
        <h1 class="text-center font-bold"> {title} </h1>
        <p class="text-center"> AstroJs 4.0, es él framework de JS, que es independiente o no está específicamente ligado a una biblioteca de javascript, ya que se pueden utilizar unas integraciones tales como AlpineJs, Lit, Preact, React, Solid-Js, Svelte y Vue. </p>
    </body>
</html>

Agregar variables a nuestros estilos

---
const skillColor = "red";
---
<style define:vars={{skillColor, fontWeight, textCase}}>
  h1 {
    color: purple;
    font-size: 4rem;
  }
  .skill {
    color: var(--skillColor);
    font-weight: var(--fontWeight);
    text-transform: var(--textCase);
  }
</style>

Internacionalización

AstroJs, nos permite crear sitios web multilenguaje, para ello debemos crear un archivo i18n.json en la raiz de nuestro proyecto, con la siguiente estructura.

{
  "locales": ["en", "es"],
  "defaultLocale": "en",
  "fallbackLocale": "en"
}

Creando páginas en diferentes idiomas

Para crear páginas en diferentes idiomas, debemos crear una carpeta src/pages/[lang] donde [lang] es el código del idioma, por ejemplo src/pages/en y src/pages/es

Creando rutas en diferentes idiomas

Para crear rutas en diferentes idiomas, debemos crear una carpeta src/routes/[lang] donde [lang] es el código del idioma, por ejemplo src/routes/en y src/routes/es

Creando componentes en diferentes idiomas

Para crear componentes en diferentes idiomas, debemos crear una carpeta src/components/[lang] donde [lang] es el código del idioma, por ejemplo src/components/en y src/components/es

Creando estilos en diferentes idiomas

Para crear estilos en diferentes idiomas, debemos crear una carpeta src/styles/[lang] donde [lang] es el código del idioma, por ejemplo src/styles/en y src/styles/es