Test Blog

Posts

\n {postContents.map((markdown, i) => (\n \n ))}\n

,\n );\n }\n if (url.pathname.startsWith(\"/posts/\")) {\n const markdown = await readFile(url.pathname, import.meta.url);\n return html(\n

My blog!

\n {markdown}\n

,\n );\n }\n return new Response(\"Not found\", { status: 404 });\n}\n\nfunction html(children: React.ReactNode) {\n return new Response(\n renderToString(\n \n {children}\n ,\n ),\n {\n headers: { \"content-type\": \"text/html;\" },\n },\n );\n}\n","label",[150],"847f6192-1b37-11f0-9778-569c3dd06744","deno.json","847f6282-1b37-11f0-9778-569c3dd06744",["D",1744858570834],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[160],"d58d9ce8-1b37-11f0-a211-569c3dd06744","Layout.tsx","39797c14-1865-405b-b663-fbf3d1899c7a",8,["D",1744858706836],1,"/** @jsxImportSource npm:react@18.2.0 */\nimport type { ReactNode } from \"npm:react@18.2.0\";\n\nexport function Layout({ children }: { children: ReactNode }) {\n return (\n \n \n \n \n Test Blog\n \n \n \n {children}\n \n \n );\n}\n",[166],"8482434e-1b37-11f0-b1c4-569c3dd06744",".vtignore","848244f2-1b37-11f0-b1c4-569c3dd06744",4,["D",1744858570839],".git\n.DS_Store\nnode_modules\nvendor",[174],"52c12398-1b37-11f0-9141-569c3dd06744","posts","accc06dc-1d49-41da-b8cc-2e8b68adc2d7",["D",1744858487353],"directory",[181],"bd4eac0c-1b38-11f0-b953-569c3dd06744","components","bd4eacca-1b38-11f0-b953-569c3dd06744",14,["D",1744859095660],[187],"pulls","branches","forks","envVars",{"_199":62,"_201":62},"connections",{"_199":62,"_200":62},"count","unfilledCount","emptyCount",{"_42":186,"_31":187,"_29":188,"_151":-5,"_40":41,"_39":189,"_152":57,"_37":247,"_13":62,"_33":184,"_35":-5,"_23":24,"_157":-5,"_212":248,"_26":249},{"_42":239,"_31":240,"_29":241,"_151":188,"_40":41,"_39":242,"_152":24,"_37":243,"_13":62,"_33":34,"_35":244,"_23":24,"_157":-5,"_212":245,"_26":246},{"_42":235,"_31":32,"_29":30,"_151":188,"_40":41,"_39":14,"_152":57,"_37":236,"_13":62,"_33":34,"_35":36,"_23":24,"_157":-5,"_212":237,"_26":238},{"_42":180,"_31":181,"_29":182,"_151":-5,"_40":41,"_39":170,"_152":57,"_37":232,"_13":62,"_33":184,"_35":-5,"_23":24,"_157":-5,"_212":233,"_26":234},{"_42":224,"_31":225,"_29":226,"_151":182,"_40":41,"_39":227,"_152":57,"_37":228,"_13":176,"_33":20,"_35":229,"_23":24,"_157":-5,"_212":230,"_26":231},{"_42":173,"_31":174,"_29":175,"_151":-5,"_40":41,"_39":176,"_152":57,"_37":221,"_13":62,"_33":20,"_35":178,"_23":24,"_157":-5,"_212":222,"_26":223},{"_42":165,"_31":166,"_29":167,"_151":-5,"_40":41,"_39":168,"_152":24,"_37":218,"_13":170,"_33":34,"_35":171,"_23":24,"_157":-5,"_212":219,"_26":220},{"_42":159,"_31":160,"_29":161,"_151":-5,"_40":41,"_39":154,"_152":24,"_37":215,"_13":62,"_33":20,"_35":163,"_23":24,"_157":-5,"_212":216,"_26":217},{"_42":149,"_31":150,"_29":55,"_151":-5,"_40":41,"_39":60,"_152":57,"_37":211,"_13":154,"_33":155,"_35":156,"_23":24,"_157":-5,"_212":213,"_26":214},["D",1744859095793],"children",[],[150],["D",1744858570834],[],[160],["D",1744858706836],[],[166],["D",1744858570839],[],[174],"bd6a0146-1b38-11f0-a940-569c3dd06744","001-makingVtCli.md","847addd4-1b37-11f0-a750-569c3dd06744",17,["D",1744859095795],"![Introducing Vt](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/example-watch.webm)\n\nIntroducing VT: the official command line tool to edit, manage, and begin val\ntown projects right from your computer!\n\nVal town gives you a super fast, light, simple, and intuitive way to instantly\ncreate websites. But until now, this entire experience has been on a polished\nweb platform. There's a lot of reasons to want to work on your Val Town projects\nlocally. Maybe you want to work from the comfort of your favorite editor,\nwhether that's vscode, with your favorite extensions, theme, and keybinds, or\nNeovim. Or you want to access powerful local devtools, which are increasingly AI\npowered ones like Claude Code or AI powered IDEs. Maybe you want to use `git`,\nor some other version control system out side of Val Town. Or maybe you just\nwant to keep a back up of a Val Town project, or work offline. Now you can!\n\n# Finding the path\n\nThere's a lot of different paths we could take to engineer a local val town\ndevelopment experience.\n\n![Diagram from https://www.cs.cmu.edu/~./fp/courses/15213-s07/lectures/15-filesys/index.html](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/bcbdf72d-0875-4288-ab8c-3b06b1cace32.webp)\n\nOriginally, this project took the form of a fuse file system. Fuse is a Linux\nprotocol that lets you implement arbitrary file systems in userspace. By\nimplementing a fuse val town file system, all edits locally are instantly\nreflected on the val town website, and vice versa (if you update remotely, then\nif you try to save locally your editor will say something along the lines of\n\"more recent edits found, are you sure you want to write\"). Fuse is very\npowerful -- writes, reads, and all other file system syscalls can be handled\nwith whatever response you want.\n\nThis project was `vtfs`, a project with the goal of exposing val town\nfunctionality through a file system. Originally it was a side project of mine,\nbecause \"can I write the code in neovim\" was the first question I asked myself\nwhen I first saw Val Town. I love the elegance of a file being a website, and\nthought it would be fun to be able to do a \"touch website.ts\" to create them,\nvia the magic of fuse, and val town!\n\n[And so I built it](https://github.com/404wolf/valfs)! `valfs` was really cool:\nyou'd run `vt mount [dir]` and you'd get a folder with all of your vals in it.\n\nVt was built written in `golang` with\n[`go-fuse`](https://github.com/hanwen/go-fuse), because, I didn't want to deal\nwith C++ package management, and I wanted to try `go`.\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/37c9a2a8-3f0a-4b52-a9c7-cf7c0cc0799b.webp)\n\nUnfortunately `vtfs` no longer works anymore and because of breaking API\nchanges, and, while there was work in progress on `vtfs` to add support for val\ntown projects, development has paused on the project in favor of `vt`.\n\nWe decided to rewrite it, mostly for compatability reasons. Linux offers native\nfuse support, but MacOS and Windows definitely do not. For Mac, there's a\nproject called [MacFuse](https://macfuse.github.io/) that acts as a kernel\nextension to provide fuse support to Mac. However, it's not totally stable, and\n[Apple is deprecating kernel extensions](https://developer.apple.com/support/kernel-extensions/)\nand it may not be the best long term solution. There's a really cool project\ncalled [fuse-t](https://www.fuse-t.org/) that takes a different approach, where\nit implements the fuse protocol by forwarding fuse to NFS (network file system),\na protocol that Macs do natively support.\n\nEven though it's a total rewrite, though, many design choices for `vt` came from\n`vtfs`.\n\n# Going Git\n\n`vt` is heavily inspired by both `git` and [gh](https://cli.github.com/), the\ngithub CLI. There's elements like `vt push` and pull that are very `git`ty, and\nthings like `vt create` that act like `gh repo create`.\n\n![Gh browse](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/017b5db4-0379-4965-a94f-e9101a69b485.webp)\n\nOne handy `vt` command that we added is `vt browse`. `vt browse` opens up the\ncurrent project in a web browser. As we work on improving hybrid workflows with\nthe CLI and website, we will probably turn to `gh` to extend `vt browse`'s\nfunctionality.\n\n### The Meaning of `VT Pull` and `VT Push`\n\nUnlike `git`, where you have a `stage` and `commits`, `vt` only has a notion of\n`pushing` and `pulling`. This means that the local state could conflict in ways\nwith the remote state that could result in changes that we can't reconsile:\nlike, if you pull and you have newer changes locally, or If you push and there\nare newer changes in the remote.\n\n[We spent a while considering what pushing and pulling meant](https://github.com/val-town/vt/issues/45).\nThe conclusion we came to:\n\n- `pushing` is a forceful procedure. When you push we ensure that the remote\n state matches the local state, and by the end of the push the remote state\n should match the local state with no changes to the local state. This might\n sound scary, but we do versioning for projects, so in the worst case you could\n revert to an earlier version on the website and pull.\n- `pulling` is a \"graceful\" procedure. When you pull, you may receive\n modifications, deletions, creations, or renames to local files. For all of\n these changes except creations, pulling warns the user that local changes will\n be lost, and you need to confirm to complete the pull. This is implemented\n internally by doing a \"dry\" pull and checking what changes would be made\n locally.\n\nThis means that the contract for push is \"push the local state to make sure the\nremote matches it\" and pull is \"get the remote state and make sure the local\nstate matches it.\"\n\nSomething we get for free is `status`. `git status` looks at changes since the\nprevious commit, but `vt status` is identical to `vt push --dry-run`, and shows\nyou all the changes that would get pushed.\n\n### Beautiful Abstractions\n\nAs it turns out, many of the internal vt operations are able to easily piggyback\noff of one another. Like `vt push --dry-run` being the same as `vt status`,\n`vt pull` just does a `vt clone`, and then removes stuff that does not exist on\nthe remote that still exists locally, or `vt checkout` is somewhat like\n`vt pull`-ing the branch you are trying to check out. These abstractions make\ntesting and maintenance much easier.\n\n### Syncing\n\nOne idea that we had to solve this problem of \"the meaning of push and pull\" was\nto totally scrap both, and change the contract to \"sync to a consistent state.\"\nAs it turns out, syncing really just redirects all the complexity, and is still\nquite complicated to implement.\n\nI spent a while designing an algorithm for syncing, where the primary \"building\nblock\" of the algorithm was to \"walk\" through revisions and make changes to the\nlocal state incrementally. Syncing would start by pulling to incorporate all\nremote changes locally, and then push the remainder. It also would look at\nmodification times to try to guess which update should be kept in the case of\nlocal/remote conflicts.\n\n```\nProcedure Sync:\n 1. Pull Updates from Remote\n - While current_version < latest_version:\n - Fetch the delta for current_version --> current_version + 1 \n\t from the remote.\n - Apply the delta:\n - New File:\n - If the file does not exist locally:\n - Create it.\n - Else:\n - Keep the newer one (compare btime or maybe mtime?).\n - Deleted File:\n - If the local mtime <= than the remote delete time:\n - Delete it locally.\n - Else:\n - Do nothing, keep the local file. We'll push it back later.\n - Modified File:\n - If modified locally:\n - Keep the newer modification.\n - Else:\n - Update the local file with the remote version.\n - Increment current_version.\n\n 2. Push Local Changes\n - For each file in the local vt directory:\n - If file.mtime > remote_file.updatedAt:\n - Upload the file.\n - If the file exists locally but not on the server:\n - Upload it.\n\n 3. Cleanup Remote Server, Fix Local State\n - For each file in the recursive vt server listing:\n - If it does not exist locally, delete it from the remote.\n - Update the local file's mtime to be the server's\n - Update version: current_version++ (should match remote_version++).\n```\n\nWorking on `vt`, I came across a lot of really cool abstractions\n\n## The Live Dev Experience\n\nOne of the most important use cases of `vt` is \"watch\" functionality. From the\nbeginning, my plan for this was to implement \"git\" behavior first (pushing and\npulling), and then just doing file system watching to add live syncing using\n[Deno.watchFs](https://docs.deno.com/api/deno/~/Deno.watchFs) to handle file\nsystem events.\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/79892400-37e7-4ab3-a862-02b1ecb724ce.webp)\n\nOne particularly annoying challenge with `vt watch` was handling debouncing.\nDeno's standard library has an [async module](https://jsr.io/@std/async) that\nwas super useful for implementing `vt watch`. `vt watch` works by doing a `push`\ninitially, and then whenever local changes are made running another `vt push`.\nIt sounds super simple!\n\nThe issue is that there's a lot of different things that could trigger a \"files\nwere changed\" notification, and doing the push itself is one of them (the `.vt`\nfolder has files internally that get updated on a push). Instead of working out\nthe corner cases, I added a grace for post-pushing before we are able to detect\nfile changes again.\n\nI also debounce the push. Initially, I did this so that if you are doing large\namounts of file modifications we wait until you're done before starting the\npush, but it turns out this is more important because of how editors will create\nephemeral temporary files during writes. Now, when you edit a file, the editor\nmight create transient files, but as long as it gets rid of them within the\ndebounce the final state that gets pushed is the one that does not include those\ntemporary files.\n\n## Naming\n\n### Val Types\n\nOne of the initial concerns was how one could edit val metadata locally, if we\nare limited to the context of files.\n\n![](Screenshot%202025-04-16%20at%206.32.46%20PM.webp)\n\n`vtfs`'s approach to this was to pack all of the metadata for a val into the\nfile corresponding to it. For Val Town projects, it's a bit more complex,\nbecause there's metadata specific to vals in the project, and metadata for the\nentire project itself too. We decided that, in general, changing val metadata\nand other uniquely val town attributes is something that we would leave to the\nwebsite.\n\n`vtfs` would indicate the type of a given val locally as `foobar.H.tsx` (or, if\nverbose, `foobar.http.tsx`), which was a really nice pattern. If you wanted to\nchange the type of a val, you could just rename it to `foobar.script.tsx`. This\npattern, however, turns out not to work as well for projects because vals in\nprojects generally are suffixed with `.tsx`, so you would end up with\n`foobar.http.tsx.tsx`, and it would get messy quickly -- and there were some\nissues with Vscode not liking `.script.tsx`.\n\nInstead of doing strict enforcement -- maintaining a 1:1 mapping of file\nextension to val type -- `vt` intuits the val type only on creation. If you\ncreate a `foobar.tsx`, `vt` sees `.tsx` and assumes it's a script. If you create\n`foobar_http.tsx` or `foobar.http.tsx`, `vt` sees `.tsx`, knows it's a val and\nnot a file, and then guesses it's an `http` val. But it never will change it\nafter the fact, so you can change `foobar.http.tsx` to be a script val on the\nwebsite, and that's what it will continue to be going forward.\n\n## Renaming\n\nIt might seem simple at first, but if you think about it, detecting whether a\nfile was renamed is actually really tricky. If we move `foo.ts` to `bar.ts` how\ndo we know that it wasn't a `CREATE bar.ts` and `DELETE foo.ts`? Originally we\ndidn't plan on adding rename detection support to `vt` because of all the\ncomplexity that comes with rename detection.\n\n![](https://wolf-mermelstein-personal-website.s3.us-east-2.amazonaws.com/blob_file_1744341763182_recording.gif)\n\nBut then we realized that, without rename detection, if you move a val with\nconfiguration -- like cron config, or custom endpoint HTTP vals, then doing the\ndeletion/creation would cause you to lose all your config! And so, we added\nrename detection to `vt`.\n\nThe rename detection algorithm is a bit complicated -- it works by looking at\nall files that got deleted and that got created, and then considering a file as\nrenamed if a created file is sufficiently similar to a file that got deleted.\nWhen iterating over created files to see if a deleted file is similar enough to\none of them, we use some heuristics to filter out files that could not possibly\nbe similar enough, like the file length. Then we compute the Levenshtein\ndistance between a given deleted file and created file, and consider a given\ncreated file \"renamed\" if it is above some theshold similar to a deleted file,\nand if it is similar enough to multiple, then the one it is most similar to\n[as it turns out, Deno's standard library has a super efficient edit distance function](https://jsr.io/@std/text).\nGit does fancy\n[directory rename detection](https://git-scm.com/docs/directory-rename-detection/2.22.0),\nwhich is something that, at least for now, `vt` does not do.\n\nBecause rename detection is relatively expensive, it is internally implemented\nas an optional operation that doesn't always get used for every `vt` operation.\nFor example, there isn't a lot of reason to do rename detection for `vt pull` --\nit would really just be for reporting.\n\n## Blob Store\n\nFor `vtfs`, something I wanted to add early on was a way to \"mount\" your val\ntown blob store so that you could view, edit, and organize your blobs. With\nfuse, there's a ton of flexibility on how to implement inodes. `go-fuse`\nprovides a lot of nice abstractions. For totally static files like `deno.json` I\nwas using the\n[MemRegularFile](https://github.com/hanwen/go-fuse/blob/v2.7.2/fs/mem.go#L17)\nhelper, which makes it trivial to create an Inode with static text contents. For\nVals, I was doing it more manually, implementing the read and write methods for\na custom `ValFile` Inode myself. But for blobs, I wanted to handle reads and\nwrites by streaming the relavent portions of the file.\n\nWhen implementing my own write callback for fuse, I would be handling requests\nto write data to a region of a file (like, write 0001010101 starting at index 22\nbytes). Our `/v1/blob` endpoint is somewhat restrictive here. You can only write\nan entire file, or get an entire file. Handling this was really tricky -- I\ncould start a new upload to upload the entire state of the file, with the new\nchange made in the current write call, but if you're writing a lot of data to a\nfile (like if you `cp bigFile.png` to the folder that I was using to represent\nyour val town blobs), then there would typically be a burst of write requests to\nwrite to consecutive regions of the file.\n\nI spent a long time working on setting up a pipe where I would handle\nconsecutive writes, writes that start at index i, end at index i+k, and then a\nnew write that starts at index i+k+1, etc, as a special case. Eventually, I got\nsomething working!\n\nFor `vtfs` I was using\n[Openapi Generator](https://github.com/OpenAPITools/openapi-generator), and it\nturned out that Val Town's OpenAPI specification didn't accept file sizes on the\norder of my tests -- where the response would include the file size, it was an\ninteger, not a `format: int64` (long).\n\n![Working piped blob uploads](Pasted%20image%2020250414162037.webp)\n\nMaintaining this, and getting writes to work non consecutively continued to\nprove a huge challenge. `valfs` blob read/write support was a fun challenge to\nwork on, but was never totally reliable.\n",[],[181,225],["D",1744858487353],[206],[181],"bd6d4cb6-1b38-11f0-96e6-569c3dd06744",["D",1744859095809],[],[187,32],"bd62dc5e-1b38-11f0-9d58-569c3dd06744","Markdown.tsx","bd62dd8a-1b38-11f0-9d58-569c3dd06744",15,["D",1744859095791],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\nimport Markdown from \"https://esm.sh/react-markdown@9.1.0?deps=react@18.2.0\";\n\n// Custom renderer for markdown components to handle videos\nexport default function MarkdownWithVideo({ children }: { children: string }) {\n return (\n {\n // Check if the image URL is a video file\n const src = props.src || \"\";\n const isVideo = src.match(/\\.(mp4|webm|ogg|mov)$/i);\n\n if (isVideo) {\n return (\n \n );\n }\n\n // Regular image\n return ;\n },\n a: ({ node, ...props }) => {\n const href = props.href || \"\";\n const isVideo = href.match(/\\.(mp4|webm|ogg|mov)$/i);\n\n if (isVideo && props.children?.[0] === href) {\n return (\n \n );\n }\n\n return ;\n },\n }}\n >\n {children}\n \n );\n}\n",[],[187,240],["D",1744859095660],[203,204],[187],["D",1744858487353],{"_100":99,"_107":103},{"_100":99,"_101":-5,"_102":103,"_18":53,"_104":105,"_106":24},{"_13":85,"_31":86,"_42":41,"_87":43,"_88":89,"_90":91,"_92":49,"_93":94,"_95":96,"_97":44,"_98":99},"ctx",{"_78":-5,"_129":287,"_288":289,"_290":291,"_292":24,"_293":24,"_294":24,"_295":57,"_296":-5,"_297":-7,"_298":-7,"_299":62,"_300":24,"_301":24,"_302":-5,"_303":24,"_304":24,"_305":24,"_306":-5},"ENV",{"_258":259,"_260":261,"_262":86,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272,"_273":274,"_275":276,"_277":278,"_279":280,"_281":282,"_283":284,"_285":286},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v18