1/** @jsxImportSource https://esm.sh/preact */
2import { boomboxData } from "./boombox.js";
3import { ImageResponse } from "npm:@vercel/og";
4
5export function generateOgImageResponse(code: string | undefined) {
6 try {
7 const bb = boomboxData();
18
19 const svg = bb.svg({ unpaddedHeight });
20 const imgSrc = `data:image/svg+xml;base64,${btoa(svg)}`;
21 return new ImageResponse(
22 (
23 <img
167 <meta name="viewport" content="width=device-width, initial-scale=1.0">
168 <title>Prerequisite Tree Generator</title>
169 <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌳</text></svg>">
170 <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
171 <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
209gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
210gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
211gl.texImage2D(gl.TEXTURE_2D, 0, gl.R8, numBars, 1, 0, gl.RED, gl.UNSIGNED_BYTE, null);
212
213// Matrix helpers
263 gl.activeTexture(gl.TEXTURE0);
264 gl.bindTexture(gl.TEXTURE_2D, audioTex);
265 gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, numBars, 1, gl.RED, gl.UNSIGNED_BYTE, fftBuffer);
266 }
267
130
131#### **Content Rendering**
132- **Rich Notion Blocks**: Supports headings, paragraphs, lists, code blocks, callouts, images, videos, tables, and more
133- **Enhanced Code Blocks**: Syntax highlighting powered by Prism.js with support for 30+ languages, line numbers, and language indicators (optimized for performance with non-blocking JavaScript loading)
134- **Property Display**: Shows all page properties with type-specific formatting and icons
5import { Home } from "./Home.tsx";
6import { BlobPage } from "./BlobPage.tsx";
7import { isImage, isJSON, isText } from "./utils.ts";
8import { Layout } from "./Layout.tsx";
9import { NewPage } from "./NewPage.tsx";
78 }
79 const metadata = matches[0];
80 if (isImage(metadata.key)) {
81 return c.html(<BlobPage name={key} metadata={metadata} type="image" />);
82 }
83 if (metadata.size < 1024 || isText(metadata.key)) { // is text or small
4This is a lightweight Blob Admin interface to view and debug your Blob data.
5
6
7
8## Installation
31- **Authentication**: Secure access with lastlogin middleware
32- **File Type Support**:
33 - **Images**: Display inline with preview
34 - **Text Files**: Editable in textarea with syntax highlighting
35 - **JSON Files**: Interactive JSON viewer with collapsible nodes and edit capability
1const COMMON_IMAGE_EXTENSIONS = [
2 "jpg",
3 "jpeg",
45];
46
47export function isImage(path: string) {
48 return COMMON_IMAGE_EXTENSIONS.includes(path.split(".").pop());
49}
50
92 </form>
93 )}
94 {type === "image" && <img src={`/raw/${encodeURIComponent(name)}`} />}
95 </Layout>
96 );
78<br/>
79<br/>
80<div class="time-bar" onclick="loadImage()" id="timeBar">åŠ è½½ä¸...</div>
81<div>
82 <img id="preview" src="" />
83</div><input type="file" id="fileInput" accept="image/*" style="display:none;">
84
85<div id="barcodeWrapper">
92
93 window.counter = 0;
94 function loadImage(){
95 window.counter++;
96 if(window.counter > 6 ){
39 if (response.status > 400) {
40 const shortenedName = "Error (Forbidden)";
41 const image = "/assets/spotify.svg";
42 return { shortenedName, image };
43 } else if (response.status === 204) {
44 const shortenedName = "Currently Not Playing";
45 const image = "/assets/spotify.svg";
46 return { shortenedName, image };
47 }
48
49 const song = await response.json();
50 const image = song.item.album.images[0].url;
51 const artistNames = song.item.artists.map(a => a.name);
52 const link = song.item.external_urls.spotify;
65 formattedArtist,
66 artistLink,
67 image,
68 };
69 } catch (error) {
70 const shortenedName = "Error";
71 const image = "/assets/spotify.svg";
72 return { shortenedName, image };
73 }
74};
