stu43005

ICS Calendar Viewer A web-based calendar application for viewing ICS (iCalendar) files, deployed as a Val Town HTTP val. Features 📅 Monthly calendar view 📤 ICS file upload support 📋 ICS content paste support 🌓 Dark/Light mode 🎨 Automatic event coloring Usage Access the calendar through your Val Town HTTP val URL Upload ICS files or paste ICS content View your events on the calendar Toggle dark/light mode as needed Navigate between months Technical Details Built with React 18.2.0 and TailwindCSS Handles ICS file parsing and display No data persistence (events are stored in memory only) Fork and Modify Fork this val Make your changes Save to automatically deploy your version

Serve prefixed blobs. Usage import { serveBlobs } from "https://esm.town/v/pomdtr/serve_blobs" export default serveBlobs({ root: "public/" }) All your blobs prefixed by public/ will be publicly accessible. Ex: Go to https://pomdtr-public.web.val.run/example.json to view the blob public/example.json from my account.

Telemetry For Vals. Telemetry is a library that lets you trace val town executions with opentelemetry. All traces are stored in val.town sqlite and there is an integrated trace viewer to see them. Quickstart Instrument an http val like this. import { init, tracedHandler, } from "https://esm.town/v/saolsen/telemetry"; // Set up tracing by passing in `import.meta.url`. // be sure to await it!!! await init(import.meta.url); async function handler(req: Request): Promise<Response> { // whatever else you do. return } export default tracedHandler(handler); This will instrument the http val and trace every request. Too add additional traces see this widgets example . Then, too see your traces create another http val like this. import { traceViewer } from "https://esm.town/v/saolsen/telemetry"; export default traceViewer; This val will serve a UI that lets you browse traces. For example, you can see my UI here . Tracing By wrapping your http handler in tracedHandler all your val executions will be traced. You can add additional traces by using the helpers. trace lets you trace a block of syncronous code. import { trace } from "https://esm.town/v/saolsen/telemetry"; trace("traced block", () => { // do something }); traceAsync lets you trace a block of async code. import { traceAsync } from "https://esm.town/v/saolsen/telemetry"; await traceAsync("traced block", await () => { // await doSomething(); }); traced wraps an async function in tracing. import { traceAsync } from "https://esm.town/v/saolsen/telemetry"; const myTracedFunction: () => Promise<string> = traced( "myTracedFunction", async () => { // await sleep(100); return "something"; }, ); fetch is a traced version of the builtin fetch function that traces the request. Just import it and use it like you would use fetch . sqlite is a traced version of the val town sqlite client. Just import it and use it like you would use https://www.val.town/v/std/sqlite attribute adds an attribute to the current span, which you can see in the UI. event adds an event to the current span, which you can see in the UI.

Awesome Val Town An curated list of useful community vals. Feel free to create your own awesome list! Apps @pomdtr/blob_editor @nbbaier/sqliteExplorerApp View and interact with your Val Town SQLite data. @pomdtr/http_client Attach a postman-like http client to your vals VS Code Extension vt Chrome Extension Tooling Authentication @pomdtr/basicAuth @pomdtr/email_auth @pomdtr/password_auth Sqlite @sqlite/db @pomdtr/sql @pomdtr/kv @postpostscript/sqliteUniverse Blob @stevekrouse/blobAdmin @pomdtr/lowdb Middleware @andreterron/codeOnValTown Testing @pomdtr/test_explorer Api @pomdtr/api @pomdtr/trpc Other @vladimyr/valshot @pomdtr/mdx @pomdtr/serve_readme OpenAI @pomdtr/ask_ai Web Components Val Town Playground CodeMirror

You know how when you paste a URL in Twitter or Slack it shows you a nice preview? This val gives you that data. Given a URL, this will return metadata about the website like title , description , imageURL , image as base64 etc. Sample input - paste this in your URL bar https://dvsj-GetWebsiteMetadata.web.val.run?targetURL=https://dvsj.in https://dvsj-GetWebsiteMetadata.web.val.run?targetURL=<your-target-url-here> Sample output: { status: 200, url: "https://dvsj.in", title: "Dav-is-here ➜", description: "Davis' not-so-secret stash", imgUrl: "https://www.dvsj.in/cover-picture.png", imgData: "data:image/png;base64,qwertyblahblah" } FAQ: Why is imgData sent when imgUrl is already present? Because you shouldn't hotlink images from 3rd parties. Store the base64 image on your server and use it in your app. It's unfair to use their server bandwidth and could be a security issue for you if they change the content of the link later.

HTTP Client Attach a postman-like http client to your vals, with bookmarks and history support Usage Wrap your http handler in an the httpClient middleware. import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }) The http client will be shown on the root. Adding bookmarks You might want to bookmark some requests you need often. You can do it by passing a bookmark list as a middleware option: import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }, { bookmarks: [ { "label": "Dummy Request", "request": new Request("https://dummyjson.com/products") } ]}) Customizing the client path import {httpClient} from "https://esm.town/v/pomdtr/http_client" export default httpClient((req) => { return new Response("Hello World!") }, { path: "/http-client" }) TODO [ ] fix syntax highlighting on successive request [ ] allow to prefill the initial request

Email Auth for Val Town ⚠️ Require a pro account (needed to send email to users) Usage Create an http server, and wrap it in the emailAuth middleware. import { emailAuth } from "https://esm.town/v/pomdtr/email_auth" import { verifyUserEmail } from "https://esm.town/v/pomdtr/verifyUserEmail" export default emailAuth((req) => { return new Response(`your mail is ${req.headers.get("X-User-Email")}`); }, { verifyEmail: verifyUserEmail }); 💡 If you do not want to put your email in clear text, just move it to an env var (ex: Deno.env.get("email") ) If you want to allow anyone to access your val, just use: import { emailAuth } from "https://esm.town/v/pomdtr/email_auth" export default emailAuth((req) => { return new Response(`your mail is ${req.headers.get("X-User-Email")}`); }, { verifyEmail: (_email) => true }); Each time someone tries to access your val but is not allowed, you will get an email with: the email of the user trying to log in the name of the val the he want to access You can then just add the user to your whitelist to allow him in (and the user will not need to confirm his email again) ! TODO [ ] Add expiration for verification codes and session tokens [ ] use links instead of code for verification [ ] improve errors pages

Password Auth Middleware Protect your vals behind a password. Use session cookies to persist authentication. Usage import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84"; export default passwordAuth(() => { return new Response("OK"); }, { verifyPassword: (password) => password == Deno.env.get("VAL_PASSWORD") }); If you want to use an api token to authenticate: import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth?v=84"; import { verifyToken } from "https://esm.town/v/pomdtr/verifyToken"; export default passwordAuth(() => { return new Response("OK"); }, { verifyPassword: verifyToken }); TODO [x] allow to authenticate using a val town token [ ] add a way to send an email to ask a password from the val owner [ ] automatically extend the session [ ] automatically remove expired sessions FAQ How to sign out ? Navigate to <your-site>/signout .

Val Shot Generate val source code screenshot using sourcecodeshots.com ⚠️ This service is offered for personal use under a reasonable usage policy as stated here: https://sourcecodeshots.com/docs 📣 Special thanks to @pomdtr for their help and contributions! Usage https://vladimyr-valshot.web.val.run/v/<author>/<val> Example https://vladimyr-valshot.web.val.run/v/vladimyr/valshot https://vladimyr-valshot.web.val.run/v/pomdtr/readme

SQLite Explorer View and interact with your Val Town SQLite data. It's based off Steve's excellent SQLite Admin 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 by invisal . This is now more an SPA, with tables, queries and results showing up on the same page. Install Install the latest stable version (v86) by forking this val: Authentication Login to your SQLite Explorer with password authentication with your Val Town API Token as the password. Todos / Plans [ ] improve error handling [ ] improve table formatting [ ] sticky table headers [x] add codemirror [ ] add loading indication to the run button (initial version shipped) [ ] add ability to favorite queries [ ] add saving of last query run for a table (started) [ ] add visible output for non-query statements [ ] add schema viewing [ ] add refresh to table list sidebar after CREATE/DROP/ALTER statements [ ] add automatic execution of initial select query on double click [x] add views to the sidebar [ ] add triggers to sidebar [ ] add upload from SQL, CSV and JSON [ ] add ability to connect to a non-val town Turso database [x] fix wonky sidebar separator height problem (thanks to @stevekrouse) [x] make result tables scrollable [x] add export to CSV, and JSON (CSV and JSON helper functions written in this val . Thanks to @pomdtr for merging the initial version!) [x] add listener for cmd+enter to submit query

Forked from nbbaier/sqliteWriter

Forked from stevekrouse/sqlite_admin

Forked from pomdtr/blog

Val Town Basic Auth Add basic auth on top of any http val Usage Wrap your HTTP handler in the basicAuth middleware. import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth"; function handler(req: Request) { return new Response("You are authenticated!"); } export default basicAuth(handler, { verifyUser: (username, password) => username == "user" && password == "password" }); If you want to use an apiToken as a password: import { basicAuth } from "https://esm.town/v/pomdtr/basicAuth"; import { verifyToken } from "https://www.val.town/v/pomdtr/verifyToken" function handler(req: Request) { return new Response("You are authenticated!"); } export default basicAuth(handler, { verifyUser: (_, password) => verifyToken(password) });

Val Town Adapter for lowdb @std/blob is used as a lowdb sync. See @pomdtr/lowdb_example for example usage.

Forked from stevekrouse/reactExample