Val Town Code SearchReturn to Val Town

16  <meta charset="UTF-8">
17  <meta name="viewport" content="width=device-width, initial-scale=1.0">
18  <link rel="icon" type="image/png" href="https://labspace.ai/ls2-circle.png" />
19  <title>GitHub Repository Parser</title>
20  <meta property="og:title" content="GitHub Repository Parser" />
21  <meta property="og:description" content="Parse and analyze GitHub repositories with ease." />
22  <meta property="og:image" content="https://yawnxyz-og.web.val.run/img2?link=https://gh.labspace.ai/&title=GitHub+Parser&subtitle=Parse+and+analyze+GitHub+repos&attachment=https://f2.phage.directory/blogalog/gh-parser.jpg" />
23  <meta property="og:url" content="https://gh.labspace.ai" />
24  <meta property="og:type" content="website" />
25  <meta name="twitter:card" content="summary_large_image" />
26  <meta name="twitter:title" content="GitHub Repository Parser" />
27  <meta name="twitter:description" content="Parse and analyze GitHub repositories with ease." />
28  <meta name="twitter:image" content="https://yawnxyz-og.web.val.run/img2?link=https://gh.labspace.ai/&title=GitHub+Parser&subtitle=Parse+and+analyze+GitHub+repos&attachment=https://f2.phage.directory/blogalog/gh-parser.jpg" />
29  <script src="https://cdn.tailwindcss.com"></script>
30  <script src="https://unpkg.com/dexie@3.2.2/dist/dexie.js"></script>

1165        <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."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5// Main React component for the image upload application
6function App() {
7  // State variables to manage images, error messages, upload restrictions, and comments
8  const [images, setImages] = useState([]); // Stores uploaded images
9  const [error, setError] = useState(null); // Stores error messages
10  const [canUpload, setCanUpload] = useState(true); // Controls upload ability
11  const [showComments, setShowComments] = useState(false); // Controls comment visibility
12  const [comments, setComments] = useState([]); // Stores comments for images
13  const [newComment, setNewComment] = useState(''); // Stores new comment input
14  const [username, setUsername] = useState(''); // Stores username
19  const [uploadProgress, setUploadProgress] = useState(0); // Upload progress
20  const [isUploading, setIsUploading] = useState(false); // Upload in progress flag
21  const [currentPage, setCurrentPage] = useState(1); // Current page of images
22  const [totalPages, setTotalPages] = useState(0); // Total pages of images
23
24  // Load username from localStorage on component mount
25  useEffect(() => {
26    const storedUsername = localStorage.getItem('imageAppUsername');
27    if (storedUsername) {
28      setUsername(storedUsername);
31  }, []);
32
33  // Fetch images and comments when the component first loads or page changes
34  useEffect(() => {
35    fetchImages();
36    fetchComments();
37  }, [currentPage]);
38
39  // Function to retrieve images from the server with pagination
40  const fetchImages = async () => {
41    try {
42      const response = await fetch(`/images?page=${currentPage}`);
43      const data = await response.json();
44      setImages(data.images);
45      setTotalPages(data.totalPages);
46    } catch (err) {
47      setError("Could not fetch images");
48      console.error("Image fetch error:", err);
49    }
50  };
74    // Validate file types and sizes
75    const validFiles = files.filter(file => 
76      file.type.startsWith('image/') && 
77      file.size <= 5 * 1024 * 1024 // 5MB max file size
78    );
108        const uploadPromises = batch.map(async (file) => {
109          const formData = new FormData();
110          formData.append('image', file);
111          formData.append('username', username);
112
127      }
128
129      // Refresh images after upload
130      await fetchImages();
131      
132      // Reset upload states
160  return (
161    <div style={{ maxWidth: '800px', margin: 'auto', padding: '20px' }}>
162      <h1>🖼️ Bulk Image Uploader 📸</h1>
163      
164      {/* Username setup (existing code) */}
177          type="file" 
178          multiple 
179          accept="image/*"
180          onChange={handleFileSelect}
181          disabled={!isUsernameSet || isUploading}
269async function handleUpload(request, sqlite, KEY, TABLE_VERSION) {
270  const formData = await request.formData();
271  const image = formData.get('image') as File;
272  const username = formData.get('username') as string;
273
274  if (!image || !(image instanceof File)) {
275    return new Response(JSON.stringify({ message: "No image uploaded" }), { 
276      status: 400,
277      headers: { 'Content-Type': 'application/json' }
279  }
280
281  const arrayBuffer = await image.arrayBuffer();
282  const base64Image = btoa(String.fromCharCode.apply(null, new Uint8Array(arrayBuffer)));
283  const dataUrl = `data:${image.type};base64,${base64Image}`;
284
285  await sqlite.execute(`
286    INSERT INTO ${KEY}_images_${TABLE_VERSION} (image_url, username) VALUES (?, ?)
287  `, [dataUrl, username]);
288
292}
293
294async function handleGetImages(sqlite, KEY, TABLE_VERSION, page = 1, pageSize = 100) {
295  const offset = (page - 1) * pageSize;
296
297  // Get total number of images
298  const totalCountResult = await sqlite.execute(`
299    SELECT COUNT(*) as total 
300    FROM ${KEY}_images_${TABLE_VERSION}
301  `);
302  const totalImages = totalCountResult.rows[0].total;
303  const totalPages = Math.ceil(totalImages / pageSize);
304
305  // Get paginated images
306  const images = await sqlite.execute(`
307    SELECT id, image_url, username 
308    FROM ${KEY}_images_${TABLE_VERSION} 
309    ORDER BY uploaded_at DESC 
310    LIMIT ? OFFSET ?
312
313  return new Response(JSON.stringify({ 
314    images: images.rows,
315    totalPages: totalPages,
316    currentPage: page
321
322// Modify the server switch statement to pass page parameter
323case '/images':
324  if (request.method !== 'GET') break;
325  const url = new URL(request.url);
326  const page = parseInt(url.searchParams.get('page') || '1', 10);
327  return await handleGetImages(sqlite, KEY, TABLE_VERSION, page);

14
15<img 
16  src="https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/d2a422fe-8dc3-4f04-aaa3-3c35a2e99100/public" 
17  width="500px"
18/>
50where they can pick which way to login: email, Google, Github, etc.
51
52![Screenshot 2024-08-08 at 08.48.41.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/36674739-cd88-472c-df16-cd0b3a62bc00/public)
53
54[Live Demo](https://www.val.town/v/stevekrouse/lastlogin_demo)

3This is a lightweight SQLite Admin interface to view and debug your SQLite data.
4
5![Screenshot 2023-12-08 at 13.35.04.gif](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/ee9a9237-96a0-4276-60b5-aa8c56e49800/public)
6
7It's currently super limited (no pagination, editing data, data-type specific viewers), and is just a couple dozens lines of code over a couple different vals. Forks encouraged! Just comment on the val if you add any features that you want to share.

33    Category?: string;
34    Tags?: string[];
35    "Card Image"?: AirtableAttachment[];
36    "Intro Image"?: AirtableAttachment[];
37    "Body Image 1"?: AirtableAttachment[];
38    "Body Image 2"?: AirtableAttachment[];
39    "Body Image 3"?: AirtableAttachment[];
40    "Quote or Emphasized Text 1"?: string;
41    "Quote or Emphasized Text 2"?: string;
68  category: string;
69  tags: string[];
70  cardImage: string;
71  introImage: string;
72  bodyImage1: string;
73  bodyImage2: string;
74  bodyImage3: string;
75  quoteText1: string;
76  quoteText2: string;
223        category: rec.fields["Category"] || "",
224        tags: [...(rec.fields["Tags"] || []), ...(aiEnhancements?.aiTags || [])],
225        cardImage: getAttachmentUrl(rec.fields["Card Image"]),
226        introImage: getAttachmentUrl(rec.fields["Intro Image"]),
227        bodyImage1: getAttachmentUrl(rec.fields["Body Image 1"]),
228        bodyImage2: getAttachmentUrl(rec.fields["Body Image 2"]),
229        bodyImage3: getAttachmentUrl(rec.fields["Body Image 3"]),
230        quoteText1: rec.fields["Quote or Emphasized Text 1"] || "",
231        quoteText2: rec.fields["Quote or Emphasized Text 2"] || "",

1# Code on Val Town
2
3![Screenshot 2024-02-27 at 1.25.46 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6b67bb0a-d80f-4f3d-5b17-57b5378b3e00/public)
4
5Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it.

24    Category?: string;
25    Tags?: string | string[];
26    "Card Image"?: AirtableAttachment[];
27    "Intro Image"?: AirtableAttachment[];
28    "Body Image 1"?: AirtableAttachment[];
29    "Body Image 2"?: AirtableAttachment[];
30    "Body Image 3"?: AirtableAttachment[];
31    "Quote or Emphasized Text 1"?: string;
32    "Quote or Emphasized Text 2"?: string;
164                <p className="mb-2">{item.fields.ShortCardText}</p>
165                <p className="text-sm text-gray-600 mb-4">Read time: {item.fields.ReadTime}</p>
166                {item.fields["Card Image"] && item.fields["Card Image"][0] && (
167                  <img
168                    src={item.fields["Card Image"][0].url}
169                    alt={item.fields.Title}
170                    className="w-full h-48 object-cover rounded-md mb-4"
467        title={item.fields.Title}
468        description={item.fields.ShortCardText}
469        image={item.fields["Card Image"] && item.fields["Card Image"][0] ? item.fields["Card Image"][0].url : null}
470      />
471    )),
473}
474
475function ContentItem({ title, description, image }) {
476  return {
477    width: 300,
482    boxShadow: "0 4px 6px rgba(0,0,0,0.1)",
483    children: [
484      image && {
485        width: "100%",
486        height: 200,
487        background: `url(${image})`,
488        backgroundSize: "cover",
489        backgroundPosition: "center",
490      },
491      {
492        y: image ? 200 : 0,
493        padding: 20,
494        children: [

1165        <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."">
1166        <meta property="og:type" content="website">
1167        <meta property="og:image" content="https://stevekrouse-blob_admin.web.val.run/api/public/CerebrasCoderOG.jpg">
1168        
1169            

13    if (selectedFile) {
14      // Validate file type and size
15      const allowedTypes = ['image/', 'video/'];
16      const maxFileSize = 50 * 1024 * 1024; // 50MB
17
89      <input 
90        type="file" 
91        accept="image/*,video/*"
92        onChange={handleFileUpload} 
93        style={{ 
175
176      // Additional server-side validation
177      const allowedTypes = ['image/', 'video/'];
178      const maxFileSize = 50 * 1024 * 1024; // 50MB
179