Site Functions ​

When starting a static website with VitePress, you can quickly create new pages. The basic configuration has a sidebar navigation and can be configured in several ways.

As my website got bigger, I wanted to have additional features. These enhancements fall into three areas:

1. The presentation of the content should be appealing
2. It should be fun to navigate through the content
3. The content should not be outdated

Appealing Presentation ​

Attractiveness is in the eye of the beholder. I was looking for alternatives to boring walls of text. I improved typesetting with additional markdown-it-plugins. I use fenced code and icons to break up the text.

• The first real enhancement I tackled was the introduction of a dark mode toggle. At the time I was using VitePress v0.22.4 and unlike version 1.0, dark mode was not supported out of the box.

• The next improvement was the ability to easily embed diagrams in markup. I first evaluated existing plugins and than implemented static rendering for Mermaid and Graphviz graphs.

Vivid Navigation ​

The next group of features deals with different ways to find information in the disjointed jottings. Sure, the sidebar navigation and overview pages are a good start, but maybe I could come up with something more interactive and interesting?

My enhancements are:

• The Topic Map that lets you navigate the graph of jottings.
• The Keyword Search that knows the entire content.
• Automatic detection and insertion of Glossary entries
• Right Hand Sidebar with Table of Contents on main pages and search results on glossary pages.

Supervised Actuality ​

Finally, I wanted to prevent the content from being completely outdated. At least not unnoticed. I approached this by

• Insertion of Creation & Last Modification Dates on all pages.
• Automatic checking of external links and dependencies.
• Feedback from readers via the contact form.