andreterron
Dev Tools • Quantified Self
Public vals
137
andreterron
bombCycloneOutageTracker
HTTP
🌪️ × 🔌 Bomb Cyclone - PSE Power Outage Tracker https://bomb-cyclone.terron.app Tracking PSE power outages after the Bomb Cyclone of Nov 19th, 2024. The data is obtained every 15 minutes using this cron job: @andreterron/PSEoutages Tracking started on Nov 20th, at around 7pm PST. If you know how others can help those affected by the outage, please add a comment here. I'll keep updating this readme and the website with more information.
1
andreterron
PSEoutages
Cron
PSE Outage Checker The Pacific Northwest was just hit with a bomb cyclone that caused a huge amount of power outages.
This val tracks the number of outages and impacted customers.
The goal is to graph this data and estimate when will all the outages be resolved. If you know how others can help those affected by the outage, please add a comment here so I can update this readme.
0
andreterron
renderFormAndSaveData
HTTP
Render form and save data This val provides a web-based interface for collecting email addresses. It features a dual-functionality approach: when accessed via a web browser using a GET request, it serves an HTML form where users can submit their email address. If the script receives a POST request, it implies that the form has been submitted, and it proceeds to handle the incoming data. Fork this val to customize it and use it on your account.
4
andreterron
codeOnVT_modifyResponse
Script
"Code on Val Town" Response modifier Appends the "Code on Val Town" ribbon to an HTTP Response. Usage new modifyResponse(res, { handle: "andre", name: "foo" }) - define which val to link to; new modifyResponse(res) - infer the val from the call stack. Example: @andreterron/openable_res import { modifyResponse } from "https://esm.town/v/andreterron/codeOnVT_modifyResponse";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return modifyResponse(html(`
<h2>Hello world!</h2>
<style>* { font-family: sans-serif }</style>
`));
};
0
andreterron
InjectCodeOnValTownStream
Script
Injects the "Code on Val Town" ribbon on an HTML string stream Usage new InjectCodeOnValTownStream({ handle: "andre", name: "foo" }) - define which val to link to; new InjectCodeOnValTownStream() - infer the val from the call stack. Example: @andreterron/openable_stream import { InjectCodeOnValTownStream } from "https://esm.town/v/andreterron/InjectCodeOnValTownStream";
import { blob } from "https://esm.town/v/std/blob?v=11";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
await blob.set(
"openable_test",
`<h2>Hello world!</h2>
<style>* { font-family: sans-serif }</style>`,
);
const value = await blob.get("openable_test");
return html(
value.body
.pipeThrough(new TextDecoderStream())
.pipeThrough(new InjectCodeOnValTownStream())
.pipeThrough(new TextEncoderStream()),
);
};
0
andreterron
codeOnVT_ribbonElement
Script
"Code on Val Town" Ribbon HTML Element Ribbon element used by @andreterron/codeOnValTown Usage ribbonElement({val: { handle: "andre", name: "foo" }}) - define which val to link to; ribbonElement() - infer the val from the call stack. Example: @andreterron/openable_element import { ribbonElement } from "https://esm.town/v/andreterron/codeOnVT_ribbonElement?v=3";
import { html } from "https://esm.town/v/stevekrouse/html?v=5";
export default async (req: Request): Promise<Response> => {
return html(`
<h2>Hello world!</h2>
<style>* { font-family: sans-serif }</style>
${ribbonElement()}
`);
};
1
andreterron
codeOnValTown
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 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.
5