You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/docs/languages/astro.mdx
+117-2Lines changed: 117 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,3 +1,118 @@
1
-
# Astro
1
+
Astro is a modern static site builder focused on delivering fast, content-driven websites. It uses a “zero JavaScript by default” approach and supports multiple frameworks like React, Vue, and Svelte through an islands architecture.
2
+
3
+
## Usage
4
+
5
+
There are **two primary modes** for building and rendering Astro pages:
6
+
7
+
### Static (Default)
8
+
9
+
In this mode, pages are fully pre-rendered at build time.
10
+
All data must be available during the build process and can be supplied through **frontmatter**, **data fetching functions**, or **integrations**.
11
+
12
+
**Example:** Provide data to a page using frontmatter.
13
+
14
+
```astro
15
+
---
16
+
const name = "LiveCodes";
17
+
---
18
+
<h1>Hello {name}!</h1>
19
+
````
20
+
21
+
---
22
+
23
+
### Dynamic
24
+
25
+
To enable runtime rendering, configure the page as a server-rendered route or use an Astro server adapter (e.g., Node, Deno, or Vercel).
26
+
27
+
In this mode, values can be provided dynamically during request handling.
28
+
29
+
**Example:** Create a server-side API endpoint:
30
+
31
+
```js
32
+
// src/pages/api/hello.js
33
+
export async function get() {
34
+
return new Response(JSON.stringify({ name: 'LiveCodes' }), {
35
+
headers: { 'Content-Type': 'application/json' },
36
+
});
37
+
}
38
+
```
39
+
40
+
Then fetch and render it dynamically in Astro:
41
+
42
+
```astro
43
+
---
44
+
const res = await fetch('/api/hello');
45
+
const data = await res.json();
46
+
---
47
+
<h1>Hello {data.name}!</h1>
48
+
```
49
+
50
+
---
51
+
52
+
## Language Info
53
+
54
+
***Name:** Astro
55
+
***Extensions:**`.astro`
56
+
***Editor:** HTML / JSX-like
57
+
***Compiler:** Astro Compiler
58
+
***Version:** Latest (v4.x and above)
59
+
60
+
---
61
+
62
+
## Code Formatting
63
+
64
+
Astro uses **Prettier** by default with the official Astro plugin.
65
+
66
+
---
67
+
68
+
## Custom Settings
69
+
70
+
Custom settings can be passed in the `astro.config.mjs` file.
71
+
72
+
**Example:**
73
+
74
+
```js
75
+
// astro.config.mjs
76
+
exportdefault {
77
+
site:'https://example.com',
78
+
integrations: [],
79
+
output:'static', // or 'server'
80
+
};
81
+
```
82
+
83
+
> Please ensure that all configuration values are valid JavaScript or JSON.
84
+
85
+
---
86
+
87
+
## Example Usage
88
+
89
+
### Static Example
90
+
91
+
```astro
92
+
---
93
+
const message = "Hello from Astro!";
94
+
---
95
+
<p>{message}</p>
96
+
```
97
+
98
+
### Dynamic Example
99
+
100
+
```astro
101
+
---
102
+
const res = await fetch('https://api.example.com/data');
0 commit comments