Skip to content

Commit

Permalink
remove details tags from integration READMEs (#4198)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sarah11918
sarah11918 authored Aug 8, 2022
1 parent 2c71a99 commit 9894b3d
Show file tree
Hide file tree
Showing 9 changed files with 157 additions and 255 deletions.
70 changes: 33 additions & 37 deletions packages/integrations/deno/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,55 +77,51 @@ export default defineConfig({
});
```

<details>
<summary><strong>start</strong></summary>
### start

This adapter automatically starts a server when it is imported. You can turn this off with the `start` option:
This adapter automatically starts a server when it is imported. You can turn this off with the `start` option:

```js
import { defineConfig } from 'astro/config';
import deno from '@astrojs/deno';
```js
import { defineConfig } from 'astro/config';
import deno from '@astrojs/deno';

export default defineConfig({
output: 'server',
adapter: deno({
start: false
})
});
```
export default defineConfig({
output: 'server',
adapter: deno({
start: false
})
});
```

If you disable this, you need to write your own Deno web server. Import and call `handle` from the generated entry script to render requests:
If you disable this, you need to write your own Deno web server. Import and call `handle` from the generated entry script to render requests:

```ts
import { serve } from "https://deno.land/std@0.132.0/http/server.ts";
import { handle } from './dist/entry.mjs';
```ts
import { serve } from "https://deno.land/std@0.132.0/http/server.ts";
import { handle } from './dist/entry.mjs';

serve((req: Request) => {
// Check the request, maybe do static file handling here.
serve((req: Request) => {
// Check the request, maybe do static file handling here.

return handle(req);
});
```
</details>
return handle(req);
});
```

<details>
<summary><strong>port</strong> and <strong>hostname</strong></summary>
### port and hostname

You can set the port (default: `8085`) and hostname (default: `0.0.0.0`) for the deno server to use. If `start` is false, this has no effect; your own server must configure the port and hostname.
You can set the port (default: `8085`) and hostname (default: `0.0.0.0`) for the deno server to use. If `start` is false, this has no effect; your own server must configure the port and hostname.

```js
import { defineConfig } from 'astro/config';
import deno from '@astrojs/deno';
```js
import { defineConfig } from 'astro/config';
import deno from '@astrojs/deno';

export default defineConfig({
output: 'server',
adapter: deno({
port: 8081,
hostname: 'myhost'
})
});
export default defineConfig({
output: 'server',
adapter: deno({
port: 8081,
hostname: 'myhost'
})
});
```
</details>

## Examples

Expand Down
60 changes: 24 additions & 36 deletions packages/integrations/image/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,25 @@ This integration provides `<Image />` and `<Picture>` components as well as a ba

## Installation

<details>
<summary>Quick Install</summary>

### Quick Install

The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.

```sh
# Using NPM
npx astro add image
# Using Yarn
yarn astro add image
# Using PNPM
pnpx astro add image
```
```sh
# Using NPM
npx astro add image
# Using Yarn
yarn astro add image
# Using PNPM
pnpx astro add image
```

Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.

Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
</details>

<details>
<summary>Manual Install</summary>
### Manual Install

First, install the `@astrojs/image` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
```sh
Expand All @@ -58,10 +56,8 @@ export default {
// ...
integrations: [image()],
}
```

```
Then, restart the dev server.
</details>

### Update `tsconfig.json`

Expand Down Expand Up @@ -269,10 +265,10 @@ The intergration can be configured to run with a different image service, either
There are currently no other configuration options for the `@astrojs/image` integration. Please [open an issue](https://github.com/withastro/astro/issues/new/choose) if you have a compelling use case to share.

<details>
<summary><strong>config.serviceEntryPoint</strong></summary>

### config.serviceEntryPoint

The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/sharp`, which resolves to the entry point exported from this integration's `package.json`.
The `serviceEntryPoint` should resolve to the image service installed from NPM. The default entry point is `@astrojs/image/sharp`, which resolves to the entry point exported from this integration's `package.json`.

```js
// astro.config.mjs
Expand All @@ -285,14 +281,12 @@ export default {
})],
}
```
</details>

## Examples

<details>
<summary><strong>Local images</strong></summary>
### Local images

Image files in your project's `src` directory can be imported in frontmatter and passed directly to the `<Image />` component. All other properties are optional and will default to the original image file's properties if not provided.
Image files in your project's `src` directory can be imported in frontmatter and passed directly to the `<Image />` component. All other properties are optional and will default to the original image file's properties if not provided.

```astro
---
Expand All @@ -315,12 +309,10 @@ import heroImage from '../assets/hero.png';
// image imports can also be inlined directly
<Image src={import('../assets/hero.png')} />
```
</details>

<details>
<summary><strong>Remote images</strong></summary>
### Remote images

Remote images can be transformed with the `<Image />` component. The `<Image />` component needs to know the final dimensions for the `<img />` element to avoid content layout shifts. For remote images, this means you must either provide `width` and `height`, or one of the dimensions plus the required `aspectRatio`.
Remote images can be transformed with the `<Image />` component. The `<Image />` component needs to know the final dimensions for the `<img />` element to avoid content layout shifts. For remote images, this means you must either provide `width` and `height`, or one of the dimensions plus the required `aspectRatio`.

```astro
---
Expand All @@ -338,16 +330,14 @@ const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelog
// cropping to a specific height and aspect ratio and converting to an avif format
<Image src={imageUrl} height={200} aspectRatio="16:9" format="avif" />
```
</details>

<details>
<summary><strong>Responsive pictures</strong></summary>
### Responsive pictures</strong></summary>

The `<Picture />` component can be used to automatically build a `<picture>` with multiple sizes and formats. Check out [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction) for a deep dive into responsive images and art direction.
The `<Picture />` component can be used to automatically build a `<picture>` with multiple sizes and formats. Check out [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#art_direction) for a deep dive into responsive images and art direction.

By default, the picture will include formats for `avif` and `webp` in addition to the image's original format.
By default, the picture will include formats for `avif` and `webp` in addition to the image's original format.

For remote images, an `aspectRatio` is required to ensure the correct `height` can be calculated at build time.
For remote images, an `aspectRatio` is required to ensure the correct `height` can be calculated at build time.

```astro
---
Expand All @@ -367,8 +357,6 @@ const imageUrl = 'https://www.google.com/images/branding/googlelogo/2x/googlelog
<Picture src={import("../assets/hero.png")} widths={[200, 400, 800]} sizes="(max-width: 800px) 100vw, 800px" alt="My hero image" />
```

</details>

## Troubleshooting
- If your installation doesn't seem to be working, make sure to restart the dev server.
- If you edit and save a file and don't see your site update accordingly, try refreshing the page.
Expand Down
51 changes: 21 additions & 30 deletions packages/integrations/mdx/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,33 +20,30 @@ Check out [“What is MDX?”](https://mdxjs.com/docs/what-is-mdx/), a deep-dive

## Installation

<details>
<summary>Quick Install</summary>
### Quick Install

The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.

```sh
# Using NPM
npx astro add mdx
# Using Yarn
yarn astro add mdx
# Using PNPM
pnpx astro add mdx
```
```sh
# Using NPM
npx astro add mdx
# Using Yarn
yarn astro add mdx
# Using PNPM
pnpx astro add mdx
```

Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.

Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
</details>

<details>
<summary>Manual Install</summary>
### Manual Install

First, install the `@astrojs/mdx` package using your package manager. If you're using npm or aren't sure, run this in the terminal:

```sh
npm install @astrojs/mdx
```
```sh
npm install @astrojs/mdx
```

Then, apply this integration to your `astro.config.*` file using the `integrations` property:

Expand All @@ -63,11 +60,14 @@ export default defineConfig({
```

Finally, restart the dev server.
</details>

## Usage

To write your first MDX page in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
You can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory.

### Components

To use components in your MDX pages in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
- 📦 how framework components are loaded,
- 💧 client-side hydration options, and
- 🪆 opportunities to mix and nest frameworks together
Expand All @@ -76,8 +76,6 @@ To write your first MDX page in Astro, head to our [UI framework documentation][

> **Note**: `.mdx` files adhere to strict JSX syntax rather than Astro's HTML-like syntax.
Also check our [Astro Integration Documentation][astro-integration] for more on integrations.

### Variables

MDX supports `export` statements to add variables to your templates. These variables are accessible both from the template itself _and_ as named properties when importing the template somewhere else.
Expand Down Expand Up @@ -255,8 +253,7 @@ This applies a minimal Prism renderer with added support for `astro` code blocks

## Configuration

<details>
<summary><strong>remarkPlugins</strong></summary>
### remarkPlugins

**Default plugins:** [remark-gfm](https://github.com/remarkjs/remark-gfm), [remark-smartypants](https://github.com/silvenon/remark-smartypants)

Expand Down Expand Up @@ -292,10 +289,7 @@ export default {
}
```

</details>

<details>
<summary><strong>rehypePlugins</strong></summary>
### rehypePlugins</strong>

[Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) allow you to transform the HTML that your Markdown generates. We recommend checking the [Remark plugin](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) catalog first _before_ considering rehype plugins, since most users want to transform their Markdown syntax instead. If HTML transforms are what you need, we encourage you to browse [awesome-rehype](https://github.com/rehypejs/awesome-rehype) for a full curated list of plugins!

Expand All @@ -313,10 +307,8 @@ export default {
})],
}
```
</details>

<details>
<summary><strong>frontmatterOptions</strong></summary>
### frontmatterOptions

**Default:** `{ name: 'frontmatter' }`

Expand Down Expand Up @@ -344,7 +336,6 @@ title: I'm just a variable now!
```

See the [remark-mdx-frontmatter README](https://github.com/remcohaszing/remark-mdx-frontmatter#options) for a complete list of options.
</details>

## Examples

Expand Down
11 changes: 2 additions & 9 deletions packages/integrations/netlify/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,8 +75,7 @@ The [Netlify Blog post on Astro](https://www.netlify.com/blog/how-to-deploy-astr

To configure this adapter, pass an object to the `netlify()` function call in `astro.config.mjs` - there's only one possible configuration option:

<details>
<summary><strong>dist</strong></summary>
### dist

We build to the `dist` directory at the base of your project. To change this, use the `dist` option:

Expand All @@ -99,12 +98,7 @@ And then point to the dist in your `netlify.toml`:
directory = "dist/functions"
```
</details>
<details>
<summary>
<strong>binaryMediaTypes</strong>
</summary>
### binaryMediaTypes
> This option is only needed for the Functions adapter and is not needed for Edge Functions.
Expand All @@ -127,7 +121,6 @@ export function get() {
});
}
```
</details>
## Examples
Expand Down
Loading

0 comments on commit 9894b3d

Please sign in to comment.