Back to packages list

Vals using hono

Description from the NPM package:
Web framework built on Web Standards
nbbaier avatar
sqliteExplorerApp_DEV
@nbbaier
HTTP
SQLite Explorer (Dev Branch) 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 (v66) 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
pomdtr avatar
codeOnValTown
@pomdtr
Script
Code on Val Town Adds a "Code on Val Town" ribbon to your page. This lets your website visitors navigate to the code behind it. This uses github-fork-ribbon-css under the hood. Usage Here are 2 different ways to add the "Code on Val Town" ribbon: 1. Wrap your fetch handler (recommended) import { modifyFetchHandler } from "https://esm.town/v/andreterron/codeOnValTown?v=45"; import { html } from "https://esm.town/v/stevekrouse/html?v=5"; export default modifyFetchHandler(async (req: Request): Promise<Response> => { return html(`<h2>Hello world!</h2>`); }); Example: @andreterron/openable_handler 2. Wrap your HTML string import { modifyHtmlString } from "https://esm.town/v/andreterron/codeOnValTown?v=45"; import { html } from "https://esm.town/v/stevekrouse/html?v=5"; export default async (req: Request): Promise<Response> => { return html(modifyHtmlString(`<h2>Hello world!</h2>`)); }; Example: @andreterron/openable_html Other ways We made sure this was very modular, so you can also add the ribbon using these methods: Get the element string directly: @andreterron/codeOnVT_ribbonElement Modify an HTTP Response: @andreterron/codeOnVT_modifyResponse Use .pipeThrough to append to a stream: @andreterron/InjectCodeOnValTownStream Customization Linking to the val These functions infer the val using the call stack or the request URL. If the inference isn't working, or if you want to ensure it links to a specific val, pass the val argument: modifyFetchHandler(handler, {val: { handle: "andre", name: "foo" }}) modifyHtmlString("<html>...", {val: { handle: "andre", name: "foo" }}) Styling You can set the style parameter to a css string to customize the ribbon. Check out github-fork-ribbon-css to learn more about how to style the element. modifyFetchHandler(handler, {style: ".github-fork-ribbon:before { background-color: #333; }"}) modifyHtmlString("<html>...", {style: ".github-fork-ribbon:before { background-color: #333; }"}) Here's how you can hide the ribbon on small screens: modifyFetchHandler(handler, {style: `@media (max-width: 768px) { .github-fork-ribbon { display: none !important; } }`}) To-dos [ ] Let users customize the ribbon. Some ideas are the text, color or placement.
maxm avatar
honoExample
@maxm
HTTP
An interactive, runnable TypeScript val by maxm
pomdtr avatar
valtownByExample
@pomdtr
HTTP
Val town by example Usage Simple Example To add an example, just create a val. The val should start with a JSDoc style multi line comment that describes the example: /** * @title HTTP server: Hello World * @description An example of a HTTP server that serves a "Hello World" message. */ // this comment will be displayed on the left export const server = () => new Response("Hello world!") The title is required. Then, you can write the code. Code can be prefixed with a comment that describes the code. The comment will be rendered next to the code in the example page. Make sure your val is public, then go to https://pomdtr-val_town_by_example.web.val.run/v/<your-username>/<your-val> Using multiple vals You can add another val to your example by adding an @include directive /** * @title HTTP server: Hello World * @description An example of a HTTP server that serves a "Hello World" message. * @include pomdtr/secondary_val */ See @pomdtr/react_example Adding external resources to your example You can attach an external link to your val by using the @resource directive. External resources are specified using a markdown link. /** * @title HTTP server: Hello World * @description An example of a HTTP server that serves a "Hello World" message. * @resource [Val Town Docs](https://docs.val.town) **/ Adding examples to the homepage Just add your val in @pomdtr/val_town_by_example_toc
robsimmons avatar
sqlite_admin
@robsimmons
HTTP
SQLite Admin This is a lightweight SQLite Admin interface to view and debug your SQLite data. It'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. To use it on your own Val Town SQLite database, fork it to your account. It uses basic authentication with your Val Town API Token as the password (leave the username field blank).
naserdehghan avatar
v1
@naserdehghan
HTTP
An interactive, runnable TypeScript val by naserdehghan
burningion avatar
valshot
@burningion
HTTP
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
stevekrouse avatar
amaranthYak
@stevekrouse
HTTP
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 (v66) 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 [ ] 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 [ ] 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
stevekrouse avatar
poembuilder
@stevekrouse
HTTP
@jsxImportSource npm:hono@3/jsx
stevekrouse avatar
magentaTrout
@stevekrouse
HTTP
@jsxImportSource npm:hono@3/jsx
stevekrouse avatar
purpleOctopus
@stevekrouse
HTTP
Date Me Directory This is the source code for the Date Me Directory. Contributions welcome! Architecture This version of the site still uses Notion to store the data and NoteForms for the form to get your submission into Notion. I intend to cut Notion out of the equation shortly by building our own HTML form that writes data directly to my sqlite database. This val is the router for the application @stevekrouse/getDocs pulls the date me docs from my sqlite database. @stevekrouse/dateme_notion_sync syncs my data from Notion to my sqlite database every 10 minutes Todos [ ] Make a form to send data directly to sqlite (in progress: @stevekrouse/date_me_form) [ ] Require an email (that isn't shared publicly) [ ] Filters: Gender, Interested In, Style, Location, etc [ ] Table: hide location, location flexibility, community, contact, last updated in more details [ ] Refactor Location to an array of Lat, Lon [ ] Geocode all the existing locations [ ] Add a geocoder map input to the form [ ] Allow selecting multiple location through the form [ ] Profile performance & speed up site, possibly add more caching [ ] Let people edit their forms [ ] Featured profiles
stevekrouse avatar
reloadOnSave
@stevekrouse
Script
Live reload in new tabs When you're working on an HTML HTTP val in a new tab, it's annoying to have to manually reload the tab on every save. In the Val Town editor, you can hit cmd+enter, but there's nothing like that for a val in a new tab because Val Town doesn't control that new tab (like we control the iframe in the browser preview). However, you control that HTML via the fetch handler you're writing, so you can add a script that polls the Val Town API for the current version number of your val, and reload itself if it detects a new version. This val has a collection of helpers to help you do just that. Usage import { html } from "https://esm.town/v/stevekrouse/html"; import { reloadOnSaveFetchMiddleware } from "https://esm.town/v/stevekrouse/reloadOnSave"; export default reloadOnSaveFetchMiddleware(async function(req: Request): Promise<Response> { return html(`<h1>Hello!!</h1>`); })
nlnw avatar
frame
@nlnw
HTTP
Minimal val.town Farcaster Frame example. It supports dynamic image generation with Satori and ReSVG, and it's compatible with the Open Frames standard.
vladimyr avatar
gltf_torus
@vladimyr
HTTP
Builds a torus as a gltf file and displays it with https://modelviewer.dev/ based on https://www.donmccurdy.com/2023/08/01/generating-gltf/ https://github.com/mrdoob/three.js/tree/dev/src/geometries
rwev avatar
page
@rwev
HTTP
@jsxImportSource https://esm.sh/react
parkerdavis avatar
sqliteExplorerApp
@parkerdavis
HTTP
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 (v66) 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 [ ] 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 [ ] 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
…
11
…
Next