Val Town Code SearchReturn to Val Town

vtProjectSearchcomponents.tsx2 matches

@maxm•Updated 2 weeks ago

1242                          <a href="?q=fetch" className="example-link">fetch</a>
1243                          <a href="?q=api" className="example-link">api</a>
1244                          <a href="?q=database" className="example-link">database</a>
1245                          <a href="?q=image" className="example-link">image</a>
1246                          <a href="?q=function" className="example-link">function</a>
1396                        <a href="?q=fetch" className="example-link">fetch</a>
1397                        <a href="?q=api" className="example-link">api</a>
1398                        <a href="?q=database" className="example-link">database</a>
1399                        <a href="?q=image" className="example-link">image</a>
1400                        <a href="?q=function" className="example-link">function</a>

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.
8
9To use it on your own Val Town SQLite database, [fork it](https://www.val.town/v/stevekrouse/sqlite_admin/fork) to your account.
10
11It uses [basic authentication](https://www.val.town/v/pomdtr/basicAuth) with your [Val Town API Token](https://www.val.town/settings/api) as the password (leave the username field blank).

16  maxFileSize: 1048576  # 1MB
17
18database:
19  type: SQLite
20  tables:

9- Styling: DaisyUI
10- Features: Display YAML contents in raw & Tree View
11- Database: SQLite for creating and storing YAML files
12- Configuration: `config.ts` for application settings
13- Path independence: Setup paths to allow moving the app between folders
25      ├── yaml-parser.ts     # YAML parsing utilities
26      ├── tree-view.ts       # Tree view rendering logic
27      ├── database.ts        # Database operations
28      └── config.ts          # Application configuration
29```
353. **YAML Parsing**: Use a YAML library (js-yaml) for parsing YAML content
364. **UI Framework**: Implement DaisyUI (Tailwind CSS-based) for styling
375. **Database**: Use Val Town's SQLite for storing and retrieving YAML files
386. **Path Independence**: Use relative paths and import.meta.url for file references
39
454. Create client-side JavaScript for YAML parsing and display
465. Implement the tree view visualization
476. Set up SQLite database for YAML file storage
487. Create API endpoints for CRUD operations
498. Ensure path independence for all file references

22      ├── yaml-parser.ts     # YAML parsing utilities
23      ├── tree-view.ts       # Tree view rendering logic
24      ├── database.ts        # Database operations
25      └── config.ts          # Application configuration
26```
29
30- **Backend**: Hono framework for routing and API endpoints
31- **Database**: SQLite for storing YAML files
32- **Frontend**: HTML/JS with DaisyUI (Tailwind CSS-based) for styling
33- **YAML Parsing**: js-yaml library for parsing YAML content
412. Toggle between raw text view and tree view
423. Create new YAML files through the interface
434. Save changes to the database
44
45## Configuration

46    "slug": "codegen",
47    "link": "/blog/codegen",
48    "description": "Like Claude Artifacts, but with a backend and database",
49    "pubDate": "Thu, 22 Aug 2024 00:00:00 GMT",
50    "author": "JP Posma",

1---
2title: "Post-mortem: A Backward Incompatible Database Migration"
3description: Val runs failed due to a database migration that was not backward compatible
4pubDate: 2025-04-02T00:00:00.000Z
5author: Sophie Houser
6---
7
8Today at 10:11am we experienced a 12-minute outage, which caused HTTP vals to return 503 errors and other types of vals to fail. In the end, the root cause was a deployment timing issue where database migrations were deployed successfully, but our application code deployment hung for several minutes. The new database migrations were incompatible with the old application code and crashed the process. 
9
10We aim to make all database migrations maintain backward compatibility, but in this case, we only discovered through the delayed deployment feedback that the new migrations were not compatible with previous versions.
11
12## Timeline
27## Next Steps
28
29Reliability is important to us and we’ve taken steps to make sure this doesn’t happen again. We’ve added a test to ensure database migrations are backward compatible, which we’ll run before we deploy any new code that includes database migrations.

229- `NOTION_API_KEY`: Your Notion API integration token
230
231You'll need to create an integration in the Notion workspace and grant it access to the relevant pages or databases.
232
233## Usage Examples

1// Script to set up the telegram_chats table in SQLite
2// Run this script manually to create the database table
3
4export default async function setupTelegramChatDb() {
25    `);
26
27    return "Telegram chat database table created successfully.";
28  } catch (error) {
29    console.error("Error setting up telegram_chats table:", error);

13## Technical Architecture
14
15**⚠️ important caveat: the admin dashboard doesn't have auth! currently it just relies on security by obscurity of people not knowing the url to a private val. this is not very secure. if you fork this project and put sensitive data in a database you should think carefully about how to secure it.**
16
17Stevens has been designed with the utmost simplicity and extensibility, much like a well-organized household. At the heart of his operation lies a single "memories" table - a digital equivalent of a butler's meticulous records. This table serves as the foundation for all of Stevens' operations.
45- `dashboard`: the admin view for showing the memories notebook + visualizing imports
46- `dailyBriefing`: stuff related to sending a daily update via telegram
47- `dbUtils`: little one-off scripts for database stuff
48
49## Hiring your own Stevens
57- For the Google Calendar integration you'll need `GOOGLE_CALENDAR_ACCOUNT_ID` and `GOOGLE_CALENDAR_CALENDAR_ID`. See [these instuctions](https://www.val.town/v/stevekrouse/pipedream) for details.
58
59**important caveat: the admin dashboard doesn't have auth! currently it just relies on security by obscurity of people not knowing the url to a private val. this is not very secure, if you put sensitive data in a database you should think carefully about how to secure it.**
60
61Overall it's a simple enough project that I encourage you to just copy the ideas and run in your own direction rather than try to use it as-is.