Typeset 0.2.0

Typeset 0.2.0 brings documentation-style layouts, a streamlined color system, and fixes for nested shortcodes. This release focuses on making Typeset more versatile for different types of content.

Documentation Sections

The biggest addition is a new documentation layout style. While the blog layout lists posts chronologically, the documentation layout provides hierarchical navigation for reference material.

Three-Column Layout

Documentation pages feature:

• Left sidebar - Navigation tree showing all pages in the docs section
• Center - Main content area
• Right sidebar - Table of contents for the current page

Nested Sections

Documentation can be organized into nested folders. The navigation sidebar displays the full hierarchy with expandable sections. Pages are ordered by a weight field in frontmatter, giving you full control over the structure.

Creating a Docs Section

To create documentation, add template = "docs_section.html" to your section's _index.md:

+++
title = "Documentation"
template = "docs_section.html"
sort_by = "weight"

[extra]
docs_root = "docs/_index.md"
+++

Individual pages use template = "docs_page.html" with a weight for ordering:

+++
title = "Installation"
template = "docs_page.html"
weight = 1

[extra]
docs_root = "docs/_index.md"
+++

Responsive Design

On mobile, the navigation sidebar becomes a slide-out menu accessible via a floating button. The table of contents moves inline above the content.

Improved Color Configuration

The color system is now simpler and more flexible. Two primary colors define your theme:

• accent_color - Highlights, active states, hover effects
• link_color - Hyperlinks

Dark Mode Support

You can now set separate colors for dark mode:

[extra]
# Light mode
accent_color = "#b8860b"
link_color = "#2563eb"

# Dark mode (optional)
accent_color_dark = "#d4a84b"
link_color_dark = "#60a5fa"

If dark variants aren't specified, the light mode colors are used in both modes.

Nested Shortcodes

Shortcodes can now be nested inside each other. For example, you can put a slideshow inside a spoiler:

This works because Zola processes inner shortcodes first, then the outer shortcode receives the rendered HTML along with any remaining markdown.

Upgrade Notes

For Existing Sites

The color configuration is backwards compatible. Your existing accent_color and link_color settings will continue to work. To customize dark mode separately, add the new _dark variants.

For Custom Shortcodes

If you've created shortcodes that might be nested inside others (like spoilers), ensure the output HTML is not indented. Indented HTML can be misinterpreted as code blocks by the markdown processor.

---

Check out the documentation section to see the new layout in action. The configuration guide covers all the color and typography options.