From 12ac7e4a2c86fac76ea87310c23669fe0b65cda2 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Fri, 19 Jul 2024 15:15:29 +0200 Subject: [PATCH] docs: document modifyUrl() --- docs/headingsDetached.tsx | 4 ++++ docs/pages/i18n/+Page.mdx | 3 +++ docs/pages/modifyUrl/+Page.mdx | 24 +++++++++++++++++++ docs/pages/releases/2024-07/+Page.mdx | 33 +++++++++++++++++++++++++++ 4 files changed, 64 insertions(+) create mode 100644 docs/pages/modifyUrl/+Page.mdx diff --git a/docs/headingsDetached.tsx b/docs/headingsDetached.tsx index 91c3b2008b5..a7f16843573 100644 --- a/docs/headingsDetached.tsx +++ b/docs/headingsDetached.tsx @@ -4,6 +4,10 @@ import React from 'react' import type { HeadingDetachedDefinition } from '@brillout/docpress' const headingsDetached = [ + { + title: '`modifyUrl()`', + url: '/modifyUrl' + }, { title: '``', url: '/Loading' diff --git a/docs/pages/i18n/+Page.mdx b/docs/pages/i18n/+Page.mdx index 060adf4ff66..f771bbdae3e 100644 --- a/docs/pages/i18n/+Page.mdx +++ b/docs/pages/i18n/+Page.mdx @@ -45,6 +45,8 @@ function extractLocale(url: Url) { } ``` +> See also: + Upon rendering a page, `onBeforeRoute()` is the first hook that Vike calls, which means that the rest of your app doesn't have to deal with localized URLs anymore and you can simply use `pageContext.locale` instead. > See for being able to access `pageContext.locale` in any React/Vue component. @@ -216,3 +218,4 @@ You can use the `lang` setting to define the value of the `` attribut - - - +- diff --git a/docs/pages/modifyUrl/+Page.mdx b/docs/pages/modifyUrl/+Page.mdx new file mode 100644 index 00000000000..e3ebe90c986 --- /dev/null +++ b/docs/pages/modifyUrl/+Page.mdx @@ -0,0 +1,24 @@ +import { Link } from '@brillout/docpress' + +The `modifyUrl()` function allows you to easily modify a URL. + +It's usually used for extracting the locale from URLs, see example at . + +```js +import { modifyUrl } from 'vike/modifyUrl' + +const url = 'http://example.com:3000/en-US/hello/john?fruit=apple' +const urlModified = modifyUrl(url, { + pathname: '/hello/john', + protocol: 'https://', + hostname: 'example.us', + port: 3001 +}) +// https://example.us:3001/hello/john?fruit=apple +console.log(urlModified) +``` + + +## See also + +- diff --git a/docs/pages/releases/2024-07/+Page.mdx b/docs/pages/releases/2024-07/+Page.mdx index a30e35a9e9c..cc36da4e367 100644 --- a/docs/pages/releases/2024-07/+Page.mdx +++ b/docs/pages/releases/2024-07/+Page.mdx @@ -16,6 +16,7 @@ What we have been working on in July. **Features**
+



@@ -46,6 +47,38 @@ Like other extensions, `vike-react-apollo` is lightweight (only `202` lines of c +## Improve URL handling + +Vike exports a new `modifyUrl()` utiltiy, which is convenient for internationalization as shown in the example at . + +Also `pageContext.urlParsed` got new properties: + +``` +http://localhost:3000/some-base-url/hello/s%C3%A9bastien +``` +```js +{ + pathname: '/hello/sébastien', + pathnameOriginal: '/some-base-url/hello/s%C3%A9bastien', + search: {}, + searchAll: {}, + searchOriginal: null, + hash: '', + hashOriginal: null, + origin: 'http://localhost:3000', + // Without Base URL, doesn't decode escaped characters // [!code ++] + href: 'http://localhost:3000/hello/s%C3%A9bastien', // [!code ++] + protocol: 'http://', // [!code ++] + hostname: 'localhost', // [!code ++] + port: 3000 // [!code ++] +} +``` + + + Author: [`brillout`](https://github.com/brillout) + + + ## `injectScriptsAt` The new `injectScriptsAt` setting allows you to control where Vike injects scripts.