Hello! My name is Luke Harris, and I'm a web designer. I recently completed the new site design for VisiData.org, and wanted to outline the goals and challenges. Let's dive in.
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.
This site is now statically generated with 11ty, and uses TailwindCSS for styling.
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
If you come across any bugs or issues with the new design, let us know by opening an issue on the repo.
Originally posted on luke.work