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)

Forked from maxm/simpleWikipediaInstantSearch

Developer Statistics This val lets you post statistics from your GitHub Actions runs to build charts of change over time. We do this by having a step at the end of our actions run like this: - name: devstats run: | curl -X "POST" "https://tmcw-devstats.web.val.run/" \ -H 'Authorization: Bearer ${{ secrets.DEVSTATS_TOKEN }}' \ -H 'Content-Type: application/json; charset=utf-8' \ -d $"{ \"name\": \"node_modules_kb\", \"value\": $(du -sk node_modules | awk '{print $1}') }" And setting a DEVSTATS_TOKEN value, which could be any short random value, both in Val Town environment variables and as a secret in your GitHub Actions configuration. Currently the name you attach to a statistic can be anything, and the value is expected to be a number.

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

A game where you guess when a movie was released. Man, those Disney movies are ancient !

Forked from janpaul123/VALLE

Forked from janpaul123/valTownChatGPT2

Fancy animated SVGs in readmes, along with centering and image sizing. <div align="center"><img width=200 src="https://gpanders.com/img/DEC_VT100_terminal.jpg"></div> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/comet.svg" /> </p> <p align="center"> <img src="https://maxm-animatedreadmesvg.web.val.run/custom text!" /> </p>

Clone of @maxm/staticChess but for Wordle. Every letter is a link. The game state is stored in the URL bar. You could do silly things like playing collaborative Wordle with your friends by trading links back and forth. Or undo any mistakes by clicking the back button. I also make it easy to generate a new game from any of your current game's guesses – to send to a friend. They key to these static games like this one and @maxm/staticChess is to figure out: a representation for your game state (the Game type ) how to encode/decode your game state into the URL ( base64-encoding JSON ) how to render your game state into HTML ( looping over guesses and making divs ) placing the links into your HTML in the right spots (on my on-screen keyboard ) prettify with CSS (for guesses and the keyboard )

Check it out here: https://chess.maxmcd.com Plain, brutalist, no bloat chess. Every page is only html and css. Every chess move is made by clicking a link. Send a link to your friend and they'll send you one back to make your move. No silly animations or slick interactivity to trip up your gameplay. When Google indexes this site will we successfully compute all possible chess moves? Functionality is quite limited, and things might be broken. Please let me know if you find bugs! Inspired by this HN discussion about sites that have all possible game states of tic-tac-toe. I plan on extending this to support real gameplay. I think it could be a nice simple interface for long form games with friends. Might also be fun to add a static AI to play against. Feel free to PR any changes if you'd like to see something added.

Client Side React Helper Example Usage /** @jsxImportSource https://esm.sh/react */ import { useState } from "https://esm.sh/react@18.2.0"; import react_http from "https://esm.town/v/stevekrouse/react_http?v=6"; export function App() { const [count, setCount] = useState(0); return ( <div> <h1>Example App</h1> <button onClick={() => setCount(count + 1)} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" > {count} </button> </div> ); } export default () => react_http({ component: App, sourceURL: import.meta.url, head: `<meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="https://cdn.tailwindcss.com"></script> <title>Example App</title>`, }); Gotchas Only use https imports The val with your React component will be imported in the browser. Thus, only use https imports in this val and any that it imports. Replace any npm: with https://esm.sh/ and everything should work great.

An interactive, runnable TypeScript val by saolsen