Val Town Code Search

noCollectionTracker README.md2 matches

@cecedeecodes•Updated 5 months ago

113. **Reflection Stage**: After 5 "No" responses, users enter a reflection stage to contemplate their journey.
124. **Motivational Quotes**: Dynamic quotes change based on the user's progress to provide encouragement.
135. **Journey Visualization**: Users can upload a symbolic image representing their journey.
146. **PDF Generation**: At the end of the challenge, users can generate a PDF summary of their journey.
157. **Data Privacy**: All data is stored locally on the user's device, ensuring privacy and security.
252. **Reflection Stage**:
26   - Triggered after receiving 5 "No" responses.
27   - Users can upload a symbolic image and write a comprehensive reflection.
28
293. **Completion Stage**:

md_links_resolver main.tsx1 match

@argimko•Updated 5 months ago

220        <title>Markdown Links Resolver</title>
221        <meta name="viewport" content="width=device-width, initial-scale=1">
222        <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'><text font-size='200' x='50%' y='50%' text-anchor='middle' dominant-baseline='central'>🔗</text></svg>">
223        <style>
224          body, html {

versatileBlackKite main.tsx79 matches

@eligosmlytics•Updated 5 months ago

6function App() {
7  const [youtubeUrl, setYoutubeUrl] = useState("https://www.youtube.com/embed/QskiaNqaqlc?si=MvD_ydotKgovS9pC");
8  const [postVideoImages, setPostVideoImages] = useState<string[]>([]);
9  const [newImageUrl, setNewImageUrl] = useState("");
10  const [imageErrors, setImageErrors] = useState<{[key: number]: boolean}>({});
11  const [imageProxyUrls, setImageProxyUrls] = useState<{[key: number]: string}>({});
12
13  useEffect(() => {
17
18  useEffect(() => {
19    // Proxy images that might have CORS issues
20    postVideoImages.forEach((imageUrl, index) => {
21      proxyImage(imageUrl, index);
22    });
23  }, [postVideoImages]);
24
25  const proxyImage = async (imageUrl: string, index: number) => {
26    try {
27      const response = await fetch(`/proxy-image?url=${encodeURIComponent(imageUrl)}`);
28      if (response.ok) {
29        const proxyUrl = await response.text();
30        setImageProxyUrls(prev => ({...prev, [index]: proxyUrl}));
31      } else {
32        handleImageError(index);
33      }
34    } catch (error) {
35      console.error("Image proxy error:", error);
36      handleImageError(index);
37    }
38  };
42      const { blob } = await import("https://esm.town/v/std/blob");
43      const savedYoutubeUrl = await blob.get(`${getLegacyImportUrl(import.meta.url)}_youtubeUrl`);
44      const savedImages = await blob.get(`${getLegacyImportUrl(import.meta.url)}_postVideoImages`);
45      
46      if (savedYoutubeUrl) setYoutubeUrl(savedYoutubeUrl);
47      if (savedImages) {
48        const parsedImages = JSON.parse(savedImages);
49        setPostVideoImages(parsedImages);
50      }
51    } catch (error) {
54  };
55
56  const saveData = async (type: 'url' | 'images') => {
57    try {
58      const { blob } = await import("https://esm.town/v/std/blob");
60        await blob.set(`${getLegacyImportUrl(import.meta.url)}_youtubeUrl`, youtubeUrl);
61      } else {
62        await blob.set(`${getLegacyImportUrl(import.meta.url)}_postVideoImages`, JSON.stringify(postVideoImages));
63      }
64    } catch (error) {
67  };
68
69  const isValidImageUrl = (url: string) => {
70    try {
71      const parsedUrl = new URL(url);
74        (parsedUrl.protocol === 'http:' || parsedUrl.protocol === 'https:') && 
75        (
76          // General image extensions
77          /\.(jpg|jpeg|png|gif|webp|bmp)$/i.test(parsedUrl.pathname) ||
78          // AWS S3 URL patterns
87  };
88
89  const handleAddImage = () => {
90    if (newImageUrl.trim() && isValidImageUrl(newImageUrl.trim())) {
91      const updatedImages = [...postVideoImages, newImageUrl.trim()];
92      setPostVideoImages(updatedImages);
93      setNewImageUrl("");
94      saveData('images');
95    } else {
96      alert("Please enter a valid image URL (supports JPG, PNG, GIF, WebP, BMP, and AWS S3 URLs)");
97    }
98  };
99
100  const handleRemoveImage = (indexToRemove: number) => {
101    const updatedImages = postVideoImages.filter((_, index) => index !== indexToRemove);
102    setPostVideoImages(updatedImages);
103    
104    // Remove any associated error and proxy states
105    const newImageErrors = {...imageErrors};
106    const newImageProxyUrls = {...imageProxyUrls};
107    delete newImageErrors[indexToRemove];
108    delete newImageProxyUrls[indexToRemove];
109    
110    setImageErrors(newImageErrors);
111    setImageProxyUrls(newImageProxyUrls);
112    
113    saveData('images');
114  };
115
116  const handleImageError = (index: number) => {
117    setImageErrors(prev => ({...prev, [index]: true}));
118  };
119
122      <h1 style={styles.title}>Interactive Video Presentation</h1>
123      <p style={styles.description}>
124        Welcome to our dynamic video presentation. You can customize the video and add post-video images.
125      </p>
126      
153        </div>
154
155        {/* Post Video Images Section */}
156        <div style={styles.postVideoSection}>
157          <h3>Post Video Images</h3>
158          <div style={styles.imageInputContainer}>
159            <input 
160              type="text" 
161              value={newImageUrl} 
162              onChange={(e) => setNewImageUrl(e.target.value)}
163              style={styles.urlInput}
164              placeholder="Enter Image URL (supports AWS S3)"
165            />
166            <button onClick={handleAddImage} style={styles.saveButton}>Add Image</button>
167          </div>
168          
169          {/* Image Gallery */}
170          <div style={styles.imageGallery}>
171            {postVideoImages.map((imageUrl, index) => (
172              <div key={index} style={styles.imageItem}>
173                {imageErrors[index] ? (
174                  <div style={styles.errorImage}>
175                    <span>❌ Image Failed to Load</span>
176                    <p>{imageUrl}</p>
177                  </div>
178                ) : (
179                  <img 
180                    src={imageProxyUrls[index] || imageUrl} 
181                    alt={`Post video image ${index + 1}`} 
182                    style={styles.galleryImage}
183                    onError={() => handleImageError(index)}
184                  />
185                )}
186                <button 
187                  onClick={() => handleRemoveImage(index)} 
188                  style={styles.removeButton}
189                >
213
214export default async function server(request: Request): Promise<Response> {
215  // Image proxy endpoint
216  const url = new URL(request.url);
217  if (url.pathname === '/proxy-image') {
218    const imageUrl = url.searchParams.get('url');
219    if (!imageUrl) {
220      return new Response('No URL provided', { status: 400 });
221    }
222
223    try {
224      const imageResponse = await fetch(imageUrl, {
225        headers: {
226          'User-Agent': 'Mozilla/5.0',
227          'Referer': new URL(imageUrl).origin
228        }
229      });
230
231      if (!imageResponse.ok) {
232        return new Response('Image fetch failed', { status: imageResponse.status });
233      }
234
235      const imageBlob = await imageResponse.blob();
236      return new Response(imageBlob, {
237        headers: {
238          'Content-Type': imageResponse.headers.get('Content-Type') || 'image/jpeg',
239          'Cache-Control': 'public, max-age=86400' // Cache for 24 hours
240        }
241      });
242    } catch (error) {
243      return new Response('Image proxy error', { status: 500 });
244    }
245  }
315    marginTop: '20px',
316  },
317  imageInputContainer: {
318    display: 'flex',
319    marginBottom: '20px',
320    gap: '10px',
321  },
322  imageGallery: {
323    display: 'flex',
324    flexWrap: 'wrap',
326    justifyContent: 'center',
327  },
328  imageItem: {
329    position: 'relative',
330    display: 'flex',
332    alignItems: 'center',
333  },
334  galleryImage: {
335    maxWidth: '200px',
336    maxHeight: '200px',
338    borderRadius: '8px',
339  },
340  errorImage: {
341    width: '200px',
342    height: '200px',

embedVideoWebPage main.tsx81 matches

@eligosmlytics•Updated 5 months ago

6function App() {
7  const [youtubeUrl, setYoutubeUrl] = useState("https://www.youtube.com/embed/QskiaNqaqlc?si=MvD_ydotKgovS9pC");
8  const [postVideoImages, setPostVideoImages] = useState<string[]>([]);
9  const [newImageUrl, setNewImageUrl] = useState("");
10  const [imageErrors, setImageErrors] = useState<{[key: number]: boolean}>({});
11  const [imageProxyUrls, setImageProxyUrls] = useState<{[key: number]: string}>({});
12
13  useEffect(() => {
16
17  useEffect(() => {
18    // Proxy images that might have CORS issues
19    postVideoImages.forEach((imageUrl, index) => {
20      if (!imageErrors[index]) {
21        proxyImage(imageUrl, index);
22      }
23    });
24  }, [postVideoImages]);
25
26  const proxyImage = async (imageUrl: string, index: number) => {
27    try {
28      const response = await fetch(`/proxy-image?url=${encodeURIComponent(imageUrl)}`, {
29        headers: {
30          'Cache-Control': 'no-cache' // Ensure fresh fetch
33      if (response.ok) {
34        const proxyUrl = await response.text();
35        setImageProxyUrls(prev => ({...prev, [index]: proxyUrl}));
36        // Reset any previous error for this image
37        setImageErrors(prev => {
38          const newErrors = {...prev};
39          delete newErrors[index];
41        });
42      } else {
43        handleImageError(index);
44      }
45    } catch (error) {
46      console.error("Image proxy error:", error);
47      handleImageError(index);
48    }
49  };
53      const { blob } = await import("https://esm.town/v/std/blob");
54      const savedYoutubeUrl = await blob.get(`${getLegacyImportUrl(import.meta.url)}_youtubeUrl`);
55      const savedImages = await blob.get(`${getLegacyImportUrl(import.meta.url)}_postVideoImages`);
56      
57      if (savedYoutubeUrl) setYoutubeUrl(savedYoutubeUrl);
58      if (savedImages) {
59        const parsedImages = JSON.parse(savedImages);
60        setPostVideoImages(parsedImages);
61      }
62    } catch (error) {
65  };
66
67  const saveData = async (type: 'url' | 'images') => {
68    try {
69      const { blob } = await import("https://esm.town/v/std/blob");
71        await blob.set(`${getLegacyImportUrl(import.meta.url)}_youtubeUrl`, youtubeUrl);
72      } else {
73        await blob.set(`${getLegacyImportUrl(import.meta.url)}_postVideoImages`, JSON.stringify(postVideoImages));
74      }
75    } catch (error) {
78  };
79
80  const isValidImageUrl = (url: string) => {
81    try {
82      new URL(url);
87  };
88
89  const handleAddImage = () => {
90    if (newImageUrl.trim() && isValidImageUrl(newImageUrl.trim())) {
91      const updatedImages = [...postVideoImages, newImageUrl.trim()];
92      setPostVideoImages(updatedImages);
93      setNewImageUrl("");
94      saveData('images');
95    } else {
96      alert("Please enter a valid image URL with a supported extension");
97    }
98  };
99
100  const handleRemoveImage = (indexToRemove: number) => {
101    const updatedImages = postVideoImages.filter((_, index) => index !== indexToRemove);
102    setPostVideoImages(updatedImages);
103    
104    // Remove any associated error and proxy states
105    const newImageErrors = {...imageErrors};
106    const newImageProxyUrls = {...imageProxyUrls};
107    delete newImageErrors[indexToRemove];
108    delete newImageProxyUrls[indexToRemove];
109    
110    setImageErrors(newImageErrors);
111    setImageProxyUrls(newImageProxyUrls);
112    
113    saveData('images');
114  };
115
116  const handleImageError = (index: number) => {
117    setImageErrors(prev => ({...prev, [index]: true}));
118  };
119
120  const retryImageLoad = (index: number) => {
121    const imageUrl = postVideoImages[index];
122    proxyImage(imageUrl, index);
123  };
124
127      <h1 style={styles.title}>Interactive Video Presentation</h1>
128      <p style={styles.description}>
129        Welcome to our dynamic video presentation. You can customize the video and add post-video images.
130      </p>
131      
158        </div>
159
160        {/* Post Video Images Section */}
161        <div style={styles.postVideoSection}>
162          <h3>Post Video Images</h3>
163          <div style={styles.imageInputContainer}>
164            <input 
165              type="text" 
166              value={newImageUrl} 
167              onChange={(e) => setNewImageUrl(e.target.value)}
168              style={styles.urlInput}
169              placeholder="Enter Image URL"
170            />
171            <button onClick={handleAddImage} style={styles.saveButton}>Add Image</button>
172          </div>
173          
174          {/* Image Gallery */}
175          <div style={styles.imageGallery}>
176            {postVideoImages.map((imageUrl, index) => (
177              <div key={index} style={styles.imageItem}>
178                {imageErrors[index] ? (
179                  <div style={styles.errorImage}>
180                    <span>❌ Image Failed to Load</span>
181                    <p>{imageUrl}</p>
182                    <button 
183                      onClick={() => retryImageLoad(index)} 
184                      style={{...styles.saveButton, marginTop: '10px'}}
185                    >
189                ) : (
190                  <img 
191                    src={imageProxyUrls[index] || imageUrl} 
192                    alt={`Post video image ${index + 1}`} 
193                    style={styles.galleryImage}
194                    onError={() => handleImageError(index)}
195                  />
196                )}
197                <button 
198                  onClick={() => handleRemoveImage(index)} 
199                  style={styles.removeButton}
200                >
224
225export default async function server(request: Request): Promise<Response> {
226  // Image proxy endpoint
227  const url = new URL(request.url);
228  if (url.pathname === '/proxy-image') {
229    const imageUrl = url.searchParams.get('url');
230    if (!imageUrl) {
231      return new Response('No URL provided', { status: 400 });
232    }
233
234    try {
235      const imageResponse = await fetch(imageUrl, {
236        headers: {
237          'User-Agent': 'Mozilla/5.0',
238          'Referer': new URL(imageUrl).origin,
239          'Accept': 'image/*'
240        }
241      });
242
243      if (!imageResponse.ok) {
244        return new Response('Image fetch failed', { status: imageResponse.status });
245      }
246
247      const imageBlob = await imageResponse.blob();
248      return new Response(imageBlob, {
249        headers: {
250          'Content-Type': imageResponse.headers.get('Content-Type') || 'image/jpeg',
251          'Cache-Control': 'public, max-age=86400', // Cache for 24 hours
252          'Access-Control-Allow-Origin': '*'
254      });
255    } catch (error) {
256      return new Response('Image proxy error', { status: 500 });
257    }
258  }

blob_admin README.md1 match

@caseyg•Updated 5 months ago

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering.

blob_admin main.tsx5 matches

@caseyg•Updated 5 months ago

440          {profile && (
441            <div className="flex items-center space-x-4">
442              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443              <span>{profile.username}</span>
444              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583                            alt="Blob content"
584                            className="max-w-full h-auto"
585                            onError={() => console.error("Error loading image")}
586                          />
587                        </div>
635                  <li>Create public shareable links for blobs</li>
636                  <li>View and manage public folder</li>
637                  <li>Preview images directly in the interface</li>
638                </ul>
639              </div>
693  const { ValTown } = await import("npm:@valtown/sdk");
694  const vt = new ValTown();
695  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
696  // const authorEmail = me.email;
697
761
762  c.set("email", email);
763  c.set("profile", { profileImageUrl, username });
764  await next();
765};

superbAzureShark README.md1 match

@thesolarmonk•Updated 5 months ago

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering.

superbAzureShark main.tsx5 matches

@thesolarmonk•Updated 5 months ago

440          {profile && (
441            <div className="flex items-center space-x-4">
442              <img src={profile.profileImageUrl} alt="Profile" className="w-8 h-8 rounded-full" />
443              <span>{profile.username}</span>
444              <a href="/auth/logout" className="text-blue-400 hover:text-blue-300">Logout</a>
583                            alt="Blob content"
584                            className="max-w-full h-auto"
585                            onError={() => console.error("Error loading image")}
586                          />
587                        </div>
635                  <li>Create public shareable links for blobs</li>
636                  <li>View and manage public folder</li>
637                  <li>Preview images directly in the interface</li>
638                </ul>
639              </div>
693  const { ValTown } = await import("npm:@valtown/sdk");
694  const vt = new ValTown();
695  const { email: authorEmail, profileImageUrl, username } = await vt.me.profile.retrieve();
696  // const authorEmail = me.email;
697
761
762  c.set("email", email);
763  c.set("profile", { profileImageUrl, username });
764  await next();
765};

gif_upload main.tsx2 matches

@mozzius•Updated 5 months ago

17  const calculateAspectRatio = (file: File) => {
18    return new Promise<{ width: number; height: number }>((resolve) => {
19      const img = new Image();
20      img.onload = () => {
21        URL.revokeObjectURL(img.src);
206      headers: {
207        Authorization: `Bearer ${token}`,
208        "Content-Type": "image/gif",
209        "Content-Length": String(size),
210      },

blob_admin README.md1 match

@tionis•Updated 5 months ago

3This is a lightweight Blob Admin interface to view and debug your Blob data.
4
5![Screenshot 2024-11-22 at 15.43.43@2x.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d075a4ee-93ec-4cdd-4823-7c8aee593f00/public)
6
7Versions 0-17 of this val were done with Hono and server-rendering.

« Previous

1...549 550 551 552 553 554 555...660

Projects

View all 100 projects

thilenius-webcam1 file match

@stabbylambda•Updated 1 day ago

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

Users

View all 2 users

@Atiq1 project

Updated 1 week 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

noCollectionTracker README.md2 matches

md_links_resolver main.tsx1 match

versatileBlackKite main.tsx79 matches

embedVideoWebPage main.tsx81 matches

blob_admin README.md1 match

blob_admin main.tsx5 matches

superbAzureShark README.md1 match

superbAzureShark main.tsx5 matches

gif_upload main.tsx2 matches

blob_admin README.md1 match

Projects

thilenius-webcam1 file match

image-gen

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code SearchReturn to Val Town

noCollectionTrackerREADME.md2 matches

md_links_resolvermain.tsx1 match

versatileBlackKitemain.tsx79 matches

embedVideoWebPagemain.tsx81 matches

blob_adminREADME.md1 match

blob_adminmain.tsx5 matches

superbAzureSharkREADME.md1 match

superbAzureSharkmain.tsx5 matches

gif_uploadmain.tsx2 matches

blob_adminREADME.md1 match

Projects

thilenius-webcam1 file match

image-gen

Users

@Chrimage1 project

@Atiq1 project

Documentation

Val Town Code Search Return to Val Town

noCollectionTracker README.md2 matches

md_links_resolver main.tsx1 match

versatileBlackKite main.tsx79 matches

embedVideoWebPage main.tsx81 matches

blob_admin README.md1 match

blob_admin main.tsx5 matches

superbAzureShark README.md1 match

superbAzureShark main.tsx5 matches

gif_upload main.tsx2 matches

blob_admin README.md1 match