(undefined);
-
- useEffect(() => {
- const getItemOffsets = () => {
- const titles = document.querySelectorAll('article :is(h1, h2, h3, h4)');
- itemOffsets.current = Array.from(titles).map((title) => ({
- id: title.id,
- topOffset: title.getBoundingClientRect().top + window.scrollY,
- }));
- };
-
- getItemOffsets();
- window.addEventListener('resize', getItemOffsets);
-
- return () => {
- window.removeEventListener('resize', getItemOffsets);
- };
- }, []);
-
- return (
- <>
- On this page
-
-
- {headers
- .filter(({ depth }) => depth > 1 && depth < 4)
- .map((header) => (
-
- ))}
-
-
- );
-};
-
-export default TableOfContents;
diff --git a/docs/src/components/RightSidebar/ThemeToggleButton.css b/docs/src/components/RightSidebar/ThemeToggleButton.css
deleted file mode 100644
index d8cd7c2ac..000000000
--- a/docs/src/components/RightSidebar/ThemeToggleButton.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.theme-toggle {
- display: inline-flex;
- align-items: center;
- gap: 0.25em;
- padding: 0.33em 0.67em;
- border-radius: 99em;
- background-color: var(--theme-code-inline-bg);
-}
-
-.theme-toggle > label:focus-within {
- outline: 2px solid transparent;
- box-shadow: 0 0 0 0.08em var(--theme-accent), 0 0 0 0.12em white;
-}
-
-.theme-toggle > label {
- color: var(--theme-code-inline-text);
- position: relative;
- display: flex;
- align-items: center;
- justify-content: center;
- opacity: 0.5;
- cursor: pointer;
-}
-
-.theme-toggle .checked {
- color: var(--theme-accent);
- opacity: 1;
-}
-
-input[name='theme-toggle'] {
- position: absolute;
- opacity: 0;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- z-index: -1;
-}
diff --git a/docs/src/components/RightSidebar/ThemeToggleButton.tsx b/docs/src/components/RightSidebar/ThemeToggleButton.tsx
deleted file mode 100644
index 3cdc5bc0c..000000000
--- a/docs/src/components/RightSidebar/ThemeToggleButton.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import type { FunctionalComponent } from 'preact';
-import { h, Fragment } from 'preact';
-import { useState, useEffect } from 'preact/hooks';
-import './ThemeToggleButton.css';
-
-const themes = ['light', 'dark'];
-
-const icons = [
-
- ,
-
- ,
-];
-
-function ThemeToggle() {
- const [theme, setTheme] = useState(() => {
- if (import.meta.env.SSR) {
- return undefined;
- }
- if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
- return localStorage.getItem('theme');
- }
- if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
- return 'dark';
- }
- return 'light';
- });
-
- useEffect(() => {
- const root = document.documentElement;
- if (theme === 'light') {
- root.classList.remove('theme-dark');
- } else {
- root.classList.add('theme-dark');
- }
- }, [theme]);
-
- return (
-
- {themes.map((t, i) => {
- const icon = icons[i];
- const checked = t === theme;
- return (
-
- {icon}
-
- );
- })}
-
- );
-}
-
-export default ThemeToggle;
diff --git a/docs/src/config.ts b/docs/src/config.ts
deleted file mode 100644
index 8514a171f..000000000
--- a/docs/src/config.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-export const SIDEBAR = {
- en: [
- { text: 'Setup', header: true },
- { text: 'Getting Started', link: 'en/getting-started' },
- { text: 'Quickstart', link: 'en/quick-start' },
- { text: 'Installation', link: 'en/installation' },
- { text: 'Themes', link: 'en/themes' },
- { text: 'Astro vs. X', link: 'en/comparing-astro-vs-other-tools' },
- { text: 'Migrate to v0.21', link: 'en/migration/0.21.0' },
-
- { text: 'Basics', header: true },
- { text: 'Project Structure', link: 'en/core-concepts/project-structure' },
- { text: 'Component Syntax', link: 'en/core-concepts/astro-components' },
- { text: 'Pages', link: 'en/core-concepts/astro-pages' },
- { text: 'Layouts', link: 'en/core-concepts/layouts' },
- { text: 'Routing', link: 'en/core-concepts/routing' },
- { text: 'Partial Hydration', link: 'en/core-concepts/component-hydration' },
-
- { text: 'Guides', header: true },
- { text: 'Styling & CSS', link: 'en/guides/styling' },
- { text: 'Markdown', link: 'en/guides/markdown-content' },
- { text: 'Debugging', link: 'en/guides/debugging' },
- { text: 'Data Fetching', link: 'en/guides/data-fetching' },
- { text: 'Pagination', link: 'en/guides/pagination' },
- { text: 'RSS', link: 'en/guides/rss' },
- { text: 'Supported Imports', link: 'en/guides/imports' },
- { text: 'Aliases', link: 'en/guides/aliases' },
- { text: 'Environment Variables', link: 'en/guides/environment-variables' },
- { text: 'Deploy to the web', link: 'en/guides/deploy' },
- { text: 'Publish to npm', link: 'en/guides/publish-to-npm' },
-
- { text: 'Reference', header: true },
- { text: 'Built-In Components', link: 'en/reference/builtin-components' },
- { text: 'API Reference', link: 'en/reference/api-reference' },
- { text: 'CLI Reference', link: 'en/reference/cli-reference' },
- {
- text: 'Configuration Reference',
- link: 'en/reference/configuration-reference',
- },
- { text: 'Renderer Reference', link: 'en/reference/renderer-reference' },
- ],
- de: [
- { text: 'Einrichtung', header: true },
- { text: 'Erste Schritte', link: 'de/getting-started' },
- { text: 'Schnellstart', link: 'de/quick-start' },
- { text: 'Installation', link: 'de/installation' },
- { text: 'Vorlagen', link: 'de/themes' },
- { text: 'Astro vs. X', link: 'de/comparing-astro-vs-other-tools' },
- { text: 'Umstellung auf v0.21', link: 'de/migration/0.21.0' },
-
- { text: 'Grundlagen', header: true },
- { text: 'Projektstruktur', link: 'de/core-concepts/project-structure' },
- { text: 'Astro-Komponenten', link: 'de/core-concepts/astro-components' },
- { text: 'Astro-Seiten', link: 'de/core-concepts/astro-pages' },
- { text: 'Layouts', link: 'de/core-concepts/layouts' },
- { text: 'Routing', link: 'de/core-concepts/routing' },
- { text: 'Partial Hydration', link: 'de/core-concepts/component-hydration' },
-
- { text: 'Anleitungen', header: true },
- { text: 'Styling & CSS', link: 'de/guides/styling' },
-
- { text: 'Referenz', header: true },
- ],
- nl: [
- { text: 'Welkom', header: true },
- { text: 'Beginnen', link: 'nl/getting-started' },
- { text: 'Snel start', link: 'nl/quick-start' },
- ],
- fi: [
- { text: 'Tervetuloa', header: true },
- { text: 'Aloittaminen', link: 'fi/getting-started' },
- { text: 'Pika-aloitus', link: 'fi/quick-start' },
- { text: 'Asennus', link: 'fi/installation' },
- ],
- es: [
- { text: 'Configuración', header: true },
- { text: 'Empezando', link: 'es/getting-started' },
- { text: 'Comienzo rápido', link: 'es/quick-start' },
- { text: 'Instalación', link: 'es/installation' },
- { text: 'Astro vs. X', link: 'es/comparing-astro-vs-other-tools' },
-
- { text: 'Fundamentos', header: true },
- {
- text: 'Estructura del Proyecto',
- link: 'es/core-concepts/project-structure',
- },
- {
- text: 'Sintaxis del Componente',
- link: 'es/core-concepts/astro-components',
- },
- { text: 'Páginas', link: 'es/core-concepts/astro-pages' },
- { text: 'Maquetas', link: 'es/core-concepts/layouts' },
- { text: 'Enrutamiento', link: 'es/core-concepts/routing' },
- {
- text: 'Hidratación parcial',
- link: 'es/core-concepts/component-hydration',
- },
-
- { text: 'Guías', header: true },
- { text: 'Estilo y CSS', link: 'es/guides/styling' },
- { text: 'Markdown', link: 'es/guides/markdown-content' },
- { text: 'Depuración', link: 'es/guides/debugging' },
- { text: 'Obtención de datos', link: 'es/guides/data-fetching' },
- { text: 'Paginación', link: 'es/guides/pagination' },
- { text: 'RSS', link: 'es/guides/rss' },
- { text: 'Importaciones admitidas', link: 'es/guides/imports' },
- { text: 'Alias', link: 'es/guides/aliases' },
- { text: 'Desplegar en la web', link: 'es/guides/deploy' },
- { text: 'Publicar en npm', link: 'es/guides/publish-to-npm' },
-
- { text: 'Referencia', header: true },
- {
- text: 'Componentes incorporados',
- link: 'es/reference/builtin-components',
- },
- { text: 'Referencia de API', link: 'es/reference/api-reference' },
- { text: 'Referencia de CLI', link: 'es/reference/cli-reference' },
- {
- text: 'Referencia de configuración',
- link: 'es/reference/configuration-reference',
- },
- {
- text: 'Referencia de renderizador',
- link: 'es/reference/renderer-reference',
- },
- ],
- 'zh-CN': [
- { text: '起步', header: true },
- { text: '入门指南', link: 'zh-CN/getting-started' },
- { text: '快速入门', link: 'zh-CN/quick-start' },
- { text: '安装指南', link: 'zh-CN/installation' },
- { text: '模板样例', link: 'zh-CN/examples' },
- {
- text: 'Astro 对比其他框架',
- link: 'zh-CN/comparing-astro-vs-other-tools',
- },
- ],
- 'zh-TW': [
- { text: '設定', header: true },
- { text: '新手上路', link: 'zh-TW/getting-started' },
- { text: '快速開始', link: 'zh-TW/quick-start' },
- { text: '安裝', link: 'zh-TW/installation' },
- { text: '佈景主題', link: 'zh-TW/themes' },
- ],
- bg: [
- { text: 'Главни', header: true },
- { text: 'Започваме!', link: 'bg/getting-started' },
- ],
- fr: [
- { text: 'Bienvenue', header: true },
- { text: 'Bien démarrer', link: 'fr/getting-started' },
- { text: 'Démarrage rapide', link: 'fr/quick-start' },
- { text: 'Installation', link: 'fr/installation' },
- ],
- bn: [
- { text: 'সেটআপ', header: true },
- { text: 'শুরু করুন', link: 'bn/getting-started' },
- ],
- kr: [
- { text: '환영합니다', header: true },
- { text: '시작하기', link: 'kr/getting-started' },
- ],
- ar: [
- { text: 'التهيئة', header: true },
- { text: 'باشر البدأ', link: 'ar/getting-started' },
- ],
- da: [
- { text: 'Velkommen', header: true },
- { text: 'Introduktion', link: 'da/getting-started' },
- ],
- ja: [
- { text: 'セットアップ', header: true },
- { text: 'はじめに', link: 'ja/getting-started' },
- { text: 'クイックスタート', link: 'ja/quick-start' },
- { text: 'インストール', link: 'ja/installation' },
- { text: 'テーマ', link: 'ja/themes' },
- { text: 'Astro vs. X', link: 'ja/comparing-astro-vs-other-tools' },
- ],
- ru: [
- { text: 'Введение', header: true },
- { text: 'Начало работы', link: 'ru/getting-started' },
- { text: 'Быстрый старт', link: 'ru/quick-start' },
- ],
- it: [
- { text: 'Impostare', header: true },
- { text: 'Come iniziare', link: 'it/getting-started' },
- ],
-};
-
-export const SITE = {
- title: 'Astro Documentation',
- description: 'Build faster websites with less client-side Javascript.',
-};
-
-export const OPEN_GRAPH = {
- locale: 'en_US',
- image: {
- src: '/default-og-image.png?v=1',
- alt:
- 'astro logo on a starry expanse of space,' +
- ' with a purple saturn-like planet floating in the right foreground',
- },
- twitter: 'astrodotbuild',
-};
diff --git a/docs/src/data/components.json b/docs/src/data/components.json
deleted file mode 100644
index 1abe45fc0..000000000
--- a/docs/src/data/components.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
- "official": [],
- "community": [
- {
- "name": "Accessible Astro Components",
- "description": "A set of accessible modals, buttons, toggles and more.",
- "github": "https://www.npmjs.com/package/accessible-astro-components",
- "demo": null
- },
- {
- "name": "Astro Static Tweet",
- "description": "A lightweight static-HTML tweet embed.",
- "github": "https://www.npmjs.com/package/@rebelchris/astro-static-tweet",
- "demo": null
- },
- {
- "name": "Astro SEO",
- "description": "SEO tags for your website.",
- "github": "https://github.com/jonasmerlin/astro-seo",
- "demo": null
- },
- {
- "name": "Astro SPA",
- "description": "A component for Astro JS that turns a website into an SPA.",
- "github": "https://www.npmjs.com/package/astro-spa",
- "demo": [
- "https://ohka-bots-site-astro-ksoqn4flk7-li4hm4z1a-tc-001.vercel.app/",
- "https://astro-spafy-component-demo.netlify.app/"
- ]
- }
- ]
-}
diff --git a/docs/src/data/themes.json b/docs/src/data/themes.json
deleted file mode 100644
index 27142ac3c..000000000
--- a/docs/src/data/themes.json
+++ /dev/null
@@ -1,80 +0,0 @@
-{
- "featured": [
- {
- "name": "Ink",
- "description": "Crisp, minimal, personal blog theme for Astro",
- "github": "https://github.com/one-aalam/astro-ink",
- "demo": "https://astro-ink.vercel.app/",
- "sandbox": "https://github.dev/one-aalam/astro-ink",
- "command": "npm init astro -- --template one-aalam/astro-ink"
- }
- ],
- "official": [
- {
- "name": "Starter Kit",
- "description": "A default starter project for Astro. Flexible enough to handle anything that you might want to build.",
- "github": "https://github.com/withastro/astro/tree/main/examples/starter",
- "demo": null,
- "sandbox": "https://github.dev/withastro/astro/tree/main/examples/starter",
- "command": "npm init astro"
- },
- {
- "name": "Docs",
- "description": "A documentation website theme, complete with i18n, search, dark mode and more.",
- "github": "https://github.com/withastro/astro/tree/main/examples/docs",
- "demo": null,
- "sandbox": "https://github.dev/withastro/astro/tree/main/examples/docs",
- "command": "npm init astro -- --template docs"
- },
- {
- "name": "Blog",
- "description": "A blog theme, perfect for personal and company blogs.",
- "github": "https://github.com/withastro/astro/tree/main/examples/blog",
- "demo": null,
- "sandbox": "https://github.dev/withastro/astro/tree/main/examples/blog",
- "command": "npm init astro -- --template blog"
- },
- {
- "name": "Portfolio",
- "description": "A portfolio theme, perfect for your personal or professional online portfolio.",
- "github": "https://github.com/withastro/astro/tree/main/examples/portfolio",
- "demo": null,
- "sandbox": "https://github.dev/withastro/astro/tree/main/examples/portfolio",
- "command": "npm init astro -- --template portfolio"
- },
- {
- "name": "Portfolio-svelte",
- "description": "A portfolio theme using Svelte components, perfect for your personal or professional online portfolio.",
- "github": "https://github.com/withastro/astro/tree/main/examples/portfolio-svelte",
- "demo": null,
- "sandbox": "https://github.dev/withastro/astro/tree/main/examples/portfolio-svelte",
- "command": "npm init astro -- --template portfolio-svelte"
- },
- {
- "name": "Minimal",
- "description": "A minimal theme, with just the bare minimum needed to get started.",
- "github": "https://github.com/withastro/astro/tree/main/examples/minimal",
- "demo": null,
- "sandbox": "https://github.dev/withastro/astro/tree/main/examples/minimal",
- "command": "npm init astro -- --template minimal"
- }
- ],
- "community": [
- {
- "name": "Accessible Astro Starter",
- "description": "A starter project with accessible features using Astro static site builder.",
- "github": "https://github.com/markteekman/accessible-astro-starter",
- "demo": "https://accessible-astro.markteekman.nl/",
- "sandbox": "https://github.dev/markteekman/accessible-astro-starter",
- "command": "npm init astro -- --template markteekman/accessible-astro-starter"
- },
- {
- "name": "Astro Theme Creek",
- "description": "Creek is an open source blog theme for Astro SSG.",
- "github": "https://github.com/robertguss/Astro-Theme-Creek",
- "demo": "https://astro-theme-creek.netlify.app/",
- "sandbox": "https://github.dev/robertguss/Astro-Theme-Creek",
- "command": "npm init astro -- --template robertguss/Astro-Theme-Creek"
- }
- ]
-}
diff --git a/docs/src/layouts/MainLayout.astro b/docs/src/layouts/MainLayout.astro
deleted file mode 100644
index b439b139f..000000000
--- a/docs/src/layouts/MainLayout.astro
+++ /dev/null
@@ -1,126 +0,0 @@
----
-import HeadCommon from '../components/HeadCommon.astro';
-import HeadSEO from '../components/HeadSEO.astro';
-import Header from '../components/Header/Header.astro';
-import Footer from '../components/Footer/Footer.astro';
-import PageContent from '../components/PageContent/PageContent.astro';
-import LeftSidebar from '../components/LeftSidebar/LeftSidebar.astro';
-import RightSidebar from '../components/RightSidebar/RightSidebar.astro';
-import { SITE } from '../config.ts';
-
-const { content = {}, hideRightSidebar = false } = Astro.props;
-const currentPage = Astro.request.url.pathname;
-const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
-const githubEditUrl = `https://github.com/withastro/astro/blob/main/docs/${currentFile}`;
-const formatTitle = (content, SITE) =>
- content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title;
----
-
-
-
- {formatTitle(content, SITE)}
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/src/layouts/SplashLayout.astro b/docs/src/layouts/SplashLayout.astro
deleted file mode 100644
index 7e4ea55b6..000000000
--- a/docs/src/layouts/SplashLayout.astro
+++ /dev/null
@@ -1,48 +0,0 @@
----
-import HeadCommon from '../components/HeadCommon.astro';
-import Header from '../components/Header/Header.astro';
-import { SITE } from '../config.ts';
-
-const { title } = Astro.props;
----
-
-
-
- {`${title} 🚀 ${SITE.title}`}
-
-
-
-
-
-
-
-
-
-
-
diff --git a/docs/src/pages/404.astro b/docs/src/pages/404.astro
deleted file mode 100644
index 8a0bfbb5b..000000000
--- a/docs/src/pages/404.astro
+++ /dev/null
@@ -1,9 +0,0 @@
----
-import SplashLayout from '../layouts/SplashLayout.astro';
----
-
-
- 404
- This page isn't in our solar system.
- Take me home.
-
diff --git a/docs/src/pages/[...slug].astro b/docs/src/pages/[...slug].astro
deleted file mode 100644
index 613e2b3d5..000000000
--- a/docs/src/pages/[...slug].astro
+++ /dev/null
@@ -1,19 +0,0 @@
----
-export async function getStaticPaths() {
- // get english pages that moved from `/` to `/en/`
- const englishPages = Astro.fetchContent('./en/**/*.md');
-
- // add pages that are `*.astro` files as well
- const otherPages = [{ url: "/en/themes" }];
- return [...englishPages, ...otherPages].map((page) => ({
- params: {
- slug: page.url.slice(4),
- },
- props: {
- englishSlug: page.url,
- }
- }));
-}
----
-
-npm init astro متبوعًا بـ
-`--template`. الإشارة `--template` أيضًا تدعم الامثلة الخارجية التي يصنعها المجتمع
-
-```bash
-# أمر تهيئة أحد القوالب الرسمية التي يوفرها استرو
-npm init astro -- --template [OFFICIAL_EXAMPLE_NAME]
-# أمر تهيئة القوالب الخارجية التي يوفرها المُجتمع
-npm init astro -- --template [GITHUB_USER]/[REPO_NAME]
-npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
-```
-
-### جربه على المُتصفح
-
-إن كنت مهتمًا وتريد اللعب وتجربة Astro على المتصفح، بمقدورك استخدام online code playground، جرب قالب مشروعنا "Hello World" على [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3).
-
-_ملحوظة: بعض المُميزات مُقتصرة على CodeSandbx (مثلاً: التحديث السريع "Fast Refresh") حاليًا._
-
-## تعلمُ Astro
-
-يأتي العديد الأشخاص من خلفياتِ تعلم مُختلفة إلى Astro، أيًا كانت طريقة التعليم التي تفضلها سواءً أكنت تفضل الطريقة النظرية أو الطريقة العملية، نتمنى أن تجد هذا القسم مفيدًا.
-
-- إن كُنت تُفضل **التعلم من خلال التجربة العملية**، أبدأ من خلال [مكتبتنا للأمثلة](https://github.com/withastro/astro/tree/main/examples).
-- إن كُنت تُفضل **التعلم من خلال الفهم خطوةً بخطوة**، أبدأ من خلال [دليل المفاهيم الأساسية والإرشادات](/core-concepts/project-structure).
-
-مثل أي تقنيةٍ ليست بمألوفة، Astro يأتيك بمنحنى تعليمي مختلف بعض الشيء، ولكن على أي حال، مع بعض الصبر والممارسة، نحن متأكدون بأنك _ستتأقلم معه_ في وقتٍ هين دون أن تشعر.
-
-### تعلمُ تركيب .astro النحوي (syntax)
-
-مع بدأ تعلمك لـAstro ستلاحظ العديد من الملفات التي تنتهي بصيغة .astro هي ملفات مكتوبة بـ Astro’s Component Syntax والتي تعد: طريقة كتابة مشابهة جدًا لملفات HTML يستخدمها Astro في القوالب.
-صممت هذه الصيغة لتكون قريبة ومشابهة للـ HTML و JSX، إن كنت تعرف أحدهما فستتأقلم مع .astro بسهولة.
-
-تفقد دليلنا المساعد [مكونات Astro](/core-concepts/astro-components) سيكون مدخل يساعدك على تعلم Astro syntax، ويعد أفضل طريقة للتعلم.
-
-### مرجع للـAPI
-
-يُفيدك هذا الجزء من التوثيق حينما تريد الإطلاع أكثر بشأن تفاصيل Astro API. على سبيل المثال، يتضمن [مرجع الإعداد](/reference/configuration-reference) قائمة لكل الإعدادات الممكنة المتاحة لكي تستخدمها. [المكونات المصممة مسبقًا](/reference/builtin-components) تتضمن قائمة بكل العناصر الرئيسية مثل ` .
-
-### إصدارات التوثيق
-
-هذا التوثيق يُسلط الضوء دومًا على أخر إصدار مستقر من Astro، وريثما نصل إلى إصدار 1.0 الرئيسي سنقوم بإضافة القابلية لتصفح اللإصدارات المختلفة من التوثيق.
-
-## أبقى مُطلعًا
-
-حساب [@astrodotbuild](https://twitter.com/astrodotbuild) على تويتر هو المصدر الرسمي لأخر المُستجدات من فريق Astro.
-
-ونحن أيضًا نُعد نشرة إصدارات ونعلن عنها في [مُجتمعنا على ديسكورد](https://astro.build/chat) على قناة #announcements
-
-ليست كل إصدارات Astro تملك تدوينة نشرةٍ خاصة بها، لكن ستجد سجلًا للتغيرات في ملف [`CHANGELOG.md` في مستودع Astro](https://github.com/withastro/astro/blob/main/packages/astro/CHANGELOG.md).
-
-## شيءٌ ما ناقص؟
-
-إن كان هناك شيءُ ما غير مُوثق أو لو كنت تشعر بالحيرة والإرتباك من جزءٍ معين في التوثيق، لا تتردد في [رفع طلب خطبٌ ما في ملف التوثيق](https://github.com/withastro/astro/issues/new/choose)، مع اقتراحك للتحسين، أو قم بتغريد تغريدةٍ إلى حسابنا على تويتر [@astrodotbuild](https://twitter.com/astrodotbuild)، نحب سماع آرائك!
-
-## التَقدِير
-
-دليل باشر بالبدأ معتمدٌ على دليل البدأ الخاص بـ[React](https://ar.reactjs.org/).
diff --git a/docs/src/pages/bg/getting-started.md b/docs/src/pages/bg/getting-started.md
deleted file mode 100644
index 31f6143c0..000000000
--- a/docs/src/pages/bg/getting-started.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Започваме!
----
-
-Astro е модерен builder за статични сайтове. Научете всичко за Astro от [нашата начална страница](https://astro.build/) или от [release поста](https://astro.build/blog/introducing-astro). Тази страница е оглед на документацията на Astro и всички свързани ресурси.
-
-## Пробвайте Astro
-
-Най-лесният начин да пробвате Astro е да изпълните `npm init astro` в нова локална директория. Нашият CLI Wizard ще Ви помогне да започнете нов Astro проект.
-
-За да започнете с Astro в 5 бързи и лесни стъпки, посетете нашия [Гид за бърз старт](quick-start).
-
-Алтернативно, можете да прочетете нашия [Инсталационен гид](/installation) за всичко относно настройката на Astro.
-
-### Онлайн площадки (playgrounds)
-
-Ако искате да си експериментирате с Astro в браузъра, можете да използвате онлайн площадка за код. Пробвайте нашия "Hello World!" темплейт на [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3).
-
-_Бележка: някои функционалности (например: Fast Refresh) са лимитирани на CodeSandbox засега._
-
-## Научете Astro
-
-Всякакви видове хора с различни методи за обучение се ориентират към Astro. Независимо дали предпочитате по-теоретичен, или по-практически подход, ние се надяваме че ще намерите тази секция за полезна.
-
-- Ако предпочитате да **учите чрез практика**, започнете с нашата [библиотека с примери](https://github.com/withastro/astro/tree/main/examples).
-- Ако предпочитате да **учите концепции стъпка по стъпка**, започнете с нашите [базови концепции и гидове](/core-concepts/project-structure).
-
-Като всяка непозната технология, Astro изисква известно време, за да се научи. Но с практика и малко търпение, ние сме сигурни, че _ще го схванете_ за нула време.
-
-### Научете `.astro` синтаксис
-
-Когато започнете да учите Astro, ще видите много файлове с разширение `.astro`. Това е **Компонентният синтаксис на Astro** -
-специален файлов формат наподобяващ HTML, който Astro използва за изграждане на страници (templating). Направен е, така че да е познат на всеки с HTML или JSX опит.
-
-Нашият помощен гид за [Astro компонентите](/core-concepts/astro-components) Ви запознава със синтаксисът на Astro и е най-добрият начин да се научите.
-
-### API Справка
-
-Тази секция е полезна, когато искате да научите повече детайли относно даден Astro API. Например - [Конфигурационната справка](/reference/configuration-reference) изброява всички възможни конфигурационни опции. [Справката за вградени компоненти](/reference/builtin-components) изброява всички възможни базови (core) компоненти, като `
- 404
- Diese Seite befindet sich nicht in unserem Sonnensystem.
- Bring mich nach Hause.
-
diff --git a/docs/src/pages/de/comparing-astro-vs-other-tools.md b/docs/src/pages/de/comparing-astro-vs-other-tools.md
deleted file mode 100644
index 7462ced85..000000000
--- a/docs/src/pages/de/comparing-astro-vs-other-tools.md
+++ /dev/null
@@ -1,233 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Vergleiche Astro
-description: Vergleiche Astro mit anderen statischen Site-Renderern wie Gatsby, Next.js, Nuxt, Hugo, Eleventy und weiteren.
----
-
-Wir werden oft gefragt, "Wie verhält sich Astro im Vergleich zu meinem bevorzugten Site-Renderer **\_\_\_\_**?" Diese Anleitung wurde verfasst, um diese Frage für verschiedene populäre Site-Renderer und Astro-Alternativen zu beantworten.
-
-Falls dein bevorzugter Site-Renderer hier nicht aufgeführt ist, [frag uns danach in Discord](https://astro.build/chat).
-
-## Projektstatus
-
-Eine kurze Anmerkung zum Entwicklungsstand des Projektes: **Astro ist noch im Beta-Stadium.** Viele der Werkzeuge, die hier aufgeführt werden, sind sehr viel weiter fortgeschritten. Einige sind mehr als zwölf Jahre älter als Astro!
-
-Einige Features sind noch nicht verfügbar und Teile der API noch nicht vollständig. Wie auch immer, das Projekt wird bezüglich seiner Fehleranfälligkeit als stabil angesehen und verschiedene Websites wurden schon für den produktiven Einsatz mit Astro umgesetzt. Dies ist ein wichtiger Punkt, wenn es um eine Entscheidung in Bezug auf den Einsatz von Astro geht.
-
-## Docusaurus vs. Astro
-
-[Docusaurus](https://docusaurus.io/) ist ein populärer Dokumentationssite-Renderer. Docusaurus verwendet React, um deine Website-UI zu generieren, während Astro in diesem Bereich React, Preact, Vue, Svelte, Solid und andere unterstützt - sowie auch eine an HTML angelehnte Komponenten-Syntax, die sich ähnlich verhält wie HTML + JSX.
-
-Docusaurus wurde entwickelt, um Dokumentationswebsites zu erzeugen und bietet einige dokumentationsspezifische Features, über die Astro nicht verfügt. Stattdessen kannst du in Astro auf dokumentationsspezifische Features mittels einer offiziellen [`docs`](https://github.com/withastro/astro/tree/main/examples/docs)-Vorlage zugreifen, die du für deine Site verwenden kannst. Diese Dokumentationswebsite wurde unter Verwendung dieser Vorlage erstellt!
-
-### Leistungsvergleich Docusaurus vs. Astro
-
-In den meisten Fällen werden Astro-Websites deutlich schneller laden als Docusaurus-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
-
-Docusaurus unterstützt Partial Hydration nicht. Stattdessen wird die gesamte Seite im Browser mit JavaScript angereichert, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und insgesamt schlechterer Leistung deiner Website. Es gibt keine Möglichkeit dieses Verhalten in Docusaurus abzuschalten.
-
-### Fallstudie: Kompilieren einer Dokumentationswebsite
-
-[docusaurus.io/docs](https://docusaurus.io/docs) ist die offizielle Docusaurus-Dokumentationswebsite - kompiliert mit Docusaurus. Die Website bietet ein ausreichend ähnliches Design und ausreichend ähnliche Funktionalität, um sie mit der offiziellen Astro-Dokumentationswebsite zu vergleichen. Dies ermöglicht uns einen **_grob realistischen_** Vergleich zwischen beiden Site-Renderern.
-
-- **Docusaurus Leistungswert**: 61 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocusaurus.io%2Fdocs)
-- **Astro Leistungswert**: 99 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Ein wesentlicher Grund für diesen Leistungsunterschied liegt in Astros geringerer JavaScript-Last: [docusaurus.io/docs](https://docusaurus.io/docs) lädt **238kB** JavaScript mit dem ersten Seitenaufruf während [docs.astro.build](https://docs.astro.build) **78.7kB** (67% weniger JavaScript insgesamt) _nach_ dem ersten Seitenaufruf lädt.
-
-## Elder.js vs. Astro
-
-[Elder.js](https://elderguide.com/tech/elderjs/) ist ein Site-Renderer für Svelte mit stark ausgeprägten eigenen Vorstellungen.
-
-Elder.js verwendet Svelte, um deine Website zu rendern. Astro ist hierin flexibler: Du kannst frei entscheiden mit welcher UI-Komponenten-Bibliothek du deine Oberfläche erzeugen willst (React, Preact, Vue, Svelte, Solid und andere), oder du verwendest die an HTML angelehnte Komponenten-Syntax von Astro, die sich ähnlich verhält wie HTML + JSX.
-
-Elder.js hat eine besondere Stellung in dieser Auflistung, da es neben Astro der einzige Site-Renderer ist, der [Partial Hydration](/de/core-concepts/component-hydration) unterstützt. Sowohl Astro als auch Elder.js vermeiden automatisch unnötiges JavaScript auf der Seite und reichern nur die Komponenten damit an, die dies benötigen. Elders API für Partial Hydration unterscheidet sich etwas von der, die Astro verwendet. Und Astro unterstützt einige Features, über die Elder.js nicht verfügt (wie z. B. `client:media`). Wie auch immer, beide Werkzeuge erzeugen bezüglich der Leistung betrachtet sehr ähnliche Sites.
-
-Elder.js verwendet eine spezifische Routing-Lösung, die für neue Entwickler ungewohnt erscheinen kann. Astro verwendet [dateibasiertes Routing](/de/core-concepts/routing), das sich für alle vertraut anfühlen sollte, die Erfahrung mit Next.js, SvelteKit oder auch anderen Site-Renderern wie Eleventy haben.
-
-Elder.js wurde entwickelt, um große Websites zu erzeugen - und behauptet, es könne eine Website mit ca 20.000 Seiten in weniger als 10 Minuten rendern (auf einer durchschnittlichen VM). Zum Zeitpunkt der Erstellung dieses Textes rendert Astro ca 1.000 Seiten in 66 Sekunden, aber wurde noch nicht mit Projekten im Umfang von 20.000 Seiten getestet. Astro ist noch in einem frühen Beta-Stadium, und Elder.js Render-Geschwindigkeit zu erreichen ist ein Ziel für Astro v1.0.
-
-Elder.js unterstützt sowohl statische Site-Generierung (SSG) als auch Server-seitiges Rendering (SSR). Zum jetzigen Zeitpunkt unterstützt Astro nur statische Site-Generierung (SSG).
-
-## Eleventy vs. Astro
-
-[Eleventy](https://www.11ty.dev/) ist ein beliebter statischer Site-Renderer auf der Grundlage von Node.js.
-
-Eleventy verwendet verschiedene [ältere Sprachen für HTML-Templates](https://www.11ty.dev/docs/languages/), um deine Website zu rendern: Nunjucks, Liquid, Pug, EJS und andere. Astro erlaubt dir deine Websites mit deiner bevorzugten UI-Komponenten-Bibliothek (React, Preact, Vue, Svelte und andere) zu erzeugen, oder du verwendest die an HTML angelehnte Komponenten-Syntax von Astro, die sich ähnlich verhält wie HTML + JSX. Eleventy unterstützt keine modernen UI-Bibliotheken für die Erstellung von HTML-Templates.
-
-### Leistungsvergleich Eleventy vs. Astro
-
-Konzeptuell ist Eleventy auf Augenhöhe mit Astros "minimalistischem Einsatz von Client-seitigem JavaScript" bei der Web-Entwicklung. Eleventy und Astro bieten somit eine ähnliche Leistungsgrundlage durch ihre jeweilige Null-JavaScript-Strategie.
-
-Eleventy erreicht dies, indem es dich dazu anhält JavaScript gänzlich zu vermeiden. Eleventy-Sites werden oft mit sehr wenig bis hin zu gar keinem JavaScript geschrieben. Dies wird allerdings dann zum Thema, wenn du tatsächlich Client-seitig JavaScript einsetzen musst. Es bleibt dann dir überlassen eine entsprechende Build-Pipeline für deine Skripte und weitere Elemente aufzubauen. Dies kann sich sehr zeitaufwendig gestalten, und es zwingt dich das Packen der Anwendung, sowie Minifizierung und weitere komplizierte Optimierungen von Hand aufzusetzen.
-
-Im Gegensatz dazu kompiliert Astro automatisch dein Client-seitiges JavaScript & CSS für dich. Astro entfernt automatisch unnötiges JavaScript von der Seite und reichert nur die individuellen Komponenten damit an, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Eleventy von Hand einzurichten, steht es dir in Astro bereits von vornherein zur Verfügung.
-
-## Gatsby vs. Astro
-
-[Gatsby](https://www.gatsbyjs.com/) ist eine beliebte Website- und Anwendungsbibliothek für React.
-
-Gatsby verwendet React, um deine Website zu rendern. Astro ist hierin flexibler: Du kannst frei entscheiden mit welcher UI-Komponenten-Bibliothek du deine Oberfläche erzeugen willst (React, Preact, Vue, Svelte, Solid und andere), oder du verwendest die an HTML angelehnte Komponenten-Syntax von Astro, die sich ähnlich verhält wie HTML + JSX.
-
-Gatsby v4 unterstützt statische Site-Generierung (Static Site Generation, SSG) mit inkrementellen Rebuilds sowie verzögerte statische Generierung (Deferred Static Generation, DSG), aber auch Server-seitiges Rendering (Server-Side Rendering, SSR). Zur Zeit unterstützt Astro nur statische Site-Generierung (SSG).
-
-Gatsby erfordert für deine gesamte Arbeit mit Site-Inhalten eine eigene GraphQL-API. Während einige Entwicklerinnen und Entwickler an diesem Modell Gefallen finden, besteht eine häufig geäußerte Kritik an Gatsby darin, dass dieses Modell auf Dauer zu komplex und schwer aufrechtzuerhalten ist, insbesondere wenn Sites sehr umfangreich werden. Für die Arbeit mit Astro ist GraphQL nicht erforderlich, stattdessen bietet es gewohnte API (wie `fetch()` und `await` auf oberster Ebene), um Daten nah bei ihrer Anwendung zu laden.
-
-### Leistungsvergleich Gatsby vs. Astro
-
-In den meisten Fällen werden Astro-Websites deutlich schneller laden als Gatsby-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
-
-Gatsby unterstützt Partial Hydration nicht und lässt stattdessen den Browser die gesamte Seite erneut laden und mit JavaScript anreichern, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und schlechterer Leistung für deine Website. Gatsby verfügt über ein [Community Plugin](https://www.gatsbyjs.com/plugins/gatsby-plugin-no-javascript/), das sämtliches JavaScript von einer Seite entfernt, doch dies führt auch dazu, dass viele Websites nicht mehr wie beabsichtigt funktionieren. In Bezug auf Interaktivität auf einzelnen Seiten ist entprechend nur eine Entscheidung zwischen ganz oder gar nicht möglich.
-
-Gatsby verfügt über ein großes Plugin-Ökosystem, was in Abhängigkeit von dem, was du benötigst, Gatsby zur besseren Wahl machen kann. [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) z. B. ist ein beliebtes Plugin für Bildoptimierungen, das Gatsby zur besseren Wahl für bilderlastige Websites machen könnte.
-
-### Fallstudie: Kompilieren einer Dokumentationswebsite
-
-[gatsbyjs.com/docs](https://www.gatsbyjs.com/docs/quick-start/) ist die offizielle Gatsby-Dokumentationswebsite - kompiliert mit Gatsby. Die Website bietet ein ausreichend ähnliches Design und ausreichend ähnliche Funktionalität, um sie mit der offiziellen Astro-Dokumentationswebsite zu vergleichen. Dies ermöglicht uns einen **_grob realistischen_** Vergleich zwischen beiden Site-Renderern.
-
-- **Gatsby Leistungswert**: 64 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fwww.gatsbyjs.com%2Fdocs%2Fquick-start%2F)
-- **Astro Leistungswert**: 99 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Ein wesentlicher Grund für diesen Leistungsunterschied liegt in Astros geringerer JavaScript-Last: [gatsbyjs.com/docs](https://www.gatsbyjs.com/docs/quick-start/) lädt **417kB** JavaScript mit dem ersten Seitenaufruf während [docs.astro.build](https://docs.astro.build) **78.7kB** (81% weniger JavaScript insgesamt) _nach_ dem ersten Seitenaufruf lädt.
-
-## Hugo vs. Astro
-
-[Hugo](https://gohugo.io/) ist ein beliebter statischer Site-Renderer auf der Grundlage von Go.
-
-Hugo verwendet eine eigene [Templating Language](https://gohugo.io/templates/introduction/), um deine Website zu rendern. Astro erlaubt dir deine Websites mit deiner bevorzugten UI-Komponenten-Bibliothek (React, Preact, Vue, Svelte, Solid und andere) zu erzeugen, oder du verwendest die an HTML angelehnte Komponenten-Syntax von Astro, die sich ähnlich verhält wie HTML + JSX. Hugo unterstützt keine modernen UI-Bibliotheken für die Erstellung von HTML-Templates.
-
-### Leistungsvergleich Hugo vs. Astro
-
-Konzeptuell ist Hugo auf Augenhöhe mit Astros "minimalistischem Einsatz von Client-seitigem JavaScript" bei der Web-Entwicklung. Hugo und Astro bieten somit eine ähnliche Leistungsgrundlage durch ihre jeweilige Null-JavaScript-Strategie.
-
-Sowohl Hugo als auch Astro bieten von vornherein Unterstützung beim Kompilieren, Packen und Minifizieren von JavaScript. Astro entfernt automatisch unnötiges JavaScript von der Seite und reichert nur die individuellen Komponenten damit an, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Hugo von Hand einzurichten, steht es dir in Astro ebenfalls bereits von vornherein zur Verfügung.
-
-## Jekyll vs. Astro
-
-[Jekyll](https://jekyllrb.com/) ist ein beliebter statischer Site-Renderer auf der Grundlage von Ruby.
-
-Jekyll verwendet eine ältere [Templating Language](https://jekyllrb.com/docs/liquid/) mit dem Namen Liquid, um deine Website zu rendern. Astro erlaubt dir deine Websites mit deiner bevorzugten UI-Komponenten-Bibliothek (React, Preact, Vue, Svelte, Solid und andere) zu erzeugen, oder du verwendest die an HTML angelehnte Komponenten-Syntax von Astro, die sich ähnlich verhält wie HTML + JSX. Jekyll unterstützt keine modernen UI-Bibliotheken für die Erstellung von HTML-Templates.
-
-### Leistungsvergleich Jekyll vs. Astro
-
-Konzeptuell ist Jekyll auf Augenhöhe mit Astros "minimalistischem Einsatz von Client-seitigem JavaScript" bei der Web-Entwicklung. Jekyll und Astro bieten somit eine ähnliche Leistungsgrundlage durch ihre jeweilige Null-JavaScript-Strategie.
-
-Jekyll erreicht dies, indem es dich dazu anhält JavaScript gänzlich zu vermeiden. Jekyll-Sites werden oft mit sehr wenig bis hin zu gar keinem JavaScript geschrieben. Dies wird allerdings dann zum Thema, wenn du tatsächlich Client-seitig JavaScript einsetzen musst. Es bleibt dann dir überlassen eine entsprechende Build-Pipeline für deine Skripte und weitere Elemente aufzubauen. Dies kann sich sehr zeitaufwendig gestalten, und es zwingt dich das Packen der Anwendung, sowie Minifizierung und weitere komplizierte Optimierungen von Hand aufzusetzen.
-
-Im Gegensatz dazu kompiliert Astro automatisch dein Client-seitiges JavaScript für dich. Astro sendet nur die minimal notwendige Menge an JavaScript an den Browser, minifiziert, gepackt und optimiert für die Veröffentlichung. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Jekyll von Hand einzurichten, steht es dir in Astro bereits von vornherein zur Verfügung.
-
-## SvelteKit vs. Astro
-
-[SvelteKit](https://kit.svelte.dev/) ist eine beliebte Website- und Anwendungsbibliothek für Svelte.
-
-SvelteKit verwendet Svelte, um deine Website zu rendern. Astro ist hierin flexibler: Du kannst frei entscheiden mit welcher UI-Komponenten-Bibliothek du deine Oberfläche erzeugen willst (React, Preact, Vue, Svelte, Solid und andere), oder du verwendest die an HTML angelehnte Komponenten-Syntax von Astro, die sich ähnlich verhält wie HTML + JSX.
-
-Sowohl SvelteKit als auch Astro sind Bibliotheken für die Erzeugung von Websites. SvelteKit funktioniert am besten mit hochdynamischen Websites (wie Dashboards und Nachrichteneingängen), während Astro am besten mit größtenteils statischen Websites funktioniert (wie Content- und E-Commerce-Websites).
-
-SvelteKit unterstützt sowohl statische Site-Generierung (Static Site Generation, SSG) als auch Server-seitiges Rendering (Server-Side Rendering, SSR). Zur Zeit unterstützt Astro nur statische Site-Generierung (SSG).
-
-### Leistungsvergleich SvelteKit vs. Astro
-
-In den meisten Fällen werden Astro-Websites schneller laden als SvelteKit-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
-
-SvelteKit unterstützt Partial Hydration nicht und lässt stattdessen den Browser die gesamte Seite erneut laden und mit JavaScript anreichern, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und schlechterer Leistung für deine Website. SvelteKit unterstützt mit [Page-Level Static und Zero-JavaScript Pages](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate) das Entfernen von JavaScript per Seite oder für die gesamte Anwendung. Wie auch immer, eine Unterstützung für die Anreicherung individueller Komponenten einer Seite ist nicht geplant. In Bezug auf Interaktivität auf einzelnen Seiten ist entprechend nur eine Entscheidung zwischen ganz oder gar nicht möglich.
-
-### Fallstudie: Kompilieren einer Dokumentationswebsite
-
-[kit.svelte.dev](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate) ist die offizielle SvelteKit-Dokumentationswebsite - kompiliert mit SvelteKit. Die Website bietet ein ausreichend ähnliches Design und ausreichend ähnliche Funktionalität, um sie mit der offiziellen Astro-Dokumentationswebsite zu vergleichen. Dies ermöglicht uns einen **_grob realistischen_** Vergleich zwischen beiden Site-Renderern.
-
-Ein wichtiger zu beachtender Unterschied zwischen beiden Sites im Test: SveltKits Dokumentation wird als einzelne Seite ausgeliefert, während Astros Dokumentation in einzelne Seiten geteilt ausgeliefert wird. Diese höhere Content-Last dürfte einen leicht negativen Einfluss auf die Leistung haben und ist nicht auf das Werkzeug an sich zurückzuführen.
-
-- **SvelteKit Leistungswert**: 92 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fkit.svelte.dev%2Fdocs)
-- **Astro Leistungswert**: 99 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Der Leistungswert von SvelteKit in diesem Test ist vergleichbar mit dem von Astro.
-
-## Next.js vs. Astro
-
-[Next.js](https://nextjs.org/) ist eine beliebte Website- und Anwendungsbibliothek für React.
-
-Next.js verwendet React, um deine Website zu rendern. Astro ist hierin flexibler: Du kannst frei entscheiden mit welcher UI-Komponenten-Bibliothek du deine Oberfläche erzeugen willst (React, Preact, Vue, Svelte, Solid und andere), oder du verwendest die an HTML angelehnte Komponenten-Syntax von Astro, die sich ähnlich verhält wie HTML + JSX.
-
-Sowohl Next.js als auch Astro sind Bibliotheken für die Erzeugung von Websites. Next.js funktioniert am besten mit hochdynamischen Websites (wie Dashboards und Nachrichteneingängen), während Astro am besten mit größtenteils statischen Websites funktioniert (wie Content- und E-Commerce-Websites).
-
-Next.js unterstützt sowohl statische Site-Generierung (Static Site Generation, SSG) als auch Server-seitiges Rendering (Server-Side Rendering, SSR). Zur Zeit unterstützt Astro nur statische Site-Generierung (SSG).
-
-### Leistungsvergleich Next.js vs. Astro
-
-In den meisten Fällen werden Astro-Websites deutlich schneller laden als Next.js-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
-
-Next.js unterstützt Partial Hydration nicht und lässt stattdessen den Browser die gesamte Seite erneut laden und mit JavaScript anreichern, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und schlechterer Leistung für deine Website. Next.js verfügt über [Experimental Support](https://piccalil.li/blog/new-year-new-website/#heading-no-client-side-react-code) für vollständig statische, Null-JavaScript-Seiten. Wie auch immer, eine Unterstützung für die Anreicherung individueller Komponenten einer Seite ist nicht geplant. In Bezug auf Interaktivität auf einzelnen Seiten ist entprechend nur eine Entscheidung zwischen ganz oder gar nicht möglich.
-
-Next.js verfügt über sehr gute integrierte Bildoptimierungen, was Next.js zur besseren Wahl für bilderlastige Websites machen könnte.
-
-### Fallstudie: Kompilieren einer Dokumentationswebsite
-
-[nextjs.org/docs](https://nextjs.org/docs/getting-started) ist die offizielle Next.js-Dokumentationswebsite - kompiliert mit Next.js. Die Website bietet ein ausreichend ähnliches Design und ausreichend ähnliche Funktionalität, um sie mit der offiziellen Astro-Dokumentationswebsite zu vergleichen. Dies ermöglicht uns einen **_grob realistischen_** Vergleich zwischen beiden Site-Renderern.
-
-- **Next.js Leistungswert**: 59 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnextjs.org%2Fdocs%2Fgetting-started)
-- **Astro Leistungswert**: 99 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Ein wesentlicher Grund für diesen Leistungsunterschied liegt in Astros geringerer JavaScript-Last: [nextjs.org/docs](https://nextjs.org/docs/getting-started) lädt **463kB** JavaScript mit dem ersten Seitenaufruf, während [docs.astro.build](https://docs.astro.build) **78.7kB** (83% weniger JavaScript insgesamt) _nach_ dem ersten Seitenaufruf lädt.
-
-## Nuxt vs. Astro
-
-[Nuxt](https://nuxtjs.org/) ist eine beliebte Website- und Anwendungsbibliothek für Vue. Es ist ähnlich aufgebaut wie Next.js.
-
-Nuxt verwendet Vue, um deine Website zu rendern. Astro ist hierin flexibler: Du kannst frei entscheiden mit welcher UI-Komponenten-Bibliothek du deine Oberfläche erzeugen willst (React, Preact, Vue, Svelte, Solid und andere), oder du verwendest die an HTML angelehnte Komponenten-Syntax von Astro, die sich ähnlich verhält wie HTML + JSX.
-
-Sowohl Nuxt als auch Astro sind Bibliotheken für die Erzeugung von Websites. Nuxt funktioniert am besten mit hochdynamischen Websites (wie Dashboards und Nachrichteneingängen), während Astro am besten mit größtenteils statischen Websites funktioniert (wie Content- und E-Commerce-Websites).
-
-Nuxt unterstützt sowohl statische Site-Generierung (Static Site Generation, SSG) als auch Server-seitiges Rendering (Server-Side Rendering, SSR). Zur Zeit unterstützt Astro nur statische Site-Generierung (SSG).
-
-### Leistungsvergleich Nuxt vs. Astro
-
-In den meisten Fällen werden Astro-Websites deutlich schneller laden als Nuxt-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
-
-Nuxt unterstützt Partial Hydration nicht und lässt stattdessen den Browser die gesamte Seite erneut laden und mit JavaScript anreichern, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und schlechterer Leistung für deine Website. Es besteht keine Möglichkeit dieses Verhalten abzuschalten.
-
-Nuxt verfügt über sehr gute integrierte Bildoptimierungen, was Nuxt zur besseren Wahl für bilderlastige Websites machen könnte.
-
-### Fallstudie: Kompilieren einer Dokumentationswebsite
-
-[nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation) ist die offizielle Nuxt-Dokumentationswebsite - kompiliert mit Nuxt. Die Website bietet ein ausreichend ähnliches Design und ausreichend ähnliche Funktionalität, um sie mit der offiziellen Astro-Dokumentationswebsite zu vergleichen. Dies ermöglicht uns einen **_grob realistischen_** Vergleich zwischen beiden Site-Renderern.
-
-- **Nuxt Leistungswert**: 48 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnuxtjs.org%2Fdocs%2F2.x%2Fget-started%2Finstallation)
-- **Astro Leistungswert**: 99 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Ein wesentlicher Grund für diesen Leistungsunterschied liegt in Astros geringerer JavaScript-Last: [nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation) lädt **469kb** JavaScript mit dem ersten Seitenaufruf, während [docs.astro.build](https://docs.astro.build) **78.7kB** (83% weniger JavaScript insgesamt) _nach_ dem ersten Seitenaufruf lädt.
-
-## VuePress vs. Astro
-
-[VuePress](https://vuepress.vuejs.org/guide/) ist ein populärer Dokumentationssite-Renderer auf der Grundlage von Vue. VuePress verwendet Vue, um deine Website-UI zu generieren, während Astro in diesem Bereich React, Preact, Vue, Svelte, Solid und andere unterstützt - sowie auch eine an HTML angelehnte Komponenten-Syntax, die sich ähnlich verhält wie HTML + JSX.
-
-VuePress wurde entwickelt, um Dokumentationswebsites zu erzeugen und bietet einige dokumentationsspezifische Features, über die Astro nicht verfügt. Stattdessen verfügst du in Astro über dokumentationsspezifische Features mittels einer offiziellen [`docs`](https://github.com/withastro/astro/tree/main/examples/docs)-Vorlage, die du für deine Site verwenden kannst. Diese Website wurde unter Verwendung dieser Vorlage erstellt!
-
-Evan You (Erfinder von Vue) arbeitet zur Zeit an einer neuen Version von VuePress, genannt [VitePress](https://vitepress.vuejs.org/). Wenn du eine moderne Alternative zu VuePress suchst, [lies Evans Post](https://github.com/withastro/astro/issues/1159#issue-974035962) darüber, warum VitePress hierfür eine bessere Option darstellen kann.
-
-### Leistungsvergleich VuePress vs. Astro
-
-In den meisten Fällen werden Astro-Websites deutlich schneller laden als VuePress-Websites. Dies liegt vor allem daran, dass Astro unnötiges JavaScript vermeidet und nur diejenigen Komponenten einer Seite mit JavaScript anreichert, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt.
-
-VuePress unterstützt Partial Hydration nicht und lässt stattdessen den Browser die gesamte Seite erneut laden und mit JavaScript anreichern, selbst wenn der größte Teil der Seite statisch ist. Dies führt zu längeren Ladezeiten und schlechterer Leistung für deine Website. Es besteht keine Möglichkeit dieses Verhalten abzuschalten.
-
-### Fallstudie: Kompilieren einer Dokumentationswebsite
-
-[vuepress.vuejs.org](https://vuepress.vuejs.org/guide/) ist die offizielle VuePress-Dokumentationswebsite - kompiliert mit VuePress. Die Website bietet ein ausreichend ähnliches Design und ausreichend ähnliche Funktionalität, um sie mit der offiziellen Astro-Dokumentationswebsite zu vergleichen. Dies ermöglicht uns einen **_grob realistischen_** Vergleich zwischen beiden Site-Renderern.
-
-- **Vuepress Leistungswert**: 63 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fvuepress.vuejs.org%2Fguide%2F)
-- **Astro Leistungswert**: 99 von 100 [(vollständige Prüfung)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Ein wesentlicher Grund für diesen Leistungsunterschied liegt in Astros geringerer JavaScript-Last: [vuepress.vuejs.org](https://vuepress.vuejs.org/guide/) lädt **166kb** JavaScript mit dem ersten Seitenaufruf, während [docs.astro.build](https://docs.astro.build) **78.7kB** (53% weniger JavaScript insgesamt) _nach_ dem ersten Seitenaufruf lädt.
-
-## Zola vs. Astro
-
-[Zola](https://www.getzola.org/) ist ein beliebter statischer Site-Renderer auf der Grundlage von Rust.
-
-Zola verwendet [Tera](https://tera.netlify.app/), um deine Website zu rendern. Astro erlaubt dir deine Websites mit deiner bevorzugten UI-Komponenten-Bibliothek (React, Preact, Vue, Svelte, Solid und andere) zu erzeugen, oder du verwendest die an HTML angelehnte Komponenten-Syntax von Astro, die sich ähnlich verhält wie HTML + JSX. Zola unterstützt keine modernen UI-Bibliotheken für die Erstellung von HTML-Templates.
-
-### Leistungsvergleich Zola vs. Astro
-
-Konzeptuell ist Zola auf Augenhöhe mit Astros "minimalistischem Einsatz von Client-seitigem JavaScript" bei der Web-Entwicklung. Zola und Astro bieten somit eine ähnliche Leistungsgrundlage durch ihre jeweilige Null-JavaScript-Strategie.
-
-Sowohl Zola als auch Astro bieten Unterstützung beim Kompilieren, Packen und Minifizieren von JavaScript. Zola benötigt hierfür ein zusätzliches Werkzeug wie Webpack, um JavaScript zu packen und zu verarbeiten. Astro entfernt automatisch unnötiges JavaScript von der Seite und reichert nur die individuellen Komponenten damit an, die dies benötigen. Dieses Feature wird [Partial Hydration](/de/core-concepts/component-hydration) genannt. Während es dir natürlich möglich ist dieses Feature in Zola von Hand einzurichten, steht es dir in Astro bereits von vornherein zur Verfügung.
diff --git a/docs/src/pages/de/core-concepts/astro-components.md b/docs/src/pages/de/core-concepts/astro-components.md
deleted file mode 100644
index 18ce76789..000000000
--- a/docs/src/pages/de/core-concepts/astro-components.md
+++ /dev/null
@@ -1,386 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Astro-Komponenten
-description: Einführung in die .astro-Komponenten-Syntax.
----
-
-**Astro-Komponenten** (Dateien mit der Endung `.astro`) sind die Grundlage des Server-seitigen Templating in Astro. Du kannst dir die Astro-Komponenten-Syntax als HTML - erweitert um JavaScript - vorstellen.
-
-Eine neue Syntax kann zu Beginn einschüchternd wirken, daher haben wir bei der Entwicklung der Astro-Komponenten-Syntax besonders darauf geachtet, dass sie sich für Web-Entwickler so vertraut wie möglich anfühlt. Sie lehnt sich sehr stark an Modelle an, die du wahrscheinlich schon kennst: Komponenten, Frontmatter, Props und JSX-Ausdrücke. Wir sind zuversichtlich, dass du mit Hilfe dieser Anleitung in kürzester Zeit Astro-Komponenten schreiben wirst, besonders wenn du bereits mit HTML & JavaScript vertraut bist.
-
-## Syntax-Übersicht
-
-Eine einzelne `.astro`-Datei repräsentiert eine einzelne Astro-Komponente in deinem Projekt. Dieses Modell wird als **Single-File Component (SFC)** bezeichnet. Sowohl Svelte (`.svelte`) als auch Vue (`.vue`) folgen ebenfalls diesem Modell.
-
-Im Weiteren findest du eine eingehende Beschreibung der verschiedenen Elemente und Merkmale der Astro-Komponenten-Syntax. Du kannst sie von Anfang bis Ende durchlesen oder auch zwischen den Abschnitten springen.
-
-### HTML-Template
-
-Die Astro-Komponenten-Syntax ist eine Obermenge von HTML. **Wenn du HTML kennst, weißt du bereits genug, um deine erste Komponente zu schreiben.**
-
-Zum Beispiel ist diese dreizeilige Datei eine gültige Astro-Komponente:
-
-```html
-
-
-
Hallo Welt!
-
-```
-
-Eine Astro-Komponente repräsentiert einen Schnipsel HTML in deinem Projekt. Dies kann eine mehrfach verwendbare Komponente sein, oder eine vollständige Seite HTML einschließlich ``-, ``- und ``-Elementen. Lies auch unsere Anleitung zu [Astro-Seiten](/de/core-concepts/astro-pages), um zu lernen wie du deine erste vollständige HTML-Seite mit Astro erzeugen kannst.
-
-**Jede Astro-Komponente muss ein HTML-Template beinhalten.** Auch wenn du deine Komponente auf vielfältige Weise erweitern kannst (siehe unten), bestimmt am Ende des Tages doch das HTML-Template, wie deine gerenderte Komponente aussehen wird.
-
-### CSS-Styles
-
-CSS-Regeln innerhalb eines `
-
-```
-
-```html
-
-
-
-
-
-
- ...
-
-
-```
-
-Die Verwendung von `
-
-Ich bin ein Style im Scope der Komponente, und ich bin rot!
-
- Ich bin ein Style im Scope der Komponente, und ich bin kursiv!!
-
-```
-
-Beachte dass der `h1`-Selektor hier nicht über die Komponente hinaus wirksam wird! Die Styles werden nicht auf andere `h1`-Tags außerhalb dieses Dokuments angewandt - auch nicht in untergeordneten Komponenten.
-
-_Tipp: Auch wenn es möglich ist hier Element-Selektoren zu verwenden, sollten doch bevorzugt Klassen-Namen verwendet werden. Das ist nicht nur ein klein wenig performanter, es ist auch leichter zu lesen, insbesondere in einem umfangreichen Dokument._
-
-### Globale Styles
-
-Natürlich besteht die tatsächliche Macht von CSS darin, Styles so häufig wie möglich wiederzuverwenden! Die bevorzugte Methode um globale Styles einzubinden, ist die Verwendung eines `Seitentitel im Scope
-
-```
-
-_Beachte: `Astro.resolve()` ist ein nützliches Hilfsmittel, um Verweise auf Dateien von überall her aufzulösen ([docs][astro-resolve])_
-
-#### Styling untergeordneter Elemente
-
-Falls du Styles, die im Scope der Komponente gesetzt werden, auch auf untergeordnete Komponenten anwenden willst, kannst du auf die `:global()`-Funktion aus den [CSS-Modules][css-modules] zurückgreifen:
-
-```astro
-
----
-import PostContent from './Post.astro';
----
-
-
-Titel
-
-
-```
-
-Dies ist eine sehr gute Methode, um Dinge zu stylen wie Blogposts oder Dokumente, die mit Inhalten aus einem CMS außerhalb von Astro gefüttert werden. Aber Vorsicht, wenn untergeordnete Elemente frei von Abhängigkeiten gestaltet werden, bricht dies auch die Verkapselung der Komponente auf. Das Arbeiten mit Komponenten die unterschiedlich aussehen, abhängig davon ob sie ein bestimmtes übergeordnetes Element haben oder nicht, kann sehr schnell unübersichtlich werden.
-
-#### Globale Styles innerhalb eines `
-
-Globaler Style
-```
-
-Dasselbe kannst du erreichen, indem du einem Selektor die `:global()`-Funktion voranstellst:
-
-```html
-
-```
-
-Es wird empfohlen diese Methoden nur dort einzusetzen, wo ein `
-
-```
-
-_Beachte: Wir verwenden hier in sämtlichen Beispielen `lang="scss"`, welches das Verschachteln und Teilen von [Farben und Variablen][sass-use] stark vereinfacht. Dies ist jedoch gänzlich optional, und du kannst ebenso gut normales CSS verwenden._
-
-Die `.btn`-Klasse ist auf die Komponente begrenzt und wird nicht über das Dokument hinaus wirksam. Dies bedeutet, du kannst dich **auf das Styling und musst dich nicht auf die Benennung konzentrieren**. Dieser Ansatz, der das Lokale an den Anfang stellt, fügt sich sehr gut in das ESM-getriebene Design von Astro, das Einkapselung und Wiederverwendbarkeit über eine globale Wirksamkeit stellt. Auch wenn es sich um ein einfaches Beispiel handelt, sollte festgehalten werden, dass dies **extrem gut skaliert**. Und für den Fall, dass du gemeinsame Werte zwischen Komponenten teilen willst, empfehlen wir das [Sass-Modulsystem][sass-use], das sehr einfach zu verwenden ist und sich perfekt in ein Design einfügt, in dem die Komponente an den Anfang gestellt wird.
-
-Im Kontrast zu diesem Ansatz erlaubt Astro auch globale Styles mittels der `:global()` und `
-
-
- Menü
-
-```
-
-Dies ist allerdings nicht erstrebenswert, da nun `` und `` bei der endgültigen Gestaltung des Buttons konkurrieren. Sobald du jetzt den einen veränderst, musst du auch den anderen anpassen, und sie sind nicht mehr wirklich isoliert, so wie zuvor (sie sind nun verbunden in bidirektionaler Abhängigkeit). Es ist sehr leicht sich vorzustellen, dass dieses Modell nur ein paar mal wiederholt werden muss, bis die Befürchtung aufkommt, dass jede Veränderung von Styles _irgendwo_ das Styling in einem ganz anderem Teil der Anwendung kaputt macht.
-
-Stattdessen kannst du `` seine eigenen Styles kontrollieren lassen und es mit einer Prop versuchen:
-
-```astro
----
-// src/components/Button.astro
-const { theme } = Astro.props;
----
-
-
-
-
-```
-
-An anderer Stelle kannst du nun `` verwenden, um zu bestimmen, welche Art von Button es ist. Dies bewahrt den Vertrag, in dem steht, dass _Button sich um seine Styles kümmert und Nav sich um seine_. Und du kannst den einen bearbeiten ohne den anderen zu beeinflussen. Der schlimmstmögliche Fall bei der Verwendung globaler Styles ist, dass eine Komponente kaputt und nicht mehr nutzbar ist (ihr fehlen wesentliche Teile ihrer Styles). Aber der schlimmstmögliche Fall bei der Verwendung von Props (z. B. bei einem Tippfehler) ist, dass die Komponente zurückgesetzt wird auf ihren ursprünglichen, aber immer noch nutzbaren, Zustand.
-
-💁 **Warum dies mit Astro gut funktioniert**. Astro ist im Wesentlichen von JavaScript-Modulen inspiriert: Du musst zu jeder Zeit nur wissen, was sich in deiner Datei befindet, und du musst dir niemals Gedanken darüber machen, welches Element aus einer anderen Datei Einfluss darauf hat, wie der Code ausgeführt wird. Aber wir sind damit nicht allein; Vue und Svelte haben beide die Idee vorangetrieben und popularisiert, dass Markup und Styles in ein und derselben Komponenten-Datei gut zusammenpassen. [Du kannst verschiedene Belange immer noch gut voneinander trennen][peace-on-css], sogar wenn Markup, Styles und Logik in einer Datei enthalten sind. Und tatsächlich ist es genau das, was Komponeten-Design so mächtig macht! Du kannst also einfach CSS schreiben ohne fürchten zu müssen, dass du einen Namen verwendest, der bereits von einer anderen Komponente in der App verwendet wird.
-
-#### Utility-CSS
-
-Vor Kurzem gab es eine Debatte über die ausschließliche Verwendung von Komponenten-Styles im Scope vs. die ausschließliche Verwendung von Utility-CSS. Aber wir stimmen Leuten wie Sarah Dayan zu, die fragen, [warum können wir nicht beides haben][utility-css]? Tatsache ist doch, dass während es großartig ist, Styles im Scope der Komponente zu haben, es immer noch hunderte von Male vorkommt, dass wenn die Website vollständig zusammengesetzt ist, zwei Elemente nicht _gut_ zusammenspielen und eines von beiden einen kleinen Stupser braucht. Oder es wird vielleicht eine abweichende Behandlung eines Textes in einer Komponenten-Instanz benötigt.
-
-Zwar ist die Vorstellung von perfekten, makellosen Komponenten schön, aber sie ist auch unrealistisch. Kein Design-System ist absolut perfekt, und jedes Design-System zeigt auch Ungereimtheiten. Und es passiert bei dem Versuch diese Ungereimtheiten aufzulösen, dass Komponenten ohne Utility-CSS durcheinander geraten. Utility-CSS ist großartig darin kleinere Optimierungen hinzuzufügen, um die Website fertigzustellen und ausliefern zu können. Aber es ist an sich auch unvollständig auf ganz eigene Art - wenn du z. B. jemals versuchst responsive Styles oder Fokussierungen mit Utility-CSS zu verwalten, kann das schnell zu einem großen Durcheinander werden!
-**Utility-CSS funktioniert am besten in Partnerschaft mit Styles im Scope der Komponente**. Und um so leicht wie möglich anwendbar zu sein, sollte Utility-CSS global sein (und sollte möglicherweise auch das einzige globale CSS sein - vielleicht neben reset.css), so dass du nicht mit Importen arbeiten musst, die allesamt willkürlich sind.
-
-Einige größere Probleme, die am besten mit Utility-CSS gelöst werden, sind:
-
-- [margin](https://github.com/drwpow/sass-utils#-margin--padding)
-- [padding](https://github.com/drwpow/sass-utils#-margin--padding)
-- [text- und background-color](https://github.com/drwpow/sass-utils#-color)
-- [font-size und font-family](https://github.com/drwpow/sass-utils#%F0%9F%85%B0%EF%B8%8F-font--text)
-- [Standardelement-Styling](https://github.com/kognise/water.css)
-
-In Astro empfehlen wir folgendes Setup hierfür:
-
-```html
-
- ` (1), `` (2), und `` (3). Wir fügen sie wie folgt unserer Seite hinzu:
-
-```astro
----
-// src/pages/index.astro
-
-import Nav from '../components/Nav.astro';
-import RiesenPost from '../components/RiesenPost.astro';
-import Grid from '../components/Grid.astro';
-import HalbePosts from '../components/HalberPost.astro';
-import KleinePosts from '../components/KleinerPost.astro';
-import Footer from '../components/Footer.astro';
----
-
-
-
-
-
-
-
-
-```
-
-Das ist _anscheinend_ sauber voneinander getrennt, aber der Schein kann trügen. Auf den ersten Blick nehmen wir vielleicht an, dass `` das Layout kontrolliert, aber dieser Eindruck täuscht. Tatsächlich bestimmt `` seine Breite selbst, `` lädt zwei Komponenten und bestimmt die eigene Breite, und `` lädt vier oder mehr Komponenten und bestimmt seine eigene Breite. Insgesamt - `` eingeschlossen - streiten sich **vier Komponenten** um dasselbe Layout. Entferne einen Post von `` und das Layout zerbricht. Bearbeite ``, das Layout zerbricht. Bearbeite ``, das Layout zerbricht. Wenn du es dir genau überlegst, ist keine dieser Komponenten wirklich wiederverwendbar - sie könnten auch einfach in einer einzigen großen Datei stehen.
-
-Das ist tatsächlich das **Problem mit globalem CSS** in hübscher Verkleidung - mehrere Komponenten kämpfen darum, wie sie angeordnet werden, ohne dass es ein Layout in zentraler Verantwortung gibt (in der Art wie globales CSS)! Nun, da wir das Problem identifiziert haben, bestünde eine Möglichkeit es zu lösen darin, das gesamte Layout auf die oberste Ebene zu heben und dort ebenfalls alle Komponenten zu laden:
-
-```astro
----
-// src/pages/index.astro
-
-import Nav from '../components/Nav.astro';
-import RiesenPost from '../components/RiesenPost.astro';
-import HalbePosts from '../components/HalberPost.astro';
-import KleinePosts from '../components/KleinerPost.astro';
-import Footer from '../components/Footer.astro';
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-Wenn du dir das [CSS-Box-Model][box-model] vor Augen führst, dehnt sich darin `margin` stets über die Grenzen einer Box hinweg aus. Das bedeutet, wenn du `margin` auf das äußerste Element deiner Komponente anwendest, wird dies die Position angrenzender Komponenten beeinflussen. Selbst wenn die Styles im Scope der Komponete sind, betreffen sie _technisch_ auch Elemente um die Komponente herum - somit bricht dies mit dem [Konzept der Einschließung von Styles][layout-isolated].
-
-Wenn du Komponenten verwendest, die sich neu arrangieren oder anders dargestellt werden, sobald sie sich in der Nähe anderer Komponenten befinden, bedeutet dies einen Kampf, den du nur schwer gewinnen kannst. **Komponenten sollten sich identisch verhalten und aussehen, unabhängig davon wo sie platziert werden.** Das ist es, was sie zu Komponenten macht!
-
-💁 **Warum das in Astro gut funktioniert**: `margins` die andere Komponenten herumschubsen, unterwandern deine Styling-Architektur auf heimtückische Weise, und das kann zu wackeligen oder brüchigen Layout-Komponenten führen. Solche Dinge grundsätzlich zu vermeiden, erlaubt dir deine Layout-Komponenten einfach zu halten - und du wirst weniger Zeit mit Styling zubringen.
-
-#### Vorschlag #4: Vermeide globale Media-Queries
-
-Dieser letzte Punkt behandelt eine natürliche Beschränkung von **Styles im Scope**. Und diese bezieht sich auch auf Breakpoints! Du kennst diesen einen, seltsamen Breakpoint, bei dem deine `Hello, World!
-
-
-
-
-
-
-```
-
-Das Obige ist ein Beispiel für Astros Komponenten-Syntax, die sowohl HTML als auch JSX umfasst.
-
-Du kannst weitere Seiten im Verzeichnis `src/pages` erstellen - Astro verwendet den Dateinamen, um neue Seiten für deine Site zu erzeugen. Zum Beispiel wird Astro durch das Erzeugen einer neuen Datei unter `src/pages/about.astro` (auch unter Wiederverwendung des Code-Schnipsels) eine neue Seite unter der URL `http://localhost/about` generieren.
-
-## [Starte Astro](#start-astro)
-
-```bash
-npm run dev
-```
-
-Astro wird von nun an deine Anwendung unter `http://localhost:3000` bereitstellen. Wenn du diese URL in deinem Browser öffnest, solltest du Astros "Hello, World" sehen.
-
-Falls du deinen Entwicklungsfortschritt im lokalen Netzwerk teilen oder die Anwendung von einem Telefon aus testen möchtest, füge einfach die folgende [snowpack](https://www.snowpack.dev/reference/configuration#devoptionshostname)-Option in `astro.config.mjs` hinzu:
-
-```js
-devOptions: {
- hostname: '0.0.0.0';
-}
-```
-
-## [Kompiliere dein Projekt](#build-astro)
-
-Führe in deinem Projektverzeichnis den folgenden Befehl im Terminal aus:
-
-```bash
-npm run build
-```
-
-Dies weist Astro an deine Site zu erstellen und direkt zu speichern. Deine Anwendung steht nun im `dist/`-Verzeichnis bereit.
-
-## Nächste Schritte
-
-Geschafft! Du kannst jetzt mit dem Entwickeln beginnen!
-
-Wir möchten dich ermutigen, dir etwas Zeit zu nehmen, um mit der Art und Weise vertraut zu werden, wie Astro funktioniert. Am besten befasst du dich weitergehend mit der Dokumentation. Hier ein paar Empfehlungen:
-
-📚 Lerne mehr über die Projektstruktur in Astro in unserem [Artikel zur Projektstruktur](/de/core-concepts/project-structure)
-
-📚 Lerne mehr über die Komponenten-Syntax in Astro in unserem [Artikel zu Astro-Komponenten](/de/core-concepts/astro-components)
-
-📚 Lerne mehr über das dateibasierte Routing in Astro in unserem [Artikel zu Astro-Seiten](/de/core-concepts/astro-pages) und unserem [Artikel über Routing](/de/core-concepts/routing).
diff --git a/docs/src/pages/de/migration/0.21.0.md b/docs/src/pages/de/migration/0.21.0.md
deleted file mode 100644
index 3d8409ded..000000000
--- a/docs/src/pages/de/migration/0.21.0.md
+++ /dev/null
@@ -1,229 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Umstellung auf v0.21
-description: Projekte von Astro v0.20 umziehen.
----
-
-## Vite
-
-Beginnend mit v0.21 werden Astro-Builds mittels [Vite](https://vitejs.dev) kompiliert.
-Bedingt hierdurch sollten Konfigurationen, die in `snowpack.config.mjs` geschrieben wurden, nach `astro.config.mjs` transferiert werden.
-
-```js
-// @ts-check
-
-/** @type {import('astro').AstroUserConfig} */
-export default {
- renderers: [],
- vite: {
- plugins: [],
- },
-};
-```
-
-Um mehr über die Konfiguration von Vite zu erfahren, lies bitte den [Vite Configuration Guide](https://vitejs.dev/config).
-
-## Aliasierung
-
-In Astro v0.21 können Aliase in `tsconfig.json` oder `jsconfig.json` hinzugefügt werden, um sie bei der Verwendung von _import_ einzusetzen.
-
-```json
-{
- "compilerOptions": {
- "baseUrl": ".",
- "paths": {
- "@/components/*": ["components/*"]
- }
- }
-}
-```
-
-_Diese Aliase werden automatisch in die Konfiguration von [VSCode](https://code.visualstudio.com/docs/languages/jsconfig) und anderen Editoren übernommen._
-
-## Variablen in \
-```
-
-Or it can link to an external JavaScript file:
-
-```astro
-
-```
-
-A hoisted script can be within a page or a component, and no matter how many times the component is used, the script will only be added once:
-
-```astro
----
-import TwitterTimeline from '../components/TwitterTimeline.astro';
----
-
-<-- The script will only be injected into the head once. -->
-` | `` |
-| Expression Syntax | `{}` | `{}` |
-| Spread Attributes | `{...props}` | `{...props}` |
-| Boolean Attributes | `autocomplete` === `autocomplete={true}` | `autocomplete` === `autocomplete={true}` |
-| Inline Functions | `{items.map(item => {item} )}` | `{items.map(item => {item} )}` |
-| IDE Support | WIP - [VS Code][code-ext] | Phenomenal |
-| Requires JS import | No | Yes, `jsxPragma` (`React` or `h`) must be in scope |
-| Fragments | Automatic top-level, `` or `<>` inside functions | Wrap with `` or `<>` |
-| Multiple frameworks per-file | Yes | No |
-| Modifying `` | Just use `` | Per-framework (``, ``, etc) |
-| Comment Style | `` | `{/_ JavaScript _/} |
-| Special Characters | ` ` | ` ` |
-| Attributes | `dash-case` | `camelCase` |
-
-## URL resolution
-
-It's important to note that Astro **won't** transform HTML references for you. For example, consider an `- head ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head)) and `` ([MDN- body ](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body)).
-
-`` is optional, and will be added automatically.
-
-```astro
----
-// Example: HTML page skeleton
----
-
-
-
- Document title
-
-
- Hello, world!
-
-
-```
-
-## Data Loading
-
-Astro pages can fetch data to help generate your pages. Astro provides two different tools to pages to help you do this: **fetch()** and **top-level await.**
-
-📚 Read our [full guide](/en/guides/data-fetching) on data-fetching to learn more.
-
-```astro
----
-// Example: Astro component scripts run at build time
-const response = await fetch('http://example.com/movies.json');
-const data = await response.json();
-console.log(data);
----
-
-{JSON.stringify(data)}
-```
-
-## Custom 404 Error Page
-
-For a custom 404 error page create a `404.astro` file in `/src/pages`. That builds to a `404.html` page. Most [deploy services](/en/guides/deploy) will find and use it.
-This is special and different to the default behavior building `page.astro` (or `page/index.astro`) to `page/index.html`.
diff --git a/docs/src/pages/en/core-concepts/component-hydration.md b/docs/src/pages/en/core-concepts/component-hydration.md
deleted file mode 100644
index b319ecda5..000000000
--- a/docs/src/pages/en/core-concepts/component-hydration.md
+++ /dev/null
@@ -1,116 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Partial Hydration in Astro
-description: Learn how partial hydration works using the "Islands Architecture" in Astro.
----
-
-**Astro generates every website with zero client-side JavaScript, by default.** Use any frontend UI component that you'd like (React, Svelte, Vue, etc.) and Astro will automatically render it to HTML at build-time and strip away all JavaScript. This keeps every site fast by default.
-
-But sometimes, client-side JavaScript is required. This guide shows how interactive components work in Astro using a technique called partial hydration.
-
-```astro
----
-// Example: Importing and then using a React component.
-// By default, Astro renders this to HTML and CSS during
-// your build, with no client-side JavaScript.
-// (Need client-side JavaScript? Read on...)
-import MyReactComponent from '../components/MyReactComponent.jsx';
----
-
-Example Layout: {title}
-
-
-
-
- Home
- Posts
- Contact
-
-
-
- Hello, world!
- This is my page content. It will be nested inside a layout.
-
-```
-
-## Nesting Layouts
-
-You can nest layouts when you want to create more specific page types without copy-pasting. It is common in Astro to have one generic `BaseLayout` and then many more specific layouts (`PostLayout`, `ProductLayout`, etc.) that reuse and build on top of it.
-
-```astro
----
-// src/layouts/PostLayout.astro
-import BaseLayout from '../layouts/BaseLayout.astro'
-const {title, author} = Astro.props;
----
-
-
-
- Post author: {author}
-
-
-```
-
-## Composing Layouts
-
-Sometimes, you need more granular control over your page. For instance, you may want to add SEO or social `meta` tags on some pages, but not others. You could implement this with a prop on your layout (`` page as one big layout, you can define the `head` and `body` contents as smaller, separate components. This lets you compose multiple layouts together in unique ways on every page.
-
-```astro
----
-// src/layouts/BaseHead.astro
-const {title, description} = Astro.props;
----
-{title}
-{content.title}
-
-
- {content.title}
- {content.description}
-
-
-
-
-
-```
-
-📚 Learn more about Astro's markdown support in our [Markdown guide](/en/guides/markdown-content).
diff --git a/docs/src/pages/en/core-concepts/project-structure.md b/docs/src/pages/en/core-concepts/project-structure.md
deleted file mode 100644
index be093b9cf..000000000
--- a/docs/src/pages/en/core-concepts/project-structure.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Project Structure
-description: Learn how to structure a project with Astro.
----
-
-Astro includes an opinionated folder layout for your project. Every Astro project must include these directories and files:
-
-- `src/*` - Your project source code (components, pages, etc.)
-- `public/*` - Your non-code assets (fonts, icons, etc.)
-- `package.json` - A project manifest.
-
-The easiest way to set up your new project is with `npm init astro`. Check out our [Installation Guide](/en/quick-start) for a walkthrough of how to set up your project automatically (with `npm init astro`) or manually.
-
-## Project Structure
-
-```
-├── src/
-│ ├── components/
-│ ├── layouts/
-│ └── pages/
-│ └── index.astro
-├── public/
-└── package.json
-```
-
-### `src/`
-
-The src folder is where most of your project source code lives. This includes:
-
-- [Astro Components](/en/core-concepts/astro-components)
-- [Pages](/en/core-concepts/astro-pages)
-- [Layouts](/en/core-concepts/layouts)
-- [Frontend JS Components](/en/core-concepts/component-hydration)
-- [Styling (CSS, Sass)](/en/guides/styling)
-- [Markdown](/en/guides/markdown-content)
-
-Astro has complete control over how these files get processed, optimized, and bundled in your final site build. Some files (like Astro components) never make it to the browser directly and are instead rendered to HTML. Other files (like CSS) are sent to the browser but may be bundled with other CSS files depending on how your site uses them.
-
-### `src/components`
-
-[Components](/en/core-concepts/astro-components) are reusable units of UI for your HTML pages. It is recommended (but not required) that you put your components in this directory. How you organize them within this directory is up to you.
-
-Your non-Astro UI components (React, Preact, Svelte, Vue, etc.) can also live in the `src/components` directory. Astro will automatically render all components to HTML unless you've enabled a frontend component via partial hydration.
-
-### `src/layouts`
-
-[Layouts](/en/core-concepts/layouts) are reusable components for HTML page layouts. It is recommended (but not required) that you put your layout components in this directory. How you organize them within this directory is up to you.
-
-### `src/pages`
-
-[Pages](/en/core-concepts/astro-pages) contain all pages (`.astro` and `.md` supported) for your website. It is **required** that you put your pages in this directory.
-
-### `public/`
-
-For most users, the majority of your files will live inside of the `src/` directory so that Astro can properly handle and optimize them in your final build. By contrast, the `public/` directory is the place for any files to live outside of the Astro build process.
-
-If you put a file into the public folder, it will not be processed by Astro. Instead it will be copied into the build folder untouched. This can be useful for assets like images and fonts, or when you need to include a specific file like `robots.txt` or `manifest.webmanifest`.
diff --git a/docs/src/pages/en/core-concepts/routing.md b/docs/src/pages/en/core-concepts/routing.md
deleted file mode 100644
index 54a282aa9..000000000
--- a/docs/src/pages/en/core-concepts/routing.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Routing
-description: An intro to routing with Astro.
----
-
-Astro uses **file-based routing** to generate your build URLs based on the file layout of your project `src/pages` directory. When a file is added to the `src/pages` directory of your project, it is automatically available as a route based on its filename.
-
-## Static routes
-
-Astro Components (`.astro`) and Markdown Files (`.md`) in the `src/pages` directory become pages on your website. Each page's route is decided based on its filename and path within the `src/pages` directory. This means that there is no separate "routing config" to maintain in an Astro project.
-
-```bash
-# Example: Static routes
-src/pages/index.astro -> mysite.com/
-src/pages/about.astro -> mysite.com/about
-src/pages/about/index.astro -> mysite.com/about
-src/pages/about/me.astro -> mysite.com/about/me
-src/pages/posts/1.md -> mysite.com/posts/1
-```
-
-## Dynamic routes
-
-Sometimes, you need to generate many URLs from a single page component. Astro uses file-based routing to support **dynamic route parameters** in the filename, so that one page can match many dynamic routes based on some pattern.
-
-An important thing to keep in mind: Astro is a static site builder. There is no Astro server to run in production, which means that every page must be built ahead of time. Pages that use dynamic routes must export a `getStaticPaths()` function which will tell Astro exactly what pages to generate. Learn more by viewing the complete [API Reference](/en/reference/api-reference#getstaticpaths).
-
-### Named parameters
-
-Dynamic parameters are encoded into the filename using `[bracket]` notation:
-
-- `pages/blog/[slug].astro` → `/blog/:slug` (`/blog/hello-world`, `/blog/post-2`, etc.)
-- `pages/[username]/settings.astro` → (`/fred/settings`, `/drew/settings`, etc.)
-- `pages/[lang]-[version]/info.astro` → (`/en-v1/info`, `/fr-v2/info`, etc.)
-
-#### Example: Named parameters
-
-Consider the following page `pages/post/[pid].astro`:
-
-```astro
----
-// Example: src/pages/post/[pid].astro
-const {pid} = Astro.request.params;
----
-Post: {pid}
-```
-
-Any route like `/post/1`, `/post/abc`, etc. will be matched by `pages/post/[pid].astro`. The matched path parameter will be passed to the page component at `Astro.request.params`.
-
-For example, the route `/post/abc` will have the following `Astro.request.params` object available:
-
-```json
-{ "pid": "abc" }
-```
-
-Multiple dynamic route segments can be combined to work the same way. The page `pages/post/[pid]/[comment].astro` will match the route `/post/abc/a-comment` and its `query` object will be:
-
-```json
-{ "pid": "abc", "comment": "a-comment" }
-```
-
-### Rest parameters
-
-If you need more flexibility in your URL routing, you can use a rest parameter as a universal catch-all. You do this by adding three dots (`...`) inside your brackets. For example:
-
-- `pages/post/[...slug].astro` → (`/post/a`, `/post/a/b`, `/post/a/b/c`, etc.)
-
-Matched parameters will be sent as a query parameter (`slug` in the example) to the page. In the example above, the path `/post/a/b/c` will have the following `query` object:
-
-```json
-{ "slug": "a/b/c" }
-```
-
-You can use names other than `slug`, such as: `[...param]` or `[...name]`.
-
-Rest parameters are optional by default, so `pages/post/[...slug].astro` could match `/post/` as well.
-
-#### Example: Rest parameters
-
-For a real-world example, you might implement GitHub's file viewer like so:
-
-```
-/[org]/[repo]/tree/[branch]/[...file]
-```
-
-In this example, a request for `/withastro/astro/tree/main/docs/public/favicon.svg` would result in the following parameters being available to the page:
-
-```js
-{
- org: 'withastro',
- repo: 'astro',
- branch: 'main',
- file: 'docs/public/favicon.svg'
-}
-```
-
-## Caveats
-
-- Static routes without path params will take precedence over all other routes, and named path params over catch all path params. Take a look at the following examples:
- - `pages/post/create.astro` - Will match `/post/create`
- - `pages/post/[pid].astro` - Will match `/post/1`, `/post/abc`, etc. But not `/post/create`
- - `pages/post/[...slug].astro` - Will match `/post/1/2`, `/post/a/b/c`, etc. But not `/post/create`, `/post/abc`
diff --git a/docs/src/pages/en/getting-started.md b/docs/src/pages/en/getting-started.md
deleted file mode 100644
index f8e22ed03..000000000
--- a/docs/src/pages/en/getting-started.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Getting Started
-description: A basic intro to Astro.
----
-
-Astro is a modern static site builder. Learn what Astro is all about from [our homepage](https://astro.build/) or [our release post](https://astro.build/blog/introducing-astro). This page is an overview of the Astro documentation and all related resources.
-
-## Try Astro
-
-The easiest way to try Astro is to run `npm init astro` in a new directory on your machine. Our CLI wizard will assist you in starting a new Astro project.
-
-To get started with Astro in 5 quick and easy steps, visit our [Quick-Start guide](/en/quick-start).
-
-Alternatively, read our [Installation Guide](/en/installation) for a full walk-through on getting set up with Astro.
-
-### Example Projects
-
-If you prefer to learn Astro by example, check out our [complete library of examples](https://github.com/withastro/astro/tree/main/examples) on GitHub.
-
-You can check out any of these examples on your local machine by running `npm init astro` with the `--template` CLI flag. The `--template` flag also supports third-party, community templates.
-
-```bash
-# Run the init wizard and use this official template
-npm init astro -- --template [OFFICIAL_EXAMPLE_NAME]
-# Run the init wizard and use this community template
-npm init astro -- --template [GITHUB_USER]/[REPO_NAME]
-npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
-```
-
-### Online Playgrounds
-
-If you're interested in playing around with Astro in the browser, you can instantly spin up a new Astro project with our UI at [astro.new](https://astro.new/).
-
-You can try Astro in online code editors like Stackblitz, CodeSandbox, Gitpod, and GitHub Codespaces. Click the "Open in Stackblitz" link in any of the examples in our [examples library](https://github.com/withastro/astro/tree/main/examples). Or, [click here](https://stackblitz.com/fork/astro) to start a new project in [Stackblitz](https://stackblitz.com/fork/astro).
-
-## Learn Astro
-
-All manner of people come to Astro from different backgrounds bringing with them different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you'll find this section helpful.
-
-- If you prefer to **learn by doing**, start with our [examples library](https://github.com/withastro/astro/tree/main/examples).
-- If you prefer to **learn concepts step by step**, start with our [basic concepts and guides](/en/core-concepts/project-structure).
-
-Like any unfamiliar technology, Astro comes with a slight learning curve. However, with practice and some patience, we know, you _will_ get the hang of it, in no time.
-
-### Learn `.astro` Syntax
-
-When you begin to learn Astro, you'll see many files using the `.astro` file extension. This is **Astro's Component Syntax**: a special HTML-like file format which Astro uses for templating. It was designed to feel familiar to anyone with HTML or JSX experience.
-
-Our helpful guide on [Astro components](/en/core-concepts/astro-components) introduces you to the Astro syntax, and is the best way to learn.
-
-### API Reference
-
-This documentation section is useful when you want to learn more details about a particular Astro API. For example, [Configuration Reference](/en/reference/configuration-reference) lists all possible configuration options available to you. [Built-in Components Reference](/en/reference/builtin-components) lists all available core components, like `- fetch ](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)) that lets you make HTTP requests for things like APIs and resources.
-
-Even though Astro component scripts run inside of Node.js (and not in the browser) Astro provides this native API so that you can fetch data at page build time.
-
-```astro
----
-// Movies.astro
-const response = await fetch('https://example.com/movies.json');
-const data = await response.json();
-// Remember: Astro component scripts log to the CLI
-console.log(data);
----
-
-{JSON.stringify(data)}
-```
-
-## Top-level await
-
-`await` is another native JavaScript feature that lets you await the response of some asynchronous promise ([MDN- await ](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)). Astro supports `await` in the top-level of your component script.
-
-**Important:** These are not yet available inside of non-page Astro components. Instead, do all of your data loading inside of your pages, and then pass them to your components as props.
-
-## Using `fetch()` outside of Astro Components
-
-If you want to use `fetch()` in a non-astro component, it is also globally available:
-
-```tsx
-// Movies.tsx
-import type { FunctionalComponent } from 'preact';
-import { h } from 'preact';
-
-const data = fetch('https://example.com/movies.json').then((response) =>
- response.json()
-);
-
-// Components that are build-time rendered also log to the CLI.
-// If you loaded this component with a directive, it would log to the browser console.
-console.log(data);
-
-const Movies: FunctionalComponent = () => {
- // Output the result to the page
- return {JSON.stringify(data)}
;
-};
-
-export default Movies;
-```
diff --git a/docs/src/pages/en/guides/debugging.md b/docs/src/pages/en/guides/debugging.md
deleted file mode 100644
index 7e3211656..000000000
--- a/docs/src/pages/en/guides/debugging.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Debugging
-description: Debug in Astro using the Debug component
----
-
-Astro runs on the server and logs directly to your terminal, so it can be difficult to debug values from Astro. Astro's built-in `` component can help you inspect values inside your files on the clientside. Read more about the [built-in Debug Component](/en/reference/builtin-components#debug-).
diff --git a/docs/src/pages/en/guides/deploy.md b/docs/src/pages/en/guides/deploy.md
deleted file mode 100644
index d5b6797db..000000000
--- a/docs/src/pages/en/guides/deploy.md
+++ /dev/null
@@ -1,528 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Deploy a Website
-description: Multiple different methods to deploy a website with Astro.
----
-
-The following guides are based on some shared assumptions:
-
-- You are using the default build output location (`dist/`). This location [can be changed using the `dist` configuration option](/en/reference/configuration-reference).
-- You are using npm. You can use equivalent commands to run the scripts if you are using Yarn or other package managers.
-- Astro is installed as a local dev dependency in your project, and you have set up the following npm scripts:
-
-```json
-{
- "scripts": {
- "start": "astro dev",
- "build": "astro build",
- "preview": "astro preview"
- }
-}
-```
-
-## Building The App
-
-You may run `npm run build` command to build the app.
-
-```bash
-$ npm run build
-```
-
-By default, the build output will be placed at `dist/`. You may deploy this `dist/` folder to any of your preferred platforms.
-
-## GitHub Pages
-
-> **Warning:** By default, Github Pages will break the `_astro/` directory of your deployed website. To disable this behavior and fix this issue, make sure that you use the `deploy.sh` script below or manually add an empty `.nojekyll` file to your `public/` site directory.
-
-1. Set the correct `buildOptions.site` in `astro.config.mjs`.
-1. Inside your project, create `deploy.sh` with the following content (uncommenting the appropriate lines), and run it to deploy:
-
- ```bash
- #!/usr/bin/env sh
-
- # abort on errors
- set -e
-
- # build
- npm run build
-
- # navigate into the build output directory
- cd dist
-
- # add .nojekyll to bypass GitHub Page's default behavior
- touch .nojekyll
-
- # if you are deploying to a custom domain
- # echo 'www.example.com' > CNAME
-
- git init
- git add -A
- git commit -m 'deploy'
-
- # if you are deploying to https://.github.io
- # git push -f git@github.com:/.github.io.git main
-
- # if you are deploying to https://.github.io/
- # git push -f git@github.com:/.git main:gh-pages
-
- cd -
- ```
-
- > You can also run the above script in your CI setup to enable automatic deployment on each push.
-
-### GitHub Actions
-
-1. In the astro project repo, create `gh-pages` branch then go to Settings > Pages and set to `gh-pages` branch for GitHub Pages and set directory to `/` (root).
-2. Set the correct `buildOptions.site` in `astro.config.mjs`.
-3. Create the file `.github/workflows/main.yml` and add in the yaml below. Make sure to edit in your own details.
-4. In GitHub go to Settings > Developer settings > Personal Access tokens. Generate a new token with repo permissions.
-5. In the astro project repo (not \.github.io) go to Settings > Secrets and add your new personal access token with the name `API_TOKEN_GITHUB`.
-6. When you push changes to the astro project repo CI will deploy them to \.github.io for you.
-
-```yaml
-# Workflow to build and deploy to your GitHub Pages repo.
-
-# Edit your project details here.
-# Remember to add API_TOKEN_GITHUB in repo Settings > Secrets as well!
-env:
- githubEmail:
- deployToRepo: .github.io)>
-
-name: Github Pages Astro CI
-
-on:
- # Triggers the workflow on push and pull request events but only for the main branch
- push:
- branches: [main]
- pull_request:
- branches: [main]
-
- # Allows you to run this workflow manually from the Actions tab.
- workflow_dispatch:
-
-jobs:
- deploy:
- runs-on: ubuntu-latest
-
- steps:
- # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- - uses: actions/checkout@v2
-
- # Install dependencies with npm
- - name: Install dependencies
- run: npm ci
-
- # Build the project and add .nojekyll file to supress default behaviour
- - name: Build
- run: |
- npm run build
- touch ./dist/.nojekyll
-
- # Push to your pages repo
- - name: Push to pages repo
- uses: cpina/github-action-push-to-another-repository@main
- env:
- API_TOKEN_GITHUB: ${{ secrets.API_TOKEN_GITHUB }}
- with:
- source-directory: 'dist'
- destination-github-username: ${{ github.actor }}
- destination-repository-name: ${{ env.deployToRepo }}
- user-email: ${{ env.githubEmail }}
- commit-message: Deploy ORIGIN_COMMIT
- target-branch: gh-pages
-```
-
-### Travis CI
-
-1. Set the correct `buildOptions.site` in `astro.config.mjs`.
-2. Create a file named `.travis.yml` in the root of your project.
-3. Run `npm install` locally and commit the generated lockfile (`package-lock.json`).
-4. Use the GitHub Pages deploy provider template, and follow the [Travis CI documentation](https://docs.travis-ci.com/user/deployment/pages/).
-
- ```yaml
- language: node_js
- node_js:
- - lts/*
- install:
- - npm ci
- script:
- - npm run build
- deploy:
- provider: pages
- skip_cleanup: true
- local_dir: dist
- # A token generated on GitHub allowing Travis to push code on you repository.
- # Set in the Travis settings page of your repository, as a secure variable.
- github_token: $GITHUB_TOKEN
- keep_history: true
- on:
- branch: master
- ```
-
-## GitLab Pages
-
-1. Set the correct `buildOptions.site` in `astro.config.mjs`.
-2. Set `dist` in `astro.config.mjs` to `public` and `public` in `astro.config.mjs` to a newly named folder that is holding everything currently in `public`. The reasoning is because `public` is a second source folder in astro, so if you would like to output to `public` you'll need to pull public assets from a different folder. Your `astro.config.mjs` might end up looking like this:
-
- ```js
- export default /** @type {import('astro').AstroUserConfig} */ ({
- // Enable the Preact renderer to support Preact JSX components.
- renderers: ['@astrojs/renderer-preact'],
- // files in `static/` will be blindly copied to `public/`
- public: 'static',
- // `public/` is where the built website will be output to
- dist: 'public',
- buildOptions: {
- sitemap: true,
- site: 'https://astro.build/',
- },
- });
- ```
-
-3. Create a file called `.gitlab-ci.yml` in the root of your project with the content below. This will build and deploy your site whenever you make changes to your content:
-
- ```yaml
- image: node:14
- pages:
- cache:
- paths:
- - node_modules/
- script:
- - npm install
- - npm run build
- artifacts:
- paths:
- - public
- only:
- - main
- ```
-
-## Netlify
-
-**Note:** If you are using an older [build image](https://docs.netlify.com/configure-builds/get-started/#build-image-selection) on Netlify, make sure that you set your Node.js version in either a [`.nvmrc`](https://github.com/nvm-sh/nvm#nvmrc) file (example: `node v14.17.6`) or a `NODE_VERSION` environment variable. This step is no longer required by default.
-
-You can configure your deployment in two ways, via the Netlify website or with a local project `netlify.toml` file.
-
-### `netlify.toml` file
-
-Create a new `netlify.toml` file at the top level of your project repository with the following settings:
-
-```toml
-[build]
- command = "npm run build"
- publish = "dist"
-```
-
-Push the new `netlify.toml` file up to your hosted git repository. Then, set up a new project on [Netlify](https://netlify.com) for your git repository. Netlify will read this file and automatically configure your deployment.
-
-### Netlify Website UI
-
-You can skip the `netlify.toml` file and go directly to [Netlify](https://netlify.com) to configure your project. Netlify should now detect Astro projects automatically and pre-fill the configuration for you. Make sure that the following settings are entered before hitting the "Deploy" button:
-
-- **Build Command:** `astro build` or `npm run build`
-- **Publish directory:** `dist`
-
-## Google Cloud
-
-Different from most available deploy options here, [Google Cloud](https://cloud.google.com) requires some UI clicks to deploy projects. (Most of these actions can also be done using the gcloud CLI).
-
-### Cloud Run
-
-1. Create a new GCP project, or select one you already have.
-
-2. Make sure the Cloud Run API is enabled.
-
-3. Create a new service.
-
-4. Use a container from Docker Hub or build your own using [Cloud Build](https://cloud.google.com/build).
-
-5. Configure a port from which the files are served.
-
-6. Enable public access by adding a new permission to `allUsers` called `Cloud Run Invoker`.
-
-### Cloud Storage
-
-1. Create a new GCP project, or select one you already have.
-
-2. Create a new bucket under [Cloud Storage](https://cloud.google.com/storage).
-
-3. Give it a name and other required settings.
-
-4. Upload your `dist` folder into it or upload using [Cloud Build](https://cloud.google.com/build).
-
-5. Enable public access by adding a new permission to `allUsers` called `Storage Object Viewer`.
-
-6. Edit the website configuration and add `ìndex.html` as entrypoint and `404.html` as errorpage.
-
-## Google Firebase
-
-1. Make sure you have [firebase-tools](https://www.npmjs.com/package/firebase-tools) installed.
-
-2. Create `firebase.json` and `.firebaserc` at the root of your project with the following content:
-
- `firebase.json`:
-
- ```json
- {
- "hosting": {
- "public": "dist",
- "ignore": []
- }
- }
- ```
-
- `.firebaserc`:
-
- ```json
- {
- "projects": {
- "default": ""
- }
- }
- ```
-
-3. After running `npm run build`, deploy using the command `firebase deploy`.
-
-## Surge
-
-1. First install [surge](https://www.npmjs.com/package/surge), if you haven't already.
-
-2. Run `npm run build`.
-
-3. Deploy to surge by typing `surge dist`.
-
-You can also deploy to a [custom domain](http://surge.sh/help/adding-a-custom-domain) by adding `surge dist yourdomain.com`.
-
-## Heroku
-
-1. Install [Heroku CLI](https://devcenter.heroku.com/articles/heroku-cli).
-
-2. Create a Heroku account by [signing up](https://signup.heroku.com).
-
-3. Run `heroku login` and fill in your Heroku credentials:
-
- ```bash
- $ heroku login
- ```
-
-4. Create a file called `static.json` in the root of your project with the below content:
-
- `static.json`:
-
- ```json
- {
- "root": "./dist"
- }
- ```
-
- This is the configuration of your site; read more at [heroku-buildpack-static](https://github.com/heroku/heroku-buildpack-static).
-
-5. Set up your Heroku git remote:
-
- ```bash
- # version change
- $ git init
- $ git add .
- $ git commit -m "My site ready for deployment."
-
- # creates a new app with a specified name
- $ heroku apps:create example
-
- # set buildpack for static sites
- $ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static.git
- ```
-
-6. Deploy your site:
-
- ```bash
- # publish site
- $ git push heroku master
-
- # opens a browser to view the Dashboard version of Heroku CI
- $ heroku open
- ```
-
-## Vercel
-
-You can deploy Astro to [Vercel](http://vercel.com) through the CLI or the Vercel git integrations.
-
-### CLI
-
-1. Install the [Vercel CLI](https://vercel.com/cli) and run `vercel` to deploy.
-2. When asked `Want to override the settings? [y/N]`, choose `Y`.
-3. Update `Output Directory` to `./dist`.
-4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/))
-
-```bash
-$ npm i -g vercel
-$ vercel
-```
-
-### Git
-
-1. Push your code to your git repository (GitHub, GitLab, BitBucket).
-2. [Import your project](https://vercel.com/new) into Vercel.
-3. Update `Output Directory` to `./dist`.
-4. Your application is deployed! (e.g. [astro.vercel.app](https://astro.vercel.app/))
-
-After your project has been imported and deployed, all subsequent pushes to branches will generate [Preview Deployments](https://vercel.com/docs/concepts/deployments/environments#preview), and all changes made to the Production Branch (commonly “main”) will result in a [Production Deployment](https://vercel.com/docs/concepts/deployments/environments#production).
-
-Learn more about Vercel’s [Git Integration](https://vercel.com/docs/concepts/git).
-
-## Azure Static Web Apps
-
-You can deploy your Astro project with Microsoft Azure [Static Web Apps](https://aka.ms/staticwebapps) service. You need:
-
-- An Azure account and a subscription key. You can create a [free Azure account here](https://azure.microsoft.com/free).
-- Your app code pushed to [GitHub](https://github.com).
-- The [SWA Extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurestaticwebapps) in [Visual Studio Code](https://code.visualstudio.com).
-
-Install the extension in VS Code and navigate to your app root. Open the Static Web Apps extension, sign in to Azure, and click the '+' sign to create a new Static Web App. You will be prompted to designate which subscription key to use.
-
-Follow the wizard started by the extension to give your app a name, choose a framework preset, and designate the app root (usually `/`) and built file location `/dist`. The wizard will run and will create a GitHub action in your repo in a `.github` folder.
-
-The action will work to deploy your app (watch its progress in your repo's Actions tab) and, when successfully completed, you can view your app in the address provided in the extension's progress window by clicking the 'Browse Website' button that appears when the GitHub action has run.
-
-## Cloudflare Pages
-
-You can deploy your Astro project on [Cloudflare Pages](https://pages.cloudflare.com). You need:
-
-- A Cloudflare account. If you don’t already have one, you can create a free Cloudflare account during the process.
-- Your app code pushed to a [GitHub](https://github.com) or a [GitLab](https://about.gitlab.com/) repository.
-
-Then, set up a new project on Cloudflare Pages.
-
-Use the following build settings:
-
-- **Framework preset**: `Astro`
-- **Build command:** `npm run build`
-- **Build output directory:** `dist`
-- **Environment variables (advanced)**: Currently, Cloudflare Pages supports `NODE_VERSION = 12.18.0` in the Pages build environment by default. Astro requires `14.15.0`, `v16.0.0`, or higher. You can add an environment variable with the **Variable name** of `NODE_VERSION` and a **Value** of a [Node version that’s compatible with Astro](https://docs.astro.build/installation#prerequisites) or by specifying the node version of your project in a `.nvmrc` or `.node-version` file.
-
-Then click the **Save and Deploy** button.
-
-## Render
-
-You can deploy your Astro project on [Render](https://render.com/) following these steps:
-
-1. Create a [render.com account](https://dashboard.render.com/) and sign in
-2. Click the **New +** button from your dashboard and select **Static Site**
-3. Connect your [GitHub](https://github.com/) or [GitLab](https://about.gitlab.com/) repository or alternatively enter the public URL of a public repository
-4. Give your website a name, select the branch and specify the build command and publish directory
- - **build command:** `npm run build`
- - **publish directory:** `dist`
-5. Click the **Create Static Site** button
-
-## Buddy
-
-You can deploy your Astro project using [Buddy](https://buddy.works). To do so you'll need to:
-
-1. Create a **Buddy** account [here](https://buddy.works/sign-up).
-2. Create a new project and connect it with a git repository (GitHub, GitLab, BitBucket, any private Git Repository or you can use Buddy Git Hosting).
-3. Add a new pipeline.
-4. In the newly created pipeline add a **[Node.js](https://buddy.works/actions/node-js)** action.
-5. In this action add:
-
- ```bash
- npm install
- npm run build
- ```
-
-6. Add a deployment action - there are many to choose from, you can browse them [here](https://buddy.works/actions). Although their can settings differ, remember to set the **Source path** to `dist`.
-7. Press the **Run** button.
-
-## Layer0
-
-You can deploy your Astro project using the steps in the following sections.
-
-### Create the Astro Site
-
-If you don't have an existing Astro site, you can create one by running:
-
-```bash
-# Make a new project directory, and navigate directly into it
-$ mkdir my-astro-project && cd $_
-
-# prepare for liftoff...
-$ npm init astro
-
-# install dependencies
-$ npm install
-
-# start developing!
-$ npm run dev
-
-# when you're ready: build your static site to `dist/`
-$ npm run build
-```
-
-### Add Layer0
-
-```bash
-# First, globally install the Layer0 CLI:
-$ npm i -g @layer0/cli
-
-# Then, add Layer0 to your Astro site:
-$ 0 init
-```
-
-### Update your Layer0 Router
-
-Paste the following into routes.ts:
-
-```js
-// routes.ts
-import { Router } from '@layer0/core';
-
-export default new Router()
- .get(
- '/:path*/:file.:ext(js|css|png|ico|jpg|gif|svg)',
- ({ cache, serveStatic }) => {
- cache({
- browser: {
- // cache js, css, and images in the browser for one hour...
- maxAgeSeconds: 60 * 60,
- },
- edge: {
- // ... and at the edge for one year
- maxAgeSeconds: 60 * 60 * 24 * 365,
- },
- });
- serveStatic('dist/:path*/:file.:ext');
- }
- )
- .match('/:path*', ({ cache, serveStatic, setResponseHeader }) => {
- cache({
- // prevent the browser from caching html...
- browser: false,
- edge: {
- // ...cache html at the edge for one year
- maxAgeSeconds: 60 * 60 * 24 * 365,
- },
- });
- setResponseHeader('content-type', 'text/html; charset=UTF-8');
- serveStatic('dist/:path*');
- });
-```
-
-You can remove the origin backend from `layer0.config.js`:
-
-```js
-module.exports = {};
-```
-
-### Deploy to Layer0
-
-To deploy your site to Layer0, run:
-
-```bash
-# Create a production build of your astro site
-$ npm run build
-
-# Deploy it to Layer0
-$ 0 deploy
-```
-
-## Credits
-
-This guide was originally based off [Vite](https://vitejs.dev/)’s well-documented static deploy guide.
diff --git a/docs/src/pages/en/guides/environment-variables.md b/docs/src/pages/en/guides/environment-variables.md
deleted file mode 100644
index c8546c8d7..000000000
--- a/docs/src/pages/en/guides/environment-variables.md
+++ /dev/null
@@ -1,48 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Using environment variables
-description: Learn how to use environment variables in an Astro project.
----
-
-Astro uses Vite for environment variables, and allows you to use any of its methods to get and set environment variables. Note that all environment variables must be prefixed with `PUBLIC_` to be accessible by client side code.
-
-The ability to access private variables on the server side is [still being discussed](https://github.com/withastro/astro/issues/1765).
-
-## Setting environment variables
-
-Vite includes `dotenv` by default, allowing you to easily set environment variables without any extra configuration in Astro projects. You can also attach a mode (either `production` or `development`) to the filename, like `.env.production` or `.env.development`, which makes the environment variables only take effect in that mode.
-
-Just create a `.env` file in the project directory and add some variables to it.
-
-```bash
-# .env
-PUBLIC_POKEAPI="https://pokeapi.co/api/v2"
-```
-
-## Getting environment variables
-
-Instead of using `process.env`, with Vite you use `import.meta.env`, which uses the `import.meta` feature added in ES2020 (don't worry about browser support though, Vite replaces all `import.meta.env` mentions with static values). For example, to get the `PUBLIC_POKEAPI` environment variable, you could use `import.meta.env.PUBLIC_POKEAPI`.
-
-```js
-fetch(`${import.meta.env.PUBLIC_POKEAPI}/pokemon/squirtle`);
-```
-
-> ⚠️WARNING⚠️:
-> Because Vite statically replaces `import.meta.env`, you cannot access it with dynamic keys like `import.meta.env[key]`.
-
-## IntelliSense for TypeScript
-
-By default, Vite provides type definition for `import.meta.env` in `vite/client.d.ts`. While you can define more custom env variables in `.env.[mode]` files, you may want to get TypeScript IntelliSense for user-defined env variables which prefixed with `PUBLIC_`.
-
-To achieve, you can create an `env.d.ts` in `src` directory, then augment `ImportMetaEnv` like this:
-
-```ts
-interface ImportMetaEnv {
- readonly PUBLIC_POKEAPI: string;
- // more env variables...
-}
-
-interface ImportMeta {
- readonly env: ImportMetaEnv;
-}
-```
diff --git a/docs/src/pages/en/guides/imports.md b/docs/src/pages/en/guides/imports.md
deleted file mode 100644
index fffcfe925..000000000
--- a/docs/src/pages/en/guides/imports.md
+++ /dev/null
@@ -1,142 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Supported Imports
-description: Learn how to import different content types with Astro.
----
-
-Astro uses Vite as its internal build system. Vite provides Astro with built-in support for the following file types, with no configuration required:
-
-- JavaScript (`.js`, `.mjs`)
-- TypeScript (`.ts`, `.tsx`)
-- JSON (`.json`)
-- JSX (`.jsx`, `.tsx`)
-- CSS (`.css`)
-- CSS Modules (`.module.css`)
-- Images & Assets (`.svg`, `.jpg`, `.png`, etc.)
-- Astro Components (`.astro`)
-- Markdown (`.md`)
-- WASM (`.wasm`)
-
-Any files in your `public/` directory are copied into the final build, untouched by Vite or Astro. The following applies to files in your `src/` directory, which Astro is ultimately responsible for.
-
-## JavaScript & ESM
-
-Astro was designed for JavaScript's native ES Module (ESM) syntax. ESM lets you define explicit imports & exports that browsers and build tools can better understand and optimize for. If you're familiar with the `import` and `export` keywords in JavaScript, then you already know ESM!
-
-```js
-// ESM Example - src/user.js
-export function getUser() {
- /* ... */
-}
-
-// src/index.js
-import { getUser } from './user.js';
-```
-
-All browsers now support ESM, so Astro is able to ship this code directly to the browser during development.
-
-## TypeScript
-
-Astro includes built-in support to build TypeScript files (`*.ts`) to JavaScript. Astro components also support TypeScript in the frontmatter script section.
-
-Note that this built-in support is build only. By default, Astro does not type-check your TypeScript code.
-
-
-
-## JSX
-
-Astro includes built-in support to build JSX files (`*.jsx` & `*.tsx`) to JavaScript.
-
-If you are using Preact, Astro will detect your Preact import and switch to use the Preact-style JSX `h()` function. This is all done automatically for you.
-
-**Note: Astro does not support JSX in `.js`/`.ts` files.**
-
-## JSON
-
-```js
-// Load the JSON object via the default export
-import json from './data.json';
-```
-
-Astro supports importing JSON files directly into your application. Imported files return the full JSON object in the default import.
-
-## CSS
-
-```js
-// Load and inject 'style.css' onto the page
-import './style.css';
-```
-
-Astro supports importing CSS files directly into your application. Imported styles expose no exports, but importing one will automatically add those styles to the page. This works for all CSS files by default, and can support compile-to-CSS languages like Sass & Less via plugins.
-
-If you prefer not to write CSS, Astro also supports all popular CSS-in-JS libraries (ex: styled-components) for styling.
-
-## CSS Modules
-
-```jsx
-// 1. Converts './style.module.css' classnames to unique, scoped values.
-// 2. Returns an object mapping the original classnames to their final, scoped value.
-import styles from './style.module.css';
-
-// This example uses JSX, but you can use CSS Modules with any framework.
-return Your Error Message
;
-```
-
-Astro supports CSS Modules using the `[name].module.css` naming convention. Like any CSS file, importing one will automatically apply that CSS to the page. However, CSS Modules export a special default `styles` object that maps your original classnames to unique identifiers.
-
-CSS Modules help you enforce component scoping & isolation on the frontend with unique-generated class names for your stylesheets.
-
-## Other Assets
-
-```jsx
-import imgReference from './image.png'; // img === '/src/image.png'
-import svgReference from './image.svg'; // svg === '/src/image.svg'
-import txtReference from './words.txt'; // txt === '/src/words.txt'
-
-// This example uses JSX, but you can use import references with any framework.
-Version: {data.version}
-```
diff --git a/docs/src/pages/en/guides/markdown-content.md b/docs/src/pages/en/guides/markdown-content.md
deleted file mode 100644
index 487856171..000000000
--- a/docs/src/pages/en/guides/markdown-content.md
+++ /dev/null
@@ -1,332 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Markdown
-description: An intro to Markdown with Astro.
----
-
-Astro comes with out-of-the-box Markdown support powered by the expansive [remark](https://remark.js.org/) ecosystem.
-
-## Parsers
-
-Astro lets you use any Markdown parser you want. It just needs to be a function that follows the `MarkdownParser` type declared inside [this file](https://github.com/withastro/astro/blob/main/packages/astro/src/@types/astro.ts). You can declare it inside `astro.config.mjs`:
-
-```js
-// astro.config.mjs
-export default {
- markdownOptions: {
- render: [
- 'parser-name', // or import('parser-name') or (contents) => {...}
- {
- // options
- },
- ],
- },
-};
-```
-
-Astro comes with the `@astrojs/markdown-remark` package - the default parser.
-
-### Remark and Rehype Plugins
-
-In addition to custom components inside the [`` component](/en/guides/markdown-content#astros-markdown-component), the default parser comes with these plugins pre-enabled:
-
-- [GitHub-flavored Markdown](https://github.com/remarkjs/remark-gfm)
-- [remark-smartypants](https://github.com/silvenon/remark-smartypants)
-- [rehype-slug](https://github.com/rehypejs/rehype-slug)
-
-Also, Astro supports third-party plugins for Markdown. You can provide your plugins in `astro.config.mjs`.
-
-> **Note:** Enabling custom `remarkPlugins` or `rehypePlugins` removes Astro's built-in support for the plugins previously mentioned. You must explicitly add these plugins to your `astro.config.mjs` file, if desired.
-
-### Add a Markdown plugin in Astro
-
-If you want to add a plugin, you need to install the npm package dependency in your project and then update `remarkPlugins` or `rehypePlugins` inside the `@astrojs/markdown-remark` options depending on what plugin you want to have:
-
-```js
-// astro.config.mjs
-export default {
- markdownOptions: {
- render: [
- '@astrojs/markdown-remark',
- {
- remarkPlugins: [
- // Add a Remark plugin that you want to enable for your project.
- // If you need to provide options for the plugin, you can use an array and put the options as the second item.
- // ['remark-autolink-headings', { behavior: 'prepend'}],
- ],
- rehypePlugins: [
- // Add a Rehype plugin that you want to enable for your project.
- // If you need to provide options for the plugin, you can use an array and put the options as the second item.
- // 'rehype-slug',
- // ['rehype-autolink-headings', { behavior: 'prepend'}],
- ],
- },
- ],
- },
-};
-```
-
-You can provide names of the plugins as well as import them:
-
-```js
-import autolinkHeadings from 'remark-autolink-headings';
-
-// astro.config.mjs
-export default {
- markdownOptions: {
- render: [
- '@astrojs/markdown-remark',
- {
- remarkPlugins: [[autolinkHeadings, { behavior: 'prepend' }]],
- },
- ],
- },
-};
-```
-
-### Syntax Highlighting
-
-Astro comes with built-in support for [Prism](https://prismjs.com/) and [Shiki](https://shiki.matsu.io/). By default, Prism is enabled. You can modify this behavior by updating the `@astrojs/markdown-remark` options:
-
-```js
-// astro.config.mjs
-export default {
- markdownOptions: {
- render: [
- '@astrojs/markdown-remark',
- {
- // Pick a syntax highlighter. Can be 'prism' (default), 'shiki' or false to disable any highlighting.
- syntaxHighlight: 'prism',
- // If you are using shiki, here you can define a global theme and
- // add custom languages.
- shikiConfig: {
- theme: 'github-dark',
- langs: [],
- wrap: false,
- },
- },
- ],
- },
-};
-```
-
-You can read more about custom Shiki [themes](https://github.com/shikijs/shiki/blob/main/docs/themes.md#loading-theme) and [languages](https://github.com/shikijs/shiki/blob/main/docs/languages.md#supporting-your-own-languages-with-shiki).
-
-## Markdown Pages
-
-Astro treats any `.md` files inside of the `/src/pages` directory as pages. These files can contain frontmatter, but are otherwise processed as plain markdown files and do not support components. If you're looking to embed rich components in your markdown, take a look at the [Markdown Component](#astros-markdown-component) section.
-
-### Layouts
-
-Markdown pages have a special frontmatter property for `layout`. This defines the relative path to an `.astro` component which should wrap your Markdown content, for example a [Layout](/en/core-concepts/layouts) component. All other frontmatter properties defined in your `.md` page will be exposed to the component as properties of the `content` prop. The rendered Markdown content is placed into the default `{content.title}
-
-
-
- ` component, within your frontmatter block use the following import statement:
-
-```astro
----
-import { Markdown } from 'astro/components';
----
-```
-
-You can utilize this within your `.astro` file by doing the following:
-
-```astro
----
-import { Markdown } from 'astro/components';
----
-
-
-
- # Hello world!
-
- The contents inside here is all in markdown.
-
-
-```
-
-`` components provide more flexibility and allow you to use plain HTML or custom components. For example:
-
-````astro
----
-// For now, this import _must_ be named "Markdown" and _must not_ be wrapped with a custom component
-// We're working on easing these restrictions!
-import { Markdown } from 'astro/components';
-import Layout from '../layouts/main.astro';
-import MyFancyCodePreview from '../components/MyFancyCodePreview.tsx';
-
-const expressions = 'Lorem ipsum';
----
-
-
-
- # Hello world!
-
- **Everything** supported in a `.md` file is also supported here!
-
- There is _zero_ runtime overhead.
-
- In addition, Astro supports:
- - Astro {expressions}
- - Automatic indentation normalization
- - Automatic escaping of expressions inside code blocks
-
- ```js
- // This content is not transformed!
- const object = { someOtherValue };
- ```
-
- - Rich component support like any `.astro` file!
- - Recursive Markdown support (Component children are also processed as Markdown)
-
-
- ```js
- const object = { someOtherValue };
- ```
-
-
-
-````
-
-## Remote Markdown
-
-If you have Markdown in a remote source, you may pass it directly to the Markdown component through the `content` attribute. For example, the example below fetches the README from Snowpack's GitHub repository and renders it as HTML.
-
-```astro
----
-import { Markdown } from 'astro/components';
-
-const content = await fetch('https://raw.githubusercontent.com/snowpackjs/snowpack/main/README.md').then(res => res.text());
----
-
-
-
-```
-
-There might be times when you want to combine both dynamic, and static markdown. If that is the case, you can nest `` components with each other to get the best of both worlds.
-
-```astro
----
-import { Markdown } from 'astro/components';
-
-const content = await fetch('https://raw.githubusercontent.com/snowpackjs/snowpack/main/README.md').then(res => res.text());
----
-
-
-
- ## Markdown example
-
- Here we have some __Markdown__ code. We can also dynamically render content from remote places.
-
-
-
-```
-
-## Security FAQs
-
-**Aren't there security concerns to rendering remote markdown directly to HTML?**
-
-Yes! Just like with regular HTML, improper use of the `Markdown` component can open you up to a [cross-site scripting (XSS)](https://en.wikipedia.org/wiki/Cross-site_scripting) attack. If you are rendering untrusted content, be sure to _sanitize your content **before** rendering it_.
-
-**Why not use a prop like React's `dangerouslySetInnerHTML={{ __html: content }}`?**
-
-Rendering a string of HTML (or Markdown) is an extremely common use case when rendering a static site and you probably don't need the extra hoops to jump through. Rendering untrusted content is always dangerous! Be sure to _sanitize your content **before** rendering it_.
diff --git a/docs/src/pages/en/guides/pagination.md b/docs/src/pages/en/guides/pagination.md
deleted file mode 100644
index 73fc2ef96..000000000
--- a/docs/src/pages/en/guides/pagination.md
+++ /dev/null
@@ -1,108 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Pagination
-description: An intro to Astro pagination to split large amounts of data into different pages.
----
-
-Astro supports built-in, automatic pagination for large collections of data that need to be split into multiple pages. Astro also automatically includes pagination metadata for things like previous/next page URL, total number of pages, and more.
-
-## When to use pagination
-
-Pagination is only useful when you need to generate multiple, numbered pages from a larger data set.
-
-If all of your data can fit on a single page then you should consider using a static [page component](/en/core-concepts/astro-pages) instead.
-
-If you need to split your data into multiple pages but do not want those page URLs to be numbered, then you should use a [dynamic page](/en/core-concepts/routing) instead without pagination (Example: `/tag/[tag].astro`).
-
-## How to use pagination
-
-### Create your page component
-
-To automatically paginate some data, you'll first need to create your page component. This is the component `.astro` file that every page in the paginated collection will inherit from.
-
-Pagination is built on top of dynamic page routing, with the page number in the URL represented as a dynamic route param: `[page].astro` or `[...page].astro`. If you aren't familiar with routing in Astro, quickly familiarize yourself with our [Routing documentation](/en/core-concepts/routing) before continuing.
-
-Your first page URL will be different depending on which type of query param you use:
-
-- `/posts/[page].astro` will generate the URLs `/posts/1`, `/posts/2`, `/posts/3`, etc.
-- `/posts/[...page].astro` will generate the URLs `/posts`, `/posts/2`, `/posts/3`, etc.
-
-### calling the `paginate()` function
-
-Once you have decided on the file name/path for your page component, you'll need to export a [`getStaticPaths()`](/en/reference/api-reference#getstaticpaths) function from the component. `getStaticPaths()` is where you tell Astro what pages to generate.
-
-`getStaticPaths()` provides the `paginate()` function that we'll use to paginate your data. In the example below, we'll use `paginate()` to split a list of 150 Pokemon into 15 pages of 10 Pokemon each.
-
-```js
-export async function getStaticPaths({ paginate }) {
- // Load your data with fetch(), Astro.fetchContent(), etc.
- const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`);
- const result = await response.json();
- const allPokemon = result.results;
- // Return a paginated collection of paths for all posts
- return paginate(allPokemon, { pageSize: 10 });
-}
-// If set up correctly, The page prop now has everything that
-// you need to render a single page (see next section).
-const { page } = Astro.props;
-```
-
-`paginate()` generates the correct array of path objects for `getStaticPaths()`. This automatically tells Astro to create a new URL for every page of the collection. The page data will then be passed as a `page` prop to the `.astro` page component.
-
-### using the `page` prop
-
-Once you've set up your page component and defined your `getStaticPaths()` function, you're ready to design your page template. Each page in the paginated collection will be passed its data in the `page` prop.
-
-```astro
----
-export async function getStaticPaths { /* ... */ }
-const { page } = Astro.props;
----
-Page {page.currentPage}
-
- {page.data.map(item => {item.title} )}
-
-```
-
-The `page` prop has several useful properties, but the most important one is `page.data`. This is the array containing the page's slice of data that you passed to the `paginate()` function. For example, if you called `paginate()` on an array of 150 Pokemon:
-
-- `/1`: `page.data` would be an array of the first 10 Pokemon
-- `/2`: `page.data` would be an array of Pokemon 11-20
-- `/3`: `page.data` would be an array of Pokemon 21-30
-- etc. etc.
-
-The `page` prop includes other helpful metadata, like `page.url.next`, `page.url.prev`, `page.total`, and more. See our [API reference](/en/reference/api-reference#the-pagination-page-prop) for the full `page` interface.
-
-## Nested pagination
-
-A more advanced use-case for pagination is **nested pagination.** This is when pagination is combined with other dynamic route params. You can use nested pagination to group your paginated collection by some property or tag.
-
-For example, if you want to group your paginated markdown posts by some tag, you would use nested pagination by creating a `/src/pages/[tag]/[page].astro` page that would match the following URLS:
-
-- `/red/1` (tag=red)
-- `/red/2` (tag=red)
-- `/blue/1` (tag=blue)
-- `/green/1` (tag=green)
-
-Nested pagination works by returning an array of `paginate()` results from `getStaticPaths()`, one for each grouping. In the following example, we will implement nested pagination to build the URLs listed above:
-
-```astro
----
-// Example: /src/pages/[tag]/[page].astro
-export function getStaticPaths({paginate}) {
- const allTags = ['red', 'blue', 'green'];
- const allPosts = Astro.fetchContent('../../posts/*.md');
- // For every tag, return a paginate() result.
- // Make sure that you pass `{params: {tag}}` to `paginate()`
- // so that Astro knows which tag grouping the result is for.
- return allTags.map((tag) => {
- const filteredPosts = allPosts.filter((post) => post.tag === tag);
- return paginate(filteredPosts, {
- params: { tag },
- pageSize: 10
- });
- });
-}
-const { page } = Astro.props;
-const { params } = Astro.request;
-```
diff --git a/docs/src/pages/en/guides/publish-to-npm.md b/docs/src/pages/en/guides/publish-to-npm.md
deleted file mode 100644
index 2b3d88932..000000000
--- a/docs/src/pages/en/guides/publish-to-npm.md
+++ /dev/null
@@ -1,216 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Publish to NPM
-description: Learn how to publish Astro components to NPM
----
-
-Building a new Astro component? **Publish it to [npm!](https://npmjs.com/)**
-
-Publishing a component is a great way to reuse work across your team, your company, or the entire world. Astro components can be published to and installed from npm, just like any other JavaScript package.
-
-**Astro's ability to publish and reuse popular components is one of it's most powerful features!**
-
-Even if you don't plan on publishing your components online, the patterns outlined below can help any developer design reusable components in isolation from their custom website or business logic.
-
-Looking for inspiration? Check out some of [our favorite themes & components][/themes] from the Astro community. You can also [search npm](https://www.npmjs.com/search?q=keywords:astro-component) to see the entire public catalog.
-
-## Creating a package
-
-> Before diving in, it will help have a basic understanding of:
->
-> - [Node Modules](https://docs.npmjs.com/creating-node-js-modules)
-> - [JSON Manifest (`package.json`)](https://docs.npmjs.com/creating-a-package-json-file)
-> - [Workspaces](https://docs.npmjs.com/cli/v7/configuring-npm/package-json#workspaces)
-
-To create a new package, we recommend developing with **workspaces**. This will allow you to develop your component alongside a working copy of Astro.
-
-```
-my-project/
- ├─ demo/
- └─ ... for testing and demonstration
- ├─ package.json
- └─ packages/
- └─ my-component/
- ├─ index.js
- ├─ package.json
- └─ ... additional files used by the package
-```
-
-In this example, named `my-project`, we create a project with a single package, named `my-component`, and a `demo` directory for testing and demonstrating the component.
-
-This is configured in the project root’s `package.json` file.
-
-```json
-{
- "name": "my-project",
- "workspaces": ["demo", "packages/*"]
-}
-```
-
-In this example, multiple packages can be developed together from the `packages` directory. These packages can also be referenced from `demo`, where you can install a working copy of Astro.
-
-```shell
-npm init astro demo --template minimal
-```
-
-Now let’s explore the files that will make up your individual package:
-
-### `package.json`
-
-The `package.json` in the package directory includes all of the information related to your package, including its description, dependencies, and any other package metadata.
-
-```json
-{
- "name": "my-component",
- "description": "... description",
- "version": "1.0.0",
- "type": "module",
- "exports": {
- ".": "./index.js",
- "./astro": "./MyAstroComponent.astro",
- "./react": "./MyReactComponent.jsx"
- },
- "files": ["index.js", "MyAstroComponent.astro", "MyReactComponent.jsx"],
- "keywords": ["astro-component", "... etc", "... etc"]
-}
-```
-
-#### `package.json#description`
-
-The short description of your component used to help others know what it does.
-
-```json
-{
- "description": "An Astro Element Generator"
-}
-```
-
-#### `package.json#type`
-
-The module format used by Node.js and Astro to interpret your `index.js` files.
-
-```json
-{
- "type": "module"
-}
-```
-
-We recommend using `"type": "module"` so that your `index.js` can be used as an entrypoint with `import` and `export`.
-
-#### `package.json#exports`
-
-The entry points allowed by Astro to import your component or any of its [files](#packagejsonfiles).
-
-```json
-{
- "exports": {
- ".": "./index.js",
- "./astro": "./MyAstroComponent.astro",
- "./react": "./MyReactComponent.jsx"
- }
-}
-```
-
-In this example, importing `my-component` would use `index.js`, while importing `my-component/astro` or `my-component/react` would use `MyAstroComponent.astro` or `MyReactComponent.jsx`.
-
-#### `package.json#files`
-
-```json
-{
- "files": ["index.js", "MyAstroComponent.astro", "MyReactComponent.jsx"]
-}
-```
-
-#### `package.json#keywords`
-
-An array of keywords relevant to your component that are used to help others [find your component on npm](https://www.npmjs.com/search?q=keywords:astro-component) and any other search catalogs.
-
-We recommend adding the `astro-component` as a special keyword to maximize its discoverability in the Astro ecosystem.
-
-```json
-{
- "keywords": ["astro-component", "... etc", "... etc"]
-}
-```
-
----
-
-### `index.js`
-
-The main **package entrypoint** used whenever your package is imported.
-
-```js
-export { default as MyAstroComponent } from './MyAstroComponent.astro';
-
-export { default as MyReactComponent } from './MyReactComponent.jsx';
-```
-
-This allows you to package multiple components together into a single interface.
-
-#### Example: Using Named Imports
-
-```astro
----
-import { MyAstroComponent } from 'my-component';
-import { MyReactComponent } from 'my-component';
----
-en-us `,
- // The list of items for your RSS feed, sorted.
- items: sortedPosts.map(item => ({
- title: item.title,
- description: item.description,
- link: item.url,
- pubDate: item.date,
- })),
- // Optional: Customize where the file is written to.
- // Otherwise, defaults to "/rss.xml"
- dest: "/my/custom/feed.xml",
- });
- // Return your paths
- return [...];
-}
-```
-
-Note: RSS feeds will **not** be built during development. Currently, RSS feeds are only generated during your final build.
-
-### Styling
-
-RSS Feeds can be styled with an XSL stylesheet for a more pleasant user experience when they are opened directly in a browser. By default, Astro does not set a stylesheet for RSS feeds, but it can be enabled by setting the `stylesheet` option.
-
-Astro can automatically use [Pretty Feed](https://github.com/genmon/aboutfeeds/blob/main/tools/pretty-feed-v3.xsl), a popular open-source XSL stylesheet. To enable this behavior, pass `stylesheet: true`.
-
-If you'd like to use a custom XSL stylesheet, you can pass a string value like `stylesheet: '/my-custom-stylesheet.xsl'`. This file should be in your `public/` directory (in this case, `public/my-custom-stylesheet.xsl`).
diff --git a/docs/src/pages/en/guides/styling.md b/docs/src/pages/en/guides/styling.md
deleted file mode 100644
index 5687ff7b8..000000000
--- a/docs/src/pages/en/guides/styling.md
+++ /dev/null
@@ -1,640 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Styling & CSS
-description: Learn how to style components with Astro.
----
-
-Astro includes special handling to make writing CSS as easy as possible. Styling inside of Astro components is done by adding a `
-
-I’m a scoped style and I’m red!
-I'm a scoped style and I’m cursive!
-```
-
-Note that the `h1` selector won’t bleed out of the current component! These styles won’t apply any other `h1` tags outside this document. Not even child components.
-
-_Tip: even though you can use element selectors, using classnames is preferred. This is not only slightly more performant, but is also easier to read, especially in a large document._
-
-### Global styles
-
-Of course, the real power of CSS is being able to reuse as much as possible! The preferred method of loading global styles is by using a standard `Scoped Page Title
-
-```
-
-_Note: `Astro.resolve()` is a handy utility that helps resolve files from anywhere ([docs][astro-resolve])_
-
-#### Styling children
-
-If you’d like scoped styles to apply to children, you can use the special `:global()` function borrowed from [CSS Modules][css-modules]:
-
-```astro
-
----
-import PostContent from './Post.astro';
----
-
-
-Title
-
-
-```
-
-This is a great way to style things like blog posts, or documents with CMS-powered content where the contents live outside of Astro. But be careful when styling children unconditionally, as it breaks component encapsulation. Components that appear different based on whether or not they have a certain parent component can become unwieldy quickly.
-
-#### Global styles within style tag
-
-If you’d like to use global styles but you don’t want to use a normal `Globally-styled
-```
-
-You can achieve the same by using the `:global()` function at the root of a selector:
-
-```html
-
-```
-
-It’s recommended to only use this in scenarios where a `
-
-```
-
-_Note: all the examples here use `lang="scss"` which is a great convenience for nesting, and sharing [colors and variables][sass-use], but it's entirely optional and you may use normal CSS if you wish._
-
-That `.btn` class is scoped within that component, and won't leak out. It means that you can **focus on styling and not naming.** Local-first approach fits in very well with Astro's ESM-powered design, favoring encapsulation and reusability over global scope. While this is a simple example, it should be noted that **this scales incredibly well.** And if you need to share common values between components, [Sass' module system][sass-use] also gets our recommendation for being easy to use, and a great fit with component-first design.
-
-By contrast, Astro does allow global styles via the `:global()` and `
-
-
- Menu
-
-```
-
-This is undesirable because now `` and `` fight over what the final button looks like. Now, whenever you edit one, you'll always have to edit the other, and they are no longer truly isolated as they once were (now coupled by a bidirectional styling dependency). It's easy to see how this pattern only has to be repeated a couple times before being afraid that touching any styles _anywhere_ may break styling in a completely different part of the app (queue `peter-griffin-css-blinds.gif`).
-
-Instead, let `` control its own styles, and try a prop:
-
-```astro
----
-// src/components/Button.astro
-const { theme } = Astro.props;
----
-
-
-
-
-```
-
-Elsewhere, you can use `` to set the type of button it is. This preserves the contract of _Button is in charge of its styles, and Nav is in charge of its styles_, and now you can edit one without affecting the other. The worst case scenario of using global styles is that the component is broken and unusable (it's missing part of its core styles). But the worst case scenario of using props (e.g. typo) is that a component will only fall back to its default, but still usable, state.
-
-💁 **Why this works well in Astro**: Astro is inspired most by JavaScript modules: you only need to know about what's in one file at a time, and you never have to worry about something in a remote file affecting how this code runs. But we're not alone in this; Vue and Svelte have both capitalized on and popularized the idea that styles and markup are natural fits in the same component file. [You can still have separation of concerns][peace-on-css] even with markup, styling, and logic contained in one file. In fact, that's what makes component design so powerful! So write CSS without fear that you picked a name that's used by some other component across your app.
-
-#### Utility CSS
-
-Recently there has been a debate of all-scoped component styles vs utility-only CSS. But we agree with people like Sarah Dayan who ask [why can't we have both][utility-css]? Truth is that while having scoped component styles are great, there are still hundreds of times when the website's coming together when two components just don't line up _quite_ right, and one needs a nudge. Or different text treatment is needed in one component instance.
-
-While the thought of having perfect, pristine components is nice, it's unrealistic. No design system is absolutely perfect, and every design system has inconsistencies. And it's in reconciling these inconsistencies where components can become a mess without utility CSS. Utility CSS is great for adding minor tweaks necessary to get the website out the door. But they also are incomplete on their own—if you've ever tried to manage responsive styles or accessible focus states with utility CSS it can quickly become a mess! **Utility CSS works best in partnership with component (scoped) CSS**. And in order to be as easy as possible to use, Utility CSS should be global (arguably should be your only global CSS, besides maybe reset.css) so you don't have to deal with imports all willy-nilly.
-
-Some great problems best handled with Utility CSS are:
-
-- [margin](https://github.com/drwpow/sass-utils#-margin--padding)
-- [padding](https://github.com/drwpow/sass-utils#-margin--padding)
-- [text/background color](https://github.com/drwpow/sass-utils#-color)
-- [font size and family](https://github.com/drwpow/sass-utils#%F0%9F%85%B0%EF%B8%8F-font--text)
-- [default element styling](https://github.com/kognise/water.css)
-
-In Astro, we recommend the following setup for this:
-
-```html
-
- ` (1), `` (2), and `` (3). We add them to our page like so:
-
-```astro
----
-// src/pages/index.astro
-
-import Nav from '../components/Nav.astro';
-import BigPost from '../components/BigPost.astro';
-import Grid from '../components/Grid.astro';
-import MediumPosts from '../components/MediumPosts.astro';
-import SmallPosts from '../components/SmallPosts.astro';
-import Footer from '../components/Footer.astro';
----
-
-
-
-
-
-
-
-
-```
-
-This _looks_ clean, but looks can be deceiving. At first glance, we may think that `` is controlling the layout, but that's an illusion. We actually have `` handling its own width, `` loading 2 components and controlling its width, and `` loading 4+ components and controlling its width. In total, including ``, that means **4 components** are all fighting over the same layout. Remove one post from ``, the layout breaks. Edit ``, the layout breaks. Edit ``, the layout breaks. If you think about it, none of these components are truly reusable—they might as well just be one big file.
-
-This is actually the **Global CSS Problem** in disguise—multiple components fight over how they all lay out together, without layout being one, central responsibility (kinda like global CSS)! Now that we identified the problem, one way to fix this is to hoist the entire layout to the top level, and load all components there, too:
-
-```astro
----
-// src/pages/index.astro
-
-import Nav from '../components/Nav.astro';
-import BigPost from '../components/BigPost.astro';
-import MediumPost from '../components/MediumPost.astro';
-import SmallPost from '../components/SmallPost.astro';
-import Footer from '../components/Footer.astro';
----
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-If you remember the [CSS box model][box-model], `margin` extends beyond the boundaries of the box. This means that when you place `margin` on the outermost element, now that will push other components next to it. Even though the styles are scoped, it's _technically_ affecting elements around it, so it [breaks the concept of style containment][layout-isolated].
-
-When you have components that rearrange, or appear different when they're next to other components, that's a hard battle to win. **Components should look and act the same no matter where they are placed.** That's what makes them components!
-
-💁 **Why this works well in Astro**: margins pushing other components around creeps into your styling architecture in sneaky ways, and can result in the creation of some wonky or brittle layout components. Avoiding it altogether will keep your layout components simpler, and you'll spend less time styling in general.
-
-#### Suggestion #4: Avoid global media queries
-
-The final point is a natural boundary of **Scoped Styles**. That extends to breakpoints, too! You know that one, weird breakpoint where your `Hello, World!
-
-
-
-
-
-
-```
-
-Above is an example of the Astro's Component's Syntax, which comprises of both HTML & JSX.
-
-You can create more pages in the `src/pages` directory, and Astro will use the filename to create new pages on your site. For example, by creating a new file at `src/pages/about.astro` (reusing the previous snippet), Astro will generate a new page at the URL : `http://localhost/about`
-
-## [Start Astro](#start-astro)
-
-```bash
-npm run dev
-```
-
-Astro will now start serving your application on `http://localhost:3000`. By opening this URL in your browser, you should see the Astro's “Hello, World”.
-
-If you need to share your development progress on the local network or check out the app from a phone, just add the following [snowpack](https://www.snowpack.dev/reference/configuration#devoptionshostname) option to `astro.config.mjs`:
-
-```js
-devOptions: {
- hostname: '0.0.0.0',
-}
-```
-
-## [Build Astro](#build-astro)
-
-```bash
-npm run build
-```
-
-This will instruct Astro to build your site and save it directly to disk. Your application is now ready in the `dist/` directory.
-
-## Next Steps
-
-Success! You're now ready to start developing!
-
-We highly encourage you to get more familiar with the way Astro works. You can do so by further exploring our Docs, we suggest that you consider the following:
-
-📚 Learn more about Astro's project structure in our [Project Structure guide.](/en/core-concepts/project-structure)
-
-📚 Learn more about Astro's component syntax in our [Astro Components guide.](/en/core-concepts/astro-components)
-
-📚 Learn more about Astro's file-based routing in our [Routing guide.](/en/core-concepts/astro-pages)
diff --git a/docs/src/pages/en/migration/0.21.0.md b/docs/src/pages/en/migration/0.21.0.md
deleted file mode 100644
index 70d127c1f..000000000
--- a/docs/src/pages/en/migration/0.21.0.md
+++ /dev/null
@@ -1,264 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Migrating to v0.21
-description: How to migrate projects from Astro v0.20.
----
-
-## Vite
-
-Starting in v0.21, Astro is built with [Vite].
-As a result, configurations written in `snowpack.config.mjs` should be moved into `astro.config.mjs`.
-
-```js
-// @ts-check
-
-/** @type {import('astro').AstroUserConfig} */
-export default {
- renderers: [],
- vite: {
- plugins: [],
- },
-};
-```
-
-To learn more about configuring Vite, please visit their [configuration guide](https://vitejs.dev/config/).
-
-## Aliasing
-
-In Astro v0.21, import aliases can be added from `tsconfig.json` or `jsconfig.json`.
-
-```json
-{
- "compilerOptions": {
- "baseUrl": ".",
- "paths": {
- "@/components/*": ["src/components/*"]
- }
- }
-}
-```
-
-_These aliases are integrated automatically into [VSCode](https://code.visualstudio.com/docs/languages/jsconfig) and other editors._
-
-## Variables in Scripts & Styles
-
-In Astro v0.21, _serializable_ server-side variables can be passed into client-side `
-✓
-```
-
-## Imports on top bug
-
-In Astro v0.21, a bug has been introduced that requires imports inside components to be at the top of your frontmatter.
-
-```astro
----
-import Component from '../components/component.astro'
-const whereShouldIPutMyImports = "on top!"
----
-```
-
-_Note: This is a bug that will be fixed._
-
-## Components in Markdown
-
-In Astro v0.21, Components from any framework can be used within Markdown files.
-
-```markdown
----
-layout: '...'
-setup: |
- import MyReactComponent from '../components/MyReactComponent.jsx'
----
-
-# Hydrating on visibility
-
-
-
-# Hello world!
-
-
-```
-
-## Components in Frontmatter
-
-Previously, you could create mini Astro Components inside of the Astro Frontmatter, using JSX syntax instead of Astro's component syntax. This was always a bit of a hack, but in the new compiler it became impossible to support. We hope to re-introduce this feature in a future release of Astro using a different, non-JSX API.
-
-To migrate to v0.21, please convert all JSX Astro components (that is, any Astro components created inside of another component's frontmatter) to standalone components.
-
-## Environment Variables
-
-In Astro v0.21, environment variables can be loaded from `.env` files in your project directory.
-
-```ini
-.env # loaded in all cases
-.env.local # loaded in all cases, ignored by git
-.env.[mode] # only loaded in specified mode
-.env.[mode].local # only loaded in specified mode, ignored by git
-```
-
-For security purposes, only variables prefixed with `PUBLIC_` are accessible to your code.
-
-```ini
-SECRET_PASSWORD=password123
-PUBLIC_ANYBODY=there
-```
-
-In this example, `PUBLIC_ANYBODY` will be available as `import.meta.env.PUBLIC_ANYBODY` in server or client code, while `SECRET_PASSWORD` will not.
-
-> In prior releases, these variables were prefixed with `SNOWPACK_PUBLIC_` and required the `@snowpack/plugin-env` plugin.
-
-## File Extensions
-
-In Astro v0.21, files need to be referenced by their actual extension, exactly as it is on disk.
-
-```tsx
-// Div.tsx
-export default function Div(props) {
- return
;
-}
-```
-
-In this example, `Div.tsx` would need to be referenced as `Div.tsx`, not `Div.jsx`.
-
-```diff
-- import Div from './Div.jsx' // Astro v0.20
-+ import Div from './Div.tsx' // Astro v0.21
-```
-
-This same change applies to styles.
-
-```scss
-// Div.scss
-div {
- all: unset;
-}
-```
-
-```diff
--
-{data.slice(0, 3).map((post) => (
-
- {post.title}
- {post.description}
- Read more
-
-))}
-
Welcome to {path}
-```
-
-### `Astro.slots`
-
-`Astro.slots` returns an object with any slotted regions passed into the current Astro file.
-
-```js
-const {
- heading as headingSlot, // true or undefined, based on whether `<* slot="heading">` was used.
- default as defaultSlot, // true or undefined, based on whether `<* slot>` or `<* default>` was used.
-} = Astro.slots;
-```
-
-## `getStaticPaths()`
-
-If a page uses dynamic params in the filename, that component will need to export a `getStaticPaths()` function.
-
-This function is required because Astro is a static site builder. That means that your entire site is built ahead of time. If Astro doesn't know to generate a page at build time, your users won't see it when they visit your site.
-
-```astro
----
-export async function getStaticPaths() {
- return [
- { params: { /* required */ }, props: { /* optional */ } },
- { params: { ... } },
- { params: { ... } },
- // ...
- ];
-}
----
-
-```
-
-The `getStaticPaths()` function should return an array of objects to determine which paths will be pre-rendered by Astro.
-
-⚠️ The `getStaticPaths()` function executes in its own isolated scope once, before any page loads. Therefore you can't reference anything from its parent scope, other than file imports. The compiler will warn if you break this requirement.
-
-### `params`
-
-The `params` key of every returned object tells Astro what routes to build. The returned params must map back to the dynamic parameters and rest parameters defined in your component filepath.
-
-`params` are encoded into the URL, so only strings are supported as values. The value for each `params` object must match the parameters used in the page name.
-
-For example, suppose that you have a page at `src/pages/posts/[id].astro`. If you export `getStaticPaths` from this page and return the following for paths:
-
-```astro
----
-export async function getStaticPaths() {
- return [
- { params: { id: '1' } },
- { params: { id: '2' } }
- ];
-}
-const {id} = Astro.request.params;
----
-{id}
-```
-
-Then Astro will statically generate `posts/1` and `posts/2` at build time.
-
-### Data Passing with `props`
-
-To pass additional data to each generated page, you can also set a `props` value on every returned path object. Unlike `params`, `props` are not encoded into the URL and so aren't limited to only strings.
-
-For example, suppose that you generate pages based off of data fetched from a remote API. You can pass the full data object to the page component inside of `getStaticPaths`:
-
-```astro
----
-export async function getStaticPaths() {
- const data = await fetch('...').then(response => response.json());
- return data.map((post) => {
- return {
- params: { id: post.id },
- props: { post } };
- });
-}
-const {id} = Astro.request.params;
-const {post} = Astro.props;
----
-{id}: {post.name}
-```
-
-Then Astro will statically generate `posts/1` and `posts/2` at build time using the page component in `pages/posts/[id].astro`. The page can reference this data using `Astro.props`:
-
-### `paginate()`
-
-Pagination is a common use-case for websites that Astro natively supports via the `paginate()` function. `paginate()` will automatically generate the array to return from `getStaticPaths()` that creates one URL for every page of the paginated collection. The page number will be passed as a param, and the page data will be passed as a `page` prop.
-
-```js
-export async function getStaticPaths({ paginate }) {
- // Load your data with fetch(), Astro.fetchContent(), etc.
- const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`);
- const result = await response.json();
- const allPokemon = result.results;
- // Return a paginated collection of paths for all posts
- return paginate(allPokemon, { pageSize: 10 });
-}
-// If set up correctly, The page prop now has everything that
-// you need to render a single page (see next section).
-const { page } = Astro.props;
-```
-
-`paginate()` assumes a file name of `[page].astro` or `[...page].astro`. The `page` param becomes the page number in your URL:
-
-- `/posts/[page].astro` would generate the URLs `/posts/1`, `/posts/2`, `/posts/3`, etc.
-- `/posts/[...page].astro` would generate the URLs `/posts`, `/posts/2`, `/posts/3`, etc.
-
-#### The pagination `page` prop
-
-Pagination will pass a `page` prop to every rendered page that represents a single page of data in the paginated collection. This includes the data that you've paginated (`page.data`) as well as metadata for the page (`page.url`, `page.start`, `page.end`, `page.total`, etc). This metadata is useful for things like a "Next Page" button or a "Showing 1-10 of 100" message.
-
-| Name | Type | Description |
-| :----------------- | :-------------------: | :-------------------------------------------------------------------------------------------------------------------------------- |
-| `page.data` | `Array` | Array of data returned from `data()` for the current page. |
-| `page.start` | `number` | Index of first item on current page, starting at `0` (e.g. if `pageSize: 25`, this would be `0` on page 1, `25` on page 2, etc.). |
-| `page.end` | `number` | Index of last item on current page. |
-| `page.size` | `number` | How many items per-page. |
-| `page.total` | `number` | The total number of items across all pages. |
-| `page.currentPage` | `number` | The current page number, starting with `1`. |
-| `page.lastPage` | `number` | The total number of pages. |
-| `page.url.current` | `string` | Get the URL of the current page (useful for canonical URLs) |
-| `page.url.prev` | `string \| undefined` | Get the URL of the previous page (will be `undefined` if on page 1). |
-| `page.url.next` | `string \| undefined` | Get the URL of the next page (will be `undefined` if no more pages). |
-
-### `rss()`
-
-RSS feeds are another common use-case that Astro supports natively. Call the `rss()` function to generate an `/rss.xml` feed for your project using the same data that you loaded for this page. This file location can be customized (see below).
-
-```js
-// Example: /src/pages/posts/[...page].astro
-// Place this function inside your Astro component script.
-export async function getStaticPaths({rss}) {
- const allPosts = Astro.fetchContent('../post/*.md');
- const sortedPosts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
- // Generate an RSS feed from this collection
- rss({
- // The RSS Feed title, description, and custom metadata.
- title: 'Don’s Blog',
- description: 'An example blog on Astro',
- customData: `en-us `,
- // The list of items for your RSS feed, sorted.
- items: sortedPosts.map(item => ({
- title: item.title,
- description: item.description,
- link: item.url,
- pubDate: item.date,
- })),
- // Optional: Customize where the file is written to.
- // Defaults to "/rss.xml"
- dest: "/my/custom/feed.xml",
- });
- // Return a paginated collection of paths for all posts
- return [...];
-}
-```
-
-```ts
-// The full type definition for the rss() function argument:
-interface RSSArgument {
- /** (required) Title of the RSS Feed */
- title: string;
- /** (required) Description of the RSS Feed */
- description: string;
- /** Specify arbitrary metadata on opening tag */
- xmlns?: Record;
- /** Specify custom data in opening of file */
- customData?: string;
- /**
- * Specify where the RSS xml file should be written.
- * Relative to final build directory. Example: '/foo/bar.xml'
- * Defaults to '/rss.xml'.
- */
- dest?: string;
- /** Return data about each item */
- items: {
- /** (required) Title of item */
- title: string;
- /** (required) Link to item */
- link: string;
- /** Publication date of item */
- pubDate?: Date;
- /** Item description */
- description?: string;
- /** Append some other XML-valid data to this item */
- customData?: string;
- }[];
-}
-```
-
-## `import.meta`
-
-> In this section we use `[dot]` to mean `.`. This is because of a bug in our build engine that is rewriting `import[dot]meta[dot]env` if we use `.` instead of `[dot]`.
-
-All ESM modules include a `import.meta` property. Astro adds `import[dot]meta[dot]env` through [Vite](https://vitejs.dev/guide/env-and-mode.html).
-
-**`import[dot]meta[dot]env[dot]SSR`** can be used to know when rendering on the server. Sometimes you might want different logic, for example a component that should only be rendered in the client:
-
-```jsx
-import { h } from 'preact';
-
-export default function () {
- // Note: rewrite "[dot]" to "." for this to to work in your project.
- return import[dot]meta[dot]env[dot]SSR ?
: ` as we move towards our v1.0 release.
-
-## `
- # Markdown syntax is now supported! **Yay!**
-
-```
-
-See our [Markdown Guide](/en/guides/markdown-content) for more info.
-
-
-
-## `
-
-
- ## Featured Theme
-
-
- {themes.featured.map((item) =>
-
- ## Official Themes
-
- Astro maintains several official themes for documentation sites, portfolios, and more.
-
-
- {themes.official.map((item) =>
-
- ## Community Themes
-
- Checkout some themes developed by our community!
-
-
- {themes.community.map((item) =>
-
- ## Featured Packages
-
- Our package ecosystem is growing! Check out these featured community packages. Search the entire collection [on npm.](https://www.npmjs.com/search?q=keywords%3Aastro-component)
-
-
- {components.community.map((item) =>
-
- > Want to see your own work featured? [Share it to Discord!](https://astro.build/chat)
- > We'll often take our favorites from the `#showcase` channel and post them here.
-
-
diff --git a/docs/src/pages/es/comparing-astro-vs-other-tools.md b/docs/src/pages/es/comparing-astro-vs-other-tools.md
deleted file mode 100644
index 5502aedb2..000000000
--- a/docs/src/pages/es/comparing-astro-vs-other-tools.md
+++ /dev/null
@@ -1,233 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Astro versus X
-lang: es
----
-
-Con frecuencia nos preguntamos, "¿Cómo se comporta Astro en comparación a mi generador de páginas web favorito, **\_\_\_\_**?". Esta guía fue escrita para responder a esa pregunta, al comparar varios generadores de páginas web y alternativas a Astro.
-
-Si no ves tu generador de páginas web favorito en la lista, [pregúntanos en Discord.](https://astro.build/chat)
-
-## Estado del Proyecto
-
-Una nota rápida sobre la madurez del proyecto: **Astro aún se encuentra en beta.** Muchas de las herramientas listadas aquí son mucho más maduras. !Algunas tienen más de 12 años en comparación a Astro!
-
-Algunas características, aunque son pocas, aún no están disponibles en Astro y algunas APIs aún no están terminadas. Sin embargo, el proyecto se considera estable desde un punto de vista de los errores; además, ya se han construido muchas páginas web usando Astro. Esto es un punto importante a considerar al momento de escoger a Astro.
-
-## Docusaurus vs. Astro
-
-[Docusaurus](https://docusaurus.io/) es un popular generador de sitios web sobre documentación. Docusaurus desarrollado por React para generar tu UI del sitio web; mientras que Astro soporta React, Vue.js, Svelte, y plantillas HTML.
-
-Docusaurus fue diseñada para construir la documentación de las páginas web y tienen una creación propia y unas características específicas de documentación que Astro no posee. En lugar de eso, Astro ofrece características específicas de documentación mediante un tema oficial [`docs`](https://github.com/withastro/astro/tree/main/examples/docs) que puedes utilizar en tu sitio. !Este sitio web se construyó usando ese tema!
-
-#### Comparando el Rendimiento de Docusaurus vs. Astro
-
-En la mayoría de casos, los sitios web de Astro cargarán mucho más rápido que los sitios web de Docusaurus. Esto es porque Astro automáticamente quita el código JavaScript innecesario de la página, cargando sólo los componentes individuales que la página que necesita. Esta característica se llama [hidratación parcial](/es/core-concepts/component-hydration).
-
-Docusaurus no soporta hidratación parcial, en lugar de eso, hace que el usuario cargue y rehidrata la página completa en el navegador, incluso si la mayoría del contenido de la página es estático. Esto crea una carga de página más lenta y un peor rendimiento para tu sitio web. No hay manera de deshabilitar este comportamiento en Docusaurus.
-
-#### Caso de Estudio: Documentando un sitio web
-
-[docusaurus.io/docs](https://docusaurus.io/docs) es la documentación oficial de Docusaurus y está construida con Docusaurus. El sitio web ofrece unas características similares en su diseño y funcionalidad al compararla con documentación oficial de Astro. Esto nos da una **_vista detallada y realista_** entre los dos generadores de sitios web.
-
-- **Puntaje de rendimiento de Docusaurus**: 61 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocusaurus.io%2Fdocs)
-- **Puntaje de rendimiento de Astro**: 99 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Una de las más grandes razones detrás de la diferencia en los rendimientos es que la carga de Javascript en Astro es el poco tiempo de carga de Javascropt en Astro: [docusaurus.io/docs](https://docusaurus.io/docs) carga **238kb** de Javascript en la primera carga; mientras que [docs.astro.build](https://docs.astro.build/es/getting-started) carga **78.7kb** (en general, 67% menos de JavaScript) _después_ de la primera carga.
-
-## Elder.js vs. Astro
-
-[Elder.js](https://elderguide.com/tech/elderjs/) es un dogmático generador de sitios web estáticos de código abierto que desarrollado para Svelte.
-
-Elder.js utiliza Svelte para generar tu sitio web. Astro es más flexible: eres libre de crear un componente UI en cualquier librería popular (React, Preact, Vue, Svelte, Solid entre otros) o puedes crear un componente de Astro con una sintaxis parecida a HTML, que es similar a HTML + JSX.
-
-Elder.js es el único en esta lista, junto con Astro, que soporta [hidratación parcial](/es/core-concepts/component-hydration). Astro y Elder.js automáticamente quitan el código JavaScript innecesario de la página, cargando sólo los componentes individuales que se necesiten. Elder.js tiene una API de hidratación parcial un poco diferente, pero Astro soporta algunas características que Elder.js no soporta (como `client:media`). Sin embargo, ambos generadores de sitios web construyen sitios web similares en temas de rendimiento.
-
-Elder.js utiliza una solución de rutas personalizadas que puede sentirse poco familiar para los nuevos desarrolladores. Astro utiliza [rutas basadas en archivos](/es/core-concepts/routing) que debería sentirse familiar a todos los desarrolladores que han visto Next.js, SvelteKit y otros generadores de sitios web estáticos como Eleventy.
-
-Elder.js fue diseñado para correr en sitios web grandes y afirma que puede construir un sitio web de 20 mil páginas en menos de 10 minutos (en una modesta máquina virtual). Al momento de escribir esto, Astro construye mil páginas en 66 segundos, pero aún no ha sido probado en proyectos de más de 20 mil páginas. Astro está aún en la fase inicial y la meta para Astro v1.0 es alcanzar la velocidad de construcción sitios web de Elder.js.
-
-Elder.js soporta tanto Static Site Generation (SSG) como Server-Side Rendering (SSR). Hoy en día, Astro tan sólo soporta Static Site Generation (SSG).
-
-## Eleventy vs. Astro
-
-[Eleventy](https://www.11ty.dev/) es un popular creador de sitios estáticos desarrollado por Node.js.
-
-Eleventy utiliza mucho [plantillas de lenguaje HTML antiguas](https://www.11ty.dev/docs/languages/) para renderizar tu sitio web: Nunjucks, Liquid, Pug, EJS, entre otros. Astro es más flexible: eres libre de crear un componente UI en cualquier librería popular (React, Preact, Vue, Svelte, Solid entre otros) o puedes crear un componente de Astro con una sintaxis parecida a HTML, que es similar a HTML + JSX.
-
-#### Comparando el Rendimiento de Eleventy vs. Astro
-
-Conceptualmente, Eleventy está alineado con el enfoque de Astro sobre "el uso mínimo de Javascript en el lado del cliente". Tanto Eleventy y Astro ofrecen un rendimiento similar, un uso extremadamente bajo de Javascript por defecto.
-
-Eleventy alcanza este punto al empujarte a evitar usar Javascript. Los sitios de Eleventy son escritos, con frecuencia, con poco o ninguna línea de Javascript. Esto se convierte en un problema cuando necesitas Javascript en el lado del cliente. Es tu responsabilidad crear tu propia línea de construcción de recursos para Eleventy. Esto puede ser una tarea difícil y te obliga a configurar una gran cantidad de optimizaciones, como la fusión de archivos, la minificación y otros.
-
-Por otro lado, Astro automáticamente construye el CSS y Javascript en el lado del cliente por ti. Astro automáticamente quita el código Javascript innecesario de la página, cargando sólo los componentes individuales que se necesiten. Está funcionalidad se llama [hidratación parcial](/es/core-concepts/component-hydration). Mientras que en Eleventy lo puedes alcanzar esto por ti mismo; Astro la ofrece desde el inicio y sin configuración extra.
-
-## Gatsby vs. Astro
-
-[Gatsby](https://www.gatsbyjs.com/) es una popular página web y framework de React.
-
-Gatsby utiliza React para renderizar tu sitio web. Astro es más flexible: eres libre de crear un componente UI en cualquier librería popular (React, Preact, Vue, Svelte, Solid, entre otros) o puedes crear un componente de Astro con una sintaxis parecida a HTML, que es similar a HTML + JSX.
-
-Gatsby v4 soporta tanto Static Site Generation (SSG) como Server-Side Rendering (SSR). Hoy en día, Astro tan sólo soporta Static Site Generation (SSG).
-
-Gatsby requiere de una API personalizada de GraphQL para trabajar con todo el contenido de tu sitio web. Aunque algunos desarrolladores disfrutan de este modelo, una crítica común a Gatsby es que este modelo se vuelve demasiado complejo y difícil de mantener en el tiempo, especialmente cuando las páginas crecen. Astro no requiere una API de GraphQL, en su lugar ofrece apoyos para API familiares (como `fetch()` y `await`) para la carga de datos cuando se necesite.
-
-#### Comparando el Rendimiento de Gatsby vs. Astro
-
-En la mayoría de casos, los sitios de Astro cargarán mucho más rápido que los sitios de Gatsby. Esto pasa porque Astro automáticamente quita el código Javascript innecesario de la página, cargando sólo los componentes individuales que se necesiten. Esta característica se llama [hidratación parcial](/es/core-concepts/component-hydration).
-
-Gatsby no soporta la hidratación parcial. En su lugar, hace que el usuario cargue e hidrate la página completa en el navegador, incluso si la mayoría del contenido es estático. Esto hace que las páginas carguen más lentamente y que el rendimiento sea más bajo para tu sitio web. Gatsby tiene [un plugin comunitario](https://www.gatsbyjs.com/plugins/gatsby-plugin-no-javascript/) para remover todo el Javascript de la página, pero esto rompería muchos sitios web. Esto le queda a usted con una decisión de todo-o-nada para la interactividad en cada una de las páginas.
-
-Gatsby tiene un gran ecosistema de plugins, el cual podría hacer que Gatsby sea una gran opción para tu proyecto dependiendo de tus necesidades. [gatsby-plugin-image](https://www.gatsbyjs.com/plugins/gatsby-plugin-image/) es un popular plugin para optimizar imágenes, esto podría convertir a Gatsby en una mejor opción para algunas páginas con muchas imágenes.
-
-#### Caso de Estudio: Documentando un sitio web
-
-[gatsbyjs.com/docs](https://www.gatsbyjs.com/docs/quick-start/) es la documentación oficial de Gatsby, construida con Gatsby. El sitio web ofrece una interfaz similar y un conjunto de características a comparar con la documentación oficial de Astro. Esto nos da una **_vista detallada y realista_** entre los dos generadores de sitios web.
-
-- **Puntaje de rendimiento de Gatsby**: 64 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fwww.gatsbyjs.com%2Fdocs%2Fquick-start%2F)
-- **Puntaje de rendimiento de Astro**: 99 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Una de las más grandes razones detrás de la diferencia en los rendimientos es que la carga de Javascript en Astro es el poco tiempo de carga de Javascropt en Astro: [gatsbyjs.com/docs](https://www.gatsbyjs.com/docs/quick-start/) carga **417kb** de Javascript en la primera carga; mientras que [docs.astro.build](https://docs.astro.build/es/getting-started) loads **78.7kb** (en general, 81% menos de JavaScript) _después_ de la primera carga.
-
-## Hugo vs. Astro
-
-[Hugo](https://gohugo.io/) es un generador de sitios web estático desarrollado por Go.
-
-Hugo utiliza una [plantilla de lenguajes personalizados](https://gohugo.io/templates/introduction/) para renderizar tu sitio web. Astro te deja crear un componente UI en cualquier librería popular (React, Preact, Vue, Svelte, Solid, entre otros) o puedes crear un componente de Astro con una sintaxis parecida a HTML, que es similar a HTML + JSX.
-
-#### Comparando el Rendimiento de Hugo vs. Astro
-
-Conceptualmente, Hugo está alineado con el enfoque de Astro sobre "el uso mínimo de Javascript en el lado del cliente". Tanto Hugo y Astro ofrecen un rendimiento similar, un uso extremadamente bajo de Javascript por defecto.
-
-Tanto Hugo como Astro, traen incorporado soporte para la construcción, el empaquetado y la minificación de JavaScript. Astro automáticamente quita el código Javascript innecesario de la página, cargando sólo los componentes individuales que se necesiten. Esta característica se llama [hidratación parcial](/es/core-concepts/component-hydration). Mientras que esto lo puedes hacer en Hugo por ti mismo, Astro lo ofrece incorporado por defecto.
-
-## Jekyll vs. Astro
-
-[Jekyll](https://jekyllrb.com/) es un popular generador de sitios estáticos, desarrollado por Ruby.
-
-Jekyll utiliza una vieja versión de [lenguaje de plantillas](https://jekyllrb.com/docs/liquid/) para renderizar tu sitio web. Astro te permite crear páginas usando una interfaz de usuario de librerías de componentes (React, Preact, Vue, Svelte, entre otros otros) o una sintaxis de componente similar a HTML + JSX. Jekyll no soporta la utilización de componentes modernos para las plantillas de HTML.
-
-#### Comparando el Rendimiento de Jekyll vs. Astro
-
-Conceptualmente, Eleventy está alineado con el enfoque de Astro sobre "el uso mínimo de Javascript en el lado del cliente". Tanto Jekyll y Astro ofrecen un rendimiento similar, un uso extremadamente bajo de Javascript por defecto.
-
-Jekyll alcanza este punto porque no permite que el usuario cargue Javascript. Los sitios Jekyll son frecuentemente escritos con poco a ningún Javascript, en su lugar promueven el renderizado de HTML en el lado del servidor. Esto se convierte en un problema cuando necesitas utilizar JavaScript en el lado del cliente. Es tu responsabilidad crear tu propia cadena de procesos de construcción para Jekyll. Esto consume mucho de tu tiempo y te obliga a configurar la empaquetación, la minificación y otras optimizaciones por ti mismo.
-
-En contraste, Astro automáticamente construye el Javascript del lado del cliente para ti. Astro sólo envía el mínimo de Javascript al navegador, minificado, empaquetado y optimizado para producción. Esto puede ser posible por ti mismo en Jekyll, pero con Astro esto se hace por defecto.
-
-## SvelteKit vs. Astro
-
-[SvelteKit](https://kit.svelte.dev/) es un popular sitio web y un marco de trabajo para Svelte.
-
-SeveltKit utiliza Svelte para renderizar tu sitio web. Astro es más flexible: eres libre de crear un componente UI en cualquier librería popular (React, Preact, Vue, Svelte, Solid, entre otros) o puedes crear un componente de Astro con una sintaxis parecida a HTML, que es similar a HTML + JSX.
-
-Tanto SveltKit como Astro, son estructuras o frameworks para crear sitios web. SvelteKit funciona mejor con sitios web altamente dinámicos (como tableros y bandejas de entradas); mientras que Astro funciona mejor con sitios altamente estáticos (como contenido web y sitios de comercio electrónico).
-
-SvelteKit soporta tanto Static Site Generation (SSG) como Server-Side Rendering (SSR). Hoy en día, Astro tan sólo soporta Static Site Generation (SSG).
-
-#### Comparando el Rendimiento de SveltKit vs. Astro
-
-En la mayoría de casos, los sitios de Astro cargarán mucho más rápido que los sitios de SveltKit. Esto pasa porque Astro automáticamente quita el código Javascript innecesario de la página, cargando sólo los componentes individuales que se necesiten. Esta característica se llama [hidratación parcial](/es/core-concepts/component-hydration).
-
-SveltKit no soporta la hidratación parcial, en su lugar hace que el usuario cargue e hidrate la página completa en el navegador, incluso si la mayoría del contenido de la página es estático. Esto crea una carga de página más lenta y un rendimiento inferior para tu sitio web. SveltKit ofrece soporte para [páginas estáticas, con cero JavaScript](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate). Sin embargo, en su página no hay planificación para realizar la hidratación parcial de componentes individuales. Por lo tanto, queda a tu criterio tomar la decisión de todo-o-nada en la interactividad de cada página.
-
-#### Caso de Estudio: Documentando un sitio web
-
-[kit.svelte.dev](https://kit.svelte.dev/docs#ssr-and-javascript-hydrate) es el sitio oficial de SvelteKit, está construido con SvelteKit. El sitio web ofrece una interfaz similar y un conjunto de características a comparar con la documentación oficial de Astro. Esto nos da una **_vista detallada y realista_** entre los dos generadores de sitios web.
-
-Una notable diferencia entre los dos sitios web que se están probando: es que la documentación de SvelteKit se proporciona como una sola página, mientras que la documentación de Astro se divide en múltiples páginas. Este mayor contenido debería tener un impacto negativo en el rendimiento que no está relacionado con la herramienta en sí misma.
-
-- **Puntaje de rendimiento de SveltKit**: 92 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fkit.svelte.dev%2Fdocs)
-- **Puntaje de rendimiento de Astro**: 99 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-El rendimiento de SvelteKit fue muy similar al de Astro en esta prueba.
-
-## Next.js vs. Astro
-
-[Next.js](https://nextjs.org/) es una popular y un framework para React.
-
-Next.js utiliza React para renderizar tu sitio web. Astro es más flexible: eres libre de crear un componente UI en cualquier librería popular (React, Preact, Vue, Svelte, Solid, entre otros) o puedes crear un componente de Astro con una sintaxis parecida a HTML, que es similar a HTML + JSX.
-
-Tanto Next.js como Astro, son frameworks para crear sitios web. Nesxt.js funciona mejor en sitios web altamente dinámicos (como tableros y bandejas de entradas); mientras que Astro funciona mejor con sitios altamente estáticos (como contenido web y sitios de comercio electrónico).
-
-Next.js soporta tanto Static Site Generation (SSG) como Server-Side Rendering (SSR). Hoy en día, Astro tan sólo soporta Static Site Generation (SSG).
-
-#### Comparando el Rendimiento de Gatsby vs. Astro
-
-En la mayoría de casos, los sitios de Astro cargarán mucho más rápido que los sitios de Next.js. Esto pasa porque Astro automáticamente quita el código Javascript innecesario de la página, cargando sólo los componentes individuales que se necesiten. Esta característica se llama [hidratación parcial](/es/core-concepts/component-hydration).
-
-Next.js no soporta hidratación parcial, en su lugar hace que el usuario cargue e hidrate la página completa en el navegador, incluso si la mayoría del contenido de la página es estático. Esto crea una carga de página más lenta y un rendimiento inferior para tu sitio web. Next.js ofrece un [ soporte experimental](https://piccalil.li/blog/new-year-new-website/#heading-no-client-side-react-code) para sitios completamente estáticos con cero Javascript. Sin embargo, en su página no hay planificación para realizar la hidratación parcial de componentes individuales. Por lo tanto, queda a tu criterio tomar la decisión de todo-o-nada en la interactividad de cada página.
-
-Next.js tiene un gran soporte para optimizar imágenes, lo que podría hacer que Next.js sea una buena opción para sitios web con muchas imágenes.
-
-#### Caso de Estudio: Documentando un sitio web
-
-[nextjs.org/docs](https://nextjs.org/docs/getting-started) es la página oficial de Next.js, está construida con Next.js. El sitio web ofrece una interfaz similar y un conjunto de características a comparar con la documentación oficial de Astro. Esto nos da una **_vista detallada y realista_** entre los dos generadores de sitios web.
-
-- **Puntaje de rendimiento de Next.js**: 59 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnextjs.org%2Fdocs%2Fgetting-started)
-- **Puntaje de rendimiento de Astro**: 99 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Una razón de peso por lo que se produce esta diferencia de rendimiento es que Astro tiene una menor carga de JavaScript: [nextjs.org/docs](https://nextjs.org/docs/getting-started) carga **463kb** de JavaScript en la primera carga de la página, mientras que [docs.astro.build](https://docs.astro.build/es/getting-started) carga **78.7kb** (en general, 83% menos de JavaScript) _después_ de la primera carga.
-
-## Nuxt vs. Astro
-
-[Nuxt](https://nuxtjs.org/) es una popular página web y un framework para Vue. Es similar a Next.js
-
-Nuxt utiliza Vue para renderizar tu sitio web. Astro es más flexible: eres libre de crear un componente UI en cualquier librería popular (React, Preact, Vue, Svelte, Solid, entre otros) o puedes crear un componente de Astro con una sintaxis parecida a HTML, que es similar a HTML + JSX.
-
-Tanto Nuxt como Astro, son frameworks para crear sitios web. Nuxt funciona mejor con sitios web altamente dinámicos (como tableros y bandejas de entradas); mientras que Astro funciona mejor con sitios altamente estáticos (como contenido web y sitios de comercio electrónico).
-
-Nuxt soporta tanto Static Site Generation (SSG) como Server-Side Rendering (SSR). Hoy en día, Astro tan sólo soporta Static Site Generation (SSG).
-
-#### Comparando el Rendimiento de Nuxt vs. Astro
-
-En la mayoría de casos, los sitios de Astro cargarán mucho más rápido que los sitios de Nuxt. Esto pasa porque Astro automáticamente quita el código Javascript innecesario de la página, cargando sólo los componentes individuales que se necesiten. Esta característica se llama [hidratación parcial](/es/core-concepts/component-hydration).
-
-Nuxt no soporta hidratación parcial, en su lugar hace que el usuario cargue e hidrate la página completa en el navegador, incluso si la mayoría del contenido de la página es estático. Esto crea una carga de página más lenta y un rendimiento inferior para tu sitio web. No hay forma de deshabilitar este comportamiento en Nuxt.
-
-Nuxt tiene un gran soporte para optimizar imágenes, lo que podría hacer que Nuxt sea una buena opción para sitios web con muchas imágenes.
-
-#### Caso de Estudio: Documentando un sitio web
-
-[nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation) es la documentación oficial de Nuxt, construida con Gatsby. El sitio web ofrece una interfaz similar y un conjunto de características a comparar con la documentación oficial de Astro. Esto nos da una **_vista detallada y realista_** entre los dos generadores de sitios web.
-
-- **Puntaje de rendimiento de Nuxt**: 48 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fnuxtjs.org%2Fdocs%2F2.x%2Fget-started%2Finstallation)
-- **Puntaje de rendimiento de Astro**: 99 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Una de las más grandes razones detrás de la diferencia en los rendimientos es que la carga de Javascript en Astro es el poco tiempo de carga de Javascropt en Astro: [nuxtjs.org/docs](https://nuxtjs.org/docs/2.x/get-started/installation) carga **469kb** de Javascript en la primera carga; mientras que [docs.astro.build](https://docs.astro.build/es/getting-started) loads **78.7kb** (en general, 83% menos de JavaScript) _después_ de la primera carga.
-
-## VuePress vs. Astro
-
-[VuePress](https://vuepress.vuejs.org/guide/) es un constructor de documentación de sitios web, desarrollado por los creadores de Vue.js. VuePress utiliza Vue.js para generar la interfaz de usuario de tu sitio web, mientras que Astro soporta React, Vue.js, Svelte, y plantillas HTML.
-
-VuePress fue diseñado para documentar sitios web y tiene funcionalidades y características propias que Astro no soporta por defecto. En su lugar, Astro ofrece características específicas de documentación mediante un tema oficial [`docs`](https://github.com/withastro/astro/tree/main/examples/docs), el cual puedes usar para tu sitio web. !Este sitio web fue construido usando ese tema!
-
-Actualmente, Evan You (creador de Vue.js) está trabajando en una nueva versión de Vuepress llamado [VitePress.](https://vitepress.vuejs.org/). Si quieres conocer una moderna alternativa a VuePress, [revisa este post de Evan](https://github.com/withastro/astro/issues/1159#issue-974035962) del porqué VitePress podría ser una mejor opción.
-
-#### Comparando el VuePress de Gatsby vs. Astro
-
-En la mayoría de casos, los sitios de Astro cargarán mucho más rápido que los sitios de VuePress. Esto pasa porque Astro automáticamente quita el código Javascript innecesario de la página, cargando sólo los componentes individuales que se necesiten. Esta característica se llama [hidratación parcial](/es/core-concepts/component-hydration).
-
-VuePress no soporta hidratación parcial, en su lugar hace que el usuario cargue e hidrate la página completa en el navegador, incluso si la mayoría del contenido de la página es estático. Esto crea una carga de página más lenta y un rendimiento inferior para tu sitio web. No hay forma de deshabilitar este comportamiento en VuePress.
-
-#### Caso de Estudio: Documentando un sitio web
-
-[vuepress.vuejs.org](https://vuepress.vuejs.org/guide/) es la documentación oficial de VuePress, construida con VuePress. El sitio web ofrece una interfaz similar y un conjunto de características a comparar con la documentación oficial de Astro. Esto nos da una **_vista detallada y realista_** entre los dos generadores de sitios web.
-
-- **Puntaje de rendimiento de Vuepress**: 63 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fvuepress.vuejs.org%2Fguide%2F)
-- **Puntaje de rendimiento de Astro**: 99 de 100 [(ver detalles)](https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2Fdocs.astro.build%2Fgetting-started)
-
-Una de las más grandes razones detrás de la diferencia en los rendimientos es que la carga de Javascript en Astro es el poco tiempo de carga de Javascropt en Astro: [vuepress.vuejs.org](https://vuepress.vuejs.org/guide/) carga **166kb** de Javascript en la primera carga; mientras que [docs.astro.build](https://docs.astro.build/es/getting-started) loads **78.7kb** (en general, 53% menos de JavaScript) _después_ de la primera carga.
-
-## Zola vs. Astro
-
-[Zola](https://www.getzola.org/) es un popular y rápido generador de sitios estáticos, desarrollado por Rust.
-
-Zola utiliza [Tera](https://tera.netlify.app/) para renderizar tu sitio web. Astro es más flexible: eres libre de crear un componente UI en cualquier librería popular (React, Preact, Vue, Svelte, Solid, entre otros) o puedes crear un componente de Astro con una sintaxis parecida a HTML, que es similar a HTML + JSX. Zola no soporta el uso de componentes modernos para plantillas HTML.
-
-#### Comparando el Rendimiento de Gatsby vs. Astro
-
-Conceptualmente, Zola está alineado con el enfoque de Astro sobre "el uso mínimo de Javascript en el lado del cliente". Tanto Zola y Astro ofrecen un rendimiento similar, un uso extremadamente bajo de Javascript por defecto.
-
-Astro ofrece soporte para construir, empaquetar y minimizar JavaScript. Zola requiere usar otra herramienta de construcción como Webpack para empaquetar y procesar JavaScript. Astro automáticamente quita el código Javascript innecesario de la página, cargando sólo los componentes individuales que se necesiten. Esta característica se llama [hidratación parcial](/es/core-concepts/component-hydration). Mientras que Zola puedes hacerlo por ti mismo, Astro lo ofrece incorporado por defecto.
diff --git a/docs/src/pages/es/core-concepts/astro-components.md b/docs/src/pages/es/core-concepts/astro-components.md
deleted file mode 100644
index 13dc279b2..000000000
--- a/docs/src/pages/es/core-concepts/astro-components.md
+++ /dev/null
@@ -1,379 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Componentes de Astro
-lang: es
----
-
-Los **componentes de Astro** (archivos que terminan con `.astro`) son la base de las plantillas del lado del servidor en Astro. Piensa en la sintaxis del componente Astro como HTML mejorado con JavaScript.
-
-Aprender una nueva sintaxis puede ser intimidante, por lo que cuidadosamente diseñamos la sintaxis del componente Astro para que los desarrolladores web se familizarizen lo más pronto posible. En gran medida se basa en patrones que probablemente ya conozcas: componentes, portada, propiedades y expresiones JSX. Estamos seguros de que esta guía te permitirá escribir componentes de Astro en poco tiempo, especialmente si ya estás familiarizado con HTML y JavaScript.
-
-## Visión general de la sintaxis
-
-Un único archivo `.astro` representa un solo componente Astro en tu proyecto. Este patrón se conoce como **Componente de archivo único (SFC, del inglés Single-File Component)**. Tanto Svelte (`.svelte`) como Vue (`.vue`) también siguen este patrón.
-
-A continuación se muestra un recorrido por las diferentes piezas y características de la sintaxis del componente Astro. Puedes leerlo de principio a fin o saltar entre secciones.
-
-### Plantilla HTML
-
-La sintaxis del componente Astro es un superconjunto de HTML. **Si conoces HTML, ya sabes lo suficiente como para escribir tu primer componente Astro.**
-
-Por ejemplo, este archivo de tres líneas es un componente Astro válido:
-
-```html
-
-
-
¡Hola mundo!
-
-```
-
-Un componente Astro representa un fragmento de HTML en tu proyecto. Puede ser un componente reutilizable o una página completa de HTML que incluya elementos ``, `` y ``. Consulta nuestra guía sobre [Páginas de Astro](/es/core-concepts/astro-pages) para aprender a crear tu primera página HTML completa con Astro.
-
-**Cada componente de Astro debe incluir una plantilla HTML.** Aunque puede mejorar su componente de varias maneras (ver más abajo), al fin y al cabo es la plantilla HTML la que dicta cómo se verá tu componente Astro renderizado.
-
-### Estilos CSS
-
-Las reglas CSS dentro de una etiqueta `
-
-```
-
-```html
-
-
-
-
-
-
- ...
-
-
-```
-
-El uso de `
-
-
-```
-
-Arriba hay un ejemplo de la sintaxis del componente de Astro, que comprende HTML y JSX.
-
-Puedes crear más páginas en el directorio `src/pages` y Astro utilizará los archivos creados para generar nuevas páginas de tu sitio web. Por ejemplo, Al crear el archivo `about.astro` en `src/pages/about.astro` (reusando el fragmento de código anterior), Astro generará una página HTML en la dirección URL: `http://localhost/about`.
-
-## [Iniciar Astro](#start-astro)
-
-```bash
-npm run dev
-```
-
-Ahora Astro estará corriendo tu aplicación en `http://localhost:3000`. Al abrir esta URL en tu navegador, deberías ver el “¡Hola, Mundo!” de Astro.
-
-Si necesitas compartir tu progreso de desarrollo en la red local o revisar la aplicación desde un teléfono, sólo agrega la siguiente opción [snowpack](https://www.snowpack.dev/reference/configuration#devoptionshostname) en `astro.config.mjs`:
-
-```js
-devOptions: {
- hostname: '0.0.0.0';
-}
-```
-
-## [Compilar Astro](#build-astro)
-
-```bash
-npm run build
-```
-
-Con esta instrucción Astro generará tu sitio web y lo guardará directamente en el directorio `dist/`. Tu aplicación está ahora lista en el directorio `dist/`.
-
-## Próximos pasos
-
-¡Felicidades! ¡Ahora estás listo para comenzar a desarrollar!
-
-Te recomendamos fervientemente que te familiarices con la forma en que Astro funciona. Lo puedes hacer explorando nuestra documentación, te sugerimos que consideres las siguientes lecturas:
-
-📚 Aprende más sobre la estructura de proyectos de Astro, en nuestra [guía de estructura de proyecto](/es/core-concepts/project-structure).
-
-📚 Aprende más sobre la sintaxis de los componentes de Astro, en nuestra [guía de componentes de Astro](/es/core-concepts/astro-components).
-
-📚 Aprende más sobre la rutas basada en archivos de Astro, en nuestra [guía de rutas](/es/core-concepts/astro-pages).
diff --git a/docs/src/pages/es/quick-start.md b/docs/src/pages/es/quick-start.md
deleted file mode 100644
index 25904f897..000000000
--- a/docs/src/pages/es/quick-start.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Comienzo rápido
-lang: es
----
-
-```shell
-# prerrequisitos: revisa que Node.js está en la versión 14.15.0+, ó 16+
-node --version
-
-# crea un nuevo proyecto en el directorio y entra a él
-mkdir my-astro-project && cd $_
-
-# inicializa el proyecto...
-npm init astro
-
-# instala las dependencias
-npm install
-
-# comienza con el desarrollo
-npm run dev
-```
-
-Para los sitios de producción,
-
-```shell
-# cuando estés listo: crea tu sitio estático en la carpeta `dist/`
-npm run build
-```
-
-Para saber más sobre la instalación y uso de Astro por primera vez, por favor [lea nuestra guía de instalación.](installation)
-
-Si prefieres aprender con ejemplos, revisa nuestra [librería completa de ejemplos](https://github.com/withastro/astro/tree/main/examples) en GitHub. Puedes revisar cualquiera de estos ejemplos localmente ejecutando `npm init astro -- --template "EXAMPLE_NAME"`.
-
-## Comienza con tu proyecto
-
-Dentro del directorio de tu proyecto, ingresa el siguiente comando en la terminal:
-
-```bash
-npm run dev
-```
-
-Astro comenzará a correr en el servidor de desarrollo en [http://localhost:3000](http://localhost:3000). Abre esta ubicación en tu navegador, deberías ver la página de "¡Hola Mundo!" de Astro.
-
-El servidor escuchará los cambios en vivo de los archivos en tu carpeta `src/`, así que, no necesitarás reiniciar la aplicación cuando hagas cambios durante el desarrollo.
-
-## Construye tu proyecto
-
-Para construir tu proyecto, ingresa el siguiente comando en la terminal:
-
-```bash
-npm run build
-```
-
-Este comando hará que Astro cree y guarde tu sitio estático en la carpeta `dist/` de tu proyecto.
-
-## Desplega tu proyecto
-
-Los sitios de Astro son estáticos, por lo que puedes desplegarlos en tu servicio de host favorito:
-
-- [AWS S3 bucket](https://aws.amazon.com/s3/)
-- [Google Firebase](https://firebase.google.com/)
-- [Netlify](https://www.netlify.com/)
-- [Vercel](https://vercel.com/)
-- [Lee más acerca del despliegue con nuestra guía de despliegue de Astro.](/es/guides/deploy)
-
-## Próximos Pasos
-
-¡Felicitaciones! Ahora estás listo para comenzar a desarrollar.
-
-Te recomendamos que te tomes tu tiempo para familiarizarte con la forma en la que Astro. Lo puedes hacer al explorar con mayor profundidad nuestra documentación. Te sugerimos que consideres lo siguiente.
-
-📚 Aprende más sobre la estructura de proyectos de Astro, en nuestra [guía de estructura de proyecto](/es/core-concepts/project-structure).
-
-📚 Aprende más sobre la sintaxis de los componentes de Astro, en nuestra [guía de componentes de Astro](/es/core-concepts/astro-components).
-
-📚 Aprende más sobre la rutas basada en archivos de Astro, en nuestra [guía de rutas](core-concepts/astro-pages).
diff --git a/docs/src/pages/es/reference/api-reference.md b/docs/src/pages/es/reference/api-reference.md
deleted file mode 100644
index 53af45c50..000000000
--- a/docs/src/pages/es/reference/api-reference.md
+++ /dev/null
@@ -1,294 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Referencia de API
-lang: es
----
-
-## `Astro` global
-
-La variable `Astro` global está disponible en todos los contextos en los archivos `.astro`. Tiene las siguientes funciones:
-
-### `Astro.fetchContent()`
-
-`Astro.fetchContent()` is a way to load local `*.md` files into your static site setup.
-
-```astro
----
-// ./src/components/my-component.astro
-const data = Astro.fetchContent('../pages/post/*.md'); // returns an array of posts that live at ./src/pages/post/*.md
----
-
-
-{data.slice(0, 3).map((post) => (
-
- {post.title}
- {post.description}
- Read more
-
-))}
-
Welcome to {path}
-```
-
-### `Astro.slots`
-
-`Astro.slots` returns an object with any slotted regions passed into the current Astro file.
-
-```js
-const {
- heading as headingSlot, // true or undefined, based on whether `<* slot="heading">` was used.
- default as defaultSlot, // true or undefined, based on whether `<* slot>` or `<* default>` was used.
-} = Astro.slots;
-```
-
-## `getStaticPaths()`
-
-If a page uses dynamic params in the filename, that component will need to export a `getStaticPaths()` function.
-
-This function is required because Astro is a static site builder. That means that your entire site is built ahead of time. If Astro doesn't know to generate a page at build time, your users won't see it when they visit your site.
-
-```astro
----
-export async function getStaticPaths() {
- return [
- { params: { /* required */ }, props: { /* optional */ },
- { params: { ... } },
- { params: { ... } },
- // ...
- ];
-}
----
-
-```
-
-The `getStaticPaths()` function should return an array of objects to determine which paths will be pre-rendered by Astro.
-
-⚠️ The `getStaticPaths()` function executes in its own isolated scope once, before any page loads. Therefore you can't reference anything from its parent scope, other than file imports. The compiler will warn if you break this requirement.
-
-### `params`
-
-The `params` key of every returned object tells Astro what routes to build. The returned params must map back to the dynamic parameters and rest parameters defined in your component filepath.
-
-`params` are encoded into the URL, so only strings are supported as values. The value for each `params` object must match the parameters used in the page name.
-
-For example, suppose that you have a page at `src/pages/posts/[id].astro`. If you export `getStaticPaths` from this page and return the following for paths:
-
-```astro
----
-export async function getStaticPaths() {
- return [
- { params: { id: '1' } },
- { params: { id: '2' } }
- ];
-}
-const {id} = Astro.request.params;
----
-{id}
-```
-
-Then Astro will statically generate `posts/1` and `posts/2` at build time.
-
-### Data Passing with `props`
-
-To pass additional data to each generated page, you can also set a `props` value on every returned path object. Unlike `params`, `props` are not encoded into the URL and so aren't limited to only strings.
-
-For example, suppose that you generate pages based off of data fetched from a remote API. You can pass the full data object to the page component inside of `getStaticPaths`:
-
-```astro
----
-export async function getStaticPaths() {
- const data = await fetch('...').then(response => response.json());
- return data.map((post) => {
- return {
- params: { id: post.id },
- props: { post } };
- });
-}
-const {id} = Astro.request.params;
-const {post} = Astro.props;
----
-{id}: {post.name}
-```
-
-Then Astro will statically generate `posts/1` and `posts/2` at build time using the page component in `pages/posts/[id].astro`. The page can reference this data using `Astro.props`:
-
-### `paginate()`
-
-Pagination is a common use-case for websites that Astro natively supports via the `paginate()` function. `paginate()` will automatically generate the array to return from `getStaticPaths()` that creates one URL for every page of the paginated collection. The page number will be passed as a param, and the page data will be passed as a `page` prop.
-
-```js
-export async function getStaticPaths({ paginate }) {
- // Load your data with fetch(), Astro.fetchContent(), etc.
- const response = await fetch(`https://pokeapi.co/api/v2/pokemon?limit=150`);
- const result = await response.json();
- const allPokemon = result.results;
- // Return a paginated collection of paths for all posts
- return paginate(allPokemon, { pageSize: 10 });
-}
-// If set up correctly, The page prop now has everything that
-// you need to render a single page (see next section).
-const { page } = Astro.props;
-```
-
-`paginate()` assumes a file name of `[page].astro` or `[...page].astro`. The `page` param becomes the page number in your URL:
-
-- `/posts/[page].astro` would generate the URLs `/posts/1`, `/posts/2`, `/posts/3`, etc.
-- `/posts/[...page].astro` would generate the URLs `/posts`, `/posts/2`, `/posts/3`, etc.
-
-#### The pagination `page` prop
-
-Pagination will pass a `page` prop to every rendered page that represents a single page of data in the paginated collection. This includes the data that you've paginated (`page.data`) as well as metadata for the page (`page.url`, `page.start`, `page.end`, `page.total`, etc). This metadata is useful for things like a "Next Page" button or a "Showing 1-10 of 100" message.
-
-| Name | Type | Description |
-| :----------------- | :-------------------: | :-------------------------------------------------------------------------------------------------------------------------------- |
-| `page.data` | `Array` | Array of data returned from `data()` for the current page. |
-| `page.start` | `number` | Index of first item on current page, starting at `0` (e.g. if `pageSize: 25`, this would be `0` on page 1, `25` on page 2, etc.). |
-| `page.end` | `number` | Index of last item on current page. |
-| `page.size` | `number` | How many items per-page. |
-| `page.total` | `number` | The total number of items across all pages. |
-| `page.currentPage` | `number` | The current page number, starting with `1`. |
-| `page.lastPage` | `number` | The total number of pages. |
-| `page.url.current` | `string` | Get the URL of the current page (useful for canonical URLs) |
-| `page.url.prev` | `string \| undefined` | Get the URL of the previous page (will be `undefined` if on page 1). |
-| `page.url.next` | `string \| undefined` | Get the URL of the next page (will be `undefined` if no more pages). |
-
-### `rss()`
-
-RSS feeds are another common use-case that Astro supports natively. Call the `rss()` function to generate an `/rss.xml` feed for your project using the same data that you loaded for this page. This file location can be customized (see below).
-
-```js
-// Example: /src/pages/posts/[...page].astro
-// Place this function inside your Astro component script.
-export async function getStaticPaths({rss}) {
- const allPosts = Astro.fetchContent('../post/*.md');
- const sortedPosts = allPosts.sort((a, b) => new Date(b.date) - new Date(a.date));
- // Generate an RSS feed from this collection
- rss({
- // The RSS Feed title, description, and custom metadata.
- title: 'Don’s Blog',
- description: 'An example blog on Astro',
- customData: `en-us `,
- // The list of items for your RSS feed, sorted.
- items: sortedPosts.map(item => ({
- title: item.title,
- description: item.description,
- link: item.url,
- pubDate: item.date,
- })),
- // Optional: Customize where the file is written to.
- // Defaults to "/rss.xml"
- dest: "/my/custom/feed.xml",
- });
- // Return a paginated collection of paths for all posts
- return [...];
-}
-```
-
-```ts
-// The full type definition for the rss() function argument:
-interface RSSArgument {
- /** (required) Title of the RSS Feed */
- title: string;
- /** (required) Description of the RSS Feed */
- description: string;
- /** Specify arbitrary metadata on opening tag */
- xmlns?: Record;
- /** Specify custom data in opening of file */
- customData?: string;
- /**
- * Specify where the RSS xml file should be written.
- * Relative to final build directory. Example: '/foo/bar.xml'
- * Defaults to '/rss.xml'.
- */
- dest?: string;
- /** Return data about each item */
- items: {
- /** (required) Title of item */
- title: string;
- /** (required) Link to item */
- link: string;
- /** Publication date of item */
- pubDate?: Date;
- /** Item description */
- description?: string;
- /** Append some other XML-valid data to this item */
- customData?: string;
- }[];
-}
-```
-
-## `import.meta`
-
-> In this section we use `[dot]` to mean `.`. This is because of a bug in our build engine that is rewriting `import[dot]meta[dot]env` if we use `.` instead of `[dot]`.
-
-All ESM modules include a `import.meta` property. Astro adds `import[dot]meta[dot]env` through [Snowpack](https://www.snowpack.dev/).
-
-**`import[dot]meta[dot]env[dot]SSR`** can be used to know when rendering on the server. Sometimes you might want different logic, for example a component that should only be rendered in the client:
-
-```jsx
-import { h } from 'preact';
-
-export default function () {
- // Note: rewrite "[dot]" to "." for this to to work in your project.
- return import[dot]meta[dot]env[dot]SSR ?
: ` a medida que avanzamos hacia nuestra versión v1.0.
-
-## `
- # ¡La sintaxis de Markdown ahora es compatible! **¡Hurra!**
-
-```
-
-Mira nuestra [Guía de Markdown](/es/guides/markdown-content) para más información.
-
-
-
-## `
-
- > Esta página todavía no está disponible en Español. Se muestra la versión en inglés.
-
- {content.astro.html}
-
diff --git a/docs/src/pages/fi/getting-started.md b/docs/src/pages/fi/getting-started.md
deleted file mode 100644
index 868123519..000000000
--- a/docs/src/pages/fi/getting-started.md
+++ /dev/null
@@ -1,58 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Aloittaminen
-lang: fi
----
-
-Astro on moderni työkalu staattisten sivustojen luomiseen. Voit löytää lisätietoa Astrosta englanniksi [kotisivultamme](https://astro.build/) tai [julkistusviestistämme](https://astro.build/blog/introducing-astro). Tämä sivu on yleiskatsaus Astron dokumentaatioon ja liittyviin sisältöihin.
-
-## Kokeile Astroa
-
-Helpoin tapa kokeilla Astroa on suorittaa `npm init astro` uudessa hakemistossa omalla koneellasi. Tämä CLI-komento käy lävitse tarvittavat vaiheet uuden Astro-projektin alkuunsaattamiseksi.
-
-[Asennusoppaastamme](/installation) löydät täyden läpikäynnin Astron saamiseksi käyttökuntoon.
-
-### Netin leikkikentät
-
-Sikäli jos sinua kiinnostaa kokeilla Astroa selaimessa, voit käyttää leikkikenttää netissä. Kokeile Hello World -templaattia [CodeSandboxissa](https://codesandbox.io/s/astro-template-hugb3).
-
-_Huomaa: jotkin toiminnallisuudet (mm. nopea päivitys) ovat toistaiseksi rajallisia CodeSandboxissa._
-
-## Astron oppiminen
-
-Ihmisillä on monenlaisia taustoja ja erilaisia oppimistyylejä. Toivomme sinun saavan irti tästä osiosta riippumatta siitä oletko enemmän teoriatason vaiko käytännön tason oppija.
-
-- Jos suosit **oppimista tekemällä**, kokeile aloittaa [esimerkkikirjastostamme](https://github.com/withastro/astro/tree/main/examples).
-- Jos suosit **konseptien oppimista vaihe vaiheelta**, kokeile aloittaa [peruskonsepteista ja oppaista](/core-concepts/project-structure).
-
-Astrolla on oma oppimiskäyränsä kuten millä tahansa ennestään tuntemattomalla teknologialla. Harjoittelulla ja kärsivällisyydellä _tulet_ pääsemään asioista kärryille.
-
-### `.astro`-syntaksin oppiminen
-
-Aloittaessasi Astrolla tulet kohtaamaan monia `.astro`-päätteellisiä tiedostoja. Nämä sisältävät **Astro-komponenttien syntaksia**, joka on erityistä HTML:n kaltaista templaattikieltä, jota Astro käyttää. Se on suunniteltu olemaan tuttu kenelle tahansa, jolla on kokemusta HTML:stä tai JSX:stä.
-
-Oppaamme [Astron komponenteista](/core-concepts/astro-components) esittelee uuden syntaksin ja on paras paikka sen opiskelulle.
-
-### API-luettelo
-
-Tämä dokumentaation osa on hyödyllisin halutessasi oppia yksityiskohtia tietystä Astron rajapinnasta. Muun muassa [asetusluettelo](/reference/configuration-reference) listaa kaikki mahdolliset asetusvaihtoehdot. [Ydinkomponenttien luettelo](/reference/builtin-components) listaa kaikki käytössä olevat Astron mukana tulevat komponentit kuten `
-cd
-npm init astro
-```
-
-Seuraa CLI-ohjelman ohjeistusta asentaaksesi Astron käyttäen yhtä virallisista aloitustemplaateista.
-
-Tämän jälkeen voit siirtyä [pika-aloitusoppaaseen](/quick-start#start-your-project) saadaksesi 30:n sekunnin yhteenvedon siitä, kuinka käynnistää uusi projekti kehittämistä varten, ja kuinka luoda siitä lopullinen sivusto!
-
-## Asentaminen itse
-
-### Projektin valmistelu
-
-Luo uusi tyhjä hakemisto jolla on projektisi nimi ja siirry siihen:
-
-```bash
-mkdir
-cd
-# Huomaa: korvaa projektisi nimellä.
-```
-
-Luo uusi `package.json`-tiedosto projektille. Astro on suunniteltu toimimaan npm-ympäristössä, jota hallinnoidaan `package.json` sisältämien sääntöjen kautta. Mikäli `package.json` ei ole ennestään tuttu, niin suosittelemme tutustumaan [npm:n dokumentaatioon](https://docs.npmjs.com/creating-a-package-json-file).
-
-```bash
-# Tämä komento luo uuden package.json-tiedoston sisältäen muutaman peruskentän
-npm init --yes
-```
-
-### Asenna Astro
-
-Sinulla tulisi olla nyt hakemisto, josta löytyy yksittäinen `package.json`-tiedosto kun aiemmin mainitut toimet on tehty. Astron lisääminen projektiin on nyt mahdollista.
-
-Käytämme `npm`:ää esimerkeissämme, mutta vaihtoehtoisesti voit myös käyttää `yarn`:ia tai `pnpm`:ää. Sikäli jos kumpikaan `yarn` tahi `pnpm` ei ole tuttu, niin suosittelemme pitäytymistä `npm`:ssä.
-
-```bash
-npm install astro
-```
-
-Voit nyt vaihtaa oletuksena toimivan "scripts"-osion `npm init`in luomassa `package.json`:ssa seuraavasti:
-
-```diff
- "scripts": {
-- "test": "echo \"Error: no test specified\" && exit 1"
-+ "dev": "astro dev",
-+ "build": "astro build",
-+ "preview": "astro preview"
- },
-}
-```
-
-### Lisää ensimmäinen sivu
-
-Avaa tekstieditori ja luo uusi tiedosto projektiin:
-
-```astro
----
-// 1. Luo uusi tiedosto /src/pages/index.astro
-// 2. Kopioi ja liitä tämä koko tiedosto (sisältäen `-` väliviivat) siihen.
----
-
-
- Moi maailma!
-
-
-```
-
-Voit nyt lisätä uusia sivuja `src/pages`-hakemistoon Astron käyttäessä ennettua tiedostonimeä luodakseen uusia sivuja sivustolle. Jos esimerkiksi luot uuden tiedoston nimellä `src/pages/about.astro` (käyttäen edellistä koodia), niin Astro luo uuden sivun osoitteeseen `/about`.
-
-### Seuraavat vaiheet
-
-Näin se hoituu! Olet nyt valmis aloittamaan kehittämisen! Siirry [pika-aloitusoppaaseen](/quick-start#start-your-project) saadaksesi 30:n sekunnin läpikäynnin Astron käynnistämisestä ja projektin luomisesta sivustoksi!
-
-📚 Opi lisää Astron projektien rakenteesta [projektin rakenneoppaassa](/core-concepts/project-structure).
-📚 Opi lisää Astron komponenttien syntaksista [Astro-komponenttien oppaassa](/core-concepts/astro-components).
-📚 Opi lisää Astron tiedostoihin pohjautuvasta reitityksestä [reititysoppaassa](core-concepts/astro-pages).
diff --git a/docs/src/pages/fi/quick-start.md b/docs/src/pages/fi/quick-start.md
deleted file mode 100644
index b7c78c2d9..000000000
--- a/docs/src/pages/fi/quick-start.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Pika-aloitus
-lang: fi
----
-
-```shell
-# vaatimukset: varmista että Node.js on vähintään versiota 14.15.0+ tai 16+
-node --version
-
-# luo uuden projektin hakemisto ja siirry siihen
-mkdir astrokokeilu && cd "$_"
-
-# valmistaudu laukaisuun...
-npm init astro
-
-# asenna riippuvuudet
-npm install
-
-# aloita kehittäminen!
-npm run dev
-```
-
-```shell
-# kun olet valmis: luo oma staattinen sivustosi hakemistoon `dist/`
-npm run build
-```
-
-Astro-sivuston käyttöönotto tuotannossa vaatii `/dist`-hakemiston (joka luodaan suorittamalla `npm run build`) sisällön siirtämisen haluamallesi palveluntarjoajalle.
-
-[Luo lisää tästä Astron julkaisuoppaassa.](/guides/deploy)
-
-## Projektin käynnistäminen
-
-Siirry takaisin komentoriville ja suorita tämä komento projektin hakemistossa:
-
-```bash
-npm run dev
-```
-
-Tämän jälkeen ohjelma on käynnissä osoitteessa [http://localhost:3000](http://localhost:3000). Avaa tämä URL selaimessa nähdäksesi viestin "Moi maailma!", jonka kopioimme edellisessä vaiheessa.
-
-Astro seuraa muutoksia `src/`-hakemiston sisällä, joten ohjelmaa ei tarvitse käynnistää uudelleen tehdessäsi muutoksia siihen koodatessasi.
-
-## Sivuston luominen
-
-Palaa takaisin komentoriville ja suorita tämä komento projektin hakemistossa:
-
-```bash
-npm run build
-```
-
-Tämä muodostaa projektista valmiit sivuston tiedostot ja kirjoittaa ne `dist/`-hakemistoon. Astro-sivustot ovat staattisia, joten ne voi julkaista mille tahansa palveluntarjoajalle (Vercel, Netlify, S3 bucket, jne.).
diff --git a/docs/src/pages/fr/getting-started.md b/docs/src/pages/fr/getting-started.md
deleted file mode 100644
index 16817606a..000000000
--- a/docs/src/pages/fr/getting-started.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Bien démarrer
-lang: fr
----
-
-Astro est un générateur de site statique moderne. Comprenez ce qu'est Astro en visitant [notre page d'accueil](https://astro.build/) ou [notre annonce de sortie](https://astro.build/blog/introducing-astro). Cette page est une vue d'ensemble de la documentation d'Astro et de toutes les ressources associées.
-
-## Essayer Astro
-
-La manière la plus simple d'essayer Astro est de lancer `npm init astro` à partir d'un nouveau dossier depuis votre machine. Notre utilitaire CLI vous assistera dans la création d'un nouveau projet Astro.
-
-Pour bien débuter avec Astro en 5 étapes rapides et faciles, visitez notre [Guide de démarrage rapide](/fr/quick-start).
-
-Autrement, lisez notre [Guide d'installation](/fr/installation) pour un accompagnement pas-à-pas sur la mise en place d'Astro.
-
-### Terrains de jeu en ligne (Online Playground)
-
-Si vous voulez tester Astro directement dans votre navigateur, vous pouvez utiliser un playground en ligne. Essayez notre modèle "Hello World!" sur [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3).
-
-_Note: quelques-unes des fonctionnalités (ex : Rafraîchissement Rapide) sont pour le moment limitées sur CodeSandbox._
-
-## Apprendre Astro
-
-Tous les développeurs qui essaient Astro n'ont ni la même expérience, ni les mêmes méthodes d'apprentissage. Que vous préfériez une approche plutôt théorique ou pratique, nous espérons que vous trouverez l'aide qu'il vous faut dans cette section.
-
-- Si vous préférez une **approche pratique**, commencez avec notre [librairie d'exemples](https://github.com/withastro/astro/tree/main/examples).
-- Si vous préférez **apprendre les concepts étape par étape**, commencez avec nos [fondamentaux et guides](/core-concepts/project-structure).
-
-Comme toute nouvelle technologie, Astro possède une certaine courbe d'apprentissage. Malgré cela, avec de la pratique et de la patience, nous savons, que _vous_ allez prendre la main, en très peu de temps.
-
-### Apprendre la syntaxe `.astro`
-
-Quand vous débutez l'apprentissage d'Astro, vous allez rencontrer beaucoup de fichier avec l'extension `.astro`. C'est la **Syntaxe des Composants Astro** : des fichiers particuliers avec un format similaire au HTML qu'Astro utilise comme template. Ils ont été conçus pour être familiers à toute personne ayant une expérience avec le HTML ou le JSX.
-
-Notre guide sur les [composants Astro](/core-concepts/astro-components) vous présente la syntaxe Astro et reste la meilleure façon d'apprendre.
-
-### Documentation de l'API
-
-Cette documentation vous sera utile si vous souhaitez comprendre en détails certaines API d'Astro. Par exemple, la [Documentation de la Configuration](/reference/configuration-reference) liste toutes les options de configuration à votre disposition. La [Documentation des Composants de base](/reference/builtin-components) liste tous les composants disponibles de base, comme `Hello, World!
-
-
-
-
-
-
-```
-
-Vous venez de lire un exemple de syntaxe des composants Astro, inspirée par le HTML et le JSX.
-
-Vous pouvez continuer à ajouter des fichiers dans le dossier `src/pages`, et Astro se servira du nom du fichier pour ajouter des pages à votre site. Par exemple, si vous ajoutez une page `src/pages/a-propos.astro` (par exemple en reprenant le code ci-dessus), Astro va générer une nouvelle page à l'adresse `http://localhost:3000/a-propos`.
-
-## [Démarrer Astro](#démarrer-astro)
-
-```bash
-npm run dev
-```
-
-Astro va démarrer votre site à l'adresse `http://localhost:3000`. En ouvrant cette URL dans votre navigateur, vous devriez voir s'afficher "Hello, World", ou bien la page créée précédemment.
-
-## [Compiler avec Astro](#compiler-avec-astro)
-
-```bash
-npm run build
-```
-
-Astro va produire une version allégée du site et la sauvegarder directement sur le disque. Votre application se trouvera dans le dossier `dist/`.
-
-## Prochaines étapes
-
-Vous êtes désormais prêt·e à développer !
-
-Nous vous recommandons de prendre le temps de vous familiariser avec Astro et son fonctionnement. Nous vous recommandons les guides suivants :
-
-📚 En savoir plus sur [la structure des projets Astro](/core-concepts/project-structure).
-
-📚 En savoir plus sur [la syntaxe des composants Astro](/core-concepts/astro-components).
-
-📚 En savoir plus sur [la génération des adresses à partir de l'arborescence.](/core-concepts/astro-pages).
diff --git a/docs/src/pages/fr/quick-start.md b/docs/src/pages/fr/quick-start.md
deleted file mode 100644
index 99532c490..000000000
--- a/docs/src/pages/fr/quick-start.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: Démarrage rapide
-lang: fr
----
-
-```shell
-# Prérequis : vérifiez que Node.js est en version 14.15.0+, ou 16+
-node --version
-
-# Créez un nouveau dossier, et placez-vous dedans
-mkdir my-astro-project && cd $_
-
-# Attention au décollage...
-npm init astro
-
-# Installez les dépendances
-npm install
-
-# Commencez à coder !
-npm run dev
-```
-
-```shell
-# Quand votre site est fin prêt, compilez-en une version statique dans le dossier `dist/`
-npm run build
-```
-
-Si vous désirez en savoir plus sur les différentes façons d'installer Astro dans votre projet, [lisez notre guide d'installation](installation).
-
-## Commencez votre projet
-
-Depuis un terminal ouvert dans votre projet, entrez la commande suivante :
-
-```bash
-npm run dev
-```
-
-Astro va lancer un serveur local sur [http://localhost:3000](http://localhost:3000). Ouvrez cette adresse dans votre navigateur, et vous devriez voir le "Hello, World" d'Astro.
-
-Vous n'avez jamais besoin de redémarrer Astro : à chaque modification dans le dossier `src/`, le serveur recompile votre site.
-
-## Compilez votre projet
-
-Pour compiler votre projet, entrez la commande suivante dans un terminal :
-
-```bash
-npm run build
-```
-
-Astro va produire une version allégée de votre site et la sauvegarder directement sur le disque. Votre application se trouvera dans le dossier `dist/`.
-
-## Mettez en production
-
-Les sites compilés avec Astros sont statiques, et peuvent par conséquent être déployés par votre hébergeur préféré :
-
-- [Vercel](https://vercel.com/)
-- [Netlify](https://www.netlify.com/)
-- [S3 bucket](https://aws.amazon.com/s3/)
-- [Google Firebase](https://firebase.google.com/)
-- [Lire le guide de déploiement sur la documentation Astro](/guides/deploy)
-
-## Prochaines étapes
-
-Vous êtes désormais prêt·e à développer !
-
-Nous vous recommandons de prendre le temps de vous familiariser avec Astro et son fonctionnement. Nous vous recommandons les guides suivants :
-
-📚 En savoir plus sur [la structure des projets Astro](/core-concepts/project-structure).
-
-📚 En savoir plus sur [la syntaxe des composants Astro](/core-concepts/astro-components).
-
-📚 En savoir plus sur [la génération des adresses à partir de l'arborescence.](/core-concepts/astro-pages).
diff --git a/docs/src/pages/index.astro b/docs/src/pages/index.astro
deleted file mode 100644
index 203ed38cf..000000000
--- a/docs/src/pages/index.astro
+++ /dev/null
@@ -1,38 +0,0 @@
----
-import Layout from '../layouts/MainLayout.astro';
----
-
-Hello, World!
-
-
-
-
-
-
-```
-
-上記は、Astro コンポーネント構文の一例で、HTML と JSX の両方で構成されています。
-
-`src/pages`ディレクトリには、さらに多くのページを作成でき、Astro はそのファイル名を使ってサイトに新しいページを作成します。たとえば、`src/pages/about.astro`に（前のスニペットを再利用して）新しいファイルを作成すると、`http://localhost/about`という URL に新しいページが作成されます。
-
-## [Astro の開始](#astro-の開始)
-
-```bash
-npm run dev
-```
-
-これで Astro は、`http://localhost:3000`でアプリケーションのサービスを開始します。この URL をブラウザで開くと、Astro の「Hello, World」が表示されるはずです。
-
-開発の進捗状況をローカルネットワーク上で共有したり、スマートフォンからアプリを確認したければ、以下の[snowpack](https://www.snowpack.dev/reference/configuration#devoptionshostname)オプションを`astro.config.mjs`に追加してください。
-
-```js
-devOptions: {
- hostname: '0.0.0.0';
-}
-```
-
-## [Astro のビルド](#astro-のビルド)
-
-```bash
-npm run build
-```
-
-このコマンドを実行すると、Astro はサイトを構築し、ディスクに直接保存するように指示します。
-`dist/`ディレクトリをみると構築されたアプリケーションが確認できます。
-
-## 次のステップ
-
-これで開発を始める準備が整いました。
-
-Astro がどのように機能しているかをもっとよく知ることを強くオススメします。そのためには、これらのドキュメントを探索することを検討してみてください。
-
-📚 Astro のプロジェクト構造については、[プロジェクト構造ガイド](/core-concepts/project-structure)をご覧ください。
-
-📚 Astro のコンポーネント構文については[Astro コンポーネントガイド](/core-concepts/astro-components)を参照してください。
-
-📚 Astro のファイルベースのルーティングについては、[ルーティングガイド](core-concepts/astro-pages)を参照してください。
diff --git a/docs/src/pages/ja/quick-start.md b/docs/src/pages/ja/quick-start.md
deleted file mode 100644
index bfb0e307f..000000000
--- a/docs/src/pages/ja/quick-start.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: クイックスタート
-lang: ja
----
-
-```shell
-# 必須条件: Node.jsが14.15.0+、または16+であることを確認する。
-node --version
-
-# 新しいプロジェクトディレクトリを作成し、その中に直接移動します
-mkdir my-astro-project && cd $_
-
-# 必要なファイルの準備
-npm init astro
-
-# 依存関係のインストール
-npm install
-
-# 開発を始めよう
-npm run dev
-```
-
-```shell
-# 準備ができたら、`dist/`に静的サイトを構築します。
-npm run build
-```
-
-はじめて Astro をインストールして使用する場合は、[インストールガイド](/ja/installation)をご覧ください。
-
-サンプルを見ながら学びたいという方は、GitHub にある[全サンプル](https://github.com/withastro/astro/tree/main/examples)をご覧ください。 `npm init astro -- --template "EXAMPLE_NAME"` を実行すれば、これらのサンプルをローカルにチェックアウトできます。
-
-## プロジェクトの開始
-
-ターミナルでプロジェクトのディレクトリに移動し、次のコマンドを入力します。
-
-```bash
-npm run dev
-```
-
-これで Astro は、 [http://localhost:3000](http://localhost:3000)で、アプリケーションの提供を開始します。この URL をブラウザで開くと、Astro の「Hello, World」が表示されるはずです。
-
-サーバーは、あなたの`src/`ディレクトリにあるファイルの変更を常に監視しているので、開発中に変更してもアプリケーションを再起動する必要はありません。
-
-## プロジェクトのビルド
-
-プロジェクトをビルドするには、あなたのディレクトリ内で、ターミナルに次のビルドコマンドを入力します。
-
-```bash
-npm run build
-```
-
-このコマンドを実行すると、Astro はサイトを構築し、ディスクに直接保存するように指示します。これで、`dist/`ディレクトリにアプリケーションができあがりました。
-
-## プロジェクトのデプロイ
-
-Astro のサイトは静的なので、お好みのホストにデプロイできます。
-
-- [AWS S3 bucket](https://aws.amazon.com/s3/)
-- [Google Firebase](https://firebase.google.com/)
-- [Netlify](https://www.netlify.com/)
-- [Vercel](https://vercel.com/)
-- もっと詳しい Astro のデプロイについては、[デプロイガイド](/guides/deploy)をご覧ください。
-
-## 次のステップ
-
-これで開発を始める準備が整いました。
-
-次のステップでは、Astro の仕組みをより深く理解することをオススメします。これらのドキュメントを探索することを検討してみてください。
-
-📚 Astro のプロジェクト構造については、[プロジェクト構造ガイド](/core-concepts/project-structure)をご覧ください。
-
-📚 Astro のコンポーネント構文については、[Astro コンポーネントガイド](/core-concepts/astro-components)を参照してください。
-
-📚 Astro のファイルベースのルーティングについては、[ルーティングガイド](/core-concepts/astro-pages)を参照してください。
diff --git a/docs/src/pages/ja/themes.astro b/docs/src/pages/ja/themes.astro
deleted file mode 100644
index 5a64cf826..000000000
--- a/docs/src/pages/ja/themes.astro
+++ /dev/null
@@ -1,53 +0,0 @@
----
-import Layout from '../../layouts/MainLayout.astro';
-import Card from '../../components/Card.astro';
-import { Markdown } from 'astro/components';
-import themes from '../../data/themes.json';
-import components from '../../data/components.json';
----
-
-
-
-
- ## 注目のテーマ
-
-
- {themes.featured.map((item) =>
-
- ## 公式テーマ
-
- Astro では、ドキュメントサイトやポートフォリオなど、いくつかの公式テーマを用意しています。
-
-
- {themes.official.map((item) =>
-
- ## コミュニティテーマ
-
- コミュニティが開発したテーマをご覧ください。
-
-
- {themes.community.map((item) =>
-
- ## 注目のパッケージ
-
- 私たちのパッケージエコシステムは成長し続けています。注目のコミュニティパッケージをご覧ください。コレクション全体は[npm](https://www.npmjs.com/search?q=keywords%3Aastro-component)で検索できます。
-
-
- {components.community.map((item) =>
-
- > 自分のテーマを紹介したい場合は、[Discord でシェアしてください！](https://astro.build/chat)
- > `#showcase` チャンネルに投稿されたお気に入りの作品をよくピックアップしています。
-
-
diff --git a/docs/src/pages/kr/getting-started.md b/docs/src/pages/kr/getting-started.md
deleted file mode 100644
index e6af7a19e..000000000
--- a/docs/src/pages/kr/getting-started.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: 시작하기
-lang: kr
----
-
-Astro는 현대적인 정적 사이트 생성기(Static Site Generator)입니다. [홈페이지](https://astro.build/)나 [블로그](https://astro.build/blog/introducing-astro) 글을 통해 Astro에 대한 모든 것을 알아보세요. 이 페이지는 Astro 문서와 관련된 리소스를 소개합니다.
-
-## Astro 시작하기
-
-Astro를 시작하는 가장 쉬운 방법은 `npm init astro` 명령어를 실행하는 것입니다. 새로운 디렉토리에서 명령어를 실행해주세요. CLI 도우미가 새로운 프로젝트를 시작할 수 있도록 도와줍니다.
-
-이 문서의 퀵스타트 가이드에서는 Astro를 쉽고 빠르게 시작할 수 있도록 도와주는 5가지 단계를 소개하고 있습니다. [퀵스타트 가이드](quick-start) 페이지를 방문해 관련 내용을 자세히 알아보세요.
-
-혹은 [설치 가이드](/installation)를 통해 Astro 시작과 설정에 관한 자세한 설명을 읽어볼 수도 있습니다.
-
-### 온라인 플레이그라운드
-
-온라인 플레이그라운드를 통해 Astro를 브라우저 환경에서 체험해보는 것도 가능합니다. [CodeSandbox](https://codesandbox.io/s/astro-template-hugb3)에서 "Hello World!" 템플릿으로 시작해보세요.
-
-_주의: 몇몇 기능은 아직 CodeSandbox에서 동작하지 않을 수 있습니다. (예: Fast Refresh)_
-
-## Astro 배우기
-
-사람들은 다양한 배경에서 각자 다른 학습 스타일로 Astro에 입문합니다. 이 섹션이 이론적인 접근 방식이나 실용적인 접근 방식을 선호하는 사람 모두에게 도움이 되기를 바랍니다.
-
-- **직접 경험하며 배우는** 방식을 선호한다면, [예제 라이브러리](https://github.com/withastro/astro/tree/main/examples)에서 시작해보세요.
-- **개념부터 차근차근 익히는** 방식을 선호한다면, [기본 개념 가이드](/core-concepts/project-structure)에서 시작해보세요.
-
-다른 낯선 기술과 마찬가지로 Astro에는 러닝 커브(learning curve)가 있습니다. 하지만 약간의 인내심을 가지고 연습한다면 충분히, 쉽게 습득할 수 있습니다.
-
-### `.astro` 문법 배우기
-
-Astro를 배우기 시작하면 많은 파일들이 `.astro` 확장자를 사용하고 있는 것이 눈에 띌 것입니다. 이것은 Astro의 **컴포넌트**를 의미합니다. Astro의 컴포넌트는 HTML과 비슷한 파일 포맷을 가지고 있으며 템플레이팅 (templating)에 사용됩니다. HTML이나 JSX를 사용해본 경험이 있는 사람이라면 누구나 익숙함을 느끼도록 설계되었습니다.
-
-Astro 컴포넌트를 배우는 가장 좋은 방법은 이 문서의 [Astro 컴포넌트 가이드](/core-concepts/astro-components)를 읽는 것입니다. Astro 컴포넌트 페이지에서는 기본 문법을 익히는 데 도움 되는 가이드를 제공합니다.
-
-### API 참조
-
-API 참조 섹션은 특정 Astro API를 자세히 배우고 싶을 때 유용합니다. 예를 들어, [환경 설정](/reference/configuration-reference) 페이지는 설정에 적용 가능한 모든 옵션을 제공하며, [내장 컴포넌트](/reference/builtin-components) 페이지는 `Hello, World!
-
-
-
-
-
-
-```
-
-以上是 Astro 组件语法的一个例子，同時包含 HTML 和 JSX。
-
-你可以在 `src/pages` 目录下创建更多的页面，Astro 将使用该文件名在你的网站上创建新的页面。例如，通过在 `src/pages/about.astro` 创建一个新的文件（重复使用以前的片段），Astro 将生成一个新的页面，URL 为：`http://localhost/about` 。
-
-## [启动 Astro](#start-astro)
-
-```bash
-npm run dev
-```
-
-Astro 会开启预览服务器，地址为 [http://localhost:3000](http://localhost:3000)，
-在浏览器打开这个网址，就会看到 Astro 的 HelloWorld 页面
-
-服务器会实时监听 'src/' 目录下的文件改动，所以在开发过程的支持热更新，修改程序后，无需重启。
-
-## [Build Astro](#build-astro)
-
-```bash
-npm run build
-```
-
-这将让 Astro 打包你的网站并直接保存到磁盘。你的应用程序现在已经在 `dist/` 目录中打包好了。
-
-## 下一步
-
-成功了！现在即可开始开发！
-
-我们建议花点时间用于熟悉 Astro 的运作方式。只要在文档中进一步探索，建议看看这些：
-
-📚 深入了解 Astro 的项目结构：[项目结构](/core-concepts/project-structure)
-
-📚 深入了解 Astro 的组件语法：[Astro 组件指南](/core-concepts/astro-components)
-
-📚 深入了解 Astro 根据文件路径生成路由：[路由指南](core-concepts/astro-pages)
diff --git a/docs/src/pages/zh-CN/quick-start.md b/docs/src/pages/zh-CN/quick-start.md
deleted file mode 100644
index bedd596cf..000000000
--- a/docs/src/pages/zh-CN/quick-start.md
+++ /dev/null
@@ -1,74 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: 快速入门
-lang: zh-CN
----
-
-```shell
-# 环境要求：确保 Node.js 版本是 14.15.0+ 或 16 及以上。
-node --version
-
-# 创建并进入新项目目录
-mkdir my-astro-project && cd $_
-
-# 初始化项目
-npm init astro
-
-# 安装项目依赖
-npm install
-
-# 启动项目
-npm run dev
-```
-
-```shell
-# 将项目打包到 dist 文件夹下
-npm run build
-```
-
-如果想要知道还有哪些方法能够使用 Astro 来做开发，请阅读 [安装指南](installation)。
-
-## 启动项目
-
-工程目录下终端输入以下命令：
-
-```bash
-npm run dev
-```
-
-Astro 会开启预览服务器，地址为 [http://localhost:3000](http://localhost:3000)，
-在浏览器打开这个网址，就会看到 Astro 的 HelloWorld 页面
-
-服务器会实时监听 'src/' 目录下的文件改动，所以在开发过程的支持热更新，修改程序后，无需重启。
-
-## 打包项目
-
-工程目录下终端输入以下命令：
-
-```bash
-npm run build
-```
-
-这将让 Astro 打包你的网站并直接保存到磁盘。你的应用程序现在已经在`dist/`目录中打包好了。
-
-## 部署项目
-
-Astro 生成的网站是静态的可以发布常见的托管服务商：
-
-- [Vercel](https://vercel.com/)
-- [Netlify](https://www.netlify.com/)
-- [S3 bucket](https://aws.amazon.com/s3/)
-- [Google Firebase](https://firebase.google.com/)
-- 查看 [部署指南](/guides/deploy) 了解更多细节
-
-## 下一步
-
-成功了！现在即可开始开发！
-
-我们建议花点时间用于熟悉 Astro 的运作方式。只要在文档中进一步探索，建议看看这些：
-
-📚 深入了解 Astro 的项目结构：[项目结构](/core-concepts/project-structure)
-
-📚 深入了解 Astro 的组件语法：[Astro 组件指南](/core-concepts/astro-components)
-
-📚 深入了解 Astro 根据文件路径生成路由：[路由指南](core-concepts/astro-pages)
diff --git a/docs/src/pages/zh-TW/examples.md b/docs/src/pages/zh-TW/examples.md
deleted file mode 100644
index 0feb9779a..000000000
--- a/docs/src/pages/zh-TW/examples.md
+++ /dev/null
@@ -1,9 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: 範例
-lang: zh-Hant-TW
----
-
-如果喜歡從做中學，可以看看放在 Github 的[範例資源庫](https://github.com/withastro/astro/tree/main/examples)。
-
-
diff --git a/docs/src/pages/zh-TW/getting-started.md b/docs/src/pages/zh-TW/getting-started.md
deleted file mode 100644
index c01cce59a..000000000
--- a/docs/src/pages/zh-TW/getting-started.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: 新手上路
-lang: zh-Hant-TW
----
-
-Astro 是利用現代技術的靜態網站生成工具。可以從[首頁](https://astro.build/)或[釋出版本貼文](https://astro.build/blog/introducing-astro)來了解 Astro 的用途。此頁面是 Astro 文件與所有相關資源的概要。
-
-## 試玩 Astro
-
-試用 Astro 最簡單的方法，就是在機器的新資料夾裡執行 `npm init astro`。我們製作的 CLI 精靈會協助開啟全新的 Astro 專案。
-
-簡易又迅速 5 步驟就開始使用 Astro 的方法，請看 [快速開始指南](quick-start)。
-
-或者，閱讀[安裝指南](/installation)，有安裝 Astro 的完整流程。
-
-### 示範專案
-
-比較喜歡從範例來學 Astro 的話，請看放在 Github 的[範例資源庫](https://github.com/withastro/astro/tree/main/examples)。
-
-這裡的範例都可以在本地端機器執行 `npm init astro` 並加上 CLI Flag: `--template`。
-`--template` Flag 也支援第三方、社群的範本。
-
-```bash
-# 執行 init 精靈，並使用官方範本
-npm init astro -- --template [OFFICIAL_EXAMPLE_NAME]
-# 執行 init 精靈，並使用社群範本
-npm init astro -- --template [GITHUB_USER]/[REPO_NAME]
-npm init astro -- --template [GITHUB_USER]/[REPO_NAME]/path/to/example
-```
-
-### 線上玩玩看
-
-有興趣在瀏覽器試玩 Astro 的話，可以在 Stackblitz、CodeSandbox、Gitpod 或 GitHub Codespaces 使用線上程式碼編輯器。點選[範例資源庫](https://github.com/withastro/astro/tree/main/examples)裡任一個範例的 "Open in Stackblitz" 連結。或者，[點此](https://stackblitz.com/fork/astro)在 Stackblitz 開啟新專案。
-
-## 學習 Astro
-
-每個來到 Astro 的人來自不同背景，使得學習方式也不同。不管是喜歡更為理論，還是實際的方法，希望都可以覺得這部分很有用。
-
-- 如果喜歡**從做中學**，從[範例資源庫](https://github.com/withastro/astro/tree/main/examples)開始。
-- 如果喜歡**一步一步學習概念**，就從[基本概念與指南](/core-concepts/project-structure)開始。
-
-就像任何還不熟悉的技術，Astro 會有一些學習曲線。只不過，只要練習和一些耐心，我們確信很快就會熟悉。
-
-### 學習 `.astro` 語法
-
-開始學習 Astro 的時候，會看到很多檔案副檔名是 `.astro`。這是 **Astro 的元件語法**：近似於 HTML 的特殊檔案格式，Astro 用來當作範本。設計成有 HTML 或 JSX 經驗的人都覺得和藹可親。
-
-[Astro 元件](/core-concepts/astro-components)指南會很有幫助，介紹 Astro 的語法，也是最好的學習方式。
-
-### API 參考手冊
-
-如果想要深入探討某個 Astro API，這部分的文件會很有幫助。例如：[設定參考](/reference/configuration-reference)列出所有可以使用的設定選項。[內建元件參考](/reference/builtin-components)列出所有可以使用的核心元件，像是 `Hello, World!
-
-
-
-
-
-
-```
-
-以上就是 Astro 的元件語法範例，同時包含 HTML 和 JSX。
-
-在 `src/pages` 資料夾裡還可以加入更多頁面，Astro 就會使用檔案名稱建立網站的新頁面。舉例來說，位在 `src/pages/about.astro` 的檔案（可以重複使用上面的程式碼片段），Astro 就會有網址是 `http://localhost/about` 的新頁面。
-
-## [啟動 Astro](#start-astro)
-
-```bash
-npm run dev
-```
-
-Astro 會為應用程式打開 `http://localhost:3000` 的伺服器。在瀏覽器開啟網址，就會看到 Astro 的「Hello World」。
-
-## [Build Astro](#build-astro)
-
-```bash
-npm run build
-```
-
-這樣就會指揮 Astro 開始 Build 網站，存在磁碟裡。現在，應用程式已經放在 `dist/` 資料夾裡準備好了。
-
-### 下一步
-
-成功了！現在即可開始開發！
-
-我們建議花點時間更熟悉 Astro 的運作方式。只要在文件裡進一步探索，建議看看這些：
-
-📚 深入了解 Astro 的專案架構：[專案架構指南。](/core-concepts/project-structure)
-
-📚 深入了解 Astro 的元件語法：[Astro 元件指南。](/core-concepts/astro-components)
-
-📚 深入了解 Astro 根據檔案產生的路徑：[路徑指南。](core-concepts/astro-pages)
diff --git a/docs/src/pages/zh-TW/quick-start.md b/docs/src/pages/zh-TW/quick-start.md
deleted file mode 100644
index ecd402422..000000000
--- a/docs/src/pages/zh-TW/quick-start.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-layout: ~/layouts/MainLayout.astro
-title: 快速開始
-lang: zh-Hant-TW
----
-
-```shell
-# 環境需求：檢查 Node.js 版本是 14.15.0+ 或 16+。
-node --version
-
-# 開新專案資料夾，並且直接移動到該處
-mkdir my-astro-project && cd $_
-
-# 準備發射...
-npm init astro
-
-# 安裝相依套件
-npm install
-
-# 開始開發！
-npm run dev
-```
-
-```shell
-# 做好之後：把靜態網站 build 進 `dist/`
-npm run build
-```
-
-若想要知道還有哪些方法能夠以 Astro 來做專案，請[閱讀安裝指南](installation)。
-
-## 開始專案
-
-專案目錄裡，在終端機輸入以下指令：
-
-```bash
-npm run dev
-```
-
-現在，Astro 就會開啟應用程式的伺服器，位置是 [http://localhost:3000](http://localhost:3000)。在瀏覽器打開這網址，就會看到 Astro 的 「Hello, World」。
-
-伺服器會即時監聽 `src/` 資料夾的檔案異動，所以在開發過程的更新毋需重新啟動應用程式。
-
-## Build 專案
-
-若要將專案 Build 起來，移至資料夾裡面，在終端機輸入指令：
-
-```bash
-npm run build
-```
-
-這樣就會指揮 Astro 開始 Build 網站，存在磁碟裡。現在，應用程式已經放在 `dist/` 資料夾裡準備好了。
-
-## 部署專案
-
-Astro 網站是靜態的，所以可以發布至慣用的主機：
-
-- [Vercel](https://vercel.com/)
-- [Netlify](https://www.netlify.com/)
-- [S3 bucket](https://aws.amazon.com/s3/)
-- [Google Firebase](https://firebase.google.com/)
-- [「部署指南」有更多部署 Astro 的細節。](/guides/deploy)
-
-## 下一步
-
-成功了！現在即可開始開發！
-
-我們建議花點時間更熟悉 Astro 的運作方式。只要在文件裡進一步探索，建議看看這些：
-
-📚 深入了解 Astro 的專案架構：[專案架構指南。](/core-concepts/project-structure)
-
-📚 深入了解 Astro 的元件語法：[Astro 元件指南。](/core-concepts/astro-components)
-
-📚 深入了解 Astro 根據檔案產生的路徑：[路徑指南。](core-concepts/astro-pages)
diff --git a/docs/src/pages/zh-TW/themes.astro b/docs/src/pages/zh-TW/themes.astro
deleted file mode 100644
index c1908fbc8..000000000
--- a/docs/src/pages/zh-TW/themes.astro
+++ /dev/null
@@ -1,53 +0,0 @@
----
-import Layout from '../../layouts/MainLayout.astro';
-import Card from '../../components/Card.astro';
-import { Markdown } from 'astro/components';
-import themes from '../../data/themes.json';
-import components from '../../data/components.json';
----
-
-
-
-
- ## 精選佈景主題
-
-
- {themes.featured.map((item) =>
-
- ## 官方佈景主題
-
- Astro 維護的文件網站、作品集 ⋯ 等官方佈景主題。
-
-
- {themes.official.map((item) =>
-
- ## 社群佈景主題
-
- 趕緊來看看社群開發的佈景主題！
-
-
- {themes.community.map((item) =>
-
- ## 精選套件
-
- 我們的套件生態持續成長！所有精選社群套件都可以在 [npm](https://www.npmjs.com/search?q=keywords%3Aastro-component) 發掘。
-
-
- {components.community.map((item) =>
-
- > 想要讓自己的作品成為精選嗎？[在 Discord 分享！](https://astro.build/chat)
- > 我們常在 `#showcase` 頻道取材，把深受喜愛的在這裡發布。
-
-
diff --git a/docs/src/util.ts b/docs/src/util.ts
deleted file mode 100644
index c20b0713e..000000000
--- a/docs/src/util.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-export function getLanguageFromURL(pathname: string) {
- const langCodeMatch = pathname.match(/\/([a-z]{2}-?[A-Z]{0,2})\//);
- return langCodeMatch ? langCodeMatch[1] : 'en';
-}
-
-/** Remove \ and / from beginning of string */
-export function removeLeadingSlash(path: string) {
- return path.replace(/^[/\\]+/, '');
-}
-
-/** Remove \ and / from end of string */
-export function removeTrailingSlash(path: string) {
- return path.replace(/[/\\]+$/, '');
-}
diff --git a/examples/with-markdown-plugins/README.md b/examples/with-markdown-plugins/README.md
index 69720bf0a..b1d3f3b38 100644
--- a/examples/with-markdown-plugins/README.md
+++ b/examples/with-markdown-plugins/README.md
@@ -6,4 +6,4 @@ npm init astro -- --template with-markdown-plugins
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-markdown-plugins)
-This example showcases Astro's [built-in Markdown support](../../docs/markdown.md) with additional, user-provided plugins.
+This example showcases Astro's [built-in Markdown support](https://docs.astro.build/en/guides/markdown-content/) with additional, user-provided plugins.
diff --git a/examples/with-markdown-shiki/README.md b/examples/with-markdown-shiki/README.md
index d97d1855d..d902a2589 100644
--- a/examples/with-markdown-shiki/README.md
+++ b/examples/with-markdown-shiki/README.md
@@ -6,7 +6,7 @@ npm init astro -- --template with-markdown-shiki
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-markdown)
-This example showcases Astro's [built-in Markdown support](../../docs/markdown.md).
+This example showcases Astro's [built-in Markdown support](https://docs.astro.build/en/guides/markdown-content/).
- `src/pages/index.astro` uses Astro's `` component.
- `src/pages/other.md` is a treated as a page entrypoint and uses a `layout`.
diff --git a/examples/with-markdown/README.md b/examples/with-markdown/README.md
index e8ea164ea..5acc87f7c 100644
--- a/examples/with-markdown/README.md
+++ b/examples/with-markdown/README.md
@@ -6,7 +6,7 @@ npm init astro -- --template with-markdown
[](https://stackblitz.com/github/withastro/astro/tree/latest/examples/with-markdown)
-This example showcases Astro's [built-in Markdown support](../../docs/markdown.md).
+This example showcases Astro's [built-in Markdown support](https://docs.astro.build/en/guides/markdown-content/).
- `src/pages/index.astro` uses Astro's `` component.
- `src/pages/other.md` is a treated as a page entrypoint and uses a `layout`.
diff --git a/netlify.toml b/netlify.toml
index 47f65bce1..de7a454af 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -1,2 +1,2 @@
[build]
- ignore = "git diff --quiet $COMMIT_REF $CACHED_COMMIT_REF -- packages/astro/src docs/"
+ ignore = "git diff --quiet $COMMIT_REF $CACHED_COMMIT_REF -- packages/astro/src"
diff --git a/package.json b/package.json
index 002e8cf12..630ea9c5d 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
"scripts": {
"release": "yarn build && changeset publish",
"build": "turbo run build --no-deps --scope=astro --scope=create-astro --scope=\"@astrojs/*\"",
- "build:examples": "turbo run build --scope=docs --scope=\"@example/*\"",
+ "build:examples": "turbo run build --scope=\"@example/*\"",
"dev": "turbo run dev --no-deps --no-cache --parallel --scope=astro --scope=create-astro --scope=\"@astrojs/*\"",
"test": "turbo run test --scope=astro",
"test:match": "cd packages/astro && yarn run test:match",
@@ -27,7 +27,6 @@
"examples/component/demo",
"examples/component/packages/*",
"scripts",
- "docs",
"packages/astro/test/fixtures/builtins/packages/*",
"packages/astro/test/fixtures/builtins-polyfillnode",
"packages/astro/test/fixtures/custom-elements/my-component-lib",
diff --git a/packages/astro/test/benchmark/build.bench.js b/packages/astro/test/benchmark/build.bench.js
index 5a0f2111c..9595af76c 100644
--- a/packages/astro/test/benchmark/build.bench.js
+++ b/packages/astro/test/benchmark/build.bench.js
@@ -1,3 +1,5 @@
+/** @todo migrate these to use the independent docs repository at https://github.com/withastro/docs */
+
import { fileURLToPath } from 'url';
import { performance } from 'perf_hooks';
import { build as astroBuild } from '#astro/build';
diff --git a/packages/astro/test/benchmark/dev.bench.js b/packages/astro/test/benchmark/dev.bench.js
index 97710d713..0ffbe55a2 100644
--- a/packages/astro/test/benchmark/dev.bench.js
+++ b/packages/astro/test/benchmark/dev.bench.js
@@ -1,3 +1,5 @@
+/** @todo migrate these to use the independent docs repository at https://github.com/withastro/docs */
+
import { performance } from 'perf_hooks';
import { Benchmark } from './benchmark.js';
import { runDevServer } from '../helpers.js';
diff --git a/scripts/smoke/index.js b/scripts/smoke/index.js
index 823e9edfa..8c3f27ae9 100644
--- a/scripts/smoke/index.js
+++ b/scripts/smoke/index.js
@@ -1,3 +1,5 @@
+/** @todo migrate these to use the independent docs repository at https://github.com/withastro/docs */
+
import fs from 'fs';
import { execa } from 'execa';
import { fileURLToPath } from 'url';
- ```
-
- The above will be sent to the browser as-is and the browser will resolve it relative to the current **page**. If you want it to be resolved relative to the .astro file you are working in, use `Astro.resolve`:
-
- ```astro
- })
- ```
-
-## 0.0.4
-
-### Patch Changes
-
-- adc767c5: change Spanish translations for Getting Started page
-
-## 0.0.3
-
-### Patch Changes
-
-- 70f0a09: Added remark-slug to default plugins
diff --git a/docs/README.md b/docs/README.md
index c99ef1ea9..8dd578be3 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,24 +1,3 @@
-# Astro Docs 
+# Astro Docs
-## Contributing
-
-### Pull Requests
-
-Every pull request needs to be reviewed by another contributor to the documentation to help with the overall quality of the documentation.
-
-## Running this project
-
-- Clone the Project
-
- `git clone git@github.com:withastro/astro.git`
-- Run `yarn install` to install latest dependencies.
- > This project uses yarn to manage dependencies. [Make sure that you have yarn v1 installed.](https://classic.yarnpkg.com/)
-- Run `yarn workspace docs dev` to start the dev server.
-- Run `yarn workspace docs build` to build the final site for production.
- > The environment variable `SNOWPACK_PUBLIC_GITHUB_TOKEN` must be set to a personal access token with `public_repo` permissions to prevent rate-limiting.
-
-## Deploying
-
-The site is automatically deployed when commits land in `latest`, via Netlify.
-
-The "next" docs are automatically deployed when commits land in `main`, via Netlify at - -
- ))}
-