@intlayer/docs 6.1.6-canary.0 → 6.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/blog/en/next-i18next_vs_next-intl_vs_intlayer.md +71 -80
- package/dist/cjs/generated/docs.entry.cjs +16 -0
- package/dist/cjs/generated/docs.entry.cjs.map +1 -1
- package/dist/esm/generated/docs.entry.mjs +16 -0
- package/dist/esm/generated/docs.entry.mjs.map +1 -1
- package/dist/types/generated/docs.entry.d.ts +1 -0
- package/dist/types/generated/docs.entry.d.ts.map +1 -1
- package/docs/ar/intlayer_with_angular.md +2 -2
- package/docs/ar/intlayer_with_astro.md +246 -0
- package/docs/ar/intlayer_with_create_react_app.md +3 -2
- package/docs/ar/intlayer_with_express.md +2 -2
- package/docs/ar/intlayer_with_nestjs.md +2 -2
- package/docs/ar/intlayer_with_nextjs_14.md +2 -2
- package/docs/ar/intlayer_with_nextjs_15.md +2 -2
- package/docs/ar/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ar/intlayer_with_nuxt.md +2 -2
- package/docs/ar/intlayer_with_react_native+expo.md +11 -20
- package/docs/ar/intlayer_with_react_router_v7.md +195 -241
- package/docs/ar/intlayer_with_tanstack.md +198 -272
- package/docs/ar/intlayer_with_vite+preact.md +9 -9
- package/docs/ar/intlayer_with_vite+react.md +7 -7
- package/docs/ar/intlayer_with_vite+vue.md +9 -9
- package/docs/de/intlayer_with_angular.md +2 -2
- package/docs/de/intlayer_with_astro.md +246 -0
- package/docs/de/intlayer_with_create_react_app.md +2 -2
- package/docs/de/intlayer_with_express.md +2 -2
- package/docs/de/intlayer_with_nestjs.md +2 -2
- package/docs/de/intlayer_with_nextjs_14.md +2 -2
- package/docs/de/intlayer_with_nextjs_15.md +2 -2
- package/docs/de/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/de/intlayer_with_nuxt.md +2 -2
- package/docs/de/intlayer_with_react_native+expo.md +11 -20
- package/docs/de/intlayer_with_react_router_v7.md +193 -242
- package/docs/de/intlayer_with_tanstack.md +194 -266
- package/docs/de/intlayer_with_vite+preact.md +9 -9
- package/docs/de/intlayer_with_vite+react.md +9 -9
- package/docs/de/intlayer_with_vite+vue.md +11 -11
- package/docs/de/packages/vite-intlayer/index.md +3 -3
- package/docs/en/how_works_intlayer.md +1 -1
- package/docs/en/index.md +1 -1
- package/docs/en/intlayer_cli.md +1 -1
- package/docs/en/intlayer_with_angular.md +4 -4
- package/docs/en/intlayer_with_astro.md +246 -0
- package/docs/en/intlayer_with_create_react_app.md +4 -4
- package/docs/en/intlayer_with_express.md +3 -3
- package/docs/en/intlayer_with_lynx+react.md +1 -1
- package/docs/en/intlayer_with_nestjs.md +2 -2
- package/docs/en/intlayer_with_nextjs_14.md +13 -4
- package/docs/en/intlayer_with_nextjs_15.md +13 -4
- package/docs/en/intlayer_with_nextjs_page_router.md +5 -5
- package/docs/en/intlayer_with_nuxt.md +4 -4
- package/docs/en/intlayer_with_react_native+expo.md +46 -24
- package/docs/en/intlayer_with_react_router_v7.md +164 -211
- package/docs/en/intlayer_with_tanstack.md +166 -241
- package/docs/en/intlayer_with_vite+preact.md +12 -12
- package/docs/en/intlayer_with_vite+react.md +12 -12
- package/docs/en/intlayer_with_vite+solid.md +2 -2
- package/docs/en/intlayer_with_vite+svelte.md +2 -2
- package/docs/en/intlayer_with_vite+vue.md +12 -12
- package/docs/en/introduction.md +1 -1
- package/docs/en/packages/next-intlayer/useDictionary.md +1 -1
- package/docs/en/packages/next-intlayer/useIntlayer.md +1 -1
- package/docs/en/packages/react-intlayer/useDictionary.md +1 -1
- package/docs/en/packages/react-intlayer/useI18n.md +1 -1
- package/docs/en/packages/react-intlayer/useIntlayer.md +1 -1
- package/docs/en/releases/v6.md +1 -0
- package/docs/en/roadmap.md +1 -1
- package/docs/en-GB/intlayer_with_angular.md +3 -3
- package/docs/en-GB/intlayer_with_astro.md +246 -0
- package/docs/en-GB/intlayer_with_create_react_app.md +5 -4
- package/docs/en-GB/intlayer_with_express.md +2 -2
- package/docs/en-GB/intlayer_with_nestjs.md +2 -2
- package/docs/en-GB/intlayer_with_nextjs_14.md +4 -4
- package/docs/en-GB/intlayer_with_nextjs_15.md +2 -2
- package/docs/en-GB/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/en-GB/intlayer_with_nuxt.md +2 -2
- package/docs/en-GB/intlayer_with_react_native+expo.md +11 -20
- package/docs/en-GB/intlayer_with_react_router_v7.md +171 -220
- package/docs/en-GB/intlayer_with_tanstack.md +174 -248
- package/docs/en-GB/intlayer_with_vite+preact.md +9 -9
- package/docs/en-GB/intlayer_with_vite+react.md +9 -9
- package/docs/en-GB/intlayer_with_vite+vue.md +11 -11
- package/docs/en-GB/packages/next-intlayer/useIntlayer.md +1 -1
- package/docs/en-GB/packages/react-intlayer/useIntlayer.md +1 -1
- package/docs/es/intlayer_with_angular.md +2 -2
- package/docs/es/intlayer_with_astro.md +246 -0
- package/docs/es/intlayer_with_create_react_app.md +3 -2
- package/docs/es/intlayer_with_express.md +2 -2
- package/docs/es/intlayer_with_nextjs_14.md +2 -2
- package/docs/es/intlayer_with_nextjs_15.md +2 -2
- package/docs/es/intlayer_with_react_native+expo.md +11 -20
- package/docs/es/intlayer_with_react_router_v7.md +188 -232
- package/docs/es/intlayer_with_tanstack.md +203 -273
- package/docs/es/intlayer_with_vite+preact.md +7 -7
- package/docs/es/intlayer_with_vite+react.md +7 -7
- package/docs/es/intlayer_with_vite+vue.md +9 -9
- package/docs/fr/intlayer_with_angular.md +2 -2
- package/docs/fr/intlayer_with_astro.md +246 -0
- package/docs/fr/intlayer_with_create_react_app.md +3 -2
- package/docs/fr/intlayer_with_express.md +2 -2
- package/docs/fr/intlayer_with_nestjs.md +2 -2
- package/docs/fr/intlayer_with_nextjs_14.md +2 -2
- package/docs/fr/intlayer_with_react_native+expo.md +11 -20
- package/docs/fr/intlayer_with_react_router_v7.md +188 -248
- package/docs/fr/intlayer_with_tanstack.md +192 -265
- package/docs/fr/intlayer_with_vite+preact.md +7 -7
- package/docs/fr/intlayer_with_vite+react.md +7 -7
- package/docs/fr/intlayer_with_vite+vue.md +9 -9
- package/docs/hi/intlayer_cli.md +1 -4
- package/docs/hi/intlayer_with_angular.md +2 -2
- package/docs/hi/intlayer_with_astro.md +246 -0
- package/docs/hi/intlayer_with_create_react_app.md +2 -2
- package/docs/hi/intlayer_with_express.md +2 -2
- package/docs/hi/intlayer_with_nestjs.md +2 -2
- package/docs/hi/intlayer_with_nextjs_14.md +2 -2
- package/docs/hi/intlayer_with_nextjs_15.md +2 -2
- package/docs/hi/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/hi/intlayer_with_nuxt.md +2 -2
- package/docs/hi/intlayer_with_react_native+expo.md +11 -20
- package/docs/hi/intlayer_with_react_router_v7.md +199 -243
- package/docs/hi/intlayer_with_tanstack.md +210 -285
- package/docs/hi/intlayer_with_vite+preact.md +9 -9
- package/docs/hi/intlayer_with_vite+react.md +9 -9
- package/docs/hi/intlayer_with_vite+solid.md +1 -1
- package/docs/hi/intlayer_with_vite+vue.md +11 -11
- package/docs/it/intlayer_with_angular.md +2 -2
- package/docs/it/intlayer_with_astro.md +246 -0
- package/docs/it/intlayer_with_create_react_app.md +3 -2
- package/docs/it/intlayer_with_express.md +2 -2
- package/docs/it/intlayer_with_nestjs.md +2 -2
- package/docs/it/intlayer_with_nextjs_14.md +2 -2
- package/docs/it/intlayer_with_nextjs_15.md +2 -2
- package/docs/it/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/it/intlayer_with_nuxt.md +2 -2
- package/docs/it/intlayer_with_react_native+expo.md +11 -21
- package/docs/it/intlayer_with_react_router_v7.md +195 -242
- package/docs/it/intlayer_with_tanstack.md +203 -267
- package/docs/it/intlayer_with_vite+preact.md +9 -9
- package/docs/it/intlayer_with_vite+react.md +13 -11
- package/docs/it/intlayer_with_vite+vue.md +11 -11
- package/docs/ja/intlayer_with_angular.md +2 -2
- package/docs/ja/intlayer_with_astro.md +246 -0
- package/docs/ja/intlayer_with_create_react_app.md +3 -2
- package/docs/ja/intlayer_with_express.md +2 -2
- package/docs/ja/intlayer_with_nestjs.md +2 -2
- package/docs/ja/intlayer_with_nextjs_14.md +2 -2
- package/docs/ja/intlayer_with_nextjs_15.md +2 -2
- package/docs/ja/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ja/intlayer_with_nuxt.md +2 -2
- package/docs/ja/intlayer_with_react_native+expo.md +18 -29
- package/docs/ja/intlayer_with_react_router_v7.md +204 -250
- package/docs/ja/intlayer_with_tanstack.md +218 -286
- package/docs/ja/intlayer_with_vite+preact.md +9 -9
- package/docs/ja/intlayer_with_vite+react.md +11 -11
- package/docs/ja/intlayer_with_vite+vue.md +11 -11
- package/docs/ko/intlayer_with_angular.md +2 -2
- package/docs/ko/intlayer_with_astro.md +246 -0
- package/docs/ko/intlayer_with_create_react_app.md +3 -2
- package/docs/ko/intlayer_with_express.md +2 -2
- package/docs/ko/intlayer_with_nestjs.md +2 -2
- package/docs/ko/intlayer_with_nextjs_14.md +2 -2
- package/docs/ko/intlayer_with_nextjs_15.md +2 -2
- package/docs/ko/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ko/intlayer_with_nuxt.md +2 -2
- package/docs/ko/intlayer_with_react_native+expo.md +19 -28
- package/docs/ko/intlayer_with_react_router_v7.md +190 -244
- package/docs/ko/intlayer_with_tanstack.md +200 -270
- package/docs/ko/intlayer_with_vite+preact.md +9 -9
- package/docs/ko/intlayer_with_vite+react.md +9 -9
- package/docs/ko/intlayer_with_vite+vue.md +11 -11
- package/docs/pt/intlayer_with_angular.md +2 -2
- package/docs/pt/intlayer_with_astro.md +246 -0
- package/docs/pt/intlayer_with_create_react_app.md +3 -2
- package/docs/pt/intlayer_with_express.md +2 -2
- package/docs/pt/intlayer_with_nestjs.md +2 -2
- package/docs/pt/intlayer_with_nextjs_14.md +2 -2
- package/docs/pt/intlayer_with_nextjs_15.md +2 -2
- package/docs/pt/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/pt/intlayer_with_nuxt.md +2 -2
- package/docs/pt/intlayer_with_react_native+expo.md +11 -20
- package/docs/pt/intlayer_with_react_router_v7.md +7 -13
- package/docs/pt/intlayer_with_tanstack.md +183 -258
- package/docs/pt/intlayer_with_vite+preact.md +9 -9
- package/docs/pt/intlayer_with_vite+react.md +9 -9
- package/docs/pt/intlayer_with_vite+vue.md +9 -9
- package/docs/ru/intlayer_with_angular.md +2 -2
- package/docs/ru/intlayer_with_astro.md +246 -0
- package/docs/ru/intlayer_with_create_react_app.md +3 -2
- package/docs/ru/intlayer_with_express.md +2 -2
- package/docs/ru/intlayer_with_nestjs.md +2 -2
- package/docs/ru/intlayer_with_nextjs_14.md +2 -2
- package/docs/ru/intlayer_with_nextjs_15.md +2 -2
- package/docs/ru/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/ru/intlayer_with_nuxt.md +2 -2
- package/docs/ru/intlayer_with_react_native+expo.md +11 -20
- package/docs/ru/intlayer_with_react_router_v7.md +192 -238
- package/docs/ru/intlayer_with_tanstack.md +197 -269
- package/docs/ru/intlayer_with_vite+preact.md +9 -9
- package/docs/ru/intlayer_with_vite+react.md +9 -9
- package/docs/ru/intlayer_with_vite+vue.md +11 -11
- package/docs/tr/how_works_intlayer.md +1 -1
- package/docs/tr/index.md +1 -1
- package/docs/tr/intlayer_cli.md +1 -1
- package/docs/tr/intlayer_with_angular.md +4 -4
- package/docs/tr/intlayer_with_astro.md +246 -0
- package/docs/tr/intlayer_with_create_react_app.md +4 -4
- package/docs/tr/intlayer_with_express.md +3 -3
- package/docs/tr/intlayer_with_lynx+react.md +1 -1
- package/docs/tr/intlayer_with_nestjs.md +2 -2
- package/docs/tr/intlayer_with_nextjs_14.md +2 -2
- package/docs/tr/intlayer_with_nextjs_15.md +4 -4
- package/docs/tr/intlayer_with_nextjs_page_router.md +5 -5
- package/docs/tr/intlayer_with_nuxt.md +4 -4
- package/docs/tr/intlayer_with_react_native+expo.md +12 -21
- package/docs/tr/intlayer_with_react_router_v7.md +222 -267
- package/docs/tr/intlayer_with_tanstack.md +400 -303
- package/docs/tr/intlayer_with_vite+preact.md +12 -12
- package/docs/tr/intlayer_with_vite+react.md +12 -12
- package/docs/tr/intlayer_with_vite+solid.md +2 -2
- package/docs/tr/intlayer_with_vite+svelte.md +2 -2
- package/docs/tr/intlayer_with_vite+vue.md +12 -12
- package/docs/tr/introduction.md +1 -1
- package/docs/tr/packages/react-intlayer/useDictionary.md +1 -1
- package/docs/tr/packages/react-intlayer/useI18n.md +1 -1
- package/docs/tr/roadmap.md +1 -1
- package/docs/zh/intlayer_with_angular.md +2 -2
- package/docs/zh/intlayer_with_astro.md +246 -0
- package/docs/zh/intlayer_with_create_react_app.md +3 -2
- package/docs/zh/intlayer_with_express.md +2 -2
- package/docs/zh/intlayer_with_nestjs.md +2 -2
- package/docs/zh/intlayer_with_nextjs_14.md +2 -2
- package/docs/zh/intlayer_with_nextjs_15.md +2 -2
- package/docs/zh/intlayer_with_nextjs_page_router.md +2 -2
- package/docs/zh/intlayer_with_nuxt.md +2 -2
- package/docs/zh/intlayer_with_react_native+expo.md +19 -28
- package/docs/zh/intlayer_with_react_router_v7.md +200 -248
- package/docs/zh/intlayer_with_tanstack.md +208 -283
- package/docs/zh/intlayer_with_vite+preact.md +9 -9
- package/docs/zh/intlayer_with_vite+react.md +9 -9
- package/docs/zh/intlayer_with_vite+vue.md +9 -9
- package/package.json +11 -11
- package/src/generated/docs.entry.ts +16 -0
|
@@ -1055,38 +1055,38 @@ const App = () => (
|
|
|
1055
1055
|
module.exports = App;
|
|
1056
1056
|
```
|
|
1057
1057
|
|
|
1058
|
-
En paralelo, también puedes usar el `
|
|
1058
|
+
En paralelo, también puedes usar el `intlayerMiddleware` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional apropiada. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada según las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
|
|
1059
1059
|
|
|
1060
1060
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
1061
1061
|
import { defineConfig } from "vite";
|
|
1062
1062
|
import preact from "@preact/preset-vite";
|
|
1063
|
-
import { intlayer,
|
|
1063
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1064
1064
|
|
|
1065
1065
|
// https://vitejs.dev/config/
|
|
1066
1066
|
export default defineConfig({
|
|
1067
|
-
plugins: [preact(), intlayer(),
|
|
1067
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1068
1068
|
});
|
|
1069
1069
|
```
|
|
1070
1070
|
|
|
1071
1071
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
1072
1072
|
import { defineConfig } from "vite";
|
|
1073
1073
|
import preact from "@preact/preset-vite";
|
|
1074
|
-
import { intlayer,
|
|
1074
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1075
1075
|
|
|
1076
1076
|
// https://vitejs.dev/config/
|
|
1077
1077
|
export default defineConfig({
|
|
1078
|
-
plugins: [preact(), intlayer(),
|
|
1078
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1079
1079
|
});
|
|
1080
1080
|
```
|
|
1081
1081
|
|
|
1082
1082
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
1083
1083
|
const { defineConfig } = require("vite");
|
|
1084
1084
|
const preact = require("@preact/preset-vite");
|
|
1085
|
-
const { intlayer,
|
|
1085
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
1086
1086
|
|
|
1087
1087
|
// https://vitejs.dev/config/
|
|
1088
1088
|
module.exports = defineConfig({
|
|
1089
|
-
plugins: [preact(), intlayer(),
|
|
1089
|
+
plugins: [preact(), intlayer(), intlayerMiddleware()],
|
|
1090
1090
|
});
|
|
1091
1091
|
```
|
|
1092
1092
|
|
|
@@ -1003,38 +1003,38 @@ const App = () => (
|
|
|
1003
1003
|
);
|
|
1004
1004
|
```
|
|
1005
1005
|
|
|
1006
|
-
Paralelamente, también puedes usar el `
|
|
1006
|
+
Paralelamente, también puedes usar el `intlayerMiddleware` para agregar enrutamiento del lado del servidor a tu aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional correspondiente. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada basándose en las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
|
|
1007
1007
|
|
|
1008
1008
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
1009
1009
|
import { defineConfig } from "vite";
|
|
1010
1010
|
import react from "@vitejs/plugin-react-swc";
|
|
1011
|
-
import { intlayer,
|
|
1011
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1012
1012
|
|
|
1013
1013
|
// https://vitejs.dev/config/
|
|
1014
1014
|
export default defineConfig({
|
|
1015
|
-
plugins: [react(), intlayer(),
|
|
1015
|
+
plugins: [react(), intlayer(), intlayerMiddleware()],
|
|
1016
1016
|
});
|
|
1017
1017
|
```
|
|
1018
1018
|
|
|
1019
1019
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
1020
1020
|
import { defineConfig } from "vite";
|
|
1021
1021
|
import react from "@vitejs/plugin-react-swc";
|
|
1022
|
-
import { intlayer,
|
|
1022
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
1023
1023
|
|
|
1024
1024
|
// https://vitejs.dev/config/
|
|
1025
1025
|
export default defineConfig({
|
|
1026
|
-
plugins: [react(), intlayer(),
|
|
1026
|
+
plugins: [react(), intlayer(), intlayerMiddleware()],
|
|
1027
1027
|
});
|
|
1028
1028
|
```
|
|
1029
1029
|
|
|
1030
1030
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
1031
1031
|
const { defineConfig } = require("vite");
|
|
1032
1032
|
const react = require("@vitejs/plugin-react-swc");
|
|
1033
|
-
const { intlayer,
|
|
1033
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
1034
1034
|
|
|
1035
1035
|
// https://vitejs.dev/config/
|
|
1036
1036
|
module.exports = defineConfig({
|
|
1037
|
-
plugins: [react(), intlayer(),
|
|
1037
|
+
plugins: [react(), intlayer(), intlayerMiddleware()],
|
|
1038
1038
|
});
|
|
1039
1039
|
```
|
|
1040
1040
|
|
|
@@ -697,46 +697,46 @@ import LocaleSwitcher from "@components/LocaleSwitcher.vue";
|
|
|
697
697
|
</template>
|
|
698
698
|
```
|
|
699
699
|
|
|
700
|
-
Paralelamente, también puede usar el `
|
|
700
|
+
Paralelamente, también puede usar el `intlayerMiddleware` para agregar enrutamiento del lado del servidor a su aplicación. Este plugin detectará automáticamente la configuración regional actual basada en la URL y establecerá la cookie de configuración regional correspondiente. Si no se especifica ninguna configuración regional, el plugin determinará la configuración regional más adecuada según las preferencias de idioma del navegador del usuario. Si no se detecta ninguna configuración regional, redirigirá a la configuración regional predeterminada.
|
|
701
701
|
|
|
702
702
|
```typescript {3,7} fileName="vite.config.ts" codeFormat="typescript"
|
|
703
703
|
import { defineConfig } from "vite";
|
|
704
704
|
import vue from "@vitejs/plugin-vue";
|
|
705
|
-
import { intlayer,
|
|
705
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
706
706
|
|
|
707
707
|
// https://vitejs.dev/config/
|
|
708
708
|
export default defineConfig({
|
|
709
|
-
plugins: [vue(), intlayer(),
|
|
709
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
710
710
|
});
|
|
711
711
|
```
|
|
712
712
|
|
|
713
713
|
```javascript {3,7} fileName="vite.config.mjs" codeFormat="esm"
|
|
714
714
|
import { defineConfig } from "vite";
|
|
715
715
|
import vue from "@vitejs/plugin-vue";
|
|
716
|
-
import { intlayer,
|
|
716
|
+
import { intlayer, intlayerMiddleware } from "vite-intlayer";
|
|
717
717
|
|
|
718
718
|
// https://vitejs.dev/config/
|
|
719
719
|
export default defineConfig({
|
|
720
|
-
plugins: [vue(), intlayer(),
|
|
720
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
721
721
|
});
|
|
722
722
|
```
|
|
723
723
|
|
|
724
724
|
```javascript {3,7} fileName="vite.config.cjs" codeFormat="commonjs"
|
|
725
725
|
const { defineConfig } = require("vite");
|
|
726
726
|
const vue = require("@vitejs/plugin-vue");
|
|
727
|
-
const { intlayer,
|
|
727
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
728
728
|
|
|
729
729
|
// https://vitejs.dev/config/
|
|
730
730
|
module.exports = defineConfig({
|
|
731
|
-
plugins: [vue(), intlayer(),
|
|
731
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
732
732
|
});
|
|
733
733
|
const { defineConfig } = require("vite");
|
|
734
734
|
const vue = require("@vitejs/plugin-vue");
|
|
735
|
-
const { intlayer,
|
|
735
|
+
const { intlayer, intlayerMiddleware } = require("vite-intlayer");
|
|
736
736
|
|
|
737
737
|
// https://vitejs.dev/config/
|
|
738
738
|
module.exports = defineConfig({
|
|
739
|
-
plugins: [vue(), intlayer(),
|
|
739
|
+
plugins: [vue(), intlayer(), intlayerMiddleware()],
|
|
740
740
|
});
|
|
741
741
|
```
|
|
742
742
|
|
|
@@ -648,9 +648,9 @@ Pour des scénarios plus complexes, vous pouvez créer un pipe pour rendre le HT
|
|
|
648
648
|
|
|
649
649
|
Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
|
|
650
650
|
|
|
651
|
-

|
|
652
652
|
|
|
653
|
-

|
|
654
654
|
|
|
655
655
|
Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement.
|
|
656
656
|
|
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
---
|
|
2
|
+
createdAt: 2024-03-07
|
|
3
|
+
updatedAt: 2025-10-03
|
|
4
|
+
title: Prise en main d'Intlayer avec Astro
|
|
5
|
+
description: Apprenez à ajouter l'internationalisation (i18n) à votre application Vite et React en utilisant Intlayer. Suivez ce guide pour rendre votre application multilingue.
|
|
6
|
+
keywords:
|
|
7
|
+
- Internationalisation
|
|
8
|
+
- Documentation
|
|
9
|
+
- Intlayer
|
|
10
|
+
- Vite
|
|
11
|
+
- React
|
|
12
|
+
- i18n
|
|
13
|
+
- JavaScript
|
|
14
|
+
slugs:
|
|
15
|
+
- doc
|
|
16
|
+
- environment
|
|
17
|
+
- astro
|
|
18
|
+
applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
|
|
19
|
+
---
|
|
20
|
+
|
|
21
|
+
# Prise en main de l'internationalisation (i18n) avec Intlayer et Astro
|
|
22
|
+
|
|
23
|
+
Voir le [Modèle d'application](https://github.com/aymericzip/intlayer-astro-template) sur GitHub.
|
|
24
|
+
|
|
25
|
+
## Qu'est-ce qu'Intlayer ?
|
|
26
|
+
|
|
27
|
+
**Intlayer** est une bibliothèque d'internationalisation (i18n) innovante et open-source conçue pour simplifier la prise en charge multilingue dans les applications web modernes.
|
|
28
|
+
|
|
29
|
+
Avec Intlayer, vous pouvez :
|
|
30
|
+
|
|
31
|
+
- **Gérer facilement les traductions** en utilisant des dictionnaires déclaratifs au niveau des composants.
|
|
32
|
+
- **Localiser dynamiquement les métadonnées**, les routes et le contenu.
|
|
33
|
+
- **Assurer la prise en charge de TypeScript** avec des types générés automatiquement, améliorant l'autocomplétion et la détection d'erreurs.
|
|
34
|
+
- **Bénéficier de fonctionnalités avancées**, comme la détection et le changement dynamiques de la langue.
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Guide étape par étape pour configurer Intlayer dans Astro
|
|
39
|
+
|
|
40
|
+
### Étape 1 : Installer les dépendances
|
|
41
|
+
|
|
42
|
+
Installez les paquets nécessaires avec votre gestionnaire de paquets :
|
|
43
|
+
|
|
44
|
+
```bash packageManager="npm"
|
|
45
|
+
npm install intlayer astro-intlayer
|
|
46
|
+
# Optionnel : ajouter le support des îles React
|
|
47
|
+
npm install react react-dom react-intlayer @astrojs/react
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```bash packageManager="pnpm"
|
|
51
|
+
pnpm add intlayer astro-intlayer
|
|
52
|
+
# Optionnel : ajouter le support des îles React
|
|
53
|
+
pnpm add react react-dom react-intlayer @astrojs/react
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
```bash packageManager="yarn"
|
|
57
|
+
yarn add intlayer astro-intlayer
|
|
58
|
+
# Optionnel : ajouter le support des îles React
|
|
59
|
+
yarn add react react-dom react-intlayer @astrojs/react
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
- **intlayer**
|
|
63
|
+
Le paquet principal qui fournit les outils d'internationalisation pour la gestion de la configuration, la traduction, la [déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/get_started.md), la transpilation, et les [commandes CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_cli.md).
|
|
64
|
+
|
|
65
|
+
- **astro-intlayer**
|
|
66
|
+
Inclut le plugin d'intégration Astro pour intégrer Intlayer avec le [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production), ainsi que le middleware pour détecter la locale préférée de l'utilisateur, gérer les cookies et gérer la redirection des URL.
|
|
67
|
+
|
|
68
|
+
### Étape 2 : Configuration de votre projet
|
|
69
|
+
|
|
70
|
+
Créez un fichier de configuration pour configurer les langues de votre application :
|
|
71
|
+
|
|
72
|
+
```typescript fileName="intlayer.config.ts"
|
|
73
|
+
import { Locales, type IntlayerConfig } from "intlayer";
|
|
74
|
+
|
|
75
|
+
const config: IntlayerConfig = {
|
|
76
|
+
internationalization: {
|
|
77
|
+
locales: [
|
|
78
|
+
Locales.ENGLISH,
|
|
79
|
+
Locales.FRENCH,
|
|
80
|
+
Locales.SPANISH,
|
|
81
|
+
// Vos autres locales
|
|
82
|
+
],
|
|
83
|
+
defaultLocale: Locales.ENGLISH,
|
|
84
|
+
},
|
|
85
|
+
};
|
|
86
|
+
|
|
87
|
+
export default config;
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
> Grâce à ce fichier de configuration, vous pouvez configurer des URL localisées, la redirection via middleware, les noms des cookies, l'emplacement et l'extension de vos déclarations de contenu, désactiver les logs Intlayer dans la console, et bien plus encore. Pour une liste complète des paramètres disponibles, consultez la [documentation de configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/configuration.md).
|
|
91
|
+
|
|
92
|
+
### Étape 3 : Intégrer Intlayer dans votre configuration Astro
|
|
93
|
+
|
|
94
|
+
Ajoutez le plugin intlayer dans votre configuration.
|
|
95
|
+
|
|
96
|
+
```typescript fileName="astro.config.ts"
|
|
97
|
+
// @ts-check
|
|
98
|
+
|
|
99
|
+
import { intlayer } from "astro-intlayer";
|
|
100
|
+
import { defineConfig } from "astro/config";
|
|
101
|
+
|
|
102
|
+
// https://astro.build/config
|
|
103
|
+
export default defineConfig({
|
|
104
|
+
integrations: [intlayer()],
|
|
105
|
+
});
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
> Le plugin d'intégration `intlayer()` pour Astro est utilisé pour intégrer Intlayer avec Astro. Il assure la construction des fichiers de déclaration de contenu et les surveille en mode développement. Il définit les variables d'environnement Intlayer au sein de l'application Astro. De plus, il fournit des alias pour optimiser les performances.
|
|
109
|
+
|
|
110
|
+
### Étape 4 : Déclarez votre contenu
|
|
111
|
+
|
|
112
|
+
Créez et gérez vos déclarations de contenu pour stocker les traductions :
|
|
113
|
+
|
|
114
|
+
```tsx fileName="src/app.content.tsx"
|
|
115
|
+
import { t, type Dictionary } from "intlayer";
|
|
116
|
+
import type { ReactNode } from "react";
|
|
117
|
+
|
|
118
|
+
const appContent = {
|
|
119
|
+
key: "app",
|
|
120
|
+
content: {
|
|
121
|
+
title: t({
|
|
122
|
+
en: "Hello World",
|
|
123
|
+
fr: "Bonjour le monde",
|
|
124
|
+
es: "Hola mundo",
|
|
125
|
+
}),
|
|
126
|
+
},
|
|
127
|
+
} satisfies Dictionary;
|
|
128
|
+
|
|
129
|
+
export default appContent;
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
> Vos déclarations de contenu peuvent être définies n'importe où dans votre application dès lors qu'elles sont incluses dans le répertoire `contentDir` (par défaut, `./src`). Et qu'elles correspondent à l'extension des fichiers de déclaration de contenu (par défaut, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
|
|
133
|
+
|
|
134
|
+
> Pour plus de détails, référez-vous à la [documentation sur la déclaration de contenu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/dictionary/get_started.md).
|
|
135
|
+
|
|
136
|
+
### Étape 5 : Utilisez votre contenu dans Astro
|
|
137
|
+
|
|
138
|
+
Vous pouvez consommer les dictionnaires directement dans les fichiers `.astro` en utilisant les helpers principaux exportés par `intlayer`.
|
|
139
|
+
|
|
140
|
+
```astro fileName="src/pages/index.astro"
|
|
141
|
+
<!-- astro -->
|
|
142
|
+
---
|
|
143
|
+
import { getIntlayer } from "intlayer";
|
|
144
|
+
import appContent from "../app.content";
|
|
145
|
+
|
|
146
|
+
const { title } = getIntlayer('app');
|
|
147
|
+
---
|
|
148
|
+
|
|
149
|
+
<html lang="en">
|
|
150
|
+
<head>
|
|
151
|
+
<meta charset="utf-8" />
|
|
152
|
+
<meta name="viewport" content="width=device-width" />
|
|
153
|
+
<title>{title}</title>
|
|
154
|
+
</head>
|
|
155
|
+
<body>
|
|
156
|
+
<h1>{title}</h1>
|
|
157
|
+
</body>
|
|
158
|
+
</html>
|
|
159
|
+
```
|
|
160
|
+
|
|
161
|
+
### Étape 6 : Routage localisé
|
|
162
|
+
|
|
163
|
+
Créez un segment de route dynamique pour servir des pages localisées, par exemple `src/pages/[locale]/index.astro` :
|
|
164
|
+
|
|
165
|
+
```astro fileName="src/pages/[locale]/index.astro"
|
|
166
|
+
<!-- astro -->
|
|
167
|
+
---
|
|
168
|
+
import { getIntlayer } from "intlayer";
|
|
169
|
+
|
|
170
|
+
const { title } = getIntlayer('app');
|
|
171
|
+
---
|
|
172
|
+
|
|
173
|
+
<h1>{title}</h1>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
L'intégration Astro ajoute un middleware Vite pendant le développement qui facilite le routage sensible à la locale et les définitions d'environnement. Vous pouvez toujours créer des liens entre les locales en utilisant votre propre logique, ou des fonctions utilitaires comme `getLocalizedUrl` de `intlayer`.
|
|
177
|
+
|
|
178
|
+
### Étape 7 : Continuez à utiliser votre framework préféré
|
|
179
|
+
|
|
180
|
+
Continuez à utiliser votre framework préféré pour construire votre application.
|
|
181
|
+
|
|
182
|
+
- Intlayer + React : [Intlayer avec React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+react.md)
|
|
183
|
+
- Intlayer + Vue : [Intlayer avec Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+vue.md)
|
|
184
|
+
- Intlayer + Svelte : [Intlayer avec Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+svelte.md)
|
|
185
|
+
- Intlayer + Solid : [Intlayer avec Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+solid.md)
|
|
186
|
+
- Intlayer + Preact : [Intlayer avec Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_with_vite+preact.md)
|
|
187
|
+
|
|
188
|
+
### Configurer TypeScript
|
|
189
|
+
|
|
190
|
+
Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
|
|
191
|
+
|
|
192
|
+

|
|
193
|
+
|
|
194
|
+

|
|
195
|
+
|
|
196
|
+
Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement.
|
|
197
|
+
|
|
198
|
+
```json5 fileName="tsconfig.json"
|
|
199
|
+
{
|
|
200
|
+
// ... Vos configurations TypeScript existantes
|
|
201
|
+
"include": [
|
|
202
|
+
// ... Vos configurations TypeScript existantes
|
|
203
|
+
".intlayer/**/*.ts", // Inclure les types générés automatiquement
|
|
204
|
+
],
|
|
205
|
+
}
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Configuration Git
|
|
209
|
+
|
|
210
|
+
Il est recommandé d'ignorer les fichiers générés par Intlayer. Cela vous permet d'éviter de les commettre dans votre dépôt Git.
|
|
211
|
+
|
|
212
|
+
Pour ce faire, vous pouvez ajouter les instructions suivantes à votre fichier `.gitignore` :
|
|
213
|
+
|
|
214
|
+
```plaintext
|
|
215
|
+
# Ignorer les fichiers générés par Intlayer
|
|
216
|
+
.intlayer
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
### Extension VS Code
|
|
220
|
+
|
|
221
|
+
Pour améliorer votre expérience de développement avec Intlayer, vous pouvez installer l'extension officielle **Intlayer VS Code Extension**.
|
|
222
|
+
|
|
223
|
+
[Installer depuis le Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
|
|
224
|
+
|
|
225
|
+
Cette extension offre :
|
|
226
|
+
|
|
227
|
+
- **Autocomplétion** pour les clés de traduction.
|
|
228
|
+
- **Détection d'erreurs en temps réel** pour les traductions manquantes.
|
|
229
|
+
- **Aperçus en ligne** du contenu traduit.
|
|
230
|
+
- **Actions rapides** pour créer et mettre à jour facilement les traductions.
|
|
231
|
+
|
|
232
|
+
Pour plus de détails sur l'utilisation de l'extension, consultez la [documentation de l'extension Intlayer VS Code](https://intlayer.org/doc/vs-code-extension).
|
|
233
|
+
|
|
234
|
+
---
|
|
235
|
+
|
|
236
|
+
### Aller plus loin
|
|
237
|
+
|
|
238
|
+
Pour aller plus loin, vous pouvez implémenter l’[éditeur visuel](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_visual_editor.md) ou externaliser votre contenu en utilisant le [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/fr/intlayer_CMS.md).
|
|
239
|
+
|
|
240
|
+
---
|
|
241
|
+
|
|
242
|
+
## Historique de la documentation
|
|
243
|
+
|
|
244
|
+
| Version | Date | Modifications |
|
|
245
|
+
| ------- | ---------- | ---------------------------------------------------------------- |
|
|
246
|
+
| 6.2.0 | 2025-10-03 | Mise à jour pour l’intégration Astro, configuration, utilisation |
|
|
@@ -1152,9 +1152,10 @@ En appliquant ces modifications, votre application :
|
|
|
1152
1152
|
|
|
1153
1153
|
Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
|
|
1154
1154
|
|
|
1155
|
-

|
|
1156
|
+
|
|
1157
|
+

|
|
1156
1158
|
|
|
1157
|
-

|
|
1158
1159
|
Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement.
|
|
1159
1160
|
|
|
1160
1161
|
```json5 fileName="tsconfig.json"
|
|
@@ -361,9 +361,9 @@ Par défaut, `express-intlayer` interprétera l'en-tête `Accept-Language` pour
|
|
|
361
361
|
|
|
362
362
|
`express-intlayer` exploite les puissantes capacités de TypeScript pour améliorer le processus d'internationalisation. Le typage statique de TypeScript garantit que chaque clé de traduction est prise en compte, réduisant ainsi le risque de traductions manquantes et améliorant la maintenabilité.
|
|
363
363
|
|
|
364
|
-

|
|
365
365
|
|
|
366
|
-

|
|
367
367
|
|
|
368
368
|
Assurez-vous que les types générés automatiquement (par défaut dans ./types/intlayer.d.ts) sont inclus dans votre fichier tsconfig.json.
|
|
369
369
|
|
|
@@ -219,9 +219,9 @@ Par défaut, `express-intlayer` interprétera l'en-tête `Accept-Language` pour
|
|
|
219
219
|
|
|
220
220
|
`express-intlayer` exploite les puissantes capacités de TypeScript pour améliorer le processus d'internationalisation. Le typage statique de TypeScript garantit que chaque clé de traduction est prise en compte, réduisant ainsi le risque de traductions manquantes et améliorant la maintenabilité.
|
|
221
221
|
|
|
222
|
-

|
|
223
223
|
|
|
224
|
-

|
|
225
225
|
|
|
226
226
|
Assurez-vous que les types générés automatiquement (par défaut dans ./types/intlayer.d.ts) sont inclus dans votre fichier tsconfig.json.
|
|
227
227
|
|
|
@@ -1235,9 +1235,9 @@ yarn add @intlayer/swc --save-dev
|
|
|
1235
1235
|
|
|
1236
1236
|
Intlayer utilise l'augmentation de module pour bénéficier de TypeScript et renforcer votre base de code.
|
|
1237
1237
|
|
|
1238
|
-

|
|
1239
1239
|
|
|
1240
|
-

|
|
1241
1241
|
|
|
1242
1242
|
Assurez-vous que votre configuration TypeScript inclut les types générés automatiquement.
|
|
1243
1243
|
|
|
@@ -149,28 +149,25 @@ module.exports = (async () => {
|
|
|
149
149
|
|
|
150
150
|
## Étape 4 : Ajouter le fournisseur Intlayer
|
|
151
151
|
|
|
152
|
-
Pour garder la langue de l'utilisateur
|
|
152
|
+
Pour garder synchronisée la langue de l'utilisateur dans toute votre application, vous devez envelopper votre composant racine avec le composant `IntlayerProvider` de `react-intlayer-native`.
|
|
153
153
|
|
|
154
|
-
|
|
154
|
+
> Assurez-vous d'utiliser le fournisseur de `react-native-intlayer` au lieu de `react-intlayer`. L'export de `react-native-intlayer` inclut des polyfills pour l'API web.
|
|
155
155
|
|
|
156
156
|
```tsx fileName="app/_layout.tsx" codeFormat="typescript"
|
|
157
157
|
import { Stack } from "expo-router";
|
|
158
158
|
import { getLocales } from "expo-localization";
|
|
159
|
-
import {
|
|
160
|
-
import { intlayerPolyfill } from "react-native-intlayer";
|
|
159
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
161
160
|
import { type FC } from "react";
|
|
162
161
|
|
|
163
|
-
intlayerPolyfill();
|
|
164
|
-
|
|
165
162
|
const getDeviceLocale = () => getLocales()[0]?.languageTag;
|
|
166
163
|
|
|
167
164
|
const RootLayout: FC = () => {
|
|
168
165
|
return (
|
|
169
|
-
<
|
|
166
|
+
<IntlayerProvider defaultLocale={getDeviceLocale()}>
|
|
170
167
|
<Stack>
|
|
171
168
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
172
169
|
</Stack>
|
|
173
|
-
</
|
|
170
|
+
</IntlayerProvider>
|
|
174
171
|
);
|
|
175
172
|
};
|
|
176
173
|
|
|
@@ -180,20 +177,17 @@ export default RootLayout;
|
|
|
180
177
|
```jsx fileName="app/_layout.mjx" codeFormat="esm"
|
|
181
178
|
import { Stack } from "expo-router";
|
|
182
179
|
import { getLocales } from "expo-localization";
|
|
183
|
-
import {
|
|
184
|
-
import { intlayerPolyfill } from "react-native-intlayer";
|
|
185
|
-
|
|
186
|
-
intlayerPolyfill();
|
|
180
|
+
import { IntlayerProvider } from "react-native-intlayer";
|
|
187
181
|
|
|
188
182
|
const getDeviceLocale = () => getLocales()[0]?.languageTag;
|
|
189
183
|
|
|
190
184
|
const RootLayout = () => {
|
|
191
185
|
return (
|
|
192
|
-
<
|
|
186
|
+
<IntlayerProvider defaultLocale={getDeviceLocale()}>
|
|
193
187
|
<Stack>
|
|
194
188
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
195
189
|
</Stack>
|
|
196
|
-
</
|
|
190
|
+
</IntlayerProvider>
|
|
197
191
|
);
|
|
198
192
|
};
|
|
199
193
|
|
|
@@ -203,20 +197,17 @@ export default RootLayout;
|
|
|
203
197
|
```jsx fileName="app/_layout.cjx" codeFormat="commonjs"
|
|
204
198
|
const { Stack } = require("expo-router");
|
|
205
199
|
const { getLocales } = require("expo-localization");
|
|
206
|
-
const {
|
|
207
|
-
const { intlayerPolyfill } = require("react-native-intlayer");
|
|
208
|
-
|
|
209
|
-
intlayerPolyfill();
|
|
200
|
+
const { IntlayerProvider } = require("react-native-intlayer");
|
|
210
201
|
|
|
211
202
|
const getDeviceLocale = () => getLocales()[0]?.languageTag;
|
|
212
203
|
|
|
213
204
|
const RootLayout = () => {
|
|
214
205
|
return (
|
|
215
|
-
<
|
|
206
|
+
<IntlayerProvider defaultLocale={getDeviceLocale()}>
|
|
216
207
|
<Stack>
|
|
217
208
|
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
|
|
218
209
|
</Stack>
|
|
219
|
-
</
|
|
210
|
+
</IntlayerProvider>
|
|
220
211
|
);
|
|
221
212
|
};
|
|
222
213
|
|