• pomdtr avatar
    password_auth
    @pomdtr
    Password Auth Middleware Protect your vals behind a password. Use session cookies to persist authentication. Demo See @pomdtr/password_auth_test Usage If you want to use an api token to authenticate: import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth"; export default passwordAuth(() => { return new Response("OK"); }); Or if you prefer to use a string: import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth"; export default passwordAuth(() => { return new Response("OK"); }, { password: Deno.env.get("VAL_PASSWORD") }); You can also set multiple ones import { passwordAuth } from "https://esm.town/v/pomdtr/password_auth"; export default passwordAuth(() => { return new Response("OK"); }, { password: [Deno.env.get("VAL_PASSWORD"), Deno.env.get("STEVE_PASSWORD")] }); Note that authenticating using your api token remain an option even after setting a password. 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 .
    Script
  • pomdtr avatar
    basicAuth
    @pomdtr
    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); To authenticate, paste an api token in the password prompt.
    Script
  • andreterron avatar
    codeOnValTown
    @andreterron
    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.
    Script
  • postpostscript avatar
    sqliteBuilder
    @postpostscript
    sqliteBuilder: Opinionated safe(r) query builder using tagged templates import { Statement } from "https://esm.town/v/postpostscript/sqliteBuilder"; const unsafeId = "1234 or TRUE" console.log(Statement` SELECT * FROM table WHERE id = ${unsafeId} ${Statement`AND otherCondition`} `) // StatementInstance { // sql: "\nSELECT *\nFROM table\nWHERE id = ?\nAND otherCondition\n", // args: [ "1234 or TRUE" ], // log: false // } const results = await Statement`SELECT ...`.execute() // [ { key: "value", anotherKey: "anotherValue" }, ... ] Or you can pass it directly to @std/sqlite.execute : import { sqlite } from "https://esm.town/v/std/sqlite" await sqlite.execute(Statement`Select ...`) You can combine multiple statements using Statement.prototype.combineWith : Statement`...`.combineWith(Statement`...`, " AND ") [ Statement`fieldA`, Statement`fieldB`, Statement`fieldC`, ].reduce((a, b) => a.combineWith(b, ", "))
    Script
  • std avatar
    sqlite
    @std
    SQLite - Docs ↗ SQLite is a lightweight, standard database. Every Val Town account comes with its own private SQLite database that is accessible from any of your vals via std/sqlite . Val Town SQLite is powered by Turso . Usage Migrations ORMs You may find these admin viewers helpful managing your database: SQLite Explorer (built in Val Town) LibSQL Studio Limits You can store 10mb on the free plan and up to 1gb on the paid plan. Contact us if you need more space. 📝 Edit docs
    Script
  • nbbaier avatar
    iframeHandler
    @nbbaier
    An interactive, runnable TypeScript val by nbbaier
    Script
  • stevekrouse avatar
    reloadOnSave
    @stevekrouse
    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>`); })
    Script
  • nbbaier avatar
    sqliteExportHelpers
    @nbbaier
    An interactive, runnable TypeScript val by nbbaier
    Script
1
Next
nbbaier-sqliteexplorerapp.web.val.run
v81
April 7, 2024