Merge branch 'main' into add-neon

src/content/docs/en/guides/cms/sanity.mdx

@@ -12,7 +12,7 @@ i18nReady: true
 import Grid from '~/components/FluidGrid.astro'
 import Card from '~/components/ShowcaseCard.astro'
 
-[Sanity](http://sanity.io) is a headless content management system that focuses on [structured content](https://www.sanity.io/structured-content-platform).
+[Sanity](https://www.sanity.io) is a headless content management system that focuses on [structured content](https://www.sanity.io/structured-content-platform).
 
 ## Official Resources
 

src/content/docs/en/guides/deploy/azion.mdx

@@ -86,7 +86,7 @@ To start building, follow these steps:
 
 This guide provides an overview of deploying static applications.
 
-## Enabling Local Devlopment Using Azion CLI
+## Enabling Local Development Using Azion CLI
 
 For the preview to work, you must execute the following command:
 

src/content/docs/en/guides/deploy/microsoft-azure.mdx

@@ -50,3 +50,4 @@ The GitHub action yaml that is created for you assumes the use of node 14. This
 
 - [Deploying an Astro Website to Azure Static Web Apps](https://www.blueboxes.co.uk/deploying-an-astro-website-to-azure-static-web-apps)
 - [Deploying a Static Astro Site to Azure Static Web Apps using GitHub Actions](https://agramont.net/blog/create-static-site-astro-azure-ssg/#automate-deployment-with-github-actions)
+- [Astro site deployment to Azure Static Web Apps with the CLI from GitHub Actions](https://www.eliostruyf.com/deploy-astro-azure-static-web-apps-github-cli/)

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

@@ -31,7 +31,7 @@ Local Markdown can be imported into `.astro` components using an `import` statem
 
 If you have groups of related Markdown files, consider [defining them as collections](/en/guides/content-collections/). This gives you several advantages, including the ability to store Markdown files anywhere on your filesystem or remotely.
 
-Collections use content-specfic, optimized APIs for [querying and rendering your Markdown content](#markdown-from-content-collections-queries) instead of file imports. Collections are intended for sets of data that share the same structure, such as blog posts or product items. When you define that shape in a schema, you additionally get validation, type safety, and Intellisense in your editor.
+Collections use content-specific, optimized APIs for [querying and rendering your Markdown content](#markdown-from-content-collections-queries) instead of file imports. Collections are intended for sets of data that share the same structure, such as blog posts or product items. When you define that shape in a schema, you additionally get validation, type safety, and Intellisense in your editor.
 
 <ReadMore>See more about [when to use content collections](/en/guides/content-collections/#when-to-create-a-collection) instead of file imports.</ReadMore>
 

src/content/docs/en/guides/upgrade-to/v5.mdx

@@ -575,7 +575,7 @@ No functionality has changed. This component has only changed its name.
 
 #### What should I do?
 
-Replace all occurences of the `ViewTransitions` import and component with `ClientRouter`:
+Replace all occurrences of the `ViewTransitions` import and component with `ClientRouter`:
 
 ```astro title="src/layouts/MyLayout.astro" del={1,7} ins={2,8}
 import { ViewTransitions } from 'astro:transitions';

src/content/docs/en/reference/cli-reference.mdx

@@ -240,7 +240,7 @@ For example, running `astro check --minimumSeverity warning` will show errors an
 
 #### `--preserveWatchOutput`
 
-Specifies not to clear the ouput between checks when in watch mode.
+Specifies not to clear the output between checks when in watch mode.
 
 #### `--noSync`
 

src/content/docs/en/reference/integrations-reference.mdx

@@ -1452,7 +1452,7 @@ For regular routes, the value will be the URL pathname where this route will be
 
 Allows you to access the route [`params`](#params) with additional metadata. Each object contains the following properties:
 * `content`: the `param` name,
-* `dynamic`: wether the route is dynamic or not,
+* `dynamic`: whether the route is dynamic or not,
 * `spread`: whether the dynamic route uses the spread syntax or not.
 
 For example, the following route `/pages/[blog]/[...slug].astro` will output the segments:
@@ -1580,7 +1580,7 @@ Allows you to access the route `params`. For example, when a project uses the fo
 
 Allows you to access the route [`params`](#params-1) with additional metadata. Each object contains the following properties:
 * `content`: the `param`,
-* `dynamic`: wether the route is dynamic or not,
+* `dynamic`: whether the route is dynamic or not,
 * `spread`: whether the dynamic route uses the spread syntax or not.
 
 For example, the following route `/pages/[lang]/index.astro` will output the segments `[[ { content: 'lang', dynamic: true, spread: false } ]]`.

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

@@ -64,8 +64,6 @@ import localBirdImage from '../../images/subfolder/localBirdImage.png';
 - `src/` 폴더에 있는 로컬 이미지
 - 인증된 소스에서 가져오는 [구성된 원격 이미지](#원격-이미지-승인)
 
-`public/` 폴더에 있는 이미지와 프로젝트에 특별히 구성되지 않은 원격 이미지도 이미지 컴포넌트와 함께 사용할 수 있지만 처리되지는 않습니다.
-
 `<Image />`는 표시된 이미지를 제어하기 위해 로컬 또는 인증된 원격 이미지의 크기, 파일 유형 및 품질을 변환할 수 있습니다. 결과 `<img>` 태그에는 `alt`, `loading` 및 `decoding` 속성이 포함되며 CLS (Cumulative Layout Shift)를 방지하기 위해 이미지 크기를 유추합니다.
 
 :::note[Cumulative Layout Shift란 무엇입니까?]
@@ -279,7 +277,7 @@ export default defineConfig({
 
 ## Markdown 파일의 이미지
 
-`.md` 파일에 표준 Markdown `![alt](src)` 구문을 사용하세요. 이 구문은 Astro의 [이미지 서비스 API](/ko/reference/image-service-reference/)와 함께 작동하여 `src/`에 저장된 로컬 이미지를 최적화합니다. 원격 이미지와 `public/` 폴더에 저장된 이미지는 최적화되지 않습니다.
+`.md` 파일에 표준 Markdown `![alt](src)` 구문을 사용하세요. 이 구문은 Astro의 [이미지 서비스 API](/ko/reference/image-service-reference/)와 함께 작동하여 `src/`에 저장된 로컬 이미지와 원격 이미지를 최적화합니다. `public/` 폴더에 저장된 이미지는 절대 최적화되지 않습니다.
 
 ```md
 <!-- src/pages/post-1.md -->
@@ -299,9 +297,9 @@ export default defineConfig({
 ![Astro](https://example.com/images/remote-image.png)
 ```
 
-로컬 이미지에는 `<img>` 태그가 지원되지 않으며 `.md` 파일에서는 `<Image />` 및 `<Picture />` 컴포넌트를 사용할 수 없습니다.
+HTML `<img>` 태그는 `public/`에 저장된 이미지 또는 원격 이미지를 이미지 최적화나 처리 없이 표시하는 데 사용할 수도 있습니다. 하지만 `<img>`는 `src`에 있는 로컬 이미지에 대해서는 지원되지 않습니다.
 
-이미지 속성에 대한 더 많은 제어가 필요한 경우, [Astro의 MDX 통합](/ko/guides/integrations-guide/mdx/)을 사용하여 `.mdx` 파일 형식에 대한 지원을 추가하는 것이 좋습니다. MDX를 사용하면 Markdown에 컴포넌트를 추가할 수 있으며, [MDX에서 사용할 수 있는 추가 이미지 옵션](#mdx-파일의-이미지)도 제공됩니다.
+`<Image />` 및 `<Picture />` 컴포넌트는 `.md` 파일에서 사용할 수 없습니다. 이미지 속성을 보다 세밀하게 제어해야 하는 경우, [Astro의 MDX 통합](/ko/guides/integrations-guide/mdx/)을 사용하여 `.mdx` 파일 형식에 대한 지원을 추가하는 것을 권장합니다. MDX는 컴포넌트와 Markdown 구문을 결합하는 것을 포함하여 [MDX의 이미지 옵션](#mdx-파일의-이미지)을 추가로 사용할 수 있도록 합니다.
 
 ## MDX 파일의 이미지
 

src/content/docs/ko/guides/integrations-guide/vercel.mdx

@@ -274,7 +274,7 @@ export default defineConfig({
 
 Vercel의 [초안 모드](https://vercel.com/docs/build-output-api/v3/features#draft-mode) 또는 [주문형 증분형 정적 재생성 (ISR)](https://vercel.com/docs/build-output-api/v3/features#on-demand-incremental-static-regeneration-isr)을 구현하려면 bypass 토큰을 생성하고 이를 캐싱에서 제외할 경로와 함께 `isr` 구성에 제공할 수 있습니다.
 
-```js title="astro.config.mjs" {7-12}
+```js title="astro.config.mjs" {7-16}
 import { defineConfig } from 'astro/config';
 import vercel from '@astrojs/vercel';
 
@@ -285,7 +285,11 @@ export default defineConfig({
       // 여러분이 생성하는 무작위 비밀 문자열입니다.
       bypassToken: '005556d774a8',
       // 항상 최신 상태로 제공되는 경로입니다.
-      exclude: [ "/api/invalidate", "/posts/[...slug]" ]
+      exclude: [
+        '/preview', 
+        '/auth/[page]',
+        /^\/api\/.+/ // `@astrojs/[email protected]`부터 정규 표현식이 지원됩니다.
+      ]
     },
   }),
 });

src/content/docs/ko/reference/cli-reference.mdx

@@ -431,6 +431,14 @@ astro --config config/astro.config.mjs dev
 프로덕션 환경에서 개발 서버 및 미리보기 서버를 노출하기 위해 `--host` 플래그를 사용하지 마세요. 서버는 사이트를 개발하는 동안에만 로컬 사용을 위해 설계되었습니다.
 :::
 
+### `--allowed-hosts`
+
+<p><Since v="5.4.0" /></p>
+
+`dev` 또는 `preview` 모드에서 Astro가 응답할 수 있는 호스트 이름을 지정합니다. 쉼표로 구분된 호스트 이름 목록이나 모든 호스트 이름을 허용하는 `true`를 전달할 수 있습니다.
+
+호스트 이름 허용의 보안 관련 사항을 포함한 자세한 내용은 [Vite의 `allowedHosts` 기능](https://ko.vite.dev/config/server-options.html#server-allowedhosts)을 참조하세요.
+
 ### `--verbose`
 
 문제를 디버깅할 때 유용한 자세한 로깅을 활성화합니다.

src/content/docs/ko/reference/experimental-flags/responsive-images.mdx

@@ -24,9 +24,66 @@ import Since from '~/components/Since.astro'
 }
 ```
 
-이 플래그가 활성화되면 모든 `<Image />` 또는 `<Picture />` 컴포넌트에 `layout` prop을 전달하여 반응형 이미지를 생성할 수 있습니다.
+이 플래그를 활성화하면 Astro에서 처리하고 최적화한 모든 이미지의 기본 동작을 제어하기 위한 추가적인 [`이미지` 구성 설정](#반응형-이미지-구성-설정)에 액세스할 수 있습니다.
 
-레이아웃이 설정되면, 이미지는 이미지의 크기와 레이아웃 타입을 기반으로 자동 생성된 `srcset`과 `sizes` 속성을 갖게 됩니다. `responsive`와 `full-width` 레이아웃을 가진 이미지들은 컨테이너에 따라 크기가 조정되도록 스타일이 적용됩니다.
+- [Markdown의 `![]()` 구문](/ko/guides/images/#markdown-파일의-이미지)을 사용하는 로컬 및 원격 이미지
+- [`<Image />`](/ko/guides/images/#image--컴포넌트를-사용하여-최적화된-이미지-표시) 및 [`<Picture />`](/ko/guides/images/#picture--컴포넌트를-사용해-반응형-이미지-만들기) 컴포넌트
+
+또한 Astro의 이미지 컴포넌트는 이미지별로 이러한 기본값을 재정의하기 위해 [반응형 이미지 props](#반응형-이미지-속성)를 받을 수 있습니다.
+
+`public/` 폴더의 이미지는 절대 최적화되지 않으며, 반응형 이미지는 지원되지 않습니다.
+
+## 반응형 이미지 구성 설정
+
+프로젝트 전체에서 반응형 이미지를 활성화하려면 [`image.experimentalLayout`](/ko/reference/configuration-reference/#imageexperimentallayout)을 기본값 (`responsive`, `fixed` 또는 `full-width`)으로 설정하세요.
+
+이 값이 구성되지 않은 경우에도 `<Image />` 또는 `<Picture />` 컴포넌트에 `layout` prop을 전달하여 반응형 이미지를 만들 수 있습니다. 그러나 Markdown 이미지는 반응형이 되지 않습니다.
+
+기본적으로 처리된 모든 이미지에 적용되는 [`image.experimentalObjectFit`](/ko/reference/configuration-reference/#imageexperimentalobjectfit) 및 [`image.experimentalObjectPosition`](/ko/reference/configuration-reference/#imageexperimentalobjectposition)을 선택적으로 구성할 수 있습니다.
+
+이러한 각 설정은 prop을 사용하여 개별 `<Image />` 또는 `<Picture />` 컴포넌트에서 재정의할 수 있지만, 모든 Markdown 이미지는 항상 기본 설정을 사용합니다.
+
+```js title="astro.config.mjs"
+{
+  image: {
+    // 모든 Markdown 이미지에 사용되며, 이미지별로 구성할 수 없습니다.
+    // prop으로 재정의되지 않는 한 모든 `<Image />` 및 `<Picture />` 컴포넌트에 사용됩니다.
+    experimentalLayout: 'responsive',
+  },
+  experimental: {
+    responsiveImages: true,
+  },
+}
+```
+
+## 반응형 이미지 속성
+
+반응형 이미지가 활성화되었을 때 `<Image />` 및 `<Picture />` 컴포넌트에서 사용할 수 있는 추가 속성들입니다:
+
+- `layout`: 이미지의 레이아웃 타입입니다. `responsive`, `fixed`, `full-width` 또는 `none`이 될 수 있습니다. 기본값은 [`image.experimentalLayout`](/ko/reference/configuration-reference/#imageexperimentallayout)의 값입니다.
+- `fit`: 종횡비가 변경될 때 이미지를 어떻게 자를지 정의합니다. CSS `object-fit`의 값들과 일치합니다. 기본값은 `cover`이며, [`image.experimentalObjectFit`](/ko/reference/configuration-reference/#imageexperimentalobjectfit)이 설정된 경우 해당 값이 사용됩니다.
+- `position`: 종횡비가 변경될 때 이미지 자르기 위치를 정의합니다. CSS `object-position`의 값들과 일치합니다. 기본값은 `center`이며, [`image.experimentalObjectPosition`](/ko/reference/configuration-reference/#imageexperimentalobjectposition)이 설정된 경우 해당 값이 사용됩니다.
+- `priority`: 설정된 경우, 이미지를 즉시 로드합니다. 그렇지 않으면 이미지는 지연 로드됩니다. 첫 화면에서 가장 큰 이미지에 이 속성을 사용하세요. 기본값은 `false`입니다.
+
+`widths`와 `sizes` 속성은 이미지의 크기와 레이아웃 타입을 기반으로 자동 생성되며, 대부분의 경우 수동으로 설정할 필요가 없습니다. `responsive`와 `full-width` 이미지에 대해 생성된 `sizes` 속성은 뷰포트가 이미지 너비보다 작을 때 이미지가 화면 전체 너비에 가깝게 표시된다는 가정을 기반으로 합니다. 만약 이것이 상당히 다른 경우(예: 작은 화면에서 다중 열 레이아웃인 경우) 최상의 결과를 위해 `sizes` 속성을 수동으로 조정해야 할 수 있습니다.
+
+`densities` 속성은 반응형 이미지와 호환되지 않으며 설정하더라도 무시됩니다.
+
+예를 들어 `responsive`를 기본 레이아웃으로 설정한 경우, 개별 이미지의 `layout` 속성을 재정의할 수 있습니다.
+
+```astro
+---
+import { Image } from 'astro:assets';
+import myImage from '../assets/my_image.png';
+---
+<Image src={myImage} alt="반응형 레이아웃을 사용합니다." width={800} height={600} />
+<Image src={myImage} alt="전체 너비 레이아웃을 사용합니다." layout="full-width" />
+<Image src={myImage} alt="반응형 이미지를 비활성화합니다." layout="none" />
+```
+
+## 반응형 이미지 HTML 생성 결과
+
+레이아웃이 기본적으로 또는 개별 컴포넌트에서 설정되면, 이미지는 크기와 레이아웃 유형에 따라 자동으로 생성된 `srcset` 및 `sizes` 속성을 갖게 됩니다. `responsive` 및 `full-width` 레이아웃을 가진 이미지는 컨테이너에 따라 크기가 조정되도록 스타일이 적용됩니다.
 
 ```astro title=MyComponent.astro
 ---
@@ -83,45 +140,4 @@ import myImage from '../assets/my_image.png';
 }
 ```
 
-## 반응형 이미지 속성
-
-반응형 이미지가 활성화되었을 때 `<Image />` 및 `<Picture />` 컴포넌트에서 사용할 수 있는 추가 속성들입니다:
-
-- `layout`: 이미지의 레이아웃 타입입니다. `responsive`, `fixed`, `full-width` 또는 `none`이 될 수 있습니다. 기본값은 [`image.experimentalLayout`](/ko/reference/configuration-reference/#imageexperimentallayout)의 값입니다.
-- `fit`: 종횡비가 변경될 때 이미지를 어떻게 자를지 정의합니다. CSS `object-fit`의 값들과 일치합니다. 기본값은 `cover`이며, [`image.experimentalObjectFit`](/ko/reference/configuration-reference/#imageexperimentalobjectfit)이 설정된 경우 해당 값이 사용됩니다.
-- `position`: 종횡비가 변경될 때 이미지 자르기 위치를 정의합니다. CSS `object-position`의 값들과 일치합니다. 기본값은 `center`이며, [`image.experimentalObjectPosition`](/ko/reference/configuration-reference/#imageexperimentalobjectposition)이 설정된 경우 해당 값이 사용됩니다.
-- `priority`: 설정된 경우, 이미지를 즉시 로드합니다. 그렇지 않으면 이미지는 지연 로드됩니다. 첫 화면에서 가장 큰 이미지에 이 속성을 사용하세요. 기본값은 `false`입니다.
-
-`widths`와 `sizes` 속성은 이미지의 크기와 레이아웃 타입을 기반으로 자동 생성되며, 대부분의 경우 수동으로 설정할 필요가 없습니다. `responsive`와 `full-width` 이미지에 대해 생성된 `sizes` 속성은 뷰포트가 이미지 너비보다 작을 때 이미지가 화면 전체 너비에 가깝게 표시된다는 가정을 기반으로 합니다. 만약 이것이 상당히 다른 경우(예: 작은 화면에서 다중 열 레이아웃인 경우) 최상의 결과를 위해 `sizes` 속성을 수동으로 조정해야 할 수 있습니다.
-
-`densities` 속성은 반응형 이미지와 호환되지 않으며 설정하더라도 무시됩니다.
-
-## 반응형 이미지 구성 설정
-
-[`image.experimentalLayout`](/ko/reference/configuration-reference/#imageexperimentallayout)을 기본값으로 설정하여 모든 `<Image />` 및 `<Picture />` 컴포넌트에 대해 반응형 이미지를 활성화할 수 있습니다. 이 설정은 각 컴포넌트의 `layout` prop으로 재정의할 수 있습니다.
-
-```js title="astro.config.mjs"
-{
-  image: {
-    // 재정의되지 않는 한 모든 `<Image />` 및 `<Picture />` 컴포넌트에 사용됩니다
-    experimentalLayout: 'responsive',
-     },
-  experimental: {
-    responsiveImages: true,
-  },
-}
-```
-
-`responsive`를 기본 레이아웃으로 설정한 경우, 개별 이미지의 `layout` 속성을 재정의할 수 있습니다:
-
-```astro
----
-import { Image } from 'astro:assets';
-import myImage from '../assets/my_image.png';
----
-<Image src={myImage} alt="This will use responsive layout" width={800} height={600} />
-<Image src={myImage} alt="This will use full-width layout" layout="full-width" />
-<Image src={myImage} alt="This will disable responsive images" layout="none" />
-```
-
 전체 개요를 확인하고 이 실험적 API에 대한 피드백을 제공하려면, [반응형 이미지 RFC](https://github.com/withastro/roadmap/blob/responsive-images/proposals/0053-responsive-images.md)를 참조하세요.