1Ever wonder how GitHub generates their images when you share a repo on social media?
2
3In this example we're using satori and a Deno-friendly SVG WASM creating an OpenGraph image dynamically. E.g. this image can be used when sharing a website, and it'll show up in iMessage or Twitter / other socials.
4
5Generated images are cached in Valtown's Blob system.
6
7To check metatags, you can use https://metatags.io/?url=https://yawnxyz-og.web.val.run
114 "src": "https://maxm-imggenurl.web.val.run/ios-app-icon-192x192",
115 "sizes": "192x192",
116 "type": "image/png"
117 },
118 {
119 "src": "https://maxm-imggenurl.web.val.run/ios-app-icon-512x512",
120 "sizes": "512x512",
121 "type": "image/png"
122 }
123 ]
11 </div>
12 <div className="card-body">
13 {content.cover_image && (
14 <img src={content.cover_image} alt={content.title} className="cover-image" />
15 )}
16 <p className="id"><strong>ID:</strong> {content.id}</p>
247}
248
249.cover-image {
250 width: 100%;
251 height: 200px;
3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5
6
7## Installation
1Code from https://deno.com/blog/build-image-resizing-api
2
3Useful for compressing an image before sending to chatgpt4v, for example
1import { ImageMagick, initializeImageMagick, MagickGeometry } from "https://deno.land/x/imagemagick_deno@0.0.14/mod.ts";
2
3export async function modifyImage(
4 file: File,
5 params: { width: number; height: number },
6) {
7 const imageBuffer = new Uint8Array(await file.arrayBuffer());
8 const sizingData = new MagickGeometry(
9 params.width,
12 sizingData.ignoreAspectRatio = params.height > 0 && params.width > 0;
13 return new Promise<File>((resolve) => {
14 ImageMagick.read(imageBuffer, (image) => {
15 image.resize(sizingData);
16 image.write((data) => resolve(new File([data], file.name, { type: file.type })));
17 });
18 });
3This Todo App is server rendered *and* client-hydrated React. This architecture is a lightweight alternative to NextJS, RemixJS, or other React metaframeworks with no compile or build step. The data is saved server-side in [Val Town SQLite](https://docs.val.town/std/sqlite/).
4
5
6
7## SSR React Mini Framework
17 return false;
18 });
19 const [imageData, setImageData] = useState(() => {
20 if (typeof localStorage !== 'undefined') {
21 return localStorage.getItem('imageData') || null;
22 }
23 return null;
84 };
85
86 const handleImageUpload = (e) => {
87 const file = e.target.files[0];
88 if (file) {
90 reader.onloadend = () => {
91 const dataUrl = reader.result;
92 setImageData(dataUrl);
93 if (typeof localStorage !== 'undefined') {
94 localStorage.setItem('imageData', dataUrl);
95 }
96 };
130 autoFocus
131 />
132 <div className="image-upload">
133 <input
134 type="file"
135 accept="image/*"
136 onChange={handleImageUpload}
137 id="image-upload"
138 />
139 <label htmlFor="image-upload" className="upload-label">Choose an image</label>
140 </div>
141 {imageData && (
142 <div className="image-container">
143 <img src={imageData} alt="Uploaded image" className="uploaded-image" />
144 </div>
145 )}
282}
283
284.image-upload {
285 margin-top: 1rem;
286}
304}
305
306.image-container {
307 margin-top: 1rem;
308 max-width: 100%;
309}
310
311.uploaded-image {
312 max-width: 100%;
313 height: auto;
3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5
6
7## Installation
586 height: 100%;
587 background: linear-gradient(0deg, rgba(0, 20, 0, 0.8) 25%, rgba(0, 0, 0, 0) 100%),
588 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><text x="10" y="30" fill="%230f0" font-family="monospace" font-size="20">10</text><text x="50" y="70" fill="%230f0" font-family="monospace" font-size="20">01</text></svg>');
589 opacity: 0.1;
590 z-index: -1;
