mirror of
https://github.com/withastro/astro.git
synced 2025-03-03 22:57:08 -05:00
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:
|
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 { defineConfig } from 'astro/config';
|
||||||
import alpine from '@astrojs/alpinejs';
|
import alpine from '@astrojs/alpinejs';
|
||||||
|
|
||||||
|
|
|
@ -25,7 +25,8 @@ npm install @astrojs/cloudflare
|
||||||
|
|
||||||
2. Add the following to your `astro.config.mjs` file:
|
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 { defineConfig } from 'astro/config';
|
||||||
import cloudflare from '@astrojs/cloudflare';
|
import cloudflare from '@astrojs/cloudflare';
|
||||||
|
|
||||||
|
|
|
@ -55,9 +55,9 @@ 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}
|
```json ins={8}
|
||||||
// package.json
|
// package.json
|
||||||
{
|
{
|
||||||
// ...
|
// ...
|
||||||
|
@ -65,7 +65,6 @@ Next, Update your `preview` script in `package.json` with the change below.
|
||||||
"dev": "astro dev",
|
"dev": "astro dev",
|
||||||
"start": "astro dev",
|
"start": "astro dev",
|
||||||
"build": "astro build",
|
"build": "astro build",
|
||||||
"preview": "astro preview"
|
|
||||||
"preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
|
"preview": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -75,12 +75,15 @@ export default {
|
||||||
### Installing `sharp` (optional)
|
### 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:
|
First, install the `sharp` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm install sharp
|
npm install sharp
|
||||||
```
|
```
|
||||||
|
|
||||||
Then, update the integration in your `astro.config.*` file to use the built-in `sharp` image transformer.
|
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';
|
import image from '@astrojs/image';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
|
@ -89,7 +92,6 @@ export default {
|
||||||
serviceEntryPoint: '@astrojs/image/sharp'
|
serviceEntryPoint: '@astrojs/image/sharp'
|
||||||
})],
|
})],
|
||||||
}
|
}
|
||||||
---
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Update `env.d.ts`
|
### 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.
|
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 { defineConfig } from 'astro/config';
|
||||||
import netlify from '@astrojs/netlify/functions';
|
import netlify from '@astrojs/netlify/functions';
|
||||||
|
|
||||||
|
@ -58,11 +59,13 @@ If you prefer to install the adapter manually instead, complete the following tw
|
||||||
|
|
||||||
### Edge Functions
|
### 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}
|
To deploy with Edge Functions, use `netlify/edge-functions` in the Astro config file instead of `netlify/functions`.
|
||||||
|
|
||||||
|
```js ins={3}
|
||||||
|
// astro.config.mjs
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import netlify from '@astrojs/netlify/functions';
|
|
||||||
import netlify from '@astrojs/netlify/edge-functions';
|
import netlify from '@astrojs/netlify/edge-functions';
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
|
@ -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:
|
We build to the `dist` directory at the base of your project. To change this, use the `dist` option:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
// astro.config.mjs
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import netlify from '@astrojs/netlify/functions';
|
import netlify from '@astrojs/netlify/functions';
|
||||||
|
|
||||||
|
@ -108,7 +112,7 @@ export default defineConfig({
|
||||||
|
|
||||||
And then point to the dist in your `netlify.toml`:
|
And then point to the dist in your `netlify.toml`:
|
||||||
|
|
||||||
```toml
|
```toml title="netlify.toml"
|
||||||
[functions]
|
[functions]
|
||||||
directory = "dist/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.
|
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';
|
import fs from 'node:fs';
|
||||||
|
|
||||||
export function get() {
|
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.
|
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 { defineConfig } from 'astro/config';
|
||||||
import node from '@astrojs/node';
|
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:
|
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 { defineConfig } from 'astro/config';
|
||||||
|
|
||||||
import node from "@astrojs/node";
|
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:
|
To fix this, you can use inline classes instead:
|
||||||
|
|
||||||
```astro
|
```html
|
||||||
<p class="text-black group-hover:text-gray">Astro</p>
|
<p class="text-black group-hover:text-gray">Astro</p>
|
||||||
|
```
|
||||||
|
|
||||||
### Others
|
### 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.
|
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 { defineConfig } from 'astro/config';
|
||||||
import vercel from '@astrojs/vercel/serverless';
|
import vercel from '@astrojs/vercel/serverless';
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue