summaryrefslogtreecommitdiff
path: root/docs/guides
diff options
context:
space:
mode:
Diffstat (limited to 'docs/guides')
-rw-r--r--docs/guides/data-fetching.md6
-rw-r--r--docs/guides/deploy.md15
-rw-r--r--docs/guides/imports.md8
-rw-r--r--docs/guides/publish-to-npm.md8
-rw-r--r--docs/guides/styling.md4
5 files changed, 20 insertions, 21 deletions
diff --git a/docs/guides/data-fetching.md b/docs/guides/data-fetching.md
index 8d9ff143b..a4d02fd29 100644
--- a/docs/guides/data-fetching.md
+++ b/docs/guides/data-fetching.md
@@ -3,15 +3,14 @@ layout: ~/layouts/Main.astro
title: Data Fetching
---
-Astro components and pages can fetch remote data to help generate your pages. Astro provides two different tools to pages to help you do this: **fetch()** and **top-level await.**
+Astro components and pages can fetch remote data to help generate your pages. Astro provides two different tools to pages to help you do this: **fetch()** and **top-level await.**
### `fetch()`
-Astro pages have access to the global `fetch()` function in their setup script. `fetch()` is a native JavaScript API ([MDN](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.
+Astro pages have access to the global `fetch()` function in their setup script. `fetch()` is a native JavaScript API ([MDN](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
---
const response = await fetch('http://example.com/movies.json');
@@ -22,6 +21,7 @@ console.log(data);
<!-- Output the result to the page -->
<div>{JSON.stringify(data)}</div>
```
+
### Top-level await
`await` is another native JavaScript feature that lets you await the response of some asynchronous promise ([MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)). Astro supports `await` in the top-level of your component script.
diff --git a/docs/guides/deploy.md b/docs/guides/deploy.md
index 9bca1d56d..39518fc78 100644
--- a/docs/guides/deploy.md
+++ b/docs/guides/deploy.md
@@ -20,8 +20,6 @@ The following guides are based on some shared assumptions:
}
```
-
-
## Building The App
You may run `npm run build` command to build the app.
@@ -65,7 +63,8 @@ By default, the build output will be placed at `dist/`. You may deploy this `dis
cd -
```
-> You can also run the above script in your CI setup to enable automatic deployment on each push.
+
+ > You can also run the above script in your CI setup to enable automatic deployment on each push.
### GitHub Actions
@@ -138,8 +137,8 @@ Then, set up a new project on [Netlify](https://netlify.com) from your chosen Gi
If you don't want to use the `netlify.toml`, when you go to [Netlify](https://netlify.com) and set up up a new project from Git, input the following settings:
- - **Build Command:** `astro build` or `npm run build`
- - **Publish directory:** `dist`
+- **Build Command:** `astro build` or `npm run build`
+- **Publish directory:** `dist`
Then hit the deploy button.
@@ -249,8 +248,8 @@ You can deploy your Astro project with Microsoft Azure [Static Web Apps](https:/
- 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.
+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.
+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.
+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.
diff --git a/docs/guides/imports.md b/docs/guides/imports.md
index 595f13e62..f8f96b098 100644
--- a/docs/guides/imports.md
+++ b/docs/guides/imports.md
@@ -29,7 +29,7 @@ export function getUser() {
}
// src/index.js
-import {getUser} from './user.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.
@@ -38,7 +38,7 @@ All browsers now support ESM, so Astro is able to ship this code directly to the
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.
+Note that this built-in support is build only. By default, Astro does not type-check your TypeScript code.
<!-- To integrate type checking into your development/build workflow, add the [@snowpack/plugin-typescript](https://www.npmjs.com/package/@snowpack/plugin-typescript) plugin. -->
@@ -46,7 +46,7 @@ Note that this built-in support is build only. By default, Astro does not type-c
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.
+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.**
@@ -121,7 +121,7 @@ When you start up your dev server or run a new build, you may see a message that
## Node Builtins
-We encourage Astro users to avoid Node.js builtins (`fs`, `path`, etc) whenever possible. Astro aims to be compatible with multiple JavaScript runtimes in the future. This includes [Deno](https://deno.land/) and [Cloudflare Workers](https://workers.cloudflare.com/) which do not support Node builtin modules such as `fs`.
+We encourage Astro users to avoid Node.js builtins (`fs`, `path`, etc) whenever possible. Astro aims to be compatible with multiple JavaScript runtimes in the future. This includes [Deno](https://deno.land/) and [Cloudflare Workers](https://workers.cloudflare.com/) which do not support Node builtin modules such as `fs`.
Our aim is to provide Astro alternatives to common Node.js builtins. However, no such alternatives exist today. So, if you _really_ need to use these builtin modules we don't want to stop you. Astro supports Node.js builtins using Node's newer `node:` prefix. If you want to read a file, for example, you can do so like this:
diff --git a/docs/guides/publish-to-npm.md b/docs/guides/publish-to-npm.md
index aebf0311a..86e5400f7 100644
--- a/docs/guides/publish-to-npm.md
+++ b/docs/guides/publish-to-npm.md
@@ -3,9 +3,9 @@ layout: ~/layouts/Main.astro
title: Publish a Component to NPM
---
-Built a great Astro component? **Publish it to [npm!](https://npmjs.com/)**
+Built a great Astro component? **Publish it to [npm!](https://npmjs.com/)**
-Once published to npm, Astro components can be installed and used in your project like any other npm package. npm is a great way to share Astro components across projects within your team, your company, or the entire world.
+Once published to npm, Astro components can be installed and used in your project like any other npm package. npm is a great way to share Astro components across projects within your team, your company, or the entire world.
## Basic NPM Package Setup
@@ -66,7 +66,7 @@ import Capitalize from '@example/my-components/Capitalize.astro';
<Capitalize phrase={`Hello world`} />
```
-This is a less common scenario, and we only recommend it if you have good reason. Because Astro is completely rendered at build-time, there are no client-side performance concerns to our default recommendation to export your components from a single `index.js` file.
+This is a less common scenario, and we only recommend it if you have good reason. Because Astro is completely rendered at build-time, there are no client-side performance concerns to our default recommendation to export your components from a single `index.js` file.
To support importing by file within your package, add each file to your **package.json** `exports` map:
@@ -80,4 +80,4 @@ To support importing by file within your package, add each file to your **packag
+ "./Capitalize.astro": "./Capitalize.astro"
}
}
-``` \ No newline at end of file
+```
diff --git a/docs/guides/styling.md b/docs/guides/styling.md
index 725a83e46..2a1d1046b 100644
--- a/docs/guides/styling.md
+++ b/docs/guides/styling.md
@@ -3,7 +3,7 @@ layout: ~/layouts/Main.astro
title: Styling & CSS
---
-Astro includes special handling to make writing CSS as easy as possible. Styling inside of Astro components is done by adding a `<style>` tag anywhere.
+Astro includes special handling to make writing CSS as easy as possible. Styling inside of Astro components is done by adding a `<style>` tag anywhere.
By default, all Astro component styles are **scoped**, meaning they only apply to the current component. These styles are automatically extracted and optimized for you in the final build, so that you don't need to worry about style loading.
@@ -32,7 +32,6 @@ To create global styles, add a `:global()` wrapper around a selector (the same a
📚 Read our full guide on [Astro component syntax](/core-concepts/astro-components#css-styles) to learn more about using the `<style>` tag.
-
## Cross-Browser Compatibility
We also automatically add browser prefixes using [Autoprefixer][autoprefixer]. By default, Astro loads the [Browserslist defaults][browserslist-defaults], but you may also specify your own by placing a [Browserslist][browserslist] file in your project root.
@@ -57,6 +56,7 @@ All styles in Astro are automatically [**autoprefixed**](#cross-browser-compatib
---
## Frameworks and Libraries
+
### 📘 React / Preact
`.jsx` files support both global CSS and CSS Modules. To enable the latter, use the `.module.css` extension (or `.module.scss`/`.module.sass` if using Sass).