Showcase: VisiData.org Redesign
Published — 3 minute read
About VisiData #
VisiData is a terminal spreadsheet multitool that can handle millions of rows faster than other spreadsheet tools with a GUI, such as Excel or LibreOffice Calc.
Uses for VisiData range from spreadsheet and data analysis to converting between formats, and even ASCII art.
In June 2021, I was contracted by Saul Pwanson, creator of VisiData, to redesign the open source project’s website.
Goals for the design #
- Effectively communicate new releases and blog posts
- Better usability - consistent navigation and structure
- Easier discovery of documentation and features
- Searchable documentation with an easy-to-browse sidebar layout
- Statically generated from existing Markdown files, with templates as needed
- Easy to update and maintain by the VisiData creator and contributors
- RSS feeds for blog posts and releases
This website was originally built with a custom-made static site generator (SSG) and is a mix of regular Markdown files and reStructuredText parsed by pandoc.
I decided to use 11ty and TailwindCSS to build the site, as 11ty works well with Markdown files and the HTML-like Nunjucks templating language, combined with Tailwind, would be easy to update in the future.
Challenges overcome #
reStructured Text #
The docs were written in a mix of reStructuredText (RST) and Markdown, which proved a challenge as 11ty does not support RST. 11ty does support HTML files, so Saul wrote a script to run the docs through pandoc and output the resulting HTML files into a directory for 11ty.
Documentation search #
Updatable components #
The site features 3 JSON files for easy updating of sections of the site that see frequent updates, including the sponsors in the footer area, the header navigation, and the testimonials.
Design highlights #
Command demo #
This demo existed prior to the redesign on the old site. I gave it a facelift and designed the terminal output area to use a monospaced font. If you select the text, the
$ is left out, allowing for easy copy-and-paste of commands.
Features and Getting started #
Using CSS Grid, I designed a highlighted features area with one block spanning two columns, making for a neat effect.
Releases and Blog lists on homepage #
It’s important to quickly be able to catch up on what’s new with an open-source project. Adding the blog posts and releases list to the homepage was easily accomplished with 11ty’s post collections.
Before and after #