diff --git a/packages/integrations/alpinejs/README.md b/packages/integrations/alpinejs/README.md index 83991f8440d1..bb91966cd968 100644 --- a/packages/integrations/alpinejs/README.md +++ b/packages/integrations/alpinejs/README.md @@ -43,9 +43,8 @@ npm install alpinejs @types/alpinejs Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "alpine()" +```js ins={3} "alpine()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import alpine from '@astrojs/alpinejs'; diff --git a/packages/integrations/deno/README.md b/packages/integrations/deno/README.md index 03e7204ad8ef..01908317b662 100644 --- a/packages/integrations/deno/README.md +++ b/packages/integrations/deno/README.md @@ -96,9 +96,8 @@ deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs To configure this adapter, pass an object to the `deno()` function call in `astro.config.mjs`. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import deno from '@astrojs/deno'; diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index ea778ed37b74..f0601a948bac 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -63,9 +63,8 @@ npm install @astrojs/image Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "image()" +```js ins={3} "image()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; @@ -85,9 +84,8 @@ npm install sharp Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer. -**`astro.config.mjs`** - -```js ins={7} +```js ins={8} +// astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; @@ -478,9 +476,8 @@ 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'; @@ -498,9 +495,8 @@ 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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; @@ -523,9 +519,8 @@ 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 +// astro.config.mjs import { defineConfig } from 'astro/config'; import image from '@astrojs/image'; diff --git a/packages/integrations/lit/README.md b/packages/integrations/lit/README.md index 570b4921135b..1a71ce3c622f 100644 --- a/packages/integrations/lit/README.md +++ b/packages/integrations/lit/README.md @@ -42,9 +42,8 @@ npm install lit @webcomponents/template-shadowroot Now, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "lit()" +```js ins={3} "lit()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import lit from '@astrojs/lit'; @@ -66,9 +65,8 @@ 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`** - ```js +// src/components/my-element.js import { LitElement, html } from 'lit'; const tagName = 'my-element'; @@ -86,10 +84,9 @@ customElements.define(tagName, MyElement); In your Astro template import this component as a side-effect and use the element. -**`src/pages/index.astro`** - ```astro --- +// src/pages/index.astro import { MyElement } from '../components/my-element.js'; --- diff --git a/packages/integrations/markdoc/README.md b/packages/integrations/markdoc/README.md index 15eec3577b00..2303b4465432 100644 --- a/packages/integrations/markdoc/README.md +++ b/packages/integrations/markdoc/README.md @@ -42,9 +42,8 @@ npm install @astrojs/markdoc Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "markdoc()" +```js ins={3} "markdoc()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import markdoc from '@astrojs/markdoc'; diff --git a/packages/integrations/mdx/README.md b/packages/integrations/mdx/README.md index 319a1e962d0b..ee20236c4c97 100644 --- a/packages/integrations/mdx/README.md +++ b/packages/integrations/mdx/README.md @@ -42,9 +42,8 @@ npm install @astrojs/mdx Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "mdx()" +```js ins={3} "mdx()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; @@ -95,9 +94,8 @@ 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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; import remarkToc from 'remark-toc'; @@ -132,9 +130,8 @@ 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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; @@ -160,9 +157,8 @@ export default defineConfig({ You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`: -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; @@ -194,9 +190,8 @@ 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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; @@ -230,9 +225,8 @@ import Heading from '../Heading.astro'; To configure optimization for this using the `customComponentNames` property, specify an array of HTML element names that should be treated as custom components: -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import mdx from '@astrojs/mdx'; diff --git a/packages/integrations/partytown/README.md b/packages/integrations/partytown/README.md index f9d457fd8de3..3e275f58a8d3 100644 --- a/packages/integrations/partytown/README.md +++ b/packages/integrations/partytown/README.md @@ -46,9 +46,8 @@ npm install @astrojs/partytown Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import partytown from '@astrojs/partytown'; @@ -73,9 +72,8 @@ 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`** - ```js +// astro.config.mjs // ... export default defineConfig({ integrations: [ @@ -96,9 +94,8 @@ Partytown ships with a `debug` mode; enable or disable it by passing `true` or ` If this option isn't set, `debug` mode will be on by default in [dev](https://docs.astro.build/en/reference/cli-reference/#astro-dev) or [preview](https://docs.astro.build/en/reference/cli-reference/#astro-preview) mode. -**`astro.config.mjs`** - ```js +// astro.config.mjs export default defineConfig({ integrations: [ partytown({ @@ -117,9 +114,8 @@ To solve this, Partytown can "patch" variables to the global window object and f 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`** - ```js +// astro.config.mjs export default defineConfig({ integrations: [ partytown({ diff --git a/packages/integrations/preact/README.md b/packages/integrations/preact/README.md index 6eba098d1400..f0ae3b364742 100644 --- a/packages/integrations/preact/README.md +++ b/packages/integrations/preact/README.md @@ -53,9 +53,8 @@ npm install preact Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "preact()" +```js ins={3} "preact()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import preact from '@astrojs/preact'; @@ -87,9 +86,8 @@ 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`** - ```js "compat: true" +// astro.config.mjs import { defineConfig } from 'astro/config'; import preact from '@astrojs/preact'; diff --git a/packages/integrations/prefetch/README.md b/packages/integrations/prefetch/README.md index 8f63913ab941..4dab2121bdd6 100644 --- a/packages/integrations/prefetch/README.md +++ b/packages/integrations/prefetch/README.md @@ -41,9 +41,8 @@ npm install @astrojs/prefetch Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "prefetch()" +```js ins={3} "prefetch()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import prefetch from '@astrojs/prefetch'; @@ -65,9 +64,8 @@ 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: `` or ``. This behavior can be changed in your `astro.config.*` file to use a custom query selector when finding prefetch links. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import prefetch from '@astrojs/prefetch'; @@ -86,9 +84,8 @@ export default defineConfig({ 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 +// astro.config.mjs import { defineConfig } from 'astro/config'; import prefetch from '@astrojs/prefetch'; diff --git a/packages/integrations/react/README.md b/packages/integrations/react/README.md index 68daef6e420b..48c45881f059 100644 --- a/packages/integrations/react/README.md +++ b/packages/integrations/react/README.md @@ -42,9 +42,8 @@ npm install react react-dom Now, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "react()" +```js ins={3} "react()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import react from '@astrojs/react'; diff --git a/packages/integrations/sitemap/README.md b/packages/integrations/sitemap/README.md index ab6d6b1939dd..3e46bb7bb324 100644 --- a/packages/integrations/sitemap/README.md +++ b/packages/integrations/sitemap/README.md @@ -46,9 +46,8 @@ npm install @astrojs/sitemap Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "sitemap()" +```js ins={3} "sitemap()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -62,9 +61,8 @@ export default defineConfig({ `@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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -85,14 +83,14 @@ Now, [build your site for production](https://docs.astro.build/en/reference/cli- After verifying that the sitemaps are built, you can add them to your site's `` and the `robots.txt` file for crawlers to pick up. ```html ins={3} -// src/layouts/Layout.astro + ``` -``` ins={4} title="public/robots.txt" +```diff ins={4} title="public/robots.txt" User-agent: * Allow: / @@ -101,9 +99,7 @@ Sitemap: https:///sitemap-index.xml ### Example of generated files for a two-page website -**`sitemap-index.xml`** - -```xml +```xml title="sitemap-index.xml" @@ -112,9 +108,7 @@ Sitemap: https:///sitemap-index.xml ``` -**`sitemap-0.xml`** - -```xml +```xml title="sitemap-0.xml" @@ -130,9 +124,8 @@ Sitemap: https:///sitemap-index.xml To configure this integration, pass an object to the `sitemap()` function call in `astro.config.mjs`. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -149,9 +142,8 @@ export default defineConfig({ All pages are included in your sitemap by default. By adding a custom `filter` function, you can filter included pages by URL. -**`astro.config.mjs`** - ```js +// astro.config.mjs // ... sitemap({ filter: (page) => page !== 'https://stargazers.club/secret-vip-lounge', @@ -162,9 +154,8 @@ The function will be called for every page on your site. The `page` function par To filter multiple pages, add arguments with target URLs. -**`astro.config.mjs`** - ```js +// astro.config.mjs // ... sitemap({ filter: (page) => @@ -179,9 +170,8 @@ sitemap({ 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`** - ```js +// astro.config.mjs // ... sitemap({ customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2'], @@ -192,9 +182,8 @@ sitemap({ 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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -217,9 +206,8 @@ 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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -255,9 +243,8 @@ The `serialize` function should return `SitemapItem`, touched or not. The example below shows the ability to add sitemap specific properties individually. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; @@ -294,9 +281,8 @@ This object has two required properties: [Read more about localization](https://developers.google.com/search/docs/advanced/crawling/localized-versions#all-method-guidelines). -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import sitemap from '@astrojs/sitemap'; diff --git a/packages/integrations/solid/README.md b/packages/integrations/solid/README.md index e9f123f14cdf..5c3dbeeb8aa8 100644 --- a/packages/integrations/solid/README.md +++ b/packages/integrations/solid/README.md @@ -42,9 +42,8 @@ npm install solid-js Now, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "solid()" +```js ins={3} "solid()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import solid from '@astrojs/solid-js'; diff --git a/packages/integrations/svelte/README.md b/packages/integrations/svelte/README.md index 70e14ebb871a..d3645052673f 100644 --- a/packages/integrations/svelte/README.md +++ b/packages/integrations/svelte/README.md @@ -42,9 +42,8 @@ npm install svelte Now, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "svelte()" +```js ins={3} "svelte()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import svelte from '@astrojs/svelte'; @@ -97,9 +96,8 @@ 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'; @@ -108,9 +106,8 @@ export default defineConfig({ }); ``` -**`svelte.config.js`** - ```js +// svelte.config.js export default { preprocess: [], }; @@ -122,9 +119,8 @@ 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 { diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index fb62efade7fb..635b2cb83e65 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -50,9 +50,8 @@ npm install @astrojs/tailwind tailwindcss Then, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "tailwind()" +```js ins={3} "tailwind()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import tailwind from '@astrojs/tailwind'; @@ -91,9 +90,8 @@ 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'; @@ -122,9 +120,8 @@ 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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; export default defineConfig({ diff --git a/packages/integrations/vue/README.md b/packages/integrations/vue/README.md index c9435e3ccb7b..688a7a7b9195 100644 --- a/packages/integrations/vue/README.md +++ b/packages/integrations/vue/README.md @@ -42,9 +42,8 @@ npm install vue Now, apply this integration to your `astro.config.*` file using the `integrations` property: -**`astro.config.mjs`** - -```js ins={2} "vue()" +```js ins={3} "vue()" +// astro.config.mjs import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; @@ -79,9 +78,8 @@ 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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; @@ -107,9 +105,8 @@ 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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; @@ -118,9 +115,8 @@ export default defineConfig({ }); ``` -**`src/pages/_app.ts`** - ```js +// src/pages/_app.ts import type { App } from 'vue'; import i18nPlugin from 'my-vue-i18n-plugin'; @@ -133,9 +129,8 @@ export default (app: App) => { You can use Vue JSX by setting `jsx: true`. -**`astro.config.mjs`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue'; @@ -146,9 +141,8 @@ export default defineConfig({ 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`** - ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import vue from '@astrojs/vue';