mirror of
https://github.com/withastro/astro.git
synced 2024-12-16 21:46:22 -05:00
Updated according to new configuration (#5478)
* Updated according to new configuration Astro imports the `defineConfig` function from `astro/config`. The `integrations` key needs to be passed into the `defineConfig` function, but it is not shown in the README. Updated the README according to the CLI example. * update alpine * update image * update lit * update mdx * update preact * update prefetch * update react * update sitemap * update solid * update svelte * update tailwind * update turbolinks * update vue * chore: add changeset * update image * update svelte readme Co-authored-by: Nate Moore <nate@astro.build> Co-authored-by: Nate Moore <natemoo-re@users.noreply.github.com>
This commit is contained in:
Subha Chanda
GitHub
parent
607f0ac31a
commit
1c7eef308e
14 changed files with 399 additions and 103 deletions
17
.changeset/cuddly-donkeys-warn.md
Normal file
17
.changeset/cuddly-donkeys-warn.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
---
|
||||
'@astrojs/alpinejs': patch
|
||||
'@astrojs/image': patch
|
||||
'@astrojs/lit': patch
|
||||
'@astrojs/mdx': patch
|
||||
'@astrojs/preact': patch
|
||||
'@astrojs/prefetch': patch
|
||||
'@astrojs/react': patch
|
||||
'@astrojs/sitemap': patch
|
||||
'@astrojs/solid-js': patch
|
||||
'@astrojs/svelte': patch
|
||||
'@astrojs/tailwind': patch
|
||||
'@astrojs/turbolinks': patch
|
||||
'@astrojs/vue': patch
|
||||
---
|
||||
|
||||
Update READMEs for consistency
|
||||
|
|
@ -43,9 +43,9 @@ npm install alpinejs @types/alpinejs
|
|||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js ins={3} "alpine()"
|
||||
// astro.config.mjs
|
||||
```js ins={2} "alpine()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import alpine from '@astrojs/alpinejs';
|
||||
|
||||
|
|
|
|||
|
|
@ -63,13 +63,14 @@ Then, apply this integration to your `astro.config.*` file using the `integratio
|
|||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "image()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import image from '@astrojs/image';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [image()],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### Installing `sharp` (optional)
|
||||
|
|
@ -82,16 +83,18 @@ npm install sharp
|
|||
|
||||
Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer.
|
||||
|
||||
```js ins={2,7}
|
||||
// astro.config.mjs
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js ins={3,8}
|
||||
import { defineConfig } from 'astro/config';
|
||||
import image from '@astrojs/image';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [image({
|
||||
serviceEntryPoint: '@astrojs/image/sharp'
|
||||
})],
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
### Update `env.d.ts`
|
||||
|
|
@ -446,33 +449,37 @@ The integration can be configured to run with a different image service, either
|
|||
|
||||
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`__
|
||||
|
||||
```js
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import image from '@astrojs/image';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
integrations: [image({
|
||||
// Example: The entrypoint for a third-party image service installed from NPM
|
||||
serviceEntryPoint: 'my-image-service/astro.js'
|
||||
})],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### config.logLevel
|
||||
|
||||
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`__
|
||||
|
||||
```js
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import image from '@astrojs/image';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
integrations: [image({
|
||||
// supported levels: 'debug' | 'info' | 'warn' | 'error' | 'silent'
|
||||
// default: 'info'
|
||||
logLevel: 'debug'
|
||||
})],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### config.cacheDir
|
||||
|
|
@ -483,7 +490,12 @@ 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`__
|
||||
|
||||
```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
|
||||
|
|
|
|||
|
|
@ -43,13 +43,14 @@ Now, apply this integration to your `astro.config.*` file using the `integration
|
|||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "lit()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import lit from '@astrojs/lit';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [lit()],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Getting started
|
||||
|
|
|
|||
|
|
@ -42,9 +42,9 @@ npm install @astrojs/mdx
|
|||
|
||||
Then, apply this integration to your `astro.config.*` file using the `integrations` property:
|
||||
|
||||
**`astro.config.mjs`**
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "mdx()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
|
||||
|
|
@ -92,8 +92,9 @@ 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.
|
||||
:::
|
||||
|
||||
```ts
|
||||
// astro.config.mjs
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
import remarkToc from 'remark-toc';
|
||||
|
|
@ -102,19 +103,47 @@ import rehypeMinifyHtml from 'rehype-minify-html';
|
|||
export default defineConfig({
|
||||
integrations: [
|
||||
mdx({
|
||||
syntaxHighlight: 'shiki',
|
||||
shikiConfig: { theme: 'dracula' },
|
||||
remarkPlugins: [remarkToc],
|
||||
rehypePlugins: [rehypeMinifyHtml],
|
||||
remarkRehype: { footnoteLabel: 'Footnotes' },
|
||||
gfm: false,
|
||||
})
|
||||
]
|
||||
})
|
||||
remarkPlugins: [exampleRemarkPlugin],
|
||||
}),
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
:::caution
|
||||
MDX does not support passing remark and rehype plugins as a string. You should install, import, and apply the plugin function instead.
|
||||
…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#example-injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time).
|
||||
|
||||
### Layouts
|
||||
Layouts can be applied [in the same way as standard Astro Markdown](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout). You can add a `layout` to [your frontmatter](#frontmatter) like so:
|
||||
|
||||
```yaml
|
||||
---
|
||||
layout: '../layouts/BaseLayout.astro'
|
||||
title: 'My Blog Post'
|
||||
---
|
||||
```
|
||||
|
||||
Then, you can retrieve all other frontmatter properties from your layout via the `frontmatter` property, and render your MDX using the default [`<slot />`](https://docs.astro.build/en/core-concepts/astro-components/#slots). See [layout props](#layout-props) for a complete list of props available.
|
||||
|
||||
```astro title="src/layouts/BaseLayout.astro"
|
||||
---
|
||||
const { frontmatter, url } = Astro.props;
|
||||
---
|
||||
<html>
|
||||
<head>
|
||||
<meta rel="canonical" href={new URL(url, Astro.site).pathname}>
|
||||
<title>{frontmatter.title}</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>{frontmatter.title}</h1>
|
||||
<!-- Rendered MDX will be passed into the default slot. -->
|
||||
<slot />
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
You can set a layout’s [`Props` type](/en/guides/typescript/#component-props) with the `MDXLayoutProps` helper.
|
||||
|
||||
:::note
|
||||
`MDXLayoutProps` is the same as the `MarkdownLayoutProps` utility type with `rawContent()` and `compiledContent()` removed (since these are not available for `.mdx` files). Feel free to **use `MarkdownLayoutProps` instead** when sharing a layout across `.md` and `.mdx` files.
|
||||
:::
|
||||
|
||||
📚 See the [Markdown Options reference](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) for a complete list of options.
|
||||
|
|
@ -128,8 +157,80 @@ 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:
|
||||
|
||||
```ts
|
||||
// astro.config.mjs
|
||||
```html
|
||||
<blockquote>
|
||||
<p>A blockquote with <em>some</em> emphasis.</p>
|
||||
</blockquote>
|
||||
```
|
||||
|
||||
But what if you want to specify your own markup for these blockquotes? In the above example, you could create a custom `<Blockquote />` component (in any language) that either has a `<slot />` component or accepts a `children` prop.
|
||||
|
||||
```astro title="src/components/Blockquote.astro"
|
||||
---
|
||||
const props = Astro.props;
|
||||
---
|
||||
|
||||
<blockquote {...props} class="bg-blue-50 p-4">
|
||||
<span class="text-4xl text-blue-600 mb-2">“</span>
|
||||
<slot />
|
||||
</blockquote>
|
||||
```
|
||||
|
||||
Then in the MDX file you import the component and export it to the `components` export.
|
||||
|
||||
```mdx title="src/pages/posts/post-1.mdx" {2}
|
||||
import Blockquote from '../components/Blockquote.astro';
|
||||
export const components = { blockquote: Blockquote };
|
||||
```
|
||||
|
||||
Now, writing the standard Markdown blockquote syntax (`>`) will use your custom `<Blockquote />` component instead. No need to use a component in Markdown, or write a remark/rehype plugin! Visit the [MDX website](https://mdxjs.com/table-of-components/) for a full list of HTML elements that can be overwritten as custom components.
|
||||
|
||||
#### Custom components with imported `mdx`
|
||||
|
||||
When rendering imported MDX content, custom components can be passed via the `components` prop.
|
||||
|
||||
Note: An MDX file's exported components will _not_ be used unless you manually import and pass them via the `components` property. See the example below:
|
||||
|
||||
```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}"
|
||||
---
|
||||
import { Content, components } from '../content.mdx';
|
||||
import Heading from '../Heading.astro';
|
||||
---
|
||||
|
||||
<Content components={{...components, h1: Heading }} />
|
||||
```
|
||||
|
||||
### Syntax highlighting
|
||||
|
||||
The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting).
|
||||
|
||||
We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default. You can customize this highlighter using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
|
||||
export default defineConfig({
|
||||
markdown: {
|
||||
shikiConfig: {
|
||||
theme: 'dracula',
|
||||
},
|
||||
},
|
||||
integrations: [mdx()],
|
||||
});
|
||||
```
|
||||
|
||||
Visit [our Shiki configuration docs](https://docs.astro.build/en/guides/markdown-content/#shiki-configuration) for more on using Shiki with Astro.
|
||||
|
||||
#### Switch to Prism
|
||||
|
||||
You can also use the [Prism](https://prismjs.com/) syntax highlighter by setting `markdown.syntaxHighlight` to `'prism'` in your `astro.config` like so:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
|
||||
|
|
@ -139,38 +240,149 @@ export default defineConfig({
|
|||
remarkPlugins: [remarkPlugin1],
|
||||
gfm: true,
|
||||
},
|
||||
integrations: [mdx()],
|
||||
});
|
||||
```
|
||||
|
||||
This applies a minimal Prism renderer with added support for `astro` code blocks. Visit [our "Prism configuration" docs](https://docs.astro.build/en/guides/markdown-content/#prism-configuration) for more on using Prism with Astro.
|
||||
|
||||
#### Switch to a custom syntax highlighter
|
||||
|
||||
You may want to apply your own syntax highlighter too. If your highlighter offers a remark or rehype plugin, you can flip off our syntax highlighting by setting `markdown.syntaxHighlight: false` and wiring up your plugin. For example, say you want to apply [Shiki Twoslash's remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash):
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
import shikiTwoslash from 'remark-shiki-twoslash';
|
||||
|
||||
export default defineConfig({
|
||||
markdown: {
|
||||
syntaxHighlight: false,
|
||||
},
|
||||
integrations: [
|
||||
mdx({
|
||||
// `syntaxHighlight` inherited from Markdown
|
||||
|
||||
// Markdown `remarkPlugins` ignored,
|
||||
// only `remarkPlugin2` applied.
|
||||
remarkPlugins: [remarkPlugin2],
|
||||
// `gfm` overridden to `false`
|
||||
gfm: false,
|
||||
remarkPlugins: [shikiTwoslash, { /* Shiki Twoslash config */ }],
|
||||
})
|
||||
]
|
||||
],
|
||||
});
|
||||
```
|
||||
|
||||
## Configuration
|
||||
|
||||
### remarkPlugins
|
||||
|
||||
[Remark plugins](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) allow you to extend your Markdown with new capabilities. This includes [auto-generating a table of contents](https://github.com/remarkjs/remark-toc), [applying accessible emoji labels](https://github.com/florianeckerstorfer/remark-a11y-emoji), and more. We encourage you to browse [awesome-remark](https://github.com/remarkjs/awesome-remark) for a full curated list!
|
||||
|
||||
This example applies the [`remark-toc`](https://github.com/remarkjs/remark-toc) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins).
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
import remarkToc from 'remark-toc';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [mdx({
|
||||
remarkPlugins: [remarkToc],
|
||||
})],
|
||||
});
|
||||
```
|
||||
|
||||
### rehypePlugins
|
||||
|
||||
[Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) allow you to transform the HTML that your Markdown generates. We encourage you to browse [awesome-rehype](https://github.com/rehypejs/awesome-rehype) for a full curated list of plugins!
|
||||
|
||||
We apply our own (non-removable) [`collect-headings`](https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/rehype-collect-headings.ts) plugin. This applies IDs to all headings (i.e. `h1 -> h6`) in your MDX files to [link to headings via anchor tags](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_an_element_on_the_same_page).
|
||||
|
||||
This example applies the [`rehype-minify`](https://github.com/rehypejs/rehype-minify) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins).
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
import rehypeMinifyHtml from 'rehype-minify';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [mdx({
|
||||
rehypePlugins: [rehypeMinifyHtml],
|
||||
})],
|
||||
});
|
||||
```
|
||||
|
||||
### extendPlugins
|
||||
|
||||
**Type:** `'markdown' | 'astroDefaults' | false`
|
||||
|
||||
**Default:** `'markdown'`
|
||||
|
||||
#### `markdown` (default)
|
||||
|
||||
By default, Astro inherits all [remark](#remarkplugins) and [rehype](#rehypeplugins) plugins from [the `markdown` option in your Astro config](https://docs.astro.build/en/guides/markdown-content/#markdown-plugins). This also respects the [`markdown.extendDefaultPlugins`](https://docs.astro.build/en/reference/configuration-reference/#markdownextenddefaultplugins) option to extend Astro's defaults. Any additional plugins you apply in your MDX config will be applied _after_ your configured Markdown plugins.
|
||||
|
||||
This example applies [`remark-toc`](https://github.com/remarkjs/remark-toc) to Markdown _and_ MDX, and [`rehype-minify`](https://github.com/rehypejs/rehype-minify) to MDX alone:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
import remarkToc from 'remark-toc';
|
||||
import rehypeMinify from 'rehype-minify';
|
||||
|
||||
export default defineConfig({
|
||||
markdown: {
|
||||
// Applied to .md and .mdx files
|
||||
remarkPlugins: [remarkToc],
|
||||
},
|
||||
integrations: [mdx({
|
||||
// Applied to .mdx files only
|
||||
rehypePlugins: [rehypeMinify],
|
||||
})],
|
||||
});
|
||||
```
|
||||
|
||||
You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
|
||||
|
||||
```ts
|
||||
// astro.config.mjs
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js "extendPlugins: 'astroDefaults'"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
import remarkToc from 'remark-toc';
|
||||
|
||||
export default defineConfig({
|
||||
markdown: {
|
||||
remarkPlugins: [remarkPlugin1],
|
||||
},
|
||||
integrations: [
|
||||
mdx({
|
||||
// Markdown config now ignored
|
||||
extendMarkdownConfig: false,
|
||||
// No `remarkPlugins` applied
|
||||
})
|
||||
]
|
||||
integrations: [mdx({
|
||||
remarkPlugins: [remarkToc],
|
||||
// Astro defaults applied
|
||||
extendPlugins: 'astroDefaults',
|
||||
})],
|
||||
});
|
||||
```
|
||||
|
||||
#### `false`
|
||||
|
||||
If you don't want to extend any plugins, set `extendPlugins` to `false`:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js "extendPlugins: false"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
import remarkToc from 'remark-toc';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [mdx({
|
||||
remarkPlugins: [remarkToc],
|
||||
// Astro defaults not applied
|
||||
extendPlugins: false,
|
||||
})],
|
||||
});
|
||||
```
|
||||
|
||||
|
|
@ -180,6 +392,30 @@ These are plugins that modify the output [estree](https://github.com/estree/estr
|
|||
|
||||
We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
|
||||
|
||||
### remarkRehype
|
||||
|
||||
Markdown content is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options).
|
||||
|
||||
You can use remark-rehype options in your MDX integration config file like so:
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import mdx from '@astrojs/mdx';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [mdx({
|
||||
remarkRehype: {
|
||||
footnoteLabel: 'Catatan kaki',
|
||||
footnoteBackLabel: 'Kembali ke konten',
|
||||
},
|
||||
})],
|
||||
});
|
||||
```
|
||||
|
||||
This inherits the configuration of `markdown.remarkRehype`. This behavior can be changed by configuring `extendPlugins`.
|
||||
|
||||
## 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.
|
||||
|
|
|
|||
|
|
@ -55,7 +55,7 @@ Then, apply this integration to your `astro.config.*` file using the `integratio
|
|||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "preact()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import preact from '@astrojs/preact';
|
||||
|
||||
|
|
@ -86,8 +86,9 @@ 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`.
|
||||
|
||||
```js
|
||||
// astro.config.mjs
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js "compat: true"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import preact from '@astrojs/preact';
|
||||
|
||||
|
|
|
|||
|
|
@ -41,13 +41,14 @@ Then, apply this integration to your `astro.config.*` file using the `integratio
|
|||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "prefetch()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import prefetch from '@astrojs/prefetch';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [prefetch()],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -63,31 +64,37 @@ The Astro Prefetch integration handles which links on the site are prefetched an
|
|||
|
||||
By default the prefetch script searches the page for any links that include a `rel="prefetch"` attribute, ex: `<a rel="prefetch" />` or `<a rel="nofollow prefetch" />`. This behavior can be changed in your `astro.config.*` file to use a custom query selector when finding prefetch links.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import prefetch from '@astrojs/prefetch';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
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`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import prefetch from '@astrojs/prefetch';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [prefetch({
|
||||
// Allow up to three links to be prefetched concurrently
|
||||
throttle: 3
|
||||
})],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Troubleshooting
|
||||
|
|
|
|||
|
|
@ -43,13 +43,14 @@ Now, apply this integration to your `astro.config.*` file using the `integration
|
|||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "react()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import react from '@astrojs/react';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [react()],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Getting started
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@ Then, apply this integration to your `astro.config.*` file using the `integratio
|
|||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "sitemap()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
|
||||
|
|
@ -114,8 +114,11 @@ Now, [build your site for production](https://docs.astro.build/en/reference/cli-
|
|||
To configure this integration, pass an object to the `sitemap()` function call in `astro.config.mjs`.
|
||||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
...
|
||||
import { defineConfig } from 'astro/config';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
|
||||
export default defineConfig({
|
||||
integrations: [sitemap({
|
||||
filter: ...
|
||||
|
|
@ -172,16 +175,17 @@ The maximum number entries per sitemap file. The default value is 45000. A sitem
|
|||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
site: 'https://stargazers.club',
|
||||
integrations: [
|
||||
sitemap({
|
||||
entryLimit: 10000,
|
||||
}),
|
||||
],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### changefreq, lastmod, and priority
|
||||
|
|
@ -196,9 +200,10 @@ Note that `changefreq` and `priority` are ignored by Google.
|
|||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
site: 'https://stargazers.club',
|
||||
integrations: [
|
||||
sitemap({
|
||||
|
|
@ -207,7 +212,7 @@ export default {
|
|||
lastmod: new Date('2022-02-24'),
|
||||
}),
|
||||
],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### serialize
|
||||
|
|
@ -232,9 +237,10 @@ The example below shows the ability to add sitemap specific properties individua
|
|||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
site: 'https://stargazers.club',
|
||||
integrations: [
|
||||
sitemap({
|
||||
|
|
@ -251,7 +257,7 @@ export default {
|
|||
},
|
||||
}),
|
||||
],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### i18n
|
||||
|
|
@ -270,9 +276,10 @@ This object has two required properties:
|
|||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import sitemap from '@astrojs/sitemap';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
site: 'https://stargazers.club',
|
||||
integrations: [
|
||||
sitemap({
|
||||
|
|
@ -286,7 +293,7 @@ export default {
|
|||
},
|
||||
}),
|
||||
],
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
The resulting sitemap looks like this:
|
||||
|
|
|
|||
|
|
@ -43,13 +43,14 @@ Now, apply this integration to your `astro.config.*` file using the `integration
|
|||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "solid()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import solid from '@astrojs/solid-js';
|
||||
|
||||
export default {
|
||||
// ...
|
||||
integrations: [solid()],
|
||||
}
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [solid()],
|
||||
});
|
||||
```
|
||||
|
||||
## Getting started
|
||||
|
|
|
|||
|
|
@ -43,13 +43,14 @@ Now, apply this integration to your `astro.config.*` file using the `integration
|
|||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "svelte()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import svelte from '@astrojs/svelte';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [svelte()],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Getting started
|
||||
|
|
@ -94,17 +95,20 @@ 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`__
|
||||
|
||||
```js
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import svelte from '@astrojs/svelte';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
integrations: [svelte({ preprocess: [] })],
|
||||
};
|
||||
});
|
||||
```
|
||||
|
||||
__`svelte.config.js`__
|
||||
|
||||
```js
|
||||
// svelte.config.js
|
||||
export default {
|
||||
preprocess: [],
|
||||
};
|
||||
|
|
@ -116,8 +120,9 @@ 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`__
|
||||
|
||||
```js
|
||||
// svelte.config.js
|
||||
import { vitePreprocess } from '@astrojs/svelte';
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ Then, apply this integration to your `astro.config.*` file using the `integratio
|
|||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "tailwind()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
|
||||
|
|
@ -91,16 +91,18 @@ If you want to use a different Tailwind configuration file instead of the defaul
|
|||
> **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`__
|
||||
|
||||
```js
|
||||
// astro.config.mjs
|
||||
import { defineConfig } from 'astro/config';
|
||||
import tailwind from '@astrojs/tailwind';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
integrations: [tailwind({
|
||||
// Example: Provide a custom path to a Tailwind config file
|
||||
config: { path: './custom-config.cjs' },
|
||||
})],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
#### config.applyBaseStyles
|
||||
|
|
@ -116,15 +118,18 @@ export default {
|
|||
|
||||
To disable this default behavior, set `config.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`__
|
||||
|
||||
```js
|
||||
// astro.config.mjs
|
||||
export default {
|
||||
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`.
|
||||
config: { applyBaseStyles: false },
|
||||
})],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
You can now [import your own `base.css` as a local stylesheet](https://docs.astro.build/en/guides/styling/#import-a-local-stylesheet).
|
||||
|
|
|
|||
|
|
@ -45,15 +45,16 @@ 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';
|
||||
import turbolinks from '@astrojs/turbolinks';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [turbolinks()],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Getting started
|
||||
|
|
|
|||
|
|
@ -43,13 +43,14 @@ Now, apply this integration to your `astro.config.*` file using the `integration
|
|||
|
||||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
```js ins={2} "vue()"
|
||||
import { defineConfig } from 'astro/config';
|
||||
import vue from '@astrojs/vue';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [vue()],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Getting started
|
||||
|
|
@ -79,9 +80,10 @@ This integration is powered by `@vitejs/plugin-vue`. To customize the Vue compil
|
|||
__`astro.config.mjs`__
|
||||
|
||||
```js
|
||||
import { defineConfig } from 'astro/config';
|
||||
import vue from '@astrojs/vue';
|
||||
|
||||
export default {
|
||||
export default defineConfig({
|
||||
// ...
|
||||
integrations: [vue({
|
||||
template: {
|
||||
|
|
@ -92,7 +94,7 @@ export default {
|
|||
}
|
||||
// ...
|
||||
})],
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### appEntrypoint
|
||||
|
|
|
|||
Loading…
Reference in a new issue