move alias page to imports.mdx (#8515)

Co-authored-by: Sarah Rainsberger <[email protected]>

src/content/docs/de/guides/imports.mdx

@@ -143,6 +143,50 @@ Es kann auch nützlich sein, Bilder in den Ordner `public/` zu legen, wie auf de
 Das Hinzufügen von **Alt-Text** zu `<img>`-Tags wird aus Gründen der Zugänglichkeit empfohlen! Vergiss nicht, deinen Bildelementen das Attribut `alt="eine hilfreiche Beschreibung"` hinzuzufügen. Du kannst das Attribut einfach leer lassen, wenn das Bild rein dekorativ ist.
 :::
 
+## Import-Aliasnamen
+
+Ein **Aliasname** (kurz **Alias**) ist eine Möglichkeit, um Abkürzungen für Importpfade zu erstellen.
+
+Aliasnamen können dabei helfen, die Entwicklungserfahrung in Codebasen mit vielen Verzeichnissen oder relativen Importpfaden zu verbessern.
+
+```astro
+---
+// mein-projekt/src/pages/ueber-uns/firma.astro
+
+import Button from '../../components/controls/Button.astro';
+import logoUrl from '../../assets/logo.png?url';
+---
+```
+
+In diesem Beispiel müsste man bei der Entwicklung die Baumbeziehung zwischen `src/pages/ueber-uns/firma.astro`, `src/components/controls/Button.astro` und `src/assets/logo.png` berücksichtigen, um die richtigen relativen Importpfade definieren zu können. Und falls die Datei `firma.astro` jemals verschoben werden sollte, müssten diese Importpfade ebenfalls aktualisiert werden.
+
+Um diese Situation zu verbessern, kannst du Import-Aliasnamen entweder in der Datei `tsconfig.json` oder `jsconfig.json` hinzufügen.
+
+```json
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@assets/*": ["src/assets/*"]
+    }
+  }
+}
+```
+
+Mit dieser zentralen Änderung kannst du die Importpfade nun überall in deinem Projekt benutzen:
+
+```astro
+---
+// mein-projekt/src/pages/ueber-uns/firma.astro
+
+import Button from '@components/Button.astro';
+import logoUrl from '@assets/logo.png';
+---
+```
+
+Die von dir definierten Aliasnamen werden auch automatisch in [VS Code](https://code.visualstudio.com/docs/languages/jsconfig) und andere Editoren integriert.
+
 ## `Astro.glob()`
 
 Mit [`Astro.glob()`](/de/reference/api-reference/#astroglob) kannst du viele Dateien auf einmal importieren.

src/content/docs/de/guides/typescript.mdx

@@ -114,7 +114,7 @@ Du kannst TypeScript so konfigurieren, dass Typ-Importe in deiner `.tsconfig`-Da
 
 ## Import-Aliase
 
-Astro unterstützt [Import-Aliase](/de/guides/aliases/), die du in deiner `tsconfig.json` & `jsconfig.json` `paths` Konfiguration definierst. [Lies unsere Anleitung](/de/guides/aliases/), um mehr zu erfahren.
+Astro unterstützt [Import-Aliase](/de/guides/imports/#aliases), die du in deiner `tsconfig.json` & `jsconfig.json` `paths` Konfiguration definierst. [Lies unsere Anleitung](/de/guides/imports/#aliases), um mehr zu erfahren.
 
 
 ```astro title="src/pages/about/nate.astro" "@components" "@layouts"

src/content/docs/en/guides/images.mdx

@@ -95,7 +95,7 @@ import myImage from '../assets/my_image.png'; // Image is 1600x900
 
 The format of the `src` value of your image file depends on where your image file is located:
 
-- **Local images in `src/`** - you must **also import the image** using a relative file path or configure and use an [import alias](/en/guides/aliases/). Then use the import name as the `src` value:
+- **Local images in `src/`** - you must **also import the image** using a relative file path or configure and use an [import alias](/en/guides/imports/#aliases). Then use the import name as the `src` value:
 
   ```astro title="src/pages/index.astro" "myImportedImage" "{myImportedImage}"
   ---
@@ -405,7 +405,7 @@ It accepts all HTML `<img>` tag properties, and the only required property is `s
 
 #### Local images in `src/`
 
-Local images must be **imported from the relative path** from the existing `.astro` file, or configure and use an [import alias](/en/guides/aliases/). Then, you can access the image's `src` and other properties to use in the `<img>` tag.
+Local images must be **imported from the relative path** from the existing `.astro` file, or configure and use an [import alias](/en/guides/imports/#aliases). Then, you can access the image's `src` and other properties to use in the `<img>` tag.
 
 For example, use the image's own `height` and `width` properties to avoid CLS and improve Core Web Vitals.
 
@@ -781,7 +781,7 @@ If necessary, also update your `src/env.d.ts` file to replace the `astro/client-
 
 #### Remove the `~/assets` import alias
 
-This import alias is no longer included by default with `astro:assets`. If you were using this alias with experimental assets, you must convert them to relative file paths, or [create your own import aliases](/en/guides/aliases/).
+This import alias is no longer included by default with `astro:assets`. If you were using this alias with experimental assets, you must convert them to relative file paths, or [create your own import aliases](/en/guides/imports/#aliases).
 
 ```astro title="src/pages/posts/post-1.astro" del={2} ins={3}
 ---

src/content/docs/en/guides/imports.mdx

@@ -146,6 +146,51 @@ It can also be useful to place images in the `public/` folder as explained on th
 Adding **alt text** to `<img>` tags is encouraged for accessibility! Don't forget to add an `alt="a helpful description"` attribute to your image elements. You can just leave the attribute empty if the image is purely decorative.
 :::
 
+## Aliases
+
+An **alias** is a way to create shortcuts for your imports.
+
+Aliases can help improve the development experience in codebases with many directories or relative imports.
+
+```astro title="src/pages/about/company.astro" del="../../components" del="../../assets"
+---
+import Button from '../../components/controls/Button.astro';
+import logoUrl from '../../assets/logo.png?url';
+---
+```
+
+In this example, a developer would need to understand the tree relationship between `src/pages/about/company.astro`, `src/components/controls/Button.astro`, and `src/assets/logo.png`. And then, if the `company.astro` file were to be moved, these imports would also need to be updated.
+
+You can add import aliases from either `tsconfig.json` or `jsconfig.json`.
+
+```json title="tsconfig.json" ins={5-6}
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@assets/*": ["src/assets/*"]
+    }
+  }
+}
+```
+
+:::note
+Make sure `compilerOptions.baseUrl` is set so the aliased paths can be resolved.
+:::
+
+The development server will automatically restart after this configuration change. You can now import using the aliases anywhere in your project:
+
+```astro title="src/pages/about/company.astro" ins="@components" ins="@assets"
+---
+import Button from '@components/controls/Button.astro';
+import logoUrl from '@assets/logo.png?url';
+---
+```
+
+These aliases are also integrated automatically into [VS Code](https://code.visualstudio.com/docs/languages/jsconfig) and other editors.
+
+
 ## `Astro.glob()`
 
 [`Astro.glob()`](/en/reference/api-reference/#astroglob) is a way to import many files at once.

src/content/docs/en/guides/markdown-content.mdx

@@ -68,7 +68,7 @@ Astro provides some extra, built-in Markdown features available when using Markd
 
 ### Frontmatter `layout`
 
-Astro provides [Markdown and MDX pages](/en/basics/astro-pages/#markdownmdx-pages) (located within `src/pages/`) with a special frontmatter `layout` property that can specify a relative path (or [alias](/en/guides/aliases/)) to an Astro [layout component](/en/basics/layouts/#markdownmdx-layouts).
+Astro provides [Markdown and MDX pages](/en/basics/astro-pages/#markdownmdx-pages) (located within `src/pages/`) with a special frontmatter `layout` property that can specify a relative path (or [alias](/en/guides/imports/#aliases)) to an Astro [layout component](/en/basics/layouts/#markdownmdx-layouts).
 
 ```markdown {3}
 ---

src/content/docs/en/guides/typescript.mdx

@@ -95,7 +95,7 @@ You can configure TypeScript to enforce type imports in your `tsconfig.json` fil
 
 ## Import Aliases
 
-Astro supports [import aliases](/en/guides/aliases/) that you define in your `tsconfig.json` & `jsconfig.json` `paths` configuration. [Read our guide](/en/guides/aliases/) to learn more.
+Astro supports [import aliases](/en/guides/imports/#aliases) that you define in your `tsconfig.json` & `jsconfig.json` `paths` configuration. [Read our guide](/en/guides/imports/#aliases) to learn more.
 
 
 ```astro title="src/pages/about/nate.astro" "@components" "@layouts"

src/content/docs/en/install-and-setup.mdx

@@ -156,29 +156,22 @@ Explore the guides below to customize your development experience.
     title="Editor Setup"
     description="Customize your code editor to improve the Astro developer experience and unlock new features."
     href="/en/editor-setup/"
-  />
-   <LinkCard
-    title="TypeScript"
-    description="Configure Astro's built-in TypeScript support to be as strict or relaxed as you like!"
-    href="/en/guides/typescript/"
-  />
-  <LinkCard
-    title="Import Aliases"
-    description="Create convenient shortcuts for your file imports."
-    href="/en/guides/aliases/"
   />
   <LinkCard
-    title="Environment Variables"
-    description="Set and use environment variables in your project."
-    href="/en/guides/environment-variables/"
-  />
-    <LinkCard
     title="Dev Toolbar"
     description="Explore the helpful features of the dev toolbar."
     href="/en/guides/dev-toolbar/"
   />
 </CardGrid>
 
+### TypeScript in Astro
+
+Astro ships with built-in support for [TypeScript](https://www.typescriptlang.org/), which can help prevent errors at runtime by defining the shapes of objects and components in your code.
+
+You don't need to write TypeScript code in your Astro projects to benefit from it. Astro always treats your component code as TypeScript, and the [Astro VSCode Extension](/en/editor-setup/) will infer as much as it can to provide autocompletion, hints, and errors in your editor.
+
+<ReadMore>Read more about using and configuring [TypeScript in Astro](/en/guides/typescript/)</ReadMore>
+
 ## Build and preview your site
 
 To check the version of your site that will be created at build time, quit the dev server (<kbd>Ctrl</kbd> + <kbd>C</kbd>) and run the appropriate build command for your package manager in your terminal:
@@ -429,4 +422,4 @@ If you prefer not to use our automatic `create astro` CLI tool, you can set up y
 
 8. You can now [start the Astro dev server](#start-the-astro-dev-server) and see a live preview of your project while you build!
 
-</Steps>
+</Steps>

src/content/docs/es/guides/images.mdx

@@ -95,7 +95,7 @@ import myImage from '../assets/my_image.png'; // La imagen es 1600x900
 
 El formato del valor `src` de tu archivo de imagen depende de dónde esté ubicado tu archivo de imagen:
 
-- **Imágenes locales en `src/`** - también debes **importar la imagen** utilizando una ruta de archivo relativa o configurar y usar un [alias de importación](/es/guides/aliases/). Luego usa el nombre de importación como valor de `src`:
+- **Imágenes locales en `src/`** - también debes **importar la imagen** utilizando una ruta de archivo relativa o configurar y usar un [alias de importación](/es/guides/imports/#aliases). Luego usa el nombre de importación como valor de `src`:
 
   ```astro title="src/pages/index.astro" "myImportedImage" "{myImportedImage}"
   ---
@@ -404,7 +404,7 @@ Esta acepta todas las propiedades de la etiqueta HTML `<img>`, y la única propi
 
 #### Imágenes locales en `src/`
 
-Las imágenes locales deben ser **importadas desde la ruta relativa** al archivo `.astro` existente, o configurar y usar un [alias de importación](/es/guides/aliases/). Luego, puedes acceder a la propiedad `src` de la imagen y otras propiedades para usar en la etiqueta `<img>`.
+Las imágenes locales deben ser **importadas desde la ruta relativa** al archivo `.astro` existente, o configurar y usar un [alias de importación](/es/guides/imports/#aliases). Luego, puedes acceder a la propiedad `src` de la imagen y otras propiedades para usar en la etiqueta `<img>`.
 
 Por ejemplo, utiliza las propiedades `height` y `width` propias de la imagen para evitar CLS y mejorar los Core Web Vitals.
 
@@ -780,7 +780,7 @@ Si es necesario, también actualiza tu archivo `src/env.d.ts` para reemplazar la
 
 #### Eliminar el alias de importación `~/assets`
 
-Este alias de importación ya no se incluye por defecto con `astro:assets`. Si estabas usando este alias con assets experimentales, debes convertirlos a rutas de archivo relativas o [crear tus propios alias de importación](/es/guides/aliases/).
+Este alias de importación ya no se incluye por defecto con `astro:assets`. Si estabas usando este alias con assets experimentales, debes convertirlos a rutas de archivo relativas o [crear tus propios alias de importación](/es/guides/imports/#aliases).
 
 ```astro title="src/pages/posts/post-1.astro" del={2} ins={3}
 ---

src/content/docs/es/guides/imports.mdx

@@ -33,15 +33,15 @@ Puedes poner cualquier recurso estático en el [directorio `public/`](/es/basics
 
 Astro usa ESM, la misma sintaxis [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#syntax) y [`export`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) soportada en el navegador.
 
-## JavaScript
+### JavaScript
 
 ```js
 import { getUser } from './user.js';
 ```
 
 Se puede importar JavaScript usando la sintaxis normal ESM `import` & `export`.
 
-## TypeScript
+### TypeScript
 
 ```js
 import { getUser } from './user';
@@ -64,7 +64,7 @@ import MyComponent from "./MyComponent"; // MyComponent.tsx
 
 <ReadMore>Lee más sobre la compatibilidad de [TypeScript en Astro.](/es/guides/typescript/)</ReadMore>
 
-## JSX / TSX
+### JSX / TSX
 
 ```js
 import { MyComponent } from './MyComponent.jsx';
@@ -78,7 +78,7 @@ Si bien Astro entiende la sintaxis de JSX por defecto, deberás incluir una inte
 **Astro no soporta código JSX en archivos `.js`/`.ts`.** JSX solo es compatible dentro de los archivos que terminen con las extensiones `.jsx` y `.tsx`.
 :::
 
-## Paquetes NPM
+### Paquetes NPM
 
 Si has instalado un paquete de NPM, puedes importarlo en Astro.
 
@@ -94,7 +94,7 @@ Si un paquete fue publicado usando un formato antiguo, Astro convertirá el paqu
 Algunos paquetes dependen de un entorno de navegador. Los componentes de Astro se ejecutan en el servidor, por lo que importar estos paquetes en el frontmatter puede [llevarte a errores](/es/guides/troubleshooting/#document-or-window-is-not-defined).
 :::
 
-## JSON
+### JSON
 
 ```js
 // Importa el objeto JSON mediante el export por defecto
@@ -103,7 +103,7 @@ import json from './data.json';
 
 Astro puede importar archivos JSON directamente a su aplicación. Los archivos importados devuelven el objeto JSON completo mediante una importación por defecto.
 
-## CSS
+### CSS
 
 ```js
 // Importa e inyecta 'style.css' en la página
@@ -112,7 +112,7 @@ import './style.css';
 
 Astro es compatible con la importación de CSS directamente en su aplicación. Los estilos importados no exponen exportaciones, pero importar uno agregará automáticamente esos estilos a la página. Esto funciona para todos los archivos CSS de forma predeterminada y es compatible con lenguajes de compilación a CSS como Sass & Less a través de plugins.
 
-## CSS Modules
+### CSS Modules
 
 ```jsx
 // 1. Convierte las clases de './style.module.css' en valores únicos con 
@@ -129,7 +129,7 @@ Astro es compatible con módulos CSS utilizando la nomenclatura `[nombre].module
 
 CSS Modules te ayuda a limitar el alcance de los estilos y aislarlos de otros mediante nombres de clase únicos que son generados para tus hojas de estilo.
 
-## Otros recursos
+### Otros recursos
 
 ```jsx
 import imgReference from './image.png'; // img === '/src/image.png'
@@ -148,6 +148,50 @@ También puede ser útil colocar imágenes en la carpeta `public/` como se expli
 ¡Agrega **alt text** a las etiquetas `<img>` para mejorar la accesibilidad! No olvides agregar un atributo `alt="una buena descripción"` a tus elementos de imagen. Puedes dejar el atributo vacío si la imagen es puramente decorativa.
 :::
 
+## Alias
+
+Un **alias** es una forma de crear atajos para tus imports.
+
+Los alias ayudan a mejorar la experiencia de desarrollo en repositorios con muchas carpetas o importaciones relativas.
+
+```astro title="src/pages/about/company.astro" del="../../components" del="../../assets"
+---
+import Button from '../../components/controls/Button.astro';
+import logoUrl from '../../assets/logo.png?url';
+---
+```
+
+En este ejemplo, un desarrollador necesitaría comprender la relación de archivos entre `src/pages/about/company.astro`, `src/components/controls/Button.astro` y `src/assets/logo.png?url`. Y luego, si se moviera el archivo `company.astro`, estas importaciones también tendrían que actualizarse.
+
+Puedes agregar alias de importación desde `tsconfig.json` o `jsconfig.json`.
+
+```json title="tsconfig.json" ins={5-6}
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@components/*": ["src/components/*"],
+      "@assets/*": ["src/assets/*"]
+    }
+  }
+}
+```
+
+:::note
+Asegúrate de que `compilerOptions.baseUrl` esté configurado para que las rutas con alias se puedan resolver.
+:::
+
+El servidor de desarrollo se reiniciará automáticamente tras este cambio de configuración. Ahora puedes importar usando los alias en cualquier parte de tu proyecto:
+
+```astro title="src/pages/about/company.astro" ins="@components" ins="@assets"
+---
+import Button from '@components/Button';
+import logoUrl from '@assets/logo.png?url';
+---
+```
+
+Estos alias también se integran automáticamente a [VSCode](https://code.visualstudio.com/docs/languages/jsconfig) y otros editores.
+
 ## `Astro.glob()`
 
 [`Astro.glob()`](/es/reference/api-reference/#astroglob) es una forma de importar muchos archivos a la vez.