Github API examples & templates
Use these vals as a playground to view and fork Github API examples and templates on Val Town. Run any example below or find templates that can be used as a pre-built solution.
tmcw
jsYAMLExample
Script
js-yaml YAML is a popular format for data which is an alternative to JSON . In contrast to JSON, YAML can look more user-friendly: you can write text without worrying about quoting strings You can write comments in YAML But, on the other side, it's more possible to write YAML that is parsed in an unexpected way. JSON is more explicit and predictable. js-yaml is the most popular YAML parser for JavaScript.
0
tmcw
poll
Express (deprecated)
Quick poll https://tmcw-poll.express.val.run This val, along with a val called poll_results and a val called poll_options , lets you conduct a little poll using just Val Town! With the express API , this exposes a web interface in which people can click an option and vote. We make sure everyone only votes once by setting a cookie in their browser. This uses htmx to make the voting experience slick, Tailwind to style the UI, and htm to generate HTML for the pages. If you want to use this yourself, fork this val, the poll_results val, and the poll_options val, and customize the options list. You can delete the existing results as well to clear the data.
3
petermillspaugh
emailSubscription
HTTP
Val Town email subscriptions 📧 Handles email subscription signup+verification and sending. Steps Fork and run the sibling Vals to set up SQLite tables: createSubscribers , createNewsletters , createEmailLogs Fork this Val and update for your use case (e.g. confirmation link, sendEmail args, form fields, etc.) Add an HTML form to your frontend that calls /send-verification , or just use / to return a simple HTML form Add a confirmation page on the frontend that calls /confirm-verification Fork sibling Vals to get verification email markup , send verification emails , create a list of newsletters , create a newsletter template , create an individual newsletter , send test emails , send emails , and handle unsubscribe Optionally, fork cousin Vals to view subscribers , email yourself daily subscriber count , email yourself a reminder to write your next newsletter , and send test emails Frontend form You should have a form that hits the /send-verification API endpoint on submit. Remember to adjust the endpoint URL to that of your fork (or else you'll be signing people up for my website!). As a simple alternative, you could use the / handler of this Val, which returns a simple HTML form. Here's a simple example using React: const EmailSignupForm = () => {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
async function handleSubmit(e) {
e.preventDefault();
setName("");
setEmail("");
const formData = new FormData();
formData.append("name", name);
formData.append("email", email);
await fetch("https://petermillspaugh-emailSubscription.web.val.run/send-verification", {
method: "POST",
body: formData,
});
}
return (
<form onSubmit={handleSubmit}>
<label htmlFor="name">First name</label>
<input
id="name"
value={name}
onChange={(e) => setName(e.target.value)}
type="text"
required={true}
/>
<label htmlFor="email">Email</label>
<input
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
type="email"
required={true}
/>
<button type="submit">Subscribe</button>
</form>
);
}; You can see a full example on petemillspaugh.com: signup in the footer and code on github . You can add/remove input fields as you wish, of course (e.g. maybe you don't need a name, or maybe you want a how'd-you-hear-about-us field). Just adjust the SQL and frontend implementation accordingly. Frontend confirmation page Create a confirmation page that accepts an email and token as query params and calls the /confirm-verification endpoint. Simple example using React (and Next.js /page directory): const EmailConfirmationPage = () => {
const router = useRouter();
const { email, token } = router.query;
const [isConfirmed, setIsConfirmed] = useState(false);
useEffect(() => {
async function confirmEmail() {
if (!email || !token) return;
const response = await fetch(`https://petermillspaugh-emailSubscription.web.val.run/confirm-verification?email=${email}&token=${token}`, {
method: "PUT",
});
const { confirmed } = await response.json();
if (confirmed) setIsConfirmed(true);
}
confirmEmail();
}, [email, token]);
if (!isConfirmed) return null;
return (
<main>
<h1>You’re all set!</h1>
</main>
);
}; Full example is here and code is here . As an alternative, you could make /confirm-verification a GET route and have your email confirmation link sent by the first route be https://petermillspaugh-emailSubscription.web.val.run/confirm-verification?email=${email}&token=${token} (swapping in your namespace). That would be marginally faster, probably, but you'd still need some way to convey confirmation to the user (e.g. add some "You're all set" message to the return). Plus, the route writes to the subscribers table, so a PUT feels more appropriate. Notes Sending emails to people other than yourself on Val Town is a paid feature—if you want to stay on the free plan, you can go with a package like nodemailer or @sendgrid/mail
1
yawnxyz
diesel
Script
Diesel Diesel is a lightweight data manipulation library inspired by Tom Wright's Dasel, designed for easy querying and transformation of various data formats such as JSON, YAML, CSV, and TOML. It allows users to select, update, and delete data using a simple selector syntax. Heavily adapted from https://github.com/TomWright/dasel Features Multi-format Support : Works with JSON, YAML, CSV, and TOML. Dynamic Selectors : Use conditions to filter data dynamically. Function Support : Built-in functions for data manipulation (e.g., length, sum, avg). Easy Integration : Can be used in both Deno and Val Town environments. Usage import Diesel from "https://esm.town/v/yawnxyz/diesel";
async function main() {
const jsonData = `
{
"users": [
{"id": 1, "name": "Alice", "age": 30},
{"id": 2, "name": "Bob", "age": 25},
{"id": 3, "name": "Charlie", "age": 35}
],
"settings": {
"theme": "dark",
"notifications": true
}
}
`;****
const diesel = new Diesel(jsonData, 'json');
try {
console.log("All data:", await diesel.select(''));
console.log("All users:", await diesel.select('users'));
console.log("First user's name:", await diesel.select('users.[0].name'));
console.log("Users over 30:", await diesel.select('users.(age>30)'));
await diesel.put('settings.theme', 'light');
console.log("Updated settings:", await diesel.select('settings'));
// await diesel.delete('users.[1]');
// console.log("Users after deletion:", await diesel.select('users'));
console.log("Data in YAML format:");
console.log(await diesel.convert('yaml'));
console.log("Data in TOML format:");
console.log(await diesel.convert('toml'));
console.log("Number of users:", await diesel.select('users.length()'));
console.log("User names in uppercase:", await diesel.select('users.[*].name.toUpper()'));
} catch (error) {
console.error("An error occurred:", error);
}
}
main(); Installation To use Diesel, simply import it in your Deno project as shown in the usage example. License This project is licensed under the MIT License.
0
tmcw
acornExample
Script
acorn Acorn is a JavaScript parser written in JavaScript! It's one of the most established, and best, options - written by the same main contributor as CodeMirror and ProseMirror. At Val Town, we use Acorn internally, as well as CodeMirror for the code editor. With Acorn, you can parse JavaScript, modify it, and generate strings from that parsed JavaScript. It's a lot more robust and productive than processing source code as strings.
0
