diff --git a/packages/integrations/alpinejs/README.md b/packages/integrations/alpinejs/README.md index 85d601522..235bfab33 100644 --- a/packages/integrations/alpinejs/README.md +++ b/packages/integrations/alpinejs/README.md @@ -44,7 +44,8 @@ npm install alpinejs @types/alpinejs Then, apply this integration to your `astro.config.*` file using the `integrations` property: -```js title="astro.config.mjs" 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/cloudflare/README.md b/packages/integrations/cloudflare/README.md index 3acec5512..93d9a951d 100644 --- a/packages/integrations/cloudflare/README.md +++ b/packages/integrations/cloudflare/README.md @@ -25,7 +25,8 @@ npm install @astrojs/cloudflare 2. Add the following to your `astro.config.mjs` file: -```js title="astro.config.mjs" ins={2, 5-6} +```js ins={3, 6-7} +// astro.config.mjs import { defineConfig } from 'astro/config'; import cloudflare from '@astrojs/cloudflare'; diff --git a/packages/integrations/deno/README.md b/packages/integrations/deno/README.md index 2210944c0..183dad26d 100644 --- a/packages/integrations/deno/README.md +++ b/packages/integrations/deno/README.md @@ -55,27 +55,26 @@ If you prefer to install the adapter manually instead, complete the following tw }); ``` -Next, Update your `preview` script in `package.json` with the change below. +Next, update your `preview` script in `package.json` to run `deno`: - ```json del={8} ins={9} - // package.json - { - // ... - "scripts": { - "dev": "astro dev", - "start": "astro dev", - "build": "astro build", - "preview": "astro preview" - "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs" - } - } - ``` - - You can now use this command to preview your production Astro site locally with Deno. - - ```bash - npm run preview - ``` +```json ins={8} +// package.json +{ + // ... + "scripts": { + "dev": "astro dev", + "start": "astro dev", + "build": "astro build", + "preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs" + } +} +``` + +You can now use this command to preview your production Astro site locally with Deno. + +```bash +npm run preview +``` ## Usage diff --git a/packages/integrations/image/README.md b/packages/integrations/image/README.md index a13892172..748fe2b18 100644 --- a/packages/integrations/image/README.md +++ b/packages/integrations/image/README.md @@ -75,12 +75,15 @@ export default { ### Installing `sharp` (optional) First, install the `sharp` package using your package manager. If you're using npm or aren't sure, run this in the terminal: + ```sh npm install sharp ``` + Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer. -```astro title="astro.config.mjs" ---- + +```js ins={2,7} +// astro.config.mjs import image from '@astrojs/image'; export default { @@ -89,7 +92,6 @@ export default { serviceEntryPoint: '@astrojs/image/sharp' })], } ---- ``` ### Update `env.d.ts` diff --git a/packages/integrations/netlify/README.md b/packages/integrations/netlify/README.md index 85335047b..69f66ca73 100644 --- a/packages/integrations/netlify/README.md +++ b/packages/integrations/netlify/README.md @@ -46,7 +46,8 @@ If you prefer to install the adapter manually instead, complete the following tw 1. Add two new lines to your `astro.config.mjs` project configuration file. - ```js title="astro.config.mjs" ins={2, 5-6} + ```js ins={3, 6-7} + // astro.config.mjs import { defineConfig } from 'astro/config'; import netlify from '@astrojs/netlify/functions'; @@ -58,18 +59,20 @@ If you prefer to install the adapter manually instead, complete the following tw ### Edge Functions -Netlify has two serverless platforms, Netlify Functions and [Netlify's experimental Edge Functions](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/#app). With Edge Functions your code is distributed closer to your users, lowering latency. You can use Edge Functions by changing the `netlify/functions` import in the Astro config file to use `netlify/edge-functions`. +Netlify has two serverless platforms, Netlify Functions and [Netlify's experimental Edge Functions](https://docs.netlify.com/netlify-labs/experimental-features/edge-functions/#app). With Edge Functions your code is distributed closer to your users, lowering latency. - ```js title="astro.config.mjs" ins={3} del={2} - import { defineConfig } from 'astro/config'; - import netlify from '@astrojs/netlify/functions'; - import netlify from '@astrojs/netlify/edge-functions'; +To deploy with Edge Functions, use `netlify/edge-functions` in the Astro config file instead of `netlify/functions`. - export default defineConfig({ - output: 'server', - adapter: netlify(), - }); - ``` +```js ins={3} +// astro.config.mjs +import { defineConfig } from 'astro/config'; +import netlify from '@astrojs/netlify/edge-functions'; + +export default defineConfig({ + output: 'server', + adapter: netlify(), +}); +``` ## Usage @@ -95,6 +98,7 @@ To configure this adapter, pass an object to the `netlify()` function call in `a We build to the `dist` directory at the base of your project. To change this, use the `dist` option: ```js +// astro.config.mjs import { defineConfig } from 'astro/config'; import netlify from '@astrojs/netlify/functions'; @@ -108,7 +112,7 @@ export default defineConfig({ And then point to the dist in your `netlify.toml`: -```toml +```toml title="netlify.toml" [functions] directory = "dist/functions" ``` @@ -121,7 +125,9 @@ Netlify Functions requires binary data in the `body` to be base64 encoded. The ` We check for common mime types for audio, image, and video files. To include specific mime types that should be treated as binary data, include the `binaryMediaTypes` option with a list of binary mime types. -```js +```js {12} +// src/pages/image.jpg.ts + import fs from 'node:fs'; export function get() { diff --git a/packages/integrations/node/README.md b/packages/integrations/node/README.md index e0c8ea67f..11a9d97f1 100644 --- a/packages/integrations/node/README.md +++ b/packages/integrations/node/README.md @@ -42,7 +42,8 @@ If you prefer to install the adapter manually instead, complete the following tw 1. Add two new lines to your `astro.config.mjs` project configuration file. - ```js title="astro.config.mjs" ins={2, 5-8} + ```js ins={3, 6-9} + // astro.config.mjs import { defineConfig } from 'astro/config'; import node from '@astrojs/node'; @@ -134,7 +135,8 @@ SERVER_KEY_PATH=./private/key.pem SERVER_CERT_PATH=./private/cert.pem node ./dis You may see this when running the entry script if it was built with npm or Yarn. This is a [known issue](https://github.com/withastro/astro/issues/4974) that will be fixed in a future release. As a workaround, add `"path-to-regexp"` to the `noExternal` array: -```js title="astro.config.mjs" ins={8-12} +```js ins={9-13} +// astro.config.mjs import { defineConfig } from 'astro/config'; import node from "@astrojs/node"; diff --git a/packages/integrations/tailwind/README.md b/packages/integrations/tailwind/README.md index 8c1f56416..fa5532b85 100644 --- a/packages/integrations/tailwind/README.md +++ b/packages/integrations/tailwind/README.md @@ -170,8 +170,9 @@ Certain Tailwind classes with modifiers rely on combining classes across multipl To fix this, you can use inline classes instead: -```astro +```html

Astro

+``` ### Others diff --git a/packages/integrations/vercel/README.md b/packages/integrations/vercel/README.md index ca9610a61..a5cbce5ca 100644 --- a/packages/integrations/vercel/README.md +++ b/packages/integrations/vercel/README.md @@ -43,7 +43,8 @@ If you prefer to install the adapter manually instead, complete the following tw 1. Add two new lines to your `astro.config.mjs` project configuration file. - ```js title="astro.config.mjs" ins={2, 5-6} + ```js ins={3, 6-7} + // astro.config.mjs import { defineConfig } from 'astro/config'; import vercel from '@astrojs/vercel/serverless';