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;
10
11<div align="center">
12<img src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/67a1d35e-c37c-41a4-0e5a-03a9ba585d00/public" width="500px"/>
13</div>
3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page.
4
5
6
7## Install
30 content: "New user! " + data.email_addresses[0].email_address
31 + " "
32 + data.profile_image_url,
33 });
34
