139 body::before {
140 content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
141 background-image:
142 linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
143 linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
386 /* Gallery & Contact Placeholders */
387 .gallery-grid { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: 1rem; }
388 .gallery-grid .image-container {
389 width: 150px; height: 150px; border-radius: 15px; overflow: hidden;
390 border: 1px solid var(--color-border); background: var(--color-bg);
391 box-shadow: 0 4px 15px var(--shadow-color);
392 }
393 .gallery-grid .image-container img { width: 100%; height: 100%; object-fit: cover; }
394
395 /* Crystal Container for static info page (if used) */
515 <h2 class="tab-title" data-translate="galleryTitle">Gallery</h2>
516 <div class="gallery-grid">
517 <div class="image-container"><img src="https://images.unsplash.com/photo-1677756119517-756a188d2d94?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" alt="AI 1"></div>
518 <div class="image-container"><img src="https://images.unsplash.com/photo-1696258680260-492036cd6559?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" alt="AI 2"></div>
519 <div class="image-container"><img src="https://images.unsplash.com/photo-1684495809981-394107651435?ixlib=rb-4.0.3&q=85&fm=jpg&crop=entropy&cs=srgb&w=600" alt="AI 3"></div>
520 </div>
521 </div>
43 }
44
45 // Set temporary image on "Yes" click
46 setCurrentImg(tempYesImg);
47
48 // Revert back to the default image after 1 second
49 setTimeout(() => {
50 setCurrentImg(yesImg);
55 setIsNoClicked(true);
56 setIsYesClicked(false);
57 setCurrentImg(noImg); // Keep no image as long as "No" is clicked
58 };
59
130 width: 100%;
131 height: 100%;
132 background-image:
133 linear-gradient(to right, rgba(200, 200, 200, 0.1) 1px, transparent 1px), /* Slightly darker grid */
134 linear-gradient(to bottom, rgba(200, 200, 200, 0.1) 1px, transparent 1px);
67 - 'name': The name of the race (string).
68 - 'description': A brief description (string, 1-2 sentences maximum).
69 - 'styleHint': 3-5 descriptive keywords for generating an image (string).
70 - 'effectColor': A valid CSS hexadecimal color code string (e.g., "#RRGGBB").
71
5import * as db from "./db.ts";
6import { embedMetadata, handleFarcasterEndpoints, name } from "./farcaster.ts";
7import { handleImageEndpoints } from "./image.tsx";
8
9const app = new Hono();
10
11handleImageEndpoints(app);
12handleFarcasterEndpoints(app);
13
44 <meta name="fc:frame" content={JSON.stringify(embedMetadata(baseUrl, path))} />
45 <link rel="icon" href={baseUrl + "/icon"} />
46 <meta property="og:image" content={baseUrl + "/image"} />
47 </head>
48 <body class="bg-white text-black dark:bg-black dark:text-white">
5import satori from "npm:satori";
6
7export function handleImageEndpoints(app: Hono) {
8 const headers = {
9 "Content-Type": "image/png",
10 "cache-control": "public, max-age=86400",
11 };
12 app.get("/image", async (c) => {
13 return c.body(await homeImage(), 200, headers);
14 });
15 app.get("/icon", async (c) => {
16 return c.body(await iconImage(), 200, headers);
17 });
18}
19
20export async function homeImage() {
21 return await ogImage(
22 <div tw="w-full h-full flex justify-start items-end text-[100px] bg-black text-white p-[50px]">
23 <div tw="flex flex-col items-start gap-[10px]">
31}
32
33export async function iconImage() {
34 return await ogImage(
35 <div tw="w-full h-full flex justify-center items-center text-[100px] bg-black text-white p-[50px]">
36 <img tw="w-[350px] h-[350px]" src={base64Icon(SquareDashed)} />
45//////////
46
47export async function ogImage(body, options = {}) {
48 const svg = await satori(
49 body,
57 if (code === "emoji") {
58 const unicode = segment.codePointAt(0).toString(16).toUpperCase();
59 return `data:image/svg+xml;base64,` + btoa(await loadEmoji(unicode));
60 }
61 return "";
94 const base64 = Buffer.from(svg).toString("base64");
95 // console.log('getIconDataUrl', name, svg, base64)
96 return `data:image/svg+xml;base64,${base64}`;
97};
5export const name = "Mini App Starter";
6// export const iconUrl = "https://imgur.com/TrJLlwp.png";
7// export const ogImageUrl = "https://imgur.com/xKVOVUE.png";
8
9export function embedMetadata(baseUrl: string, path: string = "/") {
10 return {
11 version: "next",
12 imageUrl: baseUrl + "/image",
13 button: {
14 title: name,
17 name: name,
18 url: baseUrl + path,
19 splashImageUrl: baseUrl + "/icon",
20 splashBackgroundColor: "#111111",
21 },
55 "iconUrl": baseUrl + "/icon",
56 "homeUrl": baseUrl,
57 "splashImageUrl": baseUrl + "/icon",
58 "splashBackgroundColor": "#111111",
59 "primaryCategory": "developer-tools",
3Protect your vals behind a password. Use session cookies to persist authentication.
4
5
6
7## Usage
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
437 {profile && (
438 <div className="flex items-center space-x-4">
439 <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
440 <span>{profile.username}</span>
441 <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
580 alt="Blob content"
581 className="max-w-full h-auto"
582 onError={() => console.error("Error loading image")}
583 />
584 </div>
630 <li>Create public shareable links for blobs</li>
631 <li>View and manage public folder</li>
632 <li>Preview images directly in the interface</li>
633 </ul>
634 </div>
