fix: update astro-pages.mdx

withastro · Mar 4, 2025 · aef363d · aef363d
1 parent 38e1afe
commit aef363d
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 95 deletions.
diff --git a/i18n-guides/한국어.md b/i18n-guides/한국어.md
@@ -76,7 +76,7 @@ import MySiteLayout from '../layouts/MySiteLayout.astro';
 | hook              | 훅        |                                                     |      
 | hydration              | 하이드레이션        |                                                     |      
 | island              | 아일랜드      |                                                 |     
-| on-demand              | 온디맨드      |                                                 |  
+| on-demand              | 요청 시      |                                                 |  
 | placeholder          | 자리 표시자      |                                                 |      
 | prerequisites          | 사전 준비 사항      |                                                 |      
 | release             | 릴리스        |                                                |      

diff --git a/src/content/docs/en/basics/astro-pages.mdx b/src/content/docs/en/basics/astro-pages.mdx
@@ -3,15 +3,15 @@ title: Pages
 description: An introduction to Astro pages.
 i18nReady: true
 ---
-
-import ReadMore from '~/components/ReadMore.astro';
-import Since from '~/components/Since.astro'
+import ReadMore from "~/components/ReadMore.astro";
+import Since from "~/components/Since.astro"
 
 **Pages** are files that live in the `src/pages/` subdirectory of your Astro project. They are responsible for handling routing, data loading, and overall page layout for every page in your website.
 
 ## Supported page files 
 
 Astro supports the following file types in the `src/pages/` directory:
+
 - [`.astro`](#astro-pages)
 - [`.md`](#markdownmdx-pages)
 - `.mdx` (with the [MDX Integration installed](/en/guides/integrations-guide/mdx/#installation))
@@ -57,10 +57,9 @@ A page must produce a full HTML document. If not explicitly included, Astro will
 
 To avoid repeating the same HTML elements on every page, you can move common `<head>` and `<body>` elements into your own [layout components](/en/basics/layouts/). You can use as many or as few layout components as you'd like.
 
-```astro {3} /</?MySiteLayout>/
+```astro title="src/pages/index.astro" /</?MySiteLayout>/ {2}
 ---
-// src/pages/index.astro
-import MySiteLayout from '../layouts/MySiteLayout.astro';
+import MySiteLayout from "../layouts/MySiteLayout.astro";
 ---
 <MySiteLayout>
   <p>My page content, wrapped in a layout!</p>
@@ -82,8 +81,8 @@ Markdown files can use the special `layout` frontmatter property to specify a [l
 ```md {3}
 ---
 # Example: src/pages/page.md
-layout: '../layouts/MySiteLayout.astro'
-title: 'My Markdown page'
+layout: ../layouts/MySiteLayout.astro
+title: My Markdown page
 ---
 # Title
 
@@ -118,18 +117,17 @@ During development, if you have a `500.astro`, the error thrown at runtime is lo
 
 `src/pages/500.astro` is a special page that is automatically passed an `error` prop for any error thrown during rendering. This allows you to use the details of an error (e.g. from a page, from middleware, etc.) to display information to your visitor.
 
-The error prop's data type can be anything, which may affect how you type or use the value in your code:
+The `error` prop's data type can be anything, which may affect how you type or use the value in your code:
 
 ```astro title="src/pages/500.astro"
 ---
 interface Props {
-    error: unknown
+  error: unknown;
 }
 
-const { error } = Astro.props
+const { error } = Astro.props;
 ---
-
-<div>{error instanceof Error ? error.message : 'Unknown error'}</div>
+<div>{error instanceof Error ? error.message : "Unknown error"}</div>
 ```
 
 To avoid leaking sensitive information when displaying content from the `error` prop, consider evaluating the error first, and returning appropriate content based on the error thrown. For example, you should avoid displaying the error's stack as it contains information about how your code is structured on the server.
@@ -148,7 +146,7 @@ Partials are page components located within `src/pages/` that are not intended t
 
 Like components located outside of this folder, these files do not automatically include the `<!DOCTYPE html>` declaration, nor any `<head>` content such as scoped styles and scripts.
 
-However, because they are located in the special `src/pages/` directory, the generated HTML is available at a URL corresponding to its file path. This allows a rendering library (e.g. htmx, Stimulus, jQuery) to access it on the client and load sections of HTML dynamically on a page without a browser refresh or page navigation.
+However, because they are located in the special `src/pages/` directory, the generated HTML is available at a URL corresponding to its file path. This allows a rendering library (e.g. [htmx](https://htmx.org/), [Stimulus](https://stimulus.hotwired.dev/), [jQuery](https://jquery.com/)) to access it on the client and load sections of HTML dynamically on a page without a browser refresh or page navigation.
 
 Partials, when combined with a rendering library, provide an alternative to [Astro islands](/en/concepts/islands/) and [`<script>` tags](/en/guides/client-side-scripts/) for building dynamic content in Astro.
 
@@ -158,15 +156,14 @@ Page files that can export a value for [`partial`](/en/reference/routing-referen
 ---
 export const partial = true;
 ---
-
 <li>I'm a partial!</li>
 ```
 
 ### Using with a library
 
- Partials are used to dynamically update a section of a page using a library such as [htmx](https://htmx.org/).
+Partials are used to dynamically update a section of a page using a library such as [htmx](https://htmx.org/).
 
- The following example shows an `hx-post` attribute set to a partial's URL. The content from the partial page will be used to update the targeted HTML element on this page. 
+The following example shows an `hx-post` attribute set to a partial's URL. The content from the partial page will be used to update the targeted HTML element on this page. 
 
 ```astro title="src/pages/index.astro" 'hx-post="/partials/clicked/"'
 <html>
@@ -176,18 +173,20 @@ export const partial = true;
       integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
       crossorigin="anonymous"></script>
   </head>
+  <body>
+    <section>
+      <div id="parent-div">Target here</div>
+    
+      <button hx-post="/partials/clicked/"
+        hx-trigger="click"
+        hx-target="#parent-div"
+        hx-swap="innerHTML"
+      >
+        Click Me!
+      </button>
+    </section>
+  </body>
 </html>
-<section>
-  <div id="parent-div">Target here</div>
-
-  <button hx-post="/partials/clicked/"
-    hx-trigger="click"
-    hx-target="#parent-div"
-    hx-swap="innerHTML"
-  >
-      Click Me!
-  </button>
-</section>
 ```
 
 The `.astro` partial must exist at the corresponding file path, and include an export defining the page as a partial: