stevekrouse-blob_admin.web.val.run
  • 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
  • pomdtr avatar
    blob_admin_delete
    @pomdtr
    @jsxImportSource https://esm.sh/hono@4.0.8/jsx
    Script
  • stevekrouse avatar
    blob_admin_blob
    @stevekrouse
    @jsxImportSource https://esm.sh/hono@3.9.2/jsx
    Script
  • pomdtr avatar
    blob_admin_edit
    @pomdtr
    @jsxImportSource https://esm.sh/hono@4.0.8/jsx
    Script
  • 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 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 .
    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, { 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) });
    Script
  • pomdtr avatar
    blob_admin_blob
    @pomdtr
    @jsxImportSource https://esm.sh/hono@4.0.8/jsx
    Script
  • stevekrouse avatar
    blob_admin_home
    @stevekrouse
    @jsxImportSource https://esm.sh/hono@3.9.2/jsx
    Script
  • std avatar
    blob
    @std
    Blob Storage - Docs β†— Val Town comes with blob storage built-in. It allows for storing any data, like text, JSON, or images. You can access it via std/blob . Blob storage is scoped globally to your account. If you set a blob in one val, you can retrieve it by the same key in another val. It's backed by Cloudflare R2. You may find this admin viewer helpful for viewing and editing your blobs. Get JSON import { blob } from "https://esm.town/v/std/blob"; let blobDemo = await blob.getJSON("myKey"); console.log(blobDemo); // returns `undefined` if not found Set JSON import { blob } from "https://esm.town/v/std/blob"; await blob.setJSON("myKey", { hello: "world" }); List keys import { blob } from "https://esm.town/v/std/blob"; let allKeys = await blob.list(); console.log(allKeys); const appKeys = await blob.list("app_"); console.log(appKeys); // all keys that begin with `app_` Delete by key import { blob } from "https://esm.town/v/std/blob"; await blob.delete("myKey"); Examples Counter RSS Notifications (saving the last run time) Picture: Save & Read Error Handling blob.get can throw ValTownBlobNotFoundError Any method can throw ValTownBlobError for unexpected errors. Utilities Our Blob SDK also includes some utility functions to make working with blobs easier. Copy import { blob } from "https://esm.town/v/std/blob"; await blob.copy("myKey", "myKeyCopy"); Move import { blob } from "https://esm.town/v/std/blob"; await blob.move("myKey", "myKeyNew"); Lower-level API We provide access to the lower-level getter and setters, which are useful if you are storing non-JSON or binary data, need to stream in your response or request data, or do anything else lower-level. async get(key: string) : Retrieves a blob for a given key. async set(key: string, value: string | BodyInit) : Sets the blob value for a given key. See BodyInit . Limitations Blob-stored data counts towards your total Val Town storage – 10mb on the free plan and 1gb on pro. Check our pricing page to learn more. Keys for blobs can be up to 512 characters long. πŸ“ Edit docs
    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
  • stevekrouse avatar
    html
    @stevekrouse
    An interactive, runnable TypeScript val by stevekrouse
    Script
  • pomdtr avatar
    blob_admin_create
    @pomdtr
    @jsxImportSource https://esm.sh/hono@4.0.8/jsx
    Script
  • stevekrouse avatar
    sqlite_admin_tables
    @stevekrouse
    @jsxImportSource https://esm.sh/hono@3.9.2/jsx
    Script
  • stevekrouse avatar
    sqlite_admin_table
    @stevekrouse
    @jsxImportSource https://esm.sh/hono@3.9.2/jsx
    Script
1
Next
v16
April 25, 2024