jxnblk

GitHub Sync Sync vals from Val Town to GitHub and back What it does Using a fork of this val, you can specify a list of your own vals to export to a GitHub repo. Log in to the web app rendered by this val to manually click the Export button, which will read the contents of your vals and commit those vals as files to your GitHub repo. If you set up your repo to use the webhook in this val, any changes pushed to the GitHub repo will be synced back to the vals in your list. How to use Fork this val Create a new repo on GitHub for syncing your vals to (it can be public or private as long as you use the appropriate token scope) Add a webhook to your repo that points to your val's /webhook route, e.g. https://jxnblk-githubsync.web.val.run/webhook Create a Secret for your webhook In your Val Town Settings , add that same secret as GHSYNC_WEBHOOK_SECRET On GitHub, create a new GitHub OAuth app Use your val's web URL for the Homepage URL Set your val's /auth route as the Authorization callback URL , e.g. https://jxnblk-githubsync.web.val.run/auth Copy your new OAuth app's Client ID and add that as the GHSYNC_CLIENT_ID env var in Val Town Create and copy a Client Secret and add that as the GHSYNC_CLIENT_SECRET env var in Val Town On GitHub, create a new personal access token Ensure the token has read access to Contents for your repo Copy the access token and add that as the GHSYNC_GITHUB_TOKEN env var in Val Town In your val, edit the config in the val to point to your repo's owner and repo Edit the valNames list to include the name of the vals you'd like to sync to the repo In your val's Settings , ensure that under Permissions , Vals has Read & Write access Open your val's web URL in a new tab and click Log in with GitHub You should see a page listing your vals to be exported and the GitHub repo to sync to (if not, see below ) Click the Export button to sync your vals to the GitHub repo. This can take a moment and you'll need to wait for the browser request to complete. Once your vals are in the GitHub repo, edit them on GitHub or push changes to ensure that the webhook is working. You can check the Requests and Logs tabs for your val to debug any errors Demo This val is synced to GitHub: gitHubSyncDemoVal This is the GitHub repo: jxnblk/valtown-github-sync Troubleshooting If after logging in, you see a How to use GitHub Sync page, ensure that the config.owner in your val matches your GitHub username If the webhook doesn't work, ensure you have the webhook properly configured in the GitHub repo and that the GHSYNC_WEBHOOK_SECRET env var in Val Town matches the value in your GitHub repo. Additional Features The following list are ideas for how to improve this val. Feel free to implement some of these ideas. I would consider accepting pull requests for these features. [ ] Check timestamps on Val Town and GitHub to prevent syncing when an older version would overwrite a newer one [ ] Add an authenticated webhook to sync from Val Town to GitHub (e.g. a Cron val could trigger export to keep vals synced) [ ] A "No-UI" version of this will only webhooks (authentication would need to be considered)

Minimal middleware for val town Demo Usage import { app, Middleware } from "https://esm.town/v/jxnblk/middleware"; const robots: Middleware = async (req, res, ctx) => { const url = new URL(req.url); if (url.pathname === "/robots.txt") { return new Response("User-agent: *\nAllow: /"); } return null; } const getData: Middleware = async (req, res, ctx) => { // do async work here... // add data to context ctx.hello = `hello ${new Date().toLocaleDateString()}`; // set headers res.headers.set("X-Hello", ctx.hello); // return null to pass to the next middleware return null; } const renderHTML: Middleware = async (req, res, ctx) => { const html = ` <h1>${ctx.hello}</h1> ` return new Response(html, { headers: { "Content-Type": "text/html", }, }); } export default app([ robots, getData, renderHTML, ])

Example CLI hosted on Val Town Install with Deno on your computer (name it whatever you want): deno install -n hello https://esm.town/v/jxnblk/hello_cli Run: hello Uninstall: deno uninstall hello Read the deno install docs

OG image service for https://val.town/v/jxnblk/dotcom – https://jxnblk.com

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!

React components for https://val.town/v/jxnblk/dotcom – https://jxnblk.com

Vanilla JS for https://val.town/v/jxnblk/dotcom – https://jxnblk.com

Jxnblk's SVG avatar React import { Avatar } from "https://esm.town/v/jxnblk/avatar"; Props <Avatar size={96} color="tomato" reverse={true} /> SVG import { svg } from "https://esm.town/v/jxnblk/avatar"; img <img src="https://jxnblk-avatar.web.val.run" alt="Jxnblk" /> img params https://jxnblk-avatar.web.val.run?size=96&color=tomato&reverse=true md 

CSS for https://val.town/v/jxnblk/dotcom – https://jxnblk.com

A test utility and badge to put in your val readme to show test suite status Example: Usage: Make a val Make a separate test suite HTTP val for the val you want to test Import describe and it utilities Write tests Add the badge to your readme, with the url parameter pointing to the test suite val's endpoint. Tests run whenever the test suite val or the badge is fetched import { describe, it } from "https://esm.town/v/jxnblk/test"; import { assertEquals } from "jsr:@std/assert@1"; export default describe("my test suite", () => { const sum = (a, b) => a + b; it("sums it up", () => { assertEquals(sum(1, 2), 3); }) }) Badge: [![][badge]][url] [badge]: https://jxnblk-test.web.val.run?url=YOUR_TEST_SUITE_ENDPOINT [url]: YOUR_TEST_SUITE_URL Example [![][badge]][url] [badge]: https://jxnblk-test.web.val.run?url=https://jxnblk-tunatestsuite.web.val.run [url]: https://www.val.town/v/jxnblk/tunaTestSuite

A game of riddles to play with your friends How to play To start a game, choose a 3-20 letter word. The game generates a riddle based on your word. Copy the link to share with your friends to see if they can guess the word. If they guess the word correctly, they get to pick a new word and can send you a new clue back. If they guess wrong, the next riddle is based on the word they guessed You can play with 2 or as many people as you want. You can follow a long chain, like the game Telephone or games can branch with multiple players. TODO [ ] Reload after updating the URL to support native share sheets [ ] Incorrect state / helpers [x] Trim and lowercase guesses

An interactive, runnable TypeScript val by jxnblk

@jsxImportSource npm:react

// Test without using this?

@jsxImportSource https://esm.sh/react@18.3.1

vimarkdown Try it now A VIM-mode markdown editor built with Val Town . Features Write markdown in the browser with VIM keybindings Minimal, focused UI Saves to localStorage Multiple color modes Markdown -> HTML preview (⌘+P) NOT mobile-friendly Fork this editor on Val Town to make it your own Inspired by iA Writer Made by Jxnblk TODO [ ] Add syntax highlighting to frontmatter block [ ] Support multiple fonts