Search

Results include substring matches and semantically similar vals. Learn more
MichaelNollox avatar
outsideBlushShrimp
@MichaelNollox
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=50"; 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=50"; 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
# Code on Val Town
![Screenshot 2024-02-27 at 1.25.46 PM.png](https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/6b67bb0a-d80f-4f3d-5b17-57b5378b3
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](https://github.com/simonwhitaker/github-fork-ribbon-css) under the hood.
## Usage
Here are 2 different ways to add the "Code on Val Town" ribbon:
* @param bodyText HTML string that will be used to inject the element.
* @param val Define which val should open. Defaults to the root reference
export function modifyHtmlString(
bodyText: string,
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
import { MaybePromise } from "https://esm.town/v/postpostscript/typeUtils";
import { type InStatement, type InValue, sqlite } from "https://esm.town/v/std/sqlite";
import { LibsqlError, type Row } from "npm:@libsql/client";
export { LibsqlError } from "npm:@libsql/client";
export type ExecuteOptions<T extends Record<string, any>, I extends SqliteInterface> = {
fallback?: (
ayrtonlacerda avatar
getWallets
@ayrtonlacerda
An interactive, runnable TypeScript val by ayrtonlacerda
Script
import process from "node:process";
export const getWallets = (async () => {
const { createClient } = await import("npm:@supabase/supabase-js");
const supabase = createClient(
process.env.SUPABASE_URL,
process.env.SUPABASE_ANON_KEY,
dm3agv avatar
zestyJadeReptile
@dm3agv
A example Serverless Bot for Matrix chat. See https://vlad.roam.garden/How-to-create-a-serverless-Matrix-Chat-bot for a more detailed write-up on how to set one up! To test this bot: invite serverless-echo@matrix.org to your unencrypted room Send a message starting with !echo and the bot will repeat content after. Use https://matrix-serverless.netlify.app/ to configure Matrix to call the endpoint on newly received messages
Express
text.slice(echoText.length),
// This is important - if you don't return this JSON -
// Matrix won't consider notification as processed and will keep sending you the same one
return res.json({ rejected: [] });
mschleske avatar
fetchRedditToken
@mschleske
An interactive, runnable TypeScript val by mschleske
Script
export const fetchRedditToken = async (
CLIENT_ID,
CLIENT_SECRET,
ACCESS_CODE,
const response = await authenticateReddit(
CLIENT_ID,
CLIENT_SECRET,
ACCESS_CODE,
stevekrouse avatar
bookmark
@stevekrouse
A minimal bookmarking tool This allows you to bookmark links and view them later. Completely powered by ValTown and SQLite To set this up for yourself Fork the val From your ValTown settings page, add an environment variable named bookmarks_client_id and give it a value (you will be using this for saving) Add another environment variable named bookmarks_client_secret and give it a value (you will also be using this for saving) At first, the "bookmarks" table will not exist, so we need to save an article first, which will create the "bookmarks" table To do this, add a bookmarklet to your browser with this value (replace BOOKMARKS-CLIENT-ID and BOOKMARKS-CLIENT-SECRET with the values you added to the environment variables, and replace BOOKMARKS-URL with your VAL's URL): javascript:void(open('BOOKMARKS-URL/save?u='+encodeURIComponent(location.href)+'&t='+encodeURIComponent(document.title)+'&id=BOOKMARKS-CLIENT-ID&secret=BOOKMARKS-CLIENT-SECRET', 'Bookmark a link', 'width=400,height=450')) Click this bookmarklet to bookmark the URL of the current active tab Go to your VAL URL homepage to see the bookmark Demo Here are my bookmarks: https://ramkarthik-bookmark.web.val.run/ Note Make sure you don't share bookmarks_client_id and bookmarks_client_secret . It is used for authentication before saving a bookmark.
HTTP (deprecated)
1. Fork the val
rom your ValTown settings page, add an environment variable named `bookmarks_client_id` and give it a value (you will be usin
3. Add another environment variable named `bookmarks_client_secret` and give it a value (you will also be using this for savi
4. At first, the "bookmarks" table will not exist, so we need to save an article first, which will create the "bookmarks" tab
this, add a bookmarklet to your browser with this value (replace `BOOKMARKS-CLIENT-ID` and `BOOKMARKS-CLIENT-SECRET` with th
onent(location.href)+'&t='+encodeURIComponent(document.title)+'&id=BOOKMARKS-CLIENT-ID&secret=BOOKMARKS-CLIENT-SECRET', 'Book
6. Click this bookmarklet to bookmark the URL of the current active tab
### Note
Make sure you don't share `bookmarks_client_id` and `bookmarks_client_secret`. It is used for authentication before saving a
return c.text("Authentication details (ID/Secret) missing!");
if (id != Deno.env.get("bookmarks_client_id") || secret != Deno.env.get("bookmarks_client_secret")) {
return c.text("Unauthorized!");
vladimyr avatar
fetchTweet
@vladimyr
// @see: https://github.com/vercel/react-tweet/blob/a292ca7/packages/react-tweet/src/api/fetch-tweet.ts#L27-L31
Script
const tweetData = await res.json();
return tweetData;
// @see: https://github.com/vercel/react-tweet/blob/a292ca7/packages/react-tweet/src/api/fetch-tweet.ts#L27-L31
function getToken(id: string) {
return ((Number(id) / 1e15) * Math.PI)
stevekrouse avatar
todo_db_repl
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
import { createClient } from "https://esm.sh/@libsql/client/web";
import process from "node:process";
let client = createClient({
url: "libsql://grateful-lanolin-stevekrouse.turso.io",
authToken: process.env.tursoGratefulLanolin,
export const todo_db_repl = await client.execute(`CREATE TABLE IF NOT EXISTS todos (
id INTEGER PRIMARY KEY AUTOINCREMENT,
janpaul123 avatar
jadeMacaw
@janpaul123
An interactive, runnable TypeScript val by janpaul123
Script
import { decode as base64Decode, encode as base64Encode } from "https://deno.land/std@0.166.0/encoding/base64.ts";
import { createClient } from "https://esm.sh/@libsql/client@0.6.0/web";
import { sqlToJSON } from "https://esm.town/v/nbbaier/sqliteExportHelpers?v=22";
import { db as allValsDb } from "https://esm.town/v/sqlite/db?v=9";
postpostscript avatar
fetchWorker
@postpostscript
fetchWorker: communicate with a worker over a fetch -like interface! Example: import { fetchWorker } from "https://esm.town/v/postpostscript/fetchWorker"; using worker = await fetchWorker({ url: "https://esm.town/v/postpostscript/fetchWorkerExample", handler: "handler", }); const res = await worker.fetch("/", { method: "POST", body: JSON.stringify({ test: 1, }), headers: { "Content-Type": "application/json", }, }); console.log(await res.json()); // { // method: "POST", // url: "https://7ae81ab0-04cf-485a-ae09-054c4d3be6b3.val.town/", // text: { test: 1 }, // headers: { "content-type": "application/json" } // } Full Example Options: url ( string , required): URL that the worker will fetch the handler from handler ( string , defaults to default ): name of export that will execute the request
Script
import { readerFromStreamReader } from "https://deno.land/std@0.223.0/io/mod.ts";
import { httpClient } from "https://esm.town/v/pomdtr/http_client";
import { disposable } from "https://esm.town/v/postpostscript/disposable";
export const workerURL = new URL(import.meta.url);
willthereader avatar
InstantSearchAlgoliaStoryTest
@willthereader
An interactive, runnable TypeScript val by willthereader
HTTP
<script>
console.log("Initializing Algolia search with App ID:", "${appId}");
const searchClient = algoliasearch("${appId}", "${apiKey}");
const search = instantsearch({
//indexName: 'Test_index',
indexName: 'ChapterTitleTest',
searchClient,
debug: true,
search.addWidgets([
pomdtr avatar
chinookQuery
@pomdtr
An interactive, runnable TypeScript val by pomdtr
HTTP (deprecated)
import { zip } from "https://esm.town/v/pomdtr/sql";
import { createClient } from "https://jsr.io/@pomdtr/sqlite-explorer/0.0.6/client.ts";
const client = createClient({
url: "https://sqlite-example.pomdtr.me",
export default async function() {
const res = await client.execute("SELECT name FROM artists");
const rows = zip(res);
bluemsn avatar
getModelBuilder
@bluemsn
An interactive, runnable TypeScript val by bluemsn
Script
// Set up LangSmith tracer
// const { Client } = await import("npm:langsmith");
// const { LangChainTracer } = await import("npm:langchain/callbacks");
// const client = new Client({
// apiUrl: "https://api.smith.langchain.com",
// apiKey: process.env.LANGSMITH,
// const tracer = new LangChainTracer({ client });
const callbacks = options?.verbose !== false ? [] : [];
devdoshi avatar
authorizeIpIngress
@devdoshi
Usage: @devdoshi.authorizeIpIngress({ securityGroupId: "sg-123", ip: "1.2.3.4", port: 8080, aws: { region: "us-east-2", secretAccessKey: "hunter2", accessKeyId: "ABC123", }, });
Script
const {
EC2Client,
CreateSecurityGroupCommand,
AuthorizeSecurityGroupIngressCommand,
} = await import("https://esm.sh/@aws-sdk/client-ec2");
const { port, ip, aws, securityGroupId } = input.data;
const ec2Client = new EC2Client({
region: aws.region,
try {
await ec2Client.send(authorizeCommand);
catch (e) {
apppeak avatar
nationalPeachPeacock
@apppeak
An interactive, runnable TypeScript val by apppeak
Cron
import process from "node:process";
import { Client } from "npm:@notionhq/client";
import dayjs from "npm:dayjs";
const DATABASE_ID = "519446a0d3ed47038fffd669b9ece770";
const notion = new Client({ auth: process.env.NOTION_API_KEY });
const intervalMapping = {
"Weekly": (date) => dayjs(date).add(1, "week"),