Showcase: VisiData.org Redesign
August 5, 2021
3 minute read
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.
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.
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.
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