Consoler Dark: A Terminal-Themed Zola Blog with Neofetch Logos and In-Browser SurrealDB

2026-06-26T00:00:00+00:00

I wanted my blog to feel like a terminal — not in the lazy "monospace font and a green-on-black palette" way, but structurally. The model I kept coming back to was neofetch</code>: an ASCII distro logo on the left, a tidy key/value table of system info on the right. That layout is</em> a homepage. So I built one.</p>

The result is Consoler Dark</strong>, the Zola theme this site runs on. This is how it works, including the two parts I'm fondest of: a script that generates logos by scraping neofetch itself, and a database that runs entirely in your browser.</p>

Starting from after-dark</h2>
I didn't start from scratch. Consoler Dark is a fork of comfusion's after-dark</a>, a minimal Zola theme built on top of hack.css</a>. You can still see hack.css's fingerprints in the SCSS — the .hack</code> utility classes, the no-nonsense defaults. After-dark gave me a clean skeleton; I layered the terminal identity on top.</p>
The taxonomy setup is where I diverged most. Beyond the usual categories</code> and tags</code>, the site indexes series</code>, projects</code>, and authors</code> — that last one so I can credit the AI models I draft alongside as co-authors (this post included).</p>
The neofetch metaphor, in templates</h2>
The homepage and section headers render a .neofetch-header</code>: a logo block next to a tech_info</code> table driven straight from config.</p>
[extra.tech_info]
Title = "parkerjones.dev"
Framework = "Zola"
Theme = "Consoler Dark"
Hosting = "Github Pages"
</code></pre>
The template loops over those key/value pairs the way neofetch prints OS</code>, Kernel</code>, Uptime</code>. The nice property is that any page can override individual fields via page.extra.tech_info</code>, so a project page can advertise its own "system specs" while inheriting the site defaults. It's config-as-content, and it keeps the homepage honest — the chrome describes the actual stack.</p>
A few smaller touches round out the feel: an intro</code> keyframe fade so content boots in rather than flashing, a 16:9 responsive-iframe</code> helper for embeds, and :target</code> highlighting so deep links land with a visible cursor-style focus.</p>
@keyframes intro { 0% { opacity: 0; } 100% { opacity: 1; } }
main, footer { animation: intro 0.3s both; animation-delay: 0.15s; }
</code></pre>
Generating logos by scraping neofetch</h2>
Here's the part I enjoyed most. Neofetch ships ASCII art for hundreds</em> of distros, embedded right in its shell script as heredoc blocks. Rather than hand-draw anything, I wrote a Python script that fetches the raw neofetch source, parses out every logo, and converts each to an SVG.</p>
The parser keys off neofetch's own structure — each logo is a read -rd '' ascii_data <<'EOF' … EOF</code> block, and the distro name is in the case</code> line just above it:</p>
if "read -rd '' ascii_data <<'EOF'" in line:
    # walk backwards to the case label, e.g.  "Ubuntu"|"ubuntu")
    j = i - 1
    while j >= 0 and not re.search(r'\)$', lines[j].strip()):
        j -= 1
    distro_name = re.findall(r'"([^"]+)"', lines[j])[0]

    # collect everything up to the EOF sentinel
    ascii_block = []
    i += 1
    while lines[i].strip() != "EOF":
        ascii_block.append(lines[i]); i += 1
</code></pre>
Converting ASCII to SVG is just laying each line down as a <tspan></code> in a monospaced <text></code> element, sized from the longest line:</p>
char_width, line_height, font_size = 8, 18, 14
width  = max(len(l) for l in lines) * char_width + 10
height = len(lines) * line_height + 10
# one <text> with a <tspan dy="line_height"> per line
</code></pre>
Run it, and static/logos/</code> fills up with a clean SVG per distro — vector, themeable, no image assets to hand-maintain. When neofetch adds a logo, I re-run the script. The art stays in sync with upstream because upstream is the source of truth</em>. That's the kind of automation that pays for itself the first time you'd otherwise have copied ASCII art by hand.</p>
A database that runs in your browser</h2>
The detail that surprises people: Consoler Dark ships a WebAssembly build of SurrealDB</strong> and runs it client-side. There's no backend. The theme's js/main.js</code> boots an in-browser SurrealDB engine, fetches a /site.sql</code> file, pulls the SQL out of a <pre></code> tag, and executes it — all in the visitor's tab.</p>
import { Surreal } from "surrealdb";
import { surrealdbWasmEngines } from "@surrealdb/wasm";

const db = new Surreal({ engines: surrealdbWasmEngines() });
const sql = await fetchSQLFromPreTag();   // read /site.sql from a <pre>
</code></pre>
This is bundled with Vite. A couple of non-obvious settings were required to make a wasm database happy in a static-site context: an es2020</code> target plus top-level-await</code> support (the engine initializes asynchronously at import time), and excluding @surrealdb/wasm</code> from dependency pre-bundling so Vite doesn't mangle the wasm.</p>
build:    { target: 'es2020', outDir: 'static' },
esbuild:  { target: 'es2020', supported: { 'top-level-await': true } },
optimizeDeps: { exclude: ['@surrealdb/wasm'] },
</code></pre>
Why do this on a blog? Because I write about databases in the browser</a> and using SurrealDB as a site cache</a>, and a theme that is</em> the demo beats one that merely links to it. The dev workflow runs Zola and Vite in parallel so the static site and the wasm bundle rebuild together:</p>
"dev": "npm-run-all --parallel vite-serve zola-serve"
</code></pre>
The linkify experiment I rolled back</h2>
Not everything survived. I'd wired up a client-side linkify</a> pass that auto-detected #hashtags</code> in post text and rewrote them into links to the matching /tags/</code> page — Twitter-style tagging, for free, with no changes to how I wrote posts.</p>
formatHref: (href, type) =>
  type === 'hashtag' ? `/tags/${href.slice(1).toLowerCase()}` : href
</code></pre>
It worked, and I turned it off. Scanning every <p></code> and <span></code> on load and rewriting innerHTML</code> is a lot of DOM churn for a cosmetic feature, it fought with code blocks that legitimately contain #</code>, and "clever text rewriting at runtime" is exactly the kind of thing that quietly breaks a year later. The code's still in the repo behind a partial; the lesson is that shipping</em> and keeping</em> are different decisions, and a static site rewards restraint.</p>
Takeaways for rolling your own Zola theme</h2>

Fork something minimal.</strong> after-dark + hack.css gave me a correct baseline so I could spend my effort on identity, not resets.</li>
Drive chrome from config.</strong> The tech_info</code> table means the design describes the real stack and updates itself.</li>
Automate your assets from their upstream source.</strong> The neofetch scraper means I never hand-edit ASCII art.</li>
A static site can do more than you think.</strong> A wasm database in the client turned my theme into a live demo of the things I write about.</li>
Be willing to delete features that work.</strong> Linkify was the most "impressive" thing I built and the right call was to switch it off.</li>
</ul>
The theme is open source under MIT. If you want a blog that boots like a terminal and ships a database to every reader, the pieces are all here.</p>
— Parker Jones, parkerjones.dev</a></em></p>

Parker Jones Dev Blog - neofetch

Consoler Dark: A Terminal-Themed Zola Blog with Neofetch Logos and In-Browser SurrealDB