mirror of
https://github.com/prdlk/dotfiles.git
synced 2026-11-03 19:37:52 +00:00
Prad Nukala
6406208b35
- 16 cross-shell utilities converted to sh/bash chezmoi executables: ai c2p cp-appid extract_agents fab gdc gh-sonr-org-migrate ghg-clone ghn gho git-summary launch_omp_livediff_overlay lc-elir mdcp mdp pj (ghg-clone not named ghg: unrelated cargo binary owns that name) - cwd/history helpers stay per-shell: yy c cd clip-last + ghg/ghn/gho cd-wrappers in bash/functions/ and zsh/functions/, loaded by rc files - fish keeps only shell-state functions; converted ones now hit PATH - cp-appid ignore gating moved to .local/bin path - dot_agents/skills: 82 skills materialized from dotstate storage so dot_claude skill symlinks resolve on fresh bootstrap; dotstate profile/symlinks.json released .agents/skills .bashrc .zshrc
116 lines
3.5 KiB
Markdown
116 lines
3.5 KiB
Markdown
# Common Patterns
|
|
|
|
## URL Transform Options
|
|
|
|
```
|
|
width=<PX> height=<PX> fit=scale-down|contain|cover|crop|pad
|
|
quality=85 format=auto|webp|avif|jpeg|png dpr=2
|
|
gravity=auto|face|left|right|top|bottom sharpen=2 blur=10
|
|
rotate=90|180|270 background=white metadata=none|copyright|keep
|
|
```
|
|
|
|
## Responsive Images (srcset)
|
|
|
|
```html
|
|
<img src="https://imagedelivery.net/{hash}/{id}/width=800"
|
|
srcset=".../{id}/width=400 400w, .../{id}/width=800 800w, .../{id}/width=1200 1200w"
|
|
sizes="(max-width: 600px) 400px, 800px" />
|
|
```
|
|
|
|
## Format Negotiation
|
|
|
|
```typescript
|
|
async fetch(request: Request, env: Env): Promise<Response> {
|
|
const accept = request.headers.get('Accept') || '';
|
|
const format = /image\/avif/.test(accept) ? 'avif' : /image\/webp/.test(accept) ? 'webp' : 'jpeg';
|
|
return env.IMAGES.input(buffer).transform({ format, quality: 85 }).output().response();
|
|
}
|
|
```
|
|
|
|
## Direct Creator Upload
|
|
|
|
```typescript
|
|
// Backend: Generate upload URL
|
|
const response = await fetch(
|
|
`https://api.cloudflare.com/client/v4/accounts/${env.ACCOUNT_ID}/images/v2/direct_upload`,
|
|
{ method: 'POST', headers: { 'Authorization': `Bearer ${env.API_TOKEN}` },
|
|
body: JSON.stringify({ requireSignedURLs: false, metadata: { userId } }) }
|
|
);
|
|
|
|
// Frontend: Upload to returned uploadURL
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
await fetch(result.uploadURL, { method: 'POST', body: formData });
|
|
// Use: https://imagedelivery.net/{hash}/${result.id}/public
|
|
```
|
|
|
|
## Transform & Store to R2
|
|
|
|
```typescript
|
|
async fetch(request: Request, env: Env): Promise<Response> {
|
|
const file = (await request.formData()).get('image') as File;
|
|
const transformed = await env.IMAGES
|
|
.input(await file.arrayBuffer())
|
|
.transform({ width: 800, format: 'avif', quality: 80 })
|
|
.output();
|
|
await env.R2.put(`images/${Date.now()}.avif`, transformed.response().body);
|
|
return Response.json({ success: true });
|
|
}
|
|
```
|
|
|
|
## Watermarking
|
|
|
|
```typescript
|
|
const watermark = await env.ASSETS.fetch(new URL('/watermark.png', request.url));
|
|
const result = await env.IMAGES
|
|
.input(await image.arrayBuffer())
|
|
.draw(env.IMAGES.input(watermark.body).transform({ width: 100 }), { bottom: 20, right: 20, opacity: 0.7 })
|
|
.transform({ format: 'avif' })
|
|
.output();
|
|
return result.response();
|
|
```
|
|
|
|
## Device-Based Transforms
|
|
|
|
```typescript
|
|
const ua = request.headers.get('User-Agent') || '';
|
|
const isMobile = /Mobile|Android|iPhone/i.test(ua);
|
|
return env.IMAGES.input(buffer)
|
|
.transform({ width: isMobile ? 400 : 1200, quality: isMobile ? 75 : 85, format: 'avif' })
|
|
.output().response();
|
|
```
|
|
|
|
## Caching Strategy
|
|
|
|
```typescript
|
|
async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
|
|
const cache = caches.default;
|
|
let response = await cache.match(request);
|
|
if (!response) {
|
|
response = await env.IMAGES.input(buffer).transform({ width: 800, format: 'avif' }).output().response();
|
|
response = new Response(response.body, { headers: { ...response.headers, 'Cache-Control': 'public, max-age=86400' } });
|
|
ctx.waitUntil(cache.put(request, response.clone()));
|
|
}
|
|
return response;
|
|
}
|
|
```
|
|
|
|
## Batch Processing
|
|
|
|
```typescript
|
|
const results = await Promise.all(images.map(buffer =>
|
|
env.IMAGES.input(buffer).transform({ width: 800, fit: 'cover', format: 'avif' }).output()
|
|
));
|
|
```
|
|
|
|
## Error Handling
|
|
|
|
```typescript
|
|
try {
|
|
return (await env.IMAGES.input(buffer).transform({ width: 800 }).output()).response();
|
|
} catch (error) {
|
|
console.error('Transform failed:', error);
|
|
return new Response('Image processing failed', { status: 500 });
|
|
}
|
|
```
|