@intlayer/docs 8.7.8 → 8.7.10

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.
Files changed (65) hide show
  1. package/docs/ar/dictionary/insertion.md +0 -52
  2. package/docs/ar/intlayer_with_astro.md +55 -6
  3. package/docs/ar/per_locale_file.md +0 -46
  4. package/docs/de/dictionary/insertion.md +0 -92
  5. package/docs/de/intlayer_with_astro.md +55 -6
  6. package/docs/de/intlayer_with_nextjs_16.md +0 -23
  7. package/docs/de/per_locale_file.md +0 -44
  8. package/docs/en/dictionary/insertion.md +0 -55
  9. package/docs/en/intlayer_with_astro.md +2 -1
  10. package/docs/en/per_locale_file.md +0 -43
  11. package/docs/en-GB/dictionary/insertion.md +0 -56
  12. package/docs/en-GB/intlayer_with_astro.md +55 -6
  13. package/docs/en-GB/per_locale_file.md +0 -43
  14. package/docs/es/dictionary/insertion.md +0 -52
  15. package/docs/es/intlayer_with_astro.md +55 -7
  16. package/docs/es/intlayer_with_nextjs_14.md +0 -23
  17. package/docs/es/intlayer_with_nextjs_16.md +0 -23
  18. package/docs/es/packages/next-intlayer/index.md +0 -52
  19. package/docs/es/packages/react-intlayer/index.md +0 -52
  20. package/docs/es/per_locale_file.md +0 -43
  21. package/docs/fr/dictionary/insertion.md +0 -52
  22. package/docs/fr/intlayer_with_astro.md +55 -7
  23. package/docs/fr/packages/react-intlayer/index.md +0 -52
  24. package/docs/fr/per_locale_file.md +0 -46
  25. package/docs/hi/dictionary/insertion.md +0 -91
  26. package/docs/hi/intlayer_with_astro.md +55 -6
  27. package/docs/hi/packages/intlayer/index.md +0 -52
  28. package/docs/hi/per_locale_file.md +0 -43
  29. package/docs/id/dictionary/insertion.md +0 -91
  30. package/docs/id/intlayer_with_astro.md +55 -6
  31. package/docs/id/intlayer_with_nextjs_14.md +0 -24
  32. package/docs/id/per_locale_file.md +0 -44
  33. package/docs/it/dictionary/insertion.md +0 -52
  34. package/docs/it/intlayer_with_astro.md +55 -6
  35. package/docs/it/per_locale_file.md +0 -44
  36. package/docs/ja/dictionary/insertion.md +0 -56
  37. package/docs/ja/intlayer_with_astro.md +55 -7
  38. package/docs/ja/intlayer_with_nextjs_14.md +0 -23
  39. package/docs/ja/per_locale_file.md +0 -43
  40. package/docs/ko/dictionary/insertion.md +0 -56
  41. package/docs/ko/intlayer_with_astro.md +55 -7
  42. package/docs/ko/per_locale_file.md +0 -43
  43. package/docs/pl/dictionary/insertion.md +0 -85
  44. package/docs/pl/intlayer_with_astro.md +55 -6
  45. package/docs/pl/per_locale_file.md +0 -44
  46. package/docs/pt/dictionary/insertion.md +0 -93
  47. package/docs/pt/intlayer_with_astro.md +55 -6
  48. package/docs/pt/intlayer_with_nextjs_page_router.md +0 -23
  49. package/docs/pt/per_locale_file.md +0 -44
  50. package/docs/ru/dictionary/insertion.md +0 -52
  51. package/docs/ru/intlayer_with_astro.md +55 -7
  52. package/docs/ru/per_locale_file.md +0 -44
  53. package/docs/tr/dictionary/insertion.md +0 -52
  54. package/docs/tr/intlayer_with_astro.md +55 -6
  55. package/docs/tr/per_locale_file.md +0 -43
  56. package/docs/uk/dictionary/insertion.md +0 -52
  57. package/docs/uk/intlayer_with_astro.md +55 -6
  58. package/docs/uk/per_locale_file.md +0 -43
  59. package/docs/vi/dictionary/insertion.md +0 -85
  60. package/docs/vi/intlayer_with_astro.md +55 -6
  61. package/docs/vi/per_locale_file.md +0 -46
  62. package/docs/zh/dictionary/insertion.md +0 -54
  63. package/docs/zh/intlayer_with_astro.md +55 -7
  64. package/docs/zh/per_locale_file.md +0 -44
  65. package/package.json +6 -6
@@ -110,58 +110,6 @@ const component1Content = {
110
110
  export default component1Content;
111
111
  ```
112
112
 
113
- ```jsx fileName="src/Component1/index.content.mjs" contentDeclarationFormat="esm"
114
- import { t } from "intlayer";
115
-
116
- /** @type {import('intlayer').Dictionary} */
117
- const component1Content = {
118
- key: "component-1",
119
- content: {
120
- myTranslatedContent: t({
121
- en: "Hello World",
122
- es: "Hola Mundo",
123
- fr: "Bonjour le monde",
124
- }),
125
- numberOfCar: enu({
126
- "<-1": "Moins d'une voiture en moins",
127
- "-1": "Moins une voiture",
128
- "0": "Aucune voiture",
129
- "1": "Une voiture",
130
- ">5": "Quelques voitures",
131
- ">19": "Beaucoup de voitures",
132
- }),
133
- },
134
- };
135
-
136
- export default component1Content;
137
- ```
138
-
139
- ```jsx fileName="src/Component1/index.content.cjs" contentDeclarationFormat="commonjs"
140
- const { t } = require("intlayer");
141
-
142
- /** @type {import('intlayer').Dictionary} */
143
- const component1Content = {
144
- key: "component-1",
145
- content: {
146
- myTranslatedContent: t({
147
- en: "Hello World",
148
- es: "Hola Mundo",
149
- fr: "Bonjour le monde",
150
- }),
151
- numberOfCar: enu({
152
- "<-1": "Moins d'une voiture en moins",
153
- "-1": "Moins une voiture",
154
- "0": "Aucune voiture",
155
- "1": "Une voiture",
156
- ">5": "Quelques voitures",
157
- ">19": "Beaucoup de voitures",
158
- }),
159
- },
160
- };
161
-
162
- module.exports = component1Content;
163
- ```
164
-
165
113
  ```json fileName="src/Component1/index.content.json" codeFormat="json"
166
114
  {
167
115
  "key": "component-1",
@@ -145,52 +145,6 @@ const helloWorldContent = {
145
145
  export default helloWorldContent;
146
146
  ```
147
147
 
148
- ```tsx fileName="hello-world.es.content.mjs" contentDeclarationFormat="esm"
149
- import { t, Locales } from "intlayer";
150
-
151
- /** @type {import('intlayer').Dictionary} */
152
- // Dictionnaire de contenu pour "hello-world" en espagnol
153
- const helloWorldContent = {
154
- key: "hello-world",
155
- locale: Locales.SPANISH, // Important
156
- content: { multilingualContent: "Título de mi componente" },
157
- };
158
-
159
- export default helloWorldContent;
160
- ```
161
-
162
- ```js fileName="hello-world.en.content.cjs" contentDeclarationFormat="commonjs"
163
- const { t, Locales } = require("intlayer");
164
-
165
- /** @type {import('intlayer').Dictionary} */
166
- // Dictionnaire de contenu pour "hello-world" en anglais
167
- const helloWorldContent = {
168
- key: "hello-world",
169
- locale: Locales.ENGLISH, // Important
170
- content: {
171
- multilingualContent: "Titre de mon composant",
172
- },
173
- };
174
-
175
- module.exports = helloWorldContent;
176
- ```
177
-
178
- ```tsx fileName="hello-world.es.content.cjs" contentDeclarationFormat="commonjs"
179
- const { t, Locales } = require("intlayer");
180
-
181
- /** @type {import('intlayer').Dictionary} */
182
- // Dictionnaire de contenu pour "hello-world" en espagnol
183
- const helloWorldContent = {
184
- key: "hello-world",
185
- locale: Locales.SPANISH, // Important
186
- content: {
187
- multilingualContent: "Título de mi componente",
188
- },
189
- };
190
-
191
- module.exports = helloWorldContent;
192
- ```
193
-
194
148
  ```json5 fileName="hello-world.en.content.json" contentDeclarationFormat="json"
195
149
  {
196
150
  "$schema": "https://intlayer.org/schema.json",
@@ -56,38 +56,6 @@ Intlayer में, सम्मिलन कंटेंट `insertion` फ़
56
56
  export default myInsertionContent;
57
57
  ```
58
58
 
59
- ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
60
- import { insert } from "intlayer";
61
-
62
- /** @type {import('intlayer').Dictionary} */
63
- const myInsertionContent = {
64
- key: "my_key",
65
- content: {
66
- myInsertion: insert(
67
- "नमस्ते, मेरा नाम {{name}} है और मेरी उम्र {{age}} वर्ष है!"
68
- ),
69
- },
70
- };
71
-
72
- export default myInsertionContent;
73
- ```
74
-
75
- ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
76
- const { insert } = require("intlayer");
77
-
78
- /** @type {import('intlayer').Dictionary} */
79
- const myInsertionContent = {
80
- key: "my_key",
81
- content: {
82
- myInsertion: insert(
83
- "नमस्ते, मेरा नाम {{name}} है और मेरी उम्र {{age}} वर्ष है!"
84
- ),
85
- },
86
- };
87
-
88
- module.exports = myInsertionContent;
89
- ```
90
-
91
59
  ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
92
60
  {
93
61
  "$schema": "https://intlayer.org/schema.json",
@@ -118,30 +86,6 @@ Intlayer में, सम्मिलन कंटेंट `insertion` फ़
118
86
  export default myInsertionContent;
119
87
  ```
120
88
 
121
- ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
122
- /** @type {import('intlayer').Dictionary} */
123
- const myInsertionContent = {
124
- key: "my_key",
125
- content: {
126
- myInsertion: "नमस्ते, मेरा नाम {{name}} है और मेरी उम्र {{age}} वर्ष है!",
127
- },
128
- };
129
-
130
- export default myInsertionContent;
131
- ```
132
-
133
- ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
134
- /** @type {import('intlayer').Dictionary} */
135
- const myInsertionContent = {
136
- key: "my_key",
137
- content: {
138
- myInsertion: "नमस्ते, मेरा नाम {{name}} है और मेरी उम्र {{age}} वर्ष है!",
139
- },
140
- };
141
-
142
- module.exports = myInsertionContent;
143
- ```
144
-
145
89
  ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
146
90
  {
147
91
  "$schema": "https://intlayer.org/schema.json",
@@ -155,41 +99,6 @@ Intlayer में, सम्मिलन कंटेंट `insertion` फ़
155
99
  </Tab>
156
100
  </Tabs>
157
101
 
158
- ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
159
- import { insert } from "intlayer";
160
-
161
- /** @type {import('intlayer').Dictionary} */
162
- const myInsertionContent = {
163
- key: "my_key",
164
- content: {
165
- myInsertion: insert(
166
- "नमस्ते, मेरा नाम {{name}} है और मेरी उम्र {{age}} वर्ष है!"
167
- ),
168
- myInsertion2: "नमस्ते, मेरा नाम {{name}} है और मेरी उम्र {{age}} वर्ष है!", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
169
- },
170
- };
171
-
172
- export default myInsertionContent;
173
- ```
174
-
175
- ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
176
- javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
177
- const { insert } = require("intlayer");
178
-
179
- /** @type {import('intlayer').Dictionary} */
180
- const myInsertionContent = {
181
- key: "my_key",
182
- content: {
183
- myInsertion: insert(
184
- "नमस्ते, मेरा नाम {{name}} है और मेरी उम्र {{age}} वर्ष है!"
185
- ),
186
- myInsertion2: "नमस्ते, मेरा नाम {{name}} है और मेरी उम्र {{age}} वर्ष है!", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
187
- },
188
- };
189
-
190
- module.exports = myInsertionContent;
191
- ```
192
-
193
102
  ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
194
103
  {
195
104
  "$schema": "https://intlayer.org/schema.json",
@@ -178,20 +178,69 @@ export default appContent;
178
178
 
179
179
  ```astro fileName="src/pages/index.astro"
180
180
  ---
181
- import { getIntlayer } from "intlayer";
182
- import appContent from "../app.content";
183
-
184
- const { title } = getIntlayer('app');
181
+ import {
182
+ getIntlayer,
183
+ getLocaleFromPath,
184
+ getLocalizedUrl,
185
+ defaultLocale,
186
+ localeMap,
187
+ getHTMLTextDir,
188
+ type LocalesValues,
189
+ } from "intlayer";
190
+ import LocaleSwitcher from "../components/LocaleSwitcher.astro";
191
+
192
+ // Get the current locale from the URL (e.g. /es/about -> 'es')
193
+ const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
194
+
195
+ // Get the content for the 'app' dictionary
196
+ const { title } = getIntlayer("app", locale);
185
197
  ---
186
198
 
187
- <html lang="hi">
199
+ <!doctype html>
200
+ <html lang={locale} dir={getHTMLTextDir(locale)}>
188
201
  <head>
189
202
  <meta charset="utf-8" />
190
203
  <meta name="viewport" content="width=device-width" />
204
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
191
205
  <title>{title}</title>
206
+
207
+ <!-- Canonical link: Tells search engines which is the primary version of this page -->
208
+ <link
209
+ rel="canonical"
210
+ href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}
211
+ />
212
+
213
+ <!-- Hreflang: Tell Google about all localized versions -->
214
+ {
215
+ localeMap(({ locale: mapLocale }) => (
216
+ <link
217
+ rel="alternate"
218
+ hreflang={mapLocale}
219
+ href={new URL(
220
+ getLocalizedUrl(Astro.url.pathname, mapLocale),
221
+ Astro.site
222
+ )}
223
+ />
224
+ ))
225
+ }
226
+
227
+ <!-- x-default: Fallback for users in unmatched languages -->
228
+ <link
229
+ rel="alternate"
230
+ hreflang="x-default"
231
+ href={new URL(
232
+ getLocalizedUrl(Astro.url.pathname, defaultLocale),
233
+ Astro.site
234
+ )}
235
+ />
192
236
  </head>
193
237
  <body>
194
- <h1>{title}</h1>
238
+ <header>
239
+ <LocaleSwitcher />
240
+ </header>
241
+ <main>
242
+ <h1>{title}</h1>
243
+ </main>
195
244
  </body>
196
245
  </html>
197
246
  ```
@@ -124,58 +124,6 @@ const clientComponentContent = {
124
124
  export default clientComponentContent;
125
125
  ```
126
126
 
127
- ```jsx fileName="src/ClientComponent/index.content.mjs" contentDeclarationFormat="esm"
128
- import { t } from "intlayer";
129
-
130
- /** @type {import('intlayer').Dictionary} */
131
- const clientComponentContent = {
132
- key: "client-component",
133
- content: {
134
- myTranslatedContent: t({
135
- en: "Hello World",
136
- es: "Hola Mundo",
137
- fr: "Bonjour le monde",
138
- }),
139
- numberOfCar: enu({
140
- "<-1": "माइनस एक कार से कम",
141
- "-1": "माइनस एक कार",
142
- "0": "कोई कार नहीं",
143
- "1": "एक कार",
144
- ">5": "कुछ कारें",
145
- ">19": "कई कारें",
146
- }),
147
- },
148
- };
149
-
150
- export default clientComponentContent;
151
- ```
152
-
153
- ```jsx fileName="src/ClientComponent/index.content.cjs" contentDeclarationFormat="commonjs"
154
- const { t } = require("intlayer");
155
-
156
- /** @type {import('intlayer').Dictionary} */
157
- const clientComponentContent = {
158
- key: "client-component",
159
- content: {
160
- myTranslatedContent: t({
161
- en: "Hello World",
162
- es: "Hola Mundo",
163
- fr: "Bonjour le monde",
164
- }),
165
- numberOfCar: enu({
166
- "<-1": "माइनस एक कार से कम",
167
- "-1": "माइनस एक कार",
168
- "0": "कोई कार नहीं",
169
- "1": "एक कार",
170
- ">5": "कुछ कारें",
171
- ">19": "कई कारें",
172
- }),
173
- },
174
- };
175
-
176
- module.exports = clientComponentContent;
177
- ```
178
-
179
127
  ```json fileName="src/ClientComponent/index.content.json" codeFormat="json"
180
128
  {
181
129
  "key": "client-component",
@@ -145,49 +145,6 @@ const helloWorldContent = {
145
145
  export default helloWorldContent;
146
146
  ```
147
147
 
148
- ```tsx fileName="hello-world.es.content.mjs" contentDeclarationFormat="esm"
149
- import { t, Locales } from "intlayer";
150
-
151
- /** @type {import('intlayer').Dictionary} */
152
- const helloWorldContent = {
153
- key: "hello-world",
154
- locale: Locales.SPANISH, // महत्वपूर्ण
155
- content: { multilingualContent: "Título de mi componente" },
156
- };
157
-
158
- export default helloWorldContent;
159
- ```
160
-
161
- ```js fileName="hello-world.en.content.cjs" contentDeclarationFormat="commonjs"
162
- const { t, Locales } = require("intlayer");
163
-
164
- /** @type {import('intlayer').Dictionary} */
165
- const helloWorldContent = {
166
- key: "hello-world",
167
- locale: Locales.ENGLISH, // महत्वपूर्ण
168
- content: {
169
- multilingualContent: "मेरे घटक का शीर्षक",
170
- },
171
- };
172
-
173
- module.exports = helloWorldContent;
174
- ```
175
-
176
- ```tsx fileName="hello-world.es.content.cjs" contentDeclarationFormat="commonjs"
177
- const { t, Locales } = require("intlayer");
178
-
179
- /** @type {import('intlayer').Dictionary} */
180
- const helloWorldContent = {
181
- key: "hello-world",
182
- locale: Locales.SPANISH, // महत्वपूर्ण
183
- content: {
184
- multilingualContent: "Título de mi componente",
185
- },
186
- };
187
-
188
- module.exports = helloWorldContent;
189
- ```
190
-
191
148
  ```json5 fileName="hello-world.en.content.json" contentDeclarationFormat="json"
192
149
  {
193
150
  "$schema": "https://intlayer.org/schema.json",
@@ -56,38 +56,6 @@ Untuk menyiapkan konten penyisipan dalam proyek Intlayer Anda, buat modul konten
56
56
  export default myInsertionContent;
57
57
  ```
58
58
 
59
- ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
60
- import { insert } from "intlayer";
61
-
62
- /** @type {import('intlayer').Dictionary} */
63
- const myInsertionContent = {
64
- key: "my_key",
65
- content: {
66
- myInsertion: insert(
67
- "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!"
68
- ),
69
- },
70
- };
71
-
72
- export default myInsertionContent;
73
- ```
74
-
75
- ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
76
- const { insert } = require("intlayer");
77
-
78
- /** @type {import('intlayer').Dictionary} */
79
- const myInsertionContent = {
80
- key: "my_key",
81
- content: {
82
- myInsertion: insert(
83
- "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!"
84
- ),
85
- },
86
- };
87
-
88
- module.exports = myInsertionContent;
89
- ```
90
-
91
59
  ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
92
60
  {
93
61
  "$schema": "https://intlayer.org/schema.json",
@@ -118,30 +86,6 @@ Untuk menyiapkan konten penyisipan dalam proyek Intlayer Anda, buat modul konten
118
86
  export default myInsertionContent;
119
87
  ```
120
88
 
121
- ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
122
- /** @type {import('intlayer').Dictionary} */
123
- const myInsertionContent = {
124
- key: "my_key",
125
- content: {
126
- myInsertion: "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!",
127
- },
128
- };
129
-
130
- export default myInsertionContent;
131
- ```
132
-
133
- ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
134
- /** @type {import('intlayer').Dictionary} */
135
- const myInsertionContent = {
136
- key: "my_key",
137
- content: {
138
- myInsertion: "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!",
139
- },
140
- };
141
-
142
- module.exports = myInsertionContent;
143
- ```
144
-
145
89
  ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
146
90
  {
147
91
  "$schema": "https://intlayer.org/schema.json",
@@ -155,41 +99,6 @@ Untuk menyiapkan konten penyisipan dalam proyek Intlayer Anda, buat modul konten
155
99
  </Tab>
156
100
  </Tabs>
157
101
 
158
- ```javascript fileName="**/*.content.mjs" contentDeclarationFormat="esm"
159
- import { insert } from "intlayer";
160
-
161
- /** @type {import('intlayer').Dictionary} */
162
- const myInsertionContent = {
163
- key: "my_key",
164
- content: {
165
- myInsertion: insert(
166
- "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!"
167
- ),
168
- myInsertion2: "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
169
- },
170
- };
171
-
172
- export default myInsertionContent;
173
- ```
174
-
175
- ```javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
176
- javascript fileName="**/*.content.cjs" contentDeclarationFormat="commonjs"
177
- const { insert } = require("intlayer");
178
-
179
- /** @type {import('intlayer').Dictionary} */
180
- const myInsertionContent = {
181
- key: "my_key",
182
- content: {
183
- myInsertion: insert(
184
- "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!"
185
- ),
186
- myInsertion2: "Halo, nama saya {{name}} dan saya berumur {{age}} tahun!", // Since intlayer v8, insertion function is not required anymore. The content will be automatically decorated.
187
- },
188
- };
189
-
190
- module.exports = myInsertionContent;
191
- ```
192
-
193
102
  ```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
194
103
  {
195
104
  "$schema": "https://intlayer.org/schema.json",
@@ -178,20 +178,69 @@ Anda dapat mengonsumsi kamus langsung di file `.astro` menggunakan pembantu inti
178
178
 
179
179
  ```astro fileName="src/pages/index.astro"
180
180
  ---
181
- import { getIntlayer } from "intlayer";
182
- import appContent from "../app.content";
183
-
184
- const { title } = getIntlayer('app');
181
+ import {
182
+ getIntlayer,
183
+ getLocaleFromPath,
184
+ getLocalizedUrl,
185
+ defaultLocale,
186
+ localeMap,
187
+ getHTMLTextDir,
188
+ type LocalesValues,
189
+ } from "intlayer";
190
+ import LocaleSwitcher from "../components/LocaleSwitcher.astro";
191
+
192
+ // Get the current locale from the URL (e.g. /es/about -> 'es')
193
+ const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
194
+
195
+ // Get the content for the 'app' dictionary
196
+ const { title } = getIntlayer("app", locale);
185
197
  ---
186
198
 
187
- <html lang="id">
199
+ <!doctype html>
200
+ <html lang={locale} dir={getHTMLTextDir(locale)}>
188
201
  <head>
189
202
  <meta charset="utf-8" />
190
203
  <meta name="viewport" content="width=device-width" />
204
+ <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
191
205
  <title>{title}</title>
206
+
207
+ <!-- Canonical link: Tells search engines which is the primary version of this page -->
208
+ <link
209
+ rel="canonical"
210
+ href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}
211
+ />
212
+
213
+ <!-- Hreflang: Tell Google about all localized versions -->
214
+ {
215
+ localeMap(({ locale: mapLocale }) => (
216
+ <link
217
+ rel="alternate"
218
+ hreflang={mapLocale}
219
+ href={new URL(
220
+ getLocalizedUrl(Astro.url.pathname, mapLocale),
221
+ Astro.site
222
+ )}
223
+ />
224
+ ))
225
+ }
226
+
227
+ <!-- x-default: Fallback for users in unmatched languages -->
228
+ <link
229
+ rel="alternate"
230
+ hreflang="x-default"
231
+ href={new URL(
232
+ getLocalizedUrl(Astro.url.pathname, defaultLocale),
233
+ Astro.site
234
+ )}
235
+ />
192
236
  </head>
193
237
  <body>
194
- <h1>{title}</h1>
238
+ <header>
239
+ <LocaleSwitcher />
240
+ </header>
241
+ <main>
242
+ <h1>{title}</h1>
243
+ </main>
195
244
  </body>
196
245
  </html>
197
246
  ```
@@ -456,30 +456,6 @@ const metadataContent = {
456
456
  export default metadataContent;
457
457
  ```
458
458
 
459
- ```javascript fileName="src/app/[locale]/metadata.content.cjs" contentDeclarationFormat="commonjs"
460
- const { t } = require("intlayer");
461
-
462
- /** @type {import('intlayer').Dictionary<import('next').Metadata>} */
463
- const metadataContent = {
464
- key: "page-metadata",
465
- content: {
466
- title: t({
467
- en: "Create Next App",
468
- fr: "Créer une application Next.js",
469
- es: "Crear una aplicación Next.js",
470
- }),
471
- description: t({
472
- en: "Generated by create next app",
473
- id: "Dihasilkan oleh create next app",
474
- fr: "Généré par create next app",
475
- es: "Generado por create next app",
476
- }),
477
- },
478
- };
479
-
480
- module.exports = metadataContent;
481
- ```
482
-
483
459
  ```json fileName="src/app/[locale]/metadata.content.json" contentDeclarationFormat="json"
484
460
  {
485
461
  "key": "page-metadata",
@@ -145,50 +145,6 @@ const helloWorldContent = {
145
145
  export default helloWorldContent;
146
146
  ```
147
147
 
148
- ```tsx fileName="hello-world.es.content.mjs" contentDeclarationFormat="esm"
149
- import { t, Locales } from "intlayer";
150
-
151
- /** @type {import('intlayer').Dictionary} */
152
- // Kamus konten untuk "hello-world"
153
- const helloWorldContent = {
154
- key: "hello-world",
155
- locale: Locales.SPANISH, // Penting
156
- content: { multilingualContent: "Título de mi componente" },
157
- };
158
-
159
- export default helloWorldContent;
160
- ```
161
-
162
- ```js fileName="hello-world.en.content.cjs" contentDeclarationFormat="commonjs"
163
- const { t, Locales } = require("intlayer");
164
-
165
- /** @type {import('intlayer').Dictionary} */
166
- const helloWorldContent = {
167
- key: "hello-world",
168
- locale: Locales.ENGLISH, // Penting
169
- content: {
170
- multilingualContent: "Title of my component",
171
- },
172
- };
173
-
174
- module.exports = helloWorldContent;
175
- ```
176
-
177
- ```tsx fileName="hello-world.es.content.cjs" contentDeclarationFormat="commonjs"
178
- const { t, Locales } = require("intlayer");
179
-
180
- /** @type {import('intlayer').Dictionary} */
181
- const helloWorldContent = {
182
- key: "hello-world",
183
- locale: Locales.SPANISH, // Penting
184
- content: {
185
- multilingualContent: "Título de mi componente",
186
- },
187
- };
188
-
189
- module.exports = helloWorldContent;
190
- ```
191
-
192
148
  ```json5 fileName="hello-world.en.content.json" contentDeclarationFormat="json"
193
149
  {
194
150
  "$schema": "https://intlayer.org/schema.json",