Skip to content

Commit fc2bd88

Browse files
HiDeooHiDeoo
authored
Merge branch 'main' into i18n-ja-manual-setup-1
2 parents 3a6802d + ba0a5c3 commit fc2bd88

File tree

13 files changed

+851
-11
lines changed

13 files changed

+851
-11
lines changed

‎docs/src/assets/showcase/secco.lekoarts.de.png

88.2 KB
Loading

‎docs/src/components/showcase-sites.astro

+1
Original file line numberDiff line numberDiff line change
@@ -76,4 +76,5 @@ import FluidGrid from './fluid-grid.astro';
7676
thumbnail="docs.ethfollow.xyz.png"
7777
/>
7878
<Card title="Knip" href="https://knip.dev" thumbnail="knip.dev.png" />
79+
<Card title="secco" href="https://secco.lekoarts.de" thumbnail="secco.lekoarts.de.png" />
7980
</FluidGrid>

‎docs/src/content/docs/es/guides/authoring-content.md

+16
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,22 @@ Starlight admite la gama completa de la sintaxis [Markdown](https://daringfireba
77

88
Por favor, asegúrate de consultar la documentación de [MDX](https://mdxjs.com/docs/what-is-mdx/#markdown) o [Markdoc](https://markdoc.dev/docs/syntax) si estás utilizando esos formatos de archivo, ya que el soporte y el uso de Markdown pueden variar.
99

10+
## Frontmatter
11+
12+
Puedes personalizar individualmente las páginas en Starlight estableciendo valores en el frontmatter.
13+
El frontmatter se establece en la parte superior de tus archivos entre separadores `---`:
14+
15+
```md title="src/content/docs/example.md"
16+
---
17+
title: Mi título de página
18+
---
19+
20+
El contenido de la página sigue luego de los `---`.
21+
```
22+
23+
Cada página debe incluir al menos un `title`.
24+
Vea la [referencia de frontmatter](/es/reference/frontmatter/) para ver todos los campos disponibles y cómo añadir campos personalizados.
25+
1026
## Estilos en línea
1127

1228
El texto puede estar **en negrita**, _en cursiva_, o ~~tachado~~.

‎docs/src/content/docs/es/guides/i18n.mdx

+25
Original file line numberDiff line numberDiff line change
@@ -234,3 +234,28 @@ Puedes establecer traducciones para la UI de Pagefind en el mismo archivo JSON u
234234
"pagefind.searching": "Searching for [SEARCH_TERM]..."
235235
}
236236
```
237+
238+
### Extiende el esquema de traducción
239+
240+
Agrega claves personalizadas a los diccionarios de traducción de tu sitio estableciendo `extend` en las opciones de `i18nSchema()`.
241+
En el siguiente ejemplo, una clave nueva, opcional `custom.label` se agrega a las claves predeterminadas:
242+
243+
```diff lang="js"
244+
// src/content/config.ts
245+
import { defineCollection, z } from 'astro:content';
246+
import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
247+
248+
export const collections = {
249+
docs: defineCollection({ schema: docsSchema() }),
250+
i18n: defineCollection({
251+
type: 'data',
252+
schema: i18nSchema({
253+
+ extend: z.object({
254+
+ 'custom.label': z.string().optional(),
255+
+ }),
256+
}),
257+
}),
258+
};
259+
```
260+
261+
Aprende más sobre los esquemas de colección de contenido en [“Definir un esquema de colección”](https://docs.astro.build/es/guides/content-collections/#definiendo-un-esquema-de-colección) en la documentación de Astro.

‎docs/src/content/docs/es/guides/overriding-components.md

-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,6 @@
11
---
22
title: Sobreescribiendo Componentes
33
description: Aprende como sobreescribir los componentes integrados de Starlight para agregar elementos personalizados a la interfaz de tu sitio de documentación.
4-
sidebar:
5-
badge: Nuevo
64
---
75

86
La UI por defecto de Starlight y las opciones de configuración están diseñadas para ser flexibles y funcionar para una variedad de contenidos. Gran parte de la apariencia predeterminada de Starlight se puede personalizar con [CSS](/es/guides/css-and-tailwind/) y [opciones de configuración](/es/guides/customization/).

‎docs/src/content/docs/es/guides/site-search.mdx

+166
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
---
2+
title: Búsqueda en el sitio
3+
description: Aprende sobre las funciones de búsqueda de sitios integradas de Starlight y cómo personalizarlas.
4+
sidebar:
5+
badge: Nuevo
6+
---
7+
8+
import { Tabs, TabItem } from '@astrojs/starlight/components';
9+
10+
Por defecto, los sitios de Starlight incluyen una búsqueda de texto completo impulsada por [Pagefind](https://pagefind.app/), que es una herramienta de búsqueda rápida y de bajo ancho de banda para sitios estáticos.
11+
12+
No es necesaria ninguna configuración para habilitar la búsqueda. Construye e implementa tu sitio, luego usa la barra de búsqueda en el encabezado del sitio para encontrar contenido.
13+
14+
## Ocultar contenido en los resultados de búsqueda
15+
16+
### Excluye una página
17+
18+
Para excluir una página del índice de búsqueda, agrega [`pagefind: false`](/reference/frontmatter/#pagefind) al frontmatter de la página:
19+
20+
```md title="src/content/docs/not-indexed.md" ins={3}
21+
---
22+
title: Contenido para ocultar de la búsqueda
23+
pagefind: false
24+
---
25+
```
26+
27+
### Excluye parte de una página
28+
29+
Pagefind ignorará el contenido dentro de un elemento con el atributo [`data-pagefind-ignore`](https://pagefind.app/docs/indexing/#removing-individual-elements-from-the-index).
30+
31+
En el siguiente ejemplo, el primer párrafo se mostrará en los resultados de búsqueda, pero el contenido del `<div>` no:
32+
33+
```md title="src/content/docs/partially-indexed.md" ins="data-pagefind-ignore"
34+
---
35+
title: Página parcialmente indexada
36+
---
37+
38+
Este texto será descubrible a través de la búsqueda.
39+
40+
<div data-pagefind-ignore>
41+
42+
Este texto estará oculto de la búsqueda.
43+
44+
</div>
45+
```
46+
47+
## Proveedores de búsqueda alternativos
48+
49+
### Algolia DocSearch
50+
51+
Si tienes acceso al [programa DocSearch de Algolia](https://docsearch.algolia.com/) y quieres usarlo en lugar de Pagefind, puedes usar el plugin oficial Starlight DocSearch.
52+
53+
1. Instala `@astrojs/starlight-docsearch`:
54+
55+
<Tabs>
56+
57+
<TabItem label="npm">
58+
59+
```sh
60+
npm install @astrojs/starlight-docsearch
61+
```
62+
63+
</TabItem>
64+
65+
<TabItem label="pnpm">
66+
67+
```sh
68+
pnpm install @astrojs/starlight-docsearch
69+
```
70+
71+
</TabItem>
72+
73+
<TabItem label="Yarn">
74+
75+
```sh
76+
yarn add @astrojs/starlight-docsearch
77+
```
78+
79+
</TabItem>
80+
81+
</Tabs>
82+
83+
2. Agrega DocSearch a tu configuración de Starlight [`plugins`](/es/reference/configuration/#plugins) en `astro.config.mjs` y pásale tu `appId`, `apiKey` e `indexName` de Algolia:
84+
85+
```js ins={4,10-16}
86+
// astro.config.mjs
87+
import { defineConfig } from 'astro/config';
88+
import starlight from '@astrojs/starlight';
89+
import starlightDocSearch from '@astrojs/starlight-docsearch';
90+
91+
export default defineConfig({
92+
integrations: [
93+
starlight({
94+
title: 'Sitio con DocSearch',
95+
plugins: [
96+
starlightDocSearch({
97+
appId: 'TU_ID_DE_APP'
98+
apiKey: 'TU_LLAVE_DE_API_DE_BÚSQUEDA'
99+
indexName: 'TU_NOMBRE_DE_ÍNDICE',
100+
}),
101+
],
102+
}),
103+
],
104+
});
105+
```
106+
107+
Con esta configuración actualizada, la barra de búsqueda de tu sitio ahora abrirá un modal de Algolia en lugar del modal de búsqueda predeterminado.
108+
109+
#### Traduciendo la UI de DocSearch
110+
111+
DocSearch solo proporciona cadenas de UI en inglés de forma predeterminada.
112+
Para agregar traducciones de la UI al modal en otros idiomas, usa el [sistema de internacionalización](/guides/i18n/#traduce-la-ui-de-starlight) incorporado de Starlight.
113+
114+
1. Extiende la definición de la colección de contenido `i18n` de Starlight con el esquema de DocSearch en `src/content/config.ts`:
115+
116+
```js ins={4} ins=/{ extend: .+ }/
117+
// src/content/config.ts
118+
import { defineCollection } from 'astro:content';
119+
import { docsSchema, i18nSchema } from '@astrojs/starlight/schema';
120+
import { docSearchI18nSchema } from '@astrojs/starlight-docsearch/schema';
121+
122+
export const collections = {
123+
docs: defineCollection({ schema: docsSchema() }),
124+
i18n: defineCollection({
125+
type: 'data',
126+
schema: i18nSchema({ extend: docSearchI18nSchema() }),
127+
}),
128+
};
129+
```
130+
131+
2. Agrega traducciones a tus archivos JSON en `src/content/i18n/`.
132+
133+
Estas son las predeterminadas en inglés que usa DocSearch:
134+
135+
```json title="src/content/i18n/en.json"
136+
{
137+
"docsearch.searchBox.resetButtonTitle": "Clear the query",
138+
"docsearch.searchBox.resetButtonAriaLabel": "Clear the query",
139+
"docsearch.searchBox.cancelButtonText": "Cancel",
140+
"docsearch.searchBox.cancelButtonAriaLabel": "Cancel",
141+
142+
"docsearch.startScreen.recentSearchesTitle": "Recent",
143+
"docsearch.startScreen.noRecentSearchesText": "No recent searches",
144+
"docsearch.startScreen.saveRecentSearchButtonTitle": "Save this search",
145+
"docsearch.startScreen.removeRecentSearchButtonTitle": "Remove this search from history",
146+
"docsearch.startScreen.favoriteSearchesTitle": "Favorite",
147+
"docsearch.startScreen.removeFavoriteSearchButtonTitle": "Remove this search from favorites",
148+
149+
"docsearch.errorScreen.titleText": "Unable to fetch results",
150+
"docsearch.errorScreen.helpText": "You might want to check your network connection.",
151+
152+
"docsearch.footer.selectText": "to select",
153+
"docsearch.footer.selectKeyAriaLabel": "Enter key",
154+
"docsearch.footer.navigateText": "to navigate",
155+
"docsearch.footer.navigateUpKeyAriaLabel": "Arrow up",
156+
"docsearch.footer.navigateDownKeyAriaLabel": "Arrow down",
157+
"docsearch.footer.closeText": "to close",
158+
"docsearch.footer.closeKeyAriaLabel": "Escape key",
159+
"docsearch.footer.searchByText": "Search by",
160+
161+
"docsearch.noResultsScreen.noResultsText": "No results for",
162+
"docsearch.noResultsScreen.suggestedQueryText": "Try searching for",
163+
"docsearch.noResultsScreen.reportMissingResultsText": "Believe this query should return results?",
164+
"docsearch.noResultsScreen.reportMissingResultsLinkText": "Let us know."
165+
}
166+
```

‎docs/src/content/docs/es/reference/configuration.mdx

+25
Original file line numberDiff line numberDiff line change
@@ -411,6 +411,16 @@ Cuando sea `false`, se utilizan los colores proporcionados por el tema de resalt
411411
Cuando usas temas personalizados y estableces esto en `true`, debes proporcionar por lo menos un tema oscuro y uno claro para asegurar un contraste de color adecuado.
412412
:::
413413

414+
### `pagefind`
415+
416+
**tipo:** `boolean`
417+
**por defecto:** `true`
418+
419+
Define si el proveedor de búsqueda predeterminado de Starlight [Pagefind](https://pagefind.app/) está habilitado.
420+
421+
Establece esta opción a `false` para excluir una página de los resultados de búsqueda.
422+
Esto también ocultará la interfaz de usuario de búsqueda predeterminada si está en uso.
423+
414424
### `head`
415425

416426
**tipo:** [`HeadConfig[]`](#headconfig)
@@ -519,3 +529,18 @@ starlight({
519529
```
520530

521531
Consulta la [Referencia de Personalización de Componentes](/es/reference/overrides/) para obtener detalles de todos los componentes que puedes anular.
532+
533+
### `plugins`
534+
535+
**tipo:** [`StarlightPlugin[]`](/es/reference/plugins/#referencia-rápida-de-la-api)
536+
537+
Extiende Starlight con plugins personalizados.
538+
Los plugins aplican cambios a tu proyecto para modificar o agregar a las funcionalidades a Starlight.
539+
540+
```js
541+
starlight({
542+
plugins: [starlightPlugin()],
543+
});
544+
```
545+
546+
Vea la [Referencia de Plugins](/es/reference/plugins/) para obtener detalles sobre cómo crear tus propios plugins.

‎docs/src/content/docs/es/reference/frontmatter.md

+68
Original file line numberDiff line numberDiff line change
@@ -372,3 +372,71 @@ sidebar:
372372
target: _blank
373373
---
374374
```
375+
376+
## Personaliza el esquema del frontmatter
377+
378+
El esquema del frontmatter para la colección de contenido `docs` de Starlight se configura en `src/content/config.ts` usando el auxiliar `docsSchema()`:
379+
380+
```ts {3,6}
381+
// src/content/config.ts
382+
import { defineCollection } from 'astro:content';
383+
import { docsSchema } from '@astrojs/starlight/schema';
384+
385+
export const collections = {
386+
docs: defineCollection({ schema: docsSchema() }),
387+
};
388+
```
389+
390+
Aprende más sobre los esquemas de colección de contenido en [“Definir un esquema de colección”](https://docs.astro.build/es/guides/content-collections/#definiendo-un-esquema-de-colección) en la documentación de Astro.
391+
392+
`docsSchema()` toma las siguientes opciones:
393+
394+
### `extend`
395+
396+
**tipo:** esquema Zod o función que devuelve un esquema Zod
397+
**por defecto:** `z.object({})`
398+
399+
Extiende el esquema de Starlight con campos adicionales estableciendo `extend` en las opciones de `docsSchema()`.
400+
El valor debe ser un [esquema Zod](https://docs.astro.build/es/guides/content-collections/#definiendo-tipos-de-datos-con-zod).
401+
402+
En el siguiente ejemplo, proporcionamos un tipo más estricto para `description` para hacerlo requerido y agregamos un nuevo campo opcional `category`:
403+
404+
```ts {8-13}
405+
// src/content/config.ts
406+
import { defineCollection, z } from 'astro:content';
407+
import { docsSchema } from '@astrojs/starlight/schema';
408+
409+
export const collections = {
410+
docs: defineCollection({
411+
schema: docsSchema({
412+
extend: z.object({
413+
// Hacer un campo integrado requerido en lugar de opcional.
414+
description: z.string(),
415+
// Agrega un nuevo campo al esquema.
416+
category: z.enum(['tutorial', 'guide', 'reference']).optional(),
417+
}),
418+
}),
419+
}),
420+
};
421+
```
422+
423+
Para tomar ventaja del [auxiliar `image()` de Astro](https://docs.astro.build/es/guides/images/#imágenes-en-colecciones-de-contenido), usa una función que devuelva tu extensión de esquema:
424+
425+
```ts {8-13}
426+
// src/content/config.ts
427+
import { defineCollection, z } from 'astro:content';
428+
import { docsSchema } from '@astrojs/starlight/schema';
429+
430+
export const collections = {
431+
docs: defineCollection({
432+
schema: docsSchema({
433+
extend: ({ image }) => {
434+
return z.object({
435+
// Agrega un campo que debe resolverse a una imagen local.
436+
cover: image(),
437+
});
438+
},
439+
}),
440+
}),
441+
};
442+
```

‎docs/src/content/docs/es/reference/overrides.md

+8
Original file line numberDiff line numberDiff line change
@@ -136,6 +136,12 @@ Objeto `Date` de JavaScript que representa cuándo se actualizó por última vez
136136

137137
Objeto `URL` para la dirección donde se puede editar esta página si está habilitado.
138138

139+
#### `labels`
140+
141+
**Tipo:** `Record<string, string>`
142+
143+
Un objecto que contiene cadenas de UI localizadas para la página actual. Consulta la guía ["Traducir la UI de Starlight"](/es/guides/i18n/#traduce-la-ui-de-starlight) para ver una lista de todas las claves disponibles.
144+
139145
---
140146

141147
## Componentes
@@ -229,6 +235,8 @@ La implementación predeterminada incluye lógica para renderizar logotipos defi
229235
Componente utilizado para renderizar la UI de búsqueda de Starlight.
230236
La implementación predeterminada incluye el botón en el encabezado y el código para mostrar un modal de búsqueda cuando se hace clic y cargar la UI de [Pagefind](https://pagefind.app/).
231237

238+
Cuando [`pagefind`](/es/reference/configuration/#pagefind) está deshabilitado, el componente de búsqueda predeterminado no se renderizará. Sin embargo, si reemplazas `Search`, tu componente personalizado siempre se renderizará incluso si la opción de configuración `pagefind` es `false`. Esto te permite agregar una interfaz de usuario para proveedores de búsqueda alternativos cuando se deshabilita Pagefind.
239+
232240
#### `SocialIcons`
233241

234242
**Componente por defecto:** [`SocialIcons.astro`](https://github.com/withastro/starlight/blob/main/packages/starlight/components/SocialIcons.astro)

0 commit comments

Comments
 (0)