Val Town Code Search

MiniAppStarter index.tsx3 matches

@jhonceth•Updated 2 weeks ago

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">

MiniAppStarter image.tsx12 matches

@jhonceth•Updated 2 weeks ago

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};

MiniAppStarter farcaster.ts4 matches

@jhonceth•Updated 2 weeks ago

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",

WillpersonalWebsite HTTP1011 match

@willthereader•Updated 2 weeks ago

48
49<h2>Credit</h2>
50<div><div><p>I copied image <a class="text-blue-500 hover:underline" href="https://medium.com/@prabathshalitha21/11-http-headers-http-status-codes-eb34449599fb/">11. HTTP Headers 
51& HTTP Status Codes</a> which was written by <a class="text-blue-500 hover:underline" href="https://medium.com/@prabathshalitha21?source=post_page---byline--eb34449599fb---------------------------------------">Prabath Shalitha</a></p></div></div>
52

how-to README.md3 matches

@jxnblk•Updated 2 weeks ago

14- [Hono JSX Starter][]: Render Hono with JSX
15- [Hono Client Starter][]: Render Hono with JSX on the server and hydrate on the client
16- [SVG Starter][]: Render an SVG image response
17- [SVG PNG Starter][]: Render an SVG as a PNG image response
18- [Preact Starter][]: Render Preact on the server
19- [Preact Client Starter][]: Render Preact on the server and hydrate the app on the client
46
47<!--
48- README card image
49
50- [x] React Starter

OpenTownie_jackson useChatLogic.ts4 matches

@stevekrouse•Updated 2 weeks ago

9  bearerToken: string;
10  selectedFiles: string[];
11  images: (string | null)[];
12  soundEnabled: boolean;
13}
19  bearerToken,
20  selectedFiles,
21  images,
22  soundEnabled,
23}: UseChatLogicProps) {
43      anthropicApiKey,
44      selectedFiles,
45      images: images
46        .filter((img): img is string => {
47          const isValid = typeof img === "string" && img.startsWith("data:");
48          if (!isValid && img !== null) {
49            console.warn("Invalid image format:", img?.substring(0, 50) + "...");
50          }
51          return isValid;

OpenTownie_jackson TODOs.md2 matches

@stevekrouse•Updated 2 weeks ago

29  - [x] File write as a code embed
30  - [x] str_replace as a diff view
31- [x] make image drop area invisible and bigger
32- [x] Give it all the code (except maybe .txt files) as initial context (like cursor sonnet max)
33- [x] I seem to have lost the delete file tool and instructions, try to find them back in history or re-create?
55- [x] Create branch
56- [x] URL input + pathname
57- [x] Image upload controls
58- [x] Preview refresh button
59- [x] Audio controls

OpenTownie_jackson system_prompt.txt2 matches

@stevekrouse•Updated 2 weeks ago

172
173- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
174- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
175- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
176- **Storage:** DO NOT use the Deno KV module for storage
177- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods

OpenTownie_jackson styles.css11 matches

@stevekrouse•Updated 2 weeks ago

682  background-color: var(--highlight);
683}
684.card-image {
685  display: flex;
686  align-items: center;
704}
705
706.image-placeholder,
707.image-thumbnail {
708  width: 40px;
709  height: 40px;
711  object-fit: cover;
712}
713.image-placeholder {
714  background-color: var(--muted);
715}
722}
723
724.image-row {
725  display: flex;
726  gap: var(--space-1);
727}
728.input-image {
729  position: relative;
730  border: 1px solid var(--muted);
731  border-radius: 6px;
732}
733.remove-image-button {
734  position: absolute;
735  top: 0;
744  opacity: 0;
745}
746.input-image:hover .remove-image-button {
747  opacity: 1;
748}
749
750.image-drop-overlay {
751  position: fixed;
752  top: 0;
761  justify-content: center;
762}
763.image-drop-inner {
764  padding: var(--space-2);
765  background-color: var(--background);
766}
767
768.transition, .input-box, .icon-button, .button, .remove-image-button {
769  transition-property: color, background-color, border-color, opacity;
770  transition-duration: 200ms;

OpenTownie_jackson InputBox.tsx46 matches

@stevekrouse•Updated 2 weeks ago

2import { useRef, useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
3import { PlusIcon, ArrowUpIcon, Square, XIcon } from "./icons.tsx";
4import { processFiles } from "../utils/images.ts";
5
6export function InputBox ({
11  running,
12  error,
13  images,
14  setImages,
15} : {
16  value: string;
20  running: boolean;
21  error: any;
22  images: (string|null)[];
23  setImages: (images: (string|null)[]) => void;
24}) {
25  const form = useRef(null);
57          autoFocus={true}
58        />
59        <ImageRow images={images} setImages={setImages} />
60        <div className="toolbar">
61          <UploadButton
62            disabled={running}
63            images={images}
64            setImages={setImages}
65          />
66          <div className="spacer" />
88}
89
90export function ImageDropContainer ({
91  images,
92  setImages,
93  running,
94  children,
95}: {
96  images: (string|null)[];
97  setImages: (images: (string|null)[]) => void;
98  running: boolean;
99  children: React.ReactNode;
100}) {
101  const dragging = useImageDrop({ images, setImages, running });
102
103  return (
105      {children}
106      {dragging && (
107        <div className="image-drop-overlay">
108          <div className="image-drop-inner">
109            Drop images here to upload
110          </div>
111        </div>
115}
116
117export function useImageDrop ({ images, setImages, running }: {
118  images: (string|null)[];
119  setImages(images: (string|null)[]) => void;
120  running: boolean;
121}) {
143    setDragging(false);
144    if (e.dataTransfer?.files && !running) {
145      processFiles(Array.from(e.dataTransfer.files), images, setImages);
146    }
147  }
164}
165
166function ImageRow ({ images, setImages }: {
167  images: (string|null)[];
168  setImages: (images: (string|null)[]) => void;
169}) {
170  return (
171    <div className="image-row">
172      {images.map((image, i) => (
173        <Thumbnail
174          key={i}
175          image={image}
176          onRemove={() => {
177            setImages([
178              ...images.slice(0, i),
179              ...images.slice(i + 1),
180            ]);
181          }}
186}
187
188function Thumbnail ({ image, onRemove }: {
189  image: string|null;
190  onRemove: () => void;
191}) {
192  if (!image) return null;
193
194  return (
195    <div className="input-image">
196      <img
197        src={image}
198        alt="User uploaded image"
199        className="image-thumbnail"
200      />
201      <button
202        type="button"
203        title="Remove image"
204        className="remove-image-button"
205        onClick={onRemove}
206      >
212
213function UploadButton ({
214  images,
215  setImages,
216  disabled,
217}: {
218  images: (string|null)[];
219  setImages: (images: (string|null)[]) => void;
220  disabled: boolean;
221}) {
226      <button
227        type="button"
228        title="Upload image"
229        disabled={disabled}
230        onClick={e => {
234        <PlusIcon />
235        <div className="sr-only">
236          Upload image
237        </div>
238      </button>
243        onChange={e => {
244          if (e.target.files) {
245            processFiles(Array.from(e.target.files), images, setImages);
246          }
247        }}

« Previous

1...112 113 114 115 116 117 118...700

Projects

View all 101 projects

Imagetourl2 file matches

@dcm31•Updated 1 day ago

thilenius-webcam1 file match

@stabbylambda•Updated 5 days ago

Image proxy for the latest from https://gliderport.thilenius.com

Users

View all 2 users

@Atiq1 project

Updated 2 weeks ago

"Focal Lens with Atig Wazir" "Welcome to my photography journey! I'm Atiq Wazir, a passionate photographer capturing life's beauty one frame at a time. Explore my gallery for stunning images, behind-the-scenes stories, and tips & tricks to enhance your own

Documentation

View all 7 documentation results

Val Town Code Search Return to Val Town

MiniAppStarter index.tsx3 matches

MiniAppStarter image.tsx12 matches

MiniAppStarter farcaster.ts4 matches

WillpersonalWebsite HTTP1011 match

how-to README.md3 matches

OpenTownie_jackson useChatLogic.ts4 matches

OpenTownie_jackson TODOs.md2 matches

OpenTownie_jackson system_prompt.txt2 matches

OpenTownie_jackson styles.css11 matches

OpenTownie_jackson InputBox.tsx46 matches

Projects

Imagetourl2 file matches

thilenius-webcam1 file match

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code SearchReturn to Val Town

MiniAppStarterindex.tsx3 matches

MiniAppStarterimage.tsx12 matches

MiniAppStarterfarcaster.ts4 matches

WillpersonalWebsiteHTTP1011 match

how-toREADME.md3 matches

OpenTownie_jacksonuseChatLogic.ts4 matches

OpenTownie_jacksonTODOs.md2 matches

OpenTownie_jacksonsystem_prompt.txt2 matches

OpenTownie_jacksonstyles.css11 matches

OpenTownie_jacksonInputBox.tsx46 matches

Projects

Imagetourl2 file matches

thilenius-webcam1 file match

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

MiniAppStarter index.tsx3 matches

MiniAppStarter image.tsx12 matches

MiniAppStarter farcaster.ts4 matches

WillpersonalWebsite HTTP1011 match

how-to README.md3 matches

OpenTownie_jackson useChatLogic.ts4 matches

OpenTownie_jackson TODOs.md2 matches

OpenTownie_jackson system_prompt.txt2 matches

OpenTownie_jackson styles.css11 matches

OpenTownie_jackson InputBox.tsx46 matches