Val Town Code SearchReturn to Val Town

3_It's a tool that sends a daily email that shows everyone who you follow on Bluesky who has updated their profile in the last day. You can Remix it on Val Town (this website), tweak a few environnment variables, and it'll be yours!_ Here's what an email looks like with a person's description update:
4
5![CleanShot 2025-05-16 at 14.12.46@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/bf137c7d-be26-4bc8-ff5e-78399c22b200/public)
6
7## Setup

1import { Hono } from 'https://esm.sh/hono@3.11.7';
2import { serveFile, readFile } from 'https://esm.town/v/std/utils/index.ts';
3import { sampleImages } from '../shared/types';
4
5const app = new Hono();
10});
11
12// API endpoint to get images
13app.get('/api/images', (c) => {
14  return c.json(sampleImages);
15});
16

2import React from 'https://esm.sh/react@18.2.0';
3import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
4import { ImageViewer } from './components/ImageViewer';
5import { sampleImages } from '../shared/types';
6import { parseProject } from 'https://esm.town/v/std/utils/index.ts';
7
19    <div className="min-h-screen bg-gray-100 py-8">
20      <header className="max-w-4xl mx-auto px-4 mb-8">
21        <h1 className="text-3xl font-bold text-center text-gray-800">Image Viewer</h1>
22        <p className="text-center text-gray-600 mt-2">
23          Browse through a collection of AI-generated images
24        </p>
25      </header>
26
27      <main>
28        <ImageViewer images={sampleImages} />
29      </main>
30
31      <footer className="mt-12 pb-8 text-center text-gray-500 text-sm">
32        <p>Use arrow keys or buttons to navigate between images</p>
33        <p>Click on an image to view it in full screen</p>
34        {projectInfo && (
35          <p className="mt-4">

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect, useCallback } from 'https://esm.sh/react@18.2.0';
3import { Image } from '../../shared/types';
4import { Navigation } from './Navigation';
5
6interface ImageViewerProps {
7  images: Image[];
8  initialIndex?: number;
9}
10
11export const ImageViewer: React.FC<ImageViewerProps> = ({ 
12  images, 
13  initialIndex = 0 
14}) => {
17  const [isLoading, setIsLoading] = useState(true);
18  
19  const currentImage = images[currentIndex];
20
21  const handlePrevious = useCallback(() => {
27
28  const handleNext = useCallback(() => {
29    if (currentIndex < images.length - 1) {
30      setCurrentIndex(currentIndex + 1);
31      setIsLoading(true);
32    }
33  }, [currentIndex, images.length]);
34
35  const toggleFullscreen = useCallback(() => {
54  }, [handleKeyDown]);
55
56  const handleImageLoad = () => {
57    setIsLoading(false);
58  };
59
60  if (!currentImage) {
61    return <div className="text-center p-8">No images available</div>;
62  }
63
64  return (
65    <div className="max-w-4xl mx-auto p-4">
66      <h1 className="text-2xl font-bold text-center mb-2">{currentImage.title}</h1>
67      <p className="text-gray-600 text-center mb-6">{currentImage.description}</p>
68      
69      <div className="relative overflow-hidden rounded-lg shadow-lg bg-white">
75        
76        <div 
77          className={`image-container cursor-pointer ${isLoading ? 'opacity-0' : 'fade-in'}`}
78          onClick={toggleFullscreen}
79        >
80          <img
81            src={currentImage.url}
82            alt={currentImage.title}
83            className="w-full h-auto"
84            onLoad={handleImageLoad}
85          />
86        </div>
89      <Navigation
90        currentIndex={currentIndex}
91        totalImages={images.length}
92        onPrevious={handlePrevious}
93        onNext={handleNext}
97        <div className="fullscreen" onClick={toggleFullscreen}>
98          <img
99            src={currentImage.url}
100            alt={currentImage.title}
101            className="max-w-full max-h-full"
102          />

4interface NavigationProps {
5  currentIndex: number;
6  totalImages: number;
7  onPrevious: () => void;
8  onNext: () => void;
11export const Navigation: React.FC<NavigationProps> = ({
12  currentIndex,
13  totalImages,
14  onPrevious,
15  onNext
25            : 'text-blue-600 hover:bg-blue-100'
26        }`}
27        aria-label="Previous image"
28      >
29        <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">
33      
34      <div className="text-gray-700 font-medium">
35        {currentIndex + 1} / {totalImages}
36      </div>
37      
38      <button
39        onClick={onNext}
40        disabled={currentIndex === totalImages - 1}
41        className={`p-2 rounded-full ${
42          currentIndex === totalImages - 1 
43            ? 'text-gray-400 cursor-not-allowed' 
44            : 'text-blue-600 hover:bg-blue-100'
45        }`}
46        aria-label="Next image"
47      >
48        <svg xmlns="http://www.w3.org/2000/svg" className="h-8 w-8" fill="none" viewBox="0 0 24 24" stroke="currentColor">

4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Image Viewer</title>
7  <script src="https://cdn.twind.style" crossorigin></script>
8  <script src="https://esm.town/v/std/catch"></script>
20      100% { opacity: 1; }
21    }
22    .image-container img {
23      transition: transform 0.3s ease;
24    }

1// Shared types for the image viewer app
2
3export interface Image {
4  id: number;
5  title: string;
9
10export interface ViewerState {
11  images: Image[];
12  currentIndex: number;
13  isFullscreen: boolean;
14}
15
16// Helper function to generate AI image URLs
17export function generateImageUrl(prompt: string): string {
18  // Using Val Town's AI image generation service
19  return `https://maxm-imggenurl.web.val.run/${encodeURIComponent(prompt)}`;
20}
21
22// Sample image data
23export const sampleImages: Image[] = [
24  {
25    id: 1,
26    title: "Mountain Landscape",
27    description: "A beautiful mountain landscape with snow-capped peaks and a clear blue sky",
28    url: generateImageUrl("mountain landscape with snow-capped peaks and clear blue sky, photorealistic")
29  },
30  {
32    title: "Ocean Sunset",
33    description: "Stunning sunset over the ocean with orange and purple hues",
34    url: generateImageUrl("stunning sunset over the ocean with orange and purple hues, photorealistic")
35  },
36  {
38    title: "Forest Path",
39    description: "A serene path through a dense forest with sunlight filtering through the trees",
40    url: generateImageUrl("serene path through a dense forest with sunlight filtering through the trees, photorealistic")
41  },
42  {
44    title: "City Skyline",
45    description: "Modern city skyline at night with glowing lights",
46    url: generateImageUrl("modern city skyline at night with glowing lights, photorealistic")
47  },
48  {
50    title: "Desert Dunes",
51    description: "Golden sand dunes in a vast desert landscape",
52    url: generateImageUrl("golden sand dunes in a vast desert landscape at sunset, photorealistic")
53  }
54];

1# Image Viewer App
2
3A simple image viewing application built on Val Town.
4
5## Features
6
7- Browse through a collection of AI-generated images
8- Responsive design that works on mobile and desktop
9- Clean, minimal UI with keyboard navigation support
16├── frontend/
17│   ├── components/
18│   │   ├── ImageViewer.tsx  # Main viewer component
19│   │   └── Navigation.tsx   # Navigation controls
20│   ├── index.html           # Main HTML template
27
281. Visit the app URL
292. Use the arrow buttons or keyboard arrow keys to navigate between images
303. Click on an image to view it in full size
31
32## Technologies Used

26    "title": "Markdown Editor",
27    "code":
28      "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Markdown Editor</title>\n    <link href=\"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css\" rel=\"stylesheet\">\n</head>\n<body class=\"bg-white\">\n    <div class=\"max-w-full mx-auto p-4 pt-6 md:p-6 lg:p-8\">\n        <h1 class=\"text-3xl text-center mb-4\">Markdown Editor</h1>\n        <div class=\"flex flex-row\">\n            <div class=\"editor p-4 rounded-lg border border-gray-200 w-full md:w-1/2\">\n                <textarea id=\"editor\" class=\"w-full h-screen p-2 border border-gray-200 rounded-lg\" placeholder=\"Type your Markdown here...\"></textarea>\n            </div>\n            <div class=\"preview p-4 rounded-lg border border-gray-200 w-full md:w-1/2 ml-2 md:ml-4 lg:ml-8\">\n                <div id=\"preview\"></div>\n            </div>\n        </div>\n        <p class=\"text-center mt-4\">Built on <a href=\"https://cerebrascoder.com\">Cerebras Coder</a></p>\n    </div>\n\n    <script>\n        const editor = document.getElementById('editor');\n        const preview = document.getElementById('preview');\n\n        // Initialize textarea with default markdown\n        const defaultMarkdown = `\n# Introduction to Markdown\nMarkdown is a lightweight markup language that is easy to read and write. It is often used for formatting text in plain text editors, chat applications, and even web pages.\n\n## Headers\nHeaders are denoted by the # symbol followed by a space. The number of # symbols determines the level of the header:\n# Heading 1\n## Heading 2\n### Heading 3\n\n## Emphasis\nYou can use emphasis to make your text **bold** or *italic*:\n*Italics*\n**Bold**\n\n## Lists\nYou can use lists to organize your text:\n* Item 1\n* Item 2\n* Item 3\nOr\n1. Item 1\n2. Item 2\n3. Item 3\n\n## Links\nYou can use links to reference external resources:\n[Google](https://www.google.com)\n\n## Images\nYou can use images to add visual content:\n![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/thumb/4/48/Markdown-mark.svg/208px-Markdown-mark.svg.png)\n`;\n        editor.value = defaultMarkdown;\n\n        // Update preview on input\n        editor.addEventListener('input', () => {\n            const markdown = editor.value;\n            const html = markdownToHtml(markdown);\n            preview.innerHTML = html;\n        });\n\n        // Initialize preview with default markdown\n        const defaultHtml = markdownToHtml(defaultMarkdown);\n        preview.innerHTML = defaultHtml;\n\n        // Function to convert Markdown to HTML\n        function markdownToHtml(markdown) {\n            // Bold\n            markdown = markdown.replace(/\\*\\*(.*?)\\*\\*/g, '<b>$1</b>');\n\n            // Italic\n            markdown = markdown.replace(/\\*(.*?)\\*/g, '<i>$1</i>');\n\n            // Links\n            markdown = markdown.replace(/\\[(.*?)\\]\\((.*?)\\)/g, '<a href=\"$2\">$1</a>');\n\n            // Images\n            markdown = markdown.replace(/!\\[(.*?)\\]\\((.*?)\\)/g, '<img src=\"$2\" alt=\"$1\">');\n\n            // Headings\n            markdown = markdown.replace(/(^#{1,6} )(.*)/gm, (match, level, text) => {\n                return `<h${level.length}>${text}</h${level.length}>`;\n            });\n\n            // Lists\n            markdown = markdown.replace(/^(\\*|\\d+\\.) (.*)/gm, (match, marker, text) => {\n                if (marker.startsWith('*')) {\n                    return `<li>${text}</li>`;\n                } else {\n                    return `<li>${text}</li>`;\n                }\n            });\n\n            // Line breaks\n            markdown = markdown.replace(/\\n/g, '<br>');\n\n            // Fix for nested lists\n            markdown = markdown.replace(/<li><li>/g, '<li>');\n            markdown = markdown.replace(/<\\/li><\\/li>/g, '</li>');\n\n            // Wrap lists in ul\n            markdown = markdown.replace(/(<li>.*<\\/li>)/g, '<ul>$1</ul>');\n\n            return markdown;\n        }\n    </script>\n</body>\n</html>",
29    "performance": {
30      "tokensPerSecond": 4092.96,

21      <meta property="og:description" content="Turn your ideas into fully functional apps in less than a second – powered by Llama3.3-70b on Cerebras's super-fast wafer chips. Code is 100% open-source, hosted on Val Town."">
22      <meta property="og:type" content="website">
23      <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
24      
25