@intlayer/docs 8.7.14 → 8.9.0

package/docs/en-GB/intlayer_with_vite+react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Vite + React i18n - How to translate an React app in 2026
 description: Learn how to add internationalisation (i18n) to your Vite and React application using Intlayer. Follow this guide to make your app multilingual.
 keywords:
@@ -19,12 +19,15 @@ applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
 applicationShowcase: https://intlayer-vite-react-template.vercel.app
 youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Add init command"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Translate your Vite and React website using Intlayer | Internationalization (i18n)
@@ -346,10 +349,12 @@ const App: FC = () => (
 export default App;
 ```
 
-> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
+> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
 
 > ```jsx
 > <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
 > To learn more about the `useIntlayer` hook, refer to the [documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en-GB/packages/react-intlayer/useIntlayer.md).

package/docs/en-GB/intlayer_with_vite+react_compiler.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Vite + React i18n - Transform an existing app into a multilingual app (i18n guide 2026)
 description: Discover how to make your existing Vite and React application multilingual using Intlayer Compiler. Follow the documentation to internationalise (i18n) and translate it with AI.
 keywords:
@@ -20,6 +20,9 @@ applicationTemplate: https://github.com/aymericzip/intlayer-vite-react-template
 applicationShowcase: https://intlayer-vite-react-template.vercel.app
 youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.2.0
     date: 2026-03-09
     changes: "Update compiler options, add FilePathPattern support"

package/docs/en-GB/intlayer_with_vite+solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Vite + Solid i18n - How to translate an Solid app in 2026
 description: Discover how to make your Vite and Solid website multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
@@ -16,12 +16,15 @@ slugs:
   - vite-and-solid
 applicationTemplate: https://github.com/aymericzip/intlayer-vite-solid-template
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Add init command"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Getting Started Internationalising (i18n) with Intlayer and Vite and Solid
@@ -197,24 +200,24 @@ const AppContent: Component = () => {
     <>
       <div>
         <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} class="logo" alt={content().viteLogo.value} />
+          <img src={viteLogo} class="logo" alt={content.viteLogo.value} />
         </a>
         <a href="https://www.solidjs.com/" target="_blank">
           <img
             src={solidLogo}
             class="logo solid"
-            alt={content().solidLogo.value}
+            alt={content.solidLogo.value}
           />
         </a>
       </div>
-      <h1>{content().title}</h1>
+      <h1>{content.title}</h1>
       <div class="card">
         <button onClick={() => setCount((count) => count + 1)}>
-          {content().count({ count: count() })}
+          {content.count({ count: count() })}
         </button>
-        <p>{content().edit}</p>
+        <p>{content.edit}</p>
       </div>
-      <p class="read-the-docs">{content().readTheDocs}</p>
+      <p class="read-the-docs">{content.readTheDocs}</p>
     </>
   );
 };
@@ -228,12 +231,14 @@ const App: Component = () => (
 export default App;
 ```
 
-> In Solid, `useIntlayer` returns an **accessor** function (e.g., `content()`). You must call this function to access the reactive content.
+> In Solid, `useIntlayer` returns an **accessor** function (e.g., `content.). You must call this function to access the reactive content.
 
-> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you must call the value of the function, like:
+> If you want to use your content in a `string` attribute, such as `alt`, `title`, `href`, `aria-label`, etc., you can use the value of the function, like:
 >
 > ```jsx
-> <img src={content().image.src.value} alt={content().image.value} />
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
 ### (Optional) Step 6: Change the language of your content
@@ -443,7 +448,7 @@ const MyComponent = () => {
   return (
     <div>
       {/* Renders as HTML via MarkdownProvider */}
-      {content().markdownContent}
+      {content.markdownContent}
     </div>
   );
 };

package/docs/en-GB/intlayer_with_vite+svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Vite + Svelte i18n - How to translate an Svelte app in 2026
 description: Discover how to make your Vite and Svelte website multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
@@ -17,15 +17,18 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-vite-svelte-template
 applicationShowcase: https://intlayer-vite-svelte-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Add init command"
   - version: 5.5.11
     date: 2025-11-19
-    changes: "Update doc"
+    changes: "Update documentation"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Translate your Vite and Svelte website using Intlayer | Internationalisation (i18n)
@@ -223,6 +226,8 @@ export default appContent;
 <h1>{@const Title = $content.title}<Title /></h1>
 <!-- To render the content as a string -->
 <div aria-label={$content.title.value}></div>
+<div aria-label={$content.title.toString()}></div>
+<div aria-label={String($content.title)}></div>
 ```
 
 ### (Optional) Step 6: Change the language of your content

package/docs/en-GB/intlayer_with_vite+vanilla.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-03-23
+updatedAt: 2026-05-06
 title: i18n Vite + Vanilla JS - How to translate a Vanilla JS app in 2026
 description: Discover how to make your Vite and Vanilla JS website multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
@@ -19,9 +19,12 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-vite-vanilla-template
 applicationShowcase: https://intlayer-vite-vanilla.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.4.10
     date: 2026-03-23
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Translate your Vite and Vanilla JS website using Intlayer | Internationalisation (i18n)

package/docs/en-GB/intlayer_with_vite+vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Vite + Vue i18n - How to translate an Vue app in 2026
 description: Discover how to make your Vite and Vue website multilingual. Follow the documentation to internationalise (i18n) and translate it.
 keywords:
@@ -18,12 +18,15 @@ applicationTemplate: https://github.com/aymericzip/intlayer-vite-vue-template
 applicationShowcase: https://intlayer-vite-vue-template.vercel.app
 youtubeVideo: https://www.youtube.com/watch?v=IE3XWkZ6a5U
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Add init command"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Getting Started Internationalising (i18n) with Intlayer and Vite and Vue

package/docs/en-GB/packages/next-intlayer/useIntlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2025-06-29
+updatedAt: 2026-05-06
 title: useIntlayer Hook Documentation | next-intlayer
 description: See how to use the useIntlayer hook for next-intlayer package
 keywords:
@@ -19,9 +19,12 @@ slugs:
   - next-intlayer
   - useIntlayer
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 5.5.10
     date: 2025-06-29
-    changes: "Init history"
+    changes: "Initial history"
 ---
 
 # Next.js Integration: `useIntlayer` Hook Documentation
@@ -144,6 +147,8 @@ To localise attributes such as `alt`, `title`, `href`, `aria-label`, etc., ensur
 
 ```tsx
 <img src={content.image.src.value} alt={content.image.alt.value} />
+<img src={content.image.src.toString()} alt={content.image.alt.toString()} />
+<img src={String(content.image.src)} alt={String(content.image.alt)} />
 ```
 
 ## Further Information

package/docs/en-GB/packages/solid-intlayer/useIntlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-21
-updatedAt: 2026-01-21
+updatedAt: 2026-05-06
 title: useIntlayer Hook Documentation | solid-intlayer
 description: See how to use the useIntlayer hook for the solid-intlayer package
 keywords:
@@ -18,6 +18,9 @@ slugs:
   - solid-intlayer
   - useIntlayer
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Update Solid useIntlayer API usage to direct property access"
   - version: 8.0.0
     date: 2026-01-21
     changes: "Unified documentation for all exports"
@@ -25,7 +28,7 @@ history:
 
 # useIntlayer Hook Documentation
 
-The `useIntlayer` hook allows you to retrieve localised content from a dictionary using its key. In Solid, this hook returns a reactive **accessor** function that updates whenever the locale changes.
+The `useIntlayer` hook allows you to retrieve localised content from a dictionary using its key. In Solid, this hook returns reactive content that updates whenever the locale changes.
 
 ## Usage
 
@@ -37,8 +40,8 @@ const MyComponent = () => {
 
   return (
     <div>
-      <h1>{content().title}</h1>
-      <p>{content().description}</p>
+      <h1>{content.title}</h1>
+      <p>{content.description}</p>
     </div>
   );
 };

package/docs/es/dictionary/plurial.md

@@ -0,0 +1,226 @@
+---
+createdAt: 2026-05-04
+updatedAt: 2026-05-04
+title: Plural
+description: Descubre cómo declarar y utilizar contenido en plural adaptado a la configuración regional (basado en CLDR) en tu sitio web multilingüe. Sigue los pasos de esta documentación en línea para configurar tu proyecto en unos minutos.
+keywords:
+  - Plural
+  - Pluralización
+  - CLDR
+  - Internacionalización
+  - Documentación
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - plural
+history:
+  - version: 8.8.0
+    date: 2026-05-04
+    changes: "Init history"
+---
+
+# Contenido en Plural / El plural en Intlayer
+
+## Cómo funciona el plural
+
+En Intlayer, el contenido en plural se logra a través de la función `plural`, que asigna las categorías de plural de CLDR, `zero`, `one`, `two`, `few`, `many`, `other`, a su contenido correspondiente. La categoría correcta se selecciona automáticamente según la configuración regional activa y un valor de conteo, utilizando la API integrada de la plataforma [`Intl.PluralRules`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Intl/PluralRules).
+
+A diferencia de [`enu`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/enumeration.md), que selecciona contenido según rangos numéricos que tú mismo defines, `plural` delega la selección a las reglas de CLDR. Esto es lo que lo hace escalable a idiomas con reglas de pluralización complejas, como el ruso, el polaco, el árabe o el galés, sin tener que escribir manualmente lógica de módulo.
+
+## Cuándo usar `plural` vs `enu`
+
+| Caso de uso                                                                                                  | Ayudante |
+| ------------------------------------------------------------------------------------------------------------ | -------- |
+| Formas plurales gramaticales adaptadas a la configuración regional (una manzana / dos manzanas / 5 manzanas) | `plural` |
+| Rangos numéricos personalizados (`<5`, `>=10`) o categorías no pertenecientes a CLDR                         | `enu`    |
+
+Si solo te diriges al inglés o español (que solo tienen `one` / `other`), cualquiera de los dos funciona. Para cualquier idioma con distinciones `few` / `many` / `two`, prefiere `plural`.
+
+## Configuración del contenido en plural
+
+Para configurar el contenido en plural en tu proyecto Intlayer, crea un módulo de contenido que utilice el ayudante `plural`. La categoría `other` es obligatoria y se utiliza como respaldo cuando una configuración regional no define una categoría más específica.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      es: plural({
+        one: "{{count}} vacante",
+        other: "{{count}} vacantes",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "es": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} vacante",
+            "other": "{{count}} vacantes"
+          }
+        }
+      }
+    }
+  }
+}
+```
+
+> Las categorías admitidas son `zero`, `one`, `two`, `few`, `many`, `other`. Solo necesitas declarar las categorías que utiliza tu idioma de destino; Intlayer recurre a `other` cuando no coincide ninguna categoría específica.
+>
+> El marcador de posición `{{count}}` se reemplaza automáticamente con el conteo que pases en tiempo de ejecución. También puedes incluir otros marcadores de posición (consulta [Marcadores de posición personalizados](#custom-placeholders) a continuación).
+
+## Uso de contenido en plural con React Intlayer
+
+Para usar contenido en plural dentro de un componente de React, recupéralo a través del gancho `useIntlayer` y llámalo con un conteo. La configuración regional activa y el conteo se combinan para elegir la categoría CLDR coincidente.
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      {/* En inglés:                                   */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
+      <p>{totalOpenings(count)}</p>
+    </div>
+  );
+};
+
+export default OpeningsComponent;
+```
+
+Puedes llamar a la función devuelta de dos maneras equivalentes:
+
+```tsx
+totalOpenings(21); // forma abreviada: solo conteo
+totalOpenings({ count: 21 }); // forma explícita
+```
+
+## Marcadores de posición personalizados
+
+Las cadenas en plural pueden incluir marcadores de posición distintos de `{{count}}`. Pásalos en forma de objeto junto con `count`:
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, type Dictionary } from "intlayer";
+
+const inboxContent = {
+  key: "inbox_summary",
+  content: {
+    summary: plural({
+      one: "{{name}}, tienes {{count}} mensaje nuevo",
+      other: "{{name}}, tienes {{count}} mensajes nuevos",
+    }),
+  },
+} satisfies Dictionary;
+
+export default inboxContent;
+```
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+const { summary } = useIntlayer("inbox_summary");
+
+summary({ count: 1, name: "Alice" });
+// → "Alice, tienes 1 mensaje nuevo"
+
+summary({ count: 7, name: "Alice" });
+// → "Alice, tienes 7 mensajes nuevos"
+```
+
+## Categorías CLDR de un vistazo
+
+Diferentes idiomas utilizan diferentes subconjuntos de las categorías CLDR. Algunos casos comunes:
+
+| Idioma          | Categorías utilizadas                        |
+| --------------- | -------------------------------------------- |
+| Inglés (`en`)   | `one`, `other`                               |
+| Francés (`fr`)  | `one`, `many`, `other`                       |
+| Ruso (`ru`)     | `one`, `few`, `many`, `other`                |
+| Polaco (`pl`)   | `one`, `few`, `many`, `other`                |
+| Árabe (`ar`)    | `zero`, `one`, `two`, `few`, `many`, `other` |
+| Japonés / Chino | solo `other`                                 |
+
+No necesitas memorizar esto: declara las categorías para las que tienes traducciones e Intlayer recurrirá a `other` cuando sea necesario.
+
+## Limitación
+
+A diferencia de otros nodos, el nodo `plural` aún no se puede imbricar con nodos hijos.
+
+Ejemplo:
+
+Válido:
+
+```ts
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      fr: plural({
+        one: "{{count}} offre",
+        other: "{{count}} offres",
+      }),
+    }),
+```
+
+Inválido:
+
+```ts
+totalOpenings: plural({
+  one: {
+    en: "{{count}} opening",
+    fr: "{{count}} offre",
+  },
+  other: {
+    en: "{{count}} openings",
+    fr: "{{count}} offres",
+  },
+}),
+```
+
+## Recursos adicionales
+
+Para obtener información más detallada sobre la configuración y el uso, consulta los siguientes recursos:
+
+- [Documentación de Enumeración](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/enumeration.md)
+- [Documentación de Inserción](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/dictionary/insertion.md)
+- [Documentación de la CLI de Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/cli/index.md)
+- [Documentación de React Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_create_react_app.md)
+- [Documentación de Next Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/es/intlayer_with_nextjs_15.md)
+
+Estos recursos ofrecen más información sobre la configuración y el uso de Intlayer en diversos entornos y marcos.

package/docs/es/intlayer_with_adonisjs.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: AdonisJS i18n - Cómo traducir una aplicación AdonisJS en 2026
 description: Descubre cómo hacer que tu backend de AdonisJS sea multilingüe. Sigue la documentación para internacionalizarlo (i18n) y traducirlo.
 keywords:
@@ -16,6 +16,9 @@ slugs:
   - adonisjs
 applicationTemplate: https://github.com/aymericzip/intlayer-adonis-template
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
   - version: 8.0.0
     date: 2025-12-30
     changes: "Inicializar historial"

package/docs/es/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Analog i18n - Cómo traducir una aplicación Analog en 2026
 description: Descubre cómo hacer que tu aplicación Analog sea multilingüe. Sigue la documentación para internacionalizarla (i18n) y traducirla.
 keywords:
@@ -17,6 +17,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-analog-template
 applicationShowcase: https://intlayer-analog-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
   - version: 8.0.4
     date: 2026-01-26
     changes: "Inicio del historial"

package/docs/es/intlayer_with_angular.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Angular i18n - Cómo traducir una aplicación Angular en 2026
 description: Descubre cómo hacer que tu sitio web Angular sea multilingüe. Sigue la documentación para internacionalizar (i18n) y traducirlo.
 keywords:
@@ -16,6 +16,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-angular-template
 applicationShowcase: https://intlayer-angular-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
   - version: 8.0.0
     date: 2025-12-30
     changes: "Añadir comando init"

package/docs/es/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2025-12-30
+updatedAt: 2026-05-06
 title: Astro i18n - Cómo traducir una aplicación Astro en 2026
 description: Aprende a añadir internacionalización (i18n) a tu sitio Astro con Intlayer. Sigue esta guía para que tu sitio sea multilingüe.
 keywords:
@@ -18,6 +18,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
   - version: 7.5.9
     date: 2025-12-30
     changes: "Añadir comando init"

package/docs/es/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-04-24
+updatedAt: 2026-05-06
 title: Astro + Lit i18n - Cómo traducir una aplicación Astro + Lit en 2026
 description: Aprende a añadir internacionalización (i18n) a tu sitio Astro + Lit con Intlayer. Sigue esta guía para que tu sitio sea multilingüe.
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
   - version: 8.7.7
     date: 2026-04-24
     changes: "Documentación inicial para Astro + Lit"
@@ -266,6 +269,14 @@ const { greeting } = getIntlayer("lit-demo", locale);
 </script>
 ```
 
+> Si desea utilizar su contenido en un atributo de `cadena`, como `alt`, `title`, `href`, `aria-label`, etc., puede utilizar el valor de la función, como:
+
+> ```jsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```
+
 > **Nota sobre la configuración de rutas:**
 > La estructura de directorios que utilices depende del ajuste `middleware.routing` en `intlayer.config.ts`:
 >

package/docs/es/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-04-24
+updatedAt: 2026-05-06
 title: Astro + Preact i18n - Cómo traducir una aplicación Astro + Preact en 2026
 description: Aprende a añadir internacionalización (i18n) a tu sitio Astro + Preact con Intlayer. Sigue esta guía para que tu sitio sea multilingüe.
 keywords:
@@ -19,6 +19,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 8.9.0
+    date: 2026-05-04
+    changes: "Actualizar el uso de la API useIntlayer de Solid para el acceso directo a las propiedades"
   - version: 8.7.7
     date: 2026-04-24
     changes: "Documentación inicial para Astro + Preact"
@@ -262,6 +265,14 @@ const { title } = getIntlayer("app", locale);
 </html>
 ```
 
+> Si desea utilizar su contenido en un atributo de `cadena`, como `alt`, `title`, `href`, `aria-label`, etc., puede utilizar el valor de la función, como:
+
+> ```jsx
+> <img src={content.image.src.value} alt={content.image.value} />
+> <img src={content.image.src.toString()} alt={content.image.toString()} />
+> <img src={String(content.image.src)} alt={String(content.image)} />
+> ```
+
 > **Nota sobre la configuración de rutas:**
 > La estructura de directorios que utilices depende del ajuste `middleware.routing` en `intlayer.config.ts`:
 >