Integration READMEs code block sweep 🧹 (#5455)
This commit is contained in:
parent
8f203bfda3
commit
fcada72bd5
8 changed files with 55 additions and 42 deletions
|
@ -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';
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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`
|
||||
|
|
|
@ -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() {
|
||||
|
|
|
@ -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";
|
||||
|
|
|
@ -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
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
||||
|
|
Loading…
Reference in a new issue