Skip to content

Commit a147aa2

Browse files
joshmandersjoshmanders
committed
flesh out docs
1 parent 7b81774 commit a147aa2

10 files changed

+440
-4
lines changed

‎docs/components/image.mdx‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
---
2+
title: Blade Components / Image
3+
description: Learn how to use the Image component in Cloudinary Laravel.
4+
ogImageTitle: Blade Components / Image
5+
head:
6+
- tag: title
7+
content: Blade Components / Image - Cloudinary Laravel
8+
---
9+
import Table from '@components/Table.astro';
10+
11+
The Image component provides an easy way to deliver images from Cloudinary using Blade syntax.
12+
13+
With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transofrmations.
14+
15+
Basic usage:
16+
17+
```blade
18+
<x-cloudinary::image public-id="example" />
19+
```
20+
21+
With additional properties:
22+
23+
```blade
24+
<x-cloudinary::image public-id="example" width="300" height="300" />
25+
```
26+
27+
## Properties Available
28+
<Table
29+
columns={[
30+
{
31+
id: 'prop',
32+
title: 'Property'
33+
},
34+
{
35+
id: 'type',
36+
title: 'Type'
37+
},
38+
{
39+
id: 'required',
40+
title: 'Required'
41+
},
42+
{
43+
id: 'example',
44+
title: 'Example'
45+
}
46+
]}
47+
data={[
48+
{
49+
prop: 'public-id',
50+
type: 'string',
51+
required: 'Yes',
52+
example: () => (<code>sample</code>),
53+
},
54+
{
55+
prop: 'width',
56+
type: 'string',
57+
required: 'No',
58+
example: () => (<code>300</code>),
59+
},
60+
{
61+
prop: 'height',
62+
type: 'string',
63+
required: 'No',
64+
example: () => (<code>300</code>),
65+
},
66+
{
67+
prop: 'alt',
68+
type: 'string',
69+
required: 'Yes',
70+
example: () => (<code>Dog catching a frisbee</code>),
71+
},
72+
{
73+
prop: 'class',
74+
type: 'string',
75+
required: 'No',
76+
example: () => (<code>rounded shadow-lg</code>),
77+
},
78+
{
79+
prop: 'crop',
80+
type: 'string',
81+
required: 'No',
82+
example: () => (<code>fill</code>),
83+
},
84+
{
85+
prop: 'gravity',
86+
type: 'string',
87+
required: 'No',
88+
example: () => (<code>auto</code>),
89+
},
90+
{
91+
prop: 'effect',
92+
type: 'string',
93+
required: 'No',
94+
example: () => (<code>sepia</code>),
95+
},
96+
{
97+
prop: 'rotate',
98+
type: 'string',
99+
required: 'No',
100+
example: () => (<code>90</code>),
101+
},
102+
{
103+
prop: 'colorize',
104+
type: 'string',
105+
required: 'No',
106+
example: () => (<code>50,100,150</code>),
107+
},
108+
{
109+
prop: 'trim',
110+
type: 'string',
111+
required: 'No',
112+
example: () => (<code>true</code>),
113+
},
114+
{
115+
prop: 'blur',
116+
type: 'string',
117+
required: 'No',
118+
example: () => (<code>500</code>),
119+
},
120+
{
121+
prop: 'gray-scale',
122+
type: 'string',
123+
required: 'No',
124+
example: () => (<code>true</code>),
125+
},
126+
{
127+
prop: 'black-white',
128+
type: 'string',
129+
required: 'No',
130+
example: () => (<code>true</code>),
131+
},
132+
{
133+
prop: 'sepia',
134+
type: 'string',
135+
required: 'No',
136+
example: () => (<code>true</code>),
137+
},
138+
{
139+
prop: 'redeye',
140+
type: 'string',
141+
required: 'No',
142+
example: () => (<code>true</code>),
143+
},
144+
{
145+
prop: 'negate',
146+
type: 'string',
147+
required: 'No',
148+
example: () => (<code>true</code>),
149+
},
150+
{
151+
prop: 'oil-paint',
152+
type: 'string',
153+
required: 'No',
154+
example: () => (<code>30</code>),
155+
},
156+
{
157+
prop: 'vignette',
158+
type: 'string',
159+
required: 'No',
160+
example: () => (<code>30</code>),
161+
},
162+
{
163+
prop: 'simulate-colorblind',
164+
type: 'string',
165+
required: 'No',
166+
example: () => (<code>deuteranopia</code>),
167+
},
168+
{
169+
prop: 'pixelate',
170+
type: 'string',
171+
required: 'No',
172+
example: () => (<code>5</code>),
173+
},
174+
{
175+
prop: 'unsharp-mask',
176+
type: 'string',
177+
required: 'No',
178+
example: () => (<code>500</code>),
179+
},
180+
{
181+
prop: 'saturation',
182+
type: 'string',
183+
required: 'No',
184+
example: () => (<code>50</code>),
185+
},
186+
{
187+
prop: 'contrast',
188+
type: 'string',
189+
required: 'No',
190+
example: () => (<code>50</code>),
191+
},
192+
{
193+
prop: 'brightness',
194+
type: 'string',
195+
required: 'No',
196+
example: () => (<code>50</code>),
197+
},
198+
{
199+
prop: 'gamma',
200+
type: 'string',
201+
required: 'No',
202+
example: () => (<code>50</code>),
203+
},
204+
{
205+
prop: 'improve-mode',
206+
type: 'string',
207+
required: 'No',
208+
example: () => (<code>indoor</code>),
209+
},
210+
{
211+
prop: 'shadow',
212+
type: 'string',
213+
required: 'No',
214+
example: () => (<code>50,x5,y5</code>),
215+
},
216+
{
217+
prop: 'border',
218+
type: 'string',
219+
required: 'No',
220+
example: () => (<code>5px_solid_black</code>),
221+
},
222+
{
223+
prop: 'round-corners',
224+
type: 'string',
225+
required: 'No',
226+
example: () => (<code>max</code>),
227+
},
228+
{
229+
prop: 'bg-color',
230+
type: 'string',
231+
required: 'No',
232+
example: () => (<code>lightblue</code>),
233+
},
234+
{
235+
prop: 'art',
236+
type: 'string',
237+
required: 'No',
238+
example: () => (<code>al_dente</code>),
239+
},
240+
{
241+
prop: 'cartoonify',
242+
type: 'string',
243+
required: 'No',
244+
example: () => (<code>20:60</code>),
245+
}
246+
]}
247+
/>

‎docs/components/upload-widget.mdx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: Blade Components / Upload Widget
3+
description: Learn how to use the Upload Widget component in Cloudinary Laravel.
4+
ogImageTitle: Blade Components / Upload Widget
5+
head:
6+
- tag: title
7+
content: Blade Components / Upload Widget - Cloudinary Laravel
8+
---
9+
10+
The Upload Widget component provides an easy way to integrate Cloudinary's upload widget into your Laravel application using Blade syntax.
11+
12+
Basic usage:
13+
14+
```blade
15+
<x-cloudinary::widget>Upload Files</x-cloudinary::widget>
16+
```

‎docs/components/video.mdx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
title: Blade Components / Video
3+
description: Learn how to use the Video component in Cloudinary Laravel.
4+
ogImageTitle: Blade Components / Video
5+
head:
6+
- tag: title
7+
content: Blade Components / Video - Cloudinary Laravel
8+
---
9+
10+
import Table from '@components/Table.astro';
11+
12+
The Video component provides an easy way to deliver videos from Cloudinary using Blade syntax.
13+
14+
Basic usage:
15+
16+
```blade
17+
<x-cloudinary::video public-id="example" />
18+
```
19+
20+
With additional properties:
21+
22+
```blade
23+
<x-cloudinary::video public-id="example" width="300" height="300" />
24+
```
25+
26+
## Properties Available
27+
<Table
28+
columns={[
29+
{
30+
id: 'prop',
31+
title: 'Property'
32+
},
33+
{
34+
id: 'type',
35+
title: 'Type'
36+
},
37+
{
38+
id: 'required',
39+
title: 'Required'
40+
},
41+
{
42+
id: 'example',
43+
title: 'Example'
44+
}
45+
]}
46+
data={[
47+
{
48+
prop: 'public-id',
49+
type: 'string',
50+
required: 'Yes',
51+
example: () => (<code>sample</code>),
52+
},
53+
{
54+
prop: 'width',
55+
type: 'string',
56+
required: 'No',
57+
example: () => (<code>300</code>),
58+
},
59+
{
60+
prop: 'height',
61+
type: 'string',
62+
required: 'No',
63+
example: () => (<code>300</code>),
64+
}
65+
]}
66+
/>

‎docs/configuration.mdx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
---
2+
title: Basic Usage / Configuration
3+
description: Learn how to configure Cloudinary Laravel for your application.
4+
ogImageTitle: Configuration
5+
head:
6+
- tag: title
7+
content: File Storage Driver Basic Usage / Configuration - Cloudinary Laravel
8+
---
9+
import { Tabs, TabItem, Steps } from '@astrojs/starlight/components';
10+
import CodeBlock from '@components/CodeBlock.astro';
11+
12+
This SDK implements the [File Storage](https://laravel.com/docs/12.x/filesystem#main-content) Driver interface allowing you to use it as just another storage destination like s3, azure or local disk.
13+
14+
Add a new `cloudinary` key to your `config/filesystems.php` disk key like so:
15+
16+
<CodeBlock alwaysExpanded>
17+
```php
18+
...,
19+
'cloudinary' => [
20+
'driver' => 'cloudinary',
21+
'key' => env('CLOUDINARY_KEY'),
22+
'secret' => env('CLOUDINARY_SECRET'),
23+
'cloud' => env('CLOUDINARY_CLOUD_NAME'),
24+
'url' => env('CLOUDINARY_URL'),
25+
'secure' => (bool) env('CLOUDINARY_SECURE', true),
26+
'prefix' => env('CLOUDINARY_PREFIX'),
27+
],
28+
...,
29+
```
30+
</CodeBlock>

‎docs/examples.mdx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
title: Examples
3+
description: Examples of using Cloudinary Laravel.
4+
ogImageTitle: Examples
5+
head:
6+
- tag: title
7+
content: File Storage Driver Examples - Cloudinary Laravel
8+
---
9+
10+
Coming Soon!

0 commit comments

Comments
 (0)