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
std
sqlite
Script
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 We recommend these admin data viewers for managing your database – viewing or editing data or your database table schema: Outerbase Studio (recommended) - formely known as LibSQL Studio – see instructions here SQLite Explorer (built in Val Town) 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
0
std
email
Script
Email - Docs ↗ Send emails with std/email . You can only send emails to yourself if you're on Val Town Free. If you're on Val Town Pro , you can email anyone. Want to receive emails instead? Create an email handler val Basic usage import { email } from "https://esm.town/v/std/email";
await email({ subject: "New Ink & Switch Post!", text: "https://www.inkandswitch.com/embark/" }); subject The email subject line. It defaults to Message from @your_username on Val Town . to , cc , and bcc By default, the to field is set to the owner of the Val Town account that calls it. If you have Val Town Pro, you can send emails to anyone via the to , cc , and bcc fields. If you don't have Val Town Pro, you can only send emails to yourself, so leave those fields blank. from The from is limited to a few options: It defaults to notifications@val.town if you don't specify it. If you do specify it, it must be of the form: your_username.valname@valtown.email . replyTo replyTo accepts a string email or an object with strings for email and name (optional). This can be useful if you are sending emails to others with Val Town Pro. import { email } from "https://esm.town/v/std/email";
await email({
to: "someone_else@example.com",
from: "your_username.valname@valtown.email",
replyTo: "your_email@example.com",
text: "these pretzels are making me thirsty",
}); Attachments You can attach files to your emails by using the attachments field.
Attachments need to be Base64 encoded,
which is what the btoa
method is doing in this example: import { email } from "https://esm.town/v/std/email";
export const stdEmailAttachmentExample = email({
attachments: [
{
content: btoa("hello attachments!"),
filename: "test.txt",
type: "text",
disposition: "attachment",
},
],
}); Here's an example sending a PDF . Headers You can set custom headers in emails that you send: import { email } from "https://esm.town/v/std/email?v=13"
console.log(
await email({
text: "Hi",
headers: {
"X-Custom-Header": "xxx",
},
}),
) This is also documented in our REST API , and supported in the SDK . 📝 Edit docs
7
stevekrouse-stevekrouse_minimal.web.val.run
Updated: March 18, 2024