docs: improve /lang (fix vikejs/vike-solid#63)

vikejs · Feb 21, 2024 · 9ada8ae · 9ada8ae
1 parent 0c8e20d
commit 9ada8ae
Showing 1 changed file with 39 additions and 6 deletions.
diff --git a/docs/pages/lang/+Page.mdx b/docs/pages/lang/+Page.mdx
@@ -1,11 +1,11 @@
 import { Link } from '@brillout/docpress'
-import { UiFrameworkVikeExtension } from '../../components'
+import { UiFrameworkVikeExtension, UiFrameworkVikeExtensionNames } from '../../components'
 
-Environment: server. 
 Default value: `'en'`. 
-Provided by: <UiFrameworkVikeExtension />.
+Environment: server. 
+Implemented by: <UiFrameworkVikeExtension />.
 
-To set the [`<html lang>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#language_tag_syntax):
+You can set the value of the [`<html lang>` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#language_tag_syntax) by using Vike's `lang` setting.
 
 ```js
 // /pages/+config.js
@@ -15,12 +15,45 @@ export default {
 }
 ```
 
-> The `lang` setting is provided by the <UiFrameworkVikeExtension />. If you don't use such extension, then you have direct control over the `<html lang>` value in your <Link href="/onRenderHtml">`onRenderHtml()` hook</Link>.
+You can also dynamically set the value of `lang`. For example, if you want to internationalize your app:
+
+```js
+// /pages/+lang.js
+
+export default (pageContext) => {
+ return pageContext.locale
+}
+```
+
+> The `pageContext.locale` value is usually set by your `onBeforeRoute()` hook, see <Link href="/i18n" />.
+
+
+## Without Vike extension
+
+The `lang` setting is implemented by the <UiFrameworkVikeExtension />. If you don't use such extension, then you usually don't need to implement a setting like `lang` as you can directly set the value of the `<html lang>` attribute at your <Link href="/onRenderHtml">`onRenderHtml()` hook</Link>.
+
+```js
+// /renderer/+onRenderHtml.js
+
+import { escapeInject } from 'vike/server'
+
+export function onRenderHtml(pageContext) {
+ const lang = "fr"
+ return escapeInject`<!DOCTYPE html>
+ <html lang=${lang}>
+ ...
+ </html>`
+}
+
+```
+
+That said, you can also implement and replicate the `lang` setting described in this page, see the source code of <UiFrameworkVikeExtensionNames />.
 
 
 ## See also
 
+- <Link href="/i18n" />
 - [MDN > `lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang#language_tag_syntax)
 - <Link href="/head" />
-- <Link href="/markdown#metadata" />
+- <Link href="/settings" />