Integration READMEs code block sweep 🧹 (#5455)

This commit is contained in:
Chris Swithinbank 2022-11-22 15:56:55 +01:00 committed by GitHub
parent 8f203bfda3
commit fcada72bd5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 55 additions and 42 deletions

View file

@ -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';

View file

@ -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';

View file

@ -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

View file

@ -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`

View file

@ -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() {

View file

@ -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";

View file

@ -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
<p class="text-black group-hover:text-gray">Astro</p>
```
### Others

View file

@ -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';