Format markdown files (#7439)
Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
This commit is contained in:
Bjorn Lu
GitHub
parent
6e7f38dd79
commit
8e3cb20b5c
47 changed files with 701 additions and 594 deletions
|
|
@ -12,14 +12,11 @@ packages/markdown/component/Markdown.astro
|
||||||
**/fixtures
|
**/fixtures
|
||||||
**/vendor
|
**/vendor
|
||||||
**/.vercel
|
**/.vercel
|
||||||
examples/docs/**/*.md
|
|
||||||
examples/blog/**/*.md
|
|
||||||
|
|
||||||
# Directories
|
# Directories
|
||||||
.github
|
.github
|
||||||
.changeset
|
.changeset
|
||||||
|
|
||||||
# Files
|
# Files
|
||||||
README.md
|
|
||||||
packages/webapi/mod.d.ts
|
packages/webapi/mod.d.ts
|
||||||
pnpm-lock.yaml
|
pnpm-lock.yaml
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
<br/><br/>
|
<br/><br/>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
The **recommended** way to install the latest version of Astro is by running the command below:
|
The **recommended** way to install the latest version of Astro is by running the command below:
|
||||||
|
|
@ -26,6 +25,7 @@ npm install --save-dev astro
|
||||||
Looking for help? Start with our [Getting Started](https://docs.astro.build/en/getting-started/) guide.
|
Looking for help? Start with our [Getting Started](https://docs.astro.build/en/getting-started/) guide.
|
||||||
|
|
||||||
Looking for quick examples? [Open a starter project](https://astro.new/) right in your browser.
|
Looking for quick examples? [Open a starter project](https://astro.new/) right in your browser.
|
||||||
|
|
||||||
## Documentation
|
## Documentation
|
||||||
|
|
||||||
Visit our [official documentation](https://docs.astro.build/).
|
Visit our [official documentation](https://docs.astro.build/).
|
||||||
|
|
@ -33,6 +33,7 @@ Visit our [official documentation](https://docs.astro.build/).
|
||||||
## Support
|
## Support
|
||||||
|
|
||||||
Having trouble? Get help in the official [Astro Discord](https://astro.build/chat).
|
Having trouble? Get help in the official [Astro Discord](https://astro.build/chat).
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
**New contributors welcome!** Check out our [Contributors Guide](CONTRIBUTING.md) for help getting started.
|
**New contributors welcome!** Check out our [Contributors Guide](CONTRIBUTING.md) for help getting started.
|
||||||
|
|
@ -74,7 +75,6 @@ Several official projects are maintained outside of this repo:
|
||||||
| [@astrojs/compiler](https://github.com/withastro/compiler) | [withastro/compiler](https://github.com/withastro/compiler) |
|
| [@astrojs/compiler](https://github.com/withastro/compiler) | [withastro/compiler](https://github.com/withastro/compiler) |
|
||||||
| [Astro Language Tools](https://github.com/withastro/language-tools) | [withastro/language-tools](https://github.com/withastro/language-tools) |
|
| [Astro Language Tools](https://github.com/withastro/language-tools) | [withastro/language-tools](https://github.com/withastro/language-tools) |
|
||||||
|
|
||||||
|
|
||||||
## Links
|
## Links
|
||||||
|
|
||||||
- [License (MIT)](LICENSE)
|
- [License (MIT)](LICENSE)
|
||||||
|
|
@ -92,8 +92,7 @@ Astro is generously supported by Netlify, Storyblok, and several other amazing o
|
||||||
<p align="center">
|
<p align="center">
|
||||||
<a target="_blank" href="https://github.com/sponsors/withastro">
|
<a target="_blank" href="https://github.com/sponsors/withastro">
|
||||||
|
|
||||||
[![Astro's sponsors.](https://astro.build/sponsors.png
|
[![Astro's sponsors.](https://astro.build/sponsors.png "Astro's sponsors.
|
||||||
"Astro's sponsors.
|
|
||||||
Platinum sponsors: Netlify, storyblok, Vercel, Ship Shape, Google Chrome
|
Platinum sponsors: Netlify, storyblok, Vercel, Ship Shape, Google Chrome
|
||||||
Gold sponsors: ‹div›RIOTS, DEEPGRAM, CloudCannon
|
Gold sponsors: ‹div›RIOTS, DEEPGRAM, CloudCannon
|
||||||
Sponsors: Monogram, Qoddi, Dimension")](https://github.com/sponsors/withastro)
|
Sponsors: Monogram, Qoddi, Dimension")](https://github.com/sponsors/withastro)
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@ npm create astro@latest -- --template basics
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 🚀 Project Structure
|
## 🚀 Project Structure
|
||||||
|
|
||||||
Inside of your Astro project, you'll see the following folders and files:
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@ npm create astro@latest -- --template blog
|
||||||
|
|
||||||
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
> 🧑🚀 **Seasoned astronaut?** Delete this file. Have fun!
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
Features:
|
Features:
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "First post"
|
title: 'First post'
|
||||||
description: "Lorem ipsum dolor sit amet"
|
description: 'Lorem ipsum dolor sit amet'
|
||||||
pubDate: "Jul 08 2022"
|
pubDate: 'Jul 08 2022'
|
||||||
heroImage: "/placeholder-hero.jpg"
|
heroImage: '/placeholder-hero.jpg'
|
||||||
---
|
---
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Markdown Style Guide"
|
title: 'Markdown Style Guide'
|
||||||
description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
|
description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.'
|
||||||
pubDate: "Jul 01 2022"
|
pubDate: 'Jul 01 2022'
|
||||||
heroImage: "/placeholder-hero.jpg"
|
heroImage: '/placeholder-hero.jpg'
|
||||||
---
|
---
|
||||||
|
|
||||||
Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.
|
Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Second post"
|
title: 'Second post'
|
||||||
description: "Lorem ipsum dolor sit amet"
|
description: 'Lorem ipsum dolor sit amet'
|
||||||
pubDate: "Jul 22 2022"
|
pubDate: 'Jul 22 2022'
|
||||||
heroImage: "/placeholder-hero.jpg"
|
heroImage: '/placeholder-hero.jpg'
|
||||||
---
|
---
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
---
|
---
|
||||||
title: "Third post"
|
title: 'Third post'
|
||||||
description: "Lorem ipsum dolor sit amet"
|
description: 'Lorem ipsum dolor sit amet'
|
||||||
pubDate: "Jul 15 2022"
|
pubDate: 'Jul 15 2022'
|
||||||
heroImage: "/placeholder-hero.jpg"
|
heroImage: '/placeholder-hero.jpg'
|
||||||
---
|
---
|
||||||
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium. Euismod elementum nisi quis eleifend quam adipiscing. In hac habitasse platea dictumst vestibulum. Sagittis purus sit amet volutpat. Netus et malesuada fames ac turpis egestas. Eget magna fermentum iaculis eu non diam phasellus vestibulum lorem. Varius sit amet mattis vulputate enim. Habitasse platea dictumst quisque sagittis. Integer quis auctor elit sed vulputate mi. Dictumst quisque sagittis purus sit amet.
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@ npm create astro@latest -- --template component
|
||||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
|
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/non-html-pages)
|
||||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
|
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
|
||||||
|
|
||||||
|
|
||||||
## 🚀 Project Structure
|
## 🚀 Project Structure
|
||||||
|
|
||||||
Inside of your Astro project, you'll see the following folders and files:
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
@ -27,9 +26,10 @@ Inside of your Astro project, you'll see the following folders and files:
|
||||||
The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
|
The `index.ts` file is the "entry point" for your package. Export your components in `index.ts` to make them importable from your package.
|
||||||
|
|
||||||
## 🧞 Commands
|
## 🧞 Commands
|
||||||
|
|
||||||
All commands are run from the root of the project, from a terminal:
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
| Command | Action |
|
| Command | Action |
|
||||||
| :--------------------- | :----------------------------------------------- |
|
| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| `npm link` | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components
|
| `npm link` | Registers this package locally. Run `npm link my-component-library` in an Astro project to install your components |
|
||||||
| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser)
|
| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser) |
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@ npm create astro@latest -- --template deno
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 🚀 Project Structure
|
## 🚀 Project Structure
|
||||||
|
|
||||||
Inside of your Astro project, you'll see the following folders and files:
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
|
||||||
|
|
@ -9,4 +9,3 @@ npm create astro@latest -- --template framework-alpine
|
||||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-alpine/devcontainer.json)
|
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-alpine/devcontainer.json)
|
||||||
|
|
||||||
This example showcases Astro working with [AlpineJS](https://alpinejs.dev/).
|
This example showcases Astro working with [AlpineJS](https://alpinejs.dev/).
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,4 +9,3 @@ npm create astro@latest -- --template framework-vue
|
||||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-vue/devcontainer.json)
|
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-vue/devcontainer.json)
|
||||||
|
|
||||||
This example showcases Astro working with [Vue](https://v3.vuejs.org/).
|
This example showcases Astro working with [Vue](https://v3.vuejs.org/).
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@ npm create astro@latest -- --template integration
|
||||||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/integration)
|
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/integration)
|
||||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/integration/devcontainer.json)
|
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/integration/devcontainer.json)
|
||||||
|
|
||||||
|
|
||||||
## 🚀 Project Structure
|
## 🚀 Project Structure
|
||||||
|
|
||||||
Inside of your Astro project, you'll see the following folders and files:
|
Inside of your Astro project, you'll see the following folders and files:
|
||||||
|
|
@ -25,9 +24,10 @@ Inside of your Astro project, you'll see the following folders and files:
|
||||||
The `index.ts` file is the "entry point" for your integration. Export your integration in `index.ts` to make them importable from your package.
|
The `index.ts` file is the "entry point" for your integration. Export your integration in `index.ts` to make them importable from your package.
|
||||||
|
|
||||||
## 🧞 Commands
|
## 🧞 Commands
|
||||||
|
|
||||||
All commands are run from the root of the project, from a terminal:
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
||||||
| Command | Action |
|
| Command | Action |
|
||||||
| :--------------------- | :----------------------------------------------- |
|
| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||||
| `npm link` | Registers this package locally. Run `npm link my-integration` in an Astro project to install your integration
|
| `npm link` | Registers this package locally. Run `npm link my-integration` in an Astro project to install your integration |
|
||||||
| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser)
|
| `npm publish` | [Publishes](https://docs.npmjs.com/creating-and-publishing-unscoped-public-packages#publishing-unscoped-public-packages) this package to NPM. Requires you to be [logged in](https://docs.npmjs.com/cli/v8/commands/npm-adduser) |
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,6 @@ npm create astro@latest -- --template portfolio
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## 🧞 Commands
|
## 🧞 Commands
|
||||||
|
|
||||||
All commands are run from the root of the project, from a terminal:
|
All commands are run from the root of the project, from a terminal:
|
||||||
|
|
|
||||||
|
|
@ -88,7 +88,7 @@
|
||||||
"only-allow": "^1.1.1",
|
"only-allow": "^1.1.1",
|
||||||
"organize-imports-cli": "^0.10.0",
|
"organize-imports-cli": "^0.10.0",
|
||||||
"prettier": "^2.8.8",
|
"prettier": "^2.8.8",
|
||||||
"prettier-plugin-astro": "^0.8.1",
|
"prettier-plugin-astro": "^0.10.0",
|
||||||
"tiny-glob": "^0.2.9",
|
"tiny-glob": "^0.2.9",
|
||||||
"turbo": "^1.10.3",
|
"turbo": "^1.10.3",
|
||||||
"typescript": "~5.0.2"
|
"typescript": "~5.0.2"
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ This package exports a component to support highlighting inside an Astro file. E
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
---
|
---
|
||||||
import { Prism } from "@astrojs/prism"
|
import { Prism } from '@astrojs/prism';
|
||||||
---
|
---
|
||||||
|
|
||||||
<Prism lang="js" code={`const foo = 'bar';`} />
|
<Prism lang="js" code={`const foo = 'bar';`} />
|
||||||
|
|
@ -21,11 +21,14 @@ This package exports a `runHighlighterWithAstro` function to highlight while mak
|
||||||
```typescript
|
```typescript
|
||||||
import { runHighlighterWithAstro } from '@astrojs/prism';
|
import { runHighlighterWithAstro } from '@astrojs/prism';
|
||||||
|
|
||||||
runHighlighterWithAstro(`
|
runHighlighterWithAstro(
|
||||||
|
`
|
||||||
---
|
---
|
||||||
const helloAstro = 'Hello, Astro!';
|
const helloAstro = 'Hello, Astro!';
|
||||||
---
|
---
|
||||||
|
|
||||||
<div>{helloAstro}</div>
|
<div>{helloAstro}</div>
|
||||||
`, 'astro');
|
`,
|
||||||
|
'astro'
|
||||||
|
);
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -36,14 +36,14 @@ export async function get(context) {
|
||||||
// Pull in your project "site" from the endpoint context
|
// Pull in your project "site" from the endpoint context
|
||||||
// https://docs.astro.build/en/reference/api-reference/#contextsite
|
// https://docs.astro.build/en/reference/api-reference/#contextsite
|
||||||
site: context.site,
|
site: context.site,
|
||||||
items: posts.map(post => ({
|
items: posts.map((post) => ({
|
||||||
// Assumes all RSS feed item properties are in post frontmatter
|
// Assumes all RSS feed item properties are in post frontmatter
|
||||||
...post.data,
|
...post.data,
|
||||||
// Generate a `url` from each post `slug`
|
// Generate a `url` from each post `slug`
|
||||||
// This assumes all blog posts are rendered as `/blog/[slug]` routes
|
// This assumes all blog posts are rendered as `/blog/[slug]` routes
|
||||||
// https://docs.astro.build/en/guides/content-collections/#generating-pages-from-content-collections
|
// https://docs.astro.build/en/guides/content-collections/#generating-pages-from-content-collections
|
||||||
link: `/blog/${post.slug}/`,
|
link: `/blog/${post.slug}/`,
|
||||||
}))
|
})),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
@ -180,8 +180,9 @@ By default, the library will add trailing slashes to the emitted URLs. To preven
|
||||||
```js
|
```js
|
||||||
import rss from '@astrojs/rss';
|
import rss from '@astrojs/rss';
|
||||||
|
|
||||||
export const get = () => rss({
|
export const get = () =>
|
||||||
trailingSlash: false
|
rss({
|
||||||
|
trailingSlash: false,
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -193,12 +194,13 @@ An example feed item might look like:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const item = {
|
const item = {
|
||||||
title: "Alpha Centauri: so close you can touch it",
|
title: 'Alpha Centauri: so close you can touch it',
|
||||||
link: "/blog/alpha-centuari",
|
link: '/blog/alpha-centuari',
|
||||||
pubDate: new Date("2023-06-04"),
|
pubDate: new Date('2023-06-04'),
|
||||||
description: "Alpha Centauri is a triple star system, containing Proxima Centauri, the closest star to our sun at only 4.24 light-years away.",
|
description:
|
||||||
categories: ["stars", "space"]
|
'Alpha Centauri is a triple star system, containing Proxima Centauri, the closest star to our sun at only 4.24 light-years away.',
|
||||||
}
|
categories: ['stars', 'space'],
|
||||||
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### `title`
|
### `title`
|
||||||
|
|
@ -259,15 +261,16 @@ An object that defines the `title` and `url` of the original feed for items that
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const item = {
|
const item = {
|
||||||
title: "Alpha Centauri: so close you can touch it",
|
title: 'Alpha Centauri: so close you can touch it',
|
||||||
link: "/blog/alpha-centuari",
|
link: '/blog/alpha-centuari',
|
||||||
pubDate: new Date("2023-06-04"),
|
pubDate: new Date('2023-06-04'),
|
||||||
description: "Alpha Centauri is a triple star system, containing Proxima Centauri, the closest star to our sun at only 4.24 light-years away.",
|
description:
|
||||||
|
'Alpha Centauri is a triple star system, containing Proxima Centauri, the closest star to our sun at only 4.24 light-years away.',
|
||||||
source: {
|
source: {
|
||||||
title: "The Galactic Times",
|
title: 'The Galactic Times',
|
||||||
url: "https://galactictimes.space/feed.xml"
|
url: 'https://galactictimes.space/feed.xml',
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
#### `source.title`
|
#### `source.title`
|
||||||
|
|
@ -290,16 +293,17 @@ An object to specify properties for an included media source (e.g. a podcast) wi
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const item = {
|
const item = {
|
||||||
title: "Alpha Centauri: so close you can touch it",
|
title: 'Alpha Centauri: so close you can touch it',
|
||||||
link: "/blog/alpha-centuari",
|
link: '/blog/alpha-centuari',
|
||||||
pubDate: new Date("2023-06-04"),
|
pubDate: new Date('2023-06-04'),
|
||||||
description: "Alpha Centauri is a triple star system, containing Proxima Centauri, the closest star to our sun at only 4.24 light-years away.",
|
description:
|
||||||
|
'Alpha Centauri is a triple star system, containing Proxima Centauri, the closest star to our sun at only 4.24 light-years away.',
|
||||||
enclosure: {
|
enclosure: {
|
||||||
url: "/media/alpha-centauri.aac",
|
url: '/media/alpha-centauri.aac',
|
||||||
length: 124568,
|
length: 124568,
|
||||||
type: "audio/aac"
|
type: 'audio/aac',
|
||||||
}
|
},
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
#### `enclosure.url`
|
#### `enclosure.url`
|
||||||
|
|
@ -361,9 +365,7 @@ export async function get(context) {
|
||||||
title: 'Buzz’s Blog',
|
title: 'Buzz’s Blog',
|
||||||
description: 'A humble Astronaut’s guide to the stars',
|
description: 'A humble Astronaut’s guide to the stars',
|
||||||
site: context.site,
|
site: context.site,
|
||||||
items: await pagesGlobToRssItems(
|
items: await pagesGlobToRssItems(import.meta.glob('./blog/*.{md,mdx}')),
|
||||||
import.meta.glob('./blog/*.{md,mdx}'),
|
|
||||||
),
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -8,10 +8,8 @@
|
||||||
<br/><br/>
|
<br/><br/>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# Recommended!
|
# Recommended!
|
||||||
npm create astro@latest
|
npm create astro@latest
|
||||||
|
|
@ -31,6 +29,7 @@ Visit our [official documentation](https://docs.astro.build/).
|
||||||
## Support
|
## Support
|
||||||
|
|
||||||
Having trouble? Get help in the official [Astro Discord](https://astro.build/chat).
|
Having trouble? Get help in the official [Astro Discord](https://astro.build/chat).
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
**New contributors welcome!** Check out our [Contributors Guide](/CONTRIBUTING.md) for help getting started.
|
**New contributors welcome!** Check out our [Contributors Guide](/CONTRIBUTING.md) for help getting started.
|
||||||
|
|
@ -42,5 +41,3 @@ Join us on [Discord](https://astro.build/chat) to meet other maintainers. We'll
|
||||||
Astro is generously supported by [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), and several other amazing organizations [listed here.](https://astro.build/)
|
Astro is generously supported by [Netlify](https://www.netlify.com/), [Vercel](https://vercel.com/), and several other amazing organizations [listed here.](https://astro.build/)
|
||||||
|
|
||||||
[❤️ Sponsor Astro! ❤️](https://github.com/withastro/.github/blob/main/FUNDING.md)
|
[❤️ Sponsor Astro! ❤️](https://github.com/withastro/.github/blob/main/FUNDING.md)
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
|
|
||||||
This file serves as developer documentation to explain how the internal plugins work
|
This file serves as developer documentation to explain how the internal plugins work
|
||||||
|
|
||||||
|
|
||||||
## `plugin-middleware`
|
## `plugin-middleware`
|
||||||
|
|
||||||
This plugin is responsible to retrieve the `src/middleware.{ts.js}` file and emit an entry point during the SSR build.
|
This plugin is responsible to retrieve the `src/middleware.{ts.js}` file and emit an entry point during the SSR build.
|
||||||
|
|
@ -20,7 +19,12 @@ The emitted file is called `renderers.mjs`.
|
||||||
The emitted file has content similar to:
|
The emitted file has content similar to:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const renderers = [Object.assign({"name":"astro:jsx","serverEntrypoint":"astro/jsx/server.js","jsxImportSource":"astro"}, { ssr: server_default }),];
|
const renderers = [
|
||||||
|
Object.assign(
|
||||||
|
{ name: 'astro:jsx', serverEntrypoint: 'astro/jsx/server.js', jsxImportSource: 'astro' },
|
||||||
|
{ ssr: server_default }
|
||||||
|
),
|
||||||
|
];
|
||||||
|
|
||||||
export { renderers };
|
export { renderers };
|
||||||
```
|
```
|
||||||
|
|
@ -32,16 +36,17 @@ This plugin is responsible to collect all pages inside an Astro application, and
|
||||||
This plugin **will emit code** only when building a static site.
|
This plugin **will emit code** only when building a static site.
|
||||||
|
|
||||||
In order to achieve that, the plugin emits these pages as **virtual modules**. Doing so allows us to bypass:
|
In order to achieve that, the plugin emits these pages as **virtual modules**. Doing so allows us to bypass:
|
||||||
|
|
||||||
- rollup resolution of the files
|
- rollup resolution of the files
|
||||||
- possible plugins that get triggered when the name of the module has an extension e.g. `.astro`
|
- possible plugins that get triggered when the name of the module has an extension e.g. `.astro`
|
||||||
|
|
||||||
The plugin does the following operations:
|
The plugin does the following operations:
|
||||||
|
|
||||||
- loop through all the pages and collects their paths;
|
- loop through all the pages and collects their paths;
|
||||||
- with each path, we create a new [string](#plugin-pages-mapping-resolution) that will serve and virtual module for that particular page
|
- with each path, we create a new [string](#plugin-pages-mapping-resolution) that will serve and virtual module for that particular page
|
||||||
- when resolving the page, we check if the `id` of the module starts with `@astro-page`
|
- when resolving the page, we check if the `id` of the module starts with `@astro-page`
|
||||||
- once the module is resolved, we emit [the code of the module](#plugin-pages-code-generation)
|
- once the module is resolved, we emit [the code of the module](#plugin-pages-code-generation)
|
||||||
|
|
||||||
|
|
||||||
### `plugin pages` mapping resolution
|
### `plugin pages` mapping resolution
|
||||||
|
|
||||||
The mapping is as follows:
|
The mapping is as follows:
|
||||||
|
|
@ -56,11 +61,10 @@ src/pages/index.astro => @astro-page:src/pages/index@_@astro
|
||||||
This kind of patterns will then allow us to retrieve the path physical path of the
|
This kind of patterns will then allow us to retrieve the path physical path of the
|
||||||
file back from that string. This is important for the [code generation](#plugin-pages-code-generation)
|
file back from that string. This is important for the [code generation](#plugin-pages-code-generation)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### `plugin pages` code generation
|
### `plugin pages` code generation
|
||||||
|
|
||||||
When generating the code of the page, we will import and export the following modules:
|
When generating the code of the page, we will import and export the following modules:
|
||||||
|
|
||||||
- the `renderers.mjs`
|
- the `renderers.mjs`
|
||||||
- the `middleware.mjs`
|
- the `middleware.mjs`
|
||||||
- the page, via dynamic import
|
- the page, via dynamic import
|
||||||
|
|
@ -79,6 +83,7 @@ export { middleware, page };
|
||||||
```
|
```
|
||||||
|
|
||||||
If we have a `pages/` folder that looks like this:
|
If we have a `pages/` folder that looks like this:
|
||||||
|
|
||||||
```
|
```
|
||||||
├── blog
|
├── blog
|
||||||
│ ├── first.astro
|
│ ├── first.astro
|
||||||
|
|
@ -91,6 +96,7 @@ If we have a `pages/` folder that looks like this:
|
||||||
|
|
||||||
The emitted entry points will be stored inside a `pages/` folder, and they
|
The emitted entry points will be stored inside a `pages/` folder, and they
|
||||||
will look like this:
|
will look like this:
|
||||||
|
|
||||||
```
|
```
|
||||||
├── _astro
|
├── _astro
|
||||||
│ ├── first.132e69e0.css
|
│ ├── first.132e69e0.css
|
||||||
|
|
@ -130,15 +136,14 @@ The plugin will collect all the [virtual pages](#plugin-pages) and create
|
||||||
a JavaScript `Map`. These map will look like this:
|
a JavaScript `Map`. These map will look like this:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const _page$0 = () => import("../chunks/<INDEX.ASTRO_CHUNK>.mjs")
|
const _page$0 = () => import('../chunks/<INDEX.ASTRO_CHUNK>.mjs');
|
||||||
const _page$1 = () => import("../chunks/<ABOUT.ASTRO_CHUNK>.mjs")
|
const _page$1 = () => import('../chunks/<ABOUT.ASTRO_CHUNK>.mjs');
|
||||||
|
|
||||||
const pageMap = new Map([
|
const pageMap = new Map([
|
||||||
["src/pages/index.astro", _page$0],
|
['src/pages/index.astro', _page$0],
|
||||||
["src/pages/about.astro", _page$1],
|
['src/pages/about.astro', _page$1],
|
||||||
])
|
]);
|
||||||
```
|
```
|
||||||
|
|
||||||
It will also import the [`renderers`](#plugin-renderers) virtual module
|
It will also import the [`renderers`](#plugin-renderers) virtual module
|
||||||
and the [`middleware`](#plugin-middleware) virtual module.
|
and the [`middleware`](#plugin-middleware) virtual module.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,22 +9,27 @@
|
||||||
**Error Format**
|
**Error Format**
|
||||||
|
|
||||||
Name (key of the object definition):
|
Name (key of the object definition):
|
||||||
|
|
||||||
- As with the error code, this property is a static reference to the error. The shape should be similar to JavaScript's native errors (TypeError, ReferenceError): pascal-cased, no spaces, no special characters etc. (ex: `ClientAddressNotAvailable`)
|
- As with the error code, this property is a static reference to the error. The shape should be similar to JavaScript's native errors (TypeError, ReferenceError): pascal-cased, no spaces, no special characters etc. (ex: `ClientAddressNotAvailable`)
|
||||||
- This is the only part of the error message that should not be written as a full, proper sentence complete with Capitalization and end punctuation.
|
- This is the only part of the error message that should not be written as a full, proper sentence complete with Capitalization and end punctuation.
|
||||||
|
|
||||||
Title:
|
Title:
|
||||||
|
|
||||||
- Use this property to briefly describe the error in a few words. This is the user's way to see at a glance what has happened and will be prominently displayed in the UI (ex: `{feature} is not available in static mode.`) Do not include further details such as why this error occurred or possible solutions.
|
- Use this property to briefly describe the error in a few words. This is the user's way to see at a glance what has happened and will be prominently displayed in the UI (ex: `{feature} is not available in static mode.`) Do not include further details such as why this error occurred or possible solutions.
|
||||||
|
|
||||||
Message:
|
Message:
|
||||||
|
|
||||||
- Begin with **what happened** and **why**. (ex: `Could not use {feature} because Server-side Rendering is not enabled.`)
|
- Begin with **what happened** and **why**. (ex: `Could not use {feature} because Server-side Rendering is not enabled.`)
|
||||||
- Then, **describe the action the user should take**. (ex: `Update your Astro config with `output: 'server'` to enable Server-side Rendering.`)
|
- Then, **describe the action the user should take**. (ex: `Update your Astro config with `output: 'server'` to enable Server-side Rendering.`)
|
||||||
- Although this does not need to be as brief as the `title`, try to keep sentences short, clear and direct to give the reader all the necessary information quickly as possible.
|
- Although this does not need to be as brief as the `title`, try to keep sentences short, clear and direct to give the reader all the necessary information quickly as possible.
|
||||||
- Instead of writing a longer message, consider using a `hint`.
|
- Instead of writing a longer message, consider using a `hint`.
|
||||||
|
|
||||||
Hint:
|
Hint:
|
||||||
|
|
||||||
- A `hint` can be used for any additional info that might help the user. (ex: a link to the documentation, or a common cause)
|
- A `hint` can be used for any additional info that might help the user. (ex: a link to the documentation, or a common cause)
|
||||||
|
|
||||||
**Writing Style**
|
**Writing Style**
|
||||||
|
|
||||||
- Write in proper sentences. Include periods at the end of sentences. Avoid using exclamation marks! (Leave them to Houston!)
|
- Write in proper sentences. Include periods at the end of sentences. Avoid using exclamation marks! (Leave them to Houston!)
|
||||||
- Technical jargon is mostly okay! But, most abbreviations should be avoided. If a developer is unfamiliar with a technical term, spelling it out in full allows them to look it up on the web more easily.
|
- Technical jargon is mostly okay! But, most abbreviations should be avoided. If a developer is unfamiliar with a technical term, spelling it out in full allows them to look it up on the web more easily.
|
||||||
- Describe the _what_, _why_ and _action to take_ from the user's perspective. Assume they don't know Astro internals, and care only about how Astro is _used_. (ex: `You are missing...` vs `Astro/file cannot find...`)
|
- Describe the _what_, _why_ and _action to take_ from the user's perspective. Assume they don't know Astro internals, and care only about how Astro is _used_. (ex: `You are missing...` vs `Astro/file cannot find...`)
|
||||||
|
|
@ -33,6 +38,7 @@ Hint:
|
||||||
**Choosing an Error Code**
|
**Choosing an Error Code**
|
||||||
|
|
||||||
Choose any available error code in the appropriate range:
|
Choose any available error code in the appropriate range:
|
||||||
|
|
||||||
- 01xxx and 02xxx are reserved for compiler errors and warnings respectively
|
- 01xxx and 02xxx are reserved for compiler errors and warnings respectively
|
||||||
- 03xxx: Astro errors (your error most likely goes here!)
|
- 03xxx: Astro errors (your error most likely goes here!)
|
||||||
- 04xxx: Vite errors
|
- 04xxx: Vite errors
|
||||||
|
|
@ -49,17 +55,19 @@ Users are not reading codes sequentially. They're much more likely to directly l
|
||||||
If you are unsure about which error code to choose, ask [Erika](https://github.com/Princesseuh)!
|
If you are unsure about which error code to choose, ask [Erika](https://github.com/Princesseuh)!
|
||||||
|
|
||||||
### CLI specifics tips:
|
### CLI specifics tips:
|
||||||
|
|
||||||
- If the error happened **during an action that changes the state of the project** (ex: editing configuration, creating files), the error should **reassure the user** about the state of their project (ex: "Failed to update configuration. Your project has been restored to its previous state.")
|
- If the error happened **during an action that changes the state of the project** (ex: editing configuration, creating files), the error should **reassure the user** about the state of their project (ex: "Failed to update configuration. Your project has been restored to its previous state.")
|
||||||
- If an "error" happened because of a conscious user action (ex: pressing CTRL+C during a choice), it is okay to add more personality (ex: "Operation cancelled. See you later, astronaut!"). Do keep in mind the previous point however (ex: "Operation cancelled. No worries, your project folder has already been created")
|
- If an "error" happened because of a conscious user action (ex: pressing CTRL+C during a choice), it is okay to add more personality (ex: "Operation cancelled. See you later, astronaut!"). Do keep in mind the previous point however (ex: "Operation cancelled. No worries, your project folder has already been created")
|
||||||
|
|
||||||
### Shape
|
### Shape
|
||||||
|
|
||||||
- **Error codes and names are permanent**, and should never be changed, nor deleted. Users should always be able to find an error by searching, and this ensures a matching result. When an error is no longer relevant, it should be deprecated, not removed.
|
- **Error codes and names are permanent**, and should never be changed, nor deleted. Users should always be able to find an error by searching, and this ensures a matching result. When an error is no longer relevant, it should be deprecated, not removed.
|
||||||
- Contextual information may be used to enhance the message or the hint. However, the code that caused the error or the position of the error should not be included in the message as they will already be shown as part of the error.
|
- Contextual information may be used to enhance the message or the hint. However, the code that caused the error or the position of the error should not be included in the message as they will already be shown as part of the error.
|
||||||
- Do not prefix `title`, `message` and `hint` with descriptive words such as "Error:" or "Hint:" as it may lead to duplicated labels in the UI / CLI.
|
- Do not prefix `title`, `message` and `hint` with descriptive words such as "Error:" or "Hint:" as it may lead to duplicated labels in the UI / CLI.
|
||||||
- Dynamic error messages must use the following shape:
|
- Dynamic error messages must use the following shape:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
message: (arguments) => `text ${substitute}`
|
message: (arguments) => `text ${substitute}`;
|
||||||
```
|
```
|
||||||
|
|
||||||
Please avoid including too much logic inside the errors if you can. The last thing you want is for a bug to happen inside what's already an error!
|
Please avoid including too much logic inside the errors if you can. The last thing you want is for a bug to happen inside what's already an error!
|
||||||
|
|
@ -82,7 +90,9 @@ Here's how to create and format the comments:
|
||||||
* @description <- Description of the error
|
* @description <- Description of the error
|
||||||
*/
|
*/
|
||||||
```
|
```
|
||||||
|
|
||||||
Example:
|
Example:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
/**
|
/**
|
||||||
* @docs
|
* @docs
|
||||||
|
|
|
||||||
|
|
@ -18,9 +18,9 @@ Consider the following example configuration:
|
||||||
With this configuration, the following imports would map to the same location.
|
With this configuration, the following imports would map to the same location.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import Test from '../components/Test.astro'
|
import Test from '../components/Test.astro';
|
||||||
|
|
||||||
import Test from 'components/Test.astro'
|
import Test from 'components/Test.astro';
|
||||||
|
|
||||||
import Test from 'components:Test'
|
import Test from 'components:Test';
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -26,6 +26,7 @@ npm create astro@latest my-astro-project -- --template minimal
|
||||||
# yarn
|
# yarn
|
||||||
yarn create astro my-astro-project --template minimal
|
yarn create astro my-astro-project --template minimal
|
||||||
```
|
```
|
||||||
|
|
||||||
[Check out the full list][examples] of example templates, available on GitHub.
|
[Check out the full list][examples] of example templates, available on GitHub.
|
||||||
|
|
||||||
You can also use any GitHub repo as a template:
|
You can also use any GitHub repo as a template:
|
||||||
|
|
@ -39,7 +40,7 @@ npm create astro@latest my-astro-project -- --template cassidoo/shopify-react-as
|
||||||
May be provided in place of prompts
|
May be provided in place of prompts
|
||||||
|
|
||||||
| Name | Description |
|
| Name | Description |
|
||||||
|:-------------|:----------------------------------------------------|
|
| :--------------------------- | :----------------------------------------------------- |
|
||||||
| `--template <name>` | Specify your template. |
|
| `--template <name>` | Specify your template. |
|
||||||
| `--install` / `--no-install` | Install dependencies (or not). |
|
| `--install` / `--no-install` | Install dependencies (or not). |
|
||||||
| `--git` / `--no-git` | Initialize git repo (or not). |
|
| `--git` / `--no-git` | Initialize git repo (or not). |
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,7 @@ npm install alpinejs @types/alpinejs
|
||||||
|
|
||||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "alpine()"
|
```js ins={2} "alpine()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
|
||||||
|
|
@ -32,13 +32,12 @@ import cloudflare from '@astrojs/cloudflare';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: cloudflare()
|
adapter: cloudflare(),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
## Options
|
## Options
|
||||||
|
|
||||||
|
|
||||||
### Mode
|
### Mode
|
||||||
|
|
||||||
`mode: "advanced" | "directory"`
|
`mode: "advanced" | "directory"`
|
||||||
|
|
@ -54,9 +53,8 @@ In directory mode the adapter will compile the client side part of your app the
|
||||||
```ts
|
```ts
|
||||||
// directory mode
|
// directory mode
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
adapter: cloudflare({ mode: "directory" }),
|
adapter: cloudflare({ mode: 'directory' }),
|
||||||
});
|
});
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Enabling Preview
|
## Enabling Preview
|
||||||
|
|
@ -74,7 +72,7 @@ It's then possible to update the preview script in your `package.json` to `"prev
|
||||||
You can access all the Cloudflare bindings and environment variables from Astro components and API routes through the adapter API.
|
You can access all the Cloudflare bindings and environment variables from Astro components and API routes through the adapter API.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { getRuntime } from "@astrojs/cloudflare/runtime";
|
import { getRuntime } from '@astrojs/cloudflare/runtime';
|
||||||
|
|
||||||
getRuntime(Astro.request);
|
getRuntime(Astro.request);
|
||||||
```
|
```
|
||||||
|
|
@ -108,7 +106,6 @@ By default, `@astrojs/cloudflare` will generate a `_routes.json` file that lists
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||
|
|
||||||
For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
|
For help, check out the `#support` channel on [Discord](https://astro.build/chat). Our friendly Support Squad members are here to help!
|
||||||
|
|
||||||
You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
|
You can also check our [Astro Integration Documentation][astro-integration] for more on integrations.
|
||||||
|
|
@ -124,9 +121,9 @@ export default defineConfig({
|
||||||
|
|
||||||
vite: {
|
vite: {
|
||||||
build: {
|
build: {
|
||||||
minify: false
|
minify: false,
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -92,12 +92,11 @@ You can also run the script directly using deno:
|
||||||
deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs
|
deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
To configure this adapter, pass an object to the `deno()` function call in `astro.config.mjs`.
|
To configure this adapter, pass an object to the `deno()` function call in `astro.config.mjs`.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -107,7 +106,7 @@ export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: deno({
|
adapter: deno({
|
||||||
//options go here
|
//options go here
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -122,15 +121,15 @@ import deno from '@astrojs/deno';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: deno({
|
adapter: deno({
|
||||||
start: false
|
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:
|
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
|
```ts
|
||||||
import { serve } from "https://deno.land/std@0.167.0/http/server.ts";
|
import { serve } from 'https://deno.land/std@0.167.0/http/server.ts';
|
||||||
import { handle } from './dist/entry.mjs';
|
import { handle } from './dist/entry.mjs';
|
||||||
|
|
||||||
serve((req: Request) => {
|
serve((req: Request) => {
|
||||||
|
|
@ -152,8 +151,8 @@ export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: deno({
|
adapter: deno({
|
||||||
port: 8081,
|
port: 8081,
|
||||||
hostname: 'myhost'
|
hostname: 'myhost',
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -27,17 +27,17 @@ Along with our integration, we recommend installing [sharp](https://sharp.pixelp
|
||||||
The `@astrojs/image` default image transformer is based on [Squoosh](https://github.com/GoogleChromeLabs/squoosh) and uses WebAssembly libraries to support most deployment environments, including those that do not support sharp, such as StackBlitz.
|
The `@astrojs/image` default image transformer is based on [Squoosh](https://github.com/GoogleChromeLabs/squoosh) and uses WebAssembly libraries to support most deployment environments, including those that do not support sharp, such as StackBlitz.
|
||||||
|
|
||||||
For faster builds and more fine-grained control of image transformations, install sharp in addition to `@astrojs/image` if
|
For faster builds and more fine-grained control of image transformations, install sharp in addition to `@astrojs/image` if
|
||||||
|
|
||||||
- You are building a static site with Astro.
|
- You are building a static site with Astro.
|
||||||
- You are using an SSR deployment host that supports NodeJS using `@astrojs/netlify/functions`, `@astrojs/vercel/serverless` or `@astrojs/node`.
|
- You are using an SSR deployment host that supports NodeJS using `@astrojs/netlify/functions`, `@astrojs/vercel/serverless` or `@astrojs/node`.
|
||||||
|
|
||||||
|
|
||||||
Note that `@astrojs/image` is not currently supported on
|
Note that `@astrojs/image` is not currently supported on
|
||||||
|
|
||||||
- Cloudflare SSR
|
- Cloudflare SSR
|
||||||
- `@astrojs/deno`
|
- `@astrojs/deno`
|
||||||
- `@astrojs/netlify/edge-functions`
|
- `@astrojs/netlify/edge-functions`
|
||||||
- `@astrojs/vercel/edge`
|
- `@astrojs/vercel/edge`
|
||||||
|
|
||||||
|
|
||||||
### Quick Install
|
### 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.
|
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.
|
||||||
|
|
@ -56,12 +56,14 @@ If you run into any issues, [feel free to report them to us on GitHub](https://g
|
||||||
### Manual Install
|
### 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:
|
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
|
```sh
|
||||||
npm install @astrojs/image
|
npm install @astrojs/image
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "image()"
|
```js ins={2} "image()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -83,7 +85,7 @@ npm install sharp
|
||||||
|
|
||||||
Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer.
|
Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={7}
|
```js ins={7}
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -91,10 +93,12 @@ import image from '@astrojs/image';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
// ...
|
// ...
|
||||||
integrations: [image({
|
integrations: [
|
||||||
serviceEntryPoint: '@astrojs/image/sharp'
|
image({
|
||||||
})],
|
serviceEntryPoint: '@astrojs/image/sharp',
|
||||||
})
|
}),
|
||||||
|
],
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### Update `env.d.ts`
|
### Update `env.d.ts`
|
||||||
|
|
@ -143,6 +147,7 @@ In addition to the component-specific properties, any valid HTML attribute for t
|
||||||
|
|
||||||
**Type:** `string` | `ImageMetadata` | `Promise<ImageMetadata>`<br>
|
**Type:** `string` | `ImageMetadata` | `Promise<ImageMetadata>`<br>
|
||||||
**Required:** `true`
|
**Required:** `true`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
Source for the original image file.
|
Source for the original image file.
|
||||||
|
|
@ -151,7 +156,6 @@ For remote images, provide the full URL. (e.g. `src="https://astro.build/assets/
|
||||||
|
|
||||||
For images located in your project's `src/`: use the file path relative to the `src/` directory. (e.g. `src="../assets/source-pic.png"`)
|
For images located in your project's `src/`: use the file path relative to the `src/` directory. (e.g. `src="../assets/source-pic.png"`)
|
||||||
|
|
||||||
|
|
||||||
For images located in your `public/` directory: use the URL path relative to the `public/` directory. (e.g. `src="/images/public-image.jpg"`). These work like remote images.
|
For images located in your `public/` directory: use the URL path relative to the `public/` directory. (e.g. `src="/images/public-image.jpg"`). These work like remote images.
|
||||||
|
|
||||||
#### alt
|
#### alt
|
||||||
|
|
@ -160,6 +164,7 @@ For images located in your `public/` directory: use the URL path relative to the
|
||||||
|
|
||||||
**Type:** `string`<br>
|
**Type:** `string`<br>
|
||||||
**Required:** `true`
|
**Required:** `true`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
Defines an alternative text description of the image.
|
Defines an alternative text description of the image.
|
||||||
|
|
@ -172,6 +177,7 @@ Set to an empty string (`alt=""`) if the image is not a key part of the content
|
||||||
|
|
||||||
**Type:** `'avif' | 'jpeg' | 'jpg' | 'png' | 'svg' | 'webp'`<br>
|
**Type:** `'avif' | 'jpeg' | 'jpg' | 'png' | 'svg' | 'webp'`<br>
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
The output format to be used in the optimized image. The original image format will be used if `format` is not provided.
|
The output format to be used in the optimized image. The original image format will be used if `format` is not provided.
|
||||||
|
|
@ -186,6 +192,7 @@ Added in v0.15.0: You can use the `<Image />` component when working with SVG im
|
||||||
|
|
||||||
**Type:** `number`<br>
|
**Type:** `number`<br>
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
The compression quality used during optimization. The image service will use its own default quality depending on the image format if not provided.
|
The compression quality used during optimization. The image service will use its own default quality depending on the image format if not provided.
|
||||||
|
|
@ -196,6 +203,7 @@ The compression quality used during optimization. The image service will use its
|
||||||
|
|
||||||
**Type:** `number`<br>
|
**Type:** `number`<br>
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
The desired width of the output image. Combine with `height` to crop the image to an exact size, or `aspectRatio` to automatically calculate and crop the height.
|
The desired width of the output image. Combine with `height` to crop the image to an exact size, or `aspectRatio` to automatically calculate and crop the height.
|
||||||
|
|
@ -210,6 +218,7 @@ For remote images, including images in `public/`, the integration needs to be ab
|
||||||
|
|
||||||
**Type:** `number`<br>
|
**Type:** `number`<br>
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
The desired height of the output image. Combine with `width` to crop the image to an exact size, or `aspectRatio` to automatically calculate and crop the width.
|
The desired height of the output image. Combine with `width` to crop the image to an exact size, or `aspectRatio` to automatically calculate and crop the width.
|
||||||
|
|
@ -224,6 +233,7 @@ For remote images, including images in `public/`, the integration needs to be ab
|
||||||
|
|
||||||
**Type:** `number` | `string`<br>
|
**Type:** `number` | `string`<br>
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
The desired aspect ratio of the output image. Combine with either `width` or `height` to automatically calculate and crop the other dimension.
|
The desired aspect ratio of the output image. Combine with either `width` or `height` to automatically calculate and crop the other dimension.
|
||||||
|
|
@ -240,6 +250,7 @@ For remote images, including images in `public/`, the integration needs to be ab
|
||||||
|
|
||||||
**Type:** `ColorDefinition`<br>
|
**Type:** `ColorDefinition`<br>
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
|
||||||
|
|
@ -262,6 +273,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
|
||||||
|
|
||||||
**Type:** `'cover' | 'contain' | 'fill' | 'inside' | 'outside'` <br>
|
**Type:** `'cover' | 'contain' | 'fill' | 'inside' | 'outside'` <br>
|
||||||
**Default:** `'cover'`
|
**Default:** `'cover'`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
|
||||||
|
|
@ -274,6 +286,7 @@ How the image should be resized to fit both `height` and `width`.
|
||||||
|
|
||||||
**Type:** `'top' | 'right top' | 'right' | 'right bottom' | 'bottom' | 'left bottom' | 'left' | 'left top' | 'north' | 'northeast' | 'east' | 'southeast' | 'south' | 'southwest' | 'west' | 'northwest' | 'center' | 'centre' | 'cover' | 'entropy' | 'attention'` <br>
|
**Type:** `'top' | 'right top' | 'right' | 'right bottom' | 'bottom' | 'left bottom' | 'left' | 'left top' | 'north' | 'northeast' | 'east' | 'southeast' | 'south' | 'southwest' | 'west' | 'northwest' | 'center' | 'centre' | 'cover' | 'entropy' | 'attention'` <br>
|
||||||
**Default:** `'centre'`
|
**Default:** `'centre'`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
|
||||||
|
|
@ -292,6 +305,7 @@ In addition to the component-specific properties, any valid HTML attribute for t
|
||||||
|
|
||||||
**Type:** `string` | `ImageMetadata` | `Promise<ImageMetadata>`<br>
|
**Type:** `string` | `ImageMetadata` | `Promise<ImageMetadata>`<br>
|
||||||
**Required:** `true`
|
**Required:** `true`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
Source for the original image file.
|
Source for the original image file.
|
||||||
|
|
@ -300,7 +314,6 @@ For remote images, provide the full URL. (e.g. `src="https://astro.build/assets/
|
||||||
|
|
||||||
For images located in your project's `src/`: use the file path relative to the `src/` directory. (e.g. `src="../assets/source-pic.png"`)
|
For images located in your project's `src/`: use the file path relative to the `src/` directory. (e.g. `src="../assets/source-pic.png"`)
|
||||||
|
|
||||||
|
|
||||||
For images located in your `public/` directory: use the URL path relative to the `public/` directory. (e.g. `src="/images/public-image.jpg"`). These work like remote images.
|
For images located in your `public/` directory: use the URL path relative to the `public/` directory. (e.g. `src="/images/public-image.jpg"`). These work like remote images.
|
||||||
|
|
||||||
#### alt
|
#### alt
|
||||||
|
|
@ -309,6 +322,7 @@ For images located in your `public/` directory: use the URL path relative to the
|
||||||
|
|
||||||
**Type:** `string`<br>
|
**Type:** `string`<br>
|
||||||
**Required:** `true`
|
**Required:** `true`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
Defines an alternative text description of the image.
|
Defines an alternative text description of the image.
|
||||||
|
|
@ -321,6 +335,7 @@ Set to an empty string (`alt=""`) if the image is not a key part of the content
|
||||||
|
|
||||||
**Type:** `string`<br>
|
**Type:** `string`<br>
|
||||||
**Required:** `true`
|
**Required:** `true`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
The HTMLImageElement property `sizes` allows you to specify the layout width of the image for each of a list of media conditions.
|
The HTMLImageElement property `sizes` allows you to specify the layout width of the image for each of a list of media conditions.
|
||||||
|
|
@ -333,13 +348,14 @@ See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/size
|
||||||
|
|
||||||
**Type:** `number[]`<br>
|
**Type:** `number[]`<br>
|
||||||
**Required:** `true`
|
**Required:** `true`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
The list of sizes that should be built for responsive images. This is combined with `aspectRatio` to calculate the final dimensions of each built image.
|
The list of sizes that should be built for responsive images. This is combined with `aspectRatio` to calculate the final dimensions of each built image.
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
// Builds three images: 400x400, 800x800, and 1200x1200
|
// Builds three images: 400x400, 800x800, and 1200x1200
|
||||||
<Picture src={...} widths={[400, 800, 1200]} aspectRatio="1:1" alt="descriptive text" />
|
<Picture src={img} widths={[400, 800, 1200]} aspectRatio="1:1" alt="descriptive text" />
|
||||||
```
|
```
|
||||||
|
|
||||||
#### aspectRatio
|
#### aspectRatio
|
||||||
|
|
@ -348,6 +364,7 @@ The list of sizes that should be built for responsive images. This is combined w
|
||||||
|
|
||||||
**Type:** `number` | `string`<br>
|
**Type:** `number` | `string`<br>
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
The desired aspect ratio of the output image. This is combined with `widths` to calculate the final dimensions of each built image.
|
The desired aspect ratio of the output image. This is combined with `widths` to calculate the final dimensions of each built image.
|
||||||
|
|
@ -364,6 +381,7 @@ For remote images, including images in `public/`, `aspectRatio` is required to e
|
||||||
|
|
||||||
**Type:** `Array<'avif' | 'jpeg' | 'png' | 'webp'>`<br>
|
**Type:** `Array<'avif' | 'jpeg' | 'png' | 'webp'>`<br>
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
The output formats to be used in the optimized image. If not provided, `webp` and `avif` will be used in addition to the original image format.
|
The output formats to be used in the optimized image. If not provided, `webp` and `avif` will be used in addition to the original image format.
|
||||||
|
|
@ -376,6 +394,7 @@ For remote images, including images in `public/`, the original image format is u
|
||||||
|
|
||||||
**Type:** `ColorDefinition`<br>
|
**Type:** `ColorDefinition`<br>
|
||||||
**Default:** `undefined`
|
**Default:** `undefined`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead.
|
||||||
|
|
@ -396,6 +415,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
|
||||||
|
|
||||||
**Type:** `'cover' | 'contain' | 'fill' | 'inside' | 'outside'` <br>
|
**Type:** `'cover' | 'contain' | 'fill' | 'inside' | 'outside'` <br>
|
||||||
**Default:** `'cover'`
|
**Default:** `'cover'`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
|
||||||
|
|
@ -410,6 +430,7 @@ How the image should be resized to fit both `height` and `width`.
|
||||||
'north' | 'northeast' | 'east' | 'southeast' | 'south' | 'southwest' | 'west' | 'northwest' |
|
'north' | 'northeast' | 'east' | 'southeast' | 'south' | 'southwest' | 'west' | 'northwest' |
|
||||||
'center' | 'centre' | 'cover' | 'entropy' | 'attention'` <br>
|
'center' | 'centre' | 'cover' | 'entropy' | 'attention'` <br>
|
||||||
**Default:** `'centre'`
|
**Default:** `'centre'`
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
|
> This is not supported by the default Squoosh service. See the [installation section](#installing-sharp-optional) for details on using the `sharp` service instead. Read more about [how `sharp` resizes images](https://sharp.pixelplumbing.com/api-resize).
|
||||||
|
|
@ -430,13 +451,13 @@ import { getImage } from '@astrojs/image';
|
||||||
|
|
||||||
const { src } = await getImage({
|
const { src } = await getImage({
|
||||||
src: import('../assets/hero.png'),
|
src: import('../assets/hero.png'),
|
||||||
alt: "My hero image"
|
alt: 'My hero image',
|
||||||
});
|
});
|
||||||
---
|
---
|
||||||
|
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<link rel="preload" as="image" href={src} alt="alt text">
|
<link rel="preload" as="image" href={src} alt="alt text" />
|
||||||
</head>
|
</head>
|
||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
@ -453,22 +474,23 @@ The integration can be configured to run with a different image service, either
|
||||||
|
|
||||||
> During development, local images may not have been published yet and would not be available to hosted image services. Local images will always use the built-in image service when using `astro dev`.
|
> During development, local images may not have been published yet and would not be available to hosted image services. Local images will always use the built-in image service when using `astro dev`.
|
||||||
|
|
||||||
|
|
||||||
### config.serviceEntryPoint
|
### config.serviceEntryPoint
|
||||||
|
|
||||||
The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/squoosh`, 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/squoosh`, which resolves to the entry point exported from this integration's `package.json`.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import image from '@astrojs/image';
|
import image from '@astrojs/image';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [image({
|
integrations: [
|
||||||
|
image({
|
||||||
// Example: The entrypoint for a third-party image service installed from NPM
|
// Example: The entrypoint for a third-party image service installed from NPM
|
||||||
serviceEntryPoint: 'my-image-service/astro.js'
|
serviceEntryPoint: 'my-image-service/astro.js',
|
||||||
})],
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -476,18 +498,20 @@ export default defineConfig({
|
||||||
|
|
||||||
The `logLevel` controls can be used to control how much detail is logged by the integration during builds. This may be useful to track down a specific image or transformation that is taking a long time to build.
|
The `logLevel` controls can be used to control how much detail is logged by the integration during builds. This may be useful to track down a specific image or transformation that is taking a long time to build.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import image from '@astrojs/image';
|
import image from '@astrojs/image';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [image({
|
integrations: [
|
||||||
|
image({
|
||||||
// supported levels: 'debug' | 'info' | 'warn' | 'error' | 'silent'
|
// supported levels: 'debug' | 'info' | 'warn' | 'error' | 'silent'
|
||||||
// default: 'info'
|
// default: 'info'
|
||||||
logLevel: 'debug'
|
logLevel: 'debug',
|
||||||
})],
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -499,17 +523,19 @@ Local images will be cached for 1 year and invalidated when the original image f
|
||||||
|
|
||||||
By default, transformed images will be cached to `./node_modules/.astro/image`. This can be configured in the integration's config options.
|
By default, transformed images will be cached to `./node_modules/.astro/image`. This can be configured in the integration's config options.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import image from '@astrojs/image';
|
import image from '@astrojs/image';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [image({
|
integrations: [
|
||||||
|
image({
|
||||||
// may be useful if your hosting provider allows caching between CI builds
|
// may be useful if your hosting provider allows caching between CI builds
|
||||||
cacheDir: "./.cache/image"
|
cacheDir: './.cache/image',
|
||||||
})]
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -558,8 +584,9 @@ For example, use an image located at `public/social.png` in either static or SSR
|
||||||
import { Image } from '@astrojs/image/components';
|
import { Image } from '@astrojs/image/components';
|
||||||
import socialImage from '/social.png';
|
import socialImage from '/social.png';
|
||||||
---
|
---
|
||||||
// In static builds: the image will be built and optimized to `/dist`.
|
|
||||||
// In SSR builds: the image will be optimized by the server when requested by a browser.
|
// In static builds: the image will be built and optimized to `/dist`. // In SSR builds: the image
|
||||||
|
will be optimized by the server when requested by a browser.
|
||||||
<Image src={socialImage} width={1280} aspectRatio="16:9" alt="descriptive text" />
|
<Image src={socialImage} width={1280} aspectRatio="16:9" alt="descriptive text" />
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -594,20 +621,38 @@ For remote images, an `aspectRatio` is required to ensure the correct `height` c
|
||||||
import { Picture } from '@astrojs/image/components';
|
import { Picture } from '@astrojs/image/components';
|
||||||
import hero from '../assets/hero.png';
|
import hero from '../assets/hero.png';
|
||||||
|
|
||||||
const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
|
const imageUrl =
|
||||||
|
'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';
|
||||||
---
|
---
|
||||||
|
|
||||||
// Local image with multiple sizes
|
// Local image with multiple sizes
|
||||||
<Picture src={hero} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="descriptive text" />
|
<Picture
|
||||||
|
src={hero}
|
||||||
|
widths={[200, 400, 800]}
|
||||||
|
sizes="(max-width: 800px) 100vw, 800px"
|
||||||
|
alt="descriptive text"
|
||||||
|
/>
|
||||||
|
|
||||||
// Remote image (aspect ratio is required)
|
// Remote image (aspect ratio is required)
|
||||||
<Picture src={imageUrl} widths={[200, 400, 800]} aspectRatio="4:3" sizes="(max-width: 800px) 100vw, 800px" alt="descriptive text" />
|
<Picture
|
||||||
|
src={imageUrl}
|
||||||
|
widths={[200, 400, 800]}
|
||||||
|
aspectRatio="4:3"
|
||||||
|
sizes="(max-width: 800px) 100vw, 800px"
|
||||||
|
alt="descriptive text"
|
||||||
|
/>
|
||||||
|
|
||||||
// Inlined imports are supported
|
// Inlined imports are supported
|
||||||
<Picture src={import("../assets/hero.png")} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="descriptive text" />
|
<Picture
|
||||||
|
src={import('../assets/hero.png')}
|
||||||
|
widths={[200, 400, 800]}
|
||||||
|
sizes="(max-width: 800px) 100vw, 800px"
|
||||||
|
alt="descriptive text"
|
||||||
|
/>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||
- If your installation doesn't seem to be working, try restarting the dev server.
|
- If your installation doesn't seem to be working, try restarting the dev server.
|
||||||
- If you edit and save a file and don't see your site update accordingly, try refreshing the page.
|
- If you edit and save a file and don't see your site update accordingly, try refreshing the page.
|
||||||
- If refreshing the page doesn't update your preview, or if a new installation doesn't seem to be working, then restart the dev server.
|
- If refreshing the page doesn't update your preview, or if a new installation doesn't seem to be working, then restart the dev server.
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ There are two ways to add integrations to your project. Let's try the most conve
|
||||||
### `astro add` command
|
### `astro add` command
|
||||||
|
|
||||||
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||||
|
|
||||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||||
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
||||||
|
|
||||||
|
|
@ -41,7 +42,7 @@ npm install lit @webcomponents/template-shadowroot
|
||||||
|
|
||||||
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "lit()"
|
```js ins={2} "lit()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -56,6 +57,7 @@ export default defineConfig({
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
||||||
To use your first Lit component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. This explains:
|
To use your first Lit component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. This explains:
|
||||||
|
|
||||||
- 📦 how framework components are loaded,
|
- 📦 how framework components are loaded,
|
||||||
- 💧 client-side hydration options, and
|
- 💧 client-side hydration options, and
|
||||||
- 🤝 opportunities to mix and nest frameworks together
|
- 🤝 opportunities to mix and nest frameworks together
|
||||||
|
|
@ -64,7 +66,7 @@ However, there's a key difference with Lit _custom elements_ over conventional _
|
||||||
|
|
||||||
Astro needs to know which tag is associated with which component script. We expose this through exporting a `tagName` variable from the component script. It looks like this:
|
Astro needs to know which tag is associated with which component script. We expose this through exporting a `tagName` variable from the component script. It looks like this:
|
||||||
|
|
||||||
__`src/components/my-element.js`__
|
**`src/components/my-element.js`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { LitElement, html } from 'lit';
|
import { LitElement, html } from 'lit';
|
||||||
|
|
@ -80,11 +82,11 @@ export class MyElement extends LitElement {
|
||||||
customElements.define(tagName, MyElement);
|
customElements.define(tagName, MyElement);
|
||||||
```
|
```
|
||||||
|
|
||||||
> Note that exporting the `tagName` is __required__ if you want to use the tag name in your templates. Otherwise you can export and use the constructor, like with non custom element frameworks.
|
> Note that exporting the `tagName` is **required** if you want to use the tag name in your templates. Otherwise you can export and use the constructor, like with non custom element frameworks.
|
||||||
|
|
||||||
In your Astro template import this component as a side-effect and use the element.
|
In your Astro template import this component as a side-effect and use the element.
|
||||||
|
|
||||||
__`src/pages/index.astro`__
|
**`src/pages/index.astro`**
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
---
|
---
|
||||||
|
|
@ -94,11 +96,11 @@ import {MyElement} from '../components/my-element.js';
|
||||||
<MyElement />
|
<MyElement />
|
||||||
```
|
```
|
||||||
|
|
||||||
> Note that Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You *might* run into libraries that work incorrectly because of this.
|
> Note that Lit requires browser globals such as `HTMLElement` and `customElements` to be present. For this reason the Lit renderer shims the server with these globals so Lit can run. You _might_ run into libraries that work incorrectly because of this.
|
||||||
|
|
||||||
### Polyfills & Hydration
|
### Polyfills & Hydration
|
||||||
|
|
||||||
The renderer automatically handles adding appropriate polyfills for support in browsers that don't have Declarative Shadow DOM. The polyfill is about *1.5kB*. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support).
|
The renderer automatically handles adding appropriate polyfills for support in browsers that don't have Declarative Shadow DOM. The polyfill is about _1.5kB_. If the browser does support Declarative Shadow DOM then less than 250 bytes are loaded (to feature detect support).
|
||||||
|
|
||||||
Hydration is also handled automatically. You can use the same hydration directives such as `client:load`, `client:idle` and `client:visible` as you can with other libraries that Astro supports.
|
Hydration is also handled automatically. You can use the same hydration directives such as `client:load`, `client:idle` and `client:visible` as you can with other libraries that Astro supports.
|
||||||
|
|
||||||
|
|
@ -124,7 +126,7 @@ Common issues are listed below:
|
||||||
|
|
||||||
The Lit integration's SSR works by adding a few browser global properties to the global environment. Some of the properties it adds includes `window`, `document`, and `location`.
|
The Lit integration's SSR works by adding a few browser global properties to the global environment. Some of the properties it adds includes `window`, `document`, and `location`.
|
||||||
|
|
||||||
These globals *can* interfere with other libraries that might use the existence of these variables to detect that they are running in the browser, when they are actually running in the server. This can cause bugs with these libraries.
|
These globals _can_ interfere with other libraries that might use the existence of these variables to detect that they are running in the browser, when they are actually running in the server. This can cause bugs with these libraries.
|
||||||
|
|
||||||
Because of this, the Lit integration might not be compatible with these types of libraries. One thing that can help is changing the order of integrations when Lit is interfering with other integrations:
|
Because of this, the Lit integration might not be compatible with these types of libraries. One thing that can help is changing the order of integrations when Lit is interfering with other integrations:
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@ npm install @astrojs/markdoc
|
||||||
|
|
||||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "markdoc()"
|
```js ins={2} "markdoc()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -54,15 +54,16 @@ export default defineConfig({
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
### Editor Integration
|
### Editor Integration
|
||||||
|
|
||||||
[VS Code](https://code.visualstudio.com/) supports Markdown by default. However, for Markdoc editor support, you may wish to add the following setting in your VSCode config. This ensures authoring Markdoc files provides a Markdown-like editor experience.
|
[VS Code](https://code.visualstudio.com/) supports Markdown by default. However, for Markdoc editor support, you may wish to add the following setting in your VSCode config. This ensures authoring Markdoc files provides a Markdown-like editor experience.
|
||||||
|
|
||||||
```json title=".vscode/settings.json"
|
```json title=".vscode/settings.json"
|
||||||
|
{
|
||||||
"files.associations": {
|
"files.associations": {
|
||||||
"*.mdoc": "markdown"
|
"*.mdoc": "markdown"
|
||||||
}
|
}
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
@ -119,10 +120,10 @@ export default defineMarkdocConfig({
|
||||||
// See Markdoc's documentation on defining attributes
|
// See Markdoc's documentation on defining attributes
|
||||||
// https://markdoc.dev/docs/attributes#defining-attributes
|
// https://markdoc.dev/docs/attributes#defining-attributes
|
||||||
type: { type: String },
|
type: { type: String },
|
||||||
}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
},
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
This component can now be used in your Markdoc files with the `{% aside %}` tag. Children will be passed to your component's default slot:
|
This component can now be used in your Markdoc files with the `{% aside %}` tag. Children will be passed to your component's default slot:
|
||||||
|
|
@ -132,7 +133,7 @@ This component can now be used in your Markdoc files with the `{% aside %}` tag.
|
||||||
|
|
||||||
{% aside type="tip" %}
|
{% aside type="tip" %}
|
||||||
|
|
||||||
Use tags like this fancy "aside" to add some *flair* to your docs.
|
Use tags like this fancy "aside" to add some _flair_ to your docs.
|
||||||
|
|
||||||
{% /aside %}
|
{% /aside %}
|
||||||
```
|
```
|
||||||
|
|
@ -155,7 +156,7 @@ export default defineMarkdocConfig({
|
||||||
render: Heading,
|
render: Heading,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
All Markdown headings will render the `Heading.astro` component and pass the following `attributes` as component props:
|
All Markdown headings will render the `Heading.astro` component and pass the following `attributes` as component props:
|
||||||
|
|
@ -192,9 +193,9 @@ export default defineMarkdocConfig({
|
||||||
// Note: Shiki has countless langs built-in, including `.astro`!
|
// Note: Shiki has countless langs built-in, including `.astro`!
|
||||||
// https://github.com/shikijs/shiki/blob/main/docs/languages.md
|
// https://github.com/shikijs/shiki/blob/main/docs/languages.md
|
||||||
langs: [],
|
langs: [],
|
||||||
})
|
}),
|
||||||
],
|
],
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Prism
|
#### Prism
|
||||||
|
|
@ -208,7 +209,7 @@ import prism from '@astrojs/markdoc/prism';
|
||||||
|
|
||||||
export default defineMarkdocConfig({
|
export default defineMarkdocConfig({
|
||||||
extends: [prism()],
|
extends: [prism()],
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
📚 To learn about configuring Prism stylesheets, [see our syntax highlighting guide](https://docs.astro.build/en/guides/markdown-content/#prism-configuration).
|
📚 To learn about configuring Prism stylesheets, [see our syntax highlighting guide](https://docs.astro.build/en/guides/markdown-content/#prism-configuration).
|
||||||
|
|
@ -228,7 +229,7 @@ export default defineMarkdocConfig({
|
||||||
render: null, // default 'article'
|
render: null, // default 'article'
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### Custom Markdoc nodes / elements
|
### Custom Markdoc nodes / elements
|
||||||
|
|
@ -249,7 +250,7 @@ export default defineMarkdocConfig({
|
||||||
render: Quote,
|
render: Quote,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
📚 [Find all of Markdoc's built-in nodes and node attributes on their documentation.](https://markdoc.dev/docs/nodes#built-in-nodes)
|
📚 [Find all of Markdoc's built-in nodes and node attributes on their documentation.](https://markdoc.dev/docs/nodes#built-in-nodes)
|
||||||
|
|
@ -282,10 +283,10 @@ export default defineMarkdocConfig({
|
||||||
render: ClientAside,
|
render: ClientAside,
|
||||||
attributes: {
|
attributes: {
|
||||||
type: { type: String },
|
type: { type: String },
|
||||||
}
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
},
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### Markdoc config
|
### Markdoc config
|
||||||
|
|
@ -307,12 +308,12 @@ export default defineMarkdocConfig({
|
||||||
japan: '🇯🇵',
|
japan: '🇯🇵',
|
||||||
spain: '🇪🇸',
|
spain: '🇪🇸',
|
||||||
france: '🇫🇷',
|
france: '🇫🇷',
|
||||||
}
|
};
|
||||||
return countryToEmojiMap[country] ?? '🏳'
|
return countryToEmojiMap[country] ?? '🏳';
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
Now, you can call this function from any Markdoc content entry:
|
Now, you can call this function from any Markdoc content entry:
|
||||||
|
|
@ -359,8 +360,8 @@ import { defineMarkdocConfig } from '@astrojs/markdoc/config';
|
||||||
export default defineMarkdocConfig({
|
export default defineMarkdocConfig({
|
||||||
variables: {
|
variables: {
|
||||||
environment: process.env.IS_PROD ? 'prod' : 'dev',
|
environment: process.env.IS_PROD ? 'prod' : 'dev',
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### Access frontmatter from your Markdoc content
|
### Access frontmatter from your Markdoc content
|
||||||
|
|
@ -382,7 +383,7 @@ This can now be accessed as `$frontmatter` in your Markdoc.
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
* The [Astro Markdoc starter template](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) shows how to use Markdoc files in your Astro project.
|
- The [Astro Markdoc starter template](https://github.com/withastro/astro/tree/latest/examples/with-markdoc) shows how to use Markdoc files in your Astro project.
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||
|
|
@ -399,13 +400,8 @@ This package is maintained by Astro's Core team. You're welcome to submit an iss
|
||||||
See [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/markdoc/CHANGELOG.md) for a history of changes to this integration.
|
See [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/markdoc/CHANGELOG.md) for a history of changes to this integration.
|
||||||
|
|
||||||
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
|
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
|
||||||
|
|
||||||
[astro-components]: https://docs.astro.build/en/core-concepts/astro-components/
|
[astro-components]: https://docs.astro.build/en/core-concepts/astro-components/
|
||||||
|
|
||||||
[astro-content-collections]: https://docs.astro.build/en/guides/content-collections/
|
[astro-content-collections]: https://docs.astro.build/en/guides/content-collections/
|
||||||
|
|
||||||
[markdoc-tags]: https://markdoc.dev/docs/tags
|
[markdoc-tags]: https://markdoc.dev/docs/tags
|
||||||
|
|
||||||
[markdoc-nodes]: https://markdoc.dev/docs/nodes
|
[markdoc-nodes]: https://markdoc.dev/docs/nodes
|
||||||
|
|
||||||
[markdoc-variables]: https://markdoc.dev/docs/variables
|
[markdoc-variables]: https://markdoc.dev/docs/variables
|
||||||
|
|
|
||||||
|
|
@ -42,7 +42,7 @@ npm install @astrojs/mdx
|
||||||
|
|
||||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "mdx()"
|
```js ins={2} "mdx()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -59,9 +59,11 @@ export default defineConfig({
|
||||||
[VS Code](https://code.visualstudio.com/) supports Markdown by default. However, for MDX editor support, you may wish to add the following setting in your VSCode config. This ensures authoring MDX files provides a Markdown-like editor experience.
|
[VS Code](https://code.visualstudio.com/) supports Markdown by default. However, for MDX editor support, you may wish to add the following setting in your VSCode config. This ensures authoring MDX files provides a Markdown-like editor experience.
|
||||||
|
|
||||||
```json title=".vscode/settings.json"
|
```json title=".vscode/settings.json"
|
||||||
|
{
|
||||||
"files.associations": {
|
"files.associations": {
|
||||||
"*.mdx": "markdown"
|
"*.mdx": "markdown"
|
||||||
}
|
}
|
||||||
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
@ -93,7 +95,7 @@ All [`markdown` configuration options](https://docs.astro.build/en/reference/con
|
||||||
There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
|
There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
|
||||||
:::
|
:::
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -110,9 +112,9 @@ export default defineConfig({
|
||||||
rehypePlugins: [rehypeMinifyHtml],
|
rehypePlugins: [rehypeMinifyHtml],
|
||||||
remarkRehype: { footnoteLabel: 'Footnotes' },
|
remarkRehype: { footnoteLabel: 'Footnotes' },
|
||||||
gfm: false,
|
gfm: false,
|
||||||
})
|
}),
|
||||||
]
|
],
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
:::caution
|
:::caution
|
||||||
|
|
@ -130,7 +132,7 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as
|
||||||
|
|
||||||
For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
|
For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -151,14 +153,14 @@ export default defineConfig({
|
||||||
remarkPlugins: [remarkPlugin2],
|
remarkPlugins: [remarkPlugin2],
|
||||||
// `gfm` overridden to `false`
|
// `gfm` overridden to `false`
|
||||||
gfm: false,
|
gfm: false,
|
||||||
})
|
}),
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
|
You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -173,8 +175,8 @@ export default defineConfig({
|
||||||
// Markdown config now ignored
|
// Markdown config now ignored
|
||||||
extendMarkdownConfig: false,
|
extendMarkdownConfig: false,
|
||||||
// No `remarkPlugins` applied
|
// No `remarkPlugins` applied
|
||||||
})
|
}),
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -192,7 +194,7 @@ This is an optional configuration setting to optimize the MDX output for faster
|
||||||
|
|
||||||
This is disabled by default. To enable MDX optimization, add the following to your MDX integration configuration:
|
This is disabled by default. To enable MDX optimization, add the following to your MDX integration configuration:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -202,8 +204,8 @@ export default defineConfig({
|
||||||
integrations: [
|
integrations: [
|
||||||
mdx({
|
mdx({
|
||||||
optimize: true,
|
optimize: true,
|
||||||
})
|
}),
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -228,7 +230,7 @@ import Heading from '../Heading.astro';
|
||||||
|
|
||||||
To configure optimization for this using the `customComponentNames` property, specify an array of HTML element names that should be treated as custom components:
|
To configure optimization for this using the `customComponentNames` property, specify an array of HTML element names that should be treated as custom components:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -242,8 +244,8 @@ export default defineConfig({
|
||||||
// These will be treated as custom components
|
// These will be treated as custom components
|
||||||
customComponentNames: ['h1'],
|
customComponentNames: ['h1'],
|
||||||
},
|
},
|
||||||
})
|
}),
|
||||||
]
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -251,7 +253,7 @@ Note that if your MDX file [configures custom components using `export const com
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
* The [Astro MDX starter template](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.
|
- The [Astro MDX starter template](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||
|
|
@ -268,5 +270,4 @@ This package is maintained by Astro's Core team. You're welcome to submit an iss
|
||||||
See [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/CHANGELOG.md) for a history of changes to this integration.
|
See [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/CHANGELOG.md) for a history of changes to this integration.
|
||||||
|
|
||||||
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
|
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
|
||||||
|
|
||||||
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components
|
[astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components
|
||||||
|
|
|
||||||
|
|
@ -13,7 +13,6 @@ Learn how to deploy your Astro site in our [Netlify deployment guide](https://do
|
||||||
- <strong>[Contributing](#contributing)</strong>
|
- <strong>[Contributing](#contributing)</strong>
|
||||||
- <strong>[Changelog](#changelog)</strong>
|
- <strong>[Changelog](#changelog)</strong>
|
||||||
|
|
||||||
|
|
||||||
## Why Astro Netlify
|
## Why Astro Netlify
|
||||||
|
|
||||||
If you're using Astro as a static site builder—its behavior out of the box—you don't need an adapter.
|
If you're using Astro as a static site builder—its behavior out of the box—you don't need an adapter.
|
||||||
|
|
@ -22,7 +21,6 @@ If you wish to [use server-side rendering (SSR)](https://docs.astro.build/en/gui
|
||||||
|
|
||||||
[Netlify](https://www.netlify.com/) is a deployment platform that allows you to host your site by connecting directly to your GitHub repository. This adapter enhances the Astro build process to prepare your project for deployment through Netlify.
|
[Netlify](https://www.netlify.com/) is a deployment platform that allows you to host your site by connecting directly to your GitHub repository. This adapter enhances the Astro build process to prepare your project for deployment through Netlify.
|
||||||
|
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
Add the Netlify adapter to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
|
Add the Netlify adapter to enable SSR in your Astro project with the following `astro add` command. This will install the adapter and make the appropriate changes to your `astro.config.mjs` file in one step.
|
||||||
|
|
@ -86,11 +84,11 @@ export default defineConfig({
|
||||||
adapter: netlify(),
|
adapter: netlify(),
|
||||||
|
|
||||||
redirects: {
|
redirects: {
|
||||||
'/blog/old-post': '/blog/new-post'
|
'/blog/old-post': '/blog/new-post',
|
||||||
},
|
},
|
||||||
experimental: {
|
experimental: {
|
||||||
redirects: true
|
redirects: true,
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -113,7 +111,6 @@ netlify deploy --build
|
||||||
|
|
||||||
The [Netlify Blog post on Astro](https://www.netlify.com/blog/how-to-deploy-astro/) and the [Netlify Documentation](https://docs.netlify.com/integrations/frameworks/astro/) provide more information on how to use this integration to deploy to Netlify.
|
The [Netlify Blog post on Astro](https://www.netlify.com/blog/how-to-deploy-astro/) and the [Netlify Documentation](https://docs.netlify.com/integrations/frameworks/astro/) provide more information on how to use this integration to deploy to Netlify.
|
||||||
|
|
||||||
|
|
||||||
## Configuration
|
## Configuration
|
||||||
|
|
||||||
To configure this adapter, pass an object to the `netlify()` function call in `astro.config.mjs` - there's only one possible configuration option:
|
To configure this adapter, pass an object to the `netlify()` function call in `astro.config.mjs` - there's only one possible configuration option:
|
||||||
|
|
@ -130,8 +127,8 @@ import netlify from '@astrojs/netlify/functions';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: netlify({
|
adapter: netlify({
|
||||||
dist: new URL('./dist/', import.meta.url)
|
dist: new URL('./dist/', import.meta.url),
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -154,15 +151,13 @@ import netlify from '@astrojs/netlify/functions';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: netlify({
|
adapter: netlify({
|
||||||
builders: true
|
builders: true,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
On-demand Builders are only available with the `@astrojs/netlify/functions` adapter and are not compatible with Edge Functions.
|
On-demand Builders are only available with the `@astrojs/netlify/functions` adapter and are not compatible with Edge Functions.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
### binaryMediaTypes
|
### binaryMediaTypes
|
||||||
|
|
||||||
> This option is only needed for the Functions adapter and is not needed for Edge Functions.
|
> This option is only needed for the Functions adapter and is not needed for Edge Functions.
|
||||||
|
|
@ -183,8 +178,8 @@ export function get() {
|
||||||
return new Response(buffer, {
|
return new Response(buffer, {
|
||||||
status: 200,
|
status: 200,
|
||||||
headers: {
|
headers: {
|
||||||
'content-type': 'image/jpeg'
|
'content-type': 'image/jpeg',
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
@ -210,4 +205,3 @@ This package is maintained by Astro's Core team. You're welcome to submit an iss
|
||||||
See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.
|
See [CHANGELOG.md](CHANGELOG.md) for a history of changes to this integration.
|
||||||
|
|
||||||
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
|
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,6 @@ This adapter allows Astro to deploy your SSR site to Node targets.
|
||||||
- <strong>[Contributing](#contributing)</strong>
|
- <strong>[Contributing](#contributing)</strong>
|
||||||
- <strong>[Changelog](#changelog)</strong>
|
- <strong>[Changelog](#changelog)</strong>
|
||||||
|
|
||||||
|
|
||||||
## Why @astrojs/node
|
## Why @astrojs/node
|
||||||
|
|
||||||
If you're using Astro as a static site builder—its behavior out of the box—you don't need an adapter.
|
If you're using Astro as a static site builder—its behavior out of the box—you don't need an adapter.
|
||||||
|
|
@ -50,7 +49,7 @@ If you prefer to install the adapter manually instead, complete the following tw
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: node({
|
adapter: node({
|
||||||
mode: 'standalone'
|
mode: 'standalone',
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
@ -64,6 +63,7 @@ If you prefer to install the adapter manually instead, complete the following tw
|
||||||
Controls whether the adapter builds to `middleware` or `standalone` mode.
|
Controls whether the adapter builds to `middleware` or `standalone` mode.
|
||||||
|
|
||||||
- `middleware` mode allows the built output to be used as middleware for another Node.js server, like Express.js or Fastify.
|
- `middleware` mode allows the built output to be used as middleware for another Node.js server, like Express.js or Fastify.
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import node from '@astrojs/node';
|
import node from '@astrojs/node';
|
||||||
|
|
@ -71,10 +71,11 @@ Controls whether the adapter builds to `middleware` or `standalone` mode.
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: node({
|
adapter: node({
|
||||||
mode: 'middleware'
|
mode: 'middleware',
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
- `standalone` mode builds to server that automatically starts with the entry module is run. This allows you to more easily deploy your build to a host without any additional code.
|
- `standalone` mode builds to server that automatically starts with the entry module is run. This allows you to more easily deploy your build to a host without any additional code.
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
@ -94,8 +95,8 @@ import { handler as ssrHandler } from './dist/server/entry.mjs';
|
||||||
const app = express();
|
const app = express();
|
||||||
// Change this based on your astro.config.mjs, `base` option.
|
// Change this based on your astro.config.mjs, `base` option.
|
||||||
// They should match. The default value is "/".
|
// They should match. The default value is "/".
|
||||||
const base = "/";
|
const base = '/';
|
||||||
app.use(base, express.static('dist/client/'))
|
app.use(base, express.static('dist/client/'));
|
||||||
app.use(ssrHandler);
|
app.use(ssrHandler);
|
||||||
|
|
||||||
app.listen(8080);
|
app.listen(8080);
|
||||||
|
|
@ -153,7 +154,6 @@ node ./dist/server/entry.mjs
|
||||||
|
|
||||||
For standalone mode the server handles file servering in addition to the page and API routes.
|
For standalone mode the server handles file servering in addition to the page and API routes.
|
||||||
|
|
||||||
|
|
||||||
#### Custom host and port
|
#### Custom host and port
|
||||||
|
|
||||||
You can override the host and port the standalone server runs on by passing them as environment variables at runtime:
|
You can override the host and port the standalone server runs on by passing them as environment variables at runtime:
|
||||||
|
|
@ -182,16 +182,16 @@ You may see this when running the entry script if it was built with npm or Yarn.
|
||||||
// astro.config.mjs
|
// astro.config.mjs
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
import node from "@astrojs/node";
|
import node from '@astrojs/node';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: "server",
|
output: 'server',
|
||||||
adapter: node(),
|
adapter: node(),
|
||||||
vite: {
|
vite: {
|
||||||
ssr: {
|
ssr: {
|
||||||
noExternal: ["path-to-regexp"]
|
noExternal: ['path-to-regexp'],
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
|
|
||||||
This **[Astro integration][astro-integration]** enables [Partytown](https://partytown.builder.io/) in your Astro project.
|
This **[Astro integration][astro-integration]** enables [Partytown](https://partytown.builder.io/) in your Astro project.
|
||||||
|
|
||||||
|
|
||||||
- <strong>[Why Astro Partytown](#why-astro-partytown)</strong>
|
- <strong>[Why Astro Partytown](#why-astro-partytown)</strong>
|
||||||
- <strong>[Installation](#installation)</strong>
|
- <strong>[Installation](#installation)</strong>
|
||||||
- <strong>[Usage](#usage)</strong>
|
- <strong>[Usage](#usage)</strong>
|
||||||
|
|
@ -40,12 +39,14 @@ If you run into any issues, [feel free to report them to us on GitHub](https://g
|
||||||
### Manual Install
|
### 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:
|
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
|
```sh
|
||||||
npm install @astrojs/partytown
|
npm install @astrojs/partytown
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -54,10 +55,9 @@ import partytown from '@astrojs/partytown';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
// ...
|
// ...
|
||||||
integrations: [partytown()],
|
integrations: [partytown()],
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
Partytown should be ready to go with zero config. If you have an existing 3rd party script on your site, try adding the `type="text/partytown"` attribute:
|
Partytown should be ready to go with zero config. If you have an existing 3rd party script on your site, try adding the `type="text/partytown"` attribute:
|
||||||
|
|
@ -73,15 +73,18 @@ If you open the "Network" tab from [your browser's dev tools](https://developer.
|
||||||
|
|
||||||
To configure this integration, pass a 'config' object to the `partytown()` function call in `astro.config.mjs`.
|
To configure this integration, pass a 'config' object to the `partytown()` function call in `astro.config.mjs`.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
...
|
// ...
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [partytown({
|
integrations: [
|
||||||
|
partytown({
|
||||||
config: {
|
config: {
|
||||||
//options go here
|
//options go here
|
||||||
}
|
},
|
||||||
})]
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -93,15 +96,17 @@ Partytown ships with a `debug` mode; enable or disable it by passing `true` or `
|
||||||
|
|
||||||
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`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [partytown({
|
integrations: [
|
||||||
|
partytown({
|
||||||
// Example: Disable debug mode.
|
// Example: Disable debug mode.
|
||||||
config: { debug: false },
|
config: { debug: false },
|
||||||
})]
|
}),
|
||||||
})
|
],
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### config.forward
|
### config.forward
|
||||||
|
|
@ -112,18 +117,19 @@ export default defineConfig({
|
||||||
|
|
||||||
You can specify which variables to forward with the `config.forward` option. [Read more in Partytown's documentation.](https://partytown.builder.io/forwarding-events)
|
You can specify which variables to forward with the `config.forward` option. [Read more in Partytown's documentation.](https://partytown.builder.io/forwarding-events)
|
||||||
|
|
||||||
|
**`astro.config.mjs`**
|
||||||
__`astro.config.mjs`__
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [partytown({
|
integrations: [
|
||||||
|
partytown({
|
||||||
// Example: Add dataLayer.push as a forwarding-event.
|
// Example: Add dataLayer.push as a forwarding-event.
|
||||||
config: {
|
config: {
|
||||||
forward: ["dataLayer.push"]
|
forward: ['dataLayer.push'],
|
||||||
},
|
},
|
||||||
})],
|
}),
|
||||||
})
|
],
|
||||||
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@ npm install preact
|
||||||
|
|
||||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "preact()"
|
```js ins={2} "preact()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -68,6 +68,7 @@ export default defineConfig({
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
To use your first Preact component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
To use your first Preact component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
||||||
|
|
||||||
- 📦 how framework components are loaded,
|
- 📦 how framework components are loaded,
|
||||||
- 💧 client-side hydration options, and
|
- 💧 client-side hydration options, and
|
||||||
- 🤝 opportunities to mix and nest frameworks together
|
- 🤝 opportunities to mix and nest frameworks together
|
||||||
|
|
@ -86,16 +87,14 @@ You can enable `preact/compat`, Preact’s compatibility layer for rendering Rea
|
||||||
|
|
||||||
To do so, pass an object to the Preact integration and set `compat: true`.
|
To do so, pass an object to the Preact integration and set `compat: true`.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js "compat: true"
|
```js "compat: true"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import preact from '@astrojs/preact';
|
import preact from '@astrojs/preact';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [
|
integrations: [preact({ compat: true })],
|
||||||
preact({ compat: true })
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -103,7 +102,7 @@ With the `compat` option enabled, the Preact integration will render React compo
|
||||||
|
|
||||||
When importing React component libraries, in order to swap out the `react` and `react-dom` dependencies as `preact/compat`, you can use [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) to do so.
|
When importing React component libraries, in order to swap out the `react` and `react-dom` dependencies as `preact/compat`, you can use [`overrides`](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#overrides) to do so.
|
||||||
|
|
||||||
```js
|
```json
|
||||||
// package.json
|
// package.json
|
||||||
{
|
{
|
||||||
"overrides": {
|
"overrides": {
|
||||||
|
|
@ -118,7 +117,6 @@ Check out the [`pnpm` overrides](https://pnpm.io/package_json#pnpmoverrides) and
|
||||||
> **Note**
|
> **Note**
|
||||||
> Currently, the `compat` option only works for React libraries that export code as ESM. If an error happens during build-time, try adding the library to `vite.ssr.noExternal: ['the-react-library']` in your `astro.config.mjs` file.
|
> Currently, the `compat` option only works for React libraries that export code as ESM. If an error happens during build-time, try adding the library to `vite.ssr.noExternal: ['the-react-library']` in your `astro.config.mjs` file.
|
||||||
|
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
- The [Astro Preact example](https://github.com/withastro/astro/tree/latest/examples/framework-preact) shows how to use an interactive Preact component in an Astro project.
|
- The [Astro Preact example](https://github.com/withastro/astro/tree/latest/examples/framework-preact) shows how to use an interactive Preact component in an Astro project.
|
||||||
|
|
|
||||||
|
|
@ -34,12 +34,14 @@ If you run into any issues, [feel free to report them to us on GitHub](https://g
|
||||||
### Manual Install
|
### 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:
|
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
|
```sh
|
||||||
npm install @astrojs/prefetch
|
npm install @astrojs/prefetch
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "prefetch()"
|
```js ins={2} "prefetch()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -51,7 +53,6 @@ export default defineConfig({
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
When you install the integration, the prefetch script is automatically added to every page in the project. Just add `rel="prefetch"` to any `<a />` links on your page and you're ready to go!
|
When you install the integration, the prefetch script is automatically added to every page in the project. Just add `rel="prefetch"` to any `<a />` links on your page and you're ready to go!
|
||||||
|
|
@ -64,7 +65,7 @@ The Astro Prefetch integration handles which links on the site are prefetched an
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -72,17 +73,20 @@ import prefetch from '@astrojs/prefetch';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
// ...
|
// ...
|
||||||
integrations: [prefetch({
|
integrations: [
|
||||||
|
prefetch({
|
||||||
// Only prefetch links with an href that begins with `/products`
|
// Only prefetch links with an href that begins with `/products`
|
||||||
selector: "a[href^='/products']"
|
selector: "a[href^='/products']",
|
||||||
})],
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### config.throttle
|
### 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.
|
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.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -90,14 +94,17 @@ import prefetch from '@astrojs/prefetch';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
// ...
|
// ...
|
||||||
integrations: [prefetch({
|
integrations: [
|
||||||
|
prefetch({
|
||||||
// Allow up to three links to be prefetched concurrently
|
// Allow up to three links to be prefetched concurrently
|
||||||
throttle: 3
|
throttle: 3,
|
||||||
})],
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
## Troubleshooting
|
## Troubleshooting
|
||||||
|
|
||||||
- If your installation doesn't seem to be working, try restarting the dev server.
|
- If your installation doesn't seem to be working, try restarting the dev server.
|
||||||
- If a link doesn't seem to be prefetching, make sure that the link is pointing to a page on the same domain and matches the integration's `selector` option.
|
- If a link doesn't seem to be prefetching, make sure that the link is pointing to a page on the same domain and matches the integration's `selector` option.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ There are two ways to add integrations to your project. Let's try the most conve
|
||||||
### `astro add` command
|
### `astro add` command
|
||||||
|
|
||||||
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||||
|
|
||||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||||
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
||||||
|
|
||||||
|
|
@ -41,7 +42,7 @@ npm install react react-dom
|
||||||
|
|
||||||
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "react()"
|
```js ins={2} "react()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -56,6 +57,7 @@ export default defineConfig({
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
||||||
To use your first React component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
To use your first React component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
||||||
|
|
||||||
- 📦 how framework components are loaded,
|
- 📦 how framework components are loaded,
|
||||||
- 💧 client-side hydration options, and
|
- 💧 client-side hydration options, and
|
||||||
- 🤝 opportunities to mix and nest frameworks together
|
- 🤝 opportunities to mix and nest frameworks together
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,6 @@
|
||||||
|
|
||||||
This **[Astro integration][astro-integration]** generates a sitemap based on your routes when you build your Astro project.
|
This **[Astro integration][astro-integration]** generates a sitemap based on your routes when you build your Astro project.
|
||||||
|
|
||||||
|
|
||||||
- <strong>[Why Astro Sitemap](#why-astro-sitemap)</strong>
|
- <strong>[Why Astro Sitemap](#why-astro-sitemap)</strong>
|
||||||
- <strong>[Installation](#installation)</strong>
|
- <strong>[Installation](#installation)</strong>
|
||||||
- <strong>[Usage](#usage)</strong>
|
- <strong>[Usage](#usage)</strong>
|
||||||
|
|
@ -40,12 +39,14 @@ If you run into any issues, [feel free to report them to us on GitHub](https://g
|
||||||
### Manual Install
|
### 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:
|
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
|
```sh
|
||||||
npm install @astrojs/sitemap
|
npm install @astrojs/sitemap
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "sitemap()"
|
```js ins={2} "sitemap()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -54,15 +55,14 @@ import sitemap from '@astrojs/sitemap';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
// ...
|
// ...
|
||||||
integrations: [sitemap()],
|
integrations: [sitemap()],
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
`@astrojs/sitemap` requires a deployment / site URL for generation. Add your site's URL under your `astro.config.*` using the `site` property. This must begin with `http:` or `https:`.
|
`@astrojs/sitemap` requires a deployment / site URL for generation. Add your site's URL under your `astro.config.*` using the `site` property. This must begin with `http:` or `https:`.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -72,7 +72,7 @@ export default defineConfig({
|
||||||
// ...
|
// ...
|
||||||
site: 'https://stargazers.club',
|
site: 'https://stargazers.club',
|
||||||
integrations: [sitemap()],
|
integrations: [sitemap()],
|
||||||
})
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
Note that unlike other configuration options, `site` is set in the root `defineConfig` object, rather than inside the `sitemap()` call.
|
Note that unlike other configuration options, `site` is set in the root `defineConfig` object, rather than inside the `sitemap()` call.
|
||||||
|
|
@ -87,11 +87,11 @@ After verifying that the sitemaps are built, you can add them to your site's `<h
|
||||||
```html ins={3}
|
```html ins={3}
|
||||||
// src/layouts/Layout.astro
|
// src/layouts/Layout.astro
|
||||||
<head>
|
<head>
|
||||||
<link rel="sitemap" href="/sitemap-index.xml">
|
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||||
</head>
|
</head>
|
||||||
```
|
```
|
||||||
|
|
||||||
```yaml ins={4} title="public/robots.txt"
|
```txt ins={4} title="public/robots.txt"
|
||||||
User-agent: *
|
User-agent: *
|
||||||
Allow: /
|
Allow: /
|
||||||
|
|
||||||
|
|
@ -129,16 +129,18 @@ Sitemap: https://<YOUR SITE>/sitemap-index.xml
|
||||||
|
|
||||||
To configure this integration, pass an object to the `sitemap()` function call in `astro.config.mjs`.
|
To configure this integration, pass an object to the `sitemap()` function call in `astro.config.mjs`.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import sitemap from '@astrojs/sitemap';
|
import sitemap from '@astrojs/sitemap';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [sitemap({
|
integrations: [
|
||||||
filter: ...
|
sitemap({
|
||||||
})]
|
// configuration options
|
||||||
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -146,49 +148,50 @@ export default defineConfig({
|
||||||
|
|
||||||
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`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
...
|
// ...
|
||||||
sitemap({
|
sitemap({
|
||||||
filter: (page) => page !== 'https://stargazers.club/secret-vip-lounge'
|
filter: (page) => page !== 'https://stargazers.club/secret-vip-lounge',
|
||||||
}),
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
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.
|
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.
|
||||||
|
|
||||||
To filter multiple pages, add arguments with target URLs.
|
To filter multiple pages, add arguments with target URLs.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
...
|
// ...
|
||||||
sitemap({
|
sitemap({
|
||||||
filter: (page) =>
|
filter: (page) =>
|
||||||
page !== "https://stargazers.club/secret-vip-lounge-1" &&
|
page !== 'https://stargazers.club/secret-vip-lounge-1' &&
|
||||||
page !== "https://stargazers.club/secret-vip-lounge-2" &&
|
page !== 'https://stargazers.club/secret-vip-lounge-2' &&
|
||||||
page !== "https://stargazers.club/secret-vip-lounge-3" &&
|
page !== 'https://stargazers.club/secret-vip-lounge-3' &&
|
||||||
page !== "https://stargazers.club/secret-vip-lounge-4",
|
page !== 'https://stargazers.club/secret-vip-lounge-4',
|
||||||
}),
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### customPages
|
### 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`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
...
|
// ...
|
||||||
sitemap({
|
sitemap({
|
||||||
customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2']
|
customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2'],
|
||||||
}),
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
### entryLimit
|
### 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).
|
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).
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -213,7 +216,7 @@ Note that `changefreq` and `priority` are ignored by Google.
|
||||||
> **Note**
|
> **Note**
|
||||||
> Due to limitations of Astro's [Integration API](https://docs.astro.build/en/reference/integrations-reference/), this integration can't analyze a given page's source code. This configuration option can set `changefreq`, `lastmod` and `priority` on a _site-wide_ basis; see the next option **serialize** for how you can set these values on a per-page basis.
|
> Due to limitations of Astro's [Integration API](https://docs.astro.build/en/reference/integrations-reference/), this integration can't analyze a given page's source code. This configuration option can set `changefreq`, `lastmod` and `priority` on a _site-wide_ basis; see the next option **serialize** for how you can set these values on a per-page basis.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -236,6 +239,7 @@ export default defineConfig({
|
||||||
A function called for each sitemap entry just before writing to a disk. This function can be asynchronous.
|
A function called for each sitemap entry just before writing to a disk. This function can be asynchronous.
|
||||||
|
|
||||||
It receives as its parameter a `SitemapItem` object that can have these properties:
|
It receives as its parameter a `SitemapItem` object that can have these properties:
|
||||||
|
|
||||||
- `url` (absolute page URL). This is the only property that is guaranteed to be on `SitemapItem`.
|
- `url` (absolute page URL). This is the only property that is guaranteed to be on `SitemapItem`.
|
||||||
- `changefreq`
|
- `changefreq`
|
||||||
- `lastmod` (ISO formatted date, `String` type)
|
- `lastmod` (ISO formatted date, `String` type)
|
||||||
|
|
@ -250,7 +254,7 @@ The `serialize` function should return `SitemapItem`, touched or not.
|
||||||
|
|
||||||
The example below shows the ability to add sitemap specific properties individually.
|
The example below shows the ability to add sitemap specific properties individually.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -289,7 +293,7 @@ This object has two required properties:
|
||||||
|
|
||||||
[Read more about localization](https://developers.google.com/search/docs/advanced/crawling/localized-versions#all-method-guidelines).
|
[Read more about localization](https://developers.google.com/search/docs/advanced/crawling/localized-versions#all-method-guidelines).
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -344,6 +348,7 @@ The resulting sitemap looks like this:
|
||||||
```
|
```
|
||||||
|
|
||||||
## Examples
|
## Examples
|
||||||
|
|
||||||
- The official Astro website uses Astro Sitemap to generate [its sitemap](https://astro.build/sitemap-index.xml).
|
- 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!
|
- 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!
|
||||||
- [Browse projects with Astro Sitemap on GitHub](https://github.com/search?q=%22@astrojs/sitemap%22+filename:package.json&type=Code) for more examples!
|
- [Browse projects with Astro Sitemap on GitHub](https://github.com/search?q=%22@astrojs/sitemap%22+filename:package.json&type=Code) for more examples!
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ There are two ways to add integrations to your project. Let's try the most conve
|
||||||
### `astro add` command
|
### `astro add` command
|
||||||
|
|
||||||
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||||
|
|
||||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||||
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
||||||
|
|
||||||
|
|
@ -41,7 +42,7 @@ npm install solid-js
|
||||||
|
|
||||||
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "solid()"
|
```js ins={2} "solid()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -56,6 +57,7 @@ export default defineConfig({
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
||||||
To use your first SolidJS component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
To use your first SolidJS component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
||||||
|
|
||||||
- 📦 how framework components are loaded,
|
- 📦 how framework components are loaded,
|
||||||
- 💧 client-side hydration options, and
|
- 💧 client-side hydration options, and
|
||||||
- 🤝 opportunities to mix and nest frameworks together
|
- 🤝 opportunities to mix and nest frameworks together
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ There are two ways to add integrations to your project. Let's try the most conve
|
||||||
### `astro add` command
|
### `astro add` command
|
||||||
|
|
||||||
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||||
|
|
||||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||||
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
||||||
|
|
||||||
|
|
@ -41,7 +42,7 @@ npm install svelte
|
||||||
|
|
||||||
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "svelte()"
|
```js ins={2} "svelte()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -56,6 +57,7 @@ export default defineConfig({
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
||||||
To use your first Svelte component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
To use your first Svelte component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
||||||
|
|
||||||
- 📦 how framework components are loaded,
|
- 📦 how framework components are loaded,
|
||||||
- 💧 client-side hydration options, and
|
- 💧 client-side hydration options, and
|
||||||
- 🤝 opportunities to mix and nest frameworks together
|
- 🤝 opportunities to mix and nest frameworks together
|
||||||
|
|
@ -85,7 +87,7 @@ This integration passes the following default options to the Svelte compiler:
|
||||||
const defaultOptions = {
|
const defaultOptions = {
|
||||||
emitCss: true,
|
emitCss: true,
|
||||||
compilerOptions: { dev: isDev, hydratable: true },
|
compilerOptions: { dev: isDev, hydratable: true },
|
||||||
preprocess: vitePreprocess()
|
preprocess: vitePreprocess(),
|
||||||
};
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -95,7 +97,7 @@ Providing your own `preprocess` options **will** override the [`vitePreprocess()
|
||||||
|
|
||||||
You can set options either by passing them to the `svelte` integration in `astro.config.mjs` or in `svelte.config.js`. Either of these would override the default `preprocess` setting:
|
You can set options either by passing them to the `svelte` integration in `astro.config.mjs` or in `svelte.config.js`. Either of these would override the default `preprocess` setting:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -106,7 +108,7 @@ export default defineConfig({
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
__`svelte.config.js`__
|
**`svelte.config.js`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -120,7 +122,7 @@ export default {
|
||||||
|
|
||||||
If you're using a preprocessor like TypeScript or SCSS in your Svelte files, you can create a `svelte.config.js` file so that the Svelte IDE extension can correctly parse the Svelte files.
|
If you're using a preprocessor like TypeScript or SCSS in your Svelte files, you can create a `svelte.config.js` file so that the Svelte IDE extension can correctly parse the Svelte files.
|
||||||
|
|
||||||
__`svelte.config.js`__
|
**`svelte.config.js`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { vitePreprocess } from '@astrojs/svelte';
|
import { vitePreprocess } from '@astrojs/svelte';
|
||||||
|
|
|
||||||
|
|
@ -23,10 +23,8 @@ Note: it's generally discouraged to use both Tailwind and another styling method
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
|
|
||||||
https://user-images.githubusercontent.com/4033662/197398760-8fd30eff-4d13-449d-a598-00a6a1ac4644.mp4
|
https://user-images.githubusercontent.com/4033662/197398760-8fd30eff-4d13-449d-a598-00a6a1ac4644.mp4
|
||||||
|
|
||||||
|
|
||||||
### Quick Install
|
### 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.
|
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.
|
||||||
|
|
@ -45,12 +43,14 @@ If you run into any issues, [feel free to report them to us on GitHub](https://g
|
||||||
### Manual Install
|
### Manual Install
|
||||||
|
|
||||||
First, install the `@astrojs/tailwind` and `tailwindcss` packages using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
First, install the `@astrojs/tailwind` and `tailwindcss` packages using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install @astrojs/tailwind tailwindcss
|
npm install @astrojs/tailwind tailwindcss
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "tailwind()"
|
```js ins={2} "tailwind()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -62,8 +62,6 @@ export default defineConfig({
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
When you install the integration, Tailwind's utility classes should be ready to go right away. Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn how to use Tailwind, and if you see a utility class you want to try, add it to any HTML element to your project!
|
When you install the integration, Tailwind's utility classes should be ready to go right away. Head to the [Tailwind docs](https://tailwindcss.com/docs/utility-first) to learn how to use Tailwind, and if you see a utility class you want to try, add it to any HTML element to your project!
|
||||||
|
|
@ -93,17 +91,19 @@ If you want to use a different Tailwind configuration file instead of the defaul
|
||||||
> **Warning**
|
> **Warning**
|
||||||
> Changing this isn't recommended since it can cause problems with other tools that integrate with Tailwind, like the official Tailwind VSCode extension.
|
> Changing this isn't recommended since it can cause problems with other tools that integrate with Tailwind, like the official Tailwind VSCode extension.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import tailwind from '@astrojs/tailwind';
|
import tailwind from '@astrojs/tailwind';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [tailwind({
|
integrations: [
|
||||||
|
tailwind({
|
||||||
// Example: Provide a custom path to a Tailwind config file
|
// Example: Provide a custom path to a Tailwind config file
|
||||||
configFile: './custom-config.cjs',
|
configFile: './custom-config.cjs',
|
||||||
})],
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -122,17 +122,19 @@ By default, the integration imports a basic `base.css` file on every page of you
|
||||||
|
|
||||||
To disable this default behavior, set `applyBaseStyles` to `false`. This can be useful if you need to define your own `base.css` file (to include a [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer), for example). This can also be useful if you do not want `base.css` to be imported on every page of your project.
|
To disable this default behavior, set `applyBaseStyles` to `false`. This can be useful if you need to define your own `base.css` file (to include a [`@layer` directive](https://tailwindcss.com/docs/functions-and-directives#layer), for example). This can also be useful if you do not want `base.css` to be imported on every page of your project.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [tailwind({
|
integrations: [
|
||||||
|
tailwind({
|
||||||
// Example: Disable injecting a basic `base.css` import on every page.
|
// Example: Disable injecting a basic `base.css` import on every page.
|
||||||
// Useful if you need to define and/or import your own custom `base.css`.
|
// Useful if you need to define and/or import your own custom `base.css`.
|
||||||
applyBaseStyles: false,
|
applyBaseStyles: false,
|
||||||
})],
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -157,7 +159,6 @@ error The `text-special` class does not exist. If `text-special` is a custom c
|
||||||
|
|
||||||
[Instead of using `@layer` directives in a global stylesheet](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css), define your custom styles by adding a plugin to your Tailwind config to fix it:
|
[Instead of using `@layer` directives in a global stylesheet](https://tailwindcss.com/docs/functions-and-directives#using-apply-with-per-component-css), define your custom styles by adding a plugin to your Tailwind config to fix it:
|
||||||
|
|
||||||
|
|
||||||
```js
|
```js
|
||||||
// tailwind.config.cjs
|
// tailwind.config.cjs
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
|
@ -167,12 +168,12 @@ module.exports = {
|
||||||
addComponents({
|
addComponents({
|
||||||
'.btn': {
|
'.btn': {
|
||||||
padding: theme('spacing.4'),
|
padding: theme('spacing.4'),
|
||||||
margin: 'auto'
|
margin: 'auto',
|
||||||
}
|
},
|
||||||
})
|
});
|
||||||
}
|
},
|
||||||
]
|
],
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### Class-based modifiers do not work with `@apply` directives
|
### Class-based modifiers do not work with `@apply` directives
|
||||||
|
|
|
||||||
|
|
@ -19,6 +19,7 @@ There are two ways to add integrations to your project. Let's try the most conve
|
||||||
### (experimental) `astro add` command
|
### (experimental) `astro add` command
|
||||||
|
|
||||||
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||||
|
|
||||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||||
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
||||||
|
|
||||||
|
|
@ -45,7 +46,7 @@ npm install @astrojs/turbolinks
|
||||||
|
|
||||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
|
||||||
|
|
@ -103,8 +103,8 @@ import vercel from '@astrojs/vercel/serverless';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: vercel({
|
adapter: vercel({
|
||||||
analytics: true
|
analytics: true,
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -125,9 +125,9 @@ export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: vercel({
|
adapter: vercel({
|
||||||
imagesConfig: {
|
imagesConfig: {
|
||||||
sizes: [320, 640, 1280]
|
sizes: [320, 640, 1280],
|
||||||
}
|
},
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -147,22 +147,29 @@ import vercel from '@astrojs/vercel/static';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: vercel({
|
adapter: vercel({
|
||||||
imageService: true
|
imageService: true,
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
---
|
---
|
||||||
import { Image } from "astro:assets";
|
import { Image } from 'astro:assets';
|
||||||
import astroLogo from "../assets/logo.png";
|
import astroLogo from '../assets/logo.png';
|
||||||
---
|
---
|
||||||
|
|
||||||
<!-- This component -->
|
<!-- This component -->
|
||||||
<Image src={astroLogo} alt="My super logo!" />
|
<Image src={astroLogo} alt="My super logo!" />
|
||||||
|
|
||||||
<!-- will become the following HTML -->
|
<!-- will become the following HTML -->
|
||||||
<img src="/_vercel/image?url=_astro/logo.hash.png&w=...&q=..." alt="My super logo!" loading="lazy" decoding="async" width="..." height="..." />
|
<img
|
||||||
|
src="/_vercel/image?url=_astro/logo.hash.png&w=...&q=..."
|
||||||
|
alt="My super logo!"
|
||||||
|
loading="lazy"
|
||||||
|
decoding="async"
|
||||||
|
width="..."
|
||||||
|
height="..."
|
||||||
|
/>
|
||||||
```
|
```
|
||||||
|
|
||||||
### includeFiles
|
### includeFiles
|
||||||
|
|
@ -180,8 +187,8 @@ import vercel from '@astrojs/vercel/serverless';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: vercel({
|
adapter: vercel({
|
||||||
includeFiles: ['./my-data.json']
|
includeFiles: ['./my-data.json'],
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -203,8 +210,8 @@ import vercel from '@astrojs/vercel/serverless';
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
output: 'server',
|
output: 'server',
|
||||||
adapter: vercel({
|
adapter: vercel({
|
||||||
excludeFiles: ['./src/some_big_file.jpg']
|
excludeFiles: ['./src/some_big_file.jpg'],
|
||||||
})
|
}),
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -224,14 +231,16 @@ You can use Vercel middleware to intercept a request and redirect before sending
|
||||||
export default function middleware(request) {
|
export default function middleware(request) {
|
||||||
const url = new URL(request.url);
|
const url = new URL(request.url);
|
||||||
// You can retrieve IP location or cookies here.
|
// You can retrieve IP location or cookies here.
|
||||||
if (url.pathname === "/admin") {
|
if (url.pathname === '/admin') {
|
||||||
url.pathname = "/"
|
url.pathname = '/';
|
||||||
}
|
}
|
||||||
return Response.redirect(url);
|
return Response.redirect(url);
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
1. While developing locally, you can run `vercel dev` to run middleware. In production, Vercel will handle this for you.
|
1. While developing locally, you can run `vercel dev` to run middleware. In production, Vercel will handle this for you.
|
||||||
|
|
||||||
|
<!-- prettier-ignore -->
|
||||||
> **Warning**
|
> **Warning**
|
||||||
> **Trying to rewrite?** Currently rewriting a request with middleware only works for static files.
|
> **Trying to rewrite?** Currently rewriting a request with middleware only works for static files.
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -9,6 +9,7 @@ There are two ways to add integrations to your project. Let's try the most conve
|
||||||
### `astro add` command
|
### `astro add` command
|
||||||
|
|
||||||
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||||
|
|
||||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||||
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
||||||
|
|
||||||
|
|
@ -41,7 +42,7 @@ npm install vue
|
||||||
|
|
||||||
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js ins={2} "vue()"
|
```js ins={2} "vue()"
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -56,6 +57,7 @@ export default defineConfig({
|
||||||
## Getting started
|
## Getting started
|
||||||
|
|
||||||
To use your first Vue component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
To use your first Vue component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
|
||||||
|
|
||||||
- 📦 how framework components are loaded,
|
- 📦 how framework components are loaded,
|
||||||
- 💧 client-side hydration options, and
|
- 💧 client-side hydration options, and
|
||||||
- 🤝 opportunities to mix and nest frameworks together
|
- 🤝 opportunities to mix and nest frameworks together
|
||||||
|
|
@ -77,7 +79,7 @@ This package is maintained by Astro's Core team. You're welcome to submit an iss
|
||||||
|
|
||||||
This integration is powered by `@vitejs/plugin-vue`. To customize the Vue compiler, options can be provided to the integration. See the `@vitejs/plugin-vue` [docs](https://www.npmjs.com/package/@vitejs/plugin-vue) for more details.
|
This integration is powered by `@vitejs/plugin-vue`. To customize the Vue compiler, options can be provided to the integration. See the `@vitejs/plugin-vue` [docs](https://www.npmjs.com/package/@vitejs/plugin-vue) for more details.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -85,15 +87,17 @@ import vue from '@astrojs/vue';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
// ...
|
// ...
|
||||||
integrations: [vue({
|
integrations: [
|
||||||
|
vue({
|
||||||
template: {
|
template: {
|
||||||
compilerOptions: {
|
compilerOptions: {
|
||||||
// treat any tag that starts with ion- as custom elements
|
// treat any tag that starts with ion- as custom elements
|
||||||
isCustomElement: tag => tag.startsWith('ion-')
|
isCustomElement: (tag) => tag.startsWith('ion-'),
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
// ...
|
// ...
|
||||||
})],
|
}),
|
||||||
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
@ -103,20 +107,18 @@ You can extend the Vue `app` instance setting the `appEntrypoint` option to a ro
|
||||||
|
|
||||||
The default export of this file should be a function that accepts a Vue `App` instance prior to rendering, allowing the use of [custom Vue plugins](https://vuejs.org/guide/reusability/plugins.html), `app.use`, and other customizations for advanced use cases.
|
The default export of this file should be a function that accepts a Vue `App` instance prior to rendering, allowing the use of [custom Vue plugins](https://vuejs.org/guide/reusability/plugins.html), `app.use`, and other customizations for advanced use cases.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import vue from '@astrojs/vue';
|
import vue from '@astrojs/vue';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [
|
integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
|
||||||
vue({ appEntrypoint: '/src/pages/_app' })
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
__`src/pages/_app.ts`__
|
**`src/pages/_app.ts`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import type { App } from 'vue';
|
import type { App } from 'vue';
|
||||||
|
|
@ -124,29 +126,27 @@ import i18nPlugin from 'my-vue-i18n-plugin';
|
||||||
|
|
||||||
export default (app: App) => {
|
export default (app: App) => {
|
||||||
app.use(i18nPlugin);
|
app.use(i18nPlugin);
|
||||||
}
|
};
|
||||||
```
|
```
|
||||||
|
|
||||||
### jsx
|
### jsx
|
||||||
|
|
||||||
You can use Vue JSX by setting `jsx: true`.
|
You can use Vue JSX by setting `jsx: true`.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import vue from '@astrojs/vue';
|
import vue from '@astrojs/vue';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [
|
integrations: [vue({ jsx: true })],
|
||||||
vue({ jsx: true })
|
|
||||||
],
|
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
This will enable rendering for both Vue and Vue JSX components. To customize the Vue JSX compiler, pass an options object instead of a boolean. See the `@vitejs/plugin-vue-jsx` [docs](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx) for more details.
|
This will enable rendering for both Vue and Vue JSX components. To customize the Vue JSX compiler, pass an options object instead of a boolean. See the `@vitejs/plugin-vue-jsx` [docs](https://www.npmjs.com/package/@vitejs/plugin-vue-jsx) for more details.
|
||||||
|
|
||||||
__`astro.config.mjs`__
|
**`astro.config.mjs`**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
|
|
@ -157,9 +157,9 @@ export default defineConfig({
|
||||||
vue({
|
vue({
|
||||||
jsx: {
|
jsx: {
|
||||||
// treat any tag that starts with ion- as custom elements
|
// treat any tag that starts with ion- as custom elements
|
||||||
isCustomElement: tag => tag.startsWith('ion-')
|
isCustomElement: (tag) => tag.startsWith('ion-'),
|
||||||
}
|
},
|
||||||
})
|
}),
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
|
||||||
|
|
@ -2,16 +2,15 @@
|
||||||
|
|
||||||
This package brings legacy support for the `<Markdown />` component to all Astro projects.
|
This package brings legacy support for the `<Markdown />` component to all Astro projects.
|
||||||
|
|
||||||
|
> **Warning**
|
||||||
> The `<Markdown />` component does not work in SSR. Consider [importing Markdown content](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) instead.
|
> The `<Markdown />` component does not work in SSR. Consider [importing Markdown content](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) instead.
|
||||||
:::
|
|
||||||
|
|
||||||
```astro
|
```astro
|
||||||
---
|
---
|
||||||
import Markdown from '@astrojs/markdown-component';
|
import Markdown from '@astrojs/markdown-component';
|
||||||
---
|
---
|
||||||
<Markdown>
|
|
||||||
# Markdown syntax is now supported! **Yay!**
|
<Markdown># Markdown syntax is now supported! **Yay!**</Markdown>
|
||||||
</Markdown>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
See our [Markdown Guide](https://docs.astro.build/en/guides/markdown-content/) for more info.
|
See our [Markdown Guide](https://docs.astro.build/en/guides/markdown-content/) for more info.
|
||||||
|
|
|
||||||
|
|
@ -137,7 +137,7 @@ polyfill(globalThis, {
|
||||||
```
|
```
|
||||||
|
|
||||||
| Shorthand | Excludes |
|
| Shorthand | Excludes |
|
||||||
|:-------------- |:-------- |
|
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||||
| `Document+` | `Document`, `HTMLDocument` |
|
| `Document+` | `Document`, `HTMLDocument` |
|
||||||
| `Element+` | `Element`, and exclusions from `HTMLElement+` |
|
| `Element+` | `Element`, and exclusions from `HTMLElement+` |
|
||||||
| `Event+` | `Event`, `CustomEvent`, `EventTarget`, `MediaQueryList`, `Window`, and exclusions from `Node+` |
|
| `Event+` | `Event`, `CustomEvent`, `EventTarget`, `MediaQueryList`, `Window`, and exclusions from `Node+` |
|
||||||
|
|
@ -148,8 +148,6 @@ polyfill(globalThis, {
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## License & Attribution
|
## License & Attribution
|
||||||
|
|
||||||
Thank you to Jon Neal for his work on the original [webapi](https://github.com/astro-community/webapi) project that this package is forked from. Licensed under the CC0-1.0 License.
|
Thank you to Jon Neal for his work on the original [webapi](https://github.com/astro-community/webapi) project that this package is forked from. Licensed under the CC0-1.0 License.
|
||||||
|
|
|
||||||
|
|
@ -60,8 +60,8 @@ importers:
|
||||||
specifier: ^2.8.8
|
specifier: ^2.8.8
|
||||||
version: 2.8.8
|
version: 2.8.8
|
||||||
prettier-plugin-astro:
|
prettier-plugin-astro:
|
||||||
specifier: ^0.8.1
|
specifier: ^0.10.0
|
||||||
version: 0.8.1
|
version: 0.10.0
|
||||||
tiny-glob:
|
tiny-glob:
|
||||||
specifier: ^0.2.9
|
specifier: ^0.2.9
|
||||||
version: 0.2.9
|
version: 0.2.9
|
||||||
|
|
@ -8150,6 +8150,7 @@ packages:
|
||||||
open: 9.1.0
|
open: 9.1.0
|
||||||
picocolors: 1.0.0
|
picocolors: 1.0.0
|
||||||
tslib: 2.5.3
|
tslib: 2.5.3
|
||||||
|
dev: false
|
||||||
|
|
||||||
/@playwright/test@1.29.2:
|
/@playwright/test@1.29.2:
|
||||||
resolution: {integrity: sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==}
|
resolution: {integrity: sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==}
|
||||||
|
|
@ -9635,6 +9636,7 @@ packages:
|
||||||
/big-integer@1.6.51:
|
/big-integer@1.6.51:
|
||||||
resolution: {integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==}
|
resolution: {integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==}
|
||||||
engines: {node: '>=0.6'}
|
engines: {node: '>=0.6'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/binary-extensions@2.2.0:
|
/binary-extensions@2.2.0:
|
||||||
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
|
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
|
||||||
|
|
@ -9705,6 +9707,7 @@ packages:
|
||||||
engines: {node: '>= 5.10.0'}
|
engines: {node: '>= 5.10.0'}
|
||||||
dependencies:
|
dependencies:
|
||||||
big-integer: 1.6.51
|
big-integer: 1.6.51
|
||||||
|
dev: false
|
||||||
|
|
||||||
/brace-expansion@1.1.11:
|
/brace-expansion@1.1.11:
|
||||||
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
|
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
|
||||||
|
|
@ -9777,6 +9780,7 @@ packages:
|
||||||
engines: {node: '>=12'}
|
engines: {node: '>=12'}
|
||||||
dependencies:
|
dependencies:
|
||||||
run-applescript: 5.0.0
|
run-applescript: 5.0.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/busboy@1.6.0:
|
/busboy@1.6.0:
|
||||||
resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
|
resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
|
||||||
|
|
@ -10460,6 +10464,7 @@ packages:
|
||||||
dependencies:
|
dependencies:
|
||||||
bplist-parser: 0.2.0
|
bplist-parser: 0.2.0
|
||||||
untildify: 4.0.0
|
untildify: 4.0.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/default-browser@4.0.0:
|
/default-browser@4.0.0:
|
||||||
resolution: {integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==}
|
resolution: {integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==}
|
||||||
|
|
@ -10469,6 +10474,7 @@ packages:
|
||||||
default-browser-id: 3.0.0
|
default-browser-id: 3.0.0
|
||||||
execa: 7.1.1
|
execa: 7.1.1
|
||||||
titleize: 3.0.0
|
titleize: 3.0.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/defaults@1.0.4:
|
/defaults@1.0.4:
|
||||||
resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
|
resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
|
||||||
|
|
@ -10478,6 +10484,7 @@ packages:
|
||||||
/define-lazy-prop@3.0.0:
|
/define-lazy-prop@3.0.0:
|
||||||
resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
|
resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
|
||||||
engines: {node: '>=12'}
|
engines: {node: '>=12'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/define-properties@1.2.0:
|
/define-properties@1.2.0:
|
||||||
resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
|
resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
|
||||||
|
|
@ -11511,6 +11518,7 @@ packages:
|
||||||
onetime: 5.1.2
|
onetime: 5.1.2
|
||||||
signal-exit: 3.0.7
|
signal-exit: 3.0.7
|
||||||
strip-final-newline: 2.0.0
|
strip-final-newline: 2.0.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/execa@6.1.0:
|
/execa@6.1.0:
|
||||||
resolution: {integrity: sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==}
|
resolution: {integrity: sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==}
|
||||||
|
|
@ -11539,6 +11547,7 @@ packages:
|
||||||
onetime: 6.0.0
|
onetime: 6.0.0
|
||||||
signal-exit: 3.0.7
|
signal-exit: 3.0.7
|
||||||
strip-final-newline: 3.0.0
|
strip-final-newline: 3.0.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/expand-template@2.0.3:
|
/expand-template@2.0.3:
|
||||||
resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
|
resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
|
||||||
|
|
@ -12385,6 +12394,7 @@ packages:
|
||||||
/human-signals@2.1.0:
|
/human-signals@2.1.0:
|
||||||
resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
|
resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
|
||||||
engines: {node: '>=10.17.0'}
|
engines: {node: '>=10.17.0'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/human-signals@3.0.1:
|
/human-signals@3.0.1:
|
||||||
resolution: {integrity: sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==}
|
resolution: {integrity: sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==}
|
||||||
|
|
@ -12393,6 +12403,7 @@ packages:
|
||||||
/human-signals@4.3.1:
|
/human-signals@4.3.1:
|
||||||
resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
|
resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
|
||||||
engines: {node: '>=14.18.0'}
|
engines: {node: '>=14.18.0'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/hyperid@3.1.1:
|
/hyperid@3.1.1:
|
||||||
resolution: {integrity: sha512-RveV33kIksycSf7HLkq1sHB5wW0OwuX8ot8MYnY++gaaPXGFfKpBncHrAWxdpuEeRlazUMGWefwP1w6o6GaumA==}
|
resolution: {integrity: sha512-RveV33kIksycSf7HLkq1sHB5wW0OwuX8ot8MYnY++gaaPXGFfKpBncHrAWxdpuEeRlazUMGWefwP1w6o6GaumA==}
|
||||||
|
|
@ -12577,11 +12588,13 @@ packages:
|
||||||
resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
|
resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
dev: false
|
||||||
|
|
||||||
/is-docker@3.0.0:
|
/is-docker@3.0.0:
|
||||||
resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
|
resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
|
||||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||||
hasBin: true
|
hasBin: true
|
||||||
|
dev: false
|
||||||
|
|
||||||
/is-extendable@0.1.1:
|
/is-extendable@0.1.1:
|
||||||
resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
|
resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
|
||||||
|
|
@ -12616,6 +12629,7 @@ packages:
|
||||||
hasBin: true
|
hasBin: true
|
||||||
dependencies:
|
dependencies:
|
||||||
is-docker: 3.0.0
|
is-docker: 3.0.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/is-interactive@2.0.0:
|
/is-interactive@2.0.0:
|
||||||
resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
|
resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
|
||||||
|
|
@ -12716,6 +12730,7 @@ packages:
|
||||||
/is-stream@2.0.1:
|
/is-stream@2.0.1:
|
||||||
resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
|
resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/is-stream@3.0.0:
|
/is-stream@3.0.0:
|
||||||
resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
|
resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
|
||||||
|
|
@ -12774,6 +12789,7 @@ packages:
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
dependencies:
|
dependencies:
|
||||||
is-docker: 2.2.1
|
is-docker: 2.2.1
|
||||||
|
dev: false
|
||||||
|
|
||||||
/isarray@0.0.1:
|
/isarray@0.0.1:
|
||||||
resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
|
resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
|
||||||
|
|
@ -13856,6 +13872,7 @@ packages:
|
||||||
/mimic-fn@2.1.0:
|
/mimic-fn@2.1.0:
|
||||||
resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
|
resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/mimic-fn@4.0.0:
|
/mimic-fn@4.0.0:
|
||||||
resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
|
resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
|
||||||
|
|
@ -14224,6 +14241,7 @@ packages:
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
dependencies:
|
dependencies:
|
||||||
path-key: 3.1.1
|
path-key: 3.1.1
|
||||||
|
dev: false
|
||||||
|
|
||||||
/npm-run-path@5.1.0:
|
/npm-run-path@5.1.0:
|
||||||
resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
|
resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
|
||||||
|
|
@ -14304,6 +14322,7 @@ packages:
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
dependencies:
|
dependencies:
|
||||||
mimic-fn: 2.1.0
|
mimic-fn: 2.1.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/onetime@6.0.0:
|
/onetime@6.0.0:
|
||||||
resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
|
resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
|
||||||
|
|
@ -14327,6 +14346,7 @@ packages:
|
||||||
define-lazy-prop: 3.0.0
|
define-lazy-prop: 3.0.0
|
||||||
is-inside-container: 1.0.0
|
is-inside-container: 1.0.0
|
||||||
is-wsl: 2.2.0
|
is-wsl: 2.2.0
|
||||||
|
dev: false
|
||||||
|
|
||||||
/optionator@0.8.3:
|
/optionator@0.8.3:
|
||||||
resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
|
resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
|
||||||
|
|
@ -15143,6 +15163,15 @@ packages:
|
||||||
fast-diff: 1.2.0
|
fast-diff: 1.2.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/prettier-plugin-astro@0.10.0:
|
||||||
|
resolution: {integrity: sha512-dPzop0gKZyVGpTDQmfy+e7FKXC9JT3mlpfYA2diOVz+Ui+QR1U4G/s+OesKl2Hib2JJOtAYJs/l+ovgT0ljlFA==}
|
||||||
|
engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
|
||||||
|
dependencies:
|
||||||
|
'@astrojs/compiler': 1.5.0
|
||||||
|
prettier: 2.8.8
|
||||||
|
sass-formatter: 0.7.6
|
||||||
|
dev: true
|
||||||
|
|
||||||
/prettier-plugin-astro@0.8.1:
|
/prettier-plugin-astro@0.8.1:
|
||||||
resolution: {integrity: sha512-lJ/mG/Lz/ccSwNtwqpFS126mtMVzFVyYv0ddTF9wqwrEG4seECjKDAyw/oGv915rAcJi8jr89990nqfpmG+qdg==}
|
resolution: {integrity: sha512-lJ/mG/Lz/ccSwNtwqpFS126mtMVzFVyYv0ddTF9wqwrEG4seECjKDAyw/oGv915rAcJi8jr89990nqfpmG+qdg==}
|
||||||
engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
|
engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
|
||||||
|
|
@ -15151,6 +15180,7 @@ packages:
|
||||||
prettier: 2.8.8
|
prettier: 2.8.8
|
||||||
sass-formatter: 0.7.6
|
sass-formatter: 0.7.6
|
||||||
synckit: 0.8.5
|
synckit: 0.8.5
|
||||||
|
dev: false
|
||||||
|
|
||||||
/prettier@2.8.8:
|
/prettier@2.8.8:
|
||||||
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
|
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
|
||||||
|
|
@ -15808,6 +15838,7 @@ packages:
|
||||||
engines: {node: '>=12'}
|
engines: {node: '>=12'}
|
||||||
dependencies:
|
dependencies:
|
||||||
execa: 5.1.1
|
execa: 5.1.1
|
||||||
|
dev: false
|
||||||
|
|
||||||
/run-parallel@1.2.0:
|
/run-parallel@1.2.0:
|
||||||
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
|
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
|
||||||
|
|
@ -16359,6 +16390,7 @@ packages:
|
||||||
/strip-final-newline@2.0.0:
|
/strip-final-newline@2.0.0:
|
||||||
resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
|
resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
|
||||||
engines: {node: '>=6'}
|
engines: {node: '>=6'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/strip-final-newline@3.0.0:
|
/strip-final-newline@3.0.0:
|
||||||
resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
|
resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
|
||||||
|
|
@ -16488,6 +16520,7 @@ packages:
|
||||||
dependencies:
|
dependencies:
|
||||||
'@pkgr/utils': 2.4.0
|
'@pkgr/utils': 2.4.0
|
||||||
tslib: 2.5.3
|
tslib: 2.5.3
|
||||||
|
dev: false
|
||||||
|
|
||||||
/tailwindcss@3.3.2:
|
/tailwindcss@3.3.2:
|
||||||
resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
|
resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
|
||||||
|
|
@ -16651,6 +16684,7 @@ packages:
|
||||||
/titleize@3.0.0:
|
/titleize@3.0.0:
|
||||||
resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
|
resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
|
||||||
engines: {node: '>=12'}
|
engines: {node: '>=12'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/tmp@0.0.33:
|
/tmp@0.0.33:
|
||||||
resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
|
resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
|
||||||
|
|
@ -17142,6 +17176,7 @@ packages:
|
||||||
/untildify@4.0.0:
|
/untildify@4.0.0:
|
||||||
resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
|
resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
|
||||||
engines: {node: '>=8'}
|
engines: {node: '>=8'}
|
||||||
|
dev: false
|
||||||
|
|
||||||
/upath@1.2.0:
|
/upath@1.2.0:
|
||||||
resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
|
resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue