Skip to content

Document View deep anchor linking #5479

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
mintlify wants to merge 1 commit into from
Closed

Document View deep anchor linking #5479

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions components/view.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</Tip>

<View title="JavaScript" icon="js">
This content is only visible when JavaScript is selected.

Check warning on line 14 in components/view.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/view.mdx#L14 

In general, use active voice instead of passive voice ('is selected').

```javascript
console.log("Hello from JavaScript!");
Expand All @@ -19,7 +19,7 @@
</View>

<View title="Python" icon="python">
This content is only visible when Python is selected.

Check warning on line 22 in components/view.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/view.mdx#L22 

In general, use active voice instead of passive voice ('is selected').

```python
print("Hello from Python!")
Expand All @@ -38,7 +38,7 @@
</View>

<View title="Python" icon="python">
This content is only visible when Python is selected.

Check warning on line 41 in components/view.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

components/view.mdx#L41 

In general, use active voice instead of passive voice ('is selected').

```python
print("Hello from Python!")
Expand All @@ -52,12 +52,32 @@

If you have different heading structures in each view, users only see the headings that are relevant to their selected language or framework.

## Deep linking

Each `View` automatically gets a URL-friendly anchor ID derived from its `title`. When a URL contains a hash that matches a view's ID (or the ID of a heading or accordion inside that view), the correct view activates automatically and the page scrolls to the target element.

For example, with `<View title="API Settings">`, visiting `#api-settings` activates that view. Switching views via the dropdown also updates the URL hash, so you can share links that open a specific view.

Use the `id` property to set a custom anchor instead of the auto-generated one:

```mdx
<View title="API Settings" id="settings">
...
</View>
```

This view is reachable at `#settings` instead of the auto-generated `#api-settings`. See [Linking](/guides/linking#view-deep-links) for more on deep linking.

## Properties

<ResponseField name="title" type="string" required>
The title that identifies this view. Must match one of the options in the multi-view dropdown.
</ResponseField>

<ResponseField name="id" type="string">
A custom anchor ID for deep linking. Defaults to a slugified version of the `title`.
</ResponseField>

<ResponseField name="icon" type="string">
A [Font Awesome](https://fontawesome.com/icons) icon, [Lucide](https://lucide.dev/icons) icon, URL to an icon, or relative path to an icon.
</ResponseField>
Expand Down
22 changes: 22 additions & 0 deletions es/components/view.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,24 @@ La tabla de contenidos se actualiza automáticamente para mostrar solo los encab

Si tienes estructuras de encabezados diferentes en cada vista, los usuarios solo verán los encabezados que sean relevantes para el idioma o framework que hayan seleccionado.

<div id="deep-linking">
## Enlaces profundos
</div>

Cada `View` obtiene automáticamente un ID de anclaje compatible con URL, derivado de su `title`. Cuando una URL contiene un hash que coincide con el ID de una vista (o con el ID de un encabezado o acordeón dentro de esa vista), la vista correcta se activa automáticamente y la página se desplaza hasta el elemento objetivo.

Por ejemplo, con `<View title="API Settings">`, visitar `#api-settings` activa esa vista. Cambiar de vista mediante el menú desplegable también actualiza el hash de la URL, por lo que puedes compartir enlaces que abran una vista específica.

Usa la propiedad `id` para establecer un anclaje personalizado en lugar del generado automáticamente:

```mdx
<View title="API Settings" id="settings">
...
</View>
```

Esta vista es accesible en `#settings` en lugar del `#api-settings` generado automáticamente. Consulta [Enlaces](/es/guides/linking#view-deep-links) para más información sobre enlaces profundos.

<div id="properties">
## Propiedades
</div>
Expand All @@ -64,6 +82,10 @@ Si tienes estructuras de encabezados diferentes en cada vista, los usuarios solo
El título que identifica esta vista. Debe coincidir con una de las opciones del menú desplegable de vistas múltiples.
</ResponseField>

<ResponseField name="id" type="string">
Un ID de anclaje personalizado para enlaces profundos. Por defecto, una versión slugificada del `title`.
</ResponseField>

<ResponseField name="icon" type="string">
Un icono de [Font Awesome](https://fontawesome.com/icons), un icono de [Lucide](https://lucide.dev/icons), una URL de un icono o una ruta relativa a un icono.
</ResponseField>
Expand Down
16 changes: 16 additions & 0 deletions es/guides/linking.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,22 @@ Por defecto, el hash se deriva del `title` del acordeón. Usa la propiedad `id`

Este acordeón es accesible en `#install` en lugar del `#installation-steps` generado automáticamente. Consulta [Acordeones](/es/components/accordions) para más información.

<div id="view-deep-links">
### Enlaces profundos de vista
</div>

Cada componente [View](/es/components/view) obtiene automáticamente un ID de anclaje compatible con URL, derivado de su `title`. Visitar una URL con un hash que coincida con el ID de una vista activa esa vista. Si el hash coincide con un encabezado o acordeón dentro de una vista, la vista que contiene ese elemento se activa y la página se desplaza hasta el elemento objetivo.

Cambiar de vista mediante el menú desplegable también actualiza el hash de la URL, creando enlaces compartibles. Usa la propiedad `id` para establecer un anclaje personalizado:

```mdx
<View title="API Settings" id="settings">
...
</View>
```

Esta vista es accesible en `#settings` en lugar del `#api-settings` generado automáticamente. Consulta [Vista](/es/components/view#deep-linking) para más detalles.

<div id="api-playground-deep-links">
### Enlaces profundos del API playground
</div>
Expand Down
32 changes: 31 additions & 1 deletion fr/components/view.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,42 @@ La table des matières se met à jour automatiquement pour n’afficher que les

Si vous avez des structures de titres différentes dans chaque vue, les utilisateurs ne voient que les titres pertinents pour la langue ou le framework qu’ils ont sélectionné.

<div id="deep-linking">
## Liens profonds
</div>

Chaque `View` obtient automatiquement un ID d'ancrage compatible avec les URL, dérivé de son `title`. Lorsqu'une URL contient un hash correspondant à l'ID d'une vue (ou à l'ID d'un titre ou d'un accordéon à l'intérieur de cette vue), la vue correcte s'active automatiquement et la page défile jusqu'à l'élément cible.

Par exemple, avec `<View title="API Settings">`, visiter `#api-settings` active cette vue. Le changement de vue via le menu déroulant met également à jour le hash de l'URL, ce qui permet de partager des liens qui ouvrent une vue spécifique.

Utilisez la propriété `id` pour définir un ancrage personnalisé au lieu de celui généré automatiquement :

```mdx
<View title="API Settings" id="settings">
...
</View>
```

Cette vue est accessible à `#settings` au lieu du `#api-settings` généré automatiquement. Consultez [Liens](/fr/guides/linking#view-deep-links) pour en savoir plus sur les liens profonds.

<div id="properties">
## Propriétés
</div>

<ResponseField name="title" type="string" required>
Le titre qui identifie cette vue. Doit correspondre à l’une des options du menu déroulant multi‑vue.
Le titre qui identifie cette vue. Doit correspondre à l'une des options du menu déroulant multi‑vue.
</ResponseField>

<ResponseField name="id" type="string">
Un ID d'ancrage personnalisé pour les liens profonds. Par défaut, une version slugifiée du `title`.
</ResponseField>

<ResponseField name="icon" type="string">
Une icône [Font Awesome](https://fontawesome.com/icons), une icône [Lucide](https://lucide.dev/icons), une URL d'icône, ou un chemin relatif vers une icône.
</ResponseField>

<ResponseField name="iconType" type="string">
Pour les icônes Font Awesome uniquement : l'une de `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ResponseField>

<ResponseField name="icon" type="string">
Expand Down
16 changes: 16 additions & 0 deletions fr/guides/linking.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,22 @@ Par défaut, le hash est dérivé du `title` de l'accordéon. Utilisez la propri

Cet accordéon est accessible à `#install` au lieu du `#installation-steps` généré automatiquement. Consultez [Accordéons](/fr/components/accordions) pour en savoir plus.

<div id="view-deep-links">
### Liens profonds de vue
</div>

Chaque composant [View](/fr/components/view) obtient automatiquement un ID d'ancrage compatible avec les URL, dérivé de son `title`. Visiter une URL avec un hash correspondant à l'ID d'une vue active cette vue. Si le hash correspond à un titre ou un accordéon à l'intérieur d'une vue, la vue contenant cet élément s'active et la page défile jusqu'à l'élément cible.

Le changement de vue via le menu déroulant met également à jour le hash de l'URL, créant des liens partageables. Utilisez la propriété `id` pour définir un ancrage personnalisé :

```mdx
<View title="API Settings" id="settings">
...
</View>
```

Cette vue est accessible à `#settings` au lieu du `#api-settings` généré automatiquement. Consultez [Vue](/fr/components/view#deep-linking) pour plus de détails.

<div id="api-playground-deep-links">
### Liens profonds de l'API playground
</div>
Expand Down
14 changes: 14 additions & 0 deletions guides/linking.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,20 @@

This accordion is reachable at `#install` instead of the auto-generated `#installation-steps`. See [Accordions](/components/accordions) for more.

### View deep links

Each [View](/components/view) component automatically gets a URL-friendly anchor ID derived from its `title`. Visiting a URL with a hash that matches a view's ID activates that view. If the hash matches a heading or accordion inside a view, the containing view activates and the page scrolls to the target element.

Switching views via the dropdown also updates the URL hash, creating shareable links. Use the `id` property to set a custom anchor:

```mdx
<View title="API Settings" id="settings">
...
</View>
```

This view is reachable at `#settings` instead of the auto-generated `#api-settings`. See [View](/components/view#deep-linking) for more details.

### API playground deep links

To open the API playground in a link, append `?playground=open` to any endpoint page URL:
Expand Down Expand Up @@ -125,7 +139,7 @@

### Link prerequisites explicitly

When a page assumes prior steps, link to them at the top rather than assuming users will find them:

Check warning on line 142 in guides/linking.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

guides/linking.mdx#L142 

Avoid using 'will'.

```mdx
## Prerequisites
Expand All @@ -139,7 +153,7 @@

### Build topic clusters

Link related content together to help users—and search engines—understand how your documentation is organized:

Check warning on line 156 in guides/linking.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

guides/linking.mdx#L156 

In general, use active voice instead of passive voice ('is organized').

```mdx
## Related topics
Expand Down Expand Up @@ -196,7 +210,7 @@
</Accordion>

<Accordion title="What happens to bookmarked links when I reorganize my documentation?">
Without redirects, bookmarked and shared links become 404 errors. Set up redirects in your `docs.json` whenever you move or rename a page. Redirects are cheap to add and prevent a poor user experience for anyone who linked to your documentation from an external source—blog posts, Stack Overflow answers, internal wikis.

Check warning on line 213 in guides/linking.mdx

View check run for this annotation

Mintlify / Mintlify Validation (mintlify) - vale-spellcheck

guides/linking.mdx#L213 

Use the Oxford comma in 'Without redirects, bookmarked and'.
</Accordion>

<Accordion title="How many internal links should a page have?">
Expand Down
22 changes: 22 additions & 0 deletions zh/components/view.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,24 @@ keywords: ["选择器", "特定语言内容", "内容切换"]

如果每个视图中的标题结构不同，用户只会看到与其所选语言或框架相关的标题。

<div id="deep-linking">
## 深层链接
</div>

每个 `View` 会根据其 `title` 自动获得一个 URL 友好的锚点 ID。当 URL 包含与视图 ID（或视图内标题、手风琴的 ID）匹配的哈希时，正确的视图会自动激活，并且页面会滚动到目标元素。

例如，使用 `<View title="API Settings">` 时，访问 `#api-settings` 会激活该视图。通过下拉菜单切换视图也会更新 URL 哈希，因此你可以分享打开特定视图的链接。

使用 `id` 属性设置自定义锚点，而不是自动生成的锚点：

```mdx
<View title="API Settings" id="settings">
...
</View>
```

此视图可通过 `#settings` 访问，而不是自动生成的 `#api-settings`。详情请参阅[链接](/zh/guides/linking#view-deep-links)了解更多深层链接信息。

<div id="properties">
## 属性
</div>
Expand All @@ -64,6 +82,10 @@ keywords: ["选择器", "特定语言内容", "内容切换"]
用于标识此视图的标题。必须与多视图下拉菜单中的某个选项一致。
</ResponseField>

<ResponseField name="id" type="string">
用于深层链接的自定义锚点 ID。默认为 `title` 的 slug 化版本。
</ResponseField>

<ResponseField name="icon" type="string">
一个 [Font Awesome](https://fontawesome.com/icons) icon、[Lucide](https://lucide.dev/icons) icon、指向 icon 的 URL，或指向 icon 的相对路径。
</ResponseField>
Expand Down
16 changes: 16 additions & 0 deletions zh/guides/linking.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,22 @@ Mintlify 通过将标题文本转换为小写、用连字符替换空格并删

此手风琴可通过 `#install` 访问，而不是自动生成的 `#installation-steps`。详情请参阅[手风琴](/zh/components/accordions)。

<div id="view-deep-links">
### 视图深层链接
</div>

每个 [View](/zh/components/view) 组件会根据其 `title` 自动获得一个 URL 友好的锚点 ID。访问带有与视图 ID 匹配的哈希的 URL 会激活该视图。如果哈希与视图内的标题或手风琴匹配，则包含该元素的视图会激活，并且页面会滚动到目标元素。

通过下拉菜单切换视图也会更新 URL 哈希，从而创建可分享的链接。使用 `id` 属性设置自定义锚点：

```mdx
<View title="API Settings" id="settings">
...
</View>
```

此视图可通过 `#settings` 访问，而不是自动生成的 `#api-settings`。详情请参阅[视图](/zh/components/view#deep-linking)。

<div id="api-playground-deep-links">
### API playground 深层链接
</div>
Expand Down
Loading