Skip to content

Commit aa57b64

Browse files
weotchweotch
committed
Don’t format READMEs
1 parent aaec438 commit aa57b64

File tree

6 files changed

+257
-310
lines changed

6 files changed

+257
-310
lines changed

‎.prettierignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# I don't like prettier markdown table formatting
2+
**/README.md

‎README.md‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,22 @@ A monorepo hosting components for rendering image and video in a single containe
1414
Using `sourceTypes` and `sourceMedia` with `imageLoader` to produce multiple `<source>` tags with `srcset` attributes.
1515

1616
```jsx
17-
import Visual from "@react-visual/react";
17+
import Visual from '@react-visual/react'
1818

1919
export default function ResponsiveExample() {
2020
return (
2121
<Visual
22-
image="https://placehold.co/200x200"
23-
sourceTypes={["image/webp"]}
24-
sourceMedia={["(orientation:landscape)", "(orientation:portrait)"]}
22+
image='https://placehold.co/200x200'
23+
sourceTypes={['image/webp']}
24+
sourceMedia={['(orientation:landscape)', '(orientation:portrait)']}
2525
imageLoader={({ src, type, media, width }) => {
26-
const height = media?.includes("landscape") ? width * 0.5 : width;
27-
const ext = type?.includes("webp") ? ".webp" : "";
28-
return `https://placehold.co/${width}x${height}${ext}`;
26+
const height = media?.includes('landscape') ? width * 0.5 : width
27+
const ext = type?.includes('webp') ? '.webp' : ''
28+
return `https://placehold.co/${width}x${height}${ext}`
2929
}}
30-
width="100%"
31-
alt="Example of responsive images"
32-
/>
33-
);
30+
width='100%'
31+
alt='Example of responsive images'/>
32+
)
3433
}
3534
```
3635
@@ -41,10 +40,14 @@ export default function ResponsiveExample() {
4140
Using with a Visual entryType containing image and video fields:
4241
4342
```jsx
44-
import Visual from "@react-visual/contentful";
43+
import Visual from '@react-visual/contentful'
4544

4645
export default function Example() {
47-
return <Visual src={entry.background} sizes="100vw" />;
46+
return (
47+
<Visual
48+
src={ entry.background }
49+
sizes='100vw' />
50+
)
4851
}
4952
```
5053
@@ -55,18 +58,17 @@ export default function Example() {
5558
Using framework adapter for Next.js:
5659
5760
```jsx
58-
import Visual from "@react-visual/next";
61+
import Visual from '@react-visual/next'
5962

6063
export default function Example() {
6164
return (
6265
<Visual
6366
image="https://placehold.co/1600x900.png"
6467
video="https://placehold.co/1600x900.mp4"
6568
aspect={16 / 9}
66-
sizes="100vw"
67-
alt="Example using placeholder assets"
68-
/>
69-
);
69+
sizes='100vw'
70+
alt='Example using placeholder assets' />
71+
)
7072
}
7173
```
7274
@@ -77,10 +79,10 @@ export default function Example() {
7779
Using Sanity + Next.js Adapter to automatically populate aspect ratio, alt, blurred placeholder, and support both image and video in one object:
7880
7981
```jsx
80-
import Visual from "@react-visual/sanity-next";
82+
import Visual from '@react-visual/sanity-next'
8183

8284
export default function Example({ background }) {
83-
return <Visual src={background} sizes="100vw" />;
85+
return <Visual src={ background } sizes='100vw' />
8486
}
8587
```
8688

‎packages/contentful/README.md‎

Lines changed: 52 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
# @react-visual/contentful [![react-visual](https://img.shields.io/endpoint?url=https://cloud.cypress.io/badge/simple/fn6c7w&style=flat&logo=cypress)](https://cloud.cypress.io/projects/fn6c7w/runs)
22

3-
Renders Contentful images and videos into a container. Features:
3+
Renders Contentful images and videos into a container. Features:
44

55
- Automatically defines a loader functions for generating srcsets
66
- Supports responsive image and video assets
@@ -17,10 +17,15 @@ yarn add @react-visual/contentful
1717
### Asset fields
1818

1919
```jsx
20-
import Visual from "@react-visual/contentful";
20+
import Visual from '@react-visual/contentful'
2121

2222
export default function Example() {
23-
return <Visual image={entry.image} video={entry.video} sizes="100vw" />;
23+
return (
24+
<Visual
25+
image={ entry.image }
26+
video={ entry.video }
27+
sizes='100vw'/>
28+
)
2429
}
2530
```
2631

@@ -49,29 +54,25 @@ fragment video on Asset {
4954
This is the expected pattern for rendering responsive images and videos.
5055

5156
```jsx
52-
import Visual from "@react-visual/contentful";
57+
import Visual from '@react-visual/contentful'
5358

5459
export default function Example() {
55-
return <Visual src={entry.background} sizes="100vw" />;
60+
return (
61+
<Visual
62+
src={ entry.background }
63+
sizes='100vw'/>
64+
)
5665
}
5766
```
5867

5968
Where `background` is defined by this GQL fragment (this consumes the previous fragments):
6069

6170
```gql
6271
fragment visual on Visual {
63-
image {
64-
...image
65-
}
66-
portraitImage {
67-
...image
68-
}
69-
video {
70-
...video
71-
}
72-
portraitVideo {
73-
...video
74-
}
72+
image { ...image }
73+
portraitImage { ...image }
74+
video { ...video }
75+
portraitVideo { ...video }
7576
alt
7677
}
7778
```
@@ -82,51 +83,52 @@ For more examples, read [the Cypress component tests](./cypress/component).
8283

8384
### Sources
8485

85-
| Prop | Type | Description |
86-
| ------- | -------- | ----------------------------------------------------------- |
87-
| `image` | `object` | A Contentful image Asset. |
88-
| `video` | `object` | A Contentful video Asset. |
89-
| `src` | `object` | An object with keys of responsive keys. See examples above. |
86+
| Prop | Type | Description
87+
| -- | -- | --
88+
| `image` | `object` | A Contentful image Asset.
89+
| `video` | `object` | A Contentful video Asset.
90+
| `src` | `object` | An object with keys of responsive keys. See examples above.
9091

9192
### Layout
9293

93-
| Prop | Type | Description |
94-
| ---------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
95-
| `expand` | `boolean` | Make the Visual fill it's container via CSS using absolute positioning. |
96-
| `aspect` | `number` | Force the Visual to a specific aspect ratio. If empty, this will be set using width and height fields from Contentful queries. |
97-
| `width` | `number`, `string` | A CSS dimension value or a px number. |
98-
| `height` | `number`, `string` | A CSS dimension value or a px number. |
99-
| `fit` | `string` | An [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) value that is applied to the assets. Defaults to `cover`. |
100-
| `position` | `string` | An [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) value. |
94+
| Prop | Type | Description
95+
| -- | -- | --
96+
| `expand` | `boolean` | Make the Visual fill it's container via CSS using absolute positioning.
97+
| `aspect` | `number` | Force the Visual to a specific aspect ratio. If empty, this will be set using width and height fields from Contentful queries.
98+
| `width` | `number`, `string` | A CSS dimension value or a px number.
99+
| `height` | `number`, `string` | A CSS dimension value or a px number.
100+
| `fit` | `string` | An [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) value that is applied to the assets. Defaults to `cover`.
101+
| `position` | `string` | An [`object-position`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-position) value.
101102

102103
### Loading
103104

104-
| Prop | Type | Description |
105-
| ---------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------ |
106-
| `priority` | `boolean` | Sets [`next/image`'s `priority`](https://nextjs.org/docs/pages/api-reference/components/image#priority) and videos to not lazy load. |
107-
| `sizes` | `string` | Sets [`next/image`'s `sizes`](https://nextjs.org/docs/pages/api-reference/components/image#sizes) prop. |
105+
| Prop | Type | Description
106+
| -- | -- | --
107+
| `priority` | `boolean` | Sets [`next/image`'s `priority`](https://nextjs.org/docs/pages/api-reference/components/image#priority) and videos to not lazy load.
108+
| `sizes` | `string` | Sets [`next/image`'s `sizes`](https://nextjs.org/docs/pages/api-reference/components/image#sizes) prop.
109+
108110

109111
### Video
110112

111-
| Prop | Type | Description |
112-
| ----------- | --------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
113-
| `paused` | `boolean` | Disables autoplay of videos. This prop is reactive, unlike the `paused` property of the html `<video>` tag. You can set it to `true` to pause a playing video or set it to `false` to play a paused video. |
114-
| `onPause` | `Function` | Invoked whenever the video fires a [pause event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event). |
115-
| `onPlay` | `Function` | Invoked whenever the video fires a [play event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event). |
116-
| `playIcon` | `ComponentType` | Replace the play icon used with accessibility controls. |
117-
| `pauseIcon` | `ComponentType` | Replace the pause icon used with accessibility controls. |
113+
| Prop | Type | Description
114+
| -- | -- | --
115+
| `paused` | `boolean` | Disables autoplay of videos. This prop is reactive, unlike the `paused` property of the html `<video>` tag. You can set it to `true` to pause a playing video or set it to `false` to play a paused video.
116+
| `onPause` | `Function` | Invoked whenever the video fires a [pause event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/pause_event).
117+
| `onPlay` | `Function` | Invoked whenever the video fires a [play event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event).
118+
| `playIcon` | `ComponentType` | Replace the play icon used with accessibility controls.
119+
| `pauseIcon` | `ComponentType` | Replace the pause icon used with accessibility controls.
118120

119121
### Accessibility
120122

121-
| Prop | Type | Description |
122-
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------- |
123-
| `alt` | `string` | Sets the alt attribute or aria-label value, depending on asset type. |
124-
| `hideAccessibilityControls` | `boolean` | Removes the play/pause toggle on videos. |
125-
| `accessibilityControlsPosition` | [`PositionOption`](https://github.com/BKWLD/react-visual/blob/eaf2d150efa1187033ba732a350a4db20f260435/packages/react/src/types/reactVisualTypes.ts#L61-L70) | Controls the position of the accessibility controls. Defaults to `bottom left`. |
123+
| Prop | Type | Description
124+
| -- | -- | --
125+
| `alt` | `string` | Sets the alt attribute or aria-label value, depending on asset type.
126+
| `hideAccessibilityControls` | `boolean` | Removes the play/pause toggle on videos.
127+
| `accessibilityControlsPosition` | [`PositionOption`](https://github.com/BKWLD/react-visual/blob/eaf2d150efa1187033ba732a350a4db20f260435/packages/react/src/types/reactVisualTypes.ts#L61-L70) | Controls the position of the accessibility controls. Defaults to `bottom left`.
126128

127129
### Theming
128130

129-
| Prop | Type | Description |
130-
| ----------- | --------------- | ----------------------- |
131-
| `className` | `string` | Add a custom CSS class. |
132-
| `style` | `CSSProperties` | Add additional styles. |
131+
| Prop | Type | Description
132+
| -- | -- | --
133+
| `className` | `string` | Add a custom CSS class.
134+
| `style` | `CSSProperties` | Add additional styles.

0 commit comments

Comments
 (0)