remove details tags from integration READMEs (#4198)
This commit is contained in:
Sarah Rainsberger
GitHub
parent
2c71a99202
commit
9894b3dcde
9 changed files with 165 additions and 263 deletions
|
|
@ -77,55 +77,51 @@ export default defineConfig({
|
|||
});
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary><strong>start</strong></summary>
|
||||
### start
|
||||
|
||||
This adapter automatically starts a server when it is imported. You can turn this off with the `start` option:
|
||||
This adapter automatically starts a server when it is imported. You can turn this off with the `start` option:
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import deno from '@astrojs/deno';
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import deno from '@astrojs/deno';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: deno({
|
||||
start: false
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
If you disable this, you need to write your own Deno web server. Import and call `handle` from the generated entry script to render requests:
|
||||
|
||||
```ts
|
||||
import { serve } from "https://deno.land/std@0.132.0/http/server.ts";
|
||||
import { handle } from './dist/entry.mjs';
|
||||
|
||||
serve((req: Request) => {
|
||||
// Check the request, maybe do static file handling here.
|
||||
|
||||
return handle(req);
|
||||
});
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>port</strong> and <strong>hostname</strong></summary>
|
||||
|
||||
You can set the port (default: `8085`) and hostname (default: `0.0.0.0`) for the deno server to use. If `start` is false, this has no effect; your own server must configure the port and hostname.
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import deno from '@astrojs/deno';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: deno({
|
||||
port: 8081,
|
||||
hostname: 'myhost'
|
||||
})
|
||||
});
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: deno({
|
||||
start: false
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
If you disable this, you need to write your own Deno web server. Import and call `handle` from the generated entry script to render requests:
|
||||
|
||||
```ts
|
||||
import { serve } from "https://deno.land/std@0.132.0/http/server.ts";
|
||||
import { handle } from './dist/entry.mjs';
|
||||
|
||||
serve((req: Request) => {
|
||||
// Check the request, maybe do static file handling here.
|
||||
|
||||
return handle(req);
|
||||
});
|
||||
```
|
||||
|
||||
### port and hostname
|
||||
|
||||
You can set the port (default: `8085`) and hostname (default: `0.0.0.0`) for the deno server to use. If `start` is false, this has no effect; your own server must configure the port and hostname.
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import deno from '@astrojs/deno';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: deno({
|
||||
port: 8081,
|
||||
hostname: 'myhost'
|
||||
})
|
||||
});
|
||||
```
|
||||
</details>
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -21,27 +21,25 @@ This integration provides `<Image />` and `<Picture>` components as well as a ba
|
|||
|
||||
## Installation
|
||||
|
||||
<details>
|
||||
<summary>Quick Install</summary>
|
||||
|
||||
### Quick Install
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add image
|
||||
# Using Yarn
|
||||
yarn astro add image
|
||||
# Using PNPM
|
||||
pnpx astro add image
|
||||
```
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add image
|
||||
# Using Yarn
|
||||
yarn astro add image
|
||||
# Using PNPM
|
||||
pnpx astro add image
|
||||
```
|
||||
|
||||
Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
|
||||
|
||||
Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Manual Install</summary>
|
||||
### Manual Install
|
||||
|
||||
First, install the `@astrojs/image` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||
```sh
|
||||
|
|
@ -58,10 +56,8 @@ export default {
|
|||
// ...
|
||||
integrations: [image()],
|
||||
}
|
||||
```
|
||||
|
||||
```
|
||||
Then, restart the dev server.
|
||||
</details>
|
||||
|
||||
### Update `tsconfig.json`
|
||||
|
||||
|
|
@ -269,10 +265,10 @@ The intergration can be configured to run with a different image service, either
|
|||
|
||||
There are currently no other configuration options for the `@astrojs/image` integration. Please [open an issue](https://github.com/withastro/astro/issues/new/choose) if you have a compelling use case to share.
|
||||
|
||||
<details>
|
||||
<summary><strong>config.serviceEntryPoint</strong></summary>
|
||||
|
||||
### config.serviceEntryPoint
|
||||
|
||||
The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/sharp`, which resolves to the entry point exported from this integration's `package.json`.
|
||||
The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/sharp`, which resolves to the entry point exported from this integration's `package.json`.
|
||||
|
||||
```js
|
||||
// astro.config.mjs
|
||||
|
|
@ -285,14 +281,12 @@ export default {
|
|||
})],
|
||||
}
|
||||
```
|
||||
</details>
|
||||
|
||||
## Examples
|
||||
|
||||
<details>
|
||||
<summary><strong>Local images</strong></summary>
|
||||
### Local images
|
||||
|
||||
Image files in your project's `src` directory can be imported in frontmatter and passed directly to the `<Image />` component. All other properties are optional and will default to the original image file's properties if not provided.
|
||||
Image files in your project's `src` directory can be imported in frontmatter and passed directly to the `<Image />` component. All other properties are optional and will default to the original image file's properties if not provided.
|
||||
|
||||
```astro
|
||||
---
|
||||
|
|
@ -315,12 +309,10 @@ import heroImage from '../assets/hero.png';
|
|||
// image imports can also be inlined directly
|
||||
<Image src={import('../assets/hero.png')} />
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>Remote images</strong></summary>
|
||||
### Remote images
|
||||
|
||||
Remote images can be transformed with the `<Image />` component. The `<Image />` component needs to know the final dimensions for the `<img />` element to avoid content layout shifts. For remote images, this means you must either provide `width` and `height`, or one of the dimensions plus the required `aspectRatio`.
|
||||
Remote images can be transformed with the `<Image />` component. The `<Image />` component needs to know the final dimensions for the `<img />` element to avoid content layout shifts. For remote images, this means you must either provide `width` and `height`, or one of the dimensions plus the required `aspectRatio`.
|
||||
|
||||
```astro
|
||||
---
|
||||
|
|
@ -338,16 +330,14 @@ const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelog
|
|||
// cropping to a specific height and aspect ratio and converting to an avif format
|
||||
<Image src={imageUrl} height={200} aspectRatio="16:9" format="avif" />
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>Responsive pictures</strong></summary>
|
||||
### Responsive pictures</strong></summary>
|
||||
|
||||
The `<Picture />` component can be used to automatically build a `<picture>` with multiple sizes and formats. Check out [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction) for a deep dive into responsive images and art direction.
|
||||
The `<Picture />` component can be used to automatically build a `<picture>` with multiple sizes and formats. Check out [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction) for a deep dive into responsive images and art direction.
|
||||
|
||||
By default, the picture will include formats for `avif` and `webp` in addition to the image's original format.
|
||||
By default, the picture will include formats for `avif` and `webp` in addition to the image's original format.
|
||||
|
||||
For remote images, an `aspectRatio` is required to ensure the correct `height` can be calculated at build time.
|
||||
For remote images, an `aspectRatio` is required to ensure the correct `height` can be calculated at build time.
|
||||
|
||||
```astro
|
||||
---
|
||||
|
|
@ -367,8 +357,6 @@ const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelog
|
|||
<Picture src={import("../assets/hero.png")} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="My hero image" />
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## Troubleshooting
|
||||
- If your installation doesn't seem to be working, make sure to restart the dev server.
|
||||
- If you edit and save a file and don't see your site update accordingly, try refreshing the page.
|
||||
|
|
|
|||
|
|
@ -20,33 +20,30 @@ Check out [“What is MDX?”](https://mdxjs.com/docs/what-is-mdx/), a deep-dive
|
|||
|
||||
## Installation
|
||||
|
||||
<details>
|
||||
<summary>Quick Install</summary>
|
||||
### Quick Install
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add mdx
|
||||
# Using Yarn
|
||||
yarn astro add mdx
|
||||
# Using PNPM
|
||||
pnpx astro add mdx
|
||||
```
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add mdx
|
||||
# Using Yarn
|
||||
yarn astro add mdx
|
||||
# Using PNPM
|
||||
pnpx astro add mdx
|
||||
```
|
||||
|
||||
Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
|
||||
|
||||
Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Manual Install</summary>
|
||||
### Manual Install
|
||||
|
||||
First, install the `@astrojs/mdx` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||
|
||||
```sh
|
||||
npm install @astrojs/mdx
|
||||
```
|
||||
```sh
|
||||
npm install @astrojs/mdx
|
||||
```
|
||||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
|
|
@ -63,11 +60,14 @@ export default defineConfig({
|
|||
```
|
||||
|
||||
Finally, restart the dev server.
|
||||
</details>
|
||||
|
||||
## Usage
|
||||
|
||||
To write your first MDX page in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
||||
You can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory.
|
||||
|
||||
### Components
|
||||
|
||||
To use components in your MDX pages in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
||||
- 📦 how framework components are loaded,
|
||||
- 💧 client-side hydration options, and
|
||||
- 🪆 opportunities to mix and nest frameworks together
|
||||
|
|
@ -76,8 +76,6 @@ To write your first MDX page in Astro, head to our [UI framework documentation][
|
|||
|
||||
> **Note**: `.mdx` files adhere to strict JSX syntax rather than Astro's HTML-like syntax.
|
||||
|
||||
Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
|
||||
|
||||
### Variables
|
||||
|
||||
MDX supports `export` statements to add variables to your templates. These variables are accessible both from the template itself _and_ as named properties when importing the template somewhere else.
|
||||
|
|
@ -255,8 +253,7 @@ This applies a minimal Prism renderer with added support for `astro` code blocks
|
|||
|
||||
## Configuration
|
||||
|
||||
<details>
|
||||
<summary><strong>remarkPlugins</strong></summary>
|
||||
### remarkPlugins
|
||||
|
||||
**Default plugins:** [remark-gfm](https://github.com/remarkjs/remark-gfm), [remark-smartypants](https://github.com/silvenon/remark-smartypants)
|
||||
|
||||
|
|
@ -292,10 +289,7 @@ export default {
|
|||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>rehypePlugins</strong></summary>
|
||||
### rehypePlugins</strong>
|
||||
|
||||
[Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) allow you to transform the HTML that your Markdown generates. We recommend checking the [Remark plugin](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) catalog first _before_ considering rehype plugins, since most users want to transform their Markdown syntax instead. If HTML transforms are what you need, we encourage you to browse [awesome-rehype](https://github.com/rehypejs/awesome-rehype) for a full curated list of plugins!
|
||||
|
||||
|
|
@ -313,10 +307,8 @@ export default {
|
|||
})],
|
||||
}
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>frontmatterOptions</strong></summary>
|
||||
### frontmatterOptions
|
||||
|
||||
**Default:** `{ name: 'frontmatter' }`
|
||||
|
||||
|
|
@ -344,7 +336,6 @@ title: I'm just a variable now!
|
|||
```
|
||||
|
||||
See the [remark-mdx-frontmatter README](https://github.com/remcohaszing/remark-mdx-frontmatter#options) for a complete list of options.
|
||||
</details>
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -75,8 +75,7 @@ The [Netlify Blog post on Astro](https://www.netlify.com/blog/how-to-deploy-astr
|
|||
|
||||
To configure this adapter, pass an object to the `netlify()` function call in `astro.config.mjs` - there's only one possible configuration option:
|
||||
|
||||
<details>
|
||||
<summary><strong>dist</strong></summary>
|
||||
### dist
|
||||
|
||||
We build to the `dist` directory at the base of your project. To change this, use the `dist` option:
|
||||
|
||||
|
|
@ -99,12 +98,7 @@ And then point to the dist in your `netlify.toml`:
|
|||
directory = "dist/functions"
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
<strong>binaryMediaTypes</strong>
|
||||
</summary>
|
||||
### binaryMediaTypes
|
||||
|
||||
> This option is only needed for the Functions adapter and is not needed for Edge Functions.
|
||||
|
||||
|
|
@ -127,7 +121,6 @@ export function get() {
|
|||
});
|
||||
}
|
||||
```
|
||||
</details>
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -22,27 +22,24 @@ The Astro Partytown integration installs Partytown for you and makes sure it's e
|
|||
|
||||
## Installation
|
||||
|
||||
<details>
|
||||
<summary>Quick Install</summary>
|
||||
### Quick Install
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add partytown
|
||||
# Using Yarn
|
||||
yarn astro add partytown
|
||||
# Using PNPM
|
||||
pnpx astro add partytown
|
||||
```
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add partytown
|
||||
# Using Yarn
|
||||
yarn astro add partytown
|
||||
# Using PNPM
|
||||
pnpx astro add partytown
|
||||
```
|
||||
|
||||
Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
|
||||
|
||||
Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Manual Install</summary>
|
||||
### Manual Install
|
||||
|
||||
First, install the `@astrojs/partytown` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||
```sh
|
||||
|
|
@ -63,7 +60,6 @@ export default defineConfig({
|
|||
```
|
||||
|
||||
Then, restart the dev server.
|
||||
</details>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -94,12 +90,11 @@ export default defineConfig({
|
|||
|
||||
This mirrors the [Partytown config object](https://partytown.builder.io/configuration), but only `debug` and `forward` are exposed by this integration.
|
||||
|
||||
<details>
|
||||
<summary><strong>config.debug</strong></summary>
|
||||
### config.debug
|
||||
|
||||
Partytown ships with a `debug` mode; enable or disable it by passing `true` or `false` to `config.debug`. If [`debug` mode](https://partytown.builder.io/debugging) is enabled, it will output detailed logs to the browser console.
|
||||
Partytown ships with a `debug` mode; enable or disable it by passing `true` or `false` to `config.debug`. If [`debug` mode](https://partytown.builder.io/debugging) is enabled, it will output detailed logs to the browser console.
|
||||
|
||||
If this option isn't set, `debug` mode will be on by default in [dev](https://docs.astro.build/en/reference/cli-reference/#astro-dev) or [preview](https://docs.astro.build/en/reference/cli-reference/#astro-preview) mode.
|
||||
If this option isn't set, `debug` mode will be on by default in [dev](https://docs.astro.build/en/reference/cli-reference/#astro-dev) or [preview](https://docs.astro.build/en/reference/cli-reference/#astro-preview) mode.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
|
|
@ -111,10 +106,8 @@ export default defineConfig({
|
|||
|
||||
})
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>config.forward</strong></summary>
|
||||
### config.forward
|
||||
|
||||
Third-party scripts typically add variables to the `window` object so that you can communicate with them throughout your site. But when a script is loaded in a web-worker, it doesn't have access to that global `window` object.
|
||||
|
||||
|
|
@ -135,12 +128,9 @@ export default defineConfig ({
|
|||
})],
|
||||
})
|
||||
```
|
||||
</details>
|
||||
|
||||
## Examples
|
||||
|
||||
- The [integrations playground template](https://github.com/withastro/astro/tree/latest/examples/integrations-playground?on=github) comes with Astro Partytown installed, with a demo script that shows how Partytown moves intensive operations off of the main thread.
|
||||
|
||||
- [Browse projects with Astro Partytown on GitHub](https://github.com/search?q=%22@astrojs/partytown%22+filename:package.json&type=Code) for more examples!
|
||||
|
||||
## Troubleshooting
|
||||
|
|
|
|||
|
|
@ -22,39 +22,36 @@ Check out [“Learn Preact in 10 minutes”](https://preactjs.com/tutorial), an
|
|||
|
||||
## Installation
|
||||
|
||||
<details>
|
||||
<summary>Quick Install</summary>
|
||||
### Quick Install
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add preact
|
||||
# Using Yarn
|
||||
yarn astro add preact
|
||||
# Using PNPM
|
||||
pnpx astro add preact
|
||||
```
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add preact
|
||||
# Using Yarn
|
||||
yarn astro add preact
|
||||
# Using PNPM
|
||||
pnpx astro add preact
|
||||
```
|
||||
|
||||
Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
|
||||
|
||||
Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Manual Install</summary>
|
||||
### Manual Install
|
||||
|
||||
First, install the `@astrojs/preact` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||
|
||||
```
|
||||
npm install @astrojs/preact
|
||||
```
|
||||
```
|
||||
npm install @astrojs/preact
|
||||
```
|
||||
|
||||
Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'preact'" (or similar) warning when you start up Astro, you'll need to install Preact:
|
||||
|
||||
```sh
|
||||
npm install preact
|
||||
```
|
||||
```sh
|
||||
npm install preact
|
||||
```
|
||||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
|
|
@ -71,7 +68,6 @@ export default defineConfig({
|
|||
```
|
||||
|
||||
Finally, restart the dev server.
|
||||
</details>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -88,8 +84,7 @@ The Astro Preact integration handles how Preact components are rendered and it h
|
|||
|
||||
For basic usage, you do not need to configure the Preact integration.
|
||||
|
||||
<details>
|
||||
<summary><strong>compat</strong></summary>
|
||||
### compat
|
||||
|
||||
You can enable `preact/compat`, Preact’s compatibility layer for rendering React components without needing to install or ship React’s larger libraries to your users’ web browsers.
|
||||
|
||||
|
|
@ -108,7 +103,7 @@ export default defineConfig({
|
|||
```
|
||||
|
||||
With the `compat` option enabled, the Preact integration will render React components as well as Preact components in your project and also allow you to import React components inside Preact components. Read more in [“Switching to Preact (from React)”](https://preactjs.com/guide/v10/switching-to-preact) on the Preact website.
|
||||
</details>
|
||||
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -16,27 +16,24 @@ To further improve the experience, especially on similar pages, stylesheets are
|
|||
|
||||
## Installation
|
||||
|
||||
<details>
|
||||
<summary>Quick Install</summary>
|
||||
### Quick Install
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add prefetch
|
||||
# Using Yarn
|
||||
yarn astro add prefetch
|
||||
# Using PNPM
|
||||
pnpx astro add prefetch
|
||||
```
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add prefetch
|
||||
# Using Yarn
|
||||
yarn astro add prefetch
|
||||
# Using PNPM
|
||||
pnpx astro add prefetch
|
||||
```
|
||||
|
||||
Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
|
||||
|
||||
Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Manual Install</summary>
|
||||
### Manual Install
|
||||
|
||||
First, install the `@astrojs/prefetch` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||
```sh
|
||||
|
|
@ -56,7 +53,6 @@ export default {
|
|||
```
|
||||
|
||||
Then, restart the dev server.
|
||||
</details>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -66,8 +62,7 @@ When you install the integration, the prefetch script is automatically added to
|
|||
|
||||
The Astro Prefetch integration handles which links on the site are prefetched and it has its own options. Change these in the `astro.config.mjs` file which is where your project's integration settings live.
|
||||
|
||||
<details>
|
||||
<summary><strong>config.selector</strong></summary>
|
||||
### config.selector
|
||||
|
||||
By default the prefetch script searches the page for any links that include a `rel="prefetch"` attribute, ex: `<a rel="prefetch" />` or `<a rel="nofollow prefetch" />`. This behavior can be changed in your `astro.config.*` file to use a custom query selector when finding prefetch links.
|
||||
|
||||
|
|
@ -82,10 +77,7 @@ export default {
|
|||
})],
|
||||
}
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>config.throttle</strong></summary>
|
||||
### config.throttle
|
||||
|
||||
By default the prefetch script will only prefetch one link at a time. This behavior can be changed in your `astro.config.*` file to increase the limit for concurrent downloads.
|
||||
|
||||
|
|
@ -100,7 +92,6 @@ export default {
|
|||
})],
|
||||
}
|
||||
```
|
||||
</details>
|
||||
|
||||
## Troubleshooting
|
||||
- If your installation doesn't seem to be working, make sure to restart the dev server.
|
||||
|
|
|
|||
|
|
@ -22,27 +22,24 @@ With Astro Sitemap, you don't have to worry about creating this file: build your
|
|||
|
||||
## Installation
|
||||
|
||||
<details>
|
||||
<summary>Quick Install</summary>
|
||||
### Quick Install
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add sitemap
|
||||
# Using Yarn
|
||||
yarn astro add sitemap
|
||||
# Using PNPM
|
||||
pnpx astro add sitemap
|
||||
```
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add sitemap
|
||||
# Using Yarn
|
||||
yarn astro add sitemap
|
||||
# Using PNPM
|
||||
pnpx astro add sitemap
|
||||
```
|
||||
|
||||
Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
|
||||
|
||||
Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Manual Install</summary>
|
||||
### Manual Install
|
||||
|
||||
First, install the `@astrojs/sitemap` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||
```sh
|
||||
|
|
@ -63,7 +60,6 @@ export default defineConfig({
|
|||
```
|
||||
|
||||
Then, restart the dev server.
|
||||
</details>
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -89,8 +85,7 @@ Now, [build your site for production](https://docs.astro.build/en/reference/cli-
|
|||
> **Warning**
|
||||
> If you forget to add a `site`, you'll get a friendly warning when you build, and the `sitemap-index.xml` file won't be generated.
|
||||
|
||||
<details>
|
||||
<summary>Example of generated files for a two-page website</summary>
|
||||
### Example of generated files for a two-page website
|
||||
|
||||
**`sitemap-index.xml`**
|
||||
|
||||
|
|
@ -116,10 +111,6 @@ Now, [build your site for production](https://docs.astro.build/en/reference/cli-
|
|||
</url>
|
||||
</urlset>
|
||||
```
|
||||
</details>
|
||||
|
||||
|
||||
|
||||
|
||||
## Configuration
|
||||
|
||||
|
|
@ -135,10 +126,9 @@ export default defineConfig({
|
|||
});
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary><strong>filter</strong></summary>
|
||||
### filter
|
||||
|
||||
All pages are included in your sitemap by default. By adding a custom `filter` function, you can filter included pages by URL.
|
||||
All pages are included in your sitemap by default. By adding a custom `filter` function, you can filter included pages by URL.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
|
|
@ -151,13 +141,9 @@ __`astro.config.mjs`__
|
|||
|
||||
The function will be called for every page on your site. The `page` function parameter is the full URL of the page currently under considering, including your `site` domain. Return `true` to include the page in your sitemap, and `false` to leave it out.
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>customPages</strong></summary>
|
||||
### customPages
|
||||
|
||||
In some cases, a page might be part of your deployed site but not part of your Astro project.
|
||||
If you'd like to include a page in your sitemap that _isn't_ created by Astro, you can use this option.
|
||||
In some cases, a page might be part of your deployed site but not part of your Astro project. If you'd like to include a page in your sitemap that _isn't_ created by Astro, you can use this option.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
|
|
@ -167,10 +153,7 @@ __`astro.config.mjs`__
|
|||
customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2']
|
||||
}),
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>entryLimit</strong></summary>
|
||||
### entryLimit
|
||||
|
||||
The maximum number entries per sitemap file. The default value is 45000. A sitemap index and multiple sitemaps are created if you have more entries. See this [explanation of splitting up a large sitemap](https://developers.google.com/search/docs/advanced/sitemaps/large-sitemaps).
|
||||
|
||||
|
|
@ -188,11 +171,8 @@ export default {
|
|||
],
|
||||
}
|
||||
```
|
||||
</details>
|
||||
|
||||
|
||||
<details>
|
||||
<summary><strong>changefreq</strong>, <strong>lastmod</strong>, and <strong>priority</strong></summary>
|
||||
### changefreq, lastmod, and priority
|
||||
|
||||
These options correspond to the `<changefreq>`, `<lastmod>`, and `<priortity>` tags in the [Sitemap XML specification.](https://www.sitemaps.org/protocol.html)
|
||||
|
||||
|
|
@ -218,12 +198,7 @@ export default {
|
|||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
<strong>serialize</strong>
|
||||
</summary>
|
||||
### serialize
|
||||
|
||||
A function called for each sitemap entry just before writing to a disk. This function can be asynchronous.
|
||||
|
||||
|
|
@ -267,13 +242,7 @@ export default {
|
|||
}
|
||||
```
|
||||
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>
|
||||
<strong>i18n</strong>
|
||||
</summary>
|
||||
### i18n
|
||||
|
||||
To localize a sitemap, pass an object to this `i18n` option.
|
||||
|
||||
|
|
@ -308,8 +277,7 @@ export default {
|
|||
};
|
||||
```
|
||||
|
||||
<details>
|
||||
<summary>The resulting sitemap looks like this</summary>
|
||||
The resulting sitemap looks like this:
|
||||
|
||||
```xml
|
||||
...
|
||||
|
|
@ -340,9 +308,6 @@ export default {
|
|||
...
|
||||
```
|
||||
|
||||
</details>
|
||||
</details>
|
||||
|
||||
## Examples
|
||||
- The official Astro website uses Astro Sitemap to generate [its sitemap](https://astro.build/sitemap-index.xml).
|
||||
- The [integrations playground template](https://github.com/withastro/astro/tree/latest/examples/integrations-playground?on=github) comes with Astro Sitemap installed. Try adding a route and building the project!
|
||||
|
|
|
|||
|
|
@ -25,27 +25,24 @@ Note: it's generally discouraged to use both Tailwind and another styling method
|
|||
|
||||
https://user-images.githubusercontent.com/4033662/169920154-4b42fc52-e2b5-4ca4-b7d2-d9057ab42ddf.mp4
|
||||
|
||||
<details>
|
||||
<summary>Quick Install</summary>
|
||||
### Quick Install
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add tailwind
|
||||
# Using Yarn
|
||||
yarn astro add tailwind
|
||||
# Using PNPM
|
||||
pnpx astro add tailwind
|
||||
```
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add tailwind
|
||||
# Using Yarn
|
||||
yarn astro add tailwind
|
||||
# Using PNPM
|
||||
pnpx astro add tailwind
|
||||
```
|
||||
|
||||
Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
|
||||
|
||||
Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary>Manual Install</summary>
|
||||
### Manual Install
|
||||
|
||||
First, install the `@astrojs/tailwind` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||
```sh
|
||||
|
|
@ -65,7 +62,7 @@ export default {
|
|||
```
|
||||
|
||||
Then, restart the dev server.
|
||||
</details>
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -85,8 +82,7 @@ If it isn't there, you add your own `tailwind.config.(js|cjs|mjs)` file to the r
|
|||
|
||||
The Astro Tailwind integration handles the communication between Astro and Tailwind and it has its own options. Change these in the `astro.config.mjs` file (_not_ the Tailwind configuration file) which is where your project's integration settings live.
|
||||
|
||||
<details>
|
||||
<summary><strong>config.path</strong></summary>
|
||||
#### config.path
|
||||
|
||||
If you want to use a different Tailwind configuration file instead of the default `tailwind.config.(js|cjs|mjs)`, specify that file's location using this integration's `config.path` option. If `config.path` is relative, it will be resolved relative to the root.
|
||||
|
||||
|
|
@ -104,10 +100,8 @@ export default {
|
|||
})],
|
||||
}
|
||||
```
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary><strong>config.applyBaseStyles</strong></summary>
|
||||
#### config.applyBaseStyles
|
||||
|
||||
By default, the integration imports a basic `base.css` file on every page of your project. This basic CSS file includes the three main `@tailwind` directives:
|
||||
|
||||
|
|
@ -132,7 +126,6 @@ export default {
|
|||
```
|
||||
|
||||
You can now [import your own `base.css` as a local stylesheet](https://docs.astro.build/en/guides/styling/#import-a-local-stylesheet).
|
||||
</details>
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue