Skip to content

Commit

Permalink
Merge pull request #876 from simonihmig/solid-docs
Browse files Browse the repository at this point in the history
Add Solid docs
  • Loading branch information
simonihmig authored Jan 6, 2025
2 parents f592f3b + 5933278 commit 17777da
Show file tree
Hide file tree
Showing 11 changed files with 328 additions and 7 deletions.
1 change: 1 addition & 0 deletions apps/docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export default defineConfig({
base: '/frameworks',
items: [
{ text: 'Ember', link: '/ember' },
{ text: 'Solid', link: '/solid' },
{ text: 'Web Component (Lit)', link: '/wc' },
],
},
Expand Down
85 changes: 84 additions & 1 deletion apps/docs/src/cdn/cloudinary.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,15 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { cloudinary } from '@responsive-image/cdn';

export default function MyApp() {
return <ResponsiveImage src={cloudinary('path/to/uploaded/image.jpg')} />;
}
```

:::

### Aspect Ratio
Expand Down Expand Up @@ -120,6 +129,21 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { cloudinary } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={cloudinary('path/to/uploaded/image.jpg', {
aspectRatio: 1.5,
})}
/>
);
}
```

:::

### Transformations
Expand Down Expand Up @@ -172,7 +196,21 @@ export class MyApp extends LitElement {
}
```

:::
```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { cloudinary } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={cloudinary('path/to/uploaded/image.jpg', {
co: 'rgb:20a020',
e: 'colorize:50',
})}
/>
);
}
```

:::

Expand Down Expand Up @@ -223,6 +261,21 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { cloudinary } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={cloudinary('path/to/uploaded/image.jpg', {
quality: 50,
})}
/>
);
}
```

:::

### Image formats
Expand Down Expand Up @@ -273,6 +326,21 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { cloudinary } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={cloudinary('path/to/uploaded/image.jpg', {
formats: ['webp', 'avif'],
})}
/>
);
}
```

:::

### Remote source
Expand Down Expand Up @@ -320,4 +388,19 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { cloudinary } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={cloudinary(
'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png',
)}
/>
);
}
```

:::
70 changes: 70 additions & 0 deletions apps/docs/src/cdn/imgix.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,15 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
return <ResponsiveImage src={imgix('path/to/uploaded/image.jpg')} />;
}
```

:::

### Aspect Ratio
Expand Down Expand Up @@ -118,6 +127,21 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={imgix('path/to/uploaded/image.jpg', {
aspectRatio: 1.5,
})}
/>
);
}
```

:::

### Custom parameters
Expand Down Expand Up @@ -169,6 +193,22 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={imgix('path/to/uploaded/image.jpg', {
monochrome: '44768B',
px: 10,
})}
/>
);
}
```

:::

### Quality
Expand Down Expand Up @@ -216,6 +256,21 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={imgix('path/to/uploaded/image.jpg', {
quality: 50,
})}
/>
);
}
```

:::

### Image formats
Expand Down Expand Up @@ -266,4 +321,19 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { imgix } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={imgix('path/to/uploaded/image.jpg', {
formats: ['webp', 'avif'],
})}
/>
);
}
```

:::
71 changes: 70 additions & 1 deletion apps/docs/src/cdn/netlify.md
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,15 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { netlify } from '@responsive-image/cdn';

export default function MyApp() {
return <ResponsiveImage src={netlify('path/to/uploaded/image.jpg')} />;
}
```

:::

This assumes that your application itself is also served from Netlify, so that `/path/to/image.jpg` is an image in your repo that is also deployed to Netlify. If your application containing that image is not on Netlify, you can still make Netlify process and serve it, you just need to point to it with an absolue URL to make use of Netlify's [remote source](#remote-source) support.
Expand Down Expand Up @@ -120,11 +129,26 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { netlify } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={netlify('path/to/uploaded/image.jpg', {
aspectRatio: 1.5,
})}
/>
);
}
```

:::

### Quality

Use the `quality` parameter to pass a custom [quality](https://cloudinary.com/documentation/transformation_reference#q_quality) setting instead of the default `auto`:
Use the `quality` parameter to pass a custom [quality](https://netlify.com/documentation/transformation_reference#q_quality) setting instead of the default `auto`:

::: code-group

Expand Down Expand Up @@ -166,6 +190,21 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { netlify } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={netlify('path/to/uploaded/image.jpg', {
quality: 50,
})}
/>
);
}
```

:::

### Image formats
Expand Down Expand Up @@ -216,6 +255,21 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { netlify } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={netlify('path/to/uploaded/image.jpg', {
formats: ['webp', 'avif'],
})}
/>
);
}
```

:::

### Remote source
Expand Down Expand Up @@ -263,4 +317,19 @@ export class MyApp extends LitElement {
}
```

```tsx [Solid]
import { ResponsiveImage } from '@responsive-image/solid';
import { netlify } from '@responsive-image/cdn';

export default function MyApp() {
return (
<ResponsiveImage
src={netlify(
'https://upload.wikimedia.org/wikipedia/commons/1/13/Benedict_Cumberbatch_2011.png',
)}
/>
);
}
```

:::
2 changes: 2 additions & 0 deletions apps/docs/src/frameworks/ember.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
# Ember.js

The `@responsive-image/ember` package provides a native [Ember.js](https://emberjs.com/) image component.

## Installation

In your application's directory:
Expand Down
1 change: 1 addition & 0 deletions apps/docs/src/frameworks/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
The [image component](../usage/component.md) and other utilities are provided with framework specific packages:

- [Ember](./ember.md)
- [Solid](./solid.md)
- [Web Component](./wc.md) (built with Lit, but usable with any framework)

> [!NOTE]
Expand Down
Loading

0 comments on commit 17777da

Please sign in to comment.