Drop #603 (2025-02-12): Suggest • Static • Search

Zed Edit Predictions (Beta); Data-Driven 11ty Site Generation; Pagefind

The Drop is back after the $WORK-fueled hiatus. Travel to and from San Diego was horrendous, and it took most of the weekend to recover from the ~36 hours it took me to get from San Diego back to the Maine compound. The missed Monday Drop was due to porting 47 Watch to Eleventy/11ty. We’ll talk more about that in one of the sections. Tuesday’s miss was due to the ~57 minutes of slumber between Monday and Tuesday thanks to the still unabated long covid resurgence.

Anyway…

Thanks to said 11ty work, today’s Drop showcases some of the tech used to make the new site.

Subscribe

TL;DR

(This is an AI-generated summary of today’s Drop using Ollama + llama 3.2 and a custom prompt.)

• Zed’s new beta edit predictions feature offers multi-line code completion and cross-language awareness, proving especially useful for mixed-language projects and repetitive code modifications.
• 11ty’s data-driven document generation capability enables efficient site building by pairing templates with JSON data files, eliminating the need for multiple individual markdown files.
• Pagefind provides framework-agnostic static site search functionality with efficient chunked indexing, supporting multiple languages and content types while maintaining small network payloads.

Zed Edit Predictions (Beta)

I’ve almost entirely switched to Zed for everything but R work (where I use RStudio, since I will not suffer Positron on my systems due to the Microsoft corruption); and, I do a great deal of work in Zed every day. Said work usually involves switching between many projects, which may be Go, Rust, Shell, or Java|TypeScript-based, plus a healthy dose of HTML, CSS, and Markdown mixed in.

I make heavy use of most of most of Zed’s features, including the AI Assitant Panel and inline AI assistance (which is incredibly handy in the Zed Alacritty terminal, too). I also let Zed collect telemetry, since I work for a startup who uses quite a bit of telemetry in our Visualizer app (so, “fair’s fair”). I mention that last bit as I guess I use Zed just enough for the Zed team to hit me up to test out their beta edit predictions feature. If you’ve used GitHub Copilot or Cody in VS Code/Codium, you’ve experienced edit predictions there. The TLDR for the feature is that Zed’s “Zeta” model has your file and project context at its disposal, keeps track of what you’ve been typing, and tries to pick what it thinks is the likely desired next bit of code or content. The video in the section header does a fine job showing off the functionality.

I got in the beta right before I started the 11ty conversion of 47 Watch, and I cannot fully descibe how handy it was to perform that port. I haven’t been using VS Codium much, of late, so I don’t know if Cody (et al.) has advanced there enough to have a simialr feature set, but — for starters — Zed’s completion works across multiple source code lines (i.e., it can — with oddly great accuracy — see you’re modifying one tag or bit of code, and can surmize you want to make similar changes to similar lines, and it just “does it” after you tab-complete). In a co-mingled project with a Go microservice back end and HTML/JS/CSS front-end, it has yet to get confused by said source diversity, and consistently suggests proper in-language completions for each file type. In fact, it does an uncanny job suggesting front end route code completions when a new back end REST API handler is added.

This new feature saved me hours during the porting process, and I’m writing this section mostly to suggest (heh) you give Zed a go again (if you’re not using it already), and try to get into the beta.

You can disable it entirely or per-project if you don’t want it showing up in, say, a markdown document like the one I’m editing right now, where I want my own words.

I’ll risk one more bit of extended blather and also note that it is super important to treat all the AI “code for me” tools as actual junior-grade assistants, where you sort of trust the output of the task you’ve given them, but also verify and fully grok said output before using it. And, (finally), I also highly suggest — every so often — doing some of the boring coding you may be offloading to LLM assistants. Think of them as katas that keep your brain grounded in the fundamentals. It’s way too easy to let certain skills atropy if you’re relying on a power tool to do the work for you.

Zed Bonus Section

I snuck in this bonus section since one of the few things that kept me from using Zed for editing the Drop posts was the lack of an HTML-based preview for markdown documents. The built-in previewer is fast and looks great, but I can’t copy from it, paste the contents into the WordPress editor, and have formatted content ready to go.

This Zed task snippet:

{  "label": "markdown preview",  "command": "pandoc ${ZED_RELATIVE_FILE} -f markdown -t html --metadata title=' ' --no-highlight -s --include-in-header=/Users/hrbrmstr/.cache/darkmeta.html -o /tmp/markdown-preview.html && open /tmp/markdown-preview.html"},

Uses pandoc with a dark-mode template (see below) to provide the functionality I’m used to from VS Codium. We’ll eventually talk more about Zed tasks in a future Drop.

<meta name="color-scheme" content="dark light"><style>* {  font-family: sans-serif;}html {  color: #e0e0e0;  background-color: #1a1a1a;}body {  margin: 0 auto;  max-width: 36em;  padding-left: 50px;  padding-right: 50px;  padding-top: 50px;  padding-bottom: 50px;  hyphens: auto;  overflow-wrap: break-word;  text-rendering: optimizeLegibility;  font-kerning: normal;}@media (max-width: 600px) {  body {    font-size: 0.9em;    padding: 12px;  }  h1 {    font-size: 1.8em;  }}@media print {  html {    background-color: white;  }  body {    background-color: transparent;    color: black;    font-size: 12pt;  }  p, h2, h3 {    orphans: 3;    widows: 3;  }  h2, h3, h4 {    page-break-after: avoid;  }}p {  margin: 1em 0;}a {  color: #7eb6ff;}a:visited {  color: #b19eff;}img {  max-width: 100%;}svg {  height: auto;  max-width: 100%;}h1, h2, h3, h4, h5, h6 {  margin-top: 1.4em;  color: #ffffff;}h5, h6 {  font-size: 1em;  font-style: italic;}h6 {  font-weight: normal;}ol, ul {  padding-left: 1.7em;  margin-top: 1em;}li > ol, li > ul {  margin-top: 0;}blockquote {  margin: 1em 0 1em 1.7em;  padding-left: 1em;  border-left: 2px solid #404040;  color: #b0b0b0;}code {  font-family: Menlo, Monaco, Consolas, 'Lucida Console', monospace;  font-size: 85%;  margin: 0;  hyphens: manual;  background-color: #2d2d2d;  color: #e0e0e0;  padding: 0.2em 0.4em;  border-radius: 3px;}pre {  margin: 1em 0;  overflow: auto;  background-color: #2d2d2d;  padding: 1em;  border-radius: 5px;}pre code {  padding: 0;  overflow: visible;  overflow-wrap: normal;  background-color: transparent;}.sourceCode {  background-color: transparent;  overflow: visible;}hr {  background-color: #404040;  border: none;  height: 1px;  margin: 1em 0;}table {  margin: 1em 0;  border-collapse: collapse;  width: 100%;  overflow-x: auto;  display: block;  font-variant-numeric: lining-nums tabular-nums;}table caption {  margin-bottom: 0.75em;}tbody {  margin-top: 0.5em;  border-top: 1px solid #404040;  border-bottom: 1px solid #404040;}th {  border-top: 1px solid #404040;  padding: 0.25em 0.5em 0.25em 0.5em;}td {  padding: 0.125em 0.5em 0.25em 0.5em;}header {  margin-bottom: 4em;  text-align: center;}#TOC li {  list-style: none;}#TOC ul {  padding-left: 1.3em;}#TOC > ul {  padding-left: 0;}#TOC a:not(:hover) {  text-decoration: none;}code{white-space: pre-wrap;}span.smallcaps{font-variant: small-caps;}div.columns{display: flex; gap: min(4vw, 1.5em);}div.column{flex: auto; overflow-x: auto;}div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}ul.task-list[class]{list-style: none;}ul.task-list li input[type="checkbox"] {  font-size: inherit;  width: 0.8em;  margin: 0 0.8em 0.2em -1.6em;  vertical-align: middle;}.display.math{display: block; text-align: center; margin: 0.5rem auto;}</style>

Data-Driven 11ty Site Generation

For my 47 Watch project, I edit Executive Orders (et al.) as markdown documents with a particular structure, which makes it easy to turn them into data. After each new edit session in 47 Watch, I rebuild a bunch of data files, including this 11ty master JSON file that contains all the posts nestled up into a nice data frame-esque structure.

While I could have had a script generate dozens (or, eventually hundreds) of 11thy markdown post files I did not have to. All I needed to do was ensure that aforelinked executive-orders.11tydata.json file was in the right directory and then take advantage of 11ty’s excellent data-driven document generation capability.

On build, 11ty will pair up the base template (in this case executive-order.njk) with that data file, then proceed to generate as many of the files as there are in the array. The index for that collection will also iterate over the array.

There are a few Community posts which will help you explore this feature further (or you can clone and play with the 47 Watch code directly).

Pagefind

Pagefind is an open-source library that addresses a common challenge in static site development: providing robust search capabilities without relying on external services or heavy server infrastructure.

I ended up using it for 47 Watch as it has a pretty innovative approach to handling large-scale search operations. The library employs a clever chunking mechanism for its search index, ensuring that folks only download the necessary portions of the index when performing searches. This architectural decision yields some pretty impressive performance metrics — imagine being able to implement full-text search across 10,000 pages while keeping the network payload under 300kB, including the library itself.

The framework-agnostic nature of Pagefind is especially valuable if you’re a gadfly like I am. Whether you’re working with modern frameworks like Next.js and SvelteKit or traditional static site generators like Jekyll and Hugo, Pagefind operates on the final built files, which eliminates the need for framework-specific implementations or affordances.

Pagefind’s also has multilingual support and that plus the rich filtering engine makes it particularly suitable for knowledge bases and research-oriented websites. The ability to customize content weighting and metadata tracking allows for fine-tuned search experiences that can be tailored to specific academic or research needs.

The library’s capability to index non-traditional content types through its NodeJS indexing library — including PDFs and JSON files — extends its utility beyond simple web page searches, making it a versatile tool for comprehensive digital resource management.

If you look at some of the provided demos (MDN, Godot documentation, and XKCD), you can observe for yourself how Pagefind maintains its performance.

All I really had to do was add "postbuild": "pagefind --site _site", to the package.json and it worked the first time.

I had originally intended to use Algolia, but I’m trying to avoid external third-party dependencies for this project, and Pagefind has all of the features I need for the immediate future.

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on:

• Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev
• Bluesky via https://bsky.app/profile/dailydrop.hrbrmstr.dev.web.brid.gy

Also, refer to:

• this post, and
• this post

to see how to access a regularly updated database of all the Drops with extracted links, and full-text search capability.

#1a1a1a #2d2d2d #404040 #7eb6ff #b0b0b0 #b19eff #e0e0e0 #ffffff #TOC