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
16- **URL**: `/sparkle.png`
17- **Method**: GET
18- **Response**: 1x1 transparent PNG image
19- **Side Effect**: Logs visitor information to database
20
43### Track with JavaScript
44```javascript
45const img = new Image();
46img.src = 'https://your-val-url.web.val.run/sparkle.png';
47```
69 return new Response(bytes, {
70 headers: {
71 'Content-Type': 'image/png',
72 'Cache-Control': 'no-cache, no-store, must-revalidate',
73 'Pragma': 'no-cache',
1# ☔️ Umbrella reminder if there's rain today
2
3
4
5## Setup
29- **Accent Borders**: Colorful left borders on major sections
30- **Gradient Text**: Beautiful gradient text for headings
31- **Dashed Borders**: Stylish dashed borders around profile images
32
33## Tech Stack
611. **Update Personal Info**: Edit the name, description, and about text in `/index.ts`
622. **Social Links**: Replace the placeholder URLs with your actual social media profiles
633. **Profile Images**: Replace the emoji placeholders with actual images if desired
644. **Skills**: Modify the "What I Do" section to reflect your actual skills
655. **Colors**: Adjust the CSS custom properties in the `:root` and `[data-theme="dark"]` selectors
168 return (
169 <div className="no-internet-container">
170 <img src="https://i.postimg.cc/t4q16WRj/images.png" alt="No Internet" />
171 <div className="no-internet-message">
172 No internet connection
181}
182
183function Slideshow({ images }) {
184 useEffect(() => {
185 let currentSlideIndex = 0;
231 slides[0].style.left = "0%";
232 }
233 }, []); // images dependency removed to run once, assuming images don't change post-mount
234
235 return (
236 <div className="slideshow-container">
237 {images.map((src, index) => (
238 <img key={index} className={`mySlides ${index === 0 ? "visible" : ""}`} src={src} alt={`Slide ${index + 1}`} />
239 ))}
746 }, []); // Empty dependency array, so it runs once on mount
747
748 const slideshowImages = [
749 "https://i.postimg.cc/KvSbQsgQ/download-4.png",
750 "https://i.postimg.cc/NMzVyLRp/download-5.png",
816 </div>
817 </div>
818 <Slideshow images={slideshowImages} />
819 <Card {...loginCardData} />
820 <Card {...scanCodeCardData} />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>Glancer!</title>
7 <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml" />
8 <script src="https://cdn.tailwindcss.com"></script>
9 <link
178
179- **Redirects:** Use `return new Response(null, { status: 302, headers: { Location: "/place/to/redirect" }})` instead of `Response.redirect` which is broken
180- **Images:** Avoid external images or base64 images. Use emojis, unicode symbols, or icon fonts/libraries instead
181- **AI Image:** To inline generate an AI image use: `<img src="https://maxm-imggenurl.web.val.run/the-description-of-your-image" />`
182- **Storage:** DO NOT use the Deno KV module for storage
183- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
168 return (
169 <div className="no-internet-container">
170 <img src="https://i.postimg.cc/t4q16WRj/images.png" alt="No Internet" />
171 <div className="no-internet-message">
172 No internet connection
181}
182
183function Slideshow({ images }) {
184 useEffect(() => {
185 let currentSlideIndex = 0;
231 slides[0].style.left = "0%";
232 }
233 }, []); // images dependency removed to run once, assuming images don't change post-mount
234
235 return (
236 <div className="slideshow-container">
237 {images.map((src, index) => (
238 <img key={index} className={`mySlides ${index === 0 ? "visible" : ""}`} src={src} alt={`Slide ${index + 1}`} />
239 ))}
746 }, []); // Empty dependency array, so it runs once on mount
747
748 const slideshowImages = [
749 "https://i.postimg.cc/KvSbQsgQ/download-4.png",
750 "https://i.postimg.cc/NMzVyLRp/download-5.png",
816 </div>
817 </div>
818 <Slideshow images={slideshowImages} />
819 <Card {...loginCardData} />
820 <Card {...scanCodeCardData} />
573 height: 50px;
574 outline: none;
575 background-image: linear-gradient(transparent 0, var(--color-text) 1000%);
576 text-shadow: 0 1px 1px #0004;
577}
657}
658.button.button--secondary {
659 background-image: linear-gradient(transparent 0, var(--color-primary) 1000%);
660 color: var(--color-primary);
661 background-color: var(--color-white);
