Code previews

Colorscheme previews are generated by the Worker and rendered by the app.

Collecting colors

During the generate job, all potential colorscheme repositories are downloaded to the Worker environment.

A real Neovim instance is launched. The Worker tries discovered colorscheme names and supported backgrounds such as light and dark against a fixed Vim code sample.

Using extractor.nvim, the cursor moves through every token in the code sample. For each token, the extractor records the color and highlight group name under the cursor.

Stored data

Preview data is stored across two tables.

First, one row in colorschemes:

Column	Example
id	1
repository_id	397434315
name	catppuccin-macchiato

Then one row per highlight group in colorscheme_groups:

Column	Example
id	1
colorscheme_id	1
background	dark
name	NormalFg
hex_code	#CAD3F5

Code sample template

A fixed code sample is used to generate color data from a Vim colorscheme. The same sample is also rendered in the app as a shared preview template. Only the CSS custom properties change for each colorscheme.

The sample content is stored in the Worker at vim/code_sample.vim, and the app renders matching classes in its preview component.

Keep these files in sync when changing the preview sample:

Concern	File
Source text opened in Neovim during generation	Worker vim/code_sample.vim
Neovim runtime and extractor hook	Worker vim/init.lua
App JSX preview markup	App src/components/preview/codeSnippet/index.tsx
App preview config lines	App src/components/preview/colorschemeConfig/index.tsx
CSS classes that consume generated groups	App src/app/vim.css
CSS custom properties applied from data	App src/helpers/repositoryPage.ts, src/components/repositoryCard/

If the Worker extracts a new highlight group name, the app only uses it when a class or style reads the matching --colorscheme-* custom property.

Simplified rendered template:

<span class="vimLet">let</span><span class="vimFuncBody"> </span>
<span class="vimVar">l:raw_color</span><span class="vimFuncBody"> </span>
<span class="vimOper">=</span><span class="vimFuncBody"> </span>
<span class="vimFuncName">trim</span><span class="vimParenSep">(</span>
<span class="vimFuncVar">a:color</span><span class="vimOperParen">, </span>
<span class="vimString">'#'</span><span class="vimParenSep">)</span>

Applying colors

The classes generated in the HTML template match the exact names of color groups stored in the database.

Each class gets a CSS custom property that is overwritten for each colorscheme preview:

.vimParenSep {
  color: var(--colorscheme-vimParenSepFg);
}

That lets the app reuse one preview template while applying different colorscheme data.

Focused preview loop

Run generation against one repository before trying the full dataset:

bin/start import --repo morhetz/gruvbox
bin/start update --repo morhetz/gruvbox
bin/start generate --repo morhetz/gruvbox

Then run the app against the same database and inspect the repository page. If colors look wrong, check the generated colorscheme_groups rows, the app CSS class names, and the applied --colorscheme-* custom properties.