feat(docs): add internationalization to docs (#191)

docs/astro.config.mjs

@@ -1,6 +1,11 @@
 import starlight from '@astrojs/starlight';
 import { defineConfig } from 'astro/config';
 
+export const locales = {
+	root: { label: 'English', lang: 'en' },
+	es: { label: 'Español', lang: 'es' },
+};
+
 // https://astro.build/config
 export default defineConfig({
 	integrations: [
@@ -20,16 +25,33 @@ export default defineConfig({
 				{
 					label: 'Getting Started',
 					autogenerate: { directory: 'getting-started' },
+					translations: {
+						es: 'Inicio',
+					},
 				},
 				{
 					label: 'Utilities',
 					autogenerate: { directory: 'utilities' },
+					translations: {
+						es: 'Utilidades',
+					},
 				},
 			],
 			components: {
 				PageTitle: './src/components/PageTitle.astro',
 				MarkdownContent: './src/components/Content.astro',
 			},
+			defaultLocale: 'root',
+			locales: {
+				root: {
+					label: 'English',
+					lang: 'en',
+				},
+				es: {
+					label: 'Español',
+					lang: 'es',
+				},
+			},
 		}),
 	],
 });

docs/src/content/docs/es/getting-started/installation.mdx

@@ -0,0 +1,62 @@
+---
+title: Instalación
+description: Cómo agregar ngxtension a tu proyecto
+sidebar:
+  order: 2
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+### Automático
+
+`ngxtension` viene con un esquematico/generador de inicialización tanto para Angular CLI como para [Nx](https://nx.dev).
+
+El esquematico/generador agrega `ngxtension` como una dependencia al proyecto y activa `skipLibCheck` para asegurar que los typings de librerias externas no fallen la rigurosidad del proyecto.
+
+#### Angular CLI
+
+```shell title="Adding ngxtension"
+ng add ngxtension
+```
+
+#### Nx CLI
+
+<Tabs>
+	<TabItem label="npm">
+
+```shell title="Instalando ngxtension"
+  npm install ngxtension
+```
+
+  </TabItem>
+	<TabItem label="yarn">
+
+```shell title="Instalando ngxtension"
+yarn add ngxtension
+```
+
+  </TabItem>
+	<TabItem label="pnpm">
+
+```shell title="Instalando ngxtension"
+pnpm install ngxtension
+```
+
+  </TabItem>
+</Tabs>
+
+Luego invoca el generador `ngxtension:init`
+
+```shell title="Invocar el init generator"
+nx g ngxtension:init
+```
+
+### Manual
+
+Instala `ngxtension` utilizando el comando anterior y luego activa `skipLibCheck: true` en el archivo tsconfig.json `root` del proyecto.
+
+> Para Nx, podría ser `tsconfig.base.json`
+
+## Matriz de Compatibilidad
+
+WIP

docs/src/content/docs/es/getting-started/introduction.md

@@ -0,0 +1,15 @@
+---
+title: Introducción
+description: ¿Qué es ngxtension?
+sidebar:
+  order: 1
+---
+
+`ngxtension` es una librería de utilidades para [Angular](https://angular.io). Consiste en una variedad de utilidades que facilitan el desarrollo de Angular y lo hacen más consistente.
+
+El proyecto fue iniciado por [Chau](https://github.com/nartc) junto con [Enea](https://twitter.com/Enea_Jahollari) y es completamente [de código abierto](https://github.com/nartc/ngxtension-platform). Agradecemos las contribuciones de todo tipo. Si tienes un problema o una idea, por favor [háznoslo saber](https://github.com/nartc/ngxtension-platform/issues/new).
+¿Te encuentras agregando algo una y otra vez a cada proyecto de Angular? Eso es algo que queremos tener en `ngxtension`. Nuestra intención es que `ngxtension` sea "_todo vale_", pero también con consideración cuidadosa y código Angular de calidad para que `ngxtension` pueda convertirse en una tienda única para todos los desarrolladores de Angular.
+
+## Consideración del tamaño del paquete(bundle)
+
+La biblioteca está compuesta enteramente por [Secondary Entry Point](https://angular.io/guide/angular-package-format#entrypoints-and-code-splitting). Aunque enviamos `ngxtension` como un solo paquete (para que sea fácil de instalar para los consumidores), el pipeline de construcción de Angular debe manejar adecuadamente la división de código y el tree-shaking para todos los puntos de entrada que `ngxtension` incluye.

docs/src/content/docs/es/index.mdx

@@ -0,0 +1,20 @@
+---
+title: Bienvenido a ngxtension
+template: splash
+hero:
+  tagline: Una colección de utilidades para Angular.
+  image:
+    file: ../../../../public/logo.svg
+    alt: ngxtension logo
+
+  actions:
+    - text: Inicio
+      link: /es/getting-started/introduction
+      icon: right-arrow
+      variant: primary
+    - text: Ver en GitHub
+      link: https://github.com/nartc/ngxtension-platform
+      icon: external
+---
+
+Documentation powered by [Starlight Astro](https://starlight.astro.build/).

docs/src/content/docs/es/utilities/Components/host-binding.md

@@ -0,0 +1,48 @@
+---
+title: hostBinding
+description: ngxtension/host-binding
+badge: stable
+contributor: lucas-garcia
+---
+
+`hostBinding` es una función que devuelve una señal _writable_ o _readonly_ y vincula(bind) el valor que contiene esa señal a la propiedad del host que se pasa como primer argumento tal como `@HostBinding` lo haría.
+
+```ts
+import { hostBinding } from 'ngxtension/host-binding';
+```
+
+## Uso
+
+Con `@HostBinding` se puede vincular(bind) un color desde una propiedad de clase:
+
+```ts
+@Component({
+  standalone: true;
+  selector: 'my-component'
+  template: '...'
+})
+export class MyComponent {
+  @HostBinding('style.color') color = 'red';
+
+  updateColor(color: 'red' | 'blue') {
+    this.color = color;
+  }
+}
+```
+
+Con `hostBinding` ahora se puede vincular(bind) cualquier cosa como `@HostBinding` en señales de escritura o solo lectura:
+
+```ts
+@Component({
+  standalone: true;
+  selector: 'my-component'
+  template: '...'
+})
+export class MyComponent {
+  color = hostBinding('style.color', signal('red'));
+
+  updateColor(color: 'red' | 'blue') {
+    this.color.set(color);
+  }
+}
+```

docs/src/content/docs/es/utilities/Directives/click-outside.md

@@ -0,0 +1,35 @@
+---
+title: clickOutside
+description: An Angular directive that is used to detect clicks outside the element.
+badge: stable
+contributor: dale-nguyen
+---
+
+## Importa la directiva
+
+```ts
+import { ClickOutside } from 'ngxtension/click-outside';
+```
+
+## Uso
+
+### Básico
+
+Agrega la directiva `clickOutside` al elemento Angular.
+
+```ts
+@Component({
+	standalone: true,
+	template: `
+		<div (clickOutside)="close()"></div>
+	`,
+	imports: [ClickOutside],
+})
+class TestComponent {
+	close() {
+		// close logic
+	}
+}
+```
+
+Esto activará el método `close()` cuando el usuario haga clic fuera del elemento objetivo.

docs/src/content/docs/es/utilities/Directives/repeat.md

@@ -0,0 +1,52 @@
+---
+title: repeat
+description: An Angular directive extending NgFor to allow iteration over a fixed number of iterations.
+badge: stable
+contributor: chau-tran
+---
+
+## Importa la directiva
+
+```ts
+import { Repeat } from 'ngxtension/repeat';
+```
+
+## Uso
+
+### Básico
+
+Utiliza la directiva `Repeat` como una extensión de `NgFor` de Angular para iterar sobre un número fijo de iteraciones. La [`TrackByFunction`](https://angular.io/api/core/TrackByFunction) se establece automáticamente para iterar de manera eficiente.
+
+```ts
+import { Component } from '@angular/core';
+import { Repeat } from 'ngxtension/repeat';
+
+@Component({
+	imports: [Repeat],
+	template: `
+		<ul>
+			<li *ngFor="let i; repeat: 3">{{ i }}</li>
+		</ul>
+	`,
+})
+export class App {}
+```
+
+Esto producirá el siguiente output:
+
+```html
+<!-- Output -->
+<!-- <li>0</li> -->
+<!-- <li>1</li> -->
+<!-- <li>2</li> -->
+```
+
+## API
+
+### Inputs
+
+- `n: number` - Un entero no negativo, que especifica el número de iteraciones.
+
+### Validación
+
+- Un error se lanza si el `input` es negativo o no es un entero.

docs/src/content/docs/es/utilities/Directives/resize.mdx

@@ -0,0 +1,109 @@
+---
+title: resize
+description: Una directiva y función de Angular para escuchar eventos de cambio de tamaño de elementos, lo que te permite responder dinámicamente a cambios en el tamaño de los elementos.
+badge: stable
+contributor: tomer
+---
+
+import { Tabs, TabItem } from '@astrojs/starlight/components';
+
+## Importa la directiva
+
+```ts
+import { NgxResize, injectResize } from 'ngxtension/resize';
+```
+
+El `resize` entry point expone 2 symbols:
+
+- `injectResize()`: un CIF que observa el evento de cambio de tamaño en el elemento Host del componente.
+- `NgxResize`: una directiva que puede observar el evento de cambio de tamaño de cualquier elemento al que esté adjunta.
+
+Ambos emiten el resultado del cambio de tamaño fuera de la [Zona Angular](https://angular.io/guide/zone) de forma predeterminada, pero ambos proporcionan una forma de configurar el comportamiento.
+
+## Uso
+
+### `injectResize`
+
+`injectResize` retorna un `Observable<ResizeResult>` (see [ResizeResult TBD]())
+
+```ts
+export class App {
+	resize$ = injectResize(); // Observable<ResizeResult>
+}
+```
+
+### `NgxResize`
+
+<Tabs>
+	<TabItem label="html">
+
+```html
+<div (ngxResize)="onResize($event)">
+	<!-- content -->
+</div>
+```
+
+  </TabItem>
+	<TabItem label="ts">
+
+```ts
+@Component({
+	imports: [NgxResize],
+	templateUrl: './app.html',
+})
+export class App {
+	onResize(event: ResizeResult) {
+		// runs outside of Angular Zone by default
+	}
+}
+```
+
+  </TabItem>
+</Tabs>
+
+Si no eres fan de `inject()`, también puedes usar `NgxResize` en el elemento Host aprovechando `hostDirectives`
+
+```ts
+@Component({
+	hostDirectives: [{ directive: NgxResize, outputs: ['ngxResize'] }],
+})
+export class App {
+	@HostListener('ngxResize', ['$event'])
+	onResize(event: ResizeResult) {
+		// listen for resize event from NgxResize
+	}
+}
+```
+
+### `ResizeOptions`
+
+Podemos pasar opciones específicas de `ResizeOptions` a ambas opciones de inyección y directiva.
+
+```ts
+injectResize(someOptions);
+```
+
+```html
+<div (ngxResize)="onResize($event)" [ngxResizeOptions]="someOptions">
+	<div></div>
+</div>
+```
+
+Para proveer `ResizeOptions` globalmente a la aplicación o a un subárbol de componentes (a través de `Route#providers`), podemos usar `provideResizeOptions()`
+
+```ts
+// Standalone
+bootstrapApplication(App, { providers: [provideResizeOptions(globalOptions)] });
+
+// AppModule
+@NgModule({
+	providers: [provideResizeOptions(globalOptions)],
+})
+export class AppModule {}
+
+// Route#provider (equivalent to Lazy-load modules)
+const route = {
+	path: 'some-path',
+	providers: [provideResizeOptions(subTreeGlobalOptions)],
+};
+```