Skip to content

Commit

Permalink
docs: document modifyUrl()
Browse files Browse the repository at this point in the history
  • Loading branch information
brillout committed Jul 19, 2024
1 parent 09420db commit 12ac7e4
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 0 deletions.
4 changes: 4 additions & 0 deletions docs/headingsDetached.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import React from 'react'
import type { HeadingDetachedDefinition } from '@brillout/docpress'

const headingsDetached = [
{
title: '`modifyUrl()`',
url: '/modifyUrl'
},
{
title: '`<Loading>`',
url: '/Loading'
Expand Down
3 changes: 3 additions & 0 deletions docs/pages/i18n/+Page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,8 @@ function extractLocale(url: Url) {
}
```

> See also: <Link href="/modifyUrl" />
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 <Link href="/usePageContext" /> for being able to access `pageContext.locale` in any React/Vue component.
Expand Down Expand Up @@ -216,3 +218,4 @@ You can use the `lang` setting to define the value of the `<html lang>` attribut
- <Link href="/head#internationalization" />
- <Link href="/lang" />
- <Link href="/onBeforeRoute" />
- <Link href="/modifyUrl" />
24 changes: 24 additions & 0 deletions docs/pages/modifyUrl/+Page.mdx
Original file line number Diff line number Diff line change
@@ -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 <Link href="/i18n" />.

```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

- <Link href="/i18n" />
33 changes: 33 additions & 0 deletions docs/pages/releases/2024-07/+Page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ What we have been working on in July.
**Features**

<Link href="#vike-react-apollo" /><br/>
<Link href="#improve-url-handling" /><br/>
<Link href="#injectscriptsat" /><br/>
<Link href="#clientonly" /><br/>
<Link href="#new-bati-integrations" /><br/>
Expand Down Expand Up @@ -46,6 +47,38 @@ Like other extensions, `vike-react-apollo` is lightweight (only `202` lines of c
</Contribution>


## Improve URL handling

Vike exports a new <Link href="/modifyUrl">`modifyUrl()` utiltiy</Link>, which is convenient for internationalization as shown in the example at <Link href="/i18n" />.

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 ++]
}
```

<Contribution>
Author: [`brillout`](https://github.com/brillout)
</Contribution>


## `injectScriptsAt`

The <Link href="/injectScriptsAt">new `injectScriptsAt` setting</Link> allows you to control where Vike injects scripts.
Expand Down

0 comments on commit 12ac7e4

Please sign in to comment.