Skip to content

Commit 298a7ee

Browse files
batosaibatosai
committed
doc: add use case picture
1 parent 53c10af commit 298a7ee

12 files changed

+244
-26
lines changed

‎README.md

+37-20
Original file line numberDiff line numberDiff line change
@@ -23,41 +23,58 @@ Project sample : [adonis-starter-kit](https://github.com/batosai/adonis-starter-
2323
- [x] documents thumbnail
2424
- [x] videos thumbnail
2525
- [ ] command regenerate
26+
- [ ] command make:convert
2627
- [x] adonis-drive/flydrive
2728
- [ ] jobs queue
2829
- [x] serialize
2930

30-
### Meta data list (if available)
3131

32-
- extension name
33-
- size
34-
- dimension (width, height)
35-
- created date
36-
- orientation
37-
- mime type
38-
- gps
32+
## Setup
33+
34+
Install and configure the package:
3935

40-
### Variants
36+
```sh
37+
node ace add @jrmc/adonis-attachment
38+
```
4139

42-
Configure differents images sizes and formats
40+
## Sample
4341

44-
### Regenerate (coming soon)
42+
Simple upload file
4543

46-
Regenerate variantes files
44+
```ts
45+
// app/models/user.ts
46+
import { BaseModel } from '@adonisjs/lucid/orm'
47+
import { compose } from '@adonisjs/core/helpers'
48+
import { attachment, Attachmentable } from '@jrmc/adonis-attachment'
49+
import type { Attachment } from '@jrmc/adonis-attachment/types/attachment' // [!code highlight]
4750
48-
### Drive
51+
class User extends compose(BaseModel, Attachmentable) { // [!code highlight]
52+
@attachment() // [!code highlight]
53+
declare avatar: Attachment // [!code highlight]
54+
}
55+
```
4956

50-
Use [@adonisjs/drive](https://docs.adonisjs.com/guides/digging-deeper/drive) for private file and cloud services
57+
---
5158

52-
### Jobs queue (coming soon)
59+
```ts
60+
// app/controllers/users_controller.ts
61+
import { attachmentManager } from '@jrmc/adonis-attachment' // [!code focus]
5362
54-
Couple with a job queue (recommended, optional)
63+
class UsersController {
64+
public store({ request }: HttpContext) {
65+
const avatar = request.file('avatar')! // [!code focus]
66+
const user = new User()
5567

56-
## Setup
68+
user.avatar = await attachmentManager.createFromFile(avatar) // [!code focus]
69+
await user.save()
70+
}
71+
}
72+
```
5773

58-
Install and configure the package:
74+
---
5975

60-
```sh
61-
node ace add @jrmc/adonis-attachment
76+
```edge
77+
<img src="{{ await user.avatar.getUrl() }}" loading="lazy" alt="" />
6278
```
6379

80+
Read [documentation](https://adonis-attachment.jrmc.dev/) for advanced usage(thumbnail video/pdf/doc, create from buffer/base64...)

‎docs/.vitepress/config.ts

+12-1
Original file line numberDiff line numberDiff line change
@@ -106,6 +106,15 @@ export default defineConfig({
106106
link: '/guide/advanced_usage/custom-converter'
107107
},
108108
]
109+
},
110+
{
111+
text: 'Use cases',
112+
items: [
113+
{
114+
text: 'Picture',
115+
link: '/guide/use-cases/picture'
116+
},
117+
]
109118
}
110119
]
111120
},
@@ -120,7 +129,9 @@ export default defineConfig({
120129
],
121130

122131
socialLinks: [
123-
{ icon: 'github', link: 'https://github.com/batosai/adonis-attachment' }
132+
{ icon: 'x', link: 'https://x.com/chaufourier' },
133+
{ icon: 'discord', link: 'https://discord.gg/89eMn2vB' },
134+
{ icon: 'github', link: 'https://github.com/batosai/adonis-attachment' },
124135
],
125136

126137
search: {

‎docs/assets/dark-convert.svg

+7
Loading

‎docs/assets/dark-upload.svg

+5
Loading

‎docs/assets/dark-view.svg

+5
Loading

‎docs/assets/light-convert.svg

+7
Loading

‎docs/assets/light-upload.svg

+5
Loading

‎docs/assets/light-view.svg

+5
Loading

‎docs/guide/basic_usage/view-setup.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ getSignedUrl options params accepts `expiresIn`, `contentType` et `contentDispos
4141
## URLs for Inertia template
4242

4343
::: code-group
44-
```js
44+
```js [react]
4545
<img src={user.avatar.thumbnail.url} loading="lazy" alt="" />
4646
```
4747

‎docs/guide/essentials/installation.md

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
# Installation
22

3-
The Adonis Attachment package is available on [npm](https://www.npmjs.com/package/@jrmc/adonis-attachment).
3+
The Adonis Attachment package is available on [npm](https://www.npmjs.com/package/@jrmc/adonis-attachment).
4+
5+
It's required [Adonis Drive](https://docs.adonisjs.com/guides/digging-deeper/drive), please look at the documentation if this is not installed.
6+
47
You can install it using the following ace command to automagically configure it:
58
```sh
69
node ace add @jrmc/adonis-attachment

‎docs/guide/use-cases/picture.md

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
# Picture
2+
3+
Using your variants with `<picture>` for create a component.
4+
5+
::: code-group
6+
7+
```js [edge]
8+
// picture.edge
9+
<picture>
10+
<source media="(min-width: 1200px)" srcset="{{ await source.getUrl('large') }}">
11+
<source media="(min-width: 768px)" srcset="{{ await source.getUrl('medium') }}">
12+
<source media="(min-width: 480px)" srcset="{{ await source.getUrl('small') }}">
13+
<img src="{{ await source.getUrl() }}" alt="image description">
14+
</picture>
15+
```
16+
```js [react]
17+
// picture.jsx
18+
import React from 'react';
19+
20+
const Picture = ({ source, alt }) => {
21+
return (
22+
<picture>
23+
<source media="(min-width: 1200px)" srcSet={source.large.url} />
24+
<source media="(min-width: 768px)" srcSet={source.medium.url} />
25+
<source media="(min-width: 480px)" srcSet={source.small.url} />
26+
<img src={source.url} alt={alt} />
27+
</picture>
28+
)
29+
}
30+
```
31+
```svelte [vue]
32+
// picture.vue
33+
<template>
34+
<picture>
35+
<source media="(min-width: 1200px)" :srcset="source.large.url">
36+
<source media="(min-width: 768px)" :srcset="source.medium.url">
37+
<source media="(min-width: 480px)" :srcset="source.small.url">
38+
<img :src="source.url" :alt="alt">
39+
</picture>
40+
<template>
41+
42+
<script setup>
43+
defineProps({
44+
source: Object,
45+
alt: String
46+
})
47+
</script>
48+
```
49+
```svelte
50+
// picture.svelte
51+
<script>
52+
export let source;
53+
export let alt;
54+
</script>
55+
56+
<picture>
57+
<source media="(min-width: 1200px)" srcset={source.large.url}>
58+
<source media="(min-width: 768px)" srcset={source.medium.url}>
59+
<source media="(min-width: 480px)" srcset={source.small.url}>
60+
<img src={source.url} alt={alt}>
61+
</picture>
62+
```
63+
:::
64+
65+
Use
66+
67+
::: code-group
68+
69+
```edge [edge]
70+
@!picture({
71+
source: article.image,
72+
alt: "Image alt"
73+
})
74+
```
75+
```js [react]
76+
<Picture
77+
source={ article.image }
78+
alt="Image alt"
79+
/>
80+
```
81+
```svelte [vue]
82+
<Picture
83+
:source="article.image"
84+
alt="Image alt"
85+
/>
86+
```
87+
```svelte
88+
<Picture
89+
source={ article.image }
90+
alt="Image alt"
91+
/>
92+
```
93+
:::
94+
95+
96+
Configuration
97+
98+
::: code-group
99+
100+
```ts [config/attachment.ts]
101+
import { defineConfig } from '@jrmc/adonis-attachment'
102+
103+
export default defineConfig({
104+
preComputeUrl: true,
105+
converters: [
106+
{
107+
key: 'small',
108+
converter: () => import('@jrmc/adonis-attachment/converters/image_converter'),
109+
options: {
110+
resize: 480,
111+
}
112+
},
113+
{
114+
key: 'medium',
115+
converter: () => import('@jrmc/adonis-attachment/converters/image_converter'),
116+
options: {
117+
resize: 768,
118+
}
119+
},
120+
{
121+
key: 'large',
122+
converter: () => import('@jrmc/adonis-attachment/converters/image_converter'),
123+
options: {
124+
resize: 1200,
125+
}
126+
}
127+
]
128+
})
129+
```
130+
```ts [app/models/article.ts]
131+
import { BaseModel } from '@adonisjs/lucid/orm'
132+
import { compose } from '@adonisjs/core/helpers'
133+
import { attachment, Attachmentable } from '@jrmc/adonis-attachment'
134+
import type { Attachment } from '@jrmc/adonis-attachment/types/attachment'
135+
136+
class User extends compose(BaseModel, Attachmentable) {
137+
@attachment({
138+
variants: ['small', 'medium', 'large']
139+
})
140+
declare image: Attachment
141+
}
142+
```
143+
144+
:::

‎docs/index.md

+12-3
Original file line numberDiff line numberDiff line change
@@ -15,11 +15,20 @@ hero:
1515
link: https://github.com/batosai/adonis-attachment
1616

1717
features:
18-
- title: Upload
18+
- icon:
19+
light: /assets/light-upload.svg
20+
dark: /assets/dark-upload.svg
21+
title: Upload
1922
details: Simplifying upload management.
20-
- title: Convert
23+
- icon:
24+
light: /assets/light-convert.svg
25+
dark: /assets/dark-convert.svg
26+
title: Convert
2127
details: Optimise, convert, crop image, thumbnail video etc.
22-
- title: Edge & inertia compliant
28+
- icon:
29+
light: /assets/light-view.svg
30+
dark: /assets/dark-view.svg
31+
title: Edge & inertia compliant
2332
details: Go to attachment in your favorite frontend
2433
---
2534

0 commit comments

Comments
 (0)