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.
yawnxyz
og
HTTP
Ever wonder how GitHub generates their images when you share a repo on social media? In this example we're using satori and a Deno-friendly SVG WASM creating an OpenGraph image dynamically. E.g. this image can be used when sharing a website, and it'll show up in iMessage or Twitter / other socials. Generated images are cached in Valtown's Blob system. To check metatags, you can use https://metatags.io/?url=https://yawnxyz-og.web.val.run
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
jdan
dialog
HTTP
dialog Renders windows 98 dialog boxes as SVGs. Using satori and styles from 98.css Usage https://jdan-dialog.web.val.run/? w =200& h =110& title =Hello& caption =World w (default: 200): the width of the dialog h (default: 110): the height of the dialog title (default: "{title}"): the text in the title bar caption (default: "{caption}"): the caption text
3
jxnblk
dotcom
HTTP
Overengineered personal site and blog built on Val Town. https://jxnblk.com I started rebuilding my site using Val Town with the intent to create a val that would fetch static HTML and commit to a GitHub repo to host with gh-pages.
After building the site out, I found that the performance seemed good enough – at least in the US – to host it directly on Val Town. How it works The old site still exists at on GitHub at jxnblk/blog and includes the source markdown files, build script, and static JSON API.
I experimented with storing JSON in Val Town storage, but for now, the site imports a static JSON file for content.
This content is passed to the App React component that includes the entire HTML and handles routing.
The component is rendered using ReactStream which can render React to stream in Val Town and hydrate the component in the browser.
For performance reasons, I'm not using React on the client, but using small vanilla JS scripts to handle color modes. ReactStream also accepts middleware, and this site uses middleware to: Record server analytics in Val Town SQLite Respond to /robots.txt Handle redirects Generate an /rss.xml file Pass the blog content as props to the App component Set cache headers The favicon, avatar image, and OG images are also built in Val Town.
The avatar val exports an Avatar React component that's used in the site and
exposes an image service at https://jxnblk-avatar.web.val.run/ that accepts search parameters.
This image service is used for the site's favicon.
The blogOGImage val is used to generate PNG OG images from SVG and take search parameters to make dynamic
images for each blog post. Styling is handled by importing CSS from JxnblkCSS and rendering an inline <style> tag in the HTML head.
I experimented with some other approaches, but this seemed to be the simplest solution. What's next There are still some content issues in the markdown that need to be updated for the new site and there are likely bugs to fix.
If you spot anything, you can leave a comment on this val below.
I experimented with a few different approaches and plan to consolidate JxnblkApp and this val and clean up some of the structure of the site. I started building out a custom Reddit embed widget to help with front-end performance, but it's buggy and needs some work.
I'd also like to build a custom Val Town embed widget to add custom demo vals to future posts, but that's still a work in progress. Let me know what you think of the site so far, and if you have any ideas on how to make this better, I'd love to hear them!
2
pomdtr
esm
HTTP
Esm.town proxy (to get proper highlighting in VS Code) Usage https://pomdtr-esm.web.val.run/<author>/<val>@<version>/<filename> Supported filenames: mod.js mod.ts mod.jsx mod.tsx README.md Example: @pomdtr/serveGithubRepo -> https://pomdtr-esm.web.val.run/pomdtr/serveGithubRepo@34/mod.ts
0
