• 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
    dataTableScript
    @stevekrouse
    // Changes to the inputs will trigger a redraw to update the table
    Script
  • stevekrouse avatar
    dateMeRSS
    @stevekrouse
    Date Me Directory RSS Feed An RSS feed for the https://dateme.directory.
    HTTP
  • stevekrouse avatar
    date_me_form
    @stevekrouse
    @jsxImportSource npm:hono@3/jsx
    HTTP
  • 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
  • stevekrouse avatar
    editRedirect
    @stevekrouse
    Redirect to Val Page Redirect from web val to val page by adding /edit to the URL. Convention by pomdtr . Usage import { editRedirect } from "https://esm.town/v/stevekrouse/editRedirect"; import { Hono } from "npm:hono@3"; const app = new Hono(); app.get("/", (c) => c.text("Hello world!")); app.get("/edit", (c) => editRedirect()); export default app.fetch; TODO [ ] turn this into middleware in the style of @pomdtr/basicAuth Live: https://stevekrouse-edit_redirect_example.web.val.run/edit
    Script
  • stevekrouse avatar
    dateme_home
    @stevekrouse
    @jsxImportSource npm:hono@3/jsx
    Script
  • stevekrouse avatar
    dateme_browse
    @stevekrouse
    @jsxImportSource npm:hono@3/jsx
    Script
  • stevekrouse avatar
    html
    @stevekrouse
    An interactive, runnable TypeScript val by stevekrouse
    Script
  • stevekrouse avatar
    dateme_faq
    @stevekrouse
    @jsxImportSource npm:hono@3/jsx
    Script
  • stevekrouse avatar
    getSqliteDateMeDocs
    @stevekrouse
    // let docs = await getDocs();
    Script
  • stevekrouse avatar
    date_me_faq
    @stevekrouse
    @jsxImportSource https://esm.sh/preact
    Script
  • stevekrouse avatar
    date_me_docs_cache
    @stevekrouse
    An interactive, runnable TypeScript val by stevekrouse
    Script
  • stevekrouse avatar
    date_me_docs_table
    @stevekrouse
    @jsxImportSource https://esm.sh/preact
    Script
1
Next
stevekrouse-dateme.web.val.run
v183
June 7, 2024