Reusable snippets

Uno de los principios fundamentales del desarrollo de software es DRY (Don’t Repeat Yourself, No Te Repitas), que también se aplica a la documentación. Si te encuentras repitiendo el mismo contenido en múltiples lugares, deberías crear un fragmento personalizado para mantener tu contenido sincronizado.

Creando un fragmento personalizado

Precondición: Debes crear tu archivo de fragmento en el directoriosnippets para que la importación funcione.

Cualquier página en el directoriosnippets será tratada como un fragmento y no se renderizará como una página independiente. Si deseas crear una página independiente a partir del fragmento, importa el fragmento en otro archivo y llámalo como un componente.

Exportación por defecto

1. Agrega contenido a tu archivo de fragmento que deseas reutilizar. Opcionalmente, puedes agregar variables que se pueden llenar a través de props cuando importes el fragmento. En este ejemplo, nuestra variable es word.

snippets/my-snippet.mdx

Hello world! This is my content I want to reuse across pages.

2. Importa el fragmento en tu archivo de destino.

destination-file.mdx

---
title: My title
description: My Description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Header

Lorem impsum dolor sit amet.

<MySnippet/>

Exportación con variables

1. Opcionalmente, puedes agregar variables que se pueden llenar a través de props cuando importes el fragmento. En este ejemplo, nuestra variable es word.

snippets/my-snippet.mdx

My keyword of the day is {word}.

2. Importa el fragmento en tu archivo de destino con la variable. La propiedad se llenará según tu especificación.

destination-file.mdx

---
title: My title
description: My Description
---

import MySnippet from '/snippets/path/to/my-snippet.mdx';

## Header

Lorem impsum dolor sit amet.

<MySnippet word="bananas" />

Variables reutilizables

1. Exporta una variable desde tu archivo de fragmento:

snippets/path/to/custom-variables.mdx

export const myName = 'my name';

export const myObject = { fruit: 'strawberries' };

2. Importa el fragmento desde tu archivo de destino y usa la variable:

destination-file.mdx

---
title: My title
description: My Description
---

import { myName, myObject } from '/snippets/path/to/custom-variables.mdx';

Hello, my name is {myName} and I like {myObject.fruit}.