stevekrouse
mayor of val town
Likes
452
html
@postpostscript
Script
html: create sanitized HTML using tagged templates Examples import { html } from "https://esm.town/v/postpostscript/html"
const unsafeInput = "<script>alert(1)</script>"
console.log(html`Value: ${unsafeInput}`)
// Value: <script>alert(1)</script> These can be combined -- HTML marked as safe (instance is RawHTML ) will be directly inserted: const scripts = html`<script>alert(1)</script>`
console.log(html`<head>
${scripts}
</head>`.toString())
// <head>
// <script>alert(1)</script>
// </head> To easily create HTTP Response outputs like @stevekrouse/html, use the htmlResponse utility: import { html, htmlResponse } from "https://esm.town/v/postpostscript/html";
export default function(req: Request) {
return htmlResponse`
Request URL: ${decodeURIComponent(req.url)}
`;
} Tests: @postpostscript/htmlTest
valToGH
@nbbaier
Script
valToGH A utility function for programmatically updating a GitHub repository with code retrieved from a Val. NOTE : This function currently does not change the contents of a file if it is already present. I will however be adding that functionality. Usage import { valToGH } from 'https://esm.town/v/nbbaier/valToGH';
const repo = "yourGitHubUser/yourRepo";
const val = "valUser/valName"; // or vals = ["valUser/valName1","valUser/valName2", ...]
const ghToken = Deno.env.get("yourGitHubToken");
const result = await valToGH(repo, val, ghToken);
console.log(result); Parameters repo : The GitHub repository in the format {user}/{repo} . val : A single repository in the format {user}/{val} . ghToken : Your GitHub token for authentication (must have write permission to the target repo) Options branch : Optional target branch. Default is main . prefix : Optional directory path prefix for each file. message : Optional commit message. Default is the current date and time in the format yyyy-MM-dd T HH:mm:ss UTC . ts : Optional flag to use a .ts extension for the committed file instead of the default .tsx .
esmTownTranspileDemo
@stevekrouse
Script
Val Town's esm.town Transpiles TypeScript and JSX for browsers When Val Town's code registry (esm.town) gets a request from a browser (which it can detect via the User Agent header), it transpiles that val's code to web-standard JavaScript be able to run in the browser. It doesn't do as much as other transpilers (such as esm.sh, such as rewriting npm: imports, etc). We may add that capability in the future. For now, if you want your npm imports to run in the browser, use https://esm.sh/package instead of npm:package . The below script demonstrates this transiplation behavior by fetching its own source code ( import.meta.url ) with the user agent of a browser. You can uncoment the line setting the browser agent if you want to see the difference in the output. Or you could just load this val's module URL in your browser to see the untranspiled TS. As of July 23, 2024, this is the code that determines when esm.town transpiles or not:
company
@stevekrouse
Email
Val Town Company *@val.town Email Routing This val forwards emails to addresses that don't exist to all of us at Val Town. For example, this forwards feedback@val.town to all of us. We achieve this by forwarding emails to this email handler, and this email handler forwards them along. To accomplish this without Val Town would require setting up a Google Group. I prefer doing it in code. Over time we will have more complex routing here.
sentry_crons_example
@gaprl
Cron
Sentry Crons monitoring for scheduled functions in val.town Use this val to monitor your schedule jobs for any issues and report them directly to Sentry Crons . How to configure After forking, find the DSN for your Sentry project by going to Settings > Projects > Select your project >Settings > Client Keys (DSN). Add your DSN to as a SENTRY_DSN in your val.town environment variables . Change the monitorConfig.schedule.value Crontab expression to match your job run. Replace the run() function with your scheduled function. Alter any other monitor config properties to better fit your scheduled function. Learn more . Benefits This val will automatically create and set up a Cron monitor in Sentry, and report all of your runs as check-ins. If your job ever misses a run or fails, Sentry will notify you. Any errors that occur in your scheduled function will be reported directly into Sentry:
paginatedResponse
@nbbaier
Script
Return a paginated response A helper function to take an array and return a paginated response. This is useful when defining one's own folders for pomdtr's vscode extension . Usage: const data = [...]
export default async function(req: Request): Promise<Response> {
return paginatedResponse(req, data);
} For demo usage in the context of the vscode extension see this val .
dateme
@stevekrouse
HTTP
Date Me Directory This is entry-point val for the source code for the Date Me Directory. Contributions welcome! This app uses Hono as the server framework and for JSX . The vals are stored in Val Town SQLite . Contributing Forking this repo should mostly work, except for the sqlite database. You'll need to create the table & populate it with some data. This script should do it, but I think it has a couple bugs. If you're interested in contributing to this project contact me or comment on this val and I'll get it working for ya! Todos [ ] Make the SQLite database forkable and build a widget/workflow for that, ie fix @stevekrouse/dateme_sqlite [ ] Require an email (that isn't shared publicly) [ ] Verify the email address with a "magic link" [ ] Refactor Location to an array of Lat, Lon [ ] Geocode all the existing locations [ ] Add a geocoder map input to the form [ ] Allow selecting multiple location through the form [ ] Profile performance & speed up site, possibly add more caching [ ] Let people edit their forms [ ] Featured profiles
tracing
@saolsen
Script
Opentelemetry Tracing for Vals! Enables Opentelemetry tracing for vals.
Exports two functions, init and traced_handler .
init will set up opentelemetry. For how to use it see this example val . By default, traces log to the console but if you set HONEYCOMB_API_KEY it'll also push the traces to honeycomb.
In the future we can add more export targets for other services. I'm also thinking about making a val to display them. traced_handler is a wrapper for your handler you can use on an HTTP val. Just pass it your HTTP function and export it as the default and it'll trace every request. Here's a screenshot of what the honeycomb view of a trace from my connect playing val looks like.
compress_response
@stevekrouse
HTTP (deprecated)
Compress Response Isn't it cool that browsers can natively decompress stuff? There are a couple of supported compression algorithms: gzip (used below), compress , deflate , br . Learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Encoding If you don't add the content-encoding header, the gzip result looks like: ���������
�� �.��� � �����������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������YDA��"�� Which is incredibly short for a 500kb string! (Which shouldn't be surprising because it's just "hi" 250k times)