+
}
+
+
+
+
+
+
+
+
+
+ +++
+
-
+
+
+ {label &&
+
+ {label}
}
+
+
+
\ No newline at end of file
diff --git a/smoke/astro.build-main/src/components/ContributorsAvatarList.astro b/smoke/astro.build-main/src/components/ContributorsAvatarList.astro
new file mode 100644
index 0000000000000..707ec033b43c6
--- /dev/null
+++ b/smoke/astro.build-main/src/components/ContributorsAvatarList.astro
@@ -0,0 +1,25 @@
+---
+import ContributorAvatar from './ContributorAvatar.astro';
+import ArrowLink from '../components/ArrowLink.astro';
+import contributors from '../data/contributors.json';
+
+const {staff, l3, l2, l1} = contributors;
+---
+-
+ {staff.map(obj =>
+
+ {Astro.slots.title &&
+
+
+
diff --git a/smoke/astro.build-main/src/components/PixelLink.astro b/smoke/astro.build-main/src/components/PixelLink.astro
new file mode 100644
index 0000000000000..6ad18f26aa41d
--- /dev/null
+++ b/smoke/astro.build-main/src/components/PixelLink.astro
@@ -0,0 +1,102 @@
+---
+const { class: className = '', href } = Astro.props;
+// Wrap in because Houdini is disabled for a[href] for security
+
+const { variant = 'primary' } = Astro.props;
+const { before, after } = Astro.slots;
+---
+
+
+
+ {String(code).trim().split('\n').map(
+ line => {
+ line.startsWith('#') ? {line} : line
+ })
+}
+
+
+
diff --git a/smoke/astro.build-main/src/components/blog/Card.astro b/smoke/astro.build-main/src/components/blog/Card.astro
new file mode 100644
index 0000000000000..fe2ee98940f0f
--- /dev/null
+++ b/smoke/astro.build-main/src/components/blog/Card.astro
@@ -0,0 +1,106 @@
+---
+import DateTime from '../../components/Date.astro';
+import Author from '../../components/Author.astro';
+import { smartypants } from 'smartypants';
+
+const { post = {}, variant = 'summary' } = Astro.props;
+const Title = variant === 'summary' ? 'h2' : 'h1';
+---
+
+
+
+
+
diff --git a/smoke/astro.build-main/src/components/blog/Outro.astro b/smoke/astro.build-main/src/components/blog/Outro.astro
new file mode 100644
index 0000000000000..44f9fbc5137aa
--- /dev/null
+++ b/smoke/astro.build-main/src/components/blog/Outro.astro
@@ -0,0 +1,53 @@
+---
+import { Sprite } from 'astro-icon';
+
+const { tweet: { title, href } } = Astro.props;
+---
+
+
+
+Published on
+
+
+
+
+ {smartypants(career.title, 1)}
+
+
+
diff --git a/smoke/astro.build-main/src/components/landing/Award.astro b/smoke/astro.build-main/src/components/landing/Award.astro
new file mode 100644
index 0000000000000..30df3302eb8ed
--- /dev/null
+++ b/smoke/astro.build-main/src/components/landing/Award.astro
@@ -0,0 +1,34 @@
+---
+import Section from './Section.astro';
+import Title from './Title.astro';
+import Panel from '../Panel.astro';
+---
+
+
+
+{career.description}
+
+
+
+
+
+
+
+ Batteries Included.
+Astro does the heavy lifting in the background—no plugins required.
+<slot name="title">Connect with Astro</slot>
+
+
+
+
+ Learn more about Astro, get support, and meet thousands of other devs in our Discord community!
+-
+
+ {social.map(item => (
+
+ ))}
+
+
+
+
+
+
+ x).join(' ')}>
+
+
+
+
+
diff --git a/smoke/astro.build-main/src/components/landing/DemoPartialHydration.astro b/smoke/astro.build-main/src/components/landing/DemoPartialHydration.astro
new file mode 100644
index 0000000000000..1dd005e833e48
--- /dev/null
+++ b/smoke/astro.build-main/src/components/landing/DemoPartialHydration.astro
@@ -0,0 +1,177 @@
+---
+import Illustration from './DemoIllustration.astro';
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {after}
+With Astro
+
+
+
+
+
+
+ -
+ {[0, 1, 2].map((i) => {
+ return (
+
-
+ + ++ + + + +
+ )
+ })}
+
+
+
+
+
+
+ -
+ {[0, 1, 2].map((i) => {
+ return (
+
-
+ + ++ + + + +
+ )
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 10 }, (_, i) => )}
+
+
+
diff --git a/smoke/astro.build-main/src/components/landing/Hero.astro b/smoke/astro.build-main/src/components/landing/Hero.astro
new file mode 100644
index 0000000000000..8adc8f5862a24
--- /dev/null
+++ b/smoke/astro.build-main/src/components/landing/Hero.astro
@@ -0,0 +1,206 @@
+---
+import Grid from './Grid.astro';
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ -
+ {rows.map(row => row.map(icon =>
+
+
+
+
+
+
+
+
+
+ +++
+
+
+
+
+
+ +
+ {title}
+Last updated on
+ +
+
+
+
+
+ +
+ + +
+
+ Lost in space there, astronaut?
+We couldn’t find the page you were looking for—let’s get you back to HQ.
+
+ Return Home
+
+ What is Astro?
+Astro helps web developers build better websites in less time. Astro is an MIT-licensed, open source build tool that combines a modern developer experience with efficient, lightweight output. The end result? Beautiful websites that work great on any device, across any internet connection.
+ +Astro launched 2021 and revolutionized web performance by integrating partial hydration -- a previously difficult-to-setup technology -- directly into the Astro runtime with built-in support for popular frameworks React, Svelte, Vue, and Solid.js.
+ +In less than a year, Astro amassed a huge community of contributors and an even larger audience of 10,000+ users at companies like Google, Netlify, Trivago and more. Astro won the "Ecosystem Innovation Award" at last year's JamstackConf.
+ + + + +Our Community
+Astro is an open source project powered by hundreds of contributors making thousands of individual contributions. You can see many of us on this page!
+ +Open source means that all of our work is done in public, and anyone can get involved and contribute. Visit us on Discord and come say "hi 👋" to learn more.
+ +Want to get paid to work on Astro? Check out open roles at The Astro Technology Company.
+Blog
+ +The Astro Technology Company
+The Astro Technology Company was announced in 2022 to support the long-term success of the Astro project. Its mission is to grow Astro into the best possible platform for web development. You can read more in the official blog post.
+If this mission sounds exciting, consider joining us! We are currently looking for talented, thoughtful people to help us make the Astro vision a reality. If you love the idea of working on tools used by 10,000+ web developers around the world, then the Astro Technology Company might be for you.
+Open Positions
+Our team is growing, and we are currently hiring for the following positions. We are mainly focused in hiring from the United States & Canada, but are open to anyone in overlapping timezones. To apply or just learn more, reach out to jobs@astro.build.
+ +Astro uses a modern server-side templating language that renders directly to HTML & CSS, eliminating heavy JavaScript automatically.
+Meet Astro’s magic tool for web optimization. Astro is the first site builder to eliminate dead code from your website and only hydrate your essential, interactive UI.
+Bring your favorite framework
+ Astro natively supports every popular framework—you can even mix and match!
+Whatever you’re building, Astro has you covered. With convenient, out-of-the-box features and even more ready-to-use integrations, Astro has everything that you need to build.
+Site performance has a tangible impact on the success of your business. Astro sites can be up to 40% faster and use 90% less JavaScript compared to leading static site generators.
++ 87% of websites currently fail Google's Core Web Vitals (CWV) benchmark. Astro is on a mission to change that. +
++ + ++ ++ + + Astro is really shaping up to be one of the formative ways to build mostly-static sites. +Justin Bennett, devtools.fm Host +
+{data.slice(0, 3).map((post) => (
+
+
+))}
+
+```
+
+`.fetchContent()` only takes one parameter: a relative URL glob of which local files you'd like to import. Currently only `*.md` files are supported. It’s synchronous, and returns an array of items of type:
+
+```js
+{
+ /** frontmatter from the post.. example frontmatter:
+ title: '',
+ tag: '',
+ date: '',
+ image: '',
+ author: '',
+ description: '',
+ **/
+ astro: {
+ headers: [], // an array of h1...h6 elements in the markdown file
+ source: '', // raw source of the markdown file
+ html: '' // rendered HTML of the markdown file
+ },
+ url: '' // the rendered 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;
+```
+
+### `Astro.request`
+
+`Astro.request` returns an object with the following properties:
+
+| Name | Type | Description |
+| :------------- | :---- | :---------------------------------------------- |
+| `url` | `URL` | The URL of the request being rendered. |
+| `canonicalURL` | `URL` | [Canonical URL][canonical] of the current page. |
+
+⚠️ Temporary restriction: this is only accessible in top-level pages and not in sub-components.
+
+### `Astro.site`
+
+`Astro.site` returns a `URL` made from `buildOptions.site` in your Astro config. If undefined, this will return a URL generated from `localhost`.
+
+## Collections API
+
+### `collection` prop
+
+```jsx
+const { collection } = Astro.props;
+```
+
+When using the [Collections API](/core-concepts/collections), `collection` is a prop exposed to the page with the following shape:
+
+| Name | Type | Description |
+| :------------------------ | :-------------------: | :-------------------------------------------------------------------------------------------------------------------------------- |
+| `collection.data` | `Array` | Array of data returned from `data()` for the current page. |
+| `collection.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.). |
+| `collection.end` | `number` | Index of last item on current page. |
+| `collection.total` | `number` | The total number of items across all pages. |
+| `collection.page.current` | `number` | The current page number, starting with `1`. |
+| `collection.page.size` | `number` | How many items per-page. |
+| `collection.page.last` | `number` | The total number of pages. |
+| `collection.url.current` | `string` | Get the URL of the current page (useful for canonical URLs) |
+| `collection.url.prev` | `string \| undefined` | Get the URL of the previous page (will be `undefined` if on page 1). |
+| `collection.url.next` | `string \| undefined` | Get the URL of the next page (will be `undefined` if no more pages). |
+| `collection.params` | `object` | If page params were used, this returns a `{ key: value }` object of all values. |
+
+### `createCollection()`
+
+```jsx
+export async function createCollection() {
+ return {
+ async data({ params }) {
+ // load data
+ },
+ pageSize: 25,
+ routes: [{ tag: 'movie' }, { tag: 'television' }],
+ permalink: ({ params }) => `/tag/${params.tag}`,
+ };
+}
+```
+
+When using the [Collections API](/core-concepts/collections), `createCollection()` is an async function that returns an object of the following shape:
+
+| Name | Type | Description |
+| :---------- | :--------------------------------------: | :--------------------------------------------------------------------------------------------------------- |
+| `data` | `async ({ params }) => any[]` | **Required.** Load an array of data with this function to be returned. |
+| `pageSize` | `number` | Specify number of items per page (default: `25`). |
+| `routes` | `params[]` | **Required for URL Params.** Return an array of all possible URL `param` values in `{ name: value }` form. |
+| `permalink` | `({ params }) => string` | **Required for URL Params.** Given a `param` object of `{ name: value }`, generate the final URL.\* |
+| `rss` | [RSS](/reference/api-reference#rss-feed) | Optional: generate an RSS 2.0 feed from this collection ([docs](/reference/api-reference#rss-feed)) |
+
+_\* Note: don't create confusing URLs with `permalink`, e.g. rearranging params conditionally based on their values._
+
+⚠️ `createCollection()` executes in its own isolated scope before page loads. Therefore you can't reference anything from its parent scope. If you need to load data you may fetch or use async `import()`s within the function body for anything you need (that’s why it’s `async`—to give you this ability). If it wasn't isolated, then `collection` would be undefined! Therefore, duplicating imports between `createCollection()` and your Astro component is OK.
+
+#### RSS Feed
+
+You can optionally generate an RSS 2.0 feed from `createCollection()` by adding an `rss` option. Here are all the options:
+
+```jsx
+export async function createCollection() {
+ return {
+ async data({ params }) {
+ // load data
+ },
+ pageSize: 25,
+ rss: {
+ title: 'My RSS Feed',
+ description: 'Description of the feed',
+ /** (optional) add xmlns:* properties to root element */
+ xmlns: {
+ itunes: 'http://www.itunes.com/dtds/podcast-1.0.dtd',
+ content: 'http://purl.org/rss/1.0/modules/content/',
+ },
+ /** (optional) add arbitrary XML to {post.title}
+{post.description}
+ Read more +
+
+
+
diff --git a/smoke/docs-main/src/components/Footer/Footer.astro b/smoke/docs-main/src/components/Footer/Footer.astro
new file mode 100644
index 0000000000000..d13f832e57ead
--- /dev/null
+++ b/smoke/docs-main/src/components/Footer/Footer.astro
@@ -0,0 +1,16 @@
+---
+import AvatarList from './AvatarList.astro';
+const { path } = Astro.props;
+---
+
+
+
+
diff --git a/smoke/docs-main/src/components/HeadCommon.astro b/smoke/docs-main/src/components/HeadCommon.astro
new file mode 100644
index 0000000000000..daa39db13de1c
--- /dev/null
+++ b/smoke/docs-main/src/components/HeadCommon.astro
@@ -0,0 +1,42 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/smoke/docs-main/src/components/HeadSEO.astro b/smoke/docs-main/src/components/HeadSEO.astro
new file mode 100644
index 0000000000000..42f87bd594a0d
--- /dev/null
+++ b/smoke/docs-main/src/components/HeadSEO.astro
@@ -0,0 +1,46 @@
+---
+import { SITE, OPEN_GRAPH } from '../config.ts';
+import { getLanguageFromURL } from '../util.ts';
+export interface Props {
+ content: any;
+ site: any;
+ canonicalURL: URL;
+}
+const { content = {}, canonicalURL } = Astro.props;
+const imageSrc = content?.image?.src ?? OPEN_GRAPH.image.src;
+const canonicalImageSrc = new URL(imageSrc, Astro.site);
+const imageAlt = content?.image?.alt ?? OPEN_GRAPH.image.alt;
+const lang = getLanguageFromURL(canonicalURL?.pathname || '/');
+const ogLocale = lang.replace(/-/g, '_');
+---
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/smoke/docs-main/src/components/Header/AstroLogo.astro b/smoke/docs-main/src/components/Header/AstroLogo.astro
new file mode 100644
index 0000000000000..49daa3c4b4e64
--- /dev/null
+++ b/smoke/docs-main/src/components/Header/AstroLogo.astro
@@ -0,0 +1,29 @@
+---
+const { size } = Astro.props;
+---
+
+
diff --git a/smoke/docs-main/src/components/Header/Header.astro b/smoke/docs-main/src/components/Header/Header.astro
new file mode 100644
index 0000000000000..9bcf89ca71e79
--- /dev/null
+++ b/smoke/docs-main/src/components/Header/Header.astro
@@ -0,0 +1,172 @@
+---
+import SkipToContent from './SkipToContent.astro';
+import SidebarToggle from './SidebarToggle.tsx';
+import LanguageSelect from './LanguageSelect.tsx';
+import Search from './Search.tsx';
+import { getLanguageFromURL } from '../../util.ts';
+const { currentPage } = Astro.props;
+const lang = currentPage && getLanguageFromURL(currentPage);
+---
+
+-
+ {recentContributors.map((item) => (
+
-
+
+
+ +
+ ))}
+
+
+
+
+ );
+};
+
+export default LanguageSelect;
diff --git a/smoke/docs-main/src/components/Header/Search.css b/smoke/docs-main/src/components/Header/Search.css
new file mode 100644
index 0000000000000..42da3832c8019
--- /dev/null
+++ b/smoke/docs-main/src/components/Header/Search.css
@@ -0,0 +1,75 @@
+/** Style Algolia */
+:root {
+ --docsearch-primary-color: var(--theme-accent);
+ --docsearch-logo-color: var(--theme-text);
+}
+
+.DocSearch-Modal .DocSearch-Hit a {
+ box-shadow: none;
+ border: 1px solid var(--theme-accent);
+}
+
+/** Style Search Bar */
+.search-placeholder {
+ flex-grow: 1;
+ text-align: initial;
+}
+.search-input {
+ flex-grow: 1;
+ box-sizing: border-box;
+ width: 100%;
+ margin: 0;
+ padding: 0.33em 0.5em;
+ overflow: visible;
+ font-weight: 500;
+ font-size: 1rem;
+ font-family: inherit;
+ line-height: inherit;
+ background-color: var(--theme-divider);
+ border-color: var(--theme-divider);
+ color: var(--theme-text-light);
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 0.25rem;
+ outline: 0;
+ cursor: pointer;
+ transition-timing-function: ease-out;
+ transition-duration: 0.2s;
+ transition-property: border-color, color;
+ -webkit-font-smoothing: antialiased;
+}
+.search-input:hover,
+.search-input:focus {
+ color: var(--theme-text);
+ border-color: var(--theme-text-light);
+}
+.search-input:hover::placeholder,
+.search-input:focus::placeholder {
+ color: var(--theme-text-light);
+}
+.search-input::placeholder {
+ color: var(--theme-text-light);
+}
+.search-hint {
+ padding: 3px 5px;
+ display: none;
+ display: none;
+ align-items: center;
+ justify-content: center;
+ letter-spacing: 0.125em;
+ font-size: 13px;
+ font-family: var(--font-mono);
+ pointer-events: none;
+ border-color: var(--theme-text-lighter);
+ color: var(--theme-text-light);
+ border-style: solid;
+ border-width: 1px;
+ border-radius: 0.25rem;
+ line-height: 14px;
+}
+
+@media (min-width: 50em) {
+ .search-hint {
+ display: flex;
+ }
+}
diff --git a/smoke/docs-main/src/components/Header/Search.tsx b/smoke/docs-main/src/components/Header/Search.tsx
new file mode 100644
index 0000000000000..c4fd6f984a954
--- /dev/null
+++ b/smoke/docs-main/src/components/Header/Search.tsx
@@ -0,0 +1,82 @@
+/* jsxImportSource: react */
+import { useState, useCallback, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import * as docsearch from '@docsearch/react';
+import '@docsearch/css/dist/style.css';
+import './Search.css';
+
+const { DocSearchModal, useDocSearchKeyboardEvents } = (docsearch as unknown as { default: typeof docsearch }).default || docsearch;
+
+export default function Search(props) {
+ const [isOpen, setIsOpen] = useState(false);
+ const searchButtonRef = useRef();
+ const [initialQuery, setInitialQuery] = useState(null);
+ const { lang = 'en' } = props;
+
+ const onOpen = useCallback(() => {
+ setIsOpen(true);
+ }, [setIsOpen]);
+
+ const onClose = useCallback(() => {
+ setIsOpen(false);
+ }, [setIsOpen]);
+
+ const onInput = useCallback(
+ (e) => {
+ setIsOpen(true);
+ setInitialQuery(e.key);
+ },
+ [setIsOpen, setInitialQuery]
+ );
+
+ useDocSearchKeyboardEvents({
+ isOpen,
+ onOpen,
+ onClose,
+ onInput,
+ searchButtonRef,
+ });
+
+ return (
+ <>
+
+ {isOpen &&
+ createPortal(
+ {title}
+ {headers && ( + + )} +More
+-
+
- + + + Edit this page + + +
- + + + Translate this page + + +
- + + + Join our community + + +
+
+
+
diff --git a/smoke/docs-main/src/components/RightSidebar/RightSidebar.astro b/smoke/docs-main/src/components/RightSidebar/RightSidebar.astro
new file mode 100644
index 0000000000000..c27232cf62dc6
--- /dev/null
+++ b/smoke/docs-main/src/components/RightSidebar/RightSidebar.astro
@@ -0,0 +1,27 @@
+---
+import TableOfContents from './TableOfContents.tsx';
+import MoreMenu from './MoreMenu.astro';
+const { content, githubEditUrl } = Astro.props;
+const headers = content.astro?.headers;
+---
+
+
+
+
diff --git a/smoke/docs-main/src/components/RightSidebar/TableOfContents.tsx b/smoke/docs-main/src/components/RightSidebar/TableOfContents.tsx
new file mode 100644
index 0000000000000..578d2aa98f0f4
--- /dev/null
+++ b/smoke/docs-main/src/components/RightSidebar/TableOfContents.tsx
@@ -0,0 +1,45 @@
+import type { FunctionalComponent } from 'preact';
+import { h, Fragment } from 'preact';
+import { useState, useEffect, useRef } from 'preact/hooks';
+
+const TableOfContents: FunctionalComponent<{ headers: any[] }> = ({ headers = [] }) => {
+ const itemOffsets = useRef([]);
+ const [activeId, setActiveId] = useStateOn this page
+-
+
- + Overview + + {headers + .filter(({ depth }) => depth > 1 && depth < 4) + .map((header) => ( +
- + {header.text} + + ))} +
+ {themes.map((t, i) => {
+ const icon = icons[i];
+ const checked = t === theme;
+ return (
+
+ );
+ })}
+
+ );
+}
+
+export default ThemeToggle;
diff --git a/smoke/docs-main/src/config.ts b/smoke/docs-main/src/config.ts
new file mode 100644
index 0000000000000..4c27e724766ff
--- /dev/null
+++ b/smoke/docs-main/src/config.ts
@@ -0,0 +1,215 @@
+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: 'Migration Guide', link: 'en/migrate' },
+ { text: 'Themes', link: 'en/themes' },
+ { text: 'Astro vs. X', link: 'en/comparing-astro-vs-other-tools' },
+
+ { 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' },
+
+ { text: '基本', header: true },
+ { text: 'ディレクトリ構成', link: 'ja/core-concepts/project-structure' },
+ ],
+ 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' },
+ ],
+ pl: [
+ { text: 'Konfiguracja', header: true },
+ { text: 'Na początek', link: 'pl/getting-started' },
+ ],
+ hu: [
+ { text: 'Beállítás', header: true },
+ { text: 'Első Lépések', link: 'hu/getting-started' },
+ { text: 'Gyors Beállítás', link: 'hu/quick-start' },
+ { text: 'Telepítés', link: 'hu/installation' },
+ ],
+};
+
+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/smoke/docs-main/src/data/components.json b/smoke/docs-main/src/data/components.json
new file mode 100644
index 0000000000000..089d31f790764
--- /dev/null
+++ b/smoke/docs-main/src/data/components.json
@@ -0,0 +1,29 @@
+{
+ "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/smoke/docs-main/src/data/themes.json b/smoke/docs-main/src/data/themes.json
new file mode 100644
index 0000000000000..27142ac3ce8e3
--- /dev/null
+++ b/smoke/docs-main/src/data/themes.json
@@ -0,0 +1,80 @@
+{
+ "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/smoke/docs-main/src/layouts/MainLayout.astro b/smoke/docs-main/src/layouts/MainLayout.astro
new file mode 100644
index 0000000000000..9ebe2f22e5a1e
--- /dev/null
+++ b/smoke/docs-main/src/layouts/MainLayout.astro
@@ -0,0 +1,124 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
+import Header from '../components/Header/Header.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';
+import { getLanguageFromURL } from '../util.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/docs/blob/main/${currentFile}`;
+const formatTitle = (content, SITE) => (content.title ? `${content.title} 🚀 ${SITE.title}` : SITE.title);
+const lang = getLanguageFromURL(Astro.request.url.pathname);
+---
+
+
+
+
+
+
+
+
+ 404
+This page isn't in our solar system.
+ Take me home. +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) تتضمن قائمة بكل العناصر الرئيسية مثل `404
+Diese Seite befindet sich nicht in unserem Sonnensystem.
+ Bring mich nach Hause. +
+
+```
+
+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 `
+
+Hallo Welt!
+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 ``-Tags im ``-Block, ganz so wie du es gewohnt bist. Diese Methode kann in Astro auch im Zusammenhang mit dem ` + + +