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
|
||||
**/vendor
|
||||
**/.vercel
|
||||
examples/docs/**/*.md
|
||||
examples/blog/**/*.md
|
||||
|
||||
# Directories
|
||||
.github
|
||||
.changeset
|
||||
|
||||
# Files
|
||||
README.md
|
||||
packages/webapi/mod.d.ts
|
||||
pnpm-lock.yaml
|
||||
|
|
|
|||
25
README.md
25
README.md
|
|
@ -8,7 +8,6 @@
|
|||
<br/><br/>
|
||||
</p>
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
The **recommended** way to install the latest version of Astro is by running the command below:
|
||||
|
|
@ -23,9 +22,10 @@ You can also install Astro **manually** by running this command instead:
|
|||
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.
|
||||
|
||||
## Documentation
|
||||
|
||||
Visit our [official documentation](https://docs.astro.build/).
|
||||
|
|
@ -33,9 +33,10 @@ Visit our [official documentation](https://docs.astro.build/).
|
|||
## Support
|
||||
|
||||
Having trouble? Get help in the official [Astro Discord](https://astro.build/chat).
|
||||
|
||||
## 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.
|
||||
|
||||
Join us on [Discord](https://astro.build/chat) to meet other maintainers. We'll help you get your first contribution in no time!
|
||||
|
||||
|
|
@ -47,23 +48,23 @@ Join us on [Discord](https://astro.build/chat) to meet other maintainers. We'll
|
|||
| [create-astro](packages/create-astro) | [](packages/create-astro/CHANGELOG.md) |
|
||||
| [@astrojs/react](packages/integrations/react) | [](packages/integrations/react/CHANGELOG.md) |
|
||||
| [@astrojs/preact](packages/integrations/preact) | [](packages/integrations/preact/CHANGELOG.md) |
|
||||
| [@astrojs/solid-js](packages/integrations/solid) | [](packages/integrations/solid/CHANGELOG.md) |
|
||||
| [@astrojs/solid-js](packages/integrations/solid) | [](packages/integrations/solid/CHANGELOG.md) |
|
||||
| [@astrojs/svelte](packages/integrations/svelte) | [](packages/integrations/svelte/CHANGELOG.md) |
|
||||
| [@astrojs/vue](packages/integrations/vue) | [](packages/integrations/vue/CHANGELOG.md) |
|
||||
| [@astrojs/lit](packages/integrations/lit) | [](packages/integrations/lit/CHANGELOG.md) |
|
||||
| [@astrojs/deno](packages/integrations/deno) | [](packages/integrations/deno/CHANGELOG.md) |
|
||||
| [@astrojs/netlify](packages/integrations/netlify) | [](packages/integrations/netlify/CHANGELOG.md) |
|
||||
| [@astrojs/node](packages/integrations/node) | [](packages/integrations/node/CHANGELOG.md) |
|
||||
| [@astrojs/node](packages/integrations/node) | [](packages/integrations/node/CHANGELOG.md) |
|
||||
| [@astrojs/vercel](packages/integrations/vercel) | [](packages/integrations/vercel/CHANGELOG.md) |
|
||||
| [@astrojs/cloudflare](packages/integrations/cloudflare) | [](packages/integrations/cloudflare/CHANGELOG.md) |
|
||||
| [@astrojs/partytown](packages/integrations/partytown) | [](packages/integrations/partytown/CHANGELOG.md) |
|
||||
| [@astrojs/sitemap](packages/integrations/sitemap) | [](packages/integrations/sitemap/CHANGELOG.md) |
|
||||
| [@astrojs/tailwind](packages/integrations/tailwind) | [](packages/integrations/tailwind/CHANGELOG.md) |
|
||||
| [@astrojs/turbolinks](packages/integrations/turbolinks) | [](packages/integrations/turbolinks/CHANGELOG.md) |
|
||||
| [@astrojs/alpinejs](packages/integrations/alpinejs) | [](packages/integrations/alpinejs/CHANGELOG.md) |
|
||||
| [@astrojs/image](packages/integrations/image) | [](packages/integrations/image/CHANGELOG.md) |
|
||||
| [@astrojs/mdx](packages/integrations/mdx) | [](packages/integrations/mdx/CHANGELOG.md) |
|
||||
| [@astrojs/prefetch](packages/integrations/prefetch) | [](packages/integrations/prefetch/CHANGELOG.md) |
|
||||
| [@astrojs/alpinejs](packages/integrations/alpinejs) | [](packages/integrations/alpinejs/CHANGELOG.md) |
|
||||
| [@astrojs/image](packages/integrations/image) | [](packages/integrations/image/CHANGELOG.md) |
|
||||
| [@astrojs/mdx](packages/integrations/mdx) | [](packages/integrations/mdx/CHANGELOG.md) |
|
||||
| [@astrojs/prefetch](packages/integrations/prefetch) | [](packages/integrations/prefetch/CHANGELOG.md) |
|
||||
|
||||
[](https://bestpractices.coreinfrastructure.org/projects/6178)
|
||||
|
||||
|
|
@ -71,10 +72,9 @@ Several official projects are maintained outside of this repo:
|
|||
|
||||
| Project | Repository |
|
||||
| ------------------------------------------------------------------- | ----------------------------------------------------------------------- |
|
||||
| [@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) |
|
||||
|
||||
|
||||
## Links
|
||||
|
||||
- [License (MIT)](LICENSE)
|
||||
|
|
@ -92,8 +92,7 @@ Astro is generously supported by Netlify, Storyblok, and several other amazing o
|
|||
<p align="center">
|
||||
<a target="_blank" href="https://github.com/sponsors/withastro">
|
||||
|
||||
[![Astro's sponsors.](https://astro.build/sponsors.png
|
||||
"Astro's sponsors.
|
||||
[](https://github.com/sponsors/withastro)
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ npm create astro@latest -- --template basics
|
|||
|
||||
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
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!
|
||||
|
||||
|
||||
|
||||
|
||||
Features:
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: "First post"
|
||||
description: "Lorem ipsum dolor sit amet"
|
||||
pubDate: "Jul 08 2022"
|
||||
heroImage: "/placeholder-hero.jpg"
|
||||
title: 'First post'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 08 2022'
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: "Markdown Style Guide"
|
||||
description: "Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro."
|
||||
pubDate: "Jul 01 2022"
|
||||
heroImage: "/placeholder-hero.jpg"
|
||||
title: 'Markdown Style Guide'
|
||||
description: 'Here is a sample of some basic Markdown syntax that can be used when writing Markdown content in Astro.'
|
||||
pubDate: 'Jul 01 2022'
|
||||
heroImage: '/placeholder-hero.jpg'
|
||||
---
|
||||
|
||||
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"
|
||||
description: "Lorem ipsum dolor sit amet"
|
||||
pubDate: "Jul 22 2022"
|
||||
heroImage: "/placeholder-hero.jpg"
|
||||
title: 'Second post'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 22 2022'
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
---
|
||||
title: "Third post"
|
||||
description: "Lorem ipsum dolor sit amet"
|
||||
pubDate: "Jul 15 2022"
|
||||
heroImage: "/placeholder-hero.jpg"
|
||||
title: 'Third post'
|
||||
description: 'Lorem ipsum dolor sit amet'
|
||||
pubDate: 'Jul 15 2022'
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -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://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/component/devcontainer.json)
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
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.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :--------------------- | :----------------------------------------------- |
|
||||
| `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)
|
||||
| Command | Action |
|
||||
| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `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) |
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ npm create astro@latest -- --template deno
|
|||
|
||||
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
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)
|
||||
|
||||
This example showcases Astro working with [AlpineJS](https://alpinejs.dev/).
|
||||
|
||||
|
|
|
|||
|
|
@ -8,4 +8,4 @@ npm create astro@latest -- --template framework-lit
|
|||
[](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/framework-lit)
|
||||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-lit/devcontainer.json)
|
||||
|
||||
This example showcases Astro working with [Lit](https://lit.dev/).
|
||||
This example showcases Astro working with [Lit](https://lit.dev/).
|
||||
|
|
|
|||
|
|
@ -9,4 +9,3 @@ npm create astro@latest -- --template framework-vue
|
|||
[](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/framework-vue/devcontainer.json)
|
||||
|
||||
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://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/integration/devcontainer.json)
|
||||
|
||||
|
||||
## 🚀 Project Structure
|
||||
|
||||
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.
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
||||
| Command | Action |
|
||||
| :--------------------- | :----------------------------------------------- |
|
||||
| `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)
|
||||
| Command | Action |
|
||||
| :------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| `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) |
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ npm create astro@latest -- --template portfolio
|
|||
|
||||
|
||||
|
||||
|
||||
## 🧞 Commands
|
||||
|
||||
All commands are run from the root of the project, from a terminal:
|
||||
|
|
|
|||
|
|
@ -88,7 +88,7 @@
|
|||
"only-allow": "^1.1.1",
|
||||
"organize-imports-cli": "^0.10.0",
|
||||
"prettier": "^2.8.8",
|
||||
"prettier-plugin-astro": "^0.8.1",
|
||||
"prettier-plugin-astro": "^0.10.0",
|
||||
"tiny-glob": "^0.2.9",
|
||||
"turbo": "^1.10.3",
|
||||
"typescript": "~5.0.2"
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ This package exports a component to support highlighting inside an Astro file. E
|
|||
|
||||
```astro
|
||||
---
|
||||
import { Prism } from "@astrojs/prism"
|
||||
import { Prism } from '@astrojs/prism';
|
||||
---
|
||||
|
||||
<Prism lang="js" code={`const foo = 'bar';`} />
|
||||
|
|
@ -21,11 +21,14 @@ This package exports a `runHighlighterWithAstro` function to highlight while mak
|
|||
```typescript
|
||||
import { runHighlighterWithAstro } from '@astrojs/prism';
|
||||
|
||||
runHighlighterWithAstro(`
|
||||
runHighlighterWithAstro(
|
||||
`
|
||||
---
|
||||
const helloAstro = 'Hello, Astro!';
|
||||
---
|
||||
|
||||
<div>{helloAstro}</div>
|
||||
`, 'astro');
|
||||
`,
|
||||
'astro'
|
||||
);
|
||||
```
|
||||
|
|
|
|||
|
|
@ -36,14 +36,14 @@ export async function get(context) {
|
|||
// Pull in your project "site" from the endpoint context
|
||||
// https://docs.astro.build/en/reference/api-reference/#contextsite
|
||||
site: context.site,
|
||||
items: posts.map(post => ({
|
||||
items: posts.map((post) => ({
|
||||
// Assumes all RSS feed item properties are in post frontmatter
|
||||
...post.data,
|
||||
// Generate a `url` from each post `slug`
|
||||
// This assumes all blog posts are rendered as `/blog/[slug]` routes
|
||||
// https://docs.astro.build/en/guides/content-collections/#generating-pages-from-content-collections
|
||||
link: `/blog/${post.slug}/`,
|
||||
}))
|
||||
})),
|
||||
});
|
||||
}
|
||||
```
|
||||
|
|
@ -180,9 +180,10 @@ By default, the library will add trailing slashes to the emitted URLs. To preven
|
|||
```js
|
||||
import rss from '@astrojs/rss';
|
||||
|
||||
export const get = () => rss({
|
||||
trailingSlash: false
|
||||
});
|
||||
export const get = () =>
|
||||
rss({
|
||||
trailingSlash: false,
|
||||
});
|
||||
```
|
||||
|
||||
## `RSSFeedItem`
|
||||
|
|
@ -193,12 +194,13 @@ An example feed item might look like:
|
|||
|
||||
```js
|
||||
const item = {
|
||||
title: "Alpha Centauri: so close you can touch it",
|
||||
link: "/blog/alpha-centuari",
|
||||
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.",
|
||||
categories: ["stars", "space"]
|
||||
}
|
||||
title: 'Alpha Centauri: so close you can touch it',
|
||||
link: '/blog/alpha-centuari',
|
||||
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.',
|
||||
categories: ['stars', 'space'],
|
||||
};
|
||||
```
|
||||
|
||||
### `title`
|
||||
|
|
@ -259,15 +261,16 @@ An object that defines the `title` and `url` of the original feed for items that
|
|||
|
||||
```js
|
||||
const item = {
|
||||
title: "Alpha Centauri: so close you can touch it",
|
||||
link: "/blog/alpha-centuari",
|
||||
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.",
|
||||
source: {
|
||||
title: "The Galactic Times",
|
||||
url: "https://galactictimes.space/feed.xml"
|
||||
}
|
||||
}
|
||||
title: 'Alpha Centauri: so close you can touch it',
|
||||
link: '/blog/alpha-centuari',
|
||||
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.',
|
||||
source: {
|
||||
title: 'The Galactic Times',
|
||||
url: 'https://galactictimes.space/feed.xml',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `source.title`
|
||||
|
|
@ -290,16 +293,17 @@ An object to specify properties for an included media source (e.g. a podcast) wi
|
|||
|
||||
```js
|
||||
const item = {
|
||||
title: "Alpha Centauri: so close you can touch it",
|
||||
link: "/blog/alpha-centuari",
|
||||
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.",
|
||||
enclosure: {
|
||||
url: "/media/alpha-centauri.aac",
|
||||
title: 'Alpha Centauri: so close you can touch it',
|
||||
link: '/blog/alpha-centuari',
|
||||
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.',
|
||||
enclosure: {
|
||||
url: '/media/alpha-centauri.aac',
|
||||
length: 124568,
|
||||
type: "audio/aac"
|
||||
}
|
||||
}
|
||||
type: 'audio/aac',
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
#### `enclosure.url`
|
||||
|
|
@ -361,9 +365,7 @@ export async function get(context) {
|
|||
title: 'Buzz’s Blog',
|
||||
description: 'A humble Astronaut’s guide to the stars',
|
||||
site: context.site,
|
||||
items: await pagesGlobToRssItems(
|
||||
import.meta.glob('./blog/*.{md,mdx}'),
|
||||
),
|
||||
items: await pagesGlobToRssItems(import.meta.glob('./blog/*.{md,mdx}')),
|
||||
});
|
||||
}
|
||||
```
|
||||
|
|
|
|||
|
|
@ -8,10 +8,8 @@
|
|||
<br/><br/>
|
||||
</p>
|
||||
|
||||
|
||||
## Install
|
||||
|
||||
|
||||
```bash
|
||||
# Recommended!
|
||||
npm create astro@latest
|
||||
|
|
@ -20,7 +18,7 @@ npm create astro@latest
|
|||
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.
|
||||
|
||||
|
|
@ -31,9 +29,10 @@ Visit our [official documentation](https://docs.astro.build/).
|
|||
## Support
|
||||
|
||||
Having trouble? Get help in the official [Astro Discord](https://astro.build/chat).
|
||||
|
||||
## 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.
|
||||
|
||||
Join us on [Discord](https://astro.build/chat) to meet other maintainers. We'll help you get your first contribution in no time!
|
||||
|
||||
|
|
@ -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/)
|
||||
|
||||
[❤️ Sponsor Astro! ❤️](https://github.com/withastro/.github/blob/main/FUNDING.md)
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,12 +2,11 @@
|
|||
|
||||
This file serves as developer documentation to explain how the internal plugins work
|
||||
|
||||
|
||||
## `plugin-middleware`
|
||||
|
||||
This plugin is responsible to retrieve the `src/middleware.{ts.js}` file and emit an entry point during the SSR build.
|
||||
|
||||
The final file is emitted only if the user has the middleware file. The final name of the file is `middleware.mjs`.
|
||||
The final file is emitted only if the user has the middleware file. The final name of the file is `middleware.mjs`.
|
||||
|
||||
This is **not** a virtual module. The plugin will try to resolve the physical file.
|
||||
|
||||
|
|
@ -20,7 +19,12 @@ The emitted file is called `renderers.mjs`.
|
|||
The emitted file has content similar to:
|
||||
|
||||
```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 };
|
||||
```
|
||||
|
|
@ -32,19 +36,20 @@ This plugin is responsible to collect all pages inside an Astro application, and
|
|||
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:
|
||||
|
||||
- rollup resolution of the files
|
||||
- possible plugins that get triggered when the name of the module has an extension e.g. `.astro`
|
||||
|
||||
The plugin does the following operations:
|
||||
|
||||
- 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
|
||||
- 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)
|
||||
|
||||
|
||||
### `plugin pages` mapping resolution
|
||||
|
||||
The mapping is as follows:
|
||||
The mapping is as follows:
|
||||
|
||||
```
|
||||
src/pages/index.astro => @astro-page:src/pages/index@_@astro
|
||||
|
|
@ -53,14 +58,13 @@ src/pages/index.astro => @astro-page:src/pages/index@_@astro
|
|||
1. We add a fixed prefix, which is used as virtual module naming convention;
|
||||
2. We replace the dot that belongs extension with an arbitrary string.
|
||||
|
||||
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)
|
||||
|
||||
|
||||
|
||||
### `plugin pages` code generation
|
||||
|
||||
When generating the code of the page, we will import and export the following modules:
|
||||
|
||||
- the `renderers.mjs`
|
||||
- the `middleware.mjs`
|
||||
- the page, via dynamic import
|
||||
|
|
@ -79,6 +83,7 @@ export { middleware, page };
|
|||
```
|
||||
|
||||
If we have a `pages/` folder that looks like this:
|
||||
|
||||
```
|
||||
├── blog
|
||||
│ ├── first.astro
|
||||
|
|
@ -89,8 +94,9 @@ If we have a `pages/` folder that looks like this:
|
|||
└── second.astro
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
```
|
||||
├── _astro
|
||||
│ ├── first.132e69e0.css
|
||||
|
|
@ -117,7 +123,7 @@ will look like this:
|
|||
└── renderers.mjs
|
||||
```
|
||||
|
||||
Of course, all these files will be deleted by Astro at the end build.
|
||||
Of course, all these files will be deleted by Astro at the end build.
|
||||
|
||||
## `plugin-ssr` (WIP)
|
||||
|
||||
|
|
@ -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:
|
||||
|
||||
```js
|
||||
const _page$0 = () => import("../chunks/<INDEX.ASTRO_CHUNK>.mjs")
|
||||
const _page$1 = () => import("../chunks/<ABOUT.ASTRO_CHUNK>.mjs")
|
||||
const _page$0 = () => import('../chunks/<INDEX.ASTRO_CHUNK>.mjs');
|
||||
const _page$1 = () => import('../chunks/<ABOUT.ASTRO_CHUNK>.mjs');
|
||||
|
||||
const pageMap = new Map([
|
||||
["src/pages/index.astro", _page$0],
|
||||
["src/pages/about.astro", _page$1],
|
||||
])
|
||||
['src/pages/index.astro', _page$0],
|
||||
['src/pages/about.astro', _page$1],
|
||||
]);
|
||||
```
|
||||
|
||||
It will also import the [`renderers`](#plugin-renderers) virtual module
|
||||
and the [`middleware`](#plugin-middleware) virtual module.
|
||||
|
||||
|
|
|
|||
|
|
@ -9,30 +9,36 @@
|
|||
**Error Format**
|
||||
|
||||
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`)
|
||||
- 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:
|
||||
|
||||
- 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:
|
||||
|
||||
- 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.`)
|
||||
- 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`.
|
||||
|
||||
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)
|
||||
|
||||
**Writing Style**
|
||||
|
||||
- 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.
|
||||
- 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...`)
|
||||
- Avoid using cutesy language. (ex: Oops!) This tone minimizes the significance of the error, which _is_ important to the developer. The developer may be frustrated and your error message shouldn't be making jokes about their struggles. Only include words and phrases that help the developer **interpret the error** and **fix the problem**.
|
||||
|
||||
**Choosing an Error Code**
|
||||
|
||||
Choose any available error code in the appropriate range:
|
||||
|
||||
- 01xxx and 02xxx are reserved for compiler errors and warnings respectively
|
||||
- 03xxx: Astro errors (your error most likely goes here!)
|
||||
- 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)!
|
||||
|
||||
### 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 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
|
||||
|
||||
- **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.
|
||||
- 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:
|
||||
|
||||
```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!
|
||||
|
|
@ -76,22 +84,24 @@ Here's how to create and format the comments:
|
|||
|
||||
```js
|
||||
/**
|
||||
* @docs <- Needed for the comment to be used for docs
|
||||
* @message <- (Optional) Clearer error message to show in cases where the original one is too complex (ex: because of conditional messages)
|
||||
* @see <- List of additional references users can look at
|
||||
* @description <- Description of the error
|
||||
*/
|
||||
* @docs <- Needed for the comment to be used for docs
|
||||
* @message <- (Optional) Clearer error message to show in cases where the original one is too complex (ex: because of conditional messages)
|
||||
* @see <- List of additional references users can look at
|
||||
* @description <- Description of the error
|
||||
*/
|
||||
```
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
/**
|
||||
* @docs
|
||||
* @message Route returned a `returnedValue`. Only a Response can be returned from Astro files.
|
||||
* @see
|
||||
* - [Response](https://docs.astro.build/en/guides/server-side-rendering/#response)
|
||||
* @description
|
||||
* Only instances of [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) can be returned inside Astro files.
|
||||
*/
|
||||
* @docs
|
||||
* @message Route returned a `returnedValue`. Only a Response can be returned from Astro files.
|
||||
* @see
|
||||
* - [Response](https://docs.astro.build/en/guides/server-side-rendering/#response)
|
||||
* @description
|
||||
* Only instances of [Response](https://developer.mozilla.org/en-US/docs/Web/API/Response) can be returned inside Astro files.
|
||||
*/
|
||||
```
|
||||
|
||||
The `@message` property is intended to provide slightly more context when it is helpful: a more descriptive error message or a collection of common messages if there are multiple possible error messages. Try to avoid making substantial changes to existing messages so that they are easy to find for users who copy and search the exact content of an error message.
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@ Consider the following example configuration:
|
|||
With this configuration, the following imports would map to the same location.
|
||||
|
||||
```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 create astro my-astro-project --template minimal
|
||||
```
|
||||
|
||||
[Check out the full list][examples] of example templates, available on GitHub.
|
||||
|
||||
You can also use any GitHub repo as a template:
|
||||
|
|
@ -38,16 +39,16 @@ npm create astro@latest my-astro-project -- --template cassidoo/shopify-react-as
|
|||
|
||||
May be provided in place of prompts
|
||||
|
||||
| Name | Description |
|
||||
|:-------------|:----------------------------------------------------|
|
||||
| `--template <name>` | Specify your template. |
|
||||
| `--install` / `--no-install` | Install dependencies (or not). |
|
||||
| `--git` / `--no-git` | Initialize git repo (or not). |
|
||||
| `--yes` (`-y`) | Skip all prompt by accepting defaults. |
|
||||
| `--no` (`-n`) | Skip all prompt by declining defaults. |
|
||||
| `--dry-run` | Walk through steps without executing. |
|
||||
| `--skip-houston` | Skip Houston animation. |
|
||||
| `--typescript <option>` | TypeScript option: `strict` / `strictest` / `relaxed`. |
|
||||
| Name | Description |
|
||||
| :--------------------------- | :----------------------------------------------------- |
|
||||
| `--template <name>` | Specify your template. |
|
||||
| `--install` / `--no-install` | Install dependencies (or not). |
|
||||
| `--git` / `--no-git` | Initialize git repo (or not). |
|
||||
| `--yes` (`-y`) | Skip all prompt by accepting defaults. |
|
||||
| `--no` (`-n`) | Skip all prompt by declining defaults. |
|
||||
| `--dry-run` | Walk through steps without executing. |
|
||||
| `--skip-houston` | Skip Houston animation. |
|
||||
| `--typescript <option>` | TypeScript option: `strict` / `strictest` / `relaxed`. |
|
||||
|
||||
[examples]: https://github.com/withastro/astro/tree/main/examples
|
||||
[typescript]: https://github.com/withastro/astro/tree/main/packages/astro/tsconfigs
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ npm install alpinejs @types/alpinejs
|
|||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "alpine()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
|
|||
|
|
@ -32,13 +32,12 @@ import cloudflare from '@astrojs/cloudflare';
|
|||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: cloudflare()
|
||||
adapter: cloudflare(),
|
||||
});
|
||||
```
|
||||
|
||||
## Options
|
||||
|
||||
|
||||
### Mode
|
||||
|
||||
`mode: "advanced" | "directory"`
|
||||
|
|
@ -54,9 +53,8 @@ In directory mode the adapter will compile the client side part of your app the
|
|||
```ts
|
||||
// directory mode
|
||||
export default defineConfig({
|
||||
adapter: cloudflare({ mode: "directory" }),
|
||||
adapter: cloudflare({ mode: 'directory' }),
|
||||
});
|
||||
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
||||
```js
|
||||
import { getRuntime } from "@astrojs/cloudflare/runtime";
|
||||
import { getRuntime } from '@astrojs/cloudflare/runtime';
|
||||
|
||||
getRuntime(Astro.request);
|
||||
```
|
||||
|
|
@ -108,7 +106,6 @@ By default, `@astrojs/cloudflare` will generate a `_routes.json` file that lists
|
|||
|
||||
## Troubleshooting
|
||||
|
||||
|
||||
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.
|
||||
|
|
@ -119,14 +116,14 @@ Currently, errors during running your application in Wrangler are not very usefu
|
|||
|
||||
```js
|
||||
export default defineConfig({
|
||||
adapter: cloudflare(),
|
||||
output: 'server',
|
||||
adapter: cloudflare(),
|
||||
output: 'server',
|
||||
|
||||
vite: {
|
||||
build: {
|
||||
minify: false
|
||||
}
|
||||
}
|
||||
minify: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -38,22 +38,22 @@ If you prefer to install the adapter manually instead, complete the following tw
|
|||
|
||||
1. Install the Deno adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
|
||||
|
||||
```bash
|
||||
npm install @astrojs/deno
|
||||
```
|
||||
```bash
|
||||
npm install @astrojs/deno
|
||||
```
|
||||
|
||||
1. Update your `astro.config.mjs` project configuration file with the changes below.
|
||||
|
||||
```js ins={3,6-7}
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import deno from '@astrojs/deno';
|
||||
```js ins={3,6-7}
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import deno from '@astrojs/deno';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: deno(),
|
||||
});
|
||||
```
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: deno(),
|
||||
});
|
||||
```
|
||||
|
||||
Next, update your `preview` script in `package.json` to run `deno`:
|
||||
|
||||
|
|
@ -75,7 +75,7 @@ You can now use this command to preview your production Astro site locally with
|
|||
```bash
|
||||
npm run preview
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
After [performing a build](https://docs.astro.build/en/guides/deploy/#building-your-site-locally) there will be a `dist/server/entry.mjs` module. You can start a server by importing this module in your Deno app:
|
||||
|
|
@ -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
|
||||
```
|
||||
|
||||
|
||||
## Configuration
|
||||
|
||||
To configure this adapter, pass an object to the `deno()` function call in `astro.config.mjs`.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -107,7 +106,7 @@ export default defineConfig({
|
|||
output: 'server',
|
||||
adapter: deno({
|
||||
//options go here
|
||||
})
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -122,15 +121,15 @@ import deno from '@astrojs/deno';
|
|||
export default defineConfig({
|
||||
output: 'server',
|
||||
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:
|
||||
|
||||
```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';
|
||||
|
||||
serve((req: Request) => {
|
||||
|
|
@ -152,8 +151,8 @@ export default defineConfig({
|
|||
output: 'server',
|
||||
adapter: deno({
|
||||
port: 8081,
|
||||
hostname: 'myhost'
|
||||
})
|
||||
hostname: 'myhost',
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
|
|
|||
|
|
@ -22,22 +22,22 @@ This integration provides `<Image />` and `<Picture>` components as well as a ba
|
|||
|
||||
## Installation
|
||||
|
||||
Along with our integration, we recommend installing [sharp](https://sharp.pixelplumbing.com/) when appropriate.
|
||||
Along with our integration, we recommend installing [sharp](https://sharp.pixelplumbing.com/) when appropriate.
|
||||
|
||||
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
|
||||
|
||||
- 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`.
|
||||
|
||||
|
||||
Note that `@astrojs/image` is not currently supported on
|
||||
|
||||
- Cloudflare SSR
|
||||
- `@astrojs/deno`
|
||||
- `@astrojs/netlify/edge-functions`
|
||||
- `@astrojs/vercel/edge`
|
||||
|
||||
|
||||
### 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.
|
||||
|
|
@ -53,15 +53,17 @@ pnpm astro add image
|
|||
|
||||
If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
|
||||
### 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:
|
||||
|
||||
```sh
|
||||
npm install @astrojs/image
|
||||
```
|
||||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "image()"
|
||||
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.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={7}
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -91,10 +93,12 @@ import image from '@astrojs/image';
|
|||
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [image({
|
||||
serviceEntryPoint: '@astrojs/image/sharp'
|
||||
})],
|
||||
})
|
||||
integrations: [
|
||||
image({
|
||||
serviceEntryPoint: '@astrojs/image/sharp',
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### 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>
|
||||
**Required:** `true`
|
||||
|
||||
</p>
|
||||
|
||||
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 `public/` directory: use the URL path relative to the `public/` directory. (e.g. `src="/images/public-image.jpg"`). These work like remote images.
|
||||
|
||||
#### alt
|
||||
|
|
@ -160,6 +164,7 @@ For images located in your `public/` directory: use the URL path relative to the
|
|||
|
||||
**Type:** `string`<br>
|
||||
**Required:** `true`
|
||||
|
||||
</p>
|
||||
|
||||
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>
|
||||
**Default:** `undefined`
|
||||
|
||||
</p>
|
||||
|
||||
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>
|
||||
**Default:** `undefined`
|
||||
|
||||
</p>
|
||||
|
||||
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>
|
||||
**Default:** `undefined`
|
||||
|
||||
</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.
|
||||
|
|
@ -210,6 +218,7 @@ For remote images, including images in `public/`, the integration needs to be ab
|
|||
|
||||
**Type:** `number`<br>
|
||||
**Default:** `undefined`
|
||||
|
||||
</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.
|
||||
|
|
@ -224,6 +233,7 @@ For remote images, including images in `public/`, the integration needs to be ab
|
|||
|
||||
**Type:** `number` | `string`<br>
|
||||
**Default:** `undefined`
|
||||
|
||||
</p>
|
||||
|
||||
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>
|
||||
**Default:** `undefined`
|
||||
|
||||
</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.
|
||||
|
|
@ -262,6 +273,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
|
|||
|
||||
**Type:** `'cover' | 'contain' | 'fill' | 'inside' | 'outside'` <br>
|
||||
**Default:** `'cover'`
|
||||
|
||||
</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).
|
||||
|
|
@ -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>
|
||||
**Default:** `'centre'`
|
||||
|
||||
</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).
|
||||
|
|
@ -292,6 +305,7 @@ In addition to the component-specific properties, any valid HTML attribute for t
|
|||
|
||||
**Type:** `string` | `ImageMetadata` | `Promise<ImageMetadata>`<br>
|
||||
**Required:** `true`
|
||||
|
||||
</p>
|
||||
|
||||
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 `public/` directory: use the URL path relative to the `public/` directory. (e.g. `src="/images/public-image.jpg"`). These work like remote images.
|
||||
|
||||
#### alt
|
||||
|
|
@ -309,6 +322,7 @@ For images located in your `public/` directory: use the URL path relative to the
|
|||
|
||||
**Type:** `string`<br>
|
||||
**Required:** `true`
|
||||
|
||||
</p>
|
||||
|
||||
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>
|
||||
**Required:** `true`
|
||||
|
||||
</p>
|
||||
|
||||
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>
|
||||
**Required:** `true`
|
||||
|
||||
</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.
|
||||
|
||||
```astro
|
||||
// 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
|
||||
|
|
@ -348,6 +364,7 @@ The list of sizes that should be built for responsive images. This is combined w
|
|||
|
||||
**Type:** `number` | `string`<br>
|
||||
**Default:** `undefined`
|
||||
|
||||
</p>
|
||||
|
||||
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>
|
||||
**Default:** `undefined`
|
||||
|
||||
</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.
|
||||
|
|
@ -376,6 +394,7 @@ For remote images, including images in `public/`, the original image format is u
|
|||
|
||||
**Type:** `ColorDefinition`<br>
|
||||
**Default:** `undefined`
|
||||
|
||||
</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.
|
||||
|
|
@ -396,6 +415,7 @@ color representation with 3 or 6 hexadecimal characters in the form `#123[abc]`,
|
|||
|
||||
**Type:** `'cover' | 'contain' | 'fill' | 'inside' | 'outside'` <br>
|
||||
**Default:** `'cover'`
|
||||
|
||||
</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).
|
||||
|
|
@ -410,6 +430,7 @@ How the image should be resized to fit both `height` and `width`.
|
|||
'north' | 'northeast' | 'east' | 'southeast' | 'south' | 'southwest' | 'west' | 'northwest' |
|
||||
'center' | 'centre' | 'cover' | 'entropy' | 'attention'` <br>
|
||||
**Default:** `'centre'`
|
||||
|
||||
</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).
|
||||
|
|
@ -429,14 +450,14 @@ This can be helpful if you need to add preload links to a page's `<head>`.
|
|||
import { getImage } from '@astrojs/image';
|
||||
|
||||
const { src } = await getImage({
|
||||
src: import('../assets/hero.png'),
|
||||
alt: "My hero image"
|
||||
});
|
||||
src: import('../assets/hero.png'),
|
||||
alt: 'My hero image',
|
||||
});
|
||||
---
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<link rel="preload" as="image" href={src} alt="alt text">
|
||||
<link rel="preload" as="image" href={src} alt="alt text" />
|
||||
</head>
|
||||
</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`.
|
||||
|
||||
|
||||
### 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`.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import image from '@astrojs/image';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [image({
|
||||
// Example: The entrypoint for a third-party image service installed from NPM
|
||||
serviceEntryPoint: 'my-image-service/astro.js'
|
||||
})],
|
||||
integrations: [
|
||||
image({
|
||||
// Example: The entrypoint for a third-party image service installed from NPM
|
||||
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.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import image from '@astrojs/image';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [image({
|
||||
// supported levels: 'debug' | 'info' | 'warn' | 'error' | 'silent'
|
||||
// default: 'info'
|
||||
logLevel: 'debug'
|
||||
})],
|
||||
integrations: [
|
||||
image({
|
||||
// supported levels: 'debug' | 'info' | 'warn' | 'error' | 'silent'
|
||||
// default: 'info'
|
||||
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.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import image from '@astrojs/image';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [image({
|
||||
// may be useful if your hosting provider allows caching between CI builds
|
||||
cacheDir: "./.cache/image"
|
||||
})]
|
||||
integrations: [
|
||||
image({
|
||||
// may be useful if your hosting provider allows caching between CI builds
|
||||
cacheDir: './.cache/image',
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -519,7 +545,7 @@ Caching can also be disabled by using `cacheDir: false`.
|
|||
|
||||
### Local images
|
||||
|
||||
Image files in your project's `src/` directory can be imported in frontmatter and passed directly to the `<Image />` component as the `src=` attribute value. `alt` is also required.
|
||||
Image files in your project's `src/` directory can be imported in frontmatter and passed directly to the `<Image />` component as the `src=` attribute value. `alt` is also required.
|
||||
|
||||
All other properties are optional and will default to the original image file's properties if not provided.
|
||||
|
||||
|
|
@ -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 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" />
|
||||
```
|
||||
|
||||
|
|
@ -578,7 +605,7 @@ const imageUrl = 'https://astro.build/assets/press/full-logo-dark.png';
|
|||
<Image src={imageUrl} width={750} height={250} format="avif" alt="descriptive text" />
|
||||
|
||||
// height will be recalculated to match the aspect ratio
|
||||
<Image src={imageUrl} width={750} aspectRatio={16/9} format="avif" alt="descriptive text" />
|
||||
<Image src={imageUrl} width={750} aspectRatio={16 / 9} format="avif" alt="descriptive text" />
|
||||
```
|
||||
|
||||
### Responsive pictures
|
||||
|
|
@ -594,20 +621,38 @@ For remote images, an `aspectRatio` is required to ensure the correct `height` c
|
|||
import { Picture } from '@astrojs/image/components';
|
||||
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
|
||||
<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)
|
||||
<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
|
||||
<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
|
||||
|
||||
- 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 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 includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||
|
||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||
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:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "lit()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -56,6 +57,7 @@ export default defineConfig({
|
|||
## Getting started
|
||||
|
||||
To use your first Lit component in Astro, head to our [UI framework documentation][astro-ui-frameworks]. This explains:
|
||||
|
||||
- 📦 how framework components are loaded,
|
||||
- 💧 client-side hydration options, and
|
||||
- 🤝 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:
|
||||
|
||||
__`src/components/my-element.js`__
|
||||
**`src/components/my-element.js`**
|
||||
|
||||
```js
|
||||
import { LitElement, html } from 'lit';
|
||||
|
|
@ -80,31 +82,31 @@ export class MyElement extends LitElement {
|
|||
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.
|
||||
|
||||
__`src/pages/index.astro`__
|
||||
**`src/pages/index.astro`**
|
||||
|
||||
```astro
|
||||
---
|
||||
import {MyElement} from '../components/my-element.js';
|
||||
import { MyElement } from '../components/my-element.js';
|
||||
---
|
||||
|
||||
<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
|
||||
|
||||
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.
|
||||
|
||||
```astro
|
||||
---
|
||||
import {MyElement} from '../components/my-element.js';
|
||||
import { MyElement } from '../components/my-element.js';
|
||||
---
|
||||
|
||||
<MyElement client:visible />
|
||||
|
|
@ -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`.
|
||||
|
||||
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:
|
||||
|
||||
|
|
@ -146,7 +148,7 @@ The correct order might be different depending on the underlying cause of the pr
|
|||
When using a [strict package manager](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) like `pnpm`, you may get an error such as `ReferenceError: module is not defined` when running your site. To fix this, hoist Lit dependencies with an `.npmrc` file:
|
||||
|
||||
```ini title=".npmrc"
|
||||
public-hoist-pattern[]=*lit*
|
||||
public-hoist-pattern[]=*lit*
|
||||
```
|
||||
|
||||
### Limitations
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ npm install @astrojs/markdoc
|
|||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "markdoc()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -54,14 +54,15 @@ export default defineConfig({
|
|||
});
|
||||
```
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
```json title=".vscode/settings.json"
|
||||
"files.associations": {
|
||||
{
|
||||
"files.associations": {
|
||||
"*.mdoc": "markdown"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -113,16 +114,16 @@ export default defineMarkdocConfig({
|
|||
aside: {
|
||||
render: Aside,
|
||||
attributes: {
|
||||
// Markdoc requires type defs for each attribute.
|
||||
// These should mirror the `Props` type of the component
|
||||
// you are rendering.
|
||||
// See Markdoc's documentation on defining attributes
|
||||
// https://markdoc.dev/docs/attributes#defining-attributes
|
||||
// Markdoc requires type defs for each attribute.
|
||||
// These should mirror the `Props` type of the component
|
||||
// you are rendering.
|
||||
// See Markdoc's documentation on defining attributes
|
||||
// https://markdoc.dev/docs/attributes#defining-attributes
|
||||
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:
|
||||
|
|
@ -132,7 +133,7 @@ This component can now be used in your Markdoc files with the `{% aside %}` tag.
|
|||
|
||||
{% 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 %}
|
||||
```
|
||||
|
|
@ -155,7 +156,7 @@ export default defineMarkdocConfig({
|
|||
render: Heading,
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
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`!
|
||||
// https://github.com/shikijs/shiki/blob/main/docs/languages.md
|
||||
langs: [],
|
||||
})
|
||||
}),
|
||||
],
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
#### Prism
|
||||
|
|
@ -208,7 +209,7 @@ import prism from '@astrojs/markdoc/prism';
|
|||
|
||||
export default defineMarkdocConfig({
|
||||
extends: [prism()],
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
📚 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'
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Custom Markdoc nodes / elements
|
||||
|
|
@ -249,7 +250,7 @@ export default defineMarkdocConfig({
|
|||
render: Quote,
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
📚 [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,
|
||||
attributes: {
|
||||
type: { type: String },
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### Markdoc config
|
||||
|
|
@ -307,12 +308,12 @@ export default defineMarkdocConfig({
|
|||
japan: '🇯🇵',
|
||||
spain: '🇪🇸',
|
||||
france: '🇫🇷',
|
||||
}
|
||||
return countryToEmojiMap[country] ?? '🏳'
|
||||
};
|
||||
return countryToEmojiMap[country] ?? '🏳';
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
Now, you can call this function from any Markdoc content entry:
|
||||
|
|
@ -359,8 +360,8 @@ import { defineMarkdocConfig } from '@astrojs/markdoc/config';
|
|||
export default defineMarkdocConfig({
|
||||
variables: {
|
||||
environment: process.env.IS_PROD ? 'prod' : 'dev',
|
||||
}
|
||||
})
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### Access frontmatter from your Markdoc content
|
||||
|
|
@ -382,7 +383,7 @@ This can now be accessed as `$frontmatter` in your Markdoc.
|
|||
|
||||
## 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
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
|
||||
|
||||
[astro-components]: https://docs.astro.build/en/core-concepts/astro-components/
|
||||
|
||||
[astro-content-collections]: https://docs.astro.build/en/guides/content-collections/
|
||||
|
||||
[markdoc-tags]: https://markdoc.dev/docs/tags
|
||||
|
||||
[markdoc-nodes]: https://markdoc.dev/docs/nodes
|
||||
|
||||
[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:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "mdx()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -59,14 +59,16 @@ 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.
|
||||
|
||||
```json title=".vscode/settings.json"
|
||||
"files.associations": {
|
||||
{
|
||||
"files.associations": {
|
||||
"*.mdx": "markdown"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Usage
|
||||
|
||||
With the Astro MDX integration, you can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory. You can also [import `.mdx` files](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) into `.astro` files.
|
||||
With the Astro MDX integration, you can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory. You can also [import `.mdx` files](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) into `.astro` files.
|
||||
|
||||
Astro's MDX integration adds extra features to standard MDX, including Markdown-style frontmatter. This allows you to use most of Astro's built-in Markdown features like a [special frontmatter `layout` property](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout) and a [property for marking a page as a draft](https://docs.astro.build/en/guides/markdown-content/#draft-pages).
|
||||
|
||||
|
|
@ -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.
|
||||
:::
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -110,9 +112,9 @@ export default defineConfig({
|
|||
rehypePlugins: [rehypeMinifyHtml],
|
||||
remarkRehype: { footnoteLabel: 'Footnotes' },
|
||||
gfm: false,
|
||||
})
|
||||
]
|
||||
})
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
:::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:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -151,14 +153,14 @@ export default defineConfig({
|
|||
remarkPlugins: [remarkPlugin2],
|
||||
// `gfm` overridden to `false`
|
||||
gfm: 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
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -173,8 +175,8 @@ export default defineConfig({
|
|||
// Markdown config now ignored
|
||||
extendMarkdownConfig: false,
|
||||
// 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:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -202,8 +204,8 @@ export default defineConfig({
|
|||
integrations: [
|
||||
mdx({
|
||||
optimize: true,
|
||||
})
|
||||
]
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -213,7 +215,7 @@ export default defineConfig({
|
|||
|
||||
An optional property of `optimize` to prevent the MDX optimizer from handling any [custom components passed to imported MDX content via the components prop](https://docs.astro.build/en/guides/markdown-content/#custom-components-with-imported-mdx).
|
||||
|
||||
You will need to exclude these components from optimization as the optimizer eagerly converts content into a static string, which will break custom components that needs to be dynamically rendered.
|
||||
You will need to exclude these components from optimization as the optimizer eagerly converts content into a static string, which will break custom components that needs to be dynamically rendered.
|
||||
|
||||
For example, the intended MDX output of the following is `<Heading>...</Heading>` in place of every `"<h1>...</h1>"`:
|
||||
|
||||
|
|
@ -223,12 +225,12 @@ import { Content, components } from '../content.mdx';
|
|||
import Heading from '../Heading.astro';
|
||||
---
|
||||
|
||||
<Content components={{...components, h1: Heading }} />
|
||||
<Content components={{ ...components, h1: Heading }} />
|
||||
```
|
||||
|
||||
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
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -242,8 +244,8 @@ export default defineConfig({
|
|||
// These will be treated as custom components
|
||||
customComponentNames: ['h1'],
|
||||
},
|
||||
})
|
||||
]
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -251,7 +253,7 @@ Note that if your MDX file [configures custom components using `export const com
|
|||
|
||||
## 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
|
||||
|
||||
|
|
@ -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.
|
||||
|
||||
[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
|
||||
|
|
|
|||
|
|
@ -58,18 +58,18 @@ Flow:
|
|||
|
||||
1. Walk the `hast` tree.
|
||||
2. For each `node` we enter, if the `node` is static (`type` is `element` or `mdxJsxFlowElement`), record in `allPossibleElements` and push to `elementStack`.
|
||||
- Q: Why do we record `mdxJsxFlowElement`, it's MDX? <br>
|
||||
A: Because we're looking for nodes whose children are static. The node itself doesn't need to be static.
|
||||
- Q: Are we sure this is the subtree root node in `allPossibleElements`? <br>
|
||||
A: No, but we'll clear that up later in step 3.
|
||||
- Q: Why do we record `mdxJsxFlowElement`, it's MDX? <br>
|
||||
A: Because we're looking for nodes whose children are static. The node itself doesn't need to be static.
|
||||
- Q: Are we sure this is the subtree root node in `allPossibleElements`? <br>
|
||||
A: No, but we'll clear that up later in step 3.
|
||||
3. For each `node` we leave, pop from `elementStack`. If the `node`'s parent is in `allPossibleElements`, we also remove the `node` from `allPossibleElements`.
|
||||
- Q: Why do we check for the node's parent? <br>
|
||||
A: Checking for the node's parent allows us to identify a subtree root. When we enter a subtree like `C -> D -> E`, we leave in reverse: `E -> D -> C`. When we leave `E`, we see that it's parent `D` exists, so we remove `E`. When we leave `D`, we see `C` exists, so we remove `D`. When we leave `C`, we see that its parent doesn't exist, so we keep `C`, a subtree root.
|
||||
- Q: Why do we check for the node's parent? <br>
|
||||
A: Checking for the node's parent allows us to identify a subtree root. When we enter a subtree like `C -> D -> E`, we leave in reverse: `E -> D -> C`. When we leave `E`, we see that it's parent `D` exists, so we remove `E`. When we leave `D`, we see `C` exists, so we remove `D`. When we leave `C`, we see that its parent doesn't exist, so we keep `C`, a subtree root.
|
||||
4. _(Returning to the code written for step 2's `node` enter handling)_ We also need to handle the case where we find non-static elements. If found, we remove all the elements in `elementStack` from `allPossibleElements`. This happens before the code in step 2.
|
||||
- Q: Why? <br>
|
||||
A: Because if the `node` isn't static, that means all its ancestors (`elementStack`) have non-static children. So, the ancestors couldn't be a subtree root to be optimized anymore.
|
||||
- Q: Why before step 2's `node` enter handling? <br>
|
||||
A: If we find a non-static `node`, the `node` should still be considered in `allPossibleElements` as its children could be static.
|
||||
- Q: Why? <br>
|
||||
A: Because if the `node` isn't static, that means all its ancestors (`elementStack`) have non-static children. So, the ancestors couldn't be a subtree root to be optimized anymore.
|
||||
- Q: Why before step 2's `node` enter handling? <br>
|
||||
A: If we find a non-static `node`, the `node` should still be considered in `allPossibleElements` as its children could be static.
|
||||
5. Walk done. This leaves us with `allPossibleElements` containing only subtree roots that can be optimized.
|
||||
6. Add the `set:html` property to the `hast` node, and remove its children.
|
||||
7. 🎉 The rest of the MDX pipeline will do its thing and generate the desired JSX like above.
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ Learn how to deploy your Astro site in our [Netlify deployment guide](https://do
|
|||
- <strong>[Contributing](#contributing)</strong>
|
||||
- <strong>[Changelog](#changelog)</strong>
|
||||
|
||||
|
||||
## 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.
|
||||
|
|
@ -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.
|
||||
|
||||
|
||||
## 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.
|
||||
|
|
@ -40,22 +38,22 @@ If you prefer to install the adapter manually instead, complete the following tw
|
|||
|
||||
1. Install the Netlify adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
|
||||
|
||||
```bash
|
||||
npm install @astrojs/netlify
|
||||
```
|
||||
```bash
|
||||
npm install @astrojs/netlify
|
||||
```
|
||||
|
||||
1. Add two new lines to your `astro.config.mjs` project configuration file.
|
||||
|
||||
```js ins={3, 6-7}
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import netlify from '@astrojs/netlify/functions';
|
||||
```js ins={3, 6-7}
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import netlify from '@astrojs/netlify/functions';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: netlify(),
|
||||
});
|
||||
```
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: netlify(),
|
||||
});
|
||||
```
|
||||
|
||||
### Edge Functions
|
||||
|
||||
|
|
@ -76,7 +74,7 @@ export default defineConfig({
|
|||
|
||||
### Static sites
|
||||
|
||||
For static sites you usually don't need an adapter. However, if you use `redirects` configuration (experimental) in your Astro config, the Netlify adapter can be used to translate this to the proper `_redirects` format.
|
||||
For static sites you usually don't need an adapter. However, if you use `redirects` configuration (experimental) in your Astro config, the Netlify adapter can be used to translate this to the proper `_redirects` format.
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -86,11 +84,11 @@ export default defineConfig({
|
|||
adapter: netlify(),
|
||||
|
||||
redirects: {
|
||||
'/blog/old-post': '/blog/new-post'
|
||||
'/blog/old-post': '/blog/new-post',
|
||||
},
|
||||
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.
|
||||
|
||||
|
||||
## Configuration
|
||||
|
||||
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({
|
||||
output: 'server',
|
||||
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({
|
||||
output: 'server',
|
||||
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.
|
||||
|
||||
|
||||
|
||||
### binaryMediaTypes
|
||||
|
||||
> 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, {
|
||||
status: 200,
|
||||
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.
|
||||
|
||||
[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
|
||||
|
||||
|
|
|
|||
|
|
@ -8,8 +8,7 @@ This adapter allows Astro to deploy your SSR site to Node targets.
|
|||
- <strong>[Usage](#usage)</strong>
|
||||
- <strong>[Troubleshooting](#troubleshooting)</strong>
|
||||
- <strong>[Contributing](#contributing)</strong>
|
||||
- <strong>[Changelog](#changelog)</strong>
|
||||
|
||||
- <strong>[Changelog](#changelog)</strong>
|
||||
|
||||
## Why @astrojs/node
|
||||
|
||||
|
|
@ -36,24 +35,24 @@ If you prefer to install the adapter manually instead, complete the following tw
|
|||
|
||||
1. Install the Node adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
|
||||
|
||||
```bash
|
||||
npm install @astrojs/node
|
||||
```
|
||||
```bash
|
||||
npm install @astrojs/node
|
||||
```
|
||||
|
||||
1. Add two new lines to your `astro.config.mjs` project configuration file.
|
||||
|
||||
```js ins={3, 6-9}
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import node from '@astrojs/node';
|
||||
```js ins={3, 6-9}
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import node from '@astrojs/node';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: node({
|
||||
mode: 'standalone'
|
||||
}),
|
||||
});
|
||||
```
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: node({
|
||||
mode: 'standalone',
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
|
|
@ -64,17 +63,19 @@ If you prefer to install the adapter manually instead, complete the following tw
|
|||
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.
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import node from '@astrojs/node';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: node({
|
||||
mode: 'middleware'
|
||||
}),
|
||||
});
|
||||
```
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import node from '@astrojs/node';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: node({
|
||||
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.
|
||||
|
||||
## Usage
|
||||
|
|
@ -92,10 +93,10 @@ import express from 'express';
|
|||
import { handler as ssrHandler } from './dist/server/entry.mjs';
|
||||
|
||||
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 "/".
|
||||
const base = "/";
|
||||
app.use(base, express.static('dist/client/'))
|
||||
const base = '/';
|
||||
app.use(base, express.static('dist/client/'));
|
||||
app.use(ssrHandler);
|
||||
|
||||
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.
|
||||
|
||||
|
||||
#### Custom host and port
|
||||
|
||||
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
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
import node from "@astrojs/node";
|
||||
import node from '@astrojs/node';
|
||||
|
||||
export default defineConfig({
|
||||
output: "server",
|
||||
output: 'server',
|
||||
adapter: node(),
|
||||
vite: {
|
||||
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.
|
||||
|
||||
|
||||
- <strong>[Why Astro Partytown](#why-astro-partytown)</strong>
|
||||
- <strong>[Installation](#installation)</strong>
|
||||
- <strong>[Usage](#usage)</strong>
|
||||
|
|
@ -23,9 +22,9 @@ The Astro Partytown integration installs Partytown for you and makes sure it's e
|
|||
## Installation
|
||||
|
||||
### Quick Install
|
||||
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add partytown
|
||||
|
|
@ -34,18 +33,20 @@ yarn astro add partytown
|
|||
# Using PNPM
|
||||
pnpm astro add partytown
|
||||
```
|
||||
|
||||
|
||||
If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
|
||||
### Manual Install
|
||||
|
||||
|
||||
First, install the `@astrojs/partytown` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||
|
||||
```sh
|
||||
npm install @astrojs/partytown
|
||||
```
|
||||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -54,9 +55,8 @@ import partytown from '@astrojs/partytown';
|
|||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [partytown()],
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -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`.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
...
|
||||
// ...
|
||||
export default defineConfig({
|
||||
integrations: [partytown({
|
||||
config: {
|
||||
//options go here
|
||||
}
|
||||
})]
|
||||
integrations: [
|
||||
partytown({
|
||||
config: {
|
||||
//options go here
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -89,46 +92,49 @@ This mirrors the [Partytown config object](https://partytown.builder.io/configur
|
|||
|
||||
### config.debug
|
||||
|
||||
Partytown ships with a `debug` mode; enable or disable it by passing `true` or `false` to `config.debug`. If [`debug` mode](https://partytown.builder.io/debugging) is enabled, it will output detailed logs to the browser console.
|
||||
Partytown ships with a `debug` mode; enable or disable it by passing `true` or `false` to `config.debug`. If [`debug` mode](https://partytown.builder.io/debugging) is enabled, it will output detailed logs to the browser console.
|
||||
|
||||
If this option isn't set, `debug` mode will be on by default in [dev](https://docs.astro.build/en/reference/cli-reference/#astro-dev) or [preview](https://docs.astro.build/en/reference/cli-reference/#astro-preview) mode.
|
||||
If this option isn't set, `debug` mode will be on by default in [dev](https://docs.astro.build/en/reference/cli-reference/#astro-dev) or [preview](https://docs.astro.build/en/reference/cli-reference/#astro-preview) mode.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
export default defineConfig({
|
||||
integrations: [partytown({
|
||||
// Example: Disable debug mode.
|
||||
config: { debug: false },
|
||||
})]
|
||||
})
|
||||
integrations: [
|
||||
partytown({
|
||||
// Example: Disable debug mode.
|
||||
config: { debug: false },
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### config.forward
|
||||
|
||||
Third-party scripts typically add variables to the `window` object so that you can communicate with them throughout your site. But when a script is loaded in a web-worker, it doesn't have access to that global `window` object.
|
||||
|
||||
To solve this, Partytown can "patch" variables to the global window object and forward them to the appropriate script.
|
||||
Third-party scripts typically add variables to the `window` object so that you can communicate with them throughout your site. But when a script is loaded in a web-worker, it doesn't have access to that global `window` object.
|
||||
|
||||
You can specify which variables to forward with the `config.forward` option. [Read more in Partytown's documentation.](https://partytown.builder.io/forwarding-events)
|
||||
To solve this, Partytown can "patch" variables to the global window object and forward them to the appropriate script.
|
||||
|
||||
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
|
||||
export default defineConfig ({
|
||||
integrations: [partytown({
|
||||
// Example: Add dataLayer.push as a forwarding-event.
|
||||
config: {
|
||||
forward: ["dataLayer.push"]
|
||||
},
|
||||
})],
|
||||
})
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
partytown({
|
||||
// Example: Add dataLayer.push as a forwarding-event.
|
||||
config: {
|
||||
forward: ['dataLayer.push'],
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
- [Browse projects with Astro Partytown on GitHub](https://github.com/search?q=%22@astrojs/partytown%22+filename:package.json&type=Code) for more examples!
|
||||
- [Browse projects with Astro Partytown on GitHub](https://github.com/search?q=%22@astrojs/partytown%22+filename:package.json&type=Code) for more examples!
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ npm install preact
|
|||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "preact()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -68,6 +68,7 @@ export default defineConfig({
|
|||
## Usage
|
||||
|
||||
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,
|
||||
- 💧 client-side hydration options, and
|
||||
- 🤝 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`.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js "compat: true"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import preact from '@astrojs/preact';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
preact({ compat: true })
|
||||
],
|
||||
integrations: [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.
|
||||
|
||||
```js
|
||||
```json
|
||||
// package.json
|
||||
{
|
||||
"overrides": {
|
||||
|
|
@ -118,7 +117,6 @@ Check out the [`pnpm` overrides](https://pnpm.io/package_json#pnpmoverrides) and
|
|||
> **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.
|
||||
|
||||
|
||||
## 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.
|
||||
|
|
|
|||
|
|
@ -17,9 +17,9 @@ To further improve the experience, especially on similar pages, stylesheets are
|
|||
## Installation
|
||||
|
||||
### Quick Install
|
||||
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add prefetch
|
||||
|
|
@ -28,18 +28,20 @@ yarn astro add prefetch
|
|||
# Using PNPM
|
||||
pnpm astro add prefetch
|
||||
```
|
||||
|
||||
|
||||
If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
|
||||
### Manual Install
|
||||
|
||||
|
||||
First, install the `@astrojs/prefetch` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||
|
||||
```sh
|
||||
npm install @astrojs/prefetch
|
||||
```
|
||||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "prefetch()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -50,7 +52,6 @@ export default defineConfig({
|
|||
integrations: [prefetch()],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -61,10 +62,10 @@ When you install the integration, the prefetch script is automatically added to
|
|||
The Astro Prefetch integration handles which links on the site are prefetched and it has its own options. Change these in the `astro.config.mjs` file which is where your project's integration settings live.
|
||||
|
||||
### config.selector
|
||||
|
||||
By default the prefetch script searches the page for any links that include a `rel="prefetch"` attribute, ex: `<a rel="prefetch" />` or `<a rel="nofollow prefetch" />`. This behavior can be changed in your `astro.config.*` file to use a custom query selector when finding prefetch links.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
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`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -72,17 +73,20 @@ import prefetch from '@astrojs/prefetch';
|
|||
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [prefetch({
|
||||
// Only prefetch links with an href that begins with `/products`
|
||||
selector: "a[href^='/products']"
|
||||
})],
|
||||
integrations: [
|
||||
prefetch({
|
||||
// Only prefetch links with an href that begins with `/products`
|
||||
selector: "a[href^='/products']",
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -90,14 +94,17 @@ import prefetch from '@astrojs/prefetch';
|
|||
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [prefetch({
|
||||
// Allow up to three links to be prefetched concurrently
|
||||
throttle: 3
|
||||
})],
|
||||
integrations: [
|
||||
prefetch({
|
||||
// Allow up to three links to be prefetched concurrently
|
||||
throttle: 3,
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
- 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.
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ There are two ways to add integrations to your project. Let's try the most conve
|
|||
### `astro add` command
|
||||
|
||||
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||
|
||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||
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:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "react()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -56,6 +57,7 @@ export default defineConfig({
|
|||
## Getting started
|
||||
|
||||
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,
|
||||
- 💧 client-side hydration options, and
|
||||
- 🤝 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.
|
||||
|
||||
|
||||
- <strong>[Why Astro Sitemap](#why-astro-sitemap)</strong>
|
||||
- <strong>[Installation](#installation)</strong>
|
||||
- <strong>[Usage](#usage)</strong>
|
||||
|
|
@ -23,9 +22,9 @@ With Astro Sitemap, you don't have to worry about creating this file: build your
|
|||
## Installation
|
||||
|
||||
### Quick Install
|
||||
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add sitemap
|
||||
|
|
@ -34,18 +33,20 @@ yarn astro add sitemap
|
|||
# Using PNPM
|
||||
pnpm astro add sitemap
|
||||
```
|
||||
|
||||
|
||||
If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
|
||||
### Manual Install
|
||||
|
||||
|
||||
First, install the `@astrojs/sitemap` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||
|
||||
```sh
|
||||
npm install @astrojs/sitemap
|
||||
```
|
||||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "sitemap()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -54,15 +55,14 @@ import sitemap from '@astrojs/sitemap';
|
|||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [sitemap()],
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
## 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:`.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -72,7 +72,7 @@ export default defineConfig({
|
|||
// ...
|
||||
site: 'https://stargazers.club',
|
||||
integrations: [sitemap()],
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
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}
|
||||
// src/layouts/Layout.astro
|
||||
<head>
|
||||
<link rel="sitemap" href="/sitemap-index.xml">
|
||||
<link rel="sitemap" href="/sitemap-index.xml" />
|
||||
</head>
|
||||
```
|
||||
|
||||
```yaml ins={4} title="public/robots.txt"
|
||||
```txt ins={4} title="public/robots.txt"
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
|
|
@ -129,66 +129,69 @@ Sitemap: https://<YOUR SITE>/sitemap-index.xml
|
|||
|
||||
To configure this integration, pass an object to the `sitemap()` function call in `astro.config.mjs`.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [sitemap({
|
||||
filter: ...
|
||||
})]
|
||||
integrations: [
|
||||
sitemap({
|
||||
// configuration options
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
### filter
|
||||
|
||||
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`__
|
||||
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`**
|
||||
|
||||
```js
|
||||
...
|
||||
sitemap({
|
||||
filter: (page) => page !== 'https://stargazers.club/secret-vip-lounge'
|
||||
}),
|
||||
// ...
|
||||
sitemap({
|
||||
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.
|
||||
|
||||
To filter multiple pages, add arguments with target URLs.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
...
|
||||
sitemap({
|
||||
filter: (page) =>
|
||||
page !== "https://stargazers.club/secret-vip-lounge-1" &&
|
||||
page !== "https://stargazers.club/secret-vip-lounge-2" &&
|
||||
page !== "https://stargazers.club/secret-vip-lounge-3" &&
|
||||
page !== "https://stargazers.club/secret-vip-lounge-4",
|
||||
}),
|
||||
// ...
|
||||
sitemap({
|
||||
filter: (page) =>
|
||||
page !== 'https://stargazers.club/secret-vip-lounge-1' &&
|
||||
page !== 'https://stargazers.club/secret-vip-lounge-2' &&
|
||||
page !== 'https://stargazers.club/secret-vip-lounge-3' &&
|
||||
page !== 'https://stargazers.club/secret-vip-lounge-4',
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
### 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.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
...
|
||||
sitemap({
|
||||
customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2']
|
||||
}),
|
||||
// ...
|
||||
sitemap({
|
||||
customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2'],
|
||||
});
|
||||
```
|
||||
|
||||
### 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).
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -208,12 +211,12 @@ export default defineConfig({
|
|||
|
||||
These options correspond to the `<changefreq>`, `<lastmod>`, and `<priority>` tags in the [Sitemap XML specification.](https://www.sitemaps.org/protocol.html)
|
||||
|
||||
Note that `changefreq` and `priority` are ignored by Google.
|
||||
Note that `changefreq` and `priority` are ignored by Google.
|
||||
|
||||
> **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.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -236,21 +239,22 @@ export default defineConfig({
|
|||
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:
|
||||
- `url` (absolute page URL). This is the only property that is guaranteed to be on `SitemapItem`.
|
||||
- `changefreq`
|
||||
- `lastmod` (ISO formatted date, `String` type)
|
||||
- `priority`
|
||||
- `links`.
|
||||
|
||||
This `links` property contains a `LinkItem` list of alternate pages including a parent page.
|
||||
- `url` (absolute page URL). This is the only property that is guaranteed to be on `SitemapItem`.
|
||||
- `changefreq`
|
||||
- `lastmod` (ISO formatted date, `String` type)
|
||||
- `priority`
|
||||
- `links`.
|
||||
|
||||
This `links` property contains a `LinkItem` list of alternate pages including a parent page.
|
||||
|
||||
The `LinkItem` type has two fields: `url` (the fully-qualified URL for the version of this page for the specified language) and `lang` (a supported language code targeted by this version of the page).
|
||||
|
||||
The `serialize` function should return `SitemapItem`, touched or not.
|
||||
The `serialize` function should return `SitemapItem`, touched or not.
|
||||
|
||||
The example below shows the ability to add sitemap specific properties individually.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -283,13 +287,13 @@ To localize a sitemap, pass an object to this `i18n` option.
|
|||
This object has two required properties:
|
||||
|
||||
- `defaultLocale`: `String`. Its value must exist as one of `locales` keys.
|
||||
- `locales`: `Record<String, String>`, key/value - pairs. The key is used to look for a locale part in a page path. The value is a language attribute, only English alphabet and hyphen allowed.
|
||||
- `locales`: `Record<String, String>`, key/value - pairs. The key is used to look for a locale part in a page path. The value is a language attribute, only English alphabet and hyphen allowed.
|
||||
|
||||
[Read more about language attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang).
|
||||
|
||||
[Read more about localization](https://developers.google.com/search/docs/advanced/crawling/localized-versions#all-method-guidelines).
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -298,11 +302,11 @@ import sitemap from '@astrojs/sitemap';
|
|||
export default defineConfig({
|
||||
site: 'https://stargazers.club',
|
||||
integrations: [
|
||||
sitemap({
|
||||
sitemap({
|
||||
i18n: {
|
||||
defaultLocale: 'en', // All urls that don't contain `es` or `fr` after `https://stargazers.club/` will be treated as default locale, i.e. `en`
|
||||
defaultLocale: 'en', // All urls that don't contain `es` or `fr` after `https://stargazers.club/` will be treated as default locale, i.e. `en`
|
||||
locales: {
|
||||
en: 'en-US', // The `defaultLocale` value must present in `locales` keys
|
||||
en: 'en-US', // The `defaultLocale` value must present in `locales` keys
|
||||
es: 'es-ES',
|
||||
fr: 'fr-CA',
|
||||
},
|
||||
|
|
@ -344,9 +348,10 @@ The resulting sitemap looks like this:
|
|||
```
|
||||
|
||||
## Examples
|
||||
|
||||
- The official Astro website uses Astro Sitemap to generate [its sitemap](https://astro.build/sitemap-index.xml).
|
||||
- The [integrations playground template](https://github.com/withastro/astro/tree/latest/examples/integrations-playground?on=github) comes with Astro Sitemap installed. Try adding a route and building the project!
|
||||
- [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!
|
||||
|
||||
## Troubleshooting
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@ There are two ways to add integrations to your project. Let's try the most conve
|
|||
### `astro add` command
|
||||
|
||||
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||
|
||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||
2. (Also optionally) Update your `astro.config.*` file to apply this integration
|
||||
|
||||
|
|
@ -41,21 +42,22 @@ npm install solid-js
|
|||
|
||||
Now, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "solid()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import solid from '@astrojs/solid-js';
|
||||
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [solid()],
|
||||
// ...
|
||||
integrations: [solid()],
|
||||
});
|
||||
```
|
||||
|
||||
## Getting started
|
||||
|
||||
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,
|
||||
- 💧 client-side hydration options, and
|
||||
- 🤝 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 includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||
|
||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||
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:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "svelte()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -56,6 +57,7 @@ export default defineConfig({
|
|||
## Getting started
|
||||
|
||||
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,
|
||||
- 💧 client-side hydration options, and
|
||||
- 🤝 opportunities to mix and nest frameworks together
|
||||
|
|
@ -85,7 +87,7 @@ This integration passes the following default options to the Svelte compiler:
|
|||
const defaultOptions = {
|
||||
emitCss: 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:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -106,7 +108,7 @@ export default defineConfig({
|
|||
});
|
||||
```
|
||||
|
||||
__`svelte.config.js`__
|
||||
**`svelte.config.js`**
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
__`svelte.config.js`__
|
||||
**`svelte.config.js`**
|
||||
|
||||
```js
|
||||
import { vitePreprocess } from '@astrojs/svelte';
|
||||
|
|
|
|||
|
|
@ -17,20 +17,18 @@ Tailwind lets you use utility classes instead of writing CSS. These utility clas
|
|||
|
||||
If you don't like those predefined settings, you can [customize the Tailwind configuration file](https://tailwindcss.com/docs/configuration) to your project's design requirements. For example, if the "large text" in your design is actually `2rem`, you can [change the `lg` fontSize setting](https://tailwindcss.com/docs/font-size#customizing-your-theme) to `2rem`.
|
||||
|
||||
Tailwind is also a great choice to add styles to React, Preact, or Solid components, which don't support a `<style>` tag in the component file.
|
||||
Tailwind is also a great choice to add styles to React, Preact, or Solid components, which don't support a `<style>` tag in the component file.
|
||||
|
||||
Note: it's generally discouraged to use both Tailwind and another styling method (e.g. Styled Components) in the same file.
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
https://user-images.githubusercontent.com/4033662/197398760-8fd30eff-4d13-449d-a598-00a6a1ac4644.mp4
|
||||
|
||||
|
||||
### Quick Install
|
||||
|
||||
|
||||
The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
|
||||
|
||||
|
||||
```sh
|
||||
# Using NPM
|
||||
npx astro add tailwind
|
||||
|
|
@ -39,18 +37,20 @@ yarn astro add tailwind
|
|||
# Using PNPM
|
||||
pnpm astro add tailwind
|
||||
```
|
||||
|
||||
|
||||
If you run into any issues, [feel free to report them to us on GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
|
||||
|
||||
### 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:
|
||||
|
||||
```sh
|
||||
npm install @astrojs/tailwind tailwindcss
|
||||
```
|
||||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "tailwind()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -61,8 +61,6 @@ export default defineConfig({
|
|||
integrations: [tailwind()],
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
|
|
@ -87,23 +85,25 @@ The Astro Tailwind integration handles the communication between Astro and Tailw
|
|||
#### configFile
|
||||
|
||||
Previously known as `config.path` in `@astrojs/tailwind` v3. See the [v4 changelog](https://github.com/withastro/astro/blob/main/packages/integrations/tailwind/CHANGELOG.md#400) for updating your config.
|
||||
|
||||
|
||||
If you want to use a different Tailwind configuration file instead of the default `tailwind.config.(js|cjs|mjs)`, specify that file's location using this integration's `configFile` option. If `configFile` is relative, it will be resolved relative to the current working directory.
|
||||
|
||||
> **Warning**
|
||||
> 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
|
||||
import { defineConfig } from 'astro/config';
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [tailwind({
|
||||
// Example: Provide a custom path to a Tailwind config file
|
||||
configFile: './custom-config.cjs',
|
||||
})],
|
||||
integrations: [
|
||||
tailwind({
|
||||
// Example: Provide a custom path to a Tailwind config file
|
||||
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.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [tailwind({
|
||||
// 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`.
|
||||
applyBaseStyles: false,
|
||||
})],
|
||||
integrations: [
|
||||
tailwind({
|
||||
// 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`.
|
||||
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:
|
||||
|
||||
|
||||
```js
|
||||
// tailwind.config.cjs
|
||||
module.exports = {
|
||||
|
|
@ -167,12 +168,12 @@ module.exports = {
|
|||
addComponents({
|
||||
'.btn': {
|
||||
padding: theme('spacing.4'),
|
||||
margin: 'auto'
|
||||
}
|
||||
})
|
||||
}
|
||||
]
|
||||
}
|
||||
margin: 'auto',
|
||||
},
|
||||
});
|
||||
},
|
||||
],
|
||||
};
|
||||
```
|
||||
|
||||
### 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
|
||||
|
||||
Astro includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||
|
||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||
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:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@ If you're using Astro as a static site builder — its behavior out of the box
|
|||
|
||||
If you wish to [use server-side rendering (SSR)](https://docs.astro.build/en/guides/server-side-rendering/), Astro requires an adapter that matches your deployment runtime.
|
||||
|
||||
[Vercel](https://www.vercel.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 Vercel.
|
||||
[Vercel](https://www.vercel.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 Vercel.
|
||||
|
||||
## Installation
|
||||
|
||||
|
|
@ -37,22 +37,22 @@ If you prefer to install the adapter manually instead, complete the following tw
|
|||
|
||||
1. Install the Vercel adapter to your project’s dependencies using your preferred package manager. If you’re using npm or aren’t sure, run this in the terminal:
|
||||
|
||||
```bash
|
||||
npm install @astrojs/vercel
|
||||
```
|
||||
```bash
|
||||
npm install @astrojs/vercel
|
||||
```
|
||||
|
||||
1. Add two new lines to your `astro.config.mjs` project configuration file.
|
||||
|
||||
```js ins={3, 6-7}
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import vercel from '@astrojs/vercel/serverless';
|
||||
```js ins={3, 6-7}
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import vercel from '@astrojs/vercel/serverless';
|
||||
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: vercel(),
|
||||
});
|
||||
```
|
||||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: vercel(),
|
||||
});
|
||||
```
|
||||
|
||||
### Targets
|
||||
|
||||
|
|
@ -103,8 +103,8 @@ import vercel from '@astrojs/vercel/serverless';
|
|||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: vercel({
|
||||
analytics: true
|
||||
})
|
||||
analytics: true,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -125,9 +125,9 @@ export default defineConfig({
|
|||
output: 'server',
|
||||
adapter: vercel({
|
||||
imagesConfig: {
|
||||
sizes: [320, 640, 1280]
|
||||
}
|
||||
})
|
||||
sizes: [320, 640, 1280],
|
||||
},
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -147,22 +147,29 @@ import vercel from '@astrojs/vercel/static';
|
|||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: vercel({
|
||||
imageService: true
|
||||
})
|
||||
imageService: true,
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
```astro
|
||||
---
|
||||
import { Image } from "astro:assets";
|
||||
import astroLogo from "../assets/logo.png";
|
||||
import { Image } from 'astro:assets';
|
||||
import astroLogo from '../assets/logo.png';
|
||||
---
|
||||
|
||||
<!-- This component -->
|
||||
<Image src={astroLogo} alt="My super logo!" />
|
||||
|
||||
<!-- 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
|
||||
|
|
@ -180,8 +187,8 @@ import vercel from '@astrojs/vercel/serverless';
|
|||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: vercel({
|
||||
includeFiles: ['./my-data.json']
|
||||
})
|
||||
includeFiles: ['./my-data.json'],
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -203,8 +210,8 @@ import vercel from '@astrojs/vercel/serverless';
|
|||
export default defineConfig({
|
||||
output: 'server',
|
||||
adapter: vercel({
|
||||
excludeFiles: ['./src/some_big_file.jpg']
|
||||
})
|
||||
excludeFiles: ['./src/some_big_file.jpg'],
|
||||
}),
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -214,24 +221,26 @@ You can use Vercel middleware to intercept a request and redirect before sending
|
|||
|
||||
1. Add a `middleware.js` file to the root of your project:
|
||||
|
||||
```js
|
||||
// middleware.js
|
||||
export const config = {
|
||||
// Only run the middleware on the admin route
|
||||
matcher: '/admin',
|
||||
};
|
||||
```js
|
||||
// middleware.js
|
||||
export const config = {
|
||||
// Only run the middleware on the admin route
|
||||
matcher: '/admin',
|
||||
};
|
||||
|
||||
export default function middleware(request) {
|
||||
const url = new URL(request.url);
|
||||
// You can retrieve IP location or cookies here.
|
||||
if (url.pathname === '/admin') {
|
||||
url.pathname = '/';
|
||||
}
|
||||
return Response.redirect(url);
|
||||
}
|
||||
```
|
||||
|
||||
export default function middleware(request) {
|
||||
const url = new URL(request.url);
|
||||
// You can retrieve IP location or cookies here.
|
||||
if (url.pathname === "/admin") {
|
||||
url.pathname = "/"
|
||||
}
|
||||
return Response.redirect(url);
|
||||
}
|
||||
```
|
||||
1. While developing locally, you can run `vercel dev` to run middleware. In production, Vercel will handle this for you.
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
> **Warning**
|
||||
> **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 includes a CLI tool for adding first party integrations: `astro add`. This command will:
|
||||
|
||||
1. (Optionally) Install all necessary dependencies and peer dependencies
|
||||
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:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js ins={2} "vue()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -56,6 +57,7 @@ export default defineConfig({
|
|||
## Getting started
|
||||
|
||||
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,
|
||||
- 💧 client-side hydration options, and
|
||||
- 🤝 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.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -85,15 +87,17 @@ import vue from '@astrojs/vue';
|
|||
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [vue({
|
||||
template: {
|
||||
compilerOptions: {
|
||||
// treat any tag that starts with ion- as custom elements
|
||||
isCustomElement: tag => tag.startsWith('ion-')
|
||||
}
|
||||
}
|
||||
// ...
|
||||
})],
|
||||
integrations: [
|
||||
vue({
|
||||
template: {
|
||||
compilerOptions: {
|
||||
// treat any tag that starts with ion- as custom elements
|
||||
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.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import vue from '@astrojs/vue';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
vue({ appEntrypoint: '/src/pages/_app' })
|
||||
],
|
||||
integrations: [vue({ appEntrypoint: '/src/pages/_app' })],
|
||||
});
|
||||
```
|
||||
|
||||
__`src/pages/_app.ts`__
|
||||
**`src/pages/_app.ts`**
|
||||
|
||||
```js
|
||||
import type { App } from 'vue';
|
||||
|
|
@ -124,29 +126,27 @@ import i18nPlugin from 'my-vue-i18n-plugin';
|
|||
|
||||
export default (app: App) => {
|
||||
app.use(i18nPlugin);
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
### jsx
|
||||
|
||||
You can use Vue JSX by setting `jsx: true`.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import vue from '@astrojs/vue';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [
|
||||
vue({ jsx: true })
|
||||
],
|
||||
integrations: [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.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
**`astro.config.mjs`**
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
|
|
@ -157,9 +157,9 @@ export default defineConfig({
|
|||
vue({
|
||||
jsx: {
|
||||
// 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.
|
||||
|
||||
> **Warning**
|
||||
> The `<Markdown />` component does not work in SSR. Consider [importing Markdown content](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) instead.
|
||||
:::
|
||||
|
||||
```astro
|
||||
---
|
||||
import Markdown from '@astrojs/markdown-component';
|
||||
---
|
||||
<Markdown>
|
||||
# Markdown syntax is now supported! **Yay!**
|
||||
</Markdown>
|
||||
|
||||
<Markdown># Markdown syntax is now supported! **Yay!**</Markdown>
|
||||
```
|
||||
|
||||
See our [Markdown Guide](https://docs.astro.build/en/guides/markdown-content/) for more info.
|
||||
|
|
|
|||
|
|
@ -108,8 +108,8 @@ The `exclude` option receives a list of WebAPIs to exclude from polyfilling.
|
|||
|
||||
```js
|
||||
polyfill(globalThis, {
|
||||
// disables polyfills for setTimeout clearTimeout
|
||||
exclude: 'setTimeout clearTimeout',
|
||||
// disables polyfills for setTimeout clearTimeout
|
||||
exclude: 'setTimeout clearTimeout',
|
||||
})
|
||||
```
|
||||
|
||||
|
|
@ -117,39 +117,37 @@ The `exclude` option accepts shorthands to exclude multiple polyfills. These sho
|
|||
|
||||
```js
|
||||
polyfill(globalThis, {
|
||||
// disables polyfills for setTimeout clearTimeout
|
||||
exclude: 'Timeout+',
|
||||
// disables polyfills for setTimeout clearTimeout
|
||||
exclude: 'Timeout+',
|
||||
})
|
||||
```
|
||||
|
||||
```js
|
||||
polyfill(globalThis, {
|
||||
// disables polyfills for Node, Window, Document, HTMLElement, etc.
|
||||
exclude: 'Node+',
|
||||
// disables polyfills for Node, Window, Document, HTMLElement, etc.
|
||||
exclude: 'Node+',
|
||||
})
|
||||
```
|
||||
|
||||
```js
|
||||
polyfill(globalThis, {
|
||||
// disables polyfills for Event, EventTarget, Node, Window, Document, HTMLElement, etc.
|
||||
exclude: 'Event+',
|
||||
// disables polyfills for Event, EventTarget, Node, Window, Document, HTMLElement, etc.
|
||||
exclude: 'Event+',
|
||||
})
|
||||
```
|
||||
|
||||
| Shorthand | Excludes |
|
||||
|:-------------- |:-------- |
|
||||
| `Document+` | `Document`, `HTMLDocument` |
|
||||
| `Element+` | `Element`, and exclusions from `HTMLElement+` |
|
||||
| `Event+` | `Event`, `CustomEvent`, `EventTarget`, `MediaQueryList`, `Window`, and exclusions from `Node+` |
|
||||
| `EventTarget+` | `Event`, `CustomEvent`, `EventTarget`, `MediaQueryList`, `Window`, and exclusions from `Node+` |
|
||||
| Shorthand | Excludes |
|
||||
| :------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| `Document+` | `Document`, `HTMLDocument` |
|
||||
| `Element+` | `Element`, and exclusions from `HTMLElement+` |
|
||||
| `Event+` | `Event`, `CustomEvent`, `EventTarget`, `MediaQueryList`, `Window`, and exclusions from `Node+` |
|
||||
| `EventTarget+` | `Event`, `CustomEvent`, `EventTarget`, `MediaQueryList`, `Window`, and exclusions from `Node+` |
|
||||
| `HTMLElement+` | `CustomElementsRegistry`, `HTMLElement`, `HTMLBodyElement`, `HTMLCanvasElement`, `HTMLDivElement`, `HTMLHeadElement`, `HTMLHtmlElement`, `HTMLImageElement`, `HTMLStyleElement`, `HTMLTemplateElement`, `HTMLUnknownElement`, `Image` |
|
||||
| `Node+` | `Node`, `DocumentFragment`, `ShadowRoot`, `Document`, `HTMLDocument`, and exclusions from `Element+` |
|
||||
| `StyleSheet+` | `StyleSheet`, `CSSStyleSheet` |
|
||||
| `Node+` | `Node`, `DocumentFragment`, `ShadowRoot`, `Document`, `HTMLDocument`, and exclusions from `Element+` |
|
||||
| `StyleSheet+` | `StyleSheet`, `CSSStyleSheet` |
|
||||
|
||||
---
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
|
|
|
|||
|
|
@ -60,8 +60,8 @@ importers:
|
|||
specifier: ^2.8.8
|
||||
version: 2.8.8
|
||||
prettier-plugin-astro:
|
||||
specifier: ^0.8.1
|
||||
version: 0.8.1
|
||||
specifier: ^0.10.0
|
||||
version: 0.10.0
|
||||
tiny-glob:
|
||||
specifier: ^0.2.9
|
||||
version: 0.2.9
|
||||
|
|
@ -8150,6 +8150,7 @@ packages:
|
|||
open: 9.1.0
|
||||
picocolors: 1.0.0
|
||||
tslib: 2.5.3
|
||||
dev: false
|
||||
|
||||
/@playwright/test@1.29.2:
|
||||
resolution: {integrity: sha512-+3/GPwOgcoF0xLz/opTnahel1/y42PdcgZ4hs+BZGIUjtmEFSXGg+nFoaH3NSmuc7a6GSFwXDJ5L7VXpqzigNg==}
|
||||
|
|
@ -9635,6 +9636,7 @@ packages:
|
|||
/big-integer@1.6.51:
|
||||
resolution: {integrity: sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==}
|
||||
engines: {node: '>=0.6'}
|
||||
dev: false
|
||||
|
||||
/binary-extensions@2.2.0:
|
||||
resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==}
|
||||
|
|
@ -9705,6 +9707,7 @@ packages:
|
|||
engines: {node: '>= 5.10.0'}
|
||||
dependencies:
|
||||
big-integer: 1.6.51
|
||||
dev: false
|
||||
|
||||
/brace-expansion@1.1.11:
|
||||
resolution: {integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==}
|
||||
|
|
@ -9777,6 +9780,7 @@ packages:
|
|||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
run-applescript: 5.0.0
|
||||
dev: false
|
||||
|
||||
/busboy@1.6.0:
|
||||
resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==}
|
||||
|
|
@ -10460,6 +10464,7 @@ packages:
|
|||
dependencies:
|
||||
bplist-parser: 0.2.0
|
||||
untildify: 4.0.0
|
||||
dev: false
|
||||
|
||||
/default-browser@4.0.0:
|
||||
resolution: {integrity: sha512-wX5pXO1+BrhMkSbROFsyxUm0i/cJEScyNhA4PPxc41ICuv05ZZB/MX28s8aZx6xjmatvebIapF6hLEKEcpneUA==}
|
||||
|
|
@ -10469,6 +10474,7 @@ packages:
|
|||
default-browser-id: 3.0.0
|
||||
execa: 7.1.1
|
||||
titleize: 3.0.0
|
||||
dev: false
|
||||
|
||||
/defaults@1.0.4:
|
||||
resolution: {integrity: sha512-eFuaLoy/Rxalv2kr+lqMlUnrDWV+3j4pljOIJgLIhI058IQfWJ7vXhyEIHu+HtC738klGALYxOKDO0bQP3tg8A==}
|
||||
|
|
@ -10478,6 +10484,7 @@ packages:
|
|||
/define-lazy-prop@3.0.0:
|
||||
resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/define-properties@1.2.0:
|
||||
resolution: {integrity: sha512-xvqAVKGfT1+UAvPwKTVw/njhdQ8ZhXK4lI0bCIuCMrp2up9nPnaDftrLtmpTazqd1o+UY4zgzU+avtMbDP+ldA==}
|
||||
|
|
@ -11511,6 +11518,7 @@ packages:
|
|||
onetime: 5.1.2
|
||||
signal-exit: 3.0.7
|
||||
strip-final-newline: 2.0.0
|
||||
dev: false
|
||||
|
||||
/execa@6.1.0:
|
||||
resolution: {integrity: sha512-QVWlX2e50heYJcCPG0iWtf8r0xjEYfz/OYLGDYH+IyjWezzPNxz63qNFOu0l4YftGWuizFVZHHs8PrLU5p2IDA==}
|
||||
|
|
@ -11539,6 +11547,7 @@ packages:
|
|||
onetime: 6.0.0
|
||||
signal-exit: 3.0.7
|
||||
strip-final-newline: 3.0.0
|
||||
dev: false
|
||||
|
||||
/expand-template@2.0.3:
|
||||
resolution: {integrity: sha512-XYfuKMvj4O35f/pOXLObndIRvyQ+/+6AhODh+OKWj9S9498pHHn/IMszH+gt0fBCRWMNfk1ZSp5x3AifmnI2vg==}
|
||||
|
|
@ -12385,6 +12394,7 @@ packages:
|
|||
/human-signals@2.1.0:
|
||||
resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==}
|
||||
engines: {node: '>=10.17.0'}
|
||||
dev: false
|
||||
|
||||
/human-signals@3.0.1:
|
||||
resolution: {integrity: sha512-rQLskxnM/5OCldHo+wNXbpVgDn5A17CUoKX+7Sokwaknlq7CdSnphy0W39GU8dw59XiCXmFXDg4fRuckQRKewQ==}
|
||||
|
|
@ -12393,6 +12403,7 @@ packages:
|
|||
/human-signals@4.3.1:
|
||||
resolution: {integrity: sha512-nZXjEF2nbo7lIw3mgYjItAfgQXog3OjJogSbKa2CQIIvSGWcKgeJnQlNXip6NglNzYH45nSRiEVimMvYL8DDqQ==}
|
||||
engines: {node: '>=14.18.0'}
|
||||
dev: false
|
||||
|
||||
/hyperid@3.1.1:
|
||||
resolution: {integrity: sha512-RveV33kIksycSf7HLkq1sHB5wW0OwuX8ot8MYnY++gaaPXGFfKpBncHrAWxdpuEeRlazUMGWefwP1w6o6GaumA==}
|
||||
|
|
@ -12577,11 +12588,13 @@ packages:
|
|||
resolution: {integrity: sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==}
|
||||
engines: {node: '>=8'}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/is-docker@3.0.0:
|
||||
resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
|
||||
engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
|
||||
hasBin: true
|
||||
dev: false
|
||||
|
||||
/is-extendable@0.1.1:
|
||||
resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
|
||||
|
|
@ -12616,6 +12629,7 @@ packages:
|
|||
hasBin: true
|
||||
dependencies:
|
||||
is-docker: 3.0.0
|
||||
dev: false
|
||||
|
||||
/is-interactive@2.0.0:
|
||||
resolution: {integrity: sha512-qP1vozQRI+BMOPcjFzrjXuQvdak2pHNUMZoeG2eRbiSqyvbEf/wQtEOTOX1guk6E3t36RkaqiSt8A/6YElNxLQ==}
|
||||
|
|
@ -12716,6 +12730,7 @@ packages:
|
|||
/is-stream@2.0.1:
|
||||
resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
|
||||
engines: {node: '>=8'}
|
||||
dev: false
|
||||
|
||||
/is-stream@3.0.0:
|
||||
resolution: {integrity: sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==}
|
||||
|
|
@ -12774,6 +12789,7 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dependencies:
|
||||
is-docker: 2.2.1
|
||||
dev: false
|
||||
|
||||
/isarray@0.0.1:
|
||||
resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}
|
||||
|
|
@ -13856,6 +13872,7 @@ packages:
|
|||
/mimic-fn@2.1.0:
|
||||
resolution: {integrity: sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==}
|
||||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
/mimic-fn@4.0.0:
|
||||
resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==}
|
||||
|
|
@ -14224,6 +14241,7 @@ packages:
|
|||
engines: {node: '>=8'}
|
||||
dependencies:
|
||||
path-key: 3.1.1
|
||||
dev: false
|
||||
|
||||
/npm-run-path@5.1.0:
|
||||
resolution: {integrity: sha512-sJOdmRGrY2sjNTRMbSvluQqg+8X7ZK61yvzBEIDhz4f8z1TZFYABsqjjCBd/0PUNE9M6QDgHJXQkGUEm7Q+l9Q==}
|
||||
|
|
@ -14304,6 +14322,7 @@ packages:
|
|||
engines: {node: '>=6'}
|
||||
dependencies:
|
||||
mimic-fn: 2.1.0
|
||||
dev: false
|
||||
|
||||
/onetime@6.0.0:
|
||||
resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==}
|
||||
|
|
@ -14327,6 +14346,7 @@ packages:
|
|||
define-lazy-prop: 3.0.0
|
||||
is-inside-container: 1.0.0
|
||||
is-wsl: 2.2.0
|
||||
dev: false
|
||||
|
||||
/optionator@0.8.3:
|
||||
resolution: {integrity: sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==}
|
||||
|
|
@ -15143,6 +15163,15 @@ packages:
|
|||
fast-diff: 1.2.0
|
||||
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:
|
||||
resolution: {integrity: sha512-lJ/mG/Lz/ccSwNtwqpFS126mtMVzFVyYv0ddTF9wqwrEG4seECjKDAyw/oGv915rAcJi8jr89990nqfpmG+qdg==}
|
||||
engines: {node: ^14.15.0 || >=16.0.0, pnpm: '>=7.14.0'}
|
||||
|
|
@ -15151,6 +15180,7 @@ packages:
|
|||
prettier: 2.8.8
|
||||
sass-formatter: 0.7.6
|
||||
synckit: 0.8.5
|
||||
dev: false
|
||||
|
||||
/prettier@2.8.8:
|
||||
resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
|
||||
|
|
@ -15808,6 +15838,7 @@ packages:
|
|||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
execa: 5.1.1
|
||||
dev: false
|
||||
|
||||
/run-parallel@1.2.0:
|
||||
resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
|
||||
|
|
@ -16359,6 +16390,7 @@ packages:
|
|||
/strip-final-newline@2.0.0:
|
||||
resolution: {integrity: sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==}
|
||||
engines: {node: '>=6'}
|
||||
dev: false
|
||||
|
||||
/strip-final-newline@3.0.0:
|
||||
resolution: {integrity: sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==}
|
||||
|
|
@ -16488,6 +16520,7 @@ packages:
|
|||
dependencies:
|
||||
'@pkgr/utils': 2.4.0
|
||||
tslib: 2.5.3
|
||||
dev: false
|
||||
|
||||
/tailwindcss@3.3.2:
|
||||
resolution: {integrity: sha512-9jPkMiIBXvPc2KywkraqsUfbfj+dHDb+JPWtSJa9MLFdrPyazI7q6WX2sUrm7R9eVR7qqv3Pas7EvQFzxKnI6w==}
|
||||
|
|
@ -16651,6 +16684,7 @@ packages:
|
|||
/titleize@3.0.0:
|
||||
resolution: {integrity: sha512-KxVu8EYHDPBdUYdKZdKtU2aj2XfEx9AfjXxE/Aj0vT06w2icA09Vus1rh6eSu1y01akYg6BjIK/hxyLJINoMLQ==}
|
||||
engines: {node: '>=12'}
|
||||
dev: false
|
||||
|
||||
/tmp@0.0.33:
|
||||
resolution: {integrity: sha512-jRCJlojKnZ3addtTOjdIqoRuPEKBvNXcGYqzO6zWZX8KfKEpnGY5jfggJQ3EjKuu8D4bJRr0y+cYJFmYbImXGw==}
|
||||
|
|
@ -17142,6 +17176,7 @@ packages:
|
|||
/untildify@4.0.0:
|
||||
resolution: {integrity: sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==}
|
||||
engines: {node: '>=8'}
|
||||
dev: false
|
||||
|
||||
/upath@1.2.0:
|
||||
resolution: {integrity: sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg==}
|
||||
|
|
|
|||
Loading…
Reference in a new issue