Search
getmiraclechildcounter
@politelyinvinciblepointer
An interactive, runnable TypeScript val by politelyinvinciblepointer
Script
import { miraclechildcounter } from "https://esm.town/v/politelyinvinciblepointer/miraclechildcounter";
export function getmiraclechildcounter() {
return miraclechildcounter;
umdImport
@easrng
An interactive, runnable TypeScript val by easrng
Script
export async function umdImport(url: string | URL, globals = {}) {
const res = await fetch(url);
if (!res.ok) throw new Error(await res.text());
let code = await res.text();
code = code.replace(/^#!/gm, "// #!");
const module = {
exports: {} as any,
const global = new Proxy({}, {
...Reflect,
get(o, k) {
getOctopusEnergyRates
@metart43
// Declare the function as async and export it
HTTP
// Declare the function as async and export it
export const htmlExample = async () => {
const url = new URL(
"https://api.octopus.energy/v1/products/AGILE-24-10-01/electricity-tariffs/E-1R-AGILE-24-10-01-A/standard-unit-rates/",
const todaysDate = new Date();
// Helper function to format the date
function formatDateForOctopus(date) {
const isoString = date.toISOString();
return isoString.slice(0, 16) + "Z"; // Trims milliseconds and keeps up to minutes
// Create start of the day (00:00)
upstashEx
@stevekrouse
An interactive, runnable TypeScript val by stevekrouse
Script
import { Redis } from "npm:@upstash/redis";
const redis = new Redis({
url: Deno.env.get("upstashURL"),
token: Deno.env.get("upstashToken"),
const start = performance.now();
console.log(await redis.set("foo", new Date()));
console.log("set time: " + (performance.now() - start));
const start2 = performance.now();
console.log(await redis.get("foo"));
console.log("get time: " + (performance.now() - start2));
codeOnValTown
@stevekrouse
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
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,
val_7zpl8w4v8d
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export default async function handler(req) {
try {
const result = await (async () => {
function findLowestThreeDigitFibonacci() {
let a = 0, b = 1;
let lowestThreeDigitFibonacci = 0;
while (b < 1000) {
let temp = b;
b = a + b;
a = temp;
aqi
@Exam6918
An interactive, runnable TypeScript val by Exam6918
Cron
export let aqi = async () => {
let pm25 = (
await fetchJSON(
"https://api.openaq.org/v2/latest?" +
new URLSearchParams({
limit: "10",
page: "1",
location: "San Francisco",
offset: "0",
sort: "desc",
val_BTlYzYgxkV
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export const jsonOkExample = () => Response.json({ ok: true });
nasa
@ejfox
* This program creates an HTTP server that fetches various data from NASA APIs
* and returns a JSON response with a collection of interesting information about today.
* It uses multiple NASA APIs to gather diverse space-related data, including real-time imagery
* and additional interesting data points.
HTTP
* This program creates an HTTP server that fetches various data from NASA APIs
* and returns a JSON response with a collection of interesting information about today.
* It uses multiple NASA APIs to gather diverse space-related data, including real-time imagery
* and additional interesting data points.
const NASA_API_KEY = 'vYg1cCNLVbcgNemMWuLEjoJsGOGbBXZjZjmwVwuV';
async function fetchNASAData() {
const today = new Date().toISOString().split('T')[0];
// Fetch Astronomy Picture of the Day
const apodResponse = await fetch(`https://api.nasa.gov/planetary/apod?api_key=${NASA_API_KEY}`);
const apodData = await apodResponse.json();
tldc_discord
@hyusap
tldraw computer custom endpoint example This val is an example custom endpoint for tldraw computer 's data component. Usage To use this val with tldraw.computer, follow these steps: Fork this Val. Click the Copy endpoint button on your new Val. Open a project on tldraw.computer Create a Data component in your tldraw computer project In the Source dropdown, select Custom and the POST method Paste the endpoint into Data component's the HTTP Endpoint input. Run the component. To see the output, connect the Data component to a Text component. How it works In tldraw computer, you can configure a Data component to use a custom HTTP endpoint as its data source. You can also configure the request method, either GET or POST. If a Data component's request method is POST, then when the component next updates, it will send a POST request to the endpoint. The request's body will contain an array of the Data objects that the component had received as inputs. If the request method if GET, then the component will only make the request—its body will be empty. In both cases, the component will expect back a response that includes an array of Data objects these objects will be passed along as the data component's outputs. The endpoint (your forked version of this Val) can do whatever it likes between the request and response, but the response must include data in the correct format. If the format is wrong, the computer app will create a text data object instead that includes the response as plain text. Support If you're running into any difficulties, check out the #tldraw-computer channel on the tldraw discord.
HTTP
# tldraw computer custom endpoint example
This val is an example custom endpoint for [tldraw computer](tldraw.computer)'s data component.
### Usage
To use this val with tldraw.computer, follow these steps:
1. Fork this Val.
2. Click the **Copy endpoint** button on your new Val.
// This endpoint accepts and returns data.
type BooleanData = {
type: "boolean";
text: "true" | "false" | "maybe";
valle_tmp_69038696901412859657208359078762
@janpaul123
// This val responds with "Hello, World!" to all incoming HTTP requests
HTTP
// This val responds with "Hello, World!" to all incoming HTTP requests
export default async function main(req: Request): Promise<Response> {
return new Response("Hello, World!", { headers: { "Content-Type": "text/plain" } });
fetchPinatsPosts
@stevedylandev
An interactive, runnable TypeScript val by stevedylandev
Script
let currentDate = new Date();
let endDate = Math.floor(currentDate.getTime() / 1000);
let startDate = Math.floor(currentDate.setDate(currentDate.getDate() - 7) / 1000);
export async function fetchPinataPosts() {
try {
const soRes = await fetch(
`https://api.stackexchange.com/2.3/questions?fromdate=${startDate}&todate=${endDate}&order=desc&sort=creation&tagged=pinata&site=stackoverflow`,
method: "GET",
const soResData = await soRes.json();
const soItemsArray = soResData.items;
val_GxgfY0QutG
@dhvanil
An interactive, runnable TypeScript val by dhvanil
HTTP
export const jsonOkExample = () => Response.json({ ok: true });
langchainEx
@jacoblee93
// Forked from @stevekrouse.langchainEx
Script
export const langchainEx = (async () => {
const { ChatOpenAI } = await import(
"https://esm.sh/langchain/chat_models/openai"
const { PromptTemplate } = await import("https://esm.sh/langchain/prompts");
const { LLMChain } = await import("https://esm.sh/langchain/chains");
const model = new ChatOpenAI({
temperature: 0.9,
openAIApiKey: process.env.OPENAI_API_KEY,
verbose: true,
const template = "What is a good name for a company that makes {product}?";