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
- Node.js - v18.14.1 or higher.
- Text editor - We recommend VS Code with our Official Astro extension.
- Terminal - Astro is accessed through its command-line interface (CLI).
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